@proj-airi/ui 0.7.2-beta.2 → 0.8.0-alpha.3

package/README.md

@@ -1,10 +1,12 @@
 # @proj-airi/ui
 
-A stylized UI component library built with [Reka UI](https://reka-ui.com/).
+A stylized UI component library built with [Reka UI](https://reka-ui.com/) and [UnoCSS](https://unocss.dev/).
 
 To preview the components, refer to the [`stage-ui`](../stage-ui) package for instructions for running the Histoire UI storyboard.
 
-## Usage
+## Get started
+
+Install the library:
 
 ```shell
 ni @proj-airi/ui -D # from @antfu/ni, can be installed via `npm i -g @antfu/ni`
@@ -13,6 +15,33 @@ yarn i @proj-airi/ui -D
 npm i @proj-airi/ui -D
 ```
 
+This library requires `unocss` with Attributify Mode and a style reset.
+
+First, install `unocss` if you haven't already:
+
+```shell
+pnpm i -D unocss
+```
+
+Next, in your `uno.config.ts`, add `presetAttributify()` to your presets array:
+```ts
+import { defineConfig, presetAttributify } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetAttributify(),
+    // ...your other presets
+  ],
+})
+```
+
+Finally, import the reset styles in your `main.ts`:
+```ts
+import '@unocss/reset/tailwind.css'
+```
+
+## Usage
+
 ```vue
 <script setup lang="ts">
 import { Button } from '@proj-airi/ui'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.7.2-beta.2",
+  "version": "0.8.0-alpha.3",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -21,14 +21,14 @@
     "./*": "./*"
   },
   "dependencies": {
-    "@vueuse/core": "^13.6.0",
+    "@vueuse/core": "^14.0.0",
     "floating-vue": "^5.2.2",
-    "reka-ui": "^2.4.1",
-    "vue": "^3.5.18"
+    "reka-ui": "^2.6.0",
+    "vue": "^3.5.24"
   },
   "devDependencies": {
     "@vue-macros/volar": "3.0.0-beta.8",
-    "vue-tsc": "^3.0.5"
+    "vue-tsc": "^3.1.4"
   },
   "scripts": {
     "typecheck": "vue-tsc --noEmit"

package/src/components/Form/Checkbox/Checkbox.vue

@@ -7,21 +7,25 @@ const modelValue = defineModel<boolean>({ required: true })
 <template>
   <SwitchRoot
     v-model="modelValue"
-    transition="background duration-250 ease-in-out"
-    outline="focus-within:none"
-    flex="~"
-    border="neutral-300 dark:neutral-700 data-[state=checked]:primary-200 data-[state=unchecked]:neutral-300 focus-within:neutral-800"
-    bg="data-[state=checked]:primary-400 data-[state=unchecked]:neutral-300 data-[state=checked]:dark:primary-400/80 dark:data-[state=unchecked]:neutral-800"
-    relative h-7 w="12.5" rounded-full
-    shadow="sm focus-within:shadow-neutral-800 focus-within:[0_0_0_1px] "
+    :class="[
+      'duration-250 ease-in-out',
+      'focus-within:outline-none',
+      'flex',
+      'border-neutral-300 dark:border-neutral-700 data-[state=checked]:border-primary-200 data-[state=unchecked]:border-neutral-300 focus-within:border-neutral-800',
+      'data-[state=checked]:bg-primary-400 data-[state=unchecked]:bg-neutral-300 data-[state=checked]:dark:bg-primary-400/80 dark:data-[state=unchecked]:bg-neutral-800',
+      'relative h-7 w-12.5 rounded-full',
+      'shadow-sm focus-within:shadow-none',
+    ]"
   >
     <SwitchThumb
-      my-auto size-6
-      flex items-center justify-center
-      translate-x="0.5 data-[state=checked]:full"
-      rounded-full bg-white text-xs shadow-xl
-      transition="transform duration-250 ease-in-out"
-      will-change-transform
+      :class="[
+        'my-auto size-6',
+        'flex items-center justify-center',
+        'translate-x-0.5 data-[state=checked]:translate-x-full',
+        'rounded-full bg-white text-xs',
+        'transition-transform duration-250 ease-in-out',
+        'will-change-transform',
+      ]"
     />
   </SwitchRoot>
 </template>

package/src/components/Form/Combobox/Combobox.vue

@@ -30,7 +30,7 @@ function toDisplayValue(value: T): string {
 </script>
 
 <template>
-  <ComboboxRoot v-model="modelValue" class="relative w-full">
+  <ComboboxRoot v-model="modelValue" :class="['relative', 'w-full']">
     <ComboboxAnchor
       :class="[
         'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-10 gap-[5px] outline-none',
@@ -84,10 +84,10 @@ function toDisplayValue(value: T): string {
           v-for="(group, index) in options"
           :key="group.name"
         >
-          <ComboboxGroup class="overflow-x-hidden">
+          <ComboboxGroup :class="['overflow-x-hidden']">
             <ComboboxSeparator
               v-if="index !== 0"
-              class="m-[5px] h-[1px] bg-neutral-400"
+              :class="['m-[5px]', 'h-[1px]', 'bg-neutral-400']"
             />
 
             <ComboboxLabel
@@ -114,11 +114,11 @@ function toDisplayValue(value: T): string {
               ]"
             >
               <ComboboxItemIndicator
-                class="absolute left-0 w-[25px] inline-flex items-center justify-center opacity-30"
+                :class="['absolute', 'left-0', 'w-[25px]', 'inline-flex', 'items-center', 'justify-center', 'opacity-30']"
               >
                 <div i-solar:alt-arrow-right-outline />
               </ComboboxItemIndicator>
-              <span class="line-clamp-1 overflow-hidden text-ellipsis whitespace-nowrap">
+              <span :class="['line-clamp-1', 'overflow-hidden', 'text-ellipsis', 'whitespace-nowrap']">
                 {{ option.label }}
               </span>
             </ComboboxItem>

package/src/components/Form/Field/FieldCheckbox.vue

@@ -10,9 +10,9 @@ const modelValue = defineModel<boolean>({ required: true })
 </script>
 
 <template>
-  <label flex="~ col gap-4">
-    <div flex="~ row" items-center gap-2>
-      <div flex="1">
+  <label class="flex flex-col gap-4">
+    <div class="flex flex-row items-center gap-2">
+      <div class="flex-1">
         <div class="flex items-center gap-1 text-sm font-medium">
           <slot name="label">
             {{ props.label }}

package/src/components/Form/Field/FieldInput.vue

@@ -17,8 +17,8 @@ const modelValue = defineModel<string>({ required: false })
 </script>
 
 <template>
-  <div max-w-full>
-    <label flex="~ col gap-4">
+  <div class="max-w-full">
+    <label class="flex flex-col gap-4">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
           <slot name="label">
@@ -44,14 +44,16 @@ const modelValue = defineModel<string>({ required: false })
         v-model="modelValue"
         :type="props.type"
         :placeholder="props.placeholder"
-        :class="props.inputClass"
-        border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
-        transition="all duration-200 ease-in-out"
-        text="disabled:neutral-400 dark:disabled:neutral-600"
-        cursor="disabled:not-allowed"
-        w-full rounded-lg px-2 py-1 text-sm outline-none
-        shadow="sm"
-        bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
+        :class="[
+          props.inputClass,
+          'focus:primary-300 dark:focus:primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
+          'transition-all duration-200 ease-in-out',
+          'text-disabled:neutral-400 dark:text-disabled:neutral-600',
+          'cursor-disabled:not-allowed',
+          'w-full rounded-lg px-2 py-1 text-sm outline-none',
+          'shadow-sm',
+          'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+        ]"
       />
     </label>
   </div>

package/src/components/Form/Field/FieldKeyValues.vue

@@ -28,8 +28,8 @@ watch([inputKey, inputValue], () => {
 </script>
 
 <template>
-  <div max-w-full>
-    <label flex="~ col gap-2">
+  <div class="max-w-full">
+    <label class="flex flex-col gap-2">
       <div>
         <div class="flex items-center gap-1 text-sm font-medium">
           <slot name="label">
@@ -43,18 +43,18 @@ watch([inputKey, inputValue], () => {
           </slot>
         </div>
       </div>
-      <div v-auto-animate flex="~ col gap-2">
+      <div v-auto-animate class="flex flex-col gap-2">
         <div
           v-for="(keyValue, index) in keyValues"
           :key="index"
-          w-full flex items-center gap-2
+          class="w-full flex items-center gap-2"
         >
           <InputKeyValue
             v-model:property-key="keyValue.key"
             v-model:property-value="keyValue.value"
             :key-placeholder="props.keyPlaceholder"
             :value-placeholder="props.valuePlaceholder"
-            w-full
+            class="w-full"
           />
           <button @click="emit('remove', index)">
             <div i-solar:minus-circle-line-duotone size="6" />

package/src/components/Form/Field/FieldRange.vue

@@ -17,29 +17,29 @@ const modelValue = defineModel<number>({ required: true })
 </script>
 
 <template>
-  <props.as flex="~ col gap-4">
-    <div flex="~ row" items-center gap-2>
-      <div flex="1">
-        <div class="flex items-center gap-1 text-sm font-medium">
+  <props.as :class="['flex flex-col gap-4']">
+    <div :class="['flex', 'flex-row', 'items-center', 'gap-2']">
+      <div :class="['flex-1']">
+        <div :class="['flex', 'items-center', 'gap-1', 'text-sm', 'font-medium']">
           <slot name="label">
             {{ label }}
           </slot>
         </div>
-        <div class="text-xs text-neutral-500 dark:text-neutral-400">
+        <div :class="['text-xs', 'text-neutral-500', 'dark:text-neutral-400']">
           <slot name="description">
             {{ description }}
           </slot>
         </div>
       </div>
-      <span font-mono>{{ props.formatValue?.(modelValue) || modelValue }}</span>
+      <span :class="['font-mono']">{{ props.formatValue?.(modelValue) || modelValue }}</span>
     </div>
-    <div flex="~ row" items-center gap-2>
+    <div :class="['flex', 'flex-row', 'items-center', 'gap-2']">
       <Range
         v-model="modelValue"
         :min="min || 0"
         :max="max || 1"
         :step="step || 0.01"
-        w-full
+        :class="['w-full']"
       />
     </div>
   </props.as>

package/src/components/Form/Field/FieldSelect.vue

@@ -17,25 +17,26 @@ const modelValue = defineModel<string>({ required: false })
 </script>
 
 <template>
-  <label flex="~ col gap-4">
+  <label :class="['flex', 'flex-col', 'gap-4']">
     <div
-      class="items-center justify-center"
       :class="[
+        'items-center',
+        'justify-center',
         props.layout === 'horizontal' ? 'grid grid-cols-3 gap-2' : 'grid grid-cols-2 gap-2',
       ]"
     >
       <div
-        class="w-full"
         :class="[
+          'w-full',
           props.layout === 'horizontal' ? 'col-span-2' : 'row-span-1',
         ]"
       >
-        <div class="flex items-center gap-1 break-words text-sm font-medium">
+        <div :class="['flex', 'items-center', 'gap-1', 'break-words', 'text-sm', 'font-medium']">
           <slot name="label">
             {{ props.label }}
           </slot>
         </div>
-        <div class="break-words text-xs text-neutral-500 dark:text-neutral-400">
+        <div :class="['break-words', 'text-xs', 'text-neutral-500', 'dark:text-neutral-400']">
           <slot name="description">
             {{ props.description }}
           </slot>

package/src/components/Form/Field/FieldTextArea.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import Textarea from '../Textarea/Textarea.vue'
+
+const props = withDefaults(defineProps<{
+  label?: string
+  description?: string
+  placeholder?: string
+  required?: boolean
+  textareaClass?: string
+  rows?: number
+}>(), {
+  rows: 6,
+})
+
+const modelValue = defineModel<string>({ required: false })
+</script>
+
+<template>
+  <div class="max-w-full">
+    <label class="flex flex-col gap-4">
+      <div>
+        <div class="flex items-center gap-1 text-sm font-medium">
+          <slot name="label">
+            {{ props.label }}
+          </slot>
+          <span v-if="props.required !== false" class="text-red-500">*</span>
+        </div>
+        <div class="text-xs text-neutral-500 dark:text-neutral-400" text-nowrap>
+          <slot name="description">
+            {{ props.description }}
+          </slot>
+        </div>
+      </div>
+      <Textarea
+        v-model="modelValue"
+        :rows="props.rows"
+        :placeholder="props.placeholder"
+        :class="props.textareaClass"
+      />
+    </label>
+  </div>
+</template>

package/src/components/Form/Field/FieldValues.vue

@@ -29,16 +29,16 @@ function removeItem(index: number) {
 </script>
 
 <template>
-  <div class="max-w-full">
-    <label class="flex flex-col gap-2">
+  <div :class="['max-w-full']">
+    <label :class="['flex', 'flex-col', 'gap-2']">
       <div>
-        <div class="flex items-center gap-1 text-sm font-medium">
+        <div :class="['flex', 'items-center', 'gap-1', 'text-sm', 'font-medium']">
           <slot name="label">
             {{ props.label }}
           </slot>
-          <span v-if="props.required !== false" class="text-red-500">*</span>
+          <span v-if="props.required !== false" :class="['text-red-500']">*</span>
         </div>
-        <div class="text-nowrap text-xs text-neutral-500 dark:text-neutral-400">
+        <div :class="['text-nowrap', 'text-xs', 'text-neutral-500', 'dark:text-neutral-400']">
           <slot name="description">
             {{ props.description }}
           </slot>
@@ -49,17 +49,17 @@ function removeItem(index: number) {
         <div
           v-for="(_, index) in items"
           :key="index"
-          class="w-full flex items-center gap-2"
+          :class="['w-full', 'flex', 'items-center', 'gap-2']"
         >
           <Input
             v-model="items[index]"
             :placeholder="props.valuePlaceholder"
-            class="w-90%"
+            :class="['w-90%']"
           />
-          <button i-solar:minus-circle-line-duotone size="6" class="min-w-20px w-10% flex text-red-500" @click="removeItem(index)" />
+          <button i-solar:minus-circle-line-duotone size="6" :class="['min-w-20px', 'w-10%', 'flex', 'text-red-500']" @click="removeItem(index)" />
         </div>
 
-        <div i-solar:add-circle-line-duotone size="6" class="mt-2 w-4/5 text-blue-500" @click="addItem" />
+        <div i-solar:add-circle-line-duotone size="6" :class="['mt-2', 'w-4/5', 'text-blue-500']" @click="addItem" />
       </div>
     </label>
   </div>

package/src/components/Form/Field/index.ts

@@ -3,4 +3,5 @@ export { default as FieldInput } from './FieldInput.vue'
 export { default as FieldKeyValues } from './FieldKeyValues.vue'
 export { default as FieldRange } from './FieldRange.vue'
 export { default as FieldSelect } from './FieldSelect.vue'
+export { default as FieldTextArea } from './FieldTextArea.vue'
 export { default as FieldValues } from './FieldValues.vue'

package/src/components/Form/Input/BasicInputFile.vue

@@ -37,8 +37,9 @@ function handleFileChange(e: Event) {
 
 <template>
   <label
-    relative cursor-pointer
     :class="[
+      'relative',
+      'cursor-pointer',
       props.class,
       isDragging
         ? [...Array.isArray(isDraggingClasses) ? isDraggingClasses : [isDraggingClasses]]

package/src/components/Form/Input/Input.vue

@@ -10,12 +10,14 @@ const modelValue = defineModel<string>({ required: false })
   <input
     v-model="modelValue"
     :type="props.type || 'text'"
-    border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
-    transition="all duration-200 ease-in-out"
-    text="disabled:neutral-400 dark:disabled:neutral-600"
-    cursor="disabled:not-allowed"
-    w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none
-    shadow="sm"
-    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
+    :class="[
+      'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
+      'transition-all duration-200 ease-in-out',
+      'text-disabled:neutral-400 dark:text-disabled:neutral-600',
+      'cursor-disabled:not-allowed',
+      'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
+      'shadow-sm',
+      'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+    ]"
   >
 </template>

package/src/components/Form/Input/InputFile.vue

@@ -9,7 +9,13 @@ defineProps<{
 
 <template>
   <BasicInputFile
-    class="min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6"
+    :class="[
+      'min-h-[120px] flex flex-col cursor-pointer items-center justify-center rounded-xl p-6',
+      'border-dashed border-2',
+      'transition-all duration-300',
+      'opacity-95',
+      'hover:scale-100 hover:opacity-100 hover:shadow-md hover:dark:shadow-lg',
+    ]"
     :is-not-dragging-classes="[
       'border-neutral-200 dark:border-neutral-700 hover:border-primary-300 dark:hover:border-primary-700',
       'bg-white/60 dark:bg-black/30 hover:bg-white/80 dark:hover:bg-black/40',
@@ -18,11 +24,6 @@ defineProps<{
       'border-primary-400 dark:border-primary-600 hover:border-primary-300 dark:hover:border-primary-700',
       'bg-primary-50/5 dark:bg-primary-900/5',
     ]"
-    border="dashed 2"
-    transition="all duration-300"
-    opacity-95
-    hover="scale-100 opacity-100 shadow-md dark:shadow-lg"
-
     :accept="accept"
     :multiple="multiple"
   >

package/src/components/Form/Input/InputKeyValue.vue

@@ -12,8 +12,8 @@ const value = defineModel<string>('propertyValue', { required: true })
 </script>
 
 <template>
-  <div flex="~ gap-2">
-    <Input v-model="key" :placeholder="props.keyPlaceholder" class="w-1/2" />
-    <Input v-model="value" :placeholder="props.valuePlaceholder" class="w-1/2" />
+  <div :class="['flex', 'gap-2']">
+    <Input v-model="key" :placeholder="props.keyPlaceholder" :class="['w-1/2']" />
+    <Input v-model="value" :placeholder="props.valuePlaceholder" :class="['w-1/2']" />
   </div>
 </template>

package/src/components/Form/Radio/Radio.vue

@@ -15,10 +15,10 @@ const modelValue = defineModel<string>({ required: true })
 <template>
   <label
     :key="id"
-    class="form_radio relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]"
-    transition="all duration-200 ease-in-out"
-    border="2 solid"
     :class="[
+      'form_radio relative flex cursor-pointer items-start rounded-xl p-3 pr-[20px]',
+      'transition-all duration-200 ease-in-out',
+      'border-2 border-solid',
       modelValue === value
         ? 'bg-primary-50 dark:bg-primary-900/20 border-primary-100 dark:border-primary-900 hover:border-primary-500/30 dark:hover:border-primary-400/30'
         : 'bg-white dark:bg-neutral-900/20 border-neutral-100 dark:border-neutral-900 hover:border-primary-500/30 dark:hover:border-primary-400/30',
@@ -34,20 +34,20 @@ const modelValue = defineModel<string>({ required: true })
       type="radio"
       :name="name"
       :value="value"
-      class="absolute opacity-0"
+      :class="['absolute opacity-0']"
     >
-    <div class="relative mr-3 mt-0.5 flex-shrink-0">
+    <div :class="['relative mr-3 mt-0.5 flex-shrink-0']">
       <div
-        class="size-5 border-2 rounded-full transition-colors duration-200"
         :class="[
+          'size-5 border-2 rounded-full transition-colors duration-200',
           modelValue === value
             ? 'border-primary-500 dark:border-primary-400'
             : 'border-neutral-300 dark:border-neutral-600',
         ]"
       >
         <div
-          class="absolute left-1/2 top-1/2 size-3 rounded-full transition-opacity duration-200 -translate-x-1/2 -translate-y-1/2"
           :class="[
+            'absolute left-1/2 top-1/2 size-3 rounded-full transition-opacity duration-200 -translate-x-1/2 -translate-y-1/2',
             modelValue === value
               ? 'opacity-100 bg-primary-500 dark:bg-primary-400'
               : 'opacity-0',
@@ -55,11 +55,11 @@ const modelValue = defineModel<string>({ required: true })
         />
       </div>
     </div>
-    <div class="w-full flex flex-col gap-2">
-      <div class="flex items-center">
+    <div :class="['w-full flex flex-col gap-2']">
+      <div :class="['flex items-center']">
         <span
-          class="line-clamp-1 font-medium"
           :class="[
+            'line-clamp-1 font-medium',
             modelValue === value
               ? 'text-neutral-700 dark:text-neutral-300'
               : 'text-neutral-700 dark:text-neutral-400',

package/src/components/Form/Range/ColorHueRange.vue

@@ -1,23 +1,32 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   disabled?: boolean
   class?: string
 }>()
 
-const colorValue = defineModel<string>('colorValue', {
-  type: String,
-  default: '',
+const modelValue = defineModel<number>({ required: true })
+
+const sliderValue = computed({
+  get: () => modelValue.value,
+  set: (value: number) => {
+    if (Number.isNaN(value))
+      return
+
+    modelValue.value = value
+  },
 })
 </script>
 
 <template>
   <input
-    v-model="colorValue"
+    v-model.number="sliderValue"
     type="range" min="0" max="360" step="0.01"
-    class="color-hue-range"
-    transition="all ease-in-out duration-250"
     :disabled="props.disabled"
     :class="[
+      'color-hue-range',
+      'transition-all ease-in-out duration-250',
       props.disabled ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer',
       props.class || '',
     ]"

package/src/components/Form/Textarea/Basic.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
 
 const events = defineEmits<{
   (event: 'submit', message: string): void
+  (event: 'pasteFile', files: File[]): void
 }>()
 
 const input = defineModel<string>({
@@ -23,6 +24,17 @@ function onKeyDown(e: KeyboardEvent) {
   }
 }
 
+function onPaste(e: ClipboardEvent) {
+  if (!e.clipboardData)
+    return
+
+  const { files } = e.clipboardData
+  if (files.length > 0) {
+    e.preventDefault()
+    events('pasteFile', Array.from(files))
+  }
+}
+
 // javascript - Creating a textarea with auto-resize - Stack Overflow
 // https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
 watch(input, () => {
@@ -46,5 +58,6 @@ watch(input, () => {
     v-model="input"
     :style="{ height: textareaHeight }"
     @keydown="onKeyDown"
+    @paste="onPaste"
   />
 </template>

package/src/components/Form/Textarea/Textarea.vue

@@ -7,12 +7,14 @@ const modelValue = defineModel<string>({ default: '' })
 <template>
   <BasicTextarea
     v-model="modelValue"
-    border="focus:primary-300 dark:focus:primary-400/50 2 solid neutral-100 dark:neutral-900"
-    transition="all duration-200 ease-in-out"
-    text="disabled:neutral-400 dark:disabled:neutral-600"
-    cursor="disabled:not-allowed"
-    w-full rounded-lg px-2 py-1 text-sm outline-none
-    shadow="sm"
-    bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
+    :class="[
+      'focus:border-primary-300 dark:focus:border-primary-400/50 border-2 border-solid border-neutral-100 dark:border-neutral-900',
+      'transition-all duration-200 ease-in-out',
+      'text-disabled:neutral-400 dark:text-disabled:neutral-600',
+      'cursor-disabled:not-allowed',
+      'w-full rounded-lg px-2 py-1 text-nowrap text-sm outline-none',
+      'shadow-sm',
+      'bg-neutral-50 dark:bg-neutral-950 focus:bg-neutral-50 dark:focus:bg-neutral-900',
+    ]"
   />
 </template>

package/src/composables/use-deferred-mount.ts

@@ -0,0 +1,20 @@
+import { onMounted, ref } from 'vue'
+
+export function useDeferredMount() {
+  const isReady = ref(false)
+
+  onMounted(() => {
+    // NOTICE: yield the main thread to the browser to paint.
+    // Other approaches work too, e.g. double RAF like here, or a setTimeout 0, or Suspense with async component, etc.
+    // Virtualization somewhat helps, however, virtual list may break Ctrl-F and Ctrl-A.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        isReady.value = true
+      })
+    })
+  })
+
+  return {
+    isReady,
+  }
+}

package/src/composables/use-theme.ts

@@ -0,0 +1,14 @@
+import { useDark, useToggle } from '@vueuse/core'
+
+const isDark = useDark({
+  disableTransition: true,
+})
+
+const toggleDark = useToggle(isDark)
+
+export function useTheme() {
+  return {
+    isDark,
+    toggleDark,
+  }
+}

package/src/fallback.css

@@ -0,0 +1,15 @@
+:root {
+  --chromatic-hue: 220.44;
+  --chromatic-chroma: calc(0.18 + (cos(var(--chromatic-hue) * 3.14159265 / 180) * 0.04));
+  --chromatic-chroma-50: calc(var(--chromatic-chroma) * 0.3);
+  --chromatic-chroma-100: calc(var(--chromatic-chroma) * 0.5);
+  --chromatic-chroma-200: calc(var(--chromatic-chroma) * 0.6);
+  --chromatic-chroma-300: calc(var(--chromatic-chroma) * 0.75);
+  --chromatic-chroma-400: calc(var(--chromatic-chroma) * 0.85);
+  --chromatic-chroma-500: var(--chromatic-chroma);
+  --chromatic-chroma-600: calc(var(--chromatic-chroma) * 1.15);
+  --chromatic-chroma-700: calc(var(--chromatic-chroma) * 1.1);
+  --chromatic-chroma-800: calc(var(--chromatic-chroma) * 0.85);
+  --chromatic-chroma-900: calc(var(--chromatic-chroma) * 0.7);
+  --chromatic-chroma-950: calc(var(--chromatic-chroma) * 0.5);
+}

package/src/index.ts

@@ -1,2 +1,6 @@
+import './fallback.css'
+
 export * from './components/Animations'
 export * from './components/Form'
+export * from './composables/use-deferred-mount'
+export * from './composables/use-theme'

package/tsconfig.json

@@ -32,7 +32,6 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.d.ts",
-    "src/**/*.mts",
     "src/**/*.vue"
   ],
   "exclude": [