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

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 (

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

@@ -13,8 +13,15 @@ import {
   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 { Label } from '@open-mercato/ui/primitives/label'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { CrudForm, type CrudCustomFieldRenderProps, type CrudField } from '@open-mercato/ui/backend/CrudForm'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -171,17 +178,21 @@ function FlatRateSettingsEditor(props: {
               <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
                 <div className="space-y-1">
                   <Label className="text-xs uppercase text-muted-foreground">{translations.metric}</Label>
-                  <select
-                    className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                  <Select
                     value={rate.metric ?? 'item_count'}
-                    onChange={(evt) => updateRate(index, 'metric', evt.target.value)}
+                    onValueChange={(value) => updateRate(index, 'metric', value)}
                   >
-                    {metrics.map((opt) => (
-                      <option key={opt.value} value={opt.value}>
-                        {opt.label}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {metrics.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value}>
+                          {opt.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
                 <div className="space-y-1">
                   <Label className="text-xs uppercase text-muted-foreground">{translations.min}</Label>
@@ -239,16 +250,13 @@ function FlatRateSettingsEditor(props: {
           ))
         )}
       </div>
-      <div className="flex items-center gap-2">
-        <Switch
-          id="apply-base-rate"
-          checked={applyBaseRate}
-          onCheckedChange={(checked) => onChange({ ...value, applyBaseRate: checked })}
-        />
-        <Label htmlFor="apply-base-rate" className="text-sm">
-          {translations.applyBaseRate}
-        </Label>
-      </div>
+      <SwitchField
+        id="apply-base-rate"
+        label={translations.applyBaseRate}
+        flip
+        checked={applyBaseRate}
+        onCheckedChange={(checked) => onChange({ ...value, applyBaseRate: checked })}
+      />
     </div>
   )
 }

package/src/modules/sales/components/channels/ChannelOfferForm.tsx

@@ -10,6 +10,14 @@ import { createCrudFormError, type CrudServerFieldErrors } from '@open-mercato/u
 import { readApiResultOrThrow, apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Loader2, Search, Image as ImageIcon, Trash2 } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { E } from '#generated/entities.ids.generated'
@@ -933,18 +941,18 @@ function ChannelSelectInput({
     )
   }
   return (
-    <select
-      className="w-full rounded border px-2 py-2 text-sm"
-      value={value ?? ''}
-      onChange={(event) => onChange(event.target.value || null)}
-    >
-      <option value="">{t('sales.channels.offers.form.channelPlaceholder', 'Select channel')}</option>
-      {options.map((opt) => (
-        <option key={opt.id} value={opt.id}>
-          {opt.code ? `${opt.name} (${opt.code})` : opt.name}
-        </option>
-      ))}
-    </select>
+    <Select value={value || undefined} onValueChange={(next) => onChange(next || null)}>
+      <SelectTrigger>
+        <SelectValue placeholder={t('sales.channels.offers.form.channelPlaceholder', 'Select channel')} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((opt) => (
+          <SelectItem key={opt.id} value={opt.id}>
+            {opt.code ? `${opt.name} (${opt.code})` : opt.name}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
   )
 }
 
@@ -1027,19 +1035,16 @@ function ProductSelectInput({
 
   return (
     <div className="space-y-3">
-      <div className="relative">
-        <Search className="pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-        <input
-          className="w-full rounded border pl-8 pr-2 py-2 text-sm"
-          value={query}
-          onChange={(event) => {
-            setQuery(event.target.value)
-            setHasTyped(true)
-          }}
-          onKeyDown={handleKeyDown}
-          placeholder={t('sales.channels.offers.form.productSearchPlaceholder', 'Search by title, SKU, or ID…')}
-        />
-      </div>
+      <Input
+        leftIcon={<Search />}
+        value={query}
+        onChange={(event) => {
+          setQuery(event.target.value)
+          setHasTyped(true)
+        }}
+        onKeyDown={handleKeyDown}
+        placeholder={t('sales.channels.offers.form.productSearchPlaceholder', 'Search by title, SKU, or ID…')}
+      />
       {selectedHint ? (
         <div className="rounded border bg-muted px-3 py-2 text-xs text-muted-foreground">
           {selectedHint}
@@ -1819,11 +1824,10 @@ function PriceOverridesEditor({
         <div className="space-y-2">
           {values.map((row) => (
             <div key={row.tempId} className="grid gap-2 rounded border p-3 md:grid-cols-3">
-              <select
-                className="rounded border px-2 py-2 text-sm"
-                value={row.priceKindId ?? ''}
-                onChange={(event) => {
-                  const next = priceKinds.find((kind) => kind.id === event.target.value)
+              <Select
+                value={row.priceKindId || undefined}
+                onValueChange={(value) => {
+                  const next = priceKinds.find((kind) => kind.id === value)
                   updateRow(row.tempId, {
                     priceKindId: next?.id ?? null,
                     priceKindCode: next?.code ?? next?.title ?? null,
@@ -1832,28 +1836,29 @@ function PriceOverridesEditor({
                   })
                 }}
               >
-                <option value="">{t('sales.channels.offers.pricing.selectKind', 'Select price kind')}</option>
-                {priceKinds.map((kind) => (
-                  <option
-                    key={kind.id}
-                    value={kind.id}
-                    disabled={usedKindIdSet.has(kind.id) && row.priceKindId !== kind.id}
-                  >
-                  {kind.title ?? kind.code ?? kind.id}
-                </option>
-              ))}
-            </select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('sales.channels.offers.pricing.selectKind', 'Select price kind')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {priceKinds.map((kind) => (
+                    <SelectItem
+                      key={kind.id}
+                      value={kind.id}
+                      disabled={usedKindIdSet.has(kind.id) && row.priceKindId !== kind.id}
+                    >
+                      {kind.title ?? kind.code ?? kind.id}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
               <div className="relative">
                 {(row.currencyCode ?? basePrice?.currencyCode) ? (
                   <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs font-semibold text-muted-foreground">
                     {row.currencyCode ?? basePrice?.currencyCode}
                   </span>
                 ) : null}
-                <input
-                  className={cn(
-                    'w-full rounded border py-2 text-sm',
-                    row.currencyCode || basePrice?.currencyCode ? 'pl-16 pr-2' : 'px-2',
-                  )}
+                <Input
+                  inputClassName={cn(row.currencyCode || basePrice?.currencyCode ? 'pl-13' : '')}
                   type="number"
                   placeholder={t('sales.channels.offers.pricing.amount', 'Amount')}
                   value={row.amount ?? ''}