@cimplify/sdk 0.10.3 → 0.11.0

package/dist/react.mjs

@@ -1,8 +1,12 @@
 "use client";
-import React3, { createContext, useContext, useState, useEffect, useRef, useMemo, useSyncExternalStore, useCallback } from 'react';
+import React3, { createContext, useContext, useState, useEffect, useRef, useMemo, useSyncExternalStore, useCallback, useId } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { NumberField } from '@base-ui/react/number-field';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { RadioGroup } from '@base-ui/react/radio-group';
+import { Radio } from '@base-ui/react/radio';
+import { Checkbox } from '@base-ui/react/checkbox';
 
 // src/ads/index.tsx
 
@@ -7824,52 +7828,60 @@ function QuantitySelector({
   className,
   classNames
 }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    NumberField.Root,
     {
-      "data-cimplify-quantity": true,
-      className: cn("inline-flex items-center gap-3 border border-border px-2", className, classNames?.root),
-      children: [
-        /* @__PURE__ */ 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__ */ jsxs(
+        NumberField.Group,
+        {
+          "data-cimplify-quantity": true,
+          className: cn("inline-flex items-center gap-3 border border-border px-2", className, classNames?.root),
+          children: [
+            /* @__PURE__ */ jsx(
+              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__ */ jsx(
-          "span",
-          {
-            "data-cimplify-quantity-value": true,
-            "aria-live": "polite",
-            className: cn("w-8 text-center font-medium", classNames?.value),
-            children: value
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsx(
+              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__ */ jsx(
+              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: "+"
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -7922,6 +7934,7 @@ function VariantSelector({
 }) {
   const [axisSelections, setAxisSelections] = useState({});
   const initialized = useRef(false);
+  const idPrefix = useId();
   useEffect(() => {
     initialized.current = false;
   }, [variants]);
@@ -7958,106 +7971,126 @@ function VariantSelector({
   }
   const basePriceNum = basePrice != null ? parsePrice(basePrice) : 0;
   if (variantAxes && variantAxes.length > 0) {
-    return /* @__PURE__ */ jsx("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: variantAxes.map((axis) => /* @__PURE__ */ jsxs("div", { "data-cimplify-variant-axis": true, children: [
-      /* @__PURE__ */ 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__ */ 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__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "aria-selected": isSelected,
-                onClick: () => {
-                  setAxisSelections((prev) => ({
-                    ...prev,
-                    [axis.id]: value.id
-                  }));
+    return /* @__PURE__ */ 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__ */ jsxs("div", { "data-cimplify-variant-axis": true, children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          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__ */ jsx(
+                Radio.Root,
+                {
+                  value: value.id,
+                  render: /* @__PURE__ */ 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__ */ jsxs("div", { "data-cimplify-variant-selector": true, className: cn("space-y-5", className, classNames?.root), children: [
     /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
-              "span",
-              {
-                "data-cimplify-variant-name": true,
-                className: cn("font-medium", isSelected && "text-primary", classNames?.name),
-                children: getVariantDisplayName(variant, productName)
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm", classNames?.pricing), children: [
-              adjustment !== 0 && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  "data-cimplify-variant-adjustment": true,
-                  className: cn(
-                    adjustment > 0 ? "text-muted-foreground" : "text-green-600",
-                    classNames?.adjustment
-                  ),
-                  children: [
-                    adjustment > 0 ? "+" : "",
-                    /* @__PURE__ */ jsx(Price, { amount: variant.price_adjustment })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(Price, { amount: effectivePrice, className: "text-muted-foreground" })
-            ] })
-          ]
+    /* @__PURE__ */ jsx(
+      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__ */ jsxs(
+            Radio.Root,
+            {
+              value: variant.id,
+              render: /* @__PURE__ */ 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__ */ jsx(
+                  "span",
+                  {
+                    "data-cimplify-variant-name": true,
+                    className: cn("font-medium", isSelected && "text-primary", classNames?.name),
+                    children: getVariantDisplayName(variant, productName)
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm", classNames?.pricing), children: [
+                  adjustment !== 0 && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-cimplify-variant-adjustment": true,
+                      className: cn(
+                        adjustment > 0 ? "text-muted-foreground" : "text-green-600",
+                        classNames?.adjustment
+                      ),
+                      children: [
+                        adjustment > 0 ? "+" : "",
+                        /* @__PURE__ */ jsx(Price, { amount: variant.price_adjustment })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Price, { amount: effectivePrice, className: "text-muted-foreground" })
+                ] })
+              ]
+            },
+            variant.id
+          );
+        })
+      }
+    )
   ] });
 }
 function AddOnSelector({
@@ -8071,8 +8104,8 @@ function AddOnSelector({
     (optionId) => selectedOptions.includes(optionId),
     [selectedOptions]
   );
-  const toggleOption = useCallback(
-    (addOn, optionId) => {
+  const handleCheckedChange = 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));
@@ -8108,7 +8141,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__ */ jsxs(
       "div",
       {
@@ -8171,12 +8203,12 @@ function AddOnSelector({
               children: addOn.options.map((option) => {
                 const isSelected = isOptionSelected(option.id);
                 return /* @__PURE__ */ jsxs(
-                  "button",
+                  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__ */ jsx("button", { type: "button" }),
                     "data-cimplify-addon-option": true,
                     "data-selected": isSelected || void 0,
                     className: cn(
@@ -8185,6 +8217,13 @@ function AddOnSelector({
                       isSelected ? classNames?.optionSelected : classNames?.option
                     ),
                     children: [
+                      /* @__PURE__ */ jsx(
+                        Checkbox.Indicator,
+                        {
+                          className: "hidden",
+                          keepMounted: false
+                        }
+                      ),
                       /* @__PURE__ */ jsx(
                         "span",
                         {
@@ -8348,11 +8387,13 @@ function BundleComponentCard({
   onVariantChange,
   classNames
 }) {
+  const idPrefix = useId();
   const showVariantPicker = component.allow_variant_choice && component.available_variants.length > 1;
   const displayPrice = useMemo(
     () => getComponentPrice(component, selectedVariantId),
     [component, selectedVariantId]
   );
+  const labelId = `${idPrefix}-bundle-component-${component.id}`;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8380,6 +8421,7 @@ function BundleComponentCard({
                 /* @__PURE__ */ jsx(
                   "span",
                   {
+                    id: labelId,
                     "data-cimplify-bundle-component-name": true,
                     className: cn("font-medium text-sm", classNames?.componentName),
                     children: component.product_name
@@ -8391,19 +8433,23 @@ function BundleComponentCard({
           }
         ),
         showVariantPicker && /* @__PURE__ */ jsx(
-          "div",
+          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__ */ jsxs(
-                "button",
+                Radio.Root,
                 {
-                  type: "button",
-                  "aria-pressed": isSelected,
-                  onClick: () => onVariantChange(variant.id),
+                  value: variant.id,
+                  render: /* @__PURE__ */ jsx("button", { type: "button" }),
                   "data-cimplify-bundle-variant-option": true,
                   "data-selected": isSelected || void 0,
                   className: cn(
@@ -8534,12 +8580,13 @@ function CompositeSelector({
     []
   );
   const updateQuantity = 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;
         }
@@ -8643,12 +8690,12 @@ function CompositeSelector({
                   const isSelected = qty > 0;
                   const displayName = component.display_name || component.id;
                   return /* @__PURE__ */ jsxs(
-                    "button",
+                    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__ */ jsx("button", { type: "button" }),
                       "data-cimplify-composite-component": true,
                       "data-selected": isSelected || void 0,
                       className: cn(
@@ -8657,6 +8704,13 @@ function CompositeSelector({
                         isSelected ? classNames?.componentSelected : classNames?.component
                       ),
                       children: [
+                        /* @__PURE__ */ jsx(
+                          Checkbox.Indicator,
+                          {
+                            className: "hidden",
+                            keepMounted: false
+                          }
+                        ),
                         /* @__PURE__ */ jsxs(
                           "div",
                           {
@@ -8709,35 +8763,51 @@ function CompositeSelector({
                             ]
                           }
                         ),
-                        group.allow_quantity && isSelected && /* @__PURE__ */ jsxs(
-                          "span",
+                        group.allow_quantity && isSelected && /* @__PURE__ */ jsx(
+                          NumberField.Root,
                           {
-                            "data-cimplify-composite-qty": true,
-                            onClick: (e) => e.stopPropagation(),
-                            className: cn("flex items-center gap-2", classNames?.qty),
-                            children: [
-                              /* @__PURE__ */ 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__ */ jsx("span", { className: cn("text-sm font-medium w-4 text-center", classNames?.qtyValue), children: qty }),
-                              /* @__PURE__ */ 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__ */ jsxs(
+                              NumberField.Group,
+                              {
+                                "data-cimplify-composite-qty": true,
+                                onClick: (e) => e.stopPropagation(),
+                                className: cn("flex items-center gap-2", classNames?.qty),
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    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__ */ jsx(
+                                    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__ */ jsx(
+                                    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__ */ jsx(Price, { amount: component.price, prefix: "+" })
@@ -8994,7 +9064,8 @@ function ProductCustomizer({
         variantAxes: product.variant_axes,
         basePrice: product.default_price,
         selectedVariantId,
-        onVariantChange: handleVariantChange
+        onVariantChange: handleVariantChange,
+        productName: product.name
       }
     ),
     hasAddOns && /* @__PURE__ */ jsx(

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.w-full{width:100%}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.\[appearance\:textfield\]{appearance:textfield}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.border-transparent{border-color:#0000}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/5{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.bg-transparent{background-color:#0000}.text-center{text-align:center}.text-left{text-align:left}.text-\[10px\]{font-size:10px}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-muted-foreground\/70{color:#636363b3}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/70{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 70%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.uppercase{text-transform:uppercase}.opacity-70{opacity:.7}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.outline-none{--tw-outline-style:none;outline-style:none}.\[cimplify\:checkout\]{cimplify:checkout}@media (hover:hover){.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-muted\/50:hover{background-color:#eeeeee80}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 50%, transparent)}}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-50:disabled{opacity:.5}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -39,10 +39,12 @@
       "types": "./dist/advanced.d.ts",
       "import": "./dist/advanced.mjs",
       "require": "./dist/advanced.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
-    "build": "tsup && bun run build:registry",
+    "build": "tsup && bun run build:css && bun run build:registry",
+    "build:css": "bunx @tailwindcss/cli -i src/styles.css -o dist/styles.css --minify",
     "build:registry": "bun scripts/build-registry.ts",
     "dev": "tsup --watch",
     "typecheck": "tsgo --noEmit",
@@ -67,6 +69,7 @@
     }
   },
   "devDependencies": {
+    "@tailwindcss/cli": "4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^25.3.2",
@@ -75,11 +78,13 @@
     "jsdom": "^28.1.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "tailwindcss": "4.1.18",
     "tsup": "^8.5.1",
     "typescript": "5.9.3",
     "vitest": "^4.0.18"
   },
   "dependencies": {
+    "@base-ui/react": "^1.2.0",
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.6.0"
   }