@cimplify/sdk 0.10.3 → 0.11.0

package/dist/react.js

@@ -3,8 +3,12 @@
 
 var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var numberField = require('@base-ui/react/number-field');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var radioGroup = require('@base-ui/react/radio-group');
+var radio = require('@base-ui/react/radio');
+var checkbox = require('@base-ui/react/checkbox');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -7830,52 +7834,60 @@ function QuantitySelector({
   className,
   classNames
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    numberField.NumberField.Root,
     {
-      "data-cimplify-quantity": true,
-      className: cn("inline-flex items-center gap-3 border border-border px-2", className, classNames?.root),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onChange(Math.max(min, value - 1)),
-            disabled: value <= min,
-            "aria-label": "Decrease quantity",
-            "data-cimplify-quantity-decrement": true,
-            className: cn(
-              "w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30",
-              classNames?.button
+      value,
+      onValueChange: (val) => {
+        if (val != null) {
+          onChange(val);
+        }
+      },
+      min,
+      max,
+      step: 1,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        numberField.NumberField.Group,
+        {
+          "data-cimplify-quantity": true,
+          className: cn("inline-flex items-center gap-3 border border-border px-2", className, classNames?.root),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              numberField.NumberField.Decrement,
+              {
+                "aria-label": "Decrease quantity",
+                "data-cimplify-quantity-decrement": true,
+                className: cn(
+                  "w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30",
+                  classNames?.button
+                ),
+                children: "\u2212"
+              }
             ),
-            children: "\u2212"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            "data-cimplify-quantity-value": true,
-            "aria-live": "polite",
-            className: cn("w-8 text-center font-medium", classNames?.value),
-            children: value
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onChange(max != null ? Math.min(max, value + 1) : value + 1),
-            disabled: max != null && value >= max,
-            "aria-label": "Increase quantity",
-            "data-cimplify-quantity-increment": true,
-            className: cn(
-              "w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30",
-              classNames?.button
+            /* @__PURE__ */ jsxRuntime.jsx(
+              numberField.NumberField.Input,
+              {
+                "data-cimplify-quantity-value": true,
+                "aria-live": "polite",
+                readOnly: true,
+                className: cn("w-8 text-center font-medium bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", classNames?.value)
+              }
             ),
-            children: "+"
-          }
-        )
-      ]
+            /* @__PURE__ */ jsxRuntime.jsx(
+              numberField.NumberField.Increment,
+              {
+                "aria-label": "Increase quantity",
+                "data-cimplify-quantity-increment": true,
+                className: cn(
+                  "w-10 h-10 flex items-center justify-center hover:text-primary transition-colors disabled:opacity-30",
+                  classNames?.button
+                ),
+                children: "+"
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -7928,6 +7940,7 @@ function VariantSelector({
 }) {
   const [axisSelections, setAxisSelections] = React3.useState({});
   const initialized = React3.useRef(false);
+  const idPrefix = React3.useId();
   React3.useEffect(() => {
     initialized.current = false;
   }, [variants]);
@@ -7964,106 +7977,126 @@ function VariantSelector({
   }
   const basePriceNum = basePrice != null ? parsePrice(basePrice) : 0;
   if (variantAxes && variantAxes.length > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: variantAxes.map((axis) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-axis": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "label",
-        {
-          "data-cimplify-variant-axis-label": true,
-          className: cn("block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", classNames?.axisLabel),
-          children: axis.name
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          "data-cimplify-variant-axis-options": true,
-          className: cn("flex flex-wrap gap-2", classNames?.axisOptions),
-          children: axis.values.map((value) => {
-            const isSelected = axisSelections[axis.id] === value.id;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                "aria-selected": isSelected,
-                onClick: () => {
-                  setAxisSelections((prev) => ({
-                    ...prev,
-                    [axis.id]: value.id
-                  }));
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: variantAxes.map((axis) => {
+      const labelId = `${idPrefix}-axis-${axis.id}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-axis": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            id: labelId,
+            "data-cimplify-variant-axis-label": true,
+            className: cn("block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", classNames?.axisLabel),
+            children: axis.name
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          radioGroup.RadioGroup,
+          {
+            "aria-labelledby": labelId,
+            value: axisSelections[axis.id] ?? "",
+            onValueChange: (value) => {
+              setAxisSelections((prev) => ({
+                ...prev,
+                [axis.id]: value
+              }));
+            },
+            "data-cimplify-variant-axis-options": true,
+            className: cn("flex flex-wrap gap-2", classNames?.axisOptions),
+            children: axis.values.map((value) => {
+              const isSelected = axisSelections[axis.id] === value.id;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                radio.Radio.Root,
+                {
+                  value: value.id,
+                  render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+                  "data-cimplify-variant-option": true,
+                  "data-selected": isSelected || void 0,
+                  className: cn(
+                    "px-4 py-2 border text-sm font-medium transition-colors border-border hover:border-primary/50",
+                    isSelected && "bg-primary text-primary-foreground border-primary",
+                    isSelected ? classNames?.optionSelected : classNames?.option
+                  ),
+                  children: value.name
                 },
-                "data-cimplify-variant-option": true,
-                "data-selected": isSelected || void 0,
-                className: cn(
-                  "px-4 py-2 border text-sm font-medium transition-colors border-border hover:border-primary/50",
-                  isSelected && "bg-primary text-primary-foreground border-primary",
-                  isSelected ? classNames?.optionSelected : classNames?.option
-                ),
-                children: value.name
-              },
-              value.id
-            );
-          })
-        }
-      )
-    ] }, axis.id)) });
+                value.id
+              );
+            })
+          }
+        )
+      ] }, axis.id);
+    }) });
   }
+  const listLabelId = `${idPrefix}-variant-list`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
+        id: listLabelId,
         "data-cimplify-variant-list-label": true,
         className: cn("block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", classNames?.listLabel),
         children: "Options"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-variant-list": true, className: cn("space-y-2", classNames?.list), children: variants.map((variant) => {
-      const isSelected = selectedVariantId === variant.id;
-      const adjustment = parsePrice(variant.price_adjustment);
-      const effectivePrice = basePriceNum + adjustment;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          "aria-selected": isSelected,
-          onClick: () => onVariantChange(variant.id, variant),
-          "data-cimplify-variant-option": true,
-          "data-selected": isSelected || void 0,
-          className: cn(
-            "w-full flex items-center justify-between px-4 py-3 border transition-colors border-border hover:border-primary/50",
-            isSelected && "bg-primary/5 border-primary",
-            isSelected ? classNames?.optionSelected : classNames?.option
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                "data-cimplify-variant-name": true,
-                className: cn("font-medium", isSelected && "text-primary", classNames?.name),
-                children: getVariantDisplayName(variant, productName)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm", classNames?.pricing), children: [
-              adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  "data-cimplify-variant-adjustment": true,
-                  className: cn(
-                    adjustment > 0 ? "text-muted-foreground" : "text-green-600",
-                    classNames?.adjustment
-                  ),
-                  children: [
-                    adjustment > 0 ? "+" : "",
-                    /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: effectivePrice, className: "text-muted-foreground" })
-            ] })
-          ]
+    /* @__PURE__ */ jsxRuntime.jsx(
+      radioGroup.RadioGroup,
+      {
+        "aria-labelledby": listLabelId,
+        value: selectedVariantId ?? "",
+        onValueChange: (value) => {
+          const variant = variants.find((v) => v.id === value);
+          onVariantChange(variant?.id, variant);
         },
-        variant.id
-      );
-    }) })
+        "data-cimplify-variant-list": true,
+        className: cn("space-y-2", classNames?.list),
+        children: variants.map((variant) => {
+          const isSelected = selectedVariantId === variant.id;
+          const adjustment = parsePrice(variant.price_adjustment);
+          const effectivePrice = basePriceNum + adjustment;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            radio.Radio.Root,
+            {
+              value: variant.id,
+              render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+              "data-cimplify-variant-option": true,
+              "data-selected": isSelected || void 0,
+              className: cn(
+                "w-full flex items-center justify-between px-4 py-3 border transition-colors border-border hover:border-primary/50",
+                isSelected && "bg-primary/5 border-primary",
+                isSelected ? classNames?.optionSelected : classNames?.option
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-cimplify-variant-name": true,
+                    className: cn("font-medium", isSelected && "text-primary", classNames?.name),
+                    children: getVariantDisplayName(variant, productName)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm", classNames?.pricing), children: [
+                  adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "span",
+                    {
+                      "data-cimplify-variant-adjustment": true,
+                      className: cn(
+                        adjustment > 0 ? "text-muted-foreground" : "text-green-600",
+                        classNames?.adjustment
+                      ),
+                      children: [
+                        adjustment > 0 ? "+" : "",
+                        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: effectivePrice, className: "text-muted-foreground" })
+                ] })
+              ]
+            },
+            variant.id
+          );
+        })
+      }
+    )
   ] });
 }
 function AddOnSelector({
@@ -8077,8 +8110,8 @@ function AddOnSelector({
     (optionId) => selectedOptions.includes(optionId),
     [selectedOptions]
   );
-  const toggleOption = React3.useCallback(
-    (addOn, optionId) => {
+  const handleCheckedChange = React3.useCallback(
+    (addOn, optionId, checked) => {
       const isSelected = selectedOptions.includes(optionId);
       if (addOn.is_mutually_exclusive || !addOn.is_multiple_allowed) {
         const groupOptionIds = new Set(addOn.options.map((o) => o.id));
@@ -8114,7 +8147,6 @@ function AddOnSelector({
       (id) => addOn.options.some((o) => o.id === id)
     ).length;
     const minMet = !addOn.min_selections || currentSelections >= addOn.min_selections;
-    const isSingleSelect = addOn.is_mutually_exclusive || !addOn.is_multiple_allowed;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -8177,12 +8209,12 @@ function AddOnSelector({
               children: addOn.options.map((option) => {
                 const isSelected = isOptionSelected(option.id);
                 return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
+                  checkbox.Checkbox.Root,
                   {
-                    type: "button",
-                    role: isSingleSelect ? "radio" : "checkbox",
-                    "aria-checked": isSelected,
-                    onClick: () => toggleOption(addOn, option.id),
+                    checked: isSelected,
+                    onCheckedChange: (checked) => handleCheckedChange(addOn, option.id, checked),
+                    value: option.id,
+                    render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
                     "data-cimplify-addon-option": true,
                     "data-selected": isSelected || void 0,
                     className: cn(
@@ -8191,6 +8223,13 @@ function AddOnSelector({
                       isSelected ? classNames?.optionSelected : classNames?.option
                     ),
                     children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        checkbox.Checkbox.Indicator,
+                        {
+                          className: "hidden",
+                          keepMounted: false
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "span",
                         {
@@ -8354,11 +8393,13 @@ function BundleComponentCard({
   onVariantChange,
   classNames
 }) {
+  const idPrefix = React3.useId();
   const showVariantPicker = component.allow_variant_choice && component.available_variants.length > 1;
   const displayPrice = React3.useMemo(
     () => getComponentPrice(component, selectedVariantId),
     [component, selectedVariantId]
   );
+  const labelId = `${idPrefix}-bundle-component-${component.id}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -8386,6 +8427,7 @@ function BundleComponentCard({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
+                    id: labelId,
                     "data-cimplify-bundle-component-name": true,
                     className: cn("font-medium text-sm", classNames?.componentName),
                     children: component.product_name
@@ -8397,19 +8439,23 @@ function BundleComponentCard({
           }
         ),
         showVariantPicker && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          radioGroup.RadioGroup,
           {
+            "aria-labelledby": labelId,
+            value: selectedVariantId ?? "",
+            onValueChange: (value) => {
+              onVariantChange(value);
+            },
             "data-cimplify-bundle-variant-picker": true,
             className: cn("mt-3 flex flex-wrap gap-2", classNames?.variantPicker),
             children: component.available_variants.map((variant) => {
               const isSelected = selectedVariantId === variant.id;
               const adjustment = parsePrice(variant.price_adjustment);
               return /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
+                radio.Radio.Root,
                 {
-                  type: "button",
-                  "aria-pressed": isSelected,
-                  onClick: () => onVariantChange(variant.id),
+                  value: variant.id,
+                  render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
                   "data-cimplify-bundle-variant-option": true,
                   "data-selected": isSelected || void 0,
                   className: cn(
@@ -8540,12 +8586,13 @@ function CompositeSelector({
     []
   );
   const updateQuantity = React3.useCallback(
-    (group, componentId, delta) => {
+    (group, componentId, newValue) => {
       setGroupSelections((prev) => {
         const groupSels = { ...prev[group.id] || {} };
         const current = groupSels[componentId] || 0;
-        const next = Math.max(0, current + delta);
+        const next = Math.max(0, newValue);
         if (next === current) return prev;
+        const delta = next - current;
         if (group.max_quantity_per_component && next > group.max_quantity_per_component) {
           return prev;
         }
@@ -8649,12 +8696,12 @@ function CompositeSelector({
                   const isSelected = qty > 0;
                   const displayName = component.display_name || component.id;
                   return /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
+                    checkbox.Checkbox.Root,
                     {
-                      type: "button",
-                      role: isSingleSelect ? "radio" : "checkbox",
-                      "aria-checked": isSelected,
-                      onClick: () => toggleComponent(group, component),
+                      checked: isSelected,
+                      onCheckedChange: () => toggleComponent(group, component),
+                      value: component.id,
+                      render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
                       "data-cimplify-composite-component": true,
                       "data-selected": isSelected || void 0,
                       className: cn(
@@ -8663,6 +8710,13 @@ function CompositeSelector({
                         isSelected ? classNames?.componentSelected : classNames?.component
                       ),
                       children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          checkbox.Checkbox.Indicator,
+                          {
+                            className: "hidden",
+                            keepMounted: false
+                          }
+                        ),
                         /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
@@ -8715,35 +8769,51 @@ function CompositeSelector({
                             ]
                           }
                         ),
-                        group.allow_quantity && isSelected && /* @__PURE__ */ jsxRuntime.jsxs(
-                          "span",
+                        group.allow_quantity && isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                          numberField.NumberField.Root,
                           {
-                            "data-cimplify-composite-qty": true,
-                            onClick: (e) => e.stopPropagation(),
-                            className: cn("flex items-center gap-2", classNames?.qty),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: () => updateQuantity(group, component.id, -1),
-                                  "aria-label": `Decrease ${displayName} quantity`,
-                                  className: cn("w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted", classNames?.qtyButton),
-                                  children: "\u2212"
-                                }
-                              ),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-sm font-medium w-4 text-center", classNames?.qtyValue), children: qty }),
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                "button",
-                                {
-                                  type: "button",
-                                  onClick: () => updateQuantity(group, component.id, 1),
-                                  "aria-label": `Increase ${displayName} quantity`,
-                                  className: cn("w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted", classNames?.qtyButton),
-                                  children: "+"
-                                }
-                              )
-                            ]
+                            value: qty,
+                            onValueChange: (val) => {
+                              if (val != null) {
+                                updateQuantity(group, component.id, val);
+                              }
+                            },
+                            min: 0,
+                            max: group.max_quantity_per_component || void 0,
+                            step: 1,
+                            children: /* @__PURE__ */ jsxRuntime.jsxs(
+                              numberField.NumberField.Group,
+                              {
+                                "data-cimplify-composite-qty": true,
+                                onClick: (e) => e.stopPropagation(),
+                                className: cn("flex items-center gap-2", classNames?.qty),
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    numberField.NumberField.Decrement,
+                                    {
+                                      "aria-label": `Decrease ${displayName} quantity`,
+                                      className: cn("w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted disabled:opacity-30", classNames?.qtyButton),
+                                      children: "\u2212"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    numberField.NumberField.Input,
+                                    {
+                                      readOnly: true,
+                                      className: cn("w-4 text-center text-sm font-medium bg-transparent border-none outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", classNames?.qtyValue)
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    numberField.NumberField.Increment,
+                                    {
+                                      "aria-label": `Increase ${displayName} quantity`,
+                                      className: cn("w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted disabled:opacity-30", classNames?.qtyButton),
+                                      children: "+"
+                                    }
+                                  )
+                                ]
+                              }
+                            )
                           }
                         ),
                         component.price != null && parsePrice(component.price) !== 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
@@ -9000,7 +9070,8 @@ function ProductCustomizer({
         variantAxes: product.variant_axes,
         basePrice: product.default_price,
         selectedVariantId,
-        onVariantChange: handleVariantChange
+        onVariantChange: handleVariantChange,
+        productName: product.name
       }
     ),
     hasAddOns && /* @__PURE__ */ jsxRuntime.jsx(