@open-mercato/core 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/src/modules/dashboards/components/WidgetVisibilityEditor.tsx

@@ -3,6 +3,8 @@
 import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -279,28 +281,21 @@ export const WidgetVisibilityEditor = React.forwardRef<WidgetVisibilityEditorHan
       )}
 
       {kind === 'user' && (
-        <div className="flex items-center gap-3 rounded-md border bg-muted/30 px-3 py-2">
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="radio"
-              name="widgetOverride"
-              value="inherit"
-              checked={mode === 'inherit'}
-              onChange={() => setMode('inherit')}
-            />
-            {t('dashboards.widgets.mode.inherit', 'Inherit from roles')}
-          </label>
-          <label className="flex items-center gap-2 text-sm">
-            <input
-              type="radio"
-              name="widgetOverride"
-              value="override"
-              checked={mode === 'override'}
-              onChange={() => setMode('override')}
-            />
-            {t('dashboards.widgets.mode.override', 'Override for this user')}
-          </label>
-        </div>
+        <RadioGroup
+          className="flex flex-row items-center gap-3 rounded-md border bg-muted/30 px-3 py-2"
+          name="widgetOverride"
+          value={mode}
+          onValueChange={(next) => setMode(next as 'inherit' | 'override')}
+        >
+          <RadioField
+            value="inherit"
+            label={t('dashboards.widgets.mode.inherit', 'Inherit from roles')}
+          />
+          <RadioField
+            value="override"
+            label={t('dashboards.widgets.mode.override', 'Override for this user')}
+          />
+        </RadioGroup>
       )}
 
       {kind === 'user' && mode === 'inherit' && (

package/src/modules/dashboards/widgets/dashboard/orders-by-status/widget.client.tsx

@@ -10,6 +10,13 @@ import {
   InlineDateRangeSelect,
   type DateRangePreset,
 } from '@open-mercato/ui/backend/date-range'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { DEFAULT_SETTINGS, hydrateSettings, type OrdersByStatusSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 
@@ -115,15 +122,18 @@ const OrdersByStatusWidget: React.FC<DashboardWidgetComponentProps<OrdersByStatu
           >
             {t('dashboards.analytics.settings.chartVariant', 'Chart Style')}
           </label>
-          <select
-            id="orders-by-status-variant"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.variant}
-            onChange={(e) => onSettingsChange({ ...hydrated, variant: e.target.value as 'pie' | 'donut' })}
+            onValueChange={(value) => onSettingsChange({ ...hydrated, variant: value as 'pie' | 'donut' })}
           >
-            <option value="donut">{t('dashboards.analytics.chartVariant.donut', 'Donut')}</option>
-            <option value="pie">{t('dashboards.analytics.chartVariant.pie', 'Pie')}</option>
-          </select>
+            <SelectTrigger id="orders-by-status-variant" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="donut">{t('dashboards.analytics.chartVariant.donut', 'Donut')}</SelectItem>
+              <SelectItem value="pie">{t('dashboards.analytics.chartVariant.pie', 'Pie')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
     )

package/src/modules/dashboards/widgets/dashboard/revenue-trend/widget.client.tsx

@@ -10,6 +10,13 @@ import {
   InlineDateRangeSelect,
   type DateRangePreset,
 } from '@open-mercato/ui/backend/date-range'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import type { DateGranularity } from '@open-mercato/shared/modules/analytics'
 import { DEFAULT_SETTINGS, hydrateSettings, type RevenueTrendSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
@@ -163,18 +170,21 @@ const RevenueTrendWidget: React.FC<DashboardWidgetComponentProps<RevenueTrendSet
           >
             {t('dashboards.analytics.settings.granularity', 'Granularity')}
           </label>
-          <select
-            id="revenue-trend-granularity"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.granularity}
-            onChange={(e) => onSettingsChange({ ...hydrated, granularity: e.target.value as DateGranularity })}
+            onValueChange={(value) => onSettingsChange({ ...hydrated, granularity: value as DateGranularity })}
           >
-            {GRANULARITY_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {t(opt.labelKey, opt.value)}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="revenue-trend-granularity" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {GRANULARITY_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {t(opt.labelKey, opt.value)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
         <div className="space-y-1.5">
           <label className="flex items-center gap-2 text-sm">

package/src/modules/dashboards/widgets/dashboard/sales-by-region/widget.client.tsx

@@ -6,6 +6,7 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { BarChart, type BarChartDataItem } from '@open-mercato/ui/backend/charts'
 import { DateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { DEFAULT_SETTINGS, hydrateSettings, type SalesByRegionSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 import { formatCurrencyCompact } from '../../../lib/formatters'
@@ -94,12 +95,12 @@ const SalesByRegionWidget: React.FC<DashboardWidgetComponentProps<SalesByRegionS
           >
             {t('dashboards.analytics.settings.limit', 'Number of items')}
           </label>
-          <input
+          <Input
             id="sales-by-region-limit"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)

package/src/modules/dashboards/widgets/dashboard/top-customers/widget.client.tsx

@@ -6,6 +6,7 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { TopNTable, type TopNTableColumn } from '@open-mercato/ui/backend/charts'
 import { DateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { DEFAULT_SETTINGS, hydrateSettings, type TopCustomersSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 import { formatCurrencySafe } from '../../../lib/formatters'
@@ -130,12 +131,12 @@ const TopCustomersWidget: React.FC<DashboardWidgetComponentProps<TopCustomersSet
           >
             {t('dashboards.analytics.settings.limit', 'Number of items')}
           </label>
-          <input
+          <Input
             id="top-customers-limit"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)

package/src/modules/dashboards/widgets/dashboard/top-products/widget.client.tsx

@@ -6,6 +6,14 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { BarChart, type BarChartDataItem } from '@open-mercato/ui/backend/charts'
 import { DateRangeSelect, InlineDateRangeSelect, type DateRangePreset } from '@open-mercato/ui/backend/date-range'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { DEFAULT_SETTINGS, hydrateSettings, type TopProductsSettings } from './config'
 import type { WidgetDataResponse } from '../../../services/widgetDataService'
 import { formatCurrencyCompact } from '../../../lib/formatters'
@@ -117,12 +125,12 @@ const TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSetti
           >
             {t('dashboards.analytics.settings.limit', 'Number of items')}
           </label>
-          <input
+          <Input
             id="top-products-limit"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)
@@ -137,15 +145,18 @@ const TopProductsWidget: React.FC<DashboardWidgetComponentProps<TopProductsSetti
           >
             {t('dashboards.analytics.settings.chartLayout', 'Chart Layout')}
           </label>
-          <select
-            id="top-products-layout"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.layout}
-            onChange={(e) => onSettingsChange({ ...hydrated, layout: e.target.value as 'horizontal' | 'vertical' })}
+            onValueChange={(value) => onSettingsChange({ ...hydrated, layout: value as 'horizontal' | 'vertical' })}
           >
-            <option value="horizontal">{t('dashboards.analytics.settings.horizontal', 'Horizontal')}</option>
-            <option value="vertical">{t('dashboards.analytics.settings.vertical', 'Vertical')}</option>
-          </select>
+            <SelectTrigger id="top-products-layout" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="horizontal">{t('dashboards.analytics.settings.horizontal', 'Horizontal')}</SelectItem>
+              <SelectItem value="vertical">{t('dashboards.analytics.settings.vertical', 'Vertical')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
     )

package/src/modules/data_sync/backend/data-sync/page.tsx

@@ -13,6 +13,13 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Separator } from '@open-mercato/ui/primitives/separator'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { RowActions } from '@open-mercato/ui/backend/RowActions'
@@ -676,56 +683,71 @@ export default function SyncRunsDashboardPage() {
                   <PlugZap className="size-4 text-muted-foreground" />
                   <span>{t('data_sync.dashboard.columns.integration')}</span>
                 </Label>
-                <select
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                  value={selectedIntegrationId}
-                  onChange={(event) => setSelectedIntegrationId(event.target.value)}
+                <Select
+                  value={selectedIntegrationId || undefined}
+                  onValueChange={(value) => setSelectedIntegrationId(value ?? '')}
                   disabled={isLoadingOptions || options.length === 0}
                 >
-                  {options.length === 0 ? (
-                    <option value="">{t('integrations.marketplace.noResults', 'No integrations found')}</option>
-                  ) : null}
-                  {options.map((item) => (
-                    <option key={item.integrationId} value={item.integrationId}>
-                      {item.title}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger size="lg">
+                    <SelectValue
+                      placeholder={
+                        options.length === 0
+                          ? t('integrations.marketplace.noResults', 'No integrations found')
+                          : undefined
+                      }
+                    />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {options.map((item) => (
+                      <SelectItem key={item.integrationId} value={item.integrationId}>
+                        {item.title}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
               <div className="space-y-2">
                 <Label className="flex items-center gap-2 text-sm font-medium">
                   <Boxes className="size-4 text-muted-foreground" />
                   <span>{t('data_sync.dashboard.columns.entityType')}</span>
                 </Label>
-                <select
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                  value={selectedEntityType}
-                  onChange={(event) => setSelectedEntityType(event.target.value)}
+                <Select
+                  value={selectedEntityType || undefined}
+                  onValueChange={(value) => setSelectedEntityType(value ?? '')}
                   disabled={entityOptions.length === 0}
                 >
-                  {entityOptions.map((entityType) => (
-                    <option key={entityType} value={entityType}>
-                      {formatEntityTypeLabel(entityType)}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger size="lg">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {entityOptions.map((entityType) => (
+                      <SelectItem key={entityType} value={entityType}>
+                        {formatEntityTypeLabel(entityType)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               </div>
               <div className="space-y-2">
                 <Label className="flex items-center gap-2 text-sm font-medium">
                   <ArrowRightLeft className="size-4 text-muted-foreground" />
                   <span>{t('data_sync.dashboard.columns.direction')}</span>
                 </Label>
-                <select
-                  className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                <Select
                   value={selectedDirection}
-                  onChange={(event) => setSelectedDirection(event.target.value === 'export' ? 'export' : 'import')}
+                  onValueChange={(value) => setSelectedDirection(value === 'export' ? 'export' : 'import')}
                   disabled={selectedIntegration?.direction !== 'bidirectional'}
                 >
-                  <option value="import">{t('data_sync.dashboard.direction.import')}</option>
-                  {(selectedIntegration?.direction === 'bidirectional' || selectedIntegration?.direction === 'export') ? (
-                    <option value="export">{t('data_sync.dashboard.direction.export')}</option>
-                  ) : null}
-                </select>
+                  <SelectTrigger size="lg">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="import">{t('data_sync.dashboard.direction.import')}</SelectItem>
+                    {(selectedIntegration?.direction === 'bidirectional' || selectedIntegration?.direction === 'export') ? (
+                      <SelectItem value="export">{t('data_sync.dashboard.direction.export')}</SelectItem>
+                    ) : null}
+                  </SelectContent>
+                </Select>
               </div>
             </div>
 
@@ -818,17 +840,21 @@ export default function SyncRunsDashboardPage() {
                       <Clock3 className="size-4 text-muted-foreground" />
                       <span>{t('data_sync.dashboard.schedule.type', 'Schedule type')}</span>
                     </Label>
-                    <select
-                      className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                    <Select
                       value={scheduleEditor.scheduleType}
-                      onChange={(event) => updateScheduleEditor({
-                        scheduleType: event.target.value === 'cron' ? 'cron' : 'interval',
+                      onValueChange={(value) => updateScheduleEditor({
+                        scheduleType: value === 'cron' ? 'cron' : 'interval',
                       })}
                       disabled={isLoadingSchedule || isSavingSchedule || isDeletingSchedule || !selectedIntegration || !selectedEntityType}
                     >
-                      <option value="interval">{t('data_sync.dashboard.schedule.interval', 'Interval')}</option>
-                      <option value="cron">{t('data_sync.dashboard.schedule.cron', 'Cron')}</option>
-                    </select>
+                      <SelectTrigger size="lg">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="interval">{t('data_sync.dashboard.schedule.interval', 'Interval')}</SelectItem>
+                        <SelectItem value="cron">{t('data_sync.dashboard.schedule.cron', 'Cron')}</SelectItem>
+                      </SelectContent>
+                    </Select>
                   </div>
                   <div className="space-y-2">
                     <Label className="flex items-center gap-2 text-sm font-medium">

package/src/modules/data_sync/components/IntegrationScheduleTab.tsx

@@ -8,6 +8,13 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -396,17 +403,21 @@ export function IntegrationScheduleTab(props: IntegrationScheduleTabProps) {
                     <td className="px-3 py-3 font-medium">{formatEntityTypeLabel(row.entityType)}</td>
                     <td className="px-3 py-3">{t(`data_sync.dashboard.direction.${row.direction}`, row.direction === 'import' ? 'Import' : 'Export')}</td>
                     <td className="px-3 py-3">
-                      <select
-                        className="flex h-10 w-full min-w-32 rounded-md border border-input bg-background px-3 py-2 text-sm"
+                      <Select
                         value={scheduleState.scheduleType}
-                        onChange={(event) => updateScheduleEditor(row.key, {
-                          scheduleType: event.target.value === 'cron' ? 'cron' : 'interval',
+                        onValueChange={(value) => updateScheduleEditor(row.key, {
+                          scheduleType: value === 'cron' ? 'cron' : 'interval',
                         }, row.entityType)}
                         disabled={controlsDisabled}
                       >
-                        <option value="interval">{t('data_sync.dashboard.schedule.interval', 'Interval')}</option>
-                        <option value="cron">{t('data_sync.dashboard.schedule.cron', 'Cron')}</option>
-                      </select>
+                        <SelectTrigger size="lg" className="min-w-32">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="interval">{t('data_sync.dashboard.schedule.interval', 'Interval')}</SelectItem>
+                          <SelectItem value="cron">{t('data_sync.dashboard.schedule.cron', 'Cron')}</SelectItem>
+                        </SelectContent>
+                      </Select>
                     </td>
                     <td className="px-3 py-3">
                       <Input

package/src/modules/dictionaries/components/AppearanceSelector.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Ellipsis } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { ICON_LIBRARY, ICON_SUGGESTIONS, type IconOption, renderDictionaryColor, renderDictionaryIcon } from './dictionaryAppearance'
 
 export type AppearanceSelectorLabels = {
@@ -142,12 +143,12 @@ export function AppearanceSelector({
         <label className="text-sm font-medium">{labels.iconLabel}</label>
         <div ref={pickerContainerRef} className="relative">
           <div className="flex gap-2">
-            <input
+            <Input
               type="text"
               value={normalizedIcon}
               onChange={(event) => onIconChange(event.target.value)}
               placeholder={labels.iconPlaceholder}
-              className="flex-1 rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="flex-1"
               disabled={disabled}
             />
             <Button
@@ -166,14 +167,13 @@ export function AppearanceSelector({
           {pickerOpen ? (
             <div className="absolute left-0 right-0 top-full z-dropdown mt-2 rounded-md border border-border bg-popover p-3 shadow-lg">
               <div className="space-y-3">
-                <input
+                <Input
                   ref={searchInputRef}
                   type="search"
                   value={iconSearch}
                   onChange={(event) => setIconSearch(event.target.value)}
                   placeholder={labels.iconSearchPlaceholder}
                   aria-label={labels.iconSearchPlaceholder}
-                  className="w-full rounded border border-border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   autoComplete="off"
                 />
                 <div className="max-h-64 overflow-y-auto pr-1">

package/src/modules/dictionaries/components/DictionaryEntriesEditor.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Plus, Pencil, Trash2, RefreshCw, Languages } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import {
   Dialog,
   DialogContent,
@@ -362,7 +363,7 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
                 {t('dictionaries.config.entries.dialog.valueLabel', 'Value')}
                 <span className="ml-1 text-destructive">*</span>
               </label>
-              <input
+              <Input
                 type="text"
                 value={formState.value}
                 onChange={(event) => {
@@ -372,7 +373,6 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
                     setErrors((prev) => ({ ...prev, value: undefined }))
                   }
                 }}
-                className={`w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${errors.value ? 'border-destructive focus-visible:ring-destructive' : ''}`}
                 aria-invalid={errors.value ? 'true' : 'false'}
                 aria-describedby="dictionary-entry-value-error"
               />
@@ -386,12 +386,11 @@ export function DictionaryEntriesEditor({ dictionaryId, dictionaryName, readOnly
               <label className="text-sm font-medium">
                 {t('dictionaries.config.entries.dialog.labelLabel', 'Label')}
               </label>
-              <input
+              <Input
                 type="text"
                 value={formState.label}
                 onChange={(event) => setFormState((prev) => ({ ...prev, label: event.target.value }))}
                 placeholder={t('dictionaries.config.entries.dialog.labelPlaceholder', 'Display name shown in UI')}
-                className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
             </div>
             <AppearanceSelector

package/src/modules/dictionaries/components/DictionaryEntrySelect.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { Plus, Settings, Save } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import {
   Dialog,
   DialogContent,
@@ -14,6 +15,13 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@open-mercato/ui/primitives/dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { buildHrefWithReturnTo } from '@open-mercato/shared/lib/navigation/returnTo'
@@ -233,25 +241,25 @@ export function DictionaryEntrySelect({
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-2">
-        <select
-          className={[
-            'h-9 w-full rounded border pl-3 pr-8 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-            selectClassName,
-          ]
-            .filter(Boolean)
-            .join(' ')}
-          value={value ?? ''}
-          onChange={(event) => onChange(event.target.value ? event.target.value : undefined)}
+        <Select
+          value={value || undefined}
+          onValueChange={(next) => onChange(next || undefined)}
           disabled={disabled}
-          title={activeOption?.label ?? undefined}
         >
-          <option value="">{labels.placeholder}</option>
-          {options.map((option) => (
-            <option key={option.value} value={option.value} title={option.label}>
-              {option.label}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger
+            className={selectClassName}
+            title={activeOption?.label ?? undefined}
+          >
+            <SelectValue placeholder={labels.placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         <div className="flex items-center gap-1">
           {allowInlineCreate && createOption ? (
             <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
@@ -275,9 +283,8 @@ export function DictionaryEntrySelect({
                 <div className="space-y-4">
                   <div className="space-y-2">
                     <label className="text-sm font-medium">{labels.valueLabel}</label>
-                    <input
+                    <Input
                       type="text"
-                      className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                       value={newValue}
                       onChange={(event) => {
                         setNewValue(event.target.value)
@@ -291,9 +298,8 @@ export function DictionaryEntrySelect({
                   {showLabelInput ? (
                     <div className="space-y-2">
                       <label className="text-sm font-medium">{labels.labelLabel}</label>
-                      <input
+                      <Input
                         type="text"
-                        className="w-full rounded border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                         value={newLabel}
                         onChange={(event) => setNewLabel(event.target.value)}
                         placeholder={labels.labelPlaceholder}