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

package/src/modules/business_rules/components/ActionRow.tsx

@@ -2,6 +2,14 @@
 
 import * as React from 'react'
 import { X, ChevronUp, ChevronDown } from 'lucide-react'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import type { Action } from './utils/actionValidation'
 import { getActionTypeOptions, getRequiredConfigFields, getOptionalConfigFields } from './utils/actionValidation'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -62,12 +70,12 @@ export function ActionRow({
           <label className="text-xs font-medium text-foreground col-span-1">
             {t('business_rules.components.actionRow.config.recipients')} {required && <span className="text-red-500">{t('business_rules.components.actionRow.actionType.required')}</span>}
           </label>
-          <input
+          <Input
             type="text"
             value={value}
             onChange={(e) => handleConfigChange(field, e.target.value.split(',').map((s) => s.trim()))}
             placeholder={t('business_rules.components.actionRow.config.recipients.placeholder')}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="col-span-3"
           />
           <div className="col-span-4 col-start-2">
             <p className="text-xs text-muted-foreground">{t('business_rules.components.actionRow.config.recipients.help')}</p>
@@ -80,16 +88,20 @@ export function ActionRow({
       return (
         <div key={field} className="grid grid-cols-4 gap-2 items-center">
           <label className="text-xs font-medium text-foreground col-span-1">{t('business_rules.components.actionRow.config.level')}</label>
-          <select
+          <Select
             value={value || 'info'}
-            onChange={(e) => handleConfigChange(field, e.target.value)}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onValueChange={(next) => handleConfigChange(field, next)}
           >
-            <option value="info">{t('business_rules.components.actionRow.config.level.info')}</option>
-            <option value="warn">{t('business_rules.components.actionRow.config.level.warn')}</option>
-            <option value="error">{t('business_rules.components.actionRow.config.level.error')}</option>
-            <option value="debug">{t('business_rules.components.actionRow.config.level.debug')}</option>
-          </select>
+            <SelectTrigger size="sm" className="col-span-3">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="info">{t('business_rules.components.actionRow.config.level.info')}</SelectItem>
+              <SelectItem value="warn">{t('business_rules.components.actionRow.config.level.warn')}</SelectItem>
+              <SelectItem value="error">{t('business_rules.components.actionRow.config.level.error')}</SelectItem>
+              <SelectItem value="debug">{t('business_rules.components.actionRow.config.level.debug')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       )
     }
@@ -98,17 +110,21 @@ export function ActionRow({
       return (
         <div key={field} className="grid grid-cols-4 gap-2 items-center">
           <label className="text-xs font-medium text-foreground col-span-1">{t('business_rules.components.actionRow.config.method')}</label>
-          <select
+          <Select
             value={value || 'POST'}
-            onChange={(e) => handleConfigChange(field, e.target.value)}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onValueChange={(next) => handleConfigChange(field, next)}
           >
-            <option value="GET">GET</option>
-            <option value="POST">POST</option>
-            <option value="PUT">PUT</option>
-            <option value="PATCH">PATCH</option>
-            <option value="DELETE">DELETE</option>
-          </select>
+            <SelectTrigger size="sm" className="col-span-3">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="GET">GET</SelectItem>
+              <SelectItem value="POST">POST</SelectItem>
+              <SelectItem value="PUT">PUT</SelectItem>
+              <SelectItem value="PATCH">PATCH</SelectItem>
+              <SelectItem value="DELETE">DELETE</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       )
     }
@@ -139,12 +155,12 @@ export function ActionRow({
         <label className="text-xs font-medium text-foreground col-span-1">
           {field} {required && <span className="text-red-500">{t('business_rules.components.actionRow.actionType.required')}</span>}
         </label>
-        <input
+        <Input
           type="text"
           value={value}
           onChange={(e) => handleConfigChange(field, e.target.value)}
           placeholder={t('business_rules.components.actionRow.config.field.placeholder', { field })}
-          className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="col-span-3"
         />
       </div>
     )
@@ -158,18 +174,21 @@ export function ActionRow({
           <label className="text-xs font-medium text-foreground col-span-1">
             {t('business_rules.components.actionRow.actionType')} <span className="text-red-500">{t('business_rules.components.actionRow.actionType.required')}</span>
           </label>
-          <select
-            value={action.type || ''}
-            onChange={handleTypeChange}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring font-medium"
+          <Select
+            value={action.type || undefined}
+            onValueChange={(value) => handleTypeChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
           >
-            <option value="">{t('business_rules.components.actionRow.actionType.placeholder')}</option>
-            {actionTypes.map((type) => (
-              <option key={type.value} value={type.value}>
-                {type.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger size="sm" className="col-span-3 font-medium">
+              <SelectValue placeholder={t('business_rules.components.actionRow.actionType.placeholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              {actionTypes.map((type) => (
+                <SelectItem key={type.value} value={type.value}>
+                  {type.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
 
         {/* Config Fields */}

package/src/modules/business_rules/components/ConditionGroup.tsx

@@ -3,6 +3,13 @@
 import * as React from 'react'
 import { Plus, X } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { ConditionRow } from './ConditionRow'
 import type { GroupCondition, ConditionExpression, SimpleCondition } from './utils/conditionValidation'
 import type { LogicalOperator } from './../data/validators'
@@ -104,17 +111,21 @@ export function ConditionGroup({ group, onChange, onDelete, depth, maxDepth = 5,
         <span className="text-xs font-medium text-muted-foreground">
           {t('business_rules.components.conditionGroup.group', { depth: depth + 1 })}
         </span>
-        <select
+        <Select
           value={group.operator}
-          onChange={handleOperatorChange}
-          className="px-3 py-1.5 text-sm font-semibold border border-border rounded bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onValueChange={(value) => handleOperatorChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
         >
-          {logicalOperators.map((op) => (
-            <option key={op.value} value={op.value}>
-              {op.label}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger size="sm" className="w-auto min-w-[6rem] font-semibold">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {logicalOperators.map((op) => (
+              <SelectItem key={op.value} value={op.value}>
+                {op.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
 
         <span className="text-xs text-muted-foreground">
           ({t('business_rules.components.conditionGroup.ruleCount', { count: group.rules.length })})

package/src/modules/business_rules/components/ConditionRow.tsx

@@ -2,6 +2,14 @@
 
 import * as React from 'react'
 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 { X } from 'lucide-react'
 import type { SimpleCondition } from './utils/conditionValidation'
 import { getComparisonOperators, isValidFieldPath } from './utils/conditionValidation'
@@ -72,14 +80,12 @@ export function ConditionRow({ condition, onChange, onDelete, error }: Condition
           <label className="block text-xs font-medium text-foreground mb-1">
             {t('business_rules.components.conditionRow.field')}
           </label>
-          <input
+          <Input
             type="text"
             value={condition.field || ''}
             onChange={handleFieldChange}
             placeholder={t('business_rules.components.conditionRow.field.placeholder')}
-            className={`w-full px-2 py-1.5 text-sm border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
-              fieldError ? 'border-red-500' : 'border-border'
-            }`}
+            aria-invalid={fieldError ? true : undefined}
           />
           {fieldError && (
             <p className="text-xs text-red-600 mt-0.5">
@@ -93,17 +99,21 @@ export function ConditionRow({ condition, onChange, onDelete, error }: Condition
           <label className="block text-xs font-medium text-foreground mb-1">
             {t('business_rules.components.conditionRow.operator')}
           </label>
-          <select
+          <Select
             value={condition.operator || '='}
-            onChange={handleOperatorChange}
-            className="w-full px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onValueChange={(value) => handleOperatorChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
           >
-            {operators.map((op) => (
-              <option key={op.value} value={op.value}>
-                {op.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {operators.map((op) => (
+                <SelectItem key={op.value} value={op.value}>
+                  {op.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
 
         {/* Value Input */}
@@ -128,7 +138,7 @@ export function ConditionRow({ condition, onChange, onDelete, error }: Condition
                 }
               </button>
             </div>
-            <input
+            <Input
               type="text"
               value={
                 useFieldComparison
@@ -144,7 +154,6 @@ export function ConditionRow({ condition, onChange, onDelete, error }: Condition
                 ? t('business_rules.components.conditionRow.field.comparisonPlaceholder')
                 : t('business_rules.components.conditionRow.value.placeholder')
               }
-              className="w-full px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             />
             <p className="text-xs text-muted-foreground mt-0.5">
               {useFieldComparison

package/src/modules/business_rules/components/RuleSetMembers.tsx

@@ -2,6 +2,14 @@
 
 import * as React from 'react'
 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 { Plus, ChevronUp, ChevronDown, X } from 'lucide-react'
 import { useQuery } from '@tanstack/react-query'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
@@ -168,30 +176,32 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
               <label className="block text-sm font-medium text-foreground mb-1">
                 {t('business_rules.sets.members.form.selectRule')}
               </label>
-              <select
-                value={selectedRuleId}
-                onChange={(e) => setSelectedRuleId(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              <Select
+                value={selectedRuleId || undefined}
+                onValueChange={(value) => setSelectedRuleId(value ?? '')}
               >
-                <option value="">{t('business_rules.sets.members.form.selectRulePlaceholder')}</option>
-                {rulesNotInSet.map((rule) => (
-                  <option key={rule.id} value={rule.id}>
-                    {rule.ruleName} ({rule.ruleId})
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('business_rules.sets.members.form.selectRulePlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {rulesNotInSet.map((rule) => (
+                    <SelectItem key={rule.id} value={rule.id}>
+                      {rule.ruleName} ({rule.ruleId})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
 
             <div className="w-32">
               <label className="block text-sm font-medium text-foreground mb-1">
                 {t('business_rules.sets.members.form.sequence')}
               </label>
-              <input
+              <Input
                 type="number"
                 value={sequence}
                 onChange={(e) => setSequence(parseInt(e.target.value) || 0)}
                 min={0}
-                className="w-full px-3 py-2 border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
             </div>
           </div>

package/src/modules/catalog/backend/catalog/products/[id]/page.tsx

@@ -21,6 +21,13 @@ 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 { Label } from "@open-mercato/ui/primitives/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-mercato/ui/primitives/select";
 import { TagsInput } from "@open-mercato/ui/backend/inputs/TagsInput";
 import { Textarea } from "@open-mercato/ui/primitives/textarea";
 import { DataLoader } from "@open-mercato/ui/primitives/DataLoader";
@@ -2473,44 +2480,34 @@ function ProductMetaSection({
         <Label>
           {t("catalog.products.form.productType", "Product type")}
         </Label>
-        <select
-          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        <Select
           value={values.productType || "simple"}
-          onChange={(event) => {
-            const nextType = event.target.value;
+          onValueChange={(value) => {
+            const nextType = value;
             setValue("productType", nextType);
-            const nextIsConfigurable =
-              isConfigurableProductType(nextType);
+            const nextIsConfigurable = isConfigurableProductType(nextType);
             if (nextIsConfigurable && !values.hasVariants) {
               setValue("hasVariants", true);
-            } else if (
-              !nextIsConfigurable &&
-              values.hasVariants
-            ) {
+            } else if (!nextIsConfigurable && values.hasVariants) {
               setValue("hasVariants", false);
             }
           }}
         >
-          {CATALOG_PRODUCT_TYPES.map((type) => {
-            const isDisabled =
-              type === "bundle" || type === "grouped";
-            return (
-              <option
-                key={type}
-                value={type}
-                disabled={isDisabled}
-              >
-                {t(
-                  `catalog.products.types.${type}`,
-                  type,
-                )}
-                {isDisabled
-                  ? ` (${t("common.comingSoon", "Coming soon")})`
-                  : ""}
-              </option>
-            );
-          })}
-        </select>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {CATALOG_PRODUCT_TYPES.map((type) => {
+              const isDisabled = type === "bundle" || type === "grouped";
+              return (
+                <SelectItem key={type} value={type} disabled={isDisabled}>
+                  {t(`catalog.products.types.${type}`, type)}
+                  {isDisabled ? ` (${t("common.comingSoon", "Coming soon")})` : ""}
+                </SelectItem>
+              );
+            })}
+          </SelectContent>
+        </Select>
         {errors.productType ? (
           <p className="text-xs text-red-600">
             {errors.productType}
@@ -2551,31 +2548,28 @@ function ProductMetaSection({
             </span>
           </Button>
         </div>
-        <select
-          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-          value={values.taxRateId ?? ""}
-          onChange={(event) =>
-            setValue("taxRateId", event.target.value || null)
-          }
+        <Select
+          value={values.taxRateId || undefined}
+          onValueChange={(value) => setValue("taxRateId", value || null)}
           disabled={!taxRates.length}
         >
-          <option value="">
-            {taxRates.length
-              ? t(
-                  "catalog.products.create.taxRates.noneSelected",
-                  "No tax class selected",
-                )
-              : t(
-                  "catalog.products.create.taxRates.emptyOption",
-                  "No tax classes available",
-                )}
-          </option>
-          {taxRates.map((rate) => (
-            <option key={rate.id} value={rate.id}>
-              {formatTaxRateLabel(rate)}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger>
+            <SelectValue
+              placeholder={
+                taxRates.length
+                  ? t("catalog.products.create.taxRates.noneSelected", "No tax class selected")
+                  : t("catalog.products.create.taxRates.emptyOption", "No tax classes available")
+              }
+            />
+          </SelectTrigger>
+          <SelectContent>
+            {taxRates.map((rate) => (
+              <SelectItem key={rate.id} value={rate.id}>
+                {formatTaxRateLabel(rate)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         <p className="text-xs text-muted-foreground">
           {taxRates.length
             ? t(