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

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}

package/src/modules/dictionaries/fields/dictionary.tsx

@@ -5,6 +5,13 @@ import type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudFo
 import { FieldRegistry } from '@open-mercato/ui/backend/fields/registry'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { DictionarySelectControl } from '../components/DictionarySelectControl'
 import { useDictionaryEntries } from '../components/hooks/useDictionaryEntries'
 
@@ -42,18 +49,21 @@ function DictionaryDefaultSelector({
       <label className="text-xs font-medium text-muted-foreground">
         {t('dictionaries.customFields.defaultValue', 'Default value')}
       </label>
-      <select
-        className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        value={defaultValue}
-        onChange={(event) => onChange(event.target.value)}
+      <Select
+        value={defaultValue || undefined}
+        onValueChange={(next) => onChange(next ?? '')}
       >
-        <option value="">{t('dictionaries.customFields.defaultValueNone', 'No default')}</option>
-        {entries.map((entry) => (
-          <option key={entry.value} value={entry.value}>
-            {entry.label}
-          </option>
-        ))}
-      </select>
+        <SelectTrigger size="sm">
+          <SelectValue placeholder={t('dictionaries.customFields.defaultValueNone', 'No default')} />
+        </SelectTrigger>
+        <SelectContent>
+          {entries.map((entry) => (
+            <SelectItem key={entry.value} value={entry.value}>
+              {entry.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
       {isLoading ? (
         <p className="text-xs text-muted-foreground">
           {t('dictionaries.customFields.loading', 'Loading dictionaries…')}
@@ -126,19 +136,22 @@ function DictionaryFieldDefEditor({ def, onChange }: { def: { configJson?: Dicti
         <label className="text-xs font-medium text-muted-foreground">
           {t('dictionaries.customFields.dictionaryLabel', 'Dictionary source')}
         </label>
-        <select
-          className="w-full rounded border px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          value={selectedId}
-          onChange={(event) => onChange({ dictionaryId: event.target.value || undefined })}
+        <Select
+          value={selectedId || undefined}
+          onValueChange={(next) => onChange({ dictionaryId: next || undefined })}
         >
-          <option value="">{t('dictionaries.customFields.dictionaryPlaceholder', 'Select a dictionary')}</option>
-          {items.map((item) => (
-            <option key={item.id} value={item.id}>
-              {item.name}
-              {item.isActive ? '' : ` (${t('dictionaries.customFields.inactive', 'inactive')})`}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger size="sm">
+            <SelectValue placeholder={t('dictionaries.customFields.dictionaryPlaceholder', 'Select a dictionary')} />
+          </SelectTrigger>
+          <SelectContent>
+            {items.map((item) => (
+              <SelectItem key={item.id} value={item.id}>
+                {item.name}
+                {item.isActive ? '' : ` (${t('dictionaries.customFields.inactive', 'inactive')})`}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         {loading ? (
           <p className="text-xs text-muted-foreground">
             {t('dictionaries.customFields.loading', 'Loading dictionaries…')}

package/src/modules/entities/components/EncryptionManager.tsx

@@ -3,6 +3,13 @@
 import * as React from 'react'
 import { useQuery, useMutation } from '@tanstack/react-query'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -303,32 +310,38 @@ export function EncryptionManager() {
               return (
                 <tr key={row.id} className="border-t">
                   <td className="px-3 py-2 align-top">
-                    <select
-                      className="w-full rounded border bg-background px-3 py-2 text-sm"
-                      value={row.field}
-                      onChange={(event) => updateField(row.id, { field: event.target.value })}
+                    <Select
+                      value={row.field || undefined}
+                      onValueChange={(value) => updateField(row.id, { field: value ?? '' })}
                     >
-                      <option value="">{t('entities.encryption.fields.selectField', 'Select field')}</option>
-                      {fieldOpts.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('entities.encryption.fields.selectField', 'Select field')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {fieldOpts.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                   </td>
                   <td className="px-3 py-2 align-top">
-                    <select
-                      className="w-full rounded border bg-background px-3 py-2 text-sm"
-                      value={row.hashField || ''}
-                      onChange={(event) => updateField(row.id, { hashField: event.target.value ? event.target.value : null })}
+                    <Select
+                      value={row.hashField || undefined}
+                      onValueChange={(value) => updateField(row.id, { hashField: value || null })}
                     >
-                      <option value="">{t('entities.encryption.fields.selectHash', 'Select hash field (optional)')}</option>
-                      {hashOpts.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </select>
+                      <SelectTrigger>
+                        <SelectValue placeholder={t('entities.encryption.fields.selectHash', 'Select hash field (optional)')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {hashOpts.map((option) => (
+                          <SelectItem key={option.value} value={option.value}>
+                            {option.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
                     <p className="mt-1 text-overline text-muted-foreground">
                       {t('entities.encryption.fields.hashHint', 'Use when lookups must stay deterministic (e.g., login by email).')}
                     </p>
@@ -368,19 +381,22 @@ export function EncryptionManager() {
               <label className="text-xs text-muted-foreground">
                 {t('entities.encryption.selectEntity', 'Choose entity')}
               </label>
-              <select
-                className="mt-1 w-full rounded border px-3 py-2 text-sm"
-                value={selectedEntityId}
-                onChange={(event) => setSelectedEntityId(event.target.value)}
+              <Select
+                value={selectedEntityId || undefined}
+                onValueChange={(value) => setSelectedEntityId(value ?? '')}
                 disabled={loadingEntities || !!entitiesError}
               >
-                {!selectedEntityId ? <option value="">{t('entities.encryption.placeholder', 'Select an entity')}</option> : null}
-                {(entities?.items || []).map((item) => (
-                  <option key={item.entityId} value={item.entityId}>
-                    {item.label || item.entityId} {item.source === 'custom' ? `(${t('entities.encryption.source.custom', 'custom')})` : ''}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder={t('entities.encryption.placeholder', 'Select an entity')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {(entities?.items || []).map((item) => (
+                    <SelectItem key={item.entityId} value={item.entityId}>
+                      {item.label || item.entityId} {item.source === 'custom' ? `(${t('entities.encryption.source.custom', 'custom')})` : ''}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               {entitiesError ? (
                 <p className="mt-1 text-xs text-red-600">
                   {t('entities.encryption.errors.loadEntities', 'Failed to load entities')}

package/src/modules/feature_toggles/components/formConfig.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'
 
 
@@ -13,15 +21,19 @@ export function renderDefaultValueCreateComponent(props: CrudCustomFieldRenderPr
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.form.fields.defaultValue.boolean.label', 'Default 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>
             );
 
@@ -29,12 +41,11 @@ export function renderDefaultValueCreateComponent(props: CrudCustomFieldRenderPr
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.form.fields.defaultValue.string.label', 'Default Value (String)')}</label>
-                    <input
+                    <Input
                         type="text"
                         value={props.value as string || ''}
                         onChange={(e) => props.setValue(e.target.value)}
                         placeholder={t('feature_toggles.form.fields.defaultValue.string.placeholder', 'Enter default string value')}
-                        className="w-full h-9 rounded border px-2 text-sm"
                         disabled={props.disabled}
                         autoFocus={props.autoFocus}
                     />
@@ -45,11 +56,10 @@ export function renderDefaultValueCreateComponent(props: CrudCustomFieldRenderPr
             return (
                 <div>
                     <label className="block text-sm font-medium mb-2">{t('feature_toggles.form.fields.defaultValue.number.label', 'Default 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}
                     />