@open-mercato/core 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2954.610bab2d08

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(

package/src/modules/catalog/backend/catalog/products/create/page.tsx

@@ -17,6 +17,14 @@ import { TagsInput } from "@open-mercato/ui/backend/inputs/TagsInput";
 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 { RadioGroup, Radio } from "@open-mercato/ui/primitives/radio";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@open-mercato/ui/primitives/select";
 import { cn } from "@open-mercato/shared/lib/utils";
 import {
   Plus,
@@ -1551,6 +1559,12 @@ function ProductBuilder({
           ) : null}
 
           <div className="rounded-lg border">
+            <RadioGroup
+              className="contents"
+              name="defaultVariant"
+              value={(Array.isArray(values.variants) ? values.variants : []).find((v) => v.isDefault)?.id ?? ''}
+              onValueChange={(next) => markDefaultVariant(next)}
+            >
             <div className="w-full overflow-x-auto">
               <table className="w-full min-w-[900px] table-fixed border-collapse text-sm">
                 <thead className="bg-muted/50">
@@ -1642,12 +1656,7 @@ function ProductBuilder({
                     <tr key={variant.id} className="border-t">
                       <td className="px-3 py-2">
                         <label className="inline-flex items-center gap-1 text-xs">
-                          <input
-                            type="radio"
-                            name="defaultVariant"
-                            checked={variant.isDefault}
-                            onChange={() => markDefaultVariant(variant.id)}
-                          />
+                          <Radio value={variant.id} />
                           {variant.isDefault
                             ? t(
                                 "catalog.products.create.variantsBuilder.defaultLabel",
@@ -1697,35 +1706,36 @@ function ProductBuilder({
                         />
                       </td>
                       <td className="px-3 py-2">
-                        <select
-                          className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                          value={variant.taxRateId ?? ""}
-                          onChange={(event) =>
-                            setVariantField(
-                              variant.id,
-                              "taxRateId",
-                              event.target.value || null,
-                            )
+                        <Select
+                          value={variant.taxRateId || undefined}
+                          onValueChange={(value) =>
+                            setVariantField(variant.id, "taxRateId", value || null)
                           }
                           disabled={!taxRates.length}
                         >
-                          <option value="">
-                            {defaultTaxRateLabel
-                              ? t(
-                                  "catalog.products.create.variantsBuilder.vatOptionDefault",
-                                  "Use product tax class ({{label}})",
-                                ).replace("{{label}}", defaultTaxRateLabel)
-                              : t(
-                                  "catalog.products.create.variantsBuilder.vatOptionNone",
-                                  "No tax class",
-                                )}
-                          </option>
-                          {taxRates.map((rate) => (
-                            <option key={rate.id} value={rate.id}>
-                              {formatTaxRateLabel(rate)}
-                            </option>
-                          ))}
-                        </select>
+                          <SelectTrigger>
+                            <SelectValue
+                              placeholder={
+                                defaultTaxRateLabel
+                                  ? t(
+                                      "catalog.products.create.variantsBuilder.vatOptionDefault",
+                                      "Use product tax class ({{label}})",
+                                    ).replace("{{label}}", defaultTaxRateLabel)
+                                  : t(
+                                      "catalog.products.create.variantsBuilder.vatOptionNone",
+                                      "No tax class",
+                                    )
+                              }
+                            />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {taxRates.map((rate) => (
+                              <SelectItem key={rate.id} value={rate.id}>
+                                {formatTaxRateLabel(rate)}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                       </td>
                       {priceKinds.map((kind) => (
                         <td key={kind.id} className="px-3 py-2">
@@ -1733,9 +1743,8 @@ function ProductBuilder({
                             <span className="text-xs text-muted-foreground">
                               {kind.currencyCode ?? "—"}
                             </span>
-                            <input
+                            <Input
                               type="number"
-                              className="w-full rounded-md border px-2 py-1"
                               value={variant.prices?.[kind.id]?.amount ?? ""}
                               onChange={(event) =>
                                 setVariantPrice(
@@ -1803,6 +1812,7 @@ function ProductBuilder({
                 </tbody>
               </table>
             </div>
+            </RadioGroup>
             {!priceKinds.length ? (
               <div className="flex items-center gap-2 border-t px-4 py-3 text-sm text-muted-foreground">
                 <AlertCircle className="h-4 w-4" />
@@ -1964,44 +1974,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}
@@ -2042,31 +2042,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(

package/src/modules/catalog/components/PriceKindSettings.tsx

@@ -7,6 +7,7 @@ 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 { RadioGroup, Radio } from '@open-mercato/ui/primitives/radio'
 import {
   Dialog,
   DialogContent,
@@ -480,7 +481,12 @@ export function PriceKindSettings() {
               </div>
               <div className="space-y-2">
                 <Label>{t('catalog.priceKinds.form.displayModeLabel', 'Display mode')}</Label>
-                <div className="grid gap-2 md:grid-cols-2">
+                <RadioGroup
+                  className="grid gap-2 md:grid-cols-2"
+                  name="displayMode"
+                  value={form.displayMode}
+                  onValueChange={(next) => setForm((prev) => ({ ...prev, displayMode: next as CatalogPriceDisplayMode }))}
+                >
                   {displayModeOptions.map((mode) => (
                     <label
                       key={mode.value}
@@ -488,17 +494,11 @@ export function PriceKindSettings() {
                         form.displayMode === mode.value ? 'border-primary bg-primary/5' : 'border-border'
                       }`}
                     >
-                      <input
-                        type="radio"
-                        name="displayMode"
-                        value={mode.value}
-                        checked={form.displayMode === mode.value}
-                        onChange={() => setForm((prev) => ({ ...prev, displayMode: mode.value }))}
-                      />
+                      <Radio value={mode.value} />
                       <span>{mode.label}</span>
                     </label>
                   ))}
-                </div>
+                </RadioGroup>
               </div>
               <div className="space-y-2">
                 <Label>{t('catalog.priceKinds.form.currencyLabel', 'Currency (optional)')}</Label>