prepr

apps/app-frontend/src/components/ui/ExportModal.vue

@@ -6,8 +6,8 @@ import {
 	defineMessages,
 	FileTreeSelect,
 	injectNotificationManager,
-	NewModal,
 	Input,
+	NewModal,
 	Textarea,
 	useVIntl,
 } from '@modrinth/ui'

apps/app-frontend/src/components/ui/friends/FriendsList.vue

@@ -5,8 +5,8 @@ import {
 	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
-	IntlFormatted,
 	Input,
+	IntlFormatted,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'

apps/app-frontend/src/components/ui/install_flow/AddServerToInstanceModal.vue

@@ -1,12 +1,6 @@
 <script setup>
 import { CheckIcon, PlusIcon, SearchIcon } from '@modrinth/assets'
-import {
-	Admonition,
-	Avatar,
-	ButtonStyled,
-	injectNotificationManager,
-	Input,
-} from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, injectNotificationManager, Input } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'
 import { convertFileSrc } from '@tauri-apps/api/core'
 import { computed, ref } from 'vue'

apps/app-frontend/src/components/ui/instance_settings/GeneralSettings.vue

@@ -7,8 +7,8 @@ import {
 	Chips,
 	defineMessages,
 	injectNotificationManager,
-	OverflowMenu,
 	Input,
+	OverflowMenu,
 	useVIntl,
 } from '@modrinth/ui'
 import { useQueryClient } from '@tanstack/vue-query'

apps/app-frontend/src/components/ui/instance_settings/HooksSettings.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-	Checkbox,
-	defineMessages,
-	injectNotificationManager,
-	Input,
-	useVIntl,
-} from '@modrinth/ui'
+import { Checkbox, defineMessages, injectNotificationManager, Input, useVIntl } from '@modrinth/ui'
 import { computed, ref, watch } from 'vue'
 
 import { edit } from '@/helpers/instance'

apps/app-frontend/src/components/ui/instance_settings/JavaSettings.vue

@@ -13,8 +13,8 @@ import {
 	Checkbox,
 	defineMessages,
 	injectNotificationManager,
-	Slider,
 	Input,
+	Slider,
 	useVIntl,
 } from '@modrinth/ui'
 import { open } from '@tauri-apps/plugin-dialog'

apps/app-frontend/src/components/ui/settings/instances/DefaultInstanceSettings.vue

@@ -2,8 +2,8 @@
 import {
 	defineMessages,
 	injectNotificationManager,
-	Slider,
 	Input,
+	Slider,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'

apps/app-frontend/src/components/ui/settings/instances/ResourceManagementSettings.vue

@@ -4,8 +4,8 @@ import {
 	ButtonStyled,
 	defineMessages,
 	injectNotificationManager,
-	Slider,
 	Input,
+	Slider,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'

apps/app-frontend/src/components/ui/world/modal/ServerModalBody.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import {
-	Combobox,
-	defineMessages,
-	type MessageDescriptor,
-	Input,
-	useVIntl,
-} from '@modrinth/ui'
+import { Combobox, defineMessages, Input, type MessageDescriptor, useVIntl } from '@modrinth/ui'
 
 import type { ServerPackStatus } from '@/helpers/worlds.ts'
 

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -154,8 +154,8 @@ import {
 	GAME_MODES,
 	type GameVersion,
 	injectNotificationManager,
-	ReadyTransition,
 	Input,
+	ReadyTransition,
 	useReadyState,
 	useVIntl,
 } from '@modrinth/ui'

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

@@ -150,8 +150,8 @@ import {
 	Avatar,
 	ButtonStyled,
 	defineMessages,
-	type SortDirection,
 	Input,
+	type SortDirection,
 	Table,
 	type TableColumn,
 	truncatedTooltip,

apps/frontend/src/components/analytics-dashboard/analytics-table/index.vue

@@ -193,10 +193,10 @@
 import { DownloadIcon, DropdownIcon, SearchIcon, UserIcon } from '@modrinth/assets'
 import {
 	ButtonStyled,
+	Input,
 	OverflowMenu,
 	type OverflowMenuOption,
 	Pagination,
-	Input,
 	Table,
 	useFormatNumber,
 	useVIntl,

apps/frontend/src/components/ui/ConfirmTransferOrgModal.vue

@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, Input } from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, Input, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{

apps/frontend/src/components/ui/ConfirmTransferProjectModal.vue

@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
 import { RightArrowIcon, TransferIcon, XIcon } from '@modrinth/assets'
-import { Admonition, Avatar, ButtonStyled, NewModal, Input } from '@modrinth/ui'
+import { Admonition, Avatar, ButtonStyled, Input, NewModal } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{

apps/frontend/src/components/ui/ProjectCollectionSaveButton.vue

@@ -52,14 +52,7 @@
 
 <script setup lang="ts">
 import { BookmarkIcon, PlusIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Checkbox,
-	commonMessages,
-	PopoutMenu,
-	Input,
-	useVIntl,
-} from '@modrinth/ui'
+import { ButtonStyled, Checkbox, commonMessages, Input, PopoutMenu, useVIntl } from '@modrinth/ui'
 import { computed, ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 

apps/frontend/src/components/ui/admin/AssignNoticeModal.vue

@@ -6,9 +6,9 @@ import {
 	ButtonStyled,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	NewModal,
 	ServerNotice,
-	Input,
 	TagItem,
 } from '@modrinth/ui'
 import { ref } from 'vue'

apps/frontend/src/components/ui/admin/BatchCreditModal.vue

@@ -36,12 +36,7 @@
 						<span class="text-lg font-semibold text-contrast"> Node hostnames </span>
 					</label>
 					<div class="flex items-center gap-2">
-						<Input
-							id="node-input"
-							v-model="nodeInput"
-							wrapper-class="w-32"
-							autocomplete="off"
-						/>
+						<Input id="node-input" v-model="nodeInput" wrapper-class="w-32" autocomplete="off" />
 						<ButtonStyled color="blue" color-fill="text">
 							<button class="shrink-0" @click="addNode">
 								<PlusIcon />
@@ -92,12 +87,7 @@
 					class="text-muted flex flex-col gap-2 rounded-lg border border-surface-5 bg-button-bg p-4"
 				>
 					<span>Hi {user.name},</span>
-					<Textarea
-						id="message-batch"
-						v-model="message"
-						:rows="3"
-						input-class="!bg-surface-3"
-					/>
+					<Textarea id="message-batch" v-model="message" :rows="3" input-class="!bg-surface-3" />
 					<span>
 						To make up for it, we've added {{ days }} day{{ pluralize(days) }} to your Modrinth
 						Servers subscription.
@@ -134,10 +124,10 @@ import {
 	Combobox,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
 	Input,
-	Textarea,
+	NewModal,
 	TagItem,
+	Textarea,
 	Toggle,
 } from '@modrinth/ui'
 import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'

apps/frontend/src/components/ui/admin/TransferModal.vue

@@ -196,13 +196,13 @@ import {
 	ButtonStyled,
 	Chips,
 	Combobox,
+	DateInput,
 	injectModrinthClient,
 	injectNotificationManager,
-	DateInput,
-	NewModal,
 	Input,
-	Textarea,
+	NewModal,
 	TagItem,
+	Textarea,
 	Toggle,
 } from '@modrinth/ui'
 import dayjs from 'dayjs'

apps/frontend/src/components/ui/auth/PasskeySettings.vue

@@ -215,8 +215,8 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
 	Input,
+	NewModal,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,

apps/frontend/src/components/ui/auth/SignUp.vue

@@ -162,8 +162,8 @@ import {
 	ButtonStyled,
 	commonMessages,
 	defineMessages,
-	IntlFormatted,
 	Input,
+	IntlFormatted,
 	useVIntl,
 } from '@modrinth/ui'
 import { useStorage } from '@vueuse/core'

apps/frontend/src/components/ui/create-project-version/stages/DetailsStage.vue

@@ -66,8 +66,8 @@
 import {
 	Chips,
 	defineMessages,
-	MarkdownEditor,
 	Input,
+	MarkdownEditor,
 	Tabs,
 	type TabsTab,
 	useVIntl,

apps/frontend/src/components/ui/create/CollectionCreateModal.vue

@@ -60,8 +60,8 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
 	Input,
+	NewModal,
 	Textarea,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/components/ui/create/OrganizationCreateModal.vue

@@ -82,8 +82,8 @@ import {
 	commonMessages,
 	defineMessages,
 	injectNotificationManager,
-	NewModal,
 	Input,
+	NewModal,
 	Textarea,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/components/ui/create/ProjectCreateModal.vue

@@ -139,8 +139,8 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
 	Input,
+	NewModal,
 	Textarea,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/components/ui/dashboard/withdraw-stages/LegacyPaypalDetailsStage.vue

@@ -110,9 +110,9 @@ import {
 	defineMessages,
 	financialMessages,
 	formFieldLabels,
+	Input,
 	IntlFormatted,
 	normalizeChildren,
-	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'

apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue

@@ -238,9 +238,9 @@ import {
 	getBlockchainIcon,
 	getCurrencyColor,
 	getCurrencyIcon,
+	Input,
 	IntlFormatted,
 	normalizeChildren,
-	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import { useDebounceFn } from '@vueuse/core'

apps/frontend/src/components/ui/dashboard/withdraw-stages/TremendousDetailsStage.vue

@@ -321,10 +321,10 @@ import {
 	financialMessages,
 	formFieldLabels,
 	formFieldPlaceholders,
+	Input,
 	IntlFormatted,
 	normalizeChildren,
 	paymentMethodMessages,
-	Input,
 	useDebugLogger,
 	useFormatMoney,
 	useVIntl,

apps/frontend/src/components/ui/moderation/GlobalDetailTracesList.vue

@@ -128,8 +128,8 @@ import {
 	EmptyState,
 	injectModrinthClient,
 	injectNotificationManager,
-	Pagination,
 	Input,
+	Pagination,
 } from '@modrinth/ui'
 
 import GlobalDetailLocalTraceCard from '~/components/ui/moderation/GlobalDetailLocalTraceCard.vue'

apps/frontend/src/components/ui/moderation/checklist/NodeRenderer.vue

@@ -30,8 +30,8 @@ import {
 	Checkbox,
 	Combobox,
 	injectProjectPageContext,
-	MarkdownEditor,
 	Input,
+	MarkdownEditor,
 } from '@modrinth/ui'
 import { renderHighlightedString, renderString } from '@modrinth/utils'
 import { inject, onMounted, reactive, watchEffect } from 'vue'

apps/frontend/src/pages/[type]/[project]/gallery.vue

@@ -304,8 +304,8 @@ import {
 	DropArea,
 	FileInput,
 	injectProjectPageContext,
-	NewModal as Modal,
 	Input,
+	NewModal as Modal,
 	Textarea,
 	useFormatDateTime,
 } from '@modrinth/ui'

apps/frontend/src/pages/[type]/[project]/settings/gallery.vue

@@ -294,8 +294,8 @@ import {
 	DropArea,
 	FileInput,
 	injectProjectPageContext,
-	NewModal as Modal,
 	Input,
+	NewModal as Modal,
 	Textarea,
 	useFormatDateTime,
 } from '@modrinth/ui'

apps/frontend/src/pages/[type]/[project]/settings/general.vue

@@ -4,9 +4,9 @@ import {
 	defineMessages,
 	IconSelect,
 	injectProjectPageContext,
+	Input,
 	type MessageDescriptor,
 	SettingsLabel,
-	Input,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useSavable,

apps/frontend/src/pages/[type]/[project]/settings/index.vue

@@ -21,12 +21,7 @@
 					<label for="project-name">
 						<span class="label__title">Name</span>
 					</label>
-					<Input
-						id="project-name"
-						v-model="name"
-						:maxlength="2048"
-						:disabled="!hasPermission"
-					/>
+					<Input id="project-name" v-model="name" :maxlength="2048" :disabled="!hasPermission" />
 				</div>
 
 				<div>

apps/frontend/src/pages/[type]/[project]/settings/permissions.vue

@@ -29,8 +29,8 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
-	IntlFormatted,
 	Input,
+	IntlFormatted,
 	useVIntl,
 } from '@modrinth/ui'
 import { isStaff } from '@modrinth/utils'

apps/frontend/src/pages/[type]/[project]/settings/server.vue

@@ -177,12 +177,12 @@ import {
 	injectModrinthClient,
 	injectNotificationManager,
 	injectProjectPageContext,
+	Input,
 	IntlFormatted,
 	MultiSelect,
 	normalizeChildren,
 	SERVER_LANGUAGES,
 	SERVER_REGIONS,
-	Input,
 	UnsavedChangesPopup,
 	usePageLeaveSafety,
 	useVIntl,

apps/frontend/src/pages/admin/analytics/events.vue

@@ -245,11 +245,11 @@ import {
 	DatePicker,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	MultiSelect,
 	type MultiSelectOption,
 	NewModal,
 	type SortDirection,
-	Input,
 	Table,
 	type TableColumn,
 } from '@modrinth/ui'

apps/frontend/src/pages/admin/billing/[user].vue

@@ -232,8 +232,8 @@ import {
 	DropdownSelect,
 	injectModrinthClient,
 	injectNotificationManager,
-	NewModal,
 	Input,
+	NewModal,
 	Toggle,
 	useFormatDateTime,
 	useRelativeTime,

apps/frontend/src/pages/admin/emails.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CopyIcon, LibraryIcon, PlayIcon, SearchIcon } from '@modrinth/assets'
-import { ButtonStyled, NewModal, Input } from '@modrinth/ui'
+import { ButtonStyled, Input, NewModal } from '@modrinth/ui'
 import { computed, onMounted, ref } from 'vue'
 
 import emails from '~/templates/emails'

apps/frontend/src/pages/admin/servers/notices.vue

@@ -45,12 +45,7 @@
 					placeholder="E.g. rXGtq2"
 					autocomplete="off"
 				/>
-				<Textarea
-					v-else
-					id="notice-message"
-					v-model="newNoticeMessage"
-					wrapper-class="h-32"
-				/>
+				<Textarea v-else id="notice-message" v-model="newNoticeMessage" wrapper-class="h-32" />
 			</div>
 			<div v-if="!newNoticeSurvey" class="flex items-center justify-between gap-2">
 				<label for="dismissable-toggle" class="flex flex-col gap-1">
@@ -266,15 +261,15 @@ import {
 	Combobox,
 	commonMessages,
 	CopyCode,
+	DateInput,
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
-	DateInput,
+	Input,
 	NewModal,
 	ServerNotice,
-	Input,
-	Textarea,
 	TagItem,
+	Textarea,
 	Toggle,
 	useFormatDateTime,
 	useRelativeTime,

apps/frontend/src/pages/collection/[collection].vue

@@ -411,6 +411,7 @@ import {
 	HorizontalRule,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NavTabs,
 	NewModal,
@@ -421,7 +422,6 @@ import {
 	ProjectCardList,
 	RadioButtons,
 	SidebarCard,
-	Input,
 	Textarea,
 	useCompactNumber,
 	useFormatDateTime,

apps/frontend/src/pages/dashboard/projects.vue

@@ -364,10 +364,10 @@ import {
 	defineMessages,
 	FloatingActionBar,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
 	ProjectStatusBadge,
-	Input,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/index.vue

@@ -449,9 +449,9 @@ import {
 	defineMessages,
 	DropdownSelect,
 	injectModrinthClient,
+	Input,
 	IntlFormatted,
 	ProjectCard,
-	Input,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/moderation/external-projects.vue

@@ -17,12 +17,7 @@
 				class="!w-full"
 			/>
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-proof">Proof</label>
-			<Textarea
-				id="edit-form-proof"
-				v-model="editForm.proof"
-				resize="both"
-				class="w-[30rem]"
-			/>
+			<Textarea id="edit-form-proof" v-model="editForm.proof" resize="both" class="w-[30rem]" />
 			<label class="mt-2 font-semibold text-contrast" for="edit-form-exceptions">
 				Exceptions / notes
 			</label>
@@ -135,8 +130,8 @@ import {
 	externalProjectLicenseStatusMessages,
 	ExternalProjectLookupCard,
 	injectModrinthClient,
-	NewModal,
 	Input,
+	NewModal,
 	Textarea,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/moderation/index.vue

@@ -148,8 +148,8 @@ import {
 	EmptyState,
 	injectModrinthClient,
 	injectNotificationManager,
-	Pagination,
 	Input,
+	Pagination,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/moderation/reports/index.vue

@@ -210,10 +210,10 @@ import {
 	commonMessages,
 	FloatingPanel,
 	injectModrinthClient,
+	Input,
 	MultiSelect,
 	type MultiSelectItem,
 	Pagination,
-	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import Fuse from 'fuse.js'

apps/frontend/src/pages/moderation/technical-review/index.vue

@@ -14,8 +14,8 @@ import {
 	commonMessages,
 	FloatingPanel,
 	injectModrinthClient,
-	Pagination,
 	Input,
+	Pagination,
 	Toggle,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/organization/[organization]/settings/projects.vue

@@ -365,10 +365,10 @@ import {
 	FloatingActionBar,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
 	ProjectStatusBadge,
-	Input,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/report.vue

@@ -293,12 +293,12 @@ import {
 	defineMessages,
 	formatReportItemType,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	MarkdownEditor,
 	type MessageDescriptor,
 	RadialHeader,
 	RadioButtons,
-	Input,
 	useVIntl,
 } from '@modrinth/ui'
 import type { Project, Report, User, Version } from '@modrinth/utils'

apps/frontend/src/pages/settings/account.vue

@@ -499,9 +499,9 @@ import {
 	ConfirmModal,
 	defineMessages,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
-	Input,
 	Table,
 	useVIntl,
 } from '@modrinth/ui'

apps/frontend/src/pages/settings/applications.vue

@@ -261,10 +261,10 @@ import {
 	FileInput,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
 	normalizeChildren,
-	Input,
 	Textarea,
 	useFormatDateTime,
 	useVIntl,

apps/frontend/src/pages/settings/pats.vue

@@ -216,9 +216,9 @@ import {
 	defineMessages,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	NewModal,
-	Input,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,

packages/ui/src/components/affiliate/AffiliateLinkCreateModal.vue

@@ -62,7 +62,7 @@ import { computed, ref, useTemplateRef } from 'vue'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'
 import { commonMessages } from '../../utils/common-messages'
-import { AutoBrandIcon, ButtonStyled, NewModal, Input } from '../index'
+import { AutoBrandIcon, ButtonStyled, Input, NewModal } from '../index'
 export type CreateAffiliateProps = { sourceName: string; username?: string }
 
 const props = withDefaults(

packages/ui/src/components/base/DropdownFilterBar.vue

@@ -386,8 +386,8 @@ import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
 import { useVirtualScroll } from '../../composables/virtual-scroll'
 import ButtonStyled from './ButtonStyled.vue'
-import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
 import Input from './inputs/Input.vue'
+import MultiSelect, { type MultiSelectItem } from './MultiSelect.vue'
 
 export type DropdownFilterBarOption = {
 	value: string

packages/ui/src/components/base/ManySelect.vue

@@ -74,7 +74,7 @@
 import { CheckIcon, DropdownIcon, SearchIcon } from '@modrinth/assets'
 import { computed, ref } from 'vue'
 
-import { Button, ButtonStyled, PopoutMenu, Input } from '../index'
+import { Button, ButtonStyled, Input, PopoutMenu } from '../index'
 import ScrollablePanel from './ScrollablePanel.vue'
 
 type Option = string | number | object

packages/ui/src/components/base/MarkdownEditor.vue

@@ -339,8 +339,8 @@ import NewModal from '../modal/NewModal.vue'
 import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
-import IntlFormatted from './IntlFormatted.vue'
 import Input from './inputs/Input.vue'
+import IntlFormatted from './IntlFormatted.vue'
 import Toggle from './Toggle.vue'
 
 const { formatMessage } = useVIntl()

packages/ui/src/components/base/index.ts

@@ -44,6 +44,8 @@ export { default as HeadingLink } from './HeadingLink.vue'
 export { default as HorizontalRule } from './HorizontalRule.vue'
 export { default as I18nDebugPanel } from './I18nDebugPanel.vue'
 export { default as IconSelect } from './IconSelect.vue'
+export type { InputAppearance, InputSize } from './inputs'
+export { DateInput, DatePicker, Input, InputClearButton, InputFrame, Textarea } from './inputs'
 export { default as IntlFormatted } from './IntlFormatted.vue'
 export type { JoinedButtonAction } from './JoinedButtons.vue'
 export { default as JoinedButtons } from './JoinedButtons.vue'
@@ -98,15 +100,6 @@ export { default as SmartClickable } from './SmartClickable.vue'
 export type { StackedAdmonitionItem, StackedAdmonitionType } from './StackedAdmonitions.vue'
 export { default as StackedAdmonitions } from './StackedAdmonitions.vue'
 export { default as StatItem } from './StatItem.vue'
-export {
-	DatePicker,
-	InputClearButton,
-	InputFrame,
-	DateInput,
-	Input,
-	Textarea,
-} from './inputs'
-export type { InputAppearance, InputSize } from './inputs'
 export type { SortDirection, TableColumn } from './Table.vue'
 export { default as Table } from './Table.vue'
 export type { TabsTab, TabsValue } from './Tabs.vue'

packages/ui/src/components/base/inputs/DateInput.vue

@@ -34,11 +34,7 @@
 
 		<template #trailing>
 			<span class="flex shrink-0 items-center gap-2">
-				<InputClearButton
-					v-if="showClearButton"
-					:label="clearLabel"
-					@click="clear"
-				/>
+				<InputClearButton v-if="showClearButton" :label="clearLabel" @click="clear" />
 				<button
 					type="button"
 					class="relative flex size-5 shrink-0 touch-manipulation cursor-pointer select-none items-center justify-center border-none bg-transparent p-0 text-secondary opacity-60 transition-colors before:absolute before:-inset-2 hover:text-contrast hover:opacity-100 focus-visible:text-contrast focus-visible:opacity-100 group-focus-within/input:text-contrast group-focus-within/input:opacity-100 disabled:pointer-events-none"

packages/ui/src/components/base/inputs/Input.vue

@@ -59,14 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-	type Component,
-	computed,
-	type InputHTMLAttributes,
-	mergeProps,
-	ref,
-	useAttrs,
-} from 'vue'
+import { type Component, computed, type InputHTMLAttributes, mergeProps, ref, useAttrs } from 'vue'
 
 import InputClearButton from './InputClearButton.vue'
 import InputFrame from './InputFrame.vue'

packages/ui/src/components/base/inputs/index.ts

@@ -1,7 +1,7 @@
+export { default as DateInput } from './DateInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
+export { default as Input } from './Input.vue'
 export { default as InputClearButton } from './InputClearButton.vue'
 export { default as InputFrame } from './InputFrame.vue'
-export { default as DateInput } from './DateInput.vue'
-export { default as Input } from './Input.vue'
 export { default as Textarea } from './Textarea.vue'
 export type { InputAppearance, InputSize } from './types'

packages/ui/src/components/billing/PurchaseModal.vue

@@ -148,11 +148,7 @@
 									class="h-4 w-4text-secondary opacity-60"
 								/>
 							</div>
-							<Input
-								:model-value="mutatedProduct.metadata.cpu"
-								disabled
-								wrapper-class="w-full"
-							/>
+							<Input :model-value="mutatedProduct.metadata.cpu" disabled wrapper-class="w-full" />
 						</div>
 						<div class="flex flex-col w-full gap-2">
 							<div class="font-semibold">Storage</div>
@@ -476,8 +472,8 @@ import { paymentMethodMessages } from '../../utils/common-messages'
 import Admonition from '../base/Admonition.vue'
 import Checkbox from '../base/Checkbox.vue'
 import Combobox from '../base/Combobox.vue'
-import Slider from '../base/Slider.vue'
 import Input from '../base/inputs/Input.vue'
+import Slider from '../base/Slider.vue'
 import AnimatedLogo from '../brand/AnimatedLogo.vue'
 import NewModal from '../modal/NewModal.vue'
 import LoaderIcon from '../servers/icons/LoaderIcon.vue'

packages/ui/src/components/external_files/AddFilesToAttributionGroupModal.vue

@@ -3,7 +3,7 @@ import type { Labrinth } from '@modrinth/api-client'
 import { CheckIcon, PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, NewModal, Input } from '#ui/components'
+import { ButtonStyled, Input, NewModal } from '#ui/components'
 import { commonMessages } from '#ui/utils'
 
 import { defineMessages, useVIntl } from '../../composables/i18n'

packages/ui/src/components/external_files/AddToExistingExternalProjectModal.vue

@@ -4,7 +4,7 @@ import { PlusIcon, SearchIcon, SpinnerIcon, XIcon } from '@modrinth/assets'
 import { useMutation } from '@tanstack/vue-query'
 import { computed, ref, useTemplateRef } from 'vue'
 
-import { Accordion, ButtonStyled, NewModal, Input } from '#ui/components'
+import { Accordion, ButtonStyled, Input, NewModal } from '#ui/components'
 
 import { injectModrinthClient, injectNotificationManager } from '../../providers'
 import AttributionGroupFilePicker from './AttributionGroupFilePicker.vue'

packages/ui/src/components/external_files/AddToGlobalPermissionsDatabaseModal.vue

@@ -9,8 +9,8 @@ import {
 	ButtonStyled,
 	Combobox,
 	type ComboboxOption,
-	NewModal,
 	Input,
+	NewModal,
 	Textarea,
 } from '#ui/components'
 

packages/ui/src/components/external_files/AttributionEditor.vue

@@ -14,14 +14,7 @@ import { builtinLicenses } from '@modrinth/utils'
 import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref, watch } from 'vue'
 
-import {
-	ButtonStyled,
-	Chips,
-	Combobox,
-	type ComboboxOption,
-	Input,
-	Textarea,
-} from '#ui/components'
+import { ButtonStyled, Chips, Combobox, type ComboboxOption, Input, Textarea } from '#ui/components'
 import { FileInput } from '#ui/components/base'
 import { commonMessages } from '#ui/utils'
 

packages/ui/src/components/external_files/ExternalProjectPermissionsCard.vue

@@ -30,7 +30,6 @@ import {
 	injectProjectPageContext,
 } from '../../providers'
 import type { QuickReply } from '../../providers/attribution-moderation'
-import Input from '../base/inputs/Input.vue'
 import Textarea from '../base/inputs/Textarea.vue'
 import AddFilesToAttributionGroupModal from './AddFilesToAttributionGroupModal.vue'
 import AddToExistingExternalProjectModal from './AddToExistingExternalProjectModal.vue'

packages/ui/src/components/flows/creation-flow-modal/components/CustomSetupStage.vue

@@ -161,8 +161,8 @@ import ButtonStyled from '../../../base/ButtonStyled.vue'
 import Chips from '../../../base/Chips.vue'
 import Collapsible from '../../../base/Collapsible.vue'
 import Combobox, { type ComboboxOption } from '../../../base/Combobox.vue'
-import PaperChannelBadge from '../../../base/PaperChannelBadge.vue'
 import Input from '../../../base/inputs/Input.vue'
+import PaperChannelBadge from '../../../base/PaperChannelBadge.vue'
 import type { LoaderVersionEntry, LoaderVersionType } from '../creation-flow-context'
 import { injectCreationFlowContext } from '../creation-flow-context'
 import { formatLoaderLabel } from '../shared'

packages/ui/src/components/flows/creation-flow-modal/components/FinalConfigStage.vue

@@ -5,10 +5,7 @@
 			class="flex flex-col gap-2"
 		>
 			<span class="font-semibold text-contrast">{{ formatMessage(messages.worldNameLabel) }}</span>
-			<Input
-				v-model="worldName"
-				:placeholder="formatMessage(messages.worldNamePlaceholder)"
-			/>
+			<Input v-model="worldName" :placeholder="formatMessage(messages.worldNamePlaceholder)" />
 		</div>
 
 		<div v-if="ctx.setupType.value === 'vanilla'" class="flex flex-col gap-2">
@@ -69,10 +66,7 @@
 					</template>
 				</IntlFormatted>
 			</span>
-			<Input
-				v-model="worldSeed"
-				:placeholder="formatMessage(messages.worldSeedPlaceholder)"
-			/>
+			<Input v-model="worldSeed" :placeholder="formatMessage(messages.worldSeedPlaceholder)" />
 			<span class="text-sm text-secondary">{{ formatMessage(messages.worldSeedDescription) }}</span>
 		</div>
 

packages/ui/src/components/modal/ShareModal.vue

@@ -167,12 +167,7 @@ defineExpose({
 						</button>
 					</ButtonStyled>
 				</div>
-				<Textarea
-					v-else
-					v-model="content"
-					resize="vertical"
-					wrapper-class="h-full w-[30rem]"
-				>
+				<Textarea v-else v-model="content" resize="vertical" wrapper-class="h-full w-[30rem]">
 					<template #trailing>
 						<ButtonStyled circular type="transparent">
 							<button

packages/ui/src/components/search/SearchSidebarFilter.vue

@@ -162,7 +162,9 @@
 								:class="{ 'rotate-180': showMore }"
 							/>
 							<span class="truncate text-sm">
-								{{ showMore ? formatMessage(messages.showFewer) : formatMessage(messages.showMore) }}
+								{{
+									showMore ? formatMessage(messages.showFewer) : formatMessage(messages.showMore)
+								}}
 							</span>
 						</button>
 					</div>
@@ -211,7 +213,7 @@ import { defineMessages, useVIntl } from '../../composables/i18n'
 import type { FilterOption, FilterType, FilterValue } from '../../utils/search'
 import Accordion from '../base/Accordion.vue'
 import ButtonStyled from '../base/ButtonStyled.vue'
-import { Checkbox, ScrollablePanel, Input } from '../index'
+import { Checkbox, Input, ScrollablePanel, Toggle } from '../index'
 import SearchFilterGroup from './SearchFilterGroup.vue'
 import SearchFilterOption from './SearchFilterOption.vue'
 

packages/ui/src/layouts/shared/browse-tab/layout.vue

@@ -5,10 +5,10 @@ import { computed, ref, toValue } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
+import Input from '#ui/components/base/inputs/Input.vue'
 import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
 import NavTabs from '#ui/components/base/NavTabs.vue'
 import Pagination from '#ui/components/base/Pagination.vue'
-import Input from '#ui/components/base/inputs/Input.vue'
 import ProjectCard from '#ui/components/project/card/ProjectCard.vue'
 import ProjectCardList from '#ui/components/project/ProjectCardList.vue'
 import SearchFilterControl from '#ui/components/search/SearchFilterControl.vue'

packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue

@@ -162,10 +162,7 @@
 				<span class="font-semibold text-contrast">
 					{{ formatMessage(messages.nameLabel) }}
 				</span>
-				<Input
-					v-model="instanceName"
-					:placeholder="formatMessage(messages.namePlaceholder)"
-				/>
+				<Input v-model="instanceName" :placeholder="formatMessage(messages.namePlaceholder)" />
 			</div>
 
 			<div class="flex flex-col gap-2.5">
@@ -263,8 +260,8 @@ import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Chips from '#ui/components/base/Chips.vue'
 import Combobox, { type ComboboxOption } from '#ui/components/base/Combobox.vue'
-import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
 import Input from '#ui/components/base/inputs/Input.vue'
+import LoadingIndicator from '#ui/components/base/LoadingIndicator.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectFilePicker } from '#ui/providers'

packages/ui/src/layouts/shared/content-tab/components/modals/ModpackContentModal.vue

@@ -16,8 +16,8 @@ import Avatar from '#ui/components/base/Avatar.vue'
 import BulletDivider from '#ui/components/base/BulletDivider.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import Checkbox from '#ui/components/base/Checkbox.vue'
-import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
 import Input from '#ui/components/base/inputs/Input.vue'
+import type { Option as OverflowMenuOption } from '#ui/components/base/OverflowMenu.vue'
 import NewModal from '#ui/components/modal/NewModal.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { injectPageContext } from '#ui/providers/page-context'

packages/ui/src/layouts/shared/content-tab/layout.vue

@@ -22,8 +22,8 @@ import { computed, nextTick, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
-import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
 import Input from '#ui/components/base/inputs/Input.vue'
+import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
 import { useDebugLogger } from '#ui/composables/debug-logger'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages, formatContentTypeSentence } from '#ui/utils/common-messages'

packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue

@@ -226,8 +226,8 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
-import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
 import Input from '#ui/components/base/inputs/Input.vue'
+import OverflowMenu from '#ui/components/base/OverflowMenu.vue'
 import { defineMessages, useVIntl } from '#ui/composables/i18n'
 import { commonMessages } from '#ui/utils/common-messages'
 

packages/ui/src/layouts/shared/server-settings/pages/network.vue

@@ -223,7 +223,7 @@ import {
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, nextTick, ref } from 'vue'
 
-import { ButtonStyled, ConfirmModal, NewModal, Input, Table, TagItem } from '#ui/components'
+import { ButtonStyled, ConfirmModal, Input, NewModal, Table, TagItem } from '#ui/components'
 import type { TableColumn } from '#ui/components/base'
 import { useServerPermissions } from '#ui/composables/server-permissions'
 import {

packages/ui/src/layouts/wrapped/AccountProfileSettings.vue

@@ -112,11 +112,7 @@
 				<h2 class="m-0 text-lg font-semibold text-contrast">
 					{{ formatMessage(messages.bioTitle) }}
 				</h2>
-				<Textarea
-					id="bio-field"
-					v-model="current.bio"
-					:error="current.bio.length > 160"
-				/>
+				<Textarea id="bio-field" v-model="current.bio" :error="current.bio.length > 160" />
 				<div class="text-secondary" :class="{ 'text-red': current.bio.length > 160 }">
 					{{ current.bio.length }}/160
 				</div>
@@ -137,9 +133,9 @@ import Avatar from '#ui/components/base/Avatar.vue'
 import ButtonStyled from '#ui/components/base/ButtonStyled.vue'
 import EmptyState from '#ui/components/base/EmptyState.vue'
 import FileInput from '#ui/components/base/FileInput.vue'
-import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
 import Input from '#ui/components/base/inputs/Input.vue'
 import Textarea from '#ui/components/base/inputs/Textarea.vue'
+import IntlFormatted from '#ui/components/base/IntlFormatted.vue'
 import { defineMessages, useVIntl } from '#ui/composables'
 import { type AuthUser, injectAuth, injectNotificationManager } from '#ui/providers'
 import { commonMessages } from '#ui/utils'

packages/ui/src/layouts/wrapped/hosting/manage/index.vue

@@ -238,12 +238,12 @@ import {
 	injectAuth,
 	injectModrinthClient,
 	injectNotificationManager,
+	Input,
 	IntlFormatted,
 	ModrinthServersPurchaseModal,
 	ResubscribeModal,
 	ServerListEmpty,
 	ServersGuestPlanModal,
-	Input,
 	useServerBackupDownload,
 	useVIntl,
 } from '@modrinth/ui'