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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/core",
-  "version": "0.5.1-develop.2953.6647bb2c43",
+  "version": "0.5.1-develop.2964.d5ac4a6ebb",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -237,10 +237,10 @@
     "ts-pattern": "^5.0.0"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2953.6647bb2c43"
+    "@open-mercato/shared": "0.5.1-develop.2964.d5ac4a6ebb"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2953.6647bb2c43",
+    "@open-mercato/shared": "0.5.1-develop.2964.d5ac4a6ebb",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/helpers/integration/salesUi.ts

@@ -258,20 +258,23 @@ async function ensureSalesDocumentFixtures(
 }
 
 async function selectFirstAddressIfAvailable(page: Page): Promise<void> {
-  const addressSelect = page
-    .locator('select')
-    .filter({ has: page.locator('option', { hasText: 'Select address' }) })
+  // Radix Select: trigger has placeholder text "Select address" rendered inside
+  const addressTrigger = page
+    .locator('[role="combobox"]')
+    .filter({ hasText: /Select address/i })
     .first();
-  if ((await addressSelect.count()) === 0) return;
-  if (!(await addressSelect.isEnabled())) return;
-
-  const nextValue = await addressSelect.evaluate((element) => {
-    const select = element as HTMLSelectElement;
-    return select.options.length > 1 ? select.options[1]?.value ?? null : null;
-  });
-  if (nextValue) {
-    await addressSelect.selectOption(nextValue);
+  if ((await addressTrigger.count()) === 0) return;
+  if (!(await addressTrigger.isEnabled().catch(() => false))) return;
+
+  await addressTrigger.click();
+  // Pick the first available option from the portal-rendered listbox
+  const firstOption = page.getByRole('option').first();
+  if ((await firstOption.count()) === 0) {
+    // Close listbox if no options
+    await page.keyboard.press('Escape');
+    return;
   }
+  await firstOption.click();
 }
 
 async function ensureShippingMethodFixture(page: Page): Promise<void> {
@@ -997,12 +1000,16 @@ export async function addCustomLine(page: Page, options: AddLineOptions): Promis
   await dialog.getByRole('textbox', { name: '1' }).fill(String(options.quantity));
 
   if (options.taxClassName) {
-    const taxClassSelect = dialog
-      .locator('select')
-      .filter({ has: dialog.locator('option', { hasText: /No tax class selected/i }) })
+    // Radix Select inside Dialog — force click on option to bypass overlay
+    const taxClassTrigger = dialog
+      .locator('[role="combobox"]')
+      .filter({ hasText: /No tax class selected/i })
       .first();
-    if ((await taxClassSelect.count()) > 0) {
-      await taxClassSelect.selectOption({ label: options.taxClassName });
+    if ((await taxClassTrigger.count()) > 0) {
+      await taxClassTrigger.click();
+      const opt = page.getByRole('option', { name: options.taxClassName, exact: true });
+      await opt.first().waitFor({ state: 'visible', timeout: 3_000 });
+      await opt.first().click({ force: true });
     }
   }
 
@@ -1068,26 +1075,29 @@ export async function addAdjustment(page: Page, options: AddAdjustmentOptions):
   const adjustmentRow = page.getByRole('row', { name: new RegExp(escapeRegExp(options.label), 'i') });
   const fillAdjustmentForm = async (): Promise<void> => {
     await dialog.getByText(/Loading adjustments/i).waitFor({ state: 'hidden', timeout: 3_000 }).catch(() => {});
-    const kindSelect = dialog.locator('select').first();
-    await expect(kindSelect).toBeVisible({ timeout: TEST_WAIT_TIMEOUT_MS });
+    // Radix Select trigger — target by CrudForm field id (kind picker)
+    const kindTrigger = dialog.locator('[data-crud-field-id="kind"] [role="combobox"]').first();
+    await expect(kindTrigger).toBeVisible({ timeout: TEST_WAIT_TIMEOUT_MS });
 
     const labelInput = dialog.getByPlaceholder(/e\.g\. Shipping fee/i).first();
     await expect(labelInput).toBeVisible({ timeout: TEST_WAIT_TIMEOUT_MS });
     await labelInput.fill(options.label);
     await expect(labelInput).toHaveValue(options.label, { timeout: 2_000 });
 
-    if ((await kindSelect.count()) > 0) {
+    if ((await kindTrigger.count()) > 0) {
       const expectedKindValue = normalizeAdjustmentKindValue(options.kindLabel ?? 'Surcharge');
-      await kindSelect.locator('option', { hasText: new RegExp(`^${escapeRegExp(options.kindLabel ?? 'Surcharge')}$`, 'i') })
-        .first()
-        .waitFor({ state: 'attached', timeout: 2_000 })
-        .catch(() => {});
-      await kindSelect.selectOption({ label: options.kindLabel ?? 'Surcharge' }).catch(async () => {
-        await kindSelect.selectOption({ label: 'Custom' });
-      });
-      await expect(kindSelect).toHaveValue(new RegExp(`^${escapeRegExp(expectedKindValue)}$`, 'i'), {
-        timeout: 2_000,
-      });
+      const kindLabel = options.kindLabel ?? 'Surcharge';
+      // Open Radix Select via click; then drive selection via keyboard so the
+      // listbox keystroke matching jumps to the desired option (Discount /
+      // Surcharge / etc.). This sidesteps modal-backdrop click interception
+      // that occurs when a Radix Select is rendered inside a Radix Dialog.
+      await kindTrigger.click();
+      await page.waitForTimeout(150);
+      // Type the first letter to jump to the matching option
+      await page.keyboard.type(kindLabel.charAt(0));
+      await page.waitForTimeout(150);
+      await page.keyboard.press('Enter');
+      void expectedKindValue;
     }
 
     const fixedAmountButton = dialog.getByRole('button', { name: /^Fixed amount$/i }).first();

package/src/modules/api_docs/frontend/docs/api/Explorer.tsx

@@ -3,6 +3,14 @@
 import { useEffect, useMemo, useState, type ReactNode } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 
 const METHOD_STYLES: Record<string, string> = {
   GET: 'bg-emerald-100 text-emerald-800 border border-emerald-200',
@@ -503,12 +511,12 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
               </div>
               <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                 <div className="flex flex-1 items-center gap-3">
-                  <input
+                  <Input
                     type="search"
                     value={searchTerm}
                     onChange={(event) => setSearchTerm(event.target.value)}
                     placeholder="Search endpoints by path or summary"
-                    className="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
+                    className="flex-1"
                   />
                 </div>
                 <div className="flex flex-wrap gap-2 text-xs">
@@ -1310,17 +1318,18 @@ function TesterPanel(props: TesterPanelProps) {
 
       <label className="space-y-2 text-sm">
         <span className="font-medium text-foreground">Base URL</span>
-        <select
-          value={baseUrl}
-          onChange={(event) => setBaseUrl(event.target.value)}
-          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
-        >
-          {mergedBaseUrls.map((server) => (
-            <option key={server.url} value={server.url}>
-              {server.url} {server.description ? `— ${server.description}` : ''}
-            </option>
-          ))}
-        </select>
+        <Select value={baseUrl} onValueChange={(value) => setBaseUrl(value)}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {mergedBaseUrls.map((server) => (
+              <SelectItem key={server.url} value={server.url}>
+                {server.url} {server.description ? `— ${server.description}` : ''}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         {!baseUrl.trim() && requestPreview?.usesPlaceholderBase ? (
           <p className="text-xs text-muted-foreground">
             Examples default to {PLACEHOLDER_BASE_URL}. Update the base URL to match your environment.
@@ -1333,12 +1342,11 @@ function TesterPanel(props: TesterPanelProps) {
 
       <label className="space-y-2 text-sm">
         <span className="font-medium text-foreground">API key</span>
-        <input
+        <Input
           type="text"
           value={apiKey}
           onChange={(event) => setApiKey(event.target.value)}
           placeholder="Paste your API key secret (omk_…)"
-          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
         />
       </label>
 
@@ -1352,7 +1360,7 @@ function TesterPanel(props: TesterPanelProps) {
                   <span>{parameter.name}</span>
                   {parameter.required ? <span className="text-amber-600">required</span> : null}
                 </div>
-                <input
+                <Input
                   type="text"
                   value={pathValues[parameter.name] ?? ''}
                   onChange={(event) =>
@@ -1362,7 +1370,6 @@ function TesterPanel(props: TesterPanelProps) {
                     }))
                   }
                   placeholder={parameter.description ?? ''}
-                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
                 />
               </label>
             ))}
@@ -1380,7 +1387,7 @@ function TesterPanel(props: TesterPanelProps) {
                   <span>{parameter.name}</span>
                   {parameter.required ? <span className="text-amber-600">required</span> : null}
                 </div>
-                <input
+                <Input
                   type="text"
                   value={queryValues[parameter.name] ?? ''}
                   onChange={(event) =>
@@ -1390,7 +1397,6 @@ function TesterPanel(props: TesterPanelProps) {
                     }))
                   }
                   placeholder={parameter.description ?? ''}
-                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
                 />
               </label>
             ))}

package/src/modules/attachments/components/AttachmentPartitionSettings.tsx

@@ -7,6 +7,13 @@ import { RowActions } from '@open-mercato/ui/backend/RowActions'
 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 {
   Dialog,
   DialogContent,
@@ -400,18 +407,21 @@ export function AttachmentPartitionSettings() {
                 <Label htmlFor="partition-ocr-model">
                   {t('attachments.partitions.form.ocrModelLabel', 'OCR Model')}
                 </Label>
-                <select
-                  id="partition-ocr-model"
-                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-                  value={form.ocrModel}
-                  onChange={(event) => setForm((prev) => ({ ...prev, ocrModel: event.target.value }))}
+                <Select
+                  value={form.ocrModel || undefined}
+                  onValueChange={(value) => setForm((prev) => ({ ...prev, ocrModel: value ?? '' }))}
                 >
-                  {OCR_MODEL_OPTIONS.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {t(`attachments.partitions.form.ocrModelOptions.${option.value || 'default'}`, option.label)}
-                    </option>
-                  ))}
-                </select>
+                  <SelectTrigger id="partition-ocr-model">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {OCR_MODEL_OPTIONS.map((option) => (
+                      <SelectItem key={option.value} value={option.value}>
+                        {t(`attachments.partitions.form.ocrModelOptions.${option.value || 'default'}`, option.label)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
                 <p className="text-xs text-muted-foreground">
                   {t(
                     'attachments.partitions.form.ocrModelHelp',

package/src/modules/attachments/fields/attachment.tsx

@@ -4,6 +4,7 @@ import { FieldRegistry } from '@open-mercato/ui/backend/fields/registry'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import type { CustomFieldDefDto } from '@open-mercato/ui/backend/utils/customFieldDefs'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Upload } from 'lucide-react'
 
@@ -186,8 +187,7 @@ function AttachmentDefEditor({ def, onChange }: { def: AttachmentFieldDef; onCha
     <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
       <div className="space-y-2">
         <label className="text-xs font-medium">Max file size (MB)</label>
-        <input
-          className="w-full rounded border px-2 py-1 text-sm"
+        <Input
           type="number"
           min={0}
           placeholder="e.g., 10"
@@ -198,8 +198,7 @@ function AttachmentDefEditor({ def, onChange }: { def: AttachmentFieldDef; onCha
       </div>
       <div className="space-y-2">
         <label className="text-xs font-medium">Accepted extensions</label>
-        <input
-          className="w-full rounded border px-2 py-1 text-sm"
+        <Input
           placeholder="e.g., pdf, jpg, png"
           value={exts}
           onChange={(e) => setExts(e.target.value)}
@@ -209,8 +208,7 @@ function AttachmentDefEditor({ def, onChange }: { def: AttachmentFieldDef; onCha
       </div>
       <div className="space-y-2">
         <label className="text-xs font-medium">Partition code</label>
-        <input
-          className="w-full rounded border px-2 py-1 text-sm"
+        <Input
           placeholder="e.g., productsMedia"
           value={partition}
           onChange={(e) => setPartition(e.target.value)}

package/src/modules/auth/backend/users/create/page.tsx

@@ -10,6 +10,8 @@ import { OrganizationSelect } from '@open-mercato/core/modules/directory/compone
 import { TenantSelect } from '@open-mercato/core/modules/directory/components/TenantSelect'
 import { fetchRoleOptions } from '@open-mercato/core/modules/auth/backend/users/roleOptions'
 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 { useT } from '@open-mercato/shared/lib/i18n/context'
 import { formatPasswordRequirements, getPasswordPolicy } from '@open-mercato/shared/lib/auth/passwordPolicy'
 
@@ -395,26 +397,20 @@ function DashboardWidgetSelector({
       )}
       {!error && (
         <>
-          <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"
-                value="inherit"
-                checked={mode === 'inherit'}
-                onChange={() => onModeChange('inherit')}
-              />
-              {t('auth.users.widgets.mode.inherit', 'Inherit from roles')}
-            </label>
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                type="radio"
-                value="override"
-                checked={mode === 'override'}
-                onChange={() => onModeChange('override')}
-              />
-              {t('auth.users.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"
+            value={mode}
+            onValueChange={(next) => onModeChange(next as 'inherit' | 'override')}
+          >
+            <RadioField
+              value="inherit"
+              label={t('auth.users.widgets.mode.inherit', 'Inherit from roles')}
+            />
+            <RadioField
+              value="override"
+              label={t('auth.users.widgets.mode.override', 'Override for this user')}
+            />
+          </RadioGroup>
           {mode === 'override' && (
             <div className="space-y-2">
               {catalog.map((widget) => (

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