refactor: StyledInput refactor -> Input components (#6733)

* feat: align style

* feat: new input components

* refactor: migrate to new input components

* refactor: rename component

* prepr

* chore: group inputs like buttons

* fix: lint

* feat: docs

* fix: lint

* fix: bugs

* prepr

* fix slug + adjust create server project

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/app-frontend/src/pages/instance/components/settings-modal/general-settings.vue

@@ -13,7 +13,7 @@ import {
 	Chips,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	TeleportOverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
@@ -367,7 +367,7 @@ const messages = defineMessages({
 			{{ formatMessage(messages.name) }}
 		</label>
 		<div class="flex">
-			<StyledInput
+			<Input
 				id="instance-name"
 				v-model="title"
 				autocomplete="off"

apps/app-frontend/src/pages/instance/components/settings-modal/hooks-settings.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-	Checkbox,
-	defineMessages,
-	injectNotificationManager,
-	StyledInput,
-	useVIntl,
-} from '@modrinth/ui'
+import { Checkbox, defineMessages, injectNotificationManager, Input, useVIntl } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/instance'
@@ -149,7 +143,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.preLaunch) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="pre-launch"
 			v-model="hooks.pre_launch"
 			autocomplete="off"
@@ -164,7 +158,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.wrapper) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="wrapper"
 			v-model="hooks.wrapper"
 			autocomplete="off"
@@ -179,7 +173,7 @@ const messages = defineMessages({
 		<h2 class="mt-6 m-0 text-lg font-semibold text-contrast">
 			{{ formatMessage(messages.postExit) }}
 		</h2>
-		<StyledInput
+		<Input
 			id="post-exit"
 			v-model="hooks.post_exit"
 			autocomplete="off"

apps/app-frontend/src/pages/instance/components/settings-modal/java-settings.vue

@@ -13,8 +13,8 @@ import {
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
+	Input,
 	Slider,
-	StyledInput,
 	useVIntl,
 } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'
@@ -208,7 +208,7 @@ const messages = defineMessages({
 						>Java {{ optimalJava?.parsed_version }}</span
 					>
 					<div class="flex gap-2 items-center">
-						<StyledInput
+						<Input
 							:model-value="activePath"
 							:disabled="!overrideJavaInstall"
 							autocomplete="off"
@@ -301,7 +301,7 @@ const messages = defineMessages({
 			:label="formatMessage(messages.customJavaArguments)"
 			class="my-2"
 		/>
-		<StyledInput
+		<Input
 			id="java-args"
 			v-model="javaArgs"
 			autocomplete="off"
@@ -317,7 +317,7 @@ const messages = defineMessages({
 			:label="formatMessage(messages.customEnvironmentVariables)"
 			class="mb-2"
 		/>
-		<StyledInput
+		<Input
 			id="env-vars"
 			v-model="envVars"
 			autocomplete="off"

apps/app-frontend/src/pages/instance/components/settings-modal/window-settings.vue

@@ -3,7 +3,7 @@ import {
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
-	StyledInput,
+	Input,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'
@@ -129,7 +129,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.widthDescription) }}
 				</p>
 			</div>
-			<StyledInput
+			<Input
 				id="width"
 				v-model="resolution[0]"
 				autocomplete="off"
@@ -148,7 +148,7 @@ const messages = defineMessages({
 					{{ formatMessage(messages.heightDescription) }}
 				</p>
 			</div>
-			<StyledInput
+			<Input
 				id="height"
 				v-model="resolution[1]"
 				autocomplete="off"

apps/app-frontend/src/pages/instance/share/shared-instance-members-table.vue

@@ -2,7 +2,7 @@
 	<div class="flex flex-col gap-4">
 		<div class="flex flex-col gap-4">
 			<div class="flex items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="search"
 					:icon="SearchIcon"
 					:placeholder="`Search ${rows.length} users...`"
@@ -151,8 +151,8 @@ import {
 	AutoLink,
 	Avatar,
 	defineMessages,
+	Input,
 	type SortDirection,
-	StyledInput,
 	Table,
 	type TableColumn,
 	truncatedTooltip,

apps/app-frontend/src/pages/instance/worlds/index.vue

@@ -21,7 +21,7 @@
 	<ReadyTransition :pending="worldsReadyPending">
 		<div v-if="dedupedWorlds.length > 0" class="flex flex-col gap-4">
 			<div class="flex flex-wrap items-center gap-2">
-				<StyledInput
+				<Input
 					v-model="searchFilter"
 					:icon="SearchIcon"
 					type="text"
@@ -141,8 +141,8 @@ import {
 	GAME_MODES,
 	type GameVersion,
 	injectNotificationManager,
+	Input,
 	ReadyTransition,
-	StyledInput,
 	useReadyState,
 	useVIntl,
 } from '@modrinth/ui'