@proj-airi/ui 0.9.0-alpha.8 → 0.9.0-beta.1

package/README.md

@@ -58,11 +58,12 @@ import { Button } from '@proj-airi/ui'
     * [TransitionVertical](src/components/Animations/TransitionVertical.vue)
 * [Form](src/components/Form)
     * [Checkbox](src/components/Form/Checkbox)
+    * [Select](src/components/Form/Select)
     * [Field](src/components/Form/Field)
     * [Input](src/components/Form/Input)
     * [Radio](src/components/Form/Radio)
     * [Range](src/components/Form/Range)
-    * [Select](src/components/Form/Select)
+    * [ComboboxSelect](src/components/Form/Select)
     * [Textarea](src/components/Form/Textarea)
 
 ## License

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@proj-airi/ui",
   "type": "module",
-  "version": "0.9.0-alpha.8",
+  "version": "0.9.0-beta.1",
   "description": "A collection of UI components that used by Project AIRI",
   "author": {
     "name": "Moeru AI Project AIRI Team",
@@ -24,12 +24,12 @@
   "dependencies": {
     "@vueuse/core": "^14.2.1",
     "floating-vue": "^5.2.2",
-    "reka-ui": "^2.8.2",
-    "vue": "^3.5.25"
+    "reka-ui": "^2.9.2",
+    "vue": "^3.5.30"
   },
   "devDependencies": {
     "@vue-macros/volar": "3.0.0-beta.8",
-    "vue-tsc": "^3.1.8"
+    "vue-tsc": "^3.2.6"
   },
   "scripts": {
     "typecheck": "vue-tsc --noEmit"

package/src/components/form/checkbox/checkbox.vue

@@ -1,12 +1,17 @@
 <script setup lang="ts">
 import { SwitchRoot, SwitchThumb } from 'reka-ui'
 
+const props = defineProps<{
+  disabled?: boolean
+}>()
+
 const modelValue = defineModel<boolean>({ required: true })
 </script>
 
 <template>
   <SwitchRoot
     v-model="modelValue"
+    :disabled="props.disabled"
     :class="[
       'duration-250 ease-in-out',
       'focus-within:outline-none',
@@ -14,8 +19,11 @@ const modelValue = defineModel<boolean>({ required: true })
       'is-interacting',
       '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',
+      'data-[state=unchecked]:disabled:bg-neutral-400 data-[state=unchecked]:disabled:dark:bg-neutral-400/80',
+      'data-[state=checked]:disabled:bg-primary-400 data-[state=checked]:disabled:dark:bg-primary-400/80',
       'relative h-7 w-12.5 rounded-full',
       'shadow-sm focus-within:shadow-none',
+      props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
     ]"
   >
     <SwitchThumb

package/src/components/form/combobox/combobox.vue

@@ -16,30 +16,84 @@ import {
   ComboboxTrigger,
   ComboboxViewport,
 } from 'reka-ui'
+import { computed } from 'vue'
 
-const props = defineProps<{
-  options: { groupLabel: string, children?: { label: string, value: T }[] }[]
+interface ComboboxOptionItem<T extends AcceptableValue> {
+  label: string
+  value: T
+  description?: string
+  disabled?: boolean
+  icon?: string
+}
+
+interface ComboboxOptionGroupItem<T extends AcceptableValue> {
+  groupLabel?: string
+  children?: ComboboxOptionItem<T>[]
+}
+
+const props = withDefaults(defineProps<{
+  options: ComboboxOptionItem<T>[] | ComboboxOptionGroupItem<T>[]
   placeholder?: string
-}>()
+  disabled?: boolean
+  contentMinWidth?: string | number
+  contentWidth?: string | number
+}>(), {
+  disabled: false,
+})
 
 const modelValue = defineModel<T>({ required: false })
 
+const normalizedOptions = computed<ComboboxOptionGroupItem<T>[]>(() => {
+  if (!props.options.length) {
+    return []
+  }
+
+  const [firstOption] = props.options
+  if ('value' in firstOption) {
+    return [
+      {
+        groupLabel: '',
+        children: props.options as ComboboxOptionItem<T>[],
+      },
+    ]
+  }
+
+  return props.options as ComboboxOptionGroupItem<T>[]
+})
+
+const flattenedOptions = computed<ComboboxOptionItem<T>[]>(() =>
+  normalizedOptions.value.flatMap(group => group.children ?? []),
+)
+
 function toDisplayValue(value: T): string {
-  const option = props.options.flatMap(group => group.children).find(option => option?.value === value)
-  return option ? option.label : props.placeholder || ''
+  const option = flattenedOptions.value.find(option => option.value === value)
+  return option?.label ?? props.placeholder ?? ''
+}
+
+function toCssSize(value?: string | number): string | undefined {
+  if (value == null) {
+    return undefined
+  }
+
+  return typeof value === 'number' ? `${value}px` : value
 }
 </script>
 
 <template>
-  <ComboboxRoot v-model="modelValue" :class="['relative', 'w-full']">
+  <ComboboxRoot
+    v-model="modelValue"
+    :disabled="props.disabled"
+    :class="['relative', 'w-full', 'h-fit']"
+  >
     <ComboboxAnchor
       :class="[
-        'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-10 gap-[5px] outline-none',
+        'w-full inline-flex items-center justify-between rounded-xl border px-3 leading-none h-9 gap-[5px] outline-none',
         'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-200',
-        'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700',
+        'bg-white dark:bg-neutral-900 hover:bg-neutral-50 dark:hover:bg-neutral-700',
         'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-primary-300 dark:focus:border-primary-400/50',
         'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black',
         'transition-colors duration-200 ease-in-out',
+        props.disabled ? 'cursor-not-allowed bg-neutral-100 opacity-60 dark:bg-neutral-900' : 'cursor-pointer',
       ]"
     >
       <ComboboxInput
@@ -48,6 +102,7 @@ function toDisplayValue(value: T): string {
           'text-neutral-700 dark:text-neutral-200',
           'transition-colors duration-200 ease-in-out',
         ]"
+        :disabled="props.disabled"
         :placeholder="props.placeholder"
         :display-value="(val) => toDisplayValue(val)"
       />
@@ -76,12 +131,15 @@ function toDisplayValue(value: T): string {
           // Dialog/Drawer are not hidden behind the overlay or dismissed unexpectedly.
           // Read more at: https://github.com/moeru-ai/airi/issues/1136
           'z-[10010]',
-          'w-full min-w-[160px] overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform]',
+          'w-full overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform]',
           'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
           'bg-white dark:bg-neutral-900',
           'border-neutral-200 dark:border-neutral-800 border-solid border-2 focus:border-neutral-300 dark:focus:border-neutral-600',
         ]"
-        :style="{ width: 'var(--reka-combobox-trigger-width)' }"
+        :style="{
+          width: toCssSize(props.contentWidth) ?? 'var(--reka-combobox-trigger-width)',
+          minWidth: toCssSize(props.contentMinWidth) ?? '160px',
+        }"
       >
         <ComboboxViewport :class="['p-[2px]', 'max-h-50dvh', 'overflow-y-auto']">
           <ComboboxEmpty
@@ -90,19 +148,22 @@ function toDisplayValue(value: T): string {
               'text-xs text-neutral-700 dark:text-neutral-200',
               'transition-colors duration-200 ease-in-out',
             ]"
-          />
+          >
+            <slot name="empty" />
+          </ComboboxEmpty>
 
           <template
-            v-for="(group, index) in options"
-            :key="group.groupLabel"
+            v-for="(group, groupIndex) in normalizedOptions"
+            :key="group.groupLabel || `group-${groupIndex}`"
           >
             <ComboboxGroup :class="['overflow-x-hidden']">
               <ComboboxSeparator
-                v-if="index !== 0"
+                v-if="groupIndex !== 0"
                 :class="['m-[5px]', 'h-[1px]', 'bg-neutral-400']"
               />
 
               <ComboboxLabel
+                v-if="group.groupLabel"
                 :class="[
                   'px-[25px] text-xs leading-[25px]',
                   'text-neutral-500 dark:text-neutral-400',
@@ -113,26 +174,70 @@ function toDisplayValue(value: T): string {
               </ComboboxLabel>
 
               <ComboboxItem
-                v-for="option in group.children"
-                :key="option.label"
+                v-for="(option, optionIndex) in group.children || []"
+                :key="`${group.groupLabel || groupIndex}-${option.label}-${optionIndex}`"
                 :text-value="option.label"
                 :value="option.value"
+                :disabled="option.disabled"
                 :class="[
-                  'leading-normal rounded-lg flex items-center h-8 pr-[0.5rem] pl-[1.5rem] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
+                  'leading-normal rounded-lg grid grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 min-h-8 px-2 relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
                   'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-800',
                   'text-sm text-neutral-700 dark:text-neutral-200 data-[disabled]:text-neutral-400 dark:data-[disabled]:text-neutral-600 data-[highlighted]:text-grass1',
                   'transition-colors duration-200 ease-in-out',
-                  'cursor-pointer',
+                  option.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
                 ]"
               >
                 <ComboboxItemIndicator
-                  :class="['absolute', 'left-0', 'w-[25px]', 'inline-flex', 'items-center', 'justify-center', 'opacity-30']"
+                  :class="[
+                    'col-start-1 row-start-1',
+                    'inline-flex items-center justify-center',
+                    'w-[1rem]',
+                    'opacity-30',
+                    'text-current',
+                  ]"
                 >
-                  <div i-solar:alt-arrow-right-outline />
+                  <div i-solar:alt-arrow-right-outline class="size-4" />
                 </ComboboxItemIndicator>
-                <span :class="['line-clamp-1', 'overflow-hidden', 'text-ellipsis', 'whitespace-nowrap']">
-                  {{ option.label }}
-                </span>
+
+                <div :class="['col-start-2', 'min-w-0', 'flex', 'items-center', 'gap-2', 'py-1']">
+                  <slot
+                    name="option"
+                    v-bind="{ option }"
+                  >
+                    <span
+                      v-if="option.icon"
+                      :class="[
+                        'size-4 shrink-0',
+                        'text-current',
+                        option.icon,
+                      ]"
+                    />
+
+                    <div :class="['min-w-0', 'flex', 'flex-1', 'flex-col']">
+                      <span
+                        :class="[
+                          'line-clamp-1',
+                          'overflow-hidden',
+                          'text-ellipsis',
+                          'whitespace-nowrap',
+                        ]"
+                      >
+                        {{ option.label }}
+                      </span>
+
+                      <span
+                        v-if="option.description"
+                        :class="[
+                          'line-clamp-2',
+                          'text-xs',
+                          'text-neutral-500 dark:text-neutral-400',
+                        ]"
+                      >
+                        {{ option.description }}
+                      </span>
+                    </div>
+                  </slot>
+                </div>
               </ComboboxItem>
             </ComboboxGroup>
           </template>

package/src/components/form/combobox-select/combobox-select.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Combobox } from '../combobox'
+
+const props = defineProps<{
+  options?: {
+    label: string
+    value: string | number
+    description?: string
+    disabled?: boolean
+    icon?: string
+  }[]
+  placeholder?: string
+  disabled?: boolean
+  title?: string
+  layout?: 'horizontal' | 'vertical'
+  contentMinWidth?: string | number
+  contentWidth?: string | number
+}>()
+
+const modelValue = defineModel<string | number>({ required: false })
+</script>
+
+<template>
+  <Combobox
+    v-model="modelValue"
+    :options="[{ groupLabel: '', children: props.options }]"
+    :disabled="props.disabled"
+    :content-min-width="props.contentMinWidth"
+    :content-width="props.contentWidth"
+    :placeholder="props.placeholder"
+  >
+    <template
+      v-if="$slots.option"
+      #option="{ option }"
+    >
+      <slot
+        name="option"
+        v-bind="{ option }"
+      />
+    </template>
+
+    <template
+      v-if="$slots.empty"
+      #empty
+    >
+      <slot name="empty" />
+    </template>
+  </Combobox>
+</template>

package/src/components/form/combobox-select/index.ts

@@ -0,0 +1,2 @@
+export { default as ComboboxOption } from './combobox-option.vue'
+export { default as ComboboxSelect } from './combobox-select.vue'

package/src/components/form/field/field-checkbox.vue

@@ -1,17 +1,22 @@
 <script setup lang="ts">
 import { Checkbox } from '../checkbox'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   label?: string
   description?: string
-}>()
+  disabled?: boolean
+  /** Controls whether the switch is placed on the left or right side of the label. */
+  placement?: 'left' | 'right'
+}>(), {
+  placement: 'right',
+})
 
 const modelValue = defineModel<boolean>({ required: true })
 </script>
 
 <template>
   <label class="flex flex-col gap-4">
-    <div class="flex flex-row items-center gap-2">
+    <div :class="['flex items-center gap-2', props.placement === 'left' ? 'flex-row-reverse' : 'flex-row']">
       <div class="flex-1">
         <div class="flex items-center gap-1 text-sm font-medium">
           <slot name="label">
@@ -24,7 +29,7 @@ const modelValue = defineModel<boolean>({ required: true })
           </slot>
         </div>
       </div>
-      <Checkbox v-model="modelValue" />
+      <Checkbox v-model="modelValue" :disabled="props.disabled" />
     </div>
   </label>
 </template>

package/src/components/form/field/{field-select.vue → field-combobox.vue}

@@ -1,14 +1,22 @@
 <script setup lang="ts">
-import { Select } from '../select'
+import { ComboboxSelect } from '../combobox-select'
 
 const props = withDefaults(defineProps<{
   label: string
   description?: string
-  options?: { label: string, value: string | number }[]
+  options?: {
+    label: string
+    value: string | number
+    description?: string
+    disabled?: boolean
+    icon?: string
+  }[]
   placeholder?: string
   disabled?: boolean
   layout?: 'horizontal' | 'vertical'
   selectClass?: string | string[]
+  contentMinWidth?: string | number
+  contentWidth?: string | number
 }>(), {
   layout: 'horizontal',
 })
@@ -21,45 +29,59 @@ const modelValue = defineModel<string>({ required: false })
     <div
       :class="[
         'items-center',
-        'justify-center',
-        props.layout === 'horizontal' ? 'grid grid-cols-3 gap-2' : 'grid grid-cols-2 gap-2',
+        props.layout === 'horizontal' ? 'grid grid-cols-4 gap-2' : 'grid grid-rows-2 gap-2',
       ]"
     >
       <div
         :class="[
           'w-full',
-          props.layout === 'horizontal' ? 'col-span-2' : 'row-span-1',
+          props.layout === 'horizontal' ? 'col-span-2' : 'row-span-2',
         ]"
       >
-        <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', 'text-left']">
           <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', 'text-left']">
           <slot name="description">
             {{ props.description }}
           </slot>
         </div>
       </div>
       <slot>
-        <Select
+        <ComboboxSelect
           v-model="modelValue"
           :options="props.options?.filter(option => option.label && option.value) || []"
           :placeholder="props.placeholder"
           :disabled="props.disabled"
+          :content-min-width="props.contentMinWidth"
+          :content-width="props.contentWidth"
           :title="label"
           :class="[
             ...(props.selectClass
               ? (typeof props.selectClass === 'string' ? [props.selectClass] : props.selectClass)
               : []),
-            props.layout === 'horizontal' ? 'col-span-1' : 'row-span-2',
+            props.layout === 'horizontal' ? 'col-span-2' : 'row-span-2',
           ]"
         >
-          <template #default="{ value }">
-            {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}
+          <template
+            v-if="$slots.option"
+            #option="{ option }"
+          >
+            <slot
+              name="option"
+              v-bind="{ option }"
+            />
           </template>
-        </Select>
+
+          <template
+            v-if="$slots.empty"
+            #empty
+          >
+            <slot name="empty" />
+          </template>
+        </ComboboxSelect>
       </slot>
     </div>
   </label>

package/src/components/form/field/field-range.vue

@@ -36,9 +36,9 @@ const modelValue = defineModel<number>({ required: true })
     <div :class="['flex', 'flex-row', 'items-center', 'gap-2']">
       <Range
         v-model="modelValue"
-        :min="min || 0"
-        :max="max || 1"
-        :step="step || 0.01"
+        :min="min ?? 0"
+        :max="max ?? 1"
+        :step="step ?? 0.01"
         :class="['w-full']"
       />
     </div>

package/src/components/form/field/index.ts

@@ -1,7 +1,7 @@
 export { default as FieldCheckbox } from './field-checkbox.vue'
+export { default as FieldCombobox } from './field-combobox.vue'
 export { default as FieldInput } from './field-input.vue'
 export { default as FieldKeyValues } from './field-key-values.vue'
 export { default as FieldRange } from './field-range.vue'
-export { default as FieldSelect } from './field-select.vue'
 export { default as FieldTextArea } from './field-text-area.vue'
 export { default as FieldValues } from './field-values.vue'

package/src/components/form/index.ts

@@ -1,5 +1,6 @@
 export * from './checkbox'
 export * from './combobox'
+export * from './combobox-select'
 export * from './field'
 export * from './input'
 export * from './radio'

package/src/components/form/input/input-file.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { useSlots } from 'vue'
+
 import BasicInputFile from './basic-input-file.vue'
 
 defineProps<{
   accept?: string
   multiple?: boolean
 }>()
+
+const slots = useSlots()
 </script>
 
 <template>
@@ -28,7 +32,9 @@ defineProps<{
     :multiple="multiple"
   >
     <template #default="{ isDragging }">
+      <slot v-if="slots.default" :is-dragging="isDragging" />
       <div
+        v-else
         class="flex flex-col items-center"
         :class="[
           isDragging ? 'text-primary-500 dark:text-primary-400' : 'text-neutral-400 dark:text-neutral-500',

package/src/components/form/range/round-range.vue

@@ -56,7 +56,8 @@ function handleInput(e: Event) {
     :min="scaledMin"
     :max="scaledMax"
     :step="scaledStep"
-    class="slider-progress form_input-round-range"
+    :disabled="props.disabled"
+    :class="['slider-progress', 'form_input-round-range', props.disabled ? 'opacity-60 pointer-events-none' : '']"
     @input="handleInput"
   >
 </template>
@@ -115,6 +116,20 @@ https://toughengineer.github.io/demo/slider-styler*/
   outline: none;
 }
 
+.form_input-round-range:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.form_input-round-range:disabled::-webkit-slider-thumb,
+.form_input-round-range:disabled::-webkit-slider-runnable-track,
+.form_input-round-range:disabled::-moz-range-thumb,
+.form_input-round-range:disabled::-moz-range-track,
+.form_input-round-range:disabled::-ms-thumb,
+.form_input-round-range:disabled::-ms-track {
+  cursor: not-allowed;
+}
+
 /*webkit*/
 .form_input-round-range::-webkit-slider-thumb {
   appearance: none;

package/src/components/form/select/index.ts

@@ -1,2 +1,2 @@
-export { default as Option } from './option.vue'
+export { default as SelectOption } from './select-option.vue'
 export { default as Select } from './select.vue'

package/src/components/form/select/select-option.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from 'reka-ui'
+
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+} from 'reka-ui'
+
+interface SelectOptionItem<T extends AcceptableValue> {
+  label: string
+  value: T
+  description?: string
+  disabled?: boolean
+  icon?: string
+}
+
+const props = defineProps<{
+  option: SelectOptionItem<T>
+}>()
+</script>
+
+<template>
+  <SelectItem
+    :value="props.option.value"
+    :disabled="props.option.disabled"
+    :text-value="props.option.label"
+    :class="[
+      'leading-normal rounded-lg grid grid-cols-[1rem_minmax(0,1fr)] items-center gap-2 min-h-8 px-2 relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none',
+      'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-800',
+      'text-sm text-neutral-700 dark:text-neutral-200 data-[disabled]:text-neutral-400 dark:data-[disabled]:text-neutral-600',
+      'transition-colors duration-200 ease-in-out',
+      props.option.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+    ]"
+  >
+    <SelectItemIndicator
+      :class="[
+        'col-start-1 row-start-1',
+        'inline-flex items-center justify-center',
+        'w-[1rem]',
+        'opacity-30',
+        'text-current',
+      ]"
+    >
+      <div i-solar:alt-arrow-right-outline class="size-4" />
+    </SelectItemIndicator>
+
+    <SelectItemText :class="['sr-only']">
+      {{ props.option.label }}
+    </SelectItemText>
+
+    <div :class="['col-start-2', 'min-w-0', 'flex', 'items-center', 'gap-2', 'py-1']">
+      <slot v-bind="{ option: props.option }">
+        <span
+          v-if="props.option.icon"
+          :class="[
+            'size-4 shrink-0',
+            'text-current',
+            props.option.icon,
+          ]"
+        />
+
+        <div :class="['min-w-0 flex flex-1 flex-col']">
+          <span
+            :class="[
+              'line-clamp-1',
+              'overflow-hidden',
+              'text-ellipsis',
+              'whitespace-nowrap',
+            ]"
+          >
+            {{ props.option.label }}
+          </span>
+
+          <span
+            v-if="props.option.description"
+            :class="[
+              'line-clamp-2',
+              'text-xs',
+              'text-neutral-500 dark:text-neutral-400',
+            ]"
+          >
+            {{ props.option.description }}
+          </span>
+        </div>
+      </slot>
+    </div>
+  </SelectItem>
+</template>

package/src/components/form/select/select.vue

@@ -1,31 +1,242 @@
-<script setup lang="ts">
-import { provide, ref } from 'vue'
+<script setup lang="ts" generic="T extends AcceptableValue">
+import type { AcceptableValue } from 'reka-ui'
 
-import { Combobox } from '../combobox'
+import {
+  SelectArrow,
+  SelectContent,
+  SelectGroup,
+  SelectIcon,
+  SelectLabel,
+  SelectPortal,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from 'reka-ui'
+import { computed } from 'vue'
 
-const props = defineProps<{
-  options?: { label: string, value: string | number }[]
+import SelectOption from './select-option.vue'
+
+interface SelectOptionItem<T extends AcceptableValue> {
+  label: string
+  value: T
+  description?: string
+  disabled?: boolean
+  icon?: string
+}
+
+interface SelectOptionGroupItem<T extends AcceptableValue> {
+  groupLabel?: string
+  children?: SelectOptionItem<T>[]
+}
+
+const props = withDefaults(defineProps<{
+  options: SelectOptionItem<T>[] | SelectOptionGroupItem<T>[]
   placeholder?: string
   disabled?: boolean
-  title?: string
-  layout?: 'horizontal' | 'vertical'
-}>()
+  by?: string | ((a: T, b: T) => boolean)
+  contentMinWidth?: string | number
+  contentWidth?: string | number
+  shape?: 'rounded' | 'default'
+  variant?: 'blurry' | 'default'
+}>(), {
+  placeholder: 'Select an option',
+  disabled: false,
+  by: undefined,
+  contentMinWidth: 160,
+  contentWidth: undefined,
+  shape: 'default',
+  variant: 'default',
+})
 
-const show = ref(false)
-const modelValue = defineModel<string | number>({ required: false })
+const modelValue = defineModel<T>({ required: false })
 
-function selectOption(value: string | number) {
-  modelValue.value = value
-}
+const normalizedOptions = computed<SelectOptionGroupItem<T>[]>(() => {
+  if (!props.options.length) {
+    return []
+  }
+
+  const [firstOption] = props.options
+  if ('value' in firstOption) {
+    return [
+      {
+        groupLabel: '',
+        children: props.options as SelectOptionItem<T>[],
+      },
+    ]
+  }
+
+  return props.options as SelectOptionGroupItem<T>[]
+})
+
+const flattenedOptions = computed<SelectOptionItem<T>[]>(() =>
+  normalizedOptions.value.flatMap(group => group.children ?? []),
+)
 
-function handleHide() {
-  show.value = false
+const selectedOption = computed<SelectOptionItem<T> | undefined>(() =>
+  flattenedOptions.value.find(option => isSelectedOption(option.value, modelValue.value)),
+)
+
+function isSelectedOption(a: T, b: T | undefined): boolean {
+  if (b == null) {
+    return false
+  }
+
+  if (typeof props.by === 'function') {
+    return props.by(a, b)
+  }
+
+  if (typeof props.by === 'string') {
+    return (a as Record<string, unknown> | null)?.[props.by] === (b as Record<string, unknown> | null)?.[props.by]
+  }
+
+  return a === b
 }
 
-provide('selectOption', selectOption)
-provide('hide', handleHide)
+function toCssSize(value?: string | number): string | undefined {
+  if (value == null) {
+    return undefined
+  }
+
+  return typeof value === 'number' ? `${value}px` : value
+}
 </script>
 
 <template>
-  <Combobox v-model="modelValue" :default-value="modelValue" :options="[{ groupLabel: '', children: props.options }]" />
+  <SelectRoot
+    v-model="modelValue"
+    :by="props.by"
+    :disabled="props.disabled"
+  >
+    <SelectTrigger
+      :class="[
+        'group',
+        'w-full inline-flex items-center justify-between border px-1 leading-none h-fit gap-[5px] outline-none',
+        props.shape === 'rounded' ? 'rounded-full' : 'rounded-lg',
+        'text-sm text-neutral-700 dark:text-neutral-200 data-[placeholder]:text-neutral-400 dark:data-[placeholder]:text-neutral-500',
+        props.variant === 'default' ? 'bg-white dark:bg-neutral-900 disabled:bg-neutral-100 hover:bg-neutral-50 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-700' : '',
+        props.variant === 'blurry' ? 'bg-neutral-50/70 dark:bg-neutral-800/70 disabled:bg-neutral-100 hover:bg-neutral-100 dark:disabled:bg-neutral-900 dark:hover:bg-neutral-800' : '',
+        props.variant === 'blurry' ? 'backdrop-blur-md' : '',
+        'border-2 border-solid focus:border-primary-300 dark:focus:border-primary-400/50',
+        props.variant === 'default' ? 'border-neutral-200 dark:border-neutral-800' : '',
+        props.variant === 'blurry' ? 'border-neutral-100/60 dark:border-neutral-800/30' : '',
+        'shadow-sm focus:shadow-[0_0_0_2px] focus:shadow-black/10 dark:focus:shadow-black/30',
+        'transition-colors duration-200 ease-in-out',
+        props.disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
+      ]"
+    >
+      <div :class="['min-w-0 flex-1 text-left']">
+        <slot
+          v-if="$slots.value"
+          name="value"
+          v-bind="{ option: selectedOption, value: modelValue, placeholder: props.placeholder }"
+        >
+          <span
+            :class="[
+              'block truncate',
+              selectedOption ? 'text-neutral-700 dark:text-neutral-200' : 'text-neutral-400 dark:text-neutral-500',
+            ]"
+          >
+            {{ selectedOption?.label ?? props.placeholder }}
+          </span>
+        </slot>
+        <SelectValue
+          v-else
+          v-model="modelValue"
+          :placeholder="props.placeholder"
+        />
+      </div>
+      <SelectIcon as-child>
+        <div
+          i-solar:alt-arrow-down-linear
+          :class="[
+            'h-4 w-4 shrink-0',
+            'text-neutral-700 dark:text-neutral-200',
+            'transition-transform duration-200 ease-in-out',
+            'group-data-[state=open]:rotate-180',
+          ]"
+        />
+      </SelectIcon>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        position="popper"
+        side="bottom"
+        align="start"
+        :side-offset="4"
+        :avoid-collisions="true"
+        :class="[
+          // NOTICE: DialogContent/DialogOverlay use z-[9999], and DrawerContent uses z-[1000].
+          // SelectContent must render above these layers so that dropdowns inside
+          // Dialog/Drawer are not hidden behind the overlay or dismissed unexpectedly.
+          // Read more at: https://github.com/moeru-ai/airi/issues/1136
+          'z-[10010]',
+          'overflow-hidden rounded-xl shadow-sm border will-change-[opacity,transform]',
+          'data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+          'bg-white dark:bg-neutral-900',
+          'border-neutral-200 dark:border-neutral-800 border-solid border-2',
+        ]"
+        :style="{
+          width: toCssSize(props.contentWidth) ?? 'var(--reka-select-trigger-width)',
+          minWidth: toCssSize(props.contentMinWidth),
+        }"
+      >
+        <SelectViewport
+          :class="[
+            'p-[2px]',
+            'max-h-50dvh',
+            'overflow-y-auto',
+          ]"
+        >
+          <template
+            v-for="(group, groupIndex) in normalizedOptions"
+            :key="group.groupLabel || `group-${groupIndex}`"
+          >
+            <SelectGroup :class="['overflow-x-hidden']">
+              <SelectSeparator
+                v-if="groupIndex !== 0"
+                :class="['m-[5px]', 'h-[1px]', 'bg-neutral-200 dark:bg-neutral-800']"
+              />
+
+              <SelectLabel
+                v-if="group.groupLabel"
+                :class="[
+                  'px-[25px] text-xs leading-[25px]',
+                  'text-neutral-500 dark:text-neutral-400',
+                  'transition-colors duration-200 ease-in-out',
+                ]"
+              >
+                {{ group.groupLabel }}
+              </SelectLabel>
+
+              <SelectOption
+                v-for="(option, optionIndex) in group.children || []"
+                :key="`${group.groupLabel || groupIndex}-${option.label}-${optionIndex}`"
+                :option="option"
+              >
+                <template
+                  v-if="$slots.option"
+                  #default="{ option: slotOption }"
+                >
+                  <slot
+                    name="option"
+                    v-bind="{ option: slotOption }"
+                  />
+                </template>
+              </SelectOption>
+            </SelectGroup>
+          </template>
+        </SelectViewport>
+
+        <SelectArrow
+          :class="[
+            'fill-white dark:fill-neutral-900',
+            'stroke-neutral-200 dark:stroke-neutral-800',
+          ]"
+        />
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
 </template>

package/src/components/form/select-tab/select-tab.vue

@@ -1,10 +1,10 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string | number">
 import { RadioGroupItem, RadioGroupRoot } from 'reka-ui'
 import { computed } from 'vue'
 
 interface SelectTabOption {
   label: string
-  value: string | number
+  value: T
   description?: string
   icon?: string
 }
@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<{
   size: 'md',
 })
 
-const modelValue = defineModel<string | number>({ required: true })
+const modelValue = defineModel<T>({ required: true })
 
 const activeIndex = computed(() => props.options.findIndex(option => option.value === modelValue.value))
 const itemCount = computed(() => props.options.length || 1)
@@ -28,8 +28,8 @@ const isDisabled = computed(() => props.disabled || props.readonly)
 
 const sizeClasses = computed(() =>
   props.size === 'sm'
-    ? ['py-2', 'px-3', 'text-xs', 'rounded-md']
-    : ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md'],
+    ? ['py-2', 'px-3', 'text-xs', 'rounded-md', 'min-w-24']
+    : ['py-2.5', 'px-3.5', 'text-sm', 'rounded-md', 'min-w-32'],
 )
 
 const rootStyle = computed(() => ({
@@ -49,7 +49,7 @@ const rootStyle = computed(() => ({
     :class="[
       'select-tab',
       'is-interacting',
-      'relative', 'flex', 'w-full', 'items-stretch', 'rounded-lg',
+      'relative', 'flex', 'items-stretch', 'rounded-lg',
       'overflow-hidden',
       'bg-white-400/6', 'dark:bg-neutral-950/70',
       'transition-[border-color,box-shadow,opacity]', 'duration-200', 'ease-out',

package/src/components/form/textarea/basic-text-area.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   defaultHeight?: string
-}>()
+  submitOnEnter?: boolean
+}>(), {
+  submitOnEnter: true,
+})
 
 const events = defineEmits<{
   (event: 'submit', message: string): void
@@ -18,6 +21,9 @@ const textareaRef = ref<HTMLTextAreaElement>()
 const textareaHeight = ref('auto')
 
 function onKeyDown(e: KeyboardEvent) {
+  if (!props.submitOnEnter)
+    return
+
   if (e.code === 'Enter' && !e.shiftKey) { // just block Enter is enough, Shift+Enter by default generates a newline
     e.preventDefault()
     events('submit', input.value)