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

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>

package/src/modules/catalog/components/products/ProductUomSection.tsx

@@ -7,6 +7,13 @@ import { Button } from "@open-mercato/ui/primitives/button";
 import { Checkbox } from "@open-mercato/ui/primitives/checkbox";
 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 { Spinner } from "@open-mercato/ui/primitives/spinner";
 import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
 import type {
@@ -318,24 +325,22 @@ export function ProductUomSection({
       <div className="grid gap-4 md:grid-cols-2">
         <div className="space-y-2">
           <Label htmlFor="catalog-product-uom-base-unit">{t("catalog.products.uom.baseUnit", "Base unit")}</Label>
-          <select
-            id="catalog-product-uom-base-unit"
-            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={defaultUnit}
-            onChange={(event) =>
-              setValue("defaultUnit", event.target.value || null)
-            }
+          <Select
+            value={defaultUnit || undefined}
+            onValueChange={(value) => setValue("defaultUnit", value || null)}
             disabled={loadingUnits}
           >
-            <option value="">
-              {t("catalog.products.uom.selectUnit", "Select unit")}
-            </option>
-            {unitOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="catalog-product-uom-base-unit">
+              <SelectValue placeholder={t("catalog.products.uom.selectUnit", "Select unit")} />
+            </SelectTrigger>
+            <SelectContent>
+              {unitOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           {errors.defaultUnit ? (
             <p className="text-xs text-destructive">{errors.defaultUnit}</p>
           ) : null}
@@ -345,24 +350,22 @@ export function ProductUomSection({
           <Label htmlFor="catalog-product-uom-sales-unit">
             {t("catalog.products.uom.defaultSalesUnit", "Default sales unit")}
           </Label>
-          <select
-            id="catalog-product-uom-sales-unit"
-            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={defaultSalesUnit}
-            onChange={(event) =>
-              setValue("defaultSalesUnit", event.target.value || null)
-            }
+          <Select
+            value={defaultSalesUnit || undefined}
+            onValueChange={(value) => setValue("defaultSalesUnit", value || null)}
             disabled={loadingUnits}
           >
-            <option value="">
-              {t("catalog.products.uom.selectUnit", "Select unit")}
-            </option>
-            {unitOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger id="catalog-product-uom-sales-unit">
+              <SelectValue placeholder={t("catalog.products.uom.selectUnit", "Select unit")} />
+            </SelectTrigger>
+            <SelectContent>
+              {unitOptions.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           {errors.defaultSalesUnit ? (
             <p className="text-xs text-destructive">{errors.defaultSalesUnit}</p>
           ) : null}
@@ -432,24 +435,25 @@ export function ProductUomSection({
           <Label htmlFor="catalog-product-uom-rounding-mode">
             {t("catalog.products.uom.roundingMode", "Rounding mode")}
           </Label>
-          <select
-            id="catalog-product-uom-rounding-mode"
-            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.uomRoundingMode ?? "half_up"}
-            onChange={(event) =>
-              setValue("uomRoundingMode", event.target.value)
-            }
+            onValueChange={(value) => setValue("uomRoundingMode", value)}
           >
-            <option value="half_up">
-              {t("catalog.products.uom.roundingModeHalfUp", "Half up (default)")}
-            </option>
-            <option value="down">
-              {t("catalog.products.uom.roundingModeDown", "Round down")}
-            </option>
-            <option value="up">
-              {t("catalog.products.uom.roundingModeUp", "Round up")}
-            </option>
-          </select>
+            <SelectTrigger id="catalog-product-uom-rounding-mode">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="half_up">
+                {t("catalog.products.uom.roundingModeHalfUp", "Half up (default)")}
+              </SelectItem>
+              <SelectItem value="down">
+                {t("catalog.products.uom.roundingModeDown", "Round down")}
+              </SelectItem>
+              <SelectItem value="up">
+                {t("catalog.products.uom.roundingModeUp", "Round up")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
         </div>
         <div className="space-y-2">
           <Label htmlFor="catalog-product-uom-rounding-scale">
@@ -498,26 +502,26 @@ export function ProductUomSection({
                   "Reference unit",
                 )}
               </Label>
-              <select
-                id="catalog-product-uom-reference-unit"
-                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={unitPriceReferenceUnit}
-                onChange={(event) =>
-                  setValue("unitPriceReferenceUnit", event.target.value || null)
-                }
+              <Select
+                value={unitPriceReferenceUnit || undefined}
+                onValueChange={(value) => setValue("unitPriceReferenceUnit", value || null)}
               >
-                <option value="">
-                  {t(
-                    "catalog.products.unitPrice.selectReferenceUnit",
-                    "Select reference unit",
-                  )}
-                </option>
-                {REFERENCE_UNIT_OPTIONS.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {t(option.i18nKey, option.fallback)}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger id="catalog-product-uom-reference-unit">
+                  <SelectValue
+                    placeholder={t(
+                      "catalog.products.unitPrice.selectReferenceUnit",
+                      "Select reference unit",
+                    )}
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {REFERENCE_UNIT_OPTIONS.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {t(option.i18nKey, option.fallback)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
             <div className="space-y-2">
               <Label htmlFor="catalog-product-uom-unit-price-base-quantity">
@@ -613,24 +617,22 @@ export function ProductUomSection({
                   <Label htmlFor={`catalog-product-uom-conversion-unit-${index}`} className="text-xs text-muted-foreground">
                     {t("catalog.products.uom.conversionUnit", "Sales unit")}
                   </Label>
-                  <select
-                    id={`catalog-product-uom-conversion-unit-${index}`}
-                    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={entry.unitCode}
-                    onChange={(event) =>
-                      updateConversion(index, { unitCode: event.target.value })
-                    }
+                  <Select
+                    value={entry.unitCode || undefined}
+                    onValueChange={(value) => updateConversion(index, { unitCode: value ?? '' })}
                     disabled={loadingUnits}
                   >
-                    <option value="">
-                      {t("catalog.products.uom.selectUnit", "Select unit")}
-                    </option>
-                    {unitOptions.map((option) => (
-                      <option key={option.value} value={option.value}>
-                        {option.label}
-                      </option>
-                    ))}
-                  </select>
+                    <SelectTrigger id={`catalog-product-uom-conversion-unit-${index}`}>
+                      <SelectValue placeholder={t("catalog.products.uom.selectUnit", "Select unit")} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {unitOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
 
                 <div className="space-y-1 md:col-span-3">

package/src/modules/catalog/components/products/VariantBuilder.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { ProductMediaManager } from './ProductMediaManager'
 import { MetadataEditor } from './MetadataEditor'
@@ -160,18 +167,21 @@ export function VariantOptionValuesSection({
         {optionDefinitions.map((option) => (
           <div key={option.code} className="space-y-2">
             <Label className="text-xs uppercase text-muted-foreground">{option.label}</Label>
-            <select
-              className="w-full rounded border px-3 py-2 text-sm"
-              value={values.optionValues?.[option.code] ?? ''}
-              onChange={(event) => handleOptionChange(option.code, event.target.value)}
+            <Select
+              value={values.optionValues?.[option.code] || undefined}
+              onValueChange={(value) => handleOptionChange(option.code, value ?? '')}
             >
-              <option value="">{t('catalog.variants.form.optionPlaceholder', 'Select value')}</option>
-              {option.values.map((value) => (
-                <option key={value.id} value={value.label}>
-                  {value.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('catalog.variants.form.optionPlaceholder', 'Select value')} />
+              </SelectTrigger>
+              <SelectContent>
+                {option.values.map((value) => (
+                  <SelectItem key={value.id} value={value.label}>
+                    {value.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         ))}
       </div>
@@ -294,34 +304,40 @@ export function VariantPricesSection({
             </p>
           </div>
           <div className="flex items-center gap-2">
-            <select
-              className="rounded border px-3 py-2 text-sm"
-              value={values.taxRateId ?? ''}
-              onChange={(event) => setValue('taxRateId', event.target.value || null)}
+            <Select
+              value={values.taxRateId || undefined}
+              onValueChange={(value) => setValue('taxRateId', value || null)}
             >
-              <option value="">{t('catalog.variants.form.pricesTaxNone', 'No tax override')}</option>
-              {taxRates.map((rate) => (
-                <option key={rate.id} value={rate.id}>
-                  {formatTaxRateLabel(rate)}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('catalog.variants.form.pricesTaxNone', 'No tax override')} />
+              </SelectTrigger>
+              <SelectContent>
+                {taxRates.map((rate) => (
+                  <SelectItem key={rate.id} value={rate.id}>
+                    {formatTaxRateLabel(rate)}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
         </div>
       ) : (
         <div className="flex justify-end">
-          <select
-            className="rounded border px-3 py-2 text-sm"
-            value={values.taxRateId ?? ''}
-            onChange={(event) => setValue('taxRateId', event.target.value || null)}
+          <Select
+            value={values.taxRateId || undefined}
+            onValueChange={(value) => setValue('taxRateId', value || null)}
           >
-            <option value="">{t('catalog.variants.form.pricesTaxNone', 'No tax override')}</option>
-            {taxRates.map((rate) => (
-              <option key={rate.id} value={rate.id}>
-                {formatTaxRateLabel(rate)}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger>
+              <SelectValue placeholder={t('catalog.variants.form.pricesTaxNone', 'No tax override')} />
+            </SelectTrigger>
+            <SelectContent>
+              {taxRates.map((rate) => (
+                <SelectItem key={rate.id} value={rate.id}>
+                  {formatTaxRateLabel(rate)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
       )}
       <div className="space-y-3">