@open-mercato/core 0.5.1-develop.2949.009dcdd2d5 → 0.5.1-develop.2954.610bab2d08

package/src/modules/feature_toggles/components/overrideFormConfig.tsx

@@ -1,6 +1,14 @@
 "use client"
 import { CrudFormGroup, CrudCustomFieldRenderProps, CrudField } from "@open-mercato/ui/backend/CrudForm";
 import { JsonBuilder } from "@open-mercato/ui/backend/JsonBuilder";
+import { Input } from "@open-mercato/ui/primitives/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-mercato/ui/primitives/select";
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
 export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps) {
@@ -21,15 +29,19 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.override.fields.value.boolean.label', 'Override Value (Boolean)')}</label>
-                    <select
+                    <Select
                         value={props.value as string || 'false'}
-                        onChange={(e) => props.setValue(e.target.value === 'true')}
-                        className="w-full h-9 rounded border px-2 text-sm"
+                        onValueChange={(value) => props.setValue(value === 'true')}
                         disabled={props.disabled}
                     >
-                        <option value="true">{t('feature_toggles.values.true', 'True')}</option>
-                        <option value="false">{t('feature_toggles.values.false', 'False')}</option>
-                    </select>
+                        <SelectTrigger>
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="true">{t('feature_toggles.values.true', 'True')}</SelectItem>
+                            <SelectItem value="false">{t('feature_toggles.values.false', 'False')}</SelectItem>
+                        </SelectContent>
+                    </Select>
                 </div>
             );
 
@@ -37,12 +49,11 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.override.fields.value.string.label', 'Override Value (String)')}</label>
-                    <input
+                    <Input
                         type="text"
                         value={props.value as string || ''}
                         onChange={(e) => props.setValue(e.target.value)}
                         placeholder={t('feature_toggles.override.fields.value.string.placeholder', 'Enter override string value')}
-                        className="w-full h-9 rounded border px-2 text-sm"
                         disabled={props.disabled}
                         autoFocus={props.autoFocus}
                     />
@@ -53,11 +64,10 @@ export function renderOverrideValueComponent(props: CrudCustomFieldRenderProps)
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.override.fields.value.number.label', 'Override Value (Number)')}</label>
-                    <input
+                    <Input
                         type="number"
                         value={props.value as number || 0}
                         onChange={(e) => props.setValue(Number(e.target.value) || 0)}
-                        className="w-full h-9 rounded border px-2 text-sm"
                         disabled={props.disabled}
                         autoFocus={props.autoFocus}
                     />

package/src/modules/inbox_ops/backend/inbox-ops/settings/page.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import Link from 'next/link'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
@@ -61,8 +68,7 @@ export default function InboxSettingsPage() {
     }
   }, [settings])
 
-  const handleLanguageChange = React.useCallback(async (event: React.ChangeEvent<HTMLSelectElement>) => {
-    const workingLanguage = event.target.value
+  const handleLanguageChange = React.useCallback(async (workingLanguage: string) => {
     setIsSavingLanguage(true)
     const result = await runMutation({
       operation: () => apiCall<{ ok: boolean; settings: { workingLanguage: string } }>('/api/inbox_ops/settings', {
@@ -133,17 +139,20 @@ export default function InboxSettingsPage() {
                 <p className="text-xs text-muted-foreground mt-1">
                   {t('inbox_ops.settings.working_language_hint', 'AI summaries and action descriptions will be generated in this language')}
                 </p>
-                <select
-                  id="working-language"
-                  className="mt-2 block w-full sm:w-[200px] h-11 md:h-9 rounded-md border border-input bg-background px-3 text-sm"
+                <Select
                   value={settings.workingLanguage || 'en'}
-                  onChange={handleLanguageChange}
+                  onValueChange={(value) => handleLanguageChange(value)}
                   disabled={isSavingLanguage}
                 >
-                  {languageOptions.map((opt) => (
-                    <option key={opt.value} value={opt.value}>{opt.label}</option>
-                  ))}
-                </select>
+                  <SelectTrigger id="working-language" className="mt-2 sm:w-[200px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {languageOptions.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
             </div>
           ) : (

package/src/modules/inbox_ops/components/proposals/EditActionDialog.tsx

@@ -2,6 +2,13 @@
 
 import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -130,14 +137,18 @@ function ContactPayloadEditor({
         )}
         <div>
           <Label>{t('inbox_ops.edit_dialog.type', 'Type')}</Label>
-          <select
-            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+          <Select
             value={type}
-            onChange={(event) => updateField('type', event.target.value)}
+            onValueChange={(value) => updateField('type', value)}
           >
-            <option value="person">{t('inbox_ops.contact_type.person', 'Person')}</option>
-            <option value="company">{t('inbox_ops.contact_type.company', 'Company')}</option>
-          </select>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="person">{t('inbox_ops.contact_type.person', 'Person')}</SelectItem>
+              <SelectItem value="company">{t('inbox_ops.contact_type.company', 'Company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
@@ -187,14 +198,18 @@ function LinkContactPayloadEditor({
       <div className="grid grid-cols-2 gap-3">
         <div>
           <Label>{t('inbox_ops.edit_dialog.contact_type', 'Contact Type')}</Label>
-          <select
-            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+          <Select
             value={(payload.contactType as string) || 'person'}
-            onChange={(event) => updateField('contactType', event.target.value)}
+            onValueChange={(value) => updateField('contactType', value)}
           >
-            <option value="person">{t('inbox_ops.contact_type.person', 'Person')}</option>
-            <option value="company">{t('inbox_ops.contact_type.company', 'Company')}</option>
-          </select>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="person">{t('inbox_ops.contact_type.person', 'Person')}</SelectItem>
+              <SelectItem value="company">{t('inbox_ops.contact_type.company', 'Company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div>
           <Label>{t('inbox_ops.edit_dialog.contact_name', 'Contact Name')}</Label>
@@ -366,28 +381,36 @@ function LogActivityPayloadEditor({
         </div>
         <div>
           <Label>{t('inbox_ops.edit_dialog.contact_type', 'Contact Type')}</Label>
-          <select
-            className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+          <Select
             value={(payload.contactType as string) || 'person'}
-            onChange={(event) => updateField('contactType', event.target.value)}
+            onValueChange={(value) => updateField('contactType', value)}
           >
-            <option value="person">{t('inbox_ops.contact_type.person', 'Person')}</option>
-            <option value="company">{t('inbox_ops.contact_type.company', 'Company')}</option>
-          </select>
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="person">{t('inbox_ops.contact_type.person', 'Person')}</SelectItem>
+              <SelectItem value="company">{t('inbox_ops.contact_type.company', 'Company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
       <div>
         <Label>{t('inbox_ops.edit_dialog.activity_type', 'Activity Type')}</Label>
-        <select
-          className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm"
+        <Select
           value={(payload.activityType as string) || 'email'}
-          onChange={(event) => updateField('activityType', event.target.value)}
+          onValueChange={(value) => updateField('activityType', value)}
         >
-          <option value="email">{t('inbox_ops.activity_type.email', 'Email')}</option>
-          <option value="call">{t('inbox_ops.activity_type.call', 'Call')}</option>
-          <option value="meeting">{t('inbox_ops.activity_type.meeting', 'Meeting')}</option>
-          <option value="note">{t('inbox_ops.activity_type.note', 'Note')}</option>
-        </select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="email">{t('inbox_ops.activity_type.email', 'Email')}</SelectItem>
+            <SelectItem value="call">{t('inbox_ops.activity_type.call', 'Call')}</SelectItem>
+            <SelectItem value="meeting">{t('inbox_ops.activity_type.meeting', 'Meeting')}</SelectItem>
+            <SelectItem value="note">{t('inbox_ops.activity_type.note', 'Note')}</SelectItem>
+          </SelectContent>
+        </Select>
       </div>
       <div>
         <Label>{t('inbox_ops.edit_dialog.subject', 'Subject')}</Label>

package/src/modules/integrations/backend/integrations/[id]/page.tsx

@@ -11,6 +11,13 @@ import { FormHeader } from '@open-mercato/ui/backend/forms'
 import { Card, CardHeader, CardTitle, CardContent } from '@open-mercato/ui/primitives/card'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
@@ -1185,18 +1192,20 @@ export default function IntegrationDetailPage({ params }: IntegrationDetailPageP
           {showLogsTab ? (
             <TabsContent value="logs" className="mt-0 space-y-4">
             <div className="flex items-center gap-3">
-              <div className="relative inline-flex">
-                <select
-                  className="h-11 min-w-40 appearance-none rounded-xl border border-border bg-card pl-4 pr-11 text-sm font-medium text-foreground shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
-                  value={logLevel}
-                  onChange={(event) => setLogLevel(event.target.value)}
+              <div className="inline-flex">
+                <Select
+                  value={logLevel || undefined}
+                  onValueChange={(value) => setLogLevel(value ?? '')}
                 >
-                  <option value="">{t('integrations.detail.logs.level.all')}</option>
-                  <option value="info">{t('integrations.detail.logs.level.info')}</option>
-                  <option value="warn">{t('integrations.detail.logs.level.warn')}</option>
-                  <option value="error">{t('integrations.detail.logs.level.error')}</option>
-                </select>
-                <ChevronDown className="pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                  <SelectTrigger size="lg" className="min-w-40">
+                    <SelectValue placeholder={t('integrations.detail.logs.level.all')} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="info">{t('integrations.detail.logs.level.info')}</SelectItem>
+                    <SelectItem value="warn">{t('integrations.detail.logs.level.warn')}</SelectItem>
+                    <SelectItem value="error">{t('integrations.detail.logs.level.error')}</SelectItem>
+                  </SelectContent>
+                </Select>
               </div>
             </div>
             {isLoadingLogs ? (

package/src/modules/integrations/backend/integrations/bundle/[id]/page.tsx

@@ -8,6 +8,13 @@ import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -201,16 +208,19 @@ export default function BundleConfigPage({ params }: BundleConfigPageProps) {
                     {field.label}{field.required && <span className="text-red-500 ml-0.5">*</span>}
                   </label>
                   {field.type === 'select' && field.options ? (
-                    <select
-                      className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm"
-                      value={(credValues[field.key] as string) ?? ''}
-                      onChange={(e) => setCredValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    <Select
+                      value={(credValues[field.key] as string) || undefined}
+                      onValueChange={(value) => setCredValues((prev) => ({ ...prev, [field.key]: value ?? '' }))}
                     >
-                      <option value="">—</option>
-                      {field.options.map((opt) => (
-                        <option key={opt.value} value={opt.value}>{opt.label}</option>
-                      ))}
-                    </select>
+                      <SelectTrigger>
+                        <SelectValue placeholder="—" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {field.options.map((opt) => (
+                          <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   ) : field.type === 'boolean' ? (
                     <Switch
                       checked={Boolean(credValues[field.key])}

package/src/modules/planner/components/AvailabilityRulesEditor.tsx

@@ -6,6 +6,13 @@ import { ScheduleView, type ScheduleItem, type ScheduleRange, type ScheduleSlot,
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
 import { apiCall, apiCallOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { createCrud, deleteCrud, updateCrud } from '@open-mercato/ui/backend/utils/crud'
@@ -1308,22 +1315,24 @@ export function AvailabilityRulesEditor({
               {ruleSetsLoading ? (
                 <span className="text-xs text-muted-foreground">{listLabels.ruleSetLoading}</span>
               ) : (
-                <select
-                  className="h-9 rounded border bg-background px-2 text-sm"
-                  value={rulesetId ?? ''}
-                  onChange={(event) => {
-                    const value = event.target.value
+                <Select
+                  value={rulesetId || undefined}
+                  onValueChange={(value) => {
                     void handleRuleSetChange(value ? value : null)
                   }}
                   disabled={isReadOnly}
                 >
-                  <option value="">{listLabels.ruleSetPlaceholder}</option>
-                  {ruleSets.map((ruleSet) => (
-                    <option key={ruleSet.id} value={ruleSet.id}>
-                      {ruleSet.name}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger size="sm" className="w-auto min-w-[10rem]">
+                    <SelectValue placeholder={listLabels.ruleSetPlaceholder} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {ruleSets.map((ruleSet) => (
+                      <SelectItem key={ruleSet.id} value={ruleSet.id}>
+                        {ruleSet.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               )}
               <Button type="button" variant="outline" size="sm" onClick={() => setCreateRuleSetOpen(true)} disabled={isReadOnly}>
                 <Plus className="size-4 mr-2" aria-hidden />
@@ -1717,17 +1726,21 @@ export function AvailabilityRulesEditor({
                       ) : (
                         <div className="space-y-2">
                           <label className="text-xs text-muted-foreground">{listLabels.applyScopeWeekday}</label>
-                          <select
-                            className="h-9 rounded border bg-background pl-2 pr-8 text-sm"
+                          <Select
                             value={String(editorWeekday)}
-                            onChange={(event) => setEditorWeekday(Number(event.target.value))}
+                            onValueChange={(value) => setEditorWeekday(Number(value))}
                           >
-                            {DAY_LABELS.map((day, index) => (
-                              <option key={day.code} value={index}>
-                                {t(day.nameKey, day.fallback)}
-                              </option>
-                            ))}
-                          </select>
+                            <SelectTrigger size="sm" className="w-auto min-w-[8rem]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {DAY_LABELS.map((day, index) => (
+                                <SelectItem key={day.code} value={String(index)}>
+                                  {t(day.nameKey, day.fallback)}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
                         </div>
                       )}
 

package/src/modules/resources/components/ResourceCrudForm.tsx

@@ -7,6 +7,13 @@ import { DictionarySelectControl } from '@open-mercato/core/modules/dictionaries
 import { AppearanceSelector } from '@open-mercato/core/modules/dictionaries/components/AppearanceSelector'
 import { AttachmentsSection, TagsSection, type TagOption, type TagsSectionLabels } from '@open-mercato/ui/backend/detail'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { E } from '#generated/entities.ids.generated'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
@@ -132,26 +139,28 @@ export function useResourcesResourceFormConfig(options: {
         type: 'custom',
         component: ({ value, setValue, setFormValue, disabled }) => (
           <div className="flex items-center gap-2">
-            <select
-              className="h-9 w-full rounded border px-2 text-sm"
-              value={typeof value === 'string' ? value : ''}
-              onChange={(event) => {
-                const next = event.target.value || ''
-                setValue(next)
+            <Select
+              value={typeof value === 'string' && value ? value : undefined}
+              onValueChange={(next) => {
+                const value = next || ''
+                setValue(value)
                 if (setFormValue) {
-                  setFormValue('customFieldsetCode', resolveFieldsetCode(next || null))
+                  setFormValue('customFieldsetCode', resolveFieldsetCode(value || null))
                 }
               }}
-              data-crud-focus-target=""
               disabled={disabled}
             >
-              <option value="">{t('ui.forms.select.emptyOption', '—')}</option>
-              {resourceTypes.map((type) => (
-                <option key={type.id} value={type.id}>
-                  {type.name}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger data-crud-focus-target="">
+                <SelectValue placeholder={t('ui.forms.select.emptyOption', '—')} />
+              </SelectTrigger>
+              <SelectContent>
+                {resourceTypes.map((type) => (
+                  <SelectItem key={type.id} value={type.id}>
+                    {type.name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
             <Button
               asChild
               type="button"

package/src/modules/sales/backend/sales/documents/[id]/page.tsx

@@ -1139,21 +1139,18 @@ function ContactEmailInlineEditor({
                 }
               }}
             >
-              <div className="relative">
-                <Mail className="pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <input
-                  className="w-full rounded-md border pl-8 pr-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                  value={draft}
-                  onChange={(event) => {
-                    if (error) setError(null)
-                    setDraft(event.target.value)
-                  }}
-                  placeholder={placeholder}
-                  type="email"
-                  autoFocus
-                  spellCheck={false}
-                />
-              </div>
+              <Input
+                leftIcon={<Mail />}
+                value={draft}
+                onChange={(event) => {
+                  if (error) setError(null)
+                  setDraft(event.target.value)
+                }}
+                placeholder={placeholder}
+                type="email"
+                autoFocus
+                spellCheck={false}
+              />
               {error ? <p className="text-xs text-destructive">{error}</p> : null}
               {!error && duplicate ? (
                 <p className="text-xs text-muted-foreground">

package/src/modules/sales/components/ProviderFieldInput.tsx

@@ -1,6 +1,12 @@
 import { Input } from '@open-mercato/ui/primitives/input'
-import { Label } from '@open-mercato/ui/primitives/label'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { Textarea } from '@open-mercato/ui/primitives/textarea'
 import { isRecord } from '@open-mercato/shared/lib/utils'
 import type { ProviderSettingField } from '../lib/providers'
@@ -34,30 +40,33 @@ export function renderProviderFieldInput(opts: {
       )
     case 'boolean':
       return (
-        <div className="flex items-center gap-2 py-1">
-          <Switch
+        <div className="py-1">
+          <SwitchField
             id={field.key}
+            label={field.placeholder ?? ''}
+            flip
             checked={Boolean(value)}
             onCheckedChange={(checked) => onChange(checked)}
           />
-          <Label htmlFor={field.key}>{field.placeholder ?? ''}</Label>
         </div>
       )
     case 'select':
       return (
-        <select
-          {...common}
-          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-          value={typeof value === 'string' ? value : ''}
-          onChange={(evt) => onChange(evt.target.value)}
+        <Select
+          value={typeof value === 'string' && value ? value : undefined}
+          onValueChange={(next) => onChange(next ?? '')}
         >
-          <option value="">—</option>
-          {(field.options ?? []).map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger {...common}>
+            <SelectValue placeholder="—" />
+          </SelectTrigger>
+          <SelectContent>
+            {(field.options ?? []).map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       )
     case 'secret':
       return (