refactor(ui,stage-*): now Select component is ComboboxSelect

apps/stage-tamagotchi/src/renderer/pages/devtools/vision.vue

@@ -6,7 +6,7 @@ import { errorMessageFrom } from '@moeru/std'
 import { ProcessingMeter } from '@proj-airi/stage-ui/components'
 import { VISION_WORKLOADS } from '@proj-airi/stage-ui/composables'
 import { useVisionOrchestratorStore, useVisionProcessingStore, useVisionStore } from '@proj-airi/stage-ui/stores/modules/vision'
-import { Button, FieldCheckbox, FieldRange, FieldSelect, SelectTab } from '@proj-airi/ui'
+import { Button, FieldCheckbox, FieldCombobox, FieldRange, SelectTab } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onBeforeUnmount, ref } from 'vue'
 
@@ -498,7 +498,7 @@ onBeforeUnmount(() => {
                   Vision input max size: {{ captureInputBounds.maxWidth }} × {{ captureInputBounds.maxHeight }}
                 </div>
 
-                <FieldSelect
+                <FieldCombobox
                   v-model="selectedWorkload"
                   label="Vision workload"
                   description="Select how the model should interpret the screen."

apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useElectronEventaInvoke } from '@proj-airi/electron-vueuse'
-import { Button, FieldInput, FieldSelect, FieldTextArea } from '@proj-airi/ui'
+import { Button, FieldCombobox, FieldInput, FieldTextArea } from '@proj-airi/ui'
 import { computed, reactive, ref } from 'vue'
 
 import { widgetsAdd, widgetsClear, widgetsOpenWindow, widgetsPrepareWindow, widgetsRemove, widgetsUpdate } from '../../../shared/eventa'
@@ -291,7 +291,7 @@ function applyMapPreset() {
     </div>
 
     <div class="grid gap-4 md:grid-cols-3">
-      <FieldSelect
+      <FieldCombobox
         v-model="form.sizePreset"
         label="Size Preset"
         description="Choose a preset or opt into custom spans."

apps/stage-tamagotchi/src/renderer/pages/inlay/index.vue

@@ -3,7 +3,7 @@ import type { BackgroundMaterialType, VibrancyType } from '@proj-airi/electron-e
 
 import { electron } from '@proj-airi/electron-eventa'
 import { useElectronEventaInvoke } from '@proj-airi/electron-vueuse'
-import { FieldSelect } from '@proj-airi/ui'
+import { FieldCombobox } from '@proj-airi/ui'
 import { ref, watch } from 'vue'
 
 const setVibrancy = useElectronEventaInvoke(electron.window.setVibrancy)
@@ -40,7 +40,7 @@ watch(
     </div>
 
     <div class="space-y-2">
-      <FieldSelect
+      <FieldCombobox
         v-model="vibrancy"
         label="Vibrancy"
         description="Set the vibrancy effect of the window."
@@ -62,7 +62,7 @@ watch(
         ]"
       />
 
-      <FieldSelect
+      <FieldCombobox
         v-model="backgroundMaterial"
         label="Background Material"
         description="Set the background material of the window."

packages/stage-layouts/src/components/Widgets/ChatArea.vue

@@ -10,7 +10,7 @@ import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consci
 import { useHearingSpeechInputPipeline, useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { BasicTextarea, FieldSelect } from '@proj-airi/ui'
+import { BasicTextarea, FieldCombobox } from '@proj-airi/ui'
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { PopoverContent, PopoverRoot, PopoverTrigger } from 'reka-ui'
@@ -475,7 +475,7 @@ watch(autoSendEnabled, (enabled) => {
               </p>
             </div>
 
-            <FieldSelect
+            <FieldCombobox
               v-model="selectedAudioInput"
               label="Input device"
               description="Select the microphone you want to use."

packages/stage-pages/src/components/settings-general-fields.vue

@@ -3,7 +3,7 @@ import { all } from '@proj-airi/i18n'
 import { useAnalytics } from '@proj-airi/stage-ui/composables/use-analytics'
 import { isPosthogAvailableInBuild } from '@proj-airi/stage-ui/stores/analytics'
 import { useSettings } from '@proj-airi/stage-ui/stores/settings'
-import { FieldCheckbox, FieldSelect, useTheme } from '@proj-airi/ui'
+import { FieldCheckbox, FieldCombobox, useTheme } from '@proj-airi/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -45,7 +45,7 @@ const languages = computed(() => {
       :description="t('settings.theme.description')"
     />
 
-    <FieldSelect
+    <FieldCombobox
       v-model="settings.language"
       v-motion
       :initial="{ opacity: 0, y: 10 }"
@@ -58,7 +58,7 @@ const languages = computed(() => {
       :options="languages"
     />
 
-    <FieldSelect
+    <FieldCombobox
       v-if="showControlsIsland"
       v-model="settings.controlsIslandIconSize"
       v-motion

packages/stage-pages/src/pages/devtools/beat-sync.vue

@@ -3,7 +3,7 @@ import type { BeatSyncStyleName } from '@proj-airi/stage-ui-live2d'
 
 import { createBeatSyncController } from '@proj-airi/stage-ui-live2d'
 import { Section } from '@proj-airi/stage-ui/components'
-import { Button, Callout, FieldCheckbox, FieldRange, FieldSelect } from '@proj-airi/ui'
+import { Button, Callout, FieldCheckbox, FieldCombobox, FieldRange } from '@proj-airi/ui'
 import { useRafFn } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, watch } from 'vue'
 
@@ -233,7 +233,7 @@ function hitVSequence() {
       </div>
 
       <div class="grid gap-4 md:grid-cols-2">
-        <FieldSelect
+        <FieldCombobox
           v-model="style"
           label="Style"
           description="Choose how head motion is sculpted between beats"

packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue

@@ -4,7 +4,7 @@ import type { ServerEvent, ServerEvents } from '@proj-airi/stage-ui/stores/provi
 import vadWorkletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&url'
 
 import { createAliyunNLSProvider, streamAliyunTranscription } from '@proj-airi/stage-ui/stores/providers/aliyun/stream-transcription'
-import { Button, FieldInput, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldCombobox, FieldInput } from '@proj-airi/ui'
 import { computed, nextTick, onBeforeUnmount, reactive, ref, shallowRef, watch } from 'vue'
 
 type AliyunRegion
@@ -387,7 +387,7 @@ onBeforeUnmount(async () => {
           placeholder="请输入 AppKey"
         />
 
-        <FieldSelect
+        <FieldCombobox
           v-model="credentials.region"
           label="Region"
           description="Match the region used when issuing the token."

packages/stage-pages/src/pages/settings/airi-card/components/CardCreationDialog.vue

@@ -11,7 +11,7 @@ import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettingsStageModel } from '@proj-airi/stage-ui/stores/settings/stage-model'
 import { Button, FieldInput, FieldValues } from '@proj-airi/ui'
-import { Select } from '@proj-airi/ui/components/form'
+import { ComboboxSelect } from '@proj-airi/ui/components/form'
 import { storeToRefs } from 'pinia'
 import {
   DialogContent,
@@ -456,7 +456,7 @@ function getDefaultPlaceholder(defaultValue: string | undefined): string {
                   <div i-lucide:brain />
                   {{ t('settings.pages.card.chat.provider') }}
                 </label>
-                <Select
+                <ComboboxSelect
                   v-model="selectedConsciousnessProvider"
                   :options="consciousnessProviderOptions"
                   :placeholder="getDefaultPlaceholder(consciousnessProvider)"
@@ -470,7 +470,7 @@ function getDefaultPlaceholder(defaultValue: string | undefined): string {
                   <div i-lucide:ghost />
                   {{ t('settings.pages.card.consciousness.model') }}
                 </label>
-                <Select
+                <ComboboxSelect
                   v-model="selectedConsciousnessModel"
                   :options="consciousnessModelOptions"
                   :placeholder="getDefaultPlaceholder(defaultConsciousnessModel)"
@@ -485,7 +485,7 @@ function getDefaultPlaceholder(defaultValue: string | undefined): string {
                   <div i-lucide:radio />
                   {{ t('settings.pages.card.speech.provider') }}
                 </label>
-                <Select
+                <ComboboxSelect
                   v-model="selectedSpeechProvider"
                   :options="speechProviderOptions"
                   :placeholder="getDefaultPlaceholder(speechProvider)"
@@ -499,7 +499,7 @@ function getDefaultPlaceholder(defaultValue: string | undefined): string {
                   <div i-lucide:mic />
                   {{ t('settings.pages.card.speech.model') }}
                 </label>
-                <Select
+                <ComboboxSelect
                   v-model="selectedSpeechModel"
                   :options="speechModelOptions"
                   :placeholder="getDefaultPlaceholder(defaultSpeechModel)"
@@ -514,7 +514,7 @@ function getDefaultPlaceholder(defaultValue: string | undefined): string {
                   <div i-lucide:music />
                   {{ t('settings.pages.card.speech.voice') }}
                 </label>
-                <Select
+                <ComboboxSelect
                   v-model="selectedSpeechVoiceId"
                   :options="speechVoiceOptions"
                   :placeholder="getDefaultPlaceholder(defaultSpeechVoiceId)"
@@ -529,7 +529,7 @@ function getDefaultPlaceholder(defaultValue: string | undefined): string {
                   <div i-solar:ghost-bold-duotone />
                   {{ t('settings.pages.card.body-model') }}
                 </label>
-                <Select
+                <ComboboxSelect
                   v-model="selectedDisplayModelId"
                   :options="displayModelOptions"
                   :placeholder="getDefaultPlaceholder(defaultDisplayModelId)"

packages/stage-pages/src/pages/settings/airi-card/index.vue

@@ -4,7 +4,7 @@ import type { ccv3 } from '@proj-airi/ccc'
 import { Alert } from '@proj-airi/stage-ui/components'
 import { useAiriCardStore } from '@proj-airi/stage-ui/stores/modules/airi-card'
 import { InputFile } from '@proj-airi/ui'
-import { Select } from '@proj-airi/ui/components/form'
+import { ComboboxSelect } from '@proj-airi/ui/components/form'
 import { storeToRefs } from 'pinia'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -204,7 +204,7 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
         <div class="top-[-32px] whitespace-nowrap text-sm text-neutral-500 leading-10 lg:absolute dark:text-neutral-400">
           {{ t('settings.pages.card.sort_by') }}:
         </div>
-        <Select
+        <ComboboxSelect
           v-model="sortOption"
           :options="[
             { value: 'nameAsc', label: t('settings.pages.card.name_asc') },

packages/stage-pages/src/pages/settings/modules/hearing.vue

@@ -8,7 +8,7 @@ import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
 import { useHearingSpeechInputPipeline, useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { Button, FieldCheckbox, FieldInput, FieldRange, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldCheckbox, FieldCombobox, FieldInput, FieldRange } from '@proj-airi/ui'
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
@@ -495,7 +495,7 @@ onUnmounted(() => {
       <div flex="~ col gap-4">
         <!-- Audio Input Selection -->
         <div>
-          <FieldSelect
+          <FieldCombobox
             v-model="selectedAudioInput"
             label="Audio Input Device"
             description="Select the audio input device for your hearing module."

packages/stage-pages/src/pages/settings/providers/chat/ollama.vue

@@ -11,7 +11,7 @@ import {
 } from '@proj-airi/stage-ui/components'
 import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { FieldKeyValues, FieldSelect } from '@proj-airi/ui'
+import { FieldCombobox, FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 
@@ -155,7 +155,7 @@ onMounted(() => {
       </ProviderBasicSettings>
 
       <ProviderAdvancedSettings :title="t('settings.pages.providers.common.section.advanced.title')">
-        <FieldSelect
+        <FieldCombobox
           v-model="thinkingMode"
           :label="t('settings.pages.providers.catalog.edit.config.common.fields.field.thinking-mode.label')"
           :description="t('settings.pages.providers.catalog.edit.config.common.fields.field.thinking-mode.description')"

packages/stage-pages/src/pages/settings/providers/speech/kokoro-local.vue

@@ -8,7 +8,7 @@ import {
 import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { getDefaultKokoroModel } from '@proj-airi/stage-ui/workers/kokoro/constants'
-import { Callout, Select } from '@proj-airi/ui'
+import { Callout, ComboboxSelect } from '@proj-airi/ui'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -173,7 +173,7 @@ watch(model, async (newValue) => {
           </div>
         </Callout>
         <div>
-          <Select
+          <ComboboxSelect
             v-model="model"
             :options="modelOptions"
             :disabled="modelsLoading"

packages/stage-pages/src/pages/settings/providers/speech/openai-audio-speech.vue

@@ -7,7 +7,7 @@ import {
 } from '@proj-airi/stage-ui/components'
 import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { FieldRange, FieldSelect } from '@proj-airi/ui'
+import { FieldCombobox, FieldRange } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -123,7 +123,7 @@ watch(model, async () => {
     <!-- Voice settings specific to OpenAI -->
     <template #voice-settings>
       <!-- Model selection -->
-      <FieldSelect
+      <FieldCombobox
         v-model="model"
         label="Model"
         description="Select the TTS model to use for speech generation"

packages/stage-pages/src/pages/settings/providers/speech/openrouter-audio-speech.vue

@@ -7,7 +7,7 @@ import {
 } from '@proj-airi/stage-ui/components'
 import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { FieldSelect } from '@proj-airi/ui'
+import { FieldCombobox } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted } from 'vue'
 
@@ -62,7 +62,7 @@ async function handleGenerateSpeech(input: string, voiceId: string, _useSSML: bo
 <template>
   <SpeechProviderSettings :provider-id="providerId" :default-model="defaultModel">
     <template #voice-settings>
-      <FieldSelect
+      <FieldCombobox
         v-model="model"
         label="Model"
         description="Select the audio-capable model to use for speech generation"

packages/stage-pages/src/pages/settings/providers/transcription/aliyun-nls-transcription.vue

@@ -15,7 +15,7 @@ import {
 import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { Button, FieldInput, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldCombobox, FieldInput } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onBeforeUnmount, reactive, ref, shallowRef } from 'vue'
 
@@ -388,7 +388,7 @@ onBeforeUnmount(async () => {
             placeholder="请输入 AppKey"
           />
 
-          <FieldSelect
+          <FieldCombobox
             v-model="credentials.region"
             label="Region"
             :options="regionOptions"

packages/stage-pages/src/pages/settings/providers/transcription/browser-web-speech-api.vue

@@ -11,7 +11,7 @@ import {
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { streamWebSpeechAPITranscription } from '@proj-airi/stage-ui/stores/providers/web-speech-api'
 import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
-import { Button, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldCombobox } from '@proj-airi/ui'
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
@@ -333,7 +333,7 @@ onUnmounted(() => {
               </div>
             </div>
 
-            <FieldSelect
+            <FieldCombobox
               v-model="language"
               label="Recognition Language"
               description="Select the language for speech recognition"
@@ -392,7 +392,7 @@ onUnmounted(() => {
           <div v-else class="flex flex-col gap-4">
             <!-- Audio Input Device Selector - Always visible when Web Speech API is available -->
             <div class="flex items-center gap-2">
-              <FieldSelect
+              <FieldCombobox
                 v-model="selectedAudioInput"
                 label="Audio Input Device"
                 description="Select the audio input device for testing"

packages/stage-pages/src/pages/settings/providers/transcription/openai-audio-transcription.vue

@@ -7,7 +7,7 @@ import {
 } from '@proj-airi/stage-ui/components'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { FieldSelect } from '@proj-airi/ui'
+import { FieldCombobox } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
 
@@ -82,7 +82,7 @@ watch(model, async () => {
   >
     <template #basic-settings>
       <!-- Model selection -->
-      <FieldSelect
+      <FieldCombobox
         v-model="model"
         label="Model"
         description="Select the transcription model to use"

packages/stage-pages/src/pages/settings/providers/transcription/openai-compatible-audio-transcription.vue

@@ -16,7 +16,7 @@ import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provi
 import { getDefinedProvider } from '@proj-airi/stage-ui/libs'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { FieldInput, FieldSelect } from '@proj-airi/ui'
+import { FieldCombobox, FieldInput } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
 
@@ -214,7 +214,7 @@ watch(model, () => {
             :placeholder="apiKeyPlaceholder"
           />
           <!-- Model selection: Use dropdown if models are available, otherwise use text input -->
-          <FieldSelect
+          <FieldCombobox
             v-if="providerModels.length > 0"
             v-model="model"
             label="Model"

packages/stage-pages/src/pages/v2/settings/providers/edit/[providerId]/index.vue

@@ -17,7 +17,7 @@ import {
 } from '@proj-airi/stage-ui/components'
 import { getDefinedProvider, getSchemaDefault, getValidatorsOfProvider, validateProvider } from '@proj-airi/stage-ui/libs'
 import { useProviderCatalogStore } from '@proj-airi/stage-ui/stores/provider-catalog'
-import { Button, Callout, FieldInput, FieldKeyValues, FieldSelect } from '@proj-airi/ui'
+import { Button, Callout, FieldCombobox, FieldInput, FieldKeyValues } from '@proj-airi/ui'
 import { useCloned, useDebounceFn } from '@vueuse/core'
 import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui'
 import { computed, onMounted, ref, watch } from 'vue'
@@ -455,7 +455,7 @@ function handleDeleteProvider() {
                   :placeholder="field.placeholder"
                   :required="field.required"
                 />
-                <FieldSelect
+                <FieldCombobox
                   v-else-if="field.type === 'select'"
                   v-model="providerConfigEdit.config[field.key]"
                   :label="field.label"

packages/stage-ui/src/components/form/select/select.story.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Select } from '@proj-airi/ui'
+import { ComboboxSelect } from '@proj-airi/ui'
 import { ref } from 'vue'
 
 const singleValue = ref('option1')
@@ -15,7 +15,7 @@ const options = [
 
 <template>
   <Story
-    title="Select"
+    title="Combobox Select"
     group="form"
     :layout="{ type: 'grid', width: '100%' }"
   >
@@ -25,10 +25,10 @@ const options = [
 
     <Variant
       id="basic"
-      title="Basic Select"
+      title="Basic Combobox Select"
     >
       <div>
-        <Select
+        <ComboboxSelect
           v-model="singleValue"
           :options="options"
           placeholder="Choose an option..."
@@ -38,10 +38,10 @@ const options = [
 
     <Variant
       id="disabled"
-      title="Disabled Select"
+      title="Disabled Combobox Select"
     >
       <div>
-        <Select
+        <ComboboxSelect
           v-model="disabledValue"
           :options="options"
           placeholder="Disabled select"
@@ -55,7 +55,7 @@ const options = [
       title="Custom Width"
     >
       <div class="w-[300px]">
-        <Select
+        <ComboboxSelect
           v-model="singleValue"
           :options="options"
           placeholder="Choose an option..."

packages/stage-ui/src/components/scenarios/dialogs/audio-input/hearing-config.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Callout, FieldSelect } from '@proj-airi/ui'
+import { Callout, FieldCombobox } from '@proj-airi/ui'
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -72,7 +72,7 @@ const ringEnabledClass = computed(() => enabled.value
 
     <!-- Always-visible device selector -->
     <div class="mt-3 w-full">
-      <FieldSelect
+      <FieldCombobox
         v-model="selectedAudioInput"
         label="Input device"
         description="Select the microphone you want to use."

packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue

@@ -2,7 +2,7 @@
 import type { OnboardingStepNextHandler } from './types'
 
 import { all } from '@proj-airi/i18n'
-import { Button, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldCombobox } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -64,7 +64,7 @@ const languages = computed(() => {
         :delay="150"
         :class="['mx-auto', 'mt-6', 'w-full', 'max-w-sm', 'rounded-2xl', 'bg-neutral-100/80', 'backdrop-blur-sm', 'dark:bg-neutral-800/80', 'p-4']"
       >
-        <FieldSelect
+        <FieldCombobox
           v-model="language"
           :class="['w-full']"
           :label="t('settings.language.title')"

packages/stage-ui/src/components/scenarios/providers/speech-playground.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { VoiceInfo } from '../../../stores/providers'
 
-import { FieldCheckbox, FieldSelect } from '@proj-airi/ui'
+import { FieldCheckbox, FieldCombobox } from '@proj-airi/ui'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -163,7 +163,7 @@ defineExpose({
         />
       </template>
 
-      <FieldSelect
+      <FieldCombobox
         v-model="selectedVoice"
         :options="voiceOptions"
         :label="t('settings.pages.providers.provider.elevenlabs.playground.fields.field.voice.label')"

packages/stage-ui/src/components/scenarios/providers/transcription-playground.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HearingTranscriptionResult } from '../../../stores/modules/hearing'
 
-import { Button, FieldRange, FieldSelect } from '@proj-airi/ui'
+import { Button, FieldCombobox, FieldRange } from '@proj-airi/ui'
 import { until } from '@vueuse/core'
 import { computed, onUnmounted, ref, shallowRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -173,7 +173,7 @@ onUnmounted(() => {
 
     <!-- Audio Input Selection -->
     <div mb-2>
-      <FieldSelect
+      <FieldCombobox
         v-model="selectedAudioInput"
         label="Audio Input Device"
         description="Select the audio input device for your hearing module."

packages/ui/README.md

@@ -62,7 +62,7 @@ import { Button } from '@proj-airi/ui'
     * [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

packages/ui/src/components/form/field/field-combobox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Select } from '../select'
+import { ComboboxSelect } from '../select'
 
 const props = withDefaults(defineProps<{
   label: string
@@ -42,7 +42,7 @@ const modelValue = defineModel<string>({ required: false })
         </div>
       </div>
       <slot>
-        <Select
+        <ComboboxSelect
           v-model="modelValue"
           :options="props.options?.filter(option => option.label && option.value) || []"
           :placeholder="props.placeholder"
@@ -58,7 +58,7 @@ const modelValue = defineModel<string>({ required: false })
           <template #default="{ value }">
             {{ props.options?.find(option => option.value === value)?.label || props.placeholder }}
           </template>
-        </Select>
+        </ComboboxSelect>
       </slot>
     </div>
   </label>

packages/ui/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'

packages/ui/src/components/form/select/index.ts

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