@cimplify/sdk 0.10.4 → 0.12.0

package/dist/react.js

@@ -3,8 +3,15 @@
 
 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');
+var field = require('@base-ui/react/field');
+var input = require('@base-ui/react/input');
+var tabs = require('@base-ui/react/tabs');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -7830,52 +7837,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 +7943,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 +7980,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 +8113,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 +8150,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 +8212,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 +8226,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 +8396,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 +8430,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 +8442,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 +8589,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 +8699,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 +8713,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 +8772,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 +9073,8 @@ function ProductCustomizer({
         variantAxes: product.variant_axes,
         basePrice: product.default_price,
         selectedVariantId,
-        onVariantChange: handleVariantChange
+        onVariantChange: handleVariantChange,
+        productName: product.name
       }
     ),
     hasAddOns && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9101,33 +9175,45 @@ function ProductImageGallery({
         )
       }
     ),
-    normalizedImages.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-image-gallery-thumbnails": true, style: { display: "flex", gap: "0.5rem", marginTop: "0.75rem" }, children: normalizedImages.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    normalizedImages.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      radioGroup.RadioGroup,
       {
-        type: "button",
-        onClick: () => setSelectedImage(index),
-        "aria-selected": selectedImage === index,
-        "data-cimplify-image-gallery-thumb": true,
-        "data-selected": selectedImage === index || void 0,
-        style: {
-          width: "4rem",
-          height: "4rem",
-          overflow: "hidden",
-          padding: 0,
-          border: "none",
-          cursor: "pointer"
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: image,
-            alt: "",
-            style: { width: "100%", height: "100%", objectFit: "cover" }
-          }
-        )
-      },
-      `${image}-${index}`
-    )) })
+        "aria-label": `${productName} image thumbnails`,
+        value: String(selectedImage),
+        onValueChange: (value) => setSelectedImage(Number(value)),
+        "data-cimplify-image-gallery-thumbnails": true,
+        style: { display: "flex", gap: "0.5rem", marginTop: "0.75rem" },
+        children: normalizedImages.map((image, index) => {
+          const isSelected = selectedImage === index;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            radio.Radio.Root,
+            {
+              value: String(index),
+              render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+              "data-cimplify-image-gallery-thumb": true,
+              "data-selected": isSelected || void 0,
+              style: {
+                width: "4rem",
+                height: "4rem",
+                overflow: "hidden",
+                padding: 0,
+                border: "none",
+                cursor: "pointer"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: image,
+                  alt: "",
+                  style: { width: "100%", height: "100%", objectFit: "cover" }
+                }
+              )
+            },
+            `${image}-${index}`
+          );
+        })
+      }
+    )
   ] });
 }
 function CartLineItemRow({
@@ -9738,6 +9824,26 @@ function ProductGrid({
     )
   ] });
 }
+var SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    "data-cimplify-search-icon": true,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+    ]
+  }
+);
 function SearchInput({
   placeholder = "Search products...",
   searchOptions,
@@ -9748,42 +9854,58 @@ function SearchInput({
   classNames
 }) {
   const { results, isLoading, query, setQuery, clear } = useSearch(searchOptions);
-  const handleChange = React3.useCallback(
-    (e) => {
-      setQuery(e.target.value);
+  const handleValueChange = React3.useCallback(
+    (value) => {
+      setQuery(value);
     },
     [setQuery]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    field.Field.Root,
     {
       "data-cimplify-search": true,
       className: cn(className, classNames?.root),
       style: { position: "relative" },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "search",
-            value: query,
-            onChange: handleChange,
-            placeholder,
-            "data-cimplify-search-input": true,
-            className: classNames?.input,
-            "aria-label": "Search products"
-          }
-        ),
-        query.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: clear,
-            "data-cimplify-search-clear": true,
-            className: classNames?.clearButton,
-            "aria-label": "Clear search",
-            children: "\xD7"
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx(field.Field.Label, { className: "sr-only", children: "Search products" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-cimplify-search-icon-wrapper": true,
+              style: {
+                position: "absolute",
+                left: "0.5rem",
+                pointerEvents: "none",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              type: "search",
+              value: query,
+              onValueChange: handleValueChange,
+              placeholder,
+              "data-cimplify-search-input": true,
+              className: classNames?.input
+            }
+          ),
+          query.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: clear,
+              "data-cimplify-search-clear": true,
+              className: classNames?.clearButton,
+              "aria-label": "Clear search",
+              children: "\xD7"
+            }
+          )
+        ] }),
         showResults && query.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-results": true, className: classNames?.results, children: [
           isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-loading": true, className: classNames?.loading, "aria-busy": "true", children: "Searching..." }),
           !isLoading && results.length === 0 && query.length >= 2 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-empty": true, className: classNames?.empty, children: "No results found" }),
@@ -9803,6 +9925,7 @@ function SearchInput({
     }
   );
 }
+var ALL_VALUE = "__all__";
 function CategoryFilter({
   selectedId = null,
   onSelect,
@@ -9812,9 +9935,9 @@ function CategoryFilter({
   classNames
 }) {
   const { categories, isLoading } = useCategories();
-  const handleSelect = React3.useCallback(
-    (id) => {
-      onSelect(id);
+  const handleValueChange = React3.useCallback(
+    (value) => {
+      onSelect(value === ALL_VALUE ? null : String(value));
     },
     [onSelect]
   );
@@ -9828,45 +9951,45 @@ function CategoryFilter({
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tabs.Tabs.Root,
     {
-      "data-cimplify-category-filter": true,
-      className: cn(className, classNames?.root),
-      role: "tablist",
-      "aria-label": "Filter by category",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": selectedId === null,
-            onClick: () => handleSelect(null),
-            "data-cimplify-category-filter-item": true,
-            "data-selected": selectedId === null || void 0,
-            className: cn(classNames?.item, classNames?.allButton),
-            children: allLabel
-          }
-        ),
-        categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            role: "tab",
-            "aria-selected": selectedId === category.id,
-            onClick: () => handleSelect(category.id),
-            "data-cimplify-category-filter-item": true,
-            "data-selected": selectedId === category.id || void 0,
-            className: classNames?.item,
-            children: [
-              category.name,
-              showCounts && category.product_count != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-category-count": true, className: classNames?.count, children: category.product_count })
-            ]
-          },
-          category.id
-        ))
-      ]
+      value: selectedId ?? ALL_VALUE,
+      onValueChange: handleValueChange,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        tabs.Tabs.List,
+        {
+          "data-cimplify-category-filter": true,
+          "aria-label": "Filter by category",
+          className: cn(className, classNames?.root),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              tabs.Tabs.Tab,
+              {
+                value: ALL_VALUE,
+                "data-cimplify-category-filter-item": true,
+                "data-selected": selectedId === null || void 0,
+                className: cn(classNames?.item, classNames?.allButton),
+                children: allLabel
+              }
+            ),
+            categories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs(
+              tabs.Tabs.Tab,
+              {
+                value: category.id,
+                "data-cimplify-category-filter-item": true,
+                "data-selected": selectedId === category.id || void 0,
+                className: classNames?.item,
+                children: [
+                  category.name,
+                  showCounts && category.product_count != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-category-count": true, className: classNames?.count, children: category.product_count })
+                ]
+              },
+              category.id
+            ))
+          ]
+        }
+      )
     }
   );
 }
@@ -9909,50 +10032,74 @@ function DiscountInput({
     [handleApply]
   );
   const isApplied = appliedValidation?.is_eligible === true;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-discount": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-discount-form": true, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "text",
-          value: code,
-          onChange: (e) => setCode(e.target.value),
-          onKeyDown: handleKeyDown,
-          placeholder,
-          disabled: isApplied,
-          "data-cimplify-discount-input": true,
-          className: classNames?.input,
-          "aria-label": "Discount code"
-        }
-      ),
-      isApplied ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleClear,
-          "data-cimplify-discount-clear": true,
-          className: classNames?.button,
-          children: "Remove"
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleApply,
-          disabled: isValidating || code.trim().length === 0,
-          "data-cimplify-discount-apply": true,
-          className: classNames?.button,
-          children: isValidating ? "Checking..." : "Apply"
-        }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-discount-error": true, className: classNames?.error, children: error.message }),
-    appliedValidation && !appliedValidation.is_eligible && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-discount-error": true, className: classNames?.error, children: appliedValidation.ineligibility_reason ?? "This code is not valid." }),
-    isApplied && appliedValidation.discount_amount && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-discount-success": true, className: classNames?.success, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Discount applied" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: appliedValidation.discount_amount, prefix: "-" })
-    ] })
-  ] });
+  const hasError = !!error || !!appliedValidation && !appliedValidation.is_eligible;
+  const errorMessage = error ? error.message : appliedValidation && !appliedValidation.is_eligible ? appliedValidation.ineligibility_reason ?? "This code is not valid." : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    field.Field.Root,
+    {
+      "data-cimplify-discount": true,
+      invalid: hasError,
+      disabled: isApplied,
+      className: cn(className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-discount-form": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              type: "text",
+              value: code,
+              onValueChange: (value) => setCode(value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              "data-cimplify-discount-input": true,
+              className: classNames?.input,
+              "aria-label": "Discount code"
+            }
+          ),
+          isApplied ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              "data-cimplify-discount-clear": true,
+              className: classNames?.button,
+              children: "Remove"
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleApply,
+              disabled: isValidating || code.trim().length === 0,
+              "data-cimplify-discount-apply": true,
+              className: classNames?.button,
+              children: isValidating ? "Checking..." : "Apply"
+            }
+          )
+        ] }),
+        hasError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+          field.Field.Error,
+          {
+            match: true,
+            "data-cimplify-discount-error": true,
+            className: classNames?.error,
+            children: errorMessage
+          }
+        ),
+        isApplied && appliedValidation.discount_amount && /* @__PURE__ */ jsxRuntime.jsxs(
+          field.Field.Description,
+          {
+            "data-cimplify-discount-success": true,
+            className: classNames?.success,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Discount applied" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: appliedValidation.discount_amount, prefix: "-" })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function CategoryGrid({
   categories: categoriesProp,
@@ -10399,6 +10546,9 @@ function formatTime(timeStr) {
   }
   return timeStr;
 }
+function slotToValue(slot) {
+  return `${slot.start_time}|${slot.end_time}`;
+}
 function SlotPicker({
   slots: slotsProp,
   serviceId,
@@ -10443,29 +10593,49 @@ function SlotPicker({
     );
   }
   const groups = groupByTimeOfDay ? groupSlots(slots) : [{ label: "", slots }];
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-slot-picker": true, className: cn(className, classNames?.root), children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-slot-group": true, className: classNames?.group, children: [
-    group.label && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-slot-group-label": true, className: classNames?.groupLabel, children: group.label }),
-    group.slots.map((slot) => {
-      const isSelected = selectedSlot?.start_time === slot.start_time && selectedSlot?.end_time === slot.end_time;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          disabled: !slot.is_available,
-          onClick: () => slot.is_available && onSlotSelect?.(slot),
-          "data-cimplify-slot": true,
-          "data-selected": isSelected || void 0,
-          "data-unavailable": !slot.is_available || void 0,
-          className: classNames?.slot,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: formatTime(slot.start_time) }),
-            showPrice && slot.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-price": true, className: classNames?.slotPrice, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: slot.price }) })
-          ]
-        },
-        `${slot.start_time}-${slot.end_time}`
-      );
-    })
-  ] }, group.label || "all")) });
+  const slotsByValue = /* @__PURE__ */ new Map();
+  for (const slot of slots) {
+    slotsByValue.set(slotToValue(slot), slot);
+  }
+  const selectedValue = selectedSlot ? slotToValue(selectedSlot) : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radioGroup.RadioGroup,
+    {
+      "data-cimplify-slot-picker": true,
+      className: cn(className, classNames?.root),
+      value: selectedValue,
+      onValueChange: (value) => {
+        const slot = slotsByValue.get(value);
+        if (slot?.is_available) {
+          onSlotSelect?.(slot);
+        }
+      },
+      children: groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-slot-group": true, className: classNames?.group, children: [
+        group.label && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-slot-group-label": true, className: classNames?.groupLabel, children: group.label }),
+        group.slots.map((slot) => {
+          const value = slotToValue(slot);
+          const isSelected = selectedSlot?.start_time === slot.start_time && selectedSlot?.end_time === slot.end_time;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            radio.Radio.Root,
+            {
+              value,
+              disabled: !slot.is_available,
+              render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+              "data-cimplify-slot": true,
+              "data-selected": isSelected || void 0,
+              "data-unavailable": !slot.is_available || void 0,
+              className: classNames?.slot,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: formatTime(slot.start_time) }),
+                showPrice && slot.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-price": true, className: classNames?.slotPrice, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: slot.price }) })
+              ]
+            },
+            value
+          );
+        })
+      ] }, group.label || "all"))
+    }
+  );
 }
 function formatDate(dateStr) {
   const date = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
@@ -10528,8 +10698,10 @@ function DateSlotPicker({
   const handleNext = React3.useCallback(() => {
     setOffset((prev) => prev + daysToShow);
   }, [daysToShow]);
-  const handleDateSelect = React3.useCallback((date) => {
-    setSelectedDate(date);
+  const handleDateChange = React3.useCallback((value) => {
+    if (typeof value === "string") {
+      setSelectedDate(value);
+    }
   }, []);
   const handleSlotSelect = React3.useCallback(
     (slot) => {
@@ -10537,72 +10709,79 @@ function DateSlotPicker({
     },
     [onSlotSelect, selectedDate]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-date-slot-picker": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-date-nav": true, className: classNames?.nav, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handlePrev,
-          disabled: offset === 0,
-          "data-cimplify-date-nav-prev": true,
-          className: classNames?.navButton,
-          children: "\u2190"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleNext,
-          "data-cimplify-date-nav-next": true,
-          className: classNames?.navButton,
-          children: "\u2192"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-date-strip": true, className: classNames?.dateStrip, role: "tablist", children: dateRange.dates.map((date) => {
-      const dayInfo = availabilityMap.get(date);
-      const hasAvailability = dayInfo?.has_availability !== false;
-      const isSelected = selectedDate === date;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          "aria-selected": isSelected,
-          onClick: () => handleDateSelect(date),
-          "data-cimplify-date-button": true,
-          "data-selected": isSelected || void 0,
-          "data-available": hasAvailability || void 0,
-          "data-fully-booked": !hasAvailability || void 0,
-          className: classNames?.dateButton,
-          children: formatDate(date)
-        },
-        date
-      );
-    }) }),
-    availabilityLoading && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-date-slot-loading": true,
-        "aria-busy": "true",
-        className: classNames?.loading
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-date-slots": true, className: classNames?.slots, children: /* @__PURE__ */ jsxRuntime.jsx(
-      SlotPicker,
-      {
-        serviceId,
-        date: selectedDate,
-        participantCount,
-        selectedSlot,
-        onSlotSelect: handleSlotSelect,
-        showPrice
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    tabs.Tabs.Root,
+    {
+      value: selectedDate,
+      onValueChange: handleDateChange,
+      "data-cimplify-date-slot-picker": true,
+      className: cn(className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-date-nav": true, className: classNames?.nav, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handlePrev,
+              disabled: offset === 0,
+              "data-cimplify-date-nav-prev": true,
+              className: classNames?.navButton,
+              children: "\u2190"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleNext,
+              "data-cimplify-date-nav-next": true,
+              className: classNames?.navButton,
+              children: "\u2192"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { "data-cimplify-date-strip": true, className: classNames?.dateStrip, children: dateRange.dates.map((date) => {
+          const dayInfo = availabilityMap.get(date);
+          const hasAvailability = dayInfo?.has_availability !== false;
+          const isSelected = selectedDate === date;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            tabs.Tabs.Tab,
+            {
+              value: date,
+              "data-cimplify-date-button": true,
+              "data-selected": isSelected || void 0,
+              "data-available": hasAvailability || void 0,
+              "data-fully-booked": !hasAvailability || void 0,
+              className: classNames?.dateButton,
+              children: formatDate(date)
+            },
+            date
+          );
+        }) }),
+        availabilityLoading && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-cimplify-date-slot-loading": true,
+            "aria-busy": "true",
+            className: classNames?.loading
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-date-slots": true, className: classNames?.slots, children: /* @__PURE__ */ jsxRuntime.jsx(
+          SlotPicker,
+          {
+            serviceId,
+            date: selectedDate,
+            participantCount,
+            selectedSlot,
+            onSlotSelect: handleSlotSelect,
+            showPrice
+          }
+        ) })
+      ]
+    }
+  );
 }
+var ANY_VALUE = "__any__";
 function StaffPicker({
   staff,
   selectedStaffId,
@@ -10612,44 +10791,56 @@ function StaffPicker({
   className,
   classNames
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-staff-picker": true, className: cn(className, classNames?.root), children: [
-    showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onStaffSelect?.(null),
-        "data-cimplify-staff-option": true,
-        "data-selected": selectedStaffId === null || void 0,
-        "data-any": true,
-        className: classNames?.option,
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
-      }
-    ),
-    staff.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onClick: () => onStaffSelect?.(member.id),
-        "data-cimplify-staff-option": true,
-        "data-selected": selectedStaffId === member.id || void 0,
-        className: classNames?.option,
-        children: [
-          member.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: member.avatar_url,
-              alt: member.name,
-              "data-cimplify-staff-avatar": true,
-              className: classNames?.avatar
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
-          member.bio && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
-        ]
+  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      "data-cimplify-staff-picker": true,
+      className: cn(className, classNames?.root),
+      value: groupValue,
+      onValueChange: (value) => {
+        onStaffSelect?.(value === ANY_VALUE ? null : value);
       },
-      member.id
-    ))
-  ] });
+      children: [
+        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
+          radio.Radio.Root,
+          {
+            value: ANY_VALUE,
+            render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === null || void 0,
+            "data-any": true,
+            className: classNames?.option,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
+          }
+        ),
+        staff.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(
+          radio.Radio.Root,
+          {
+            value: member.id,
+            render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === member.id || void 0,
+            className: classNames?.option,
+            children: [
+              member.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: member.avatar_url,
+                  alt: member.name,
+                  "data-cimplify-staff-avatar": true,
+                  className: classNames?.avatar
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
+              member.bio && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
+            ]
+          },
+          member.id
+        ))
+      ]
+    }
+  );
 }
 var STATUS_LABELS3 = {
   pending: "Pending",
@@ -11321,10 +11512,10 @@ function OrderDetailPage({
   ] });
 }
 var STATUS_FILTERS = [
-  { label: "All", value: void 0 },
-  { label: "Active", value: "confirmed" },
-  { label: "Completed", value: "completed" },
-  { label: "Cancelled", value: "cancelled" }
+  { label: "All", value: void 0, tabValue: "all" },
+  { label: "Active", value: "confirmed", tabValue: "confirmed" },
+  { label: "Completed", value: "completed", tabValue: "completed" },
+  { label: "Cancelled", value: "cancelled", tabValue: "cancelled" }
 ];
 function OrderHistoryPage({
   title = "Order History",
@@ -11338,6 +11529,10 @@ function OrderHistoryPage({
 }) {
   const [statusFilter, setStatusFilter] = React3.useState(void 0);
   const [selectedOrder, setSelectedOrder] = React3.useState(null);
+  const handleTabChange = React3.useCallback((value) => {
+    const filter = STATUS_FILTERS.find((f) => f.tabValue === value);
+    setStatusFilter(filter?.value);
+  }, []);
   const handleOrderClick = React3.useCallback(
     (order) => {
       if (onOrderNavigate) {
@@ -11351,6 +11546,7 @@ function OrderHistoryPage({
   const handleBack = React3.useCallback(() => {
     setSelectedOrder(null);
   }, []);
+  const activeTabValue = STATUS_FILTERS.find((f) => f.value === statusFilter)?.tabValue ?? "all";
   if (selectedOrder && !onOrderNavigate) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-order-history-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-history-detail": true, className: classNames?.detail, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -11368,20 +11564,17 @@ function OrderHistoryPage({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-history-page": true, className: cn(className, classNames?.root), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-order-history-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-order-history-title": true, className: classNames?.title, children: title }) }),
-    showFilters && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-order-history-filters": true, className: classNames?.filters, role: "tablist", children: STATUS_FILTERS.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    showFilters && /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.Root, { value: activeTabValue, onValueChange: handleTabChange, children: /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { "data-cimplify-order-history-filters": true, className: classNames?.filters, children: STATUS_FILTERS.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
+      tabs.Tabs.Tab,
       {
-        type: "button",
-        role: "tab",
-        "aria-selected": statusFilter === filter.value,
-        onClick: () => setStatusFilter(filter.value),
+        value: filter.tabValue,
         "data-cimplify-order-filter": true,
         "data-selected": statusFilter === filter.value || void 0,
         className: classNames?.filterButton,
         children: filter.label
       },
-      filter.label
-    )) }),
+      filter.tabValue
+    )) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-order-history-list": true, className: classNames?.list, children: /* @__PURE__ */ jsxRuntime.jsx(
       OrderHistory,
       {
@@ -11409,7 +11602,7 @@ function SearchPage({
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-search-page-title": true, className: classNames?.title, children: title }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-page-input": true, className: classNames?.inputContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+        input.Input,
         {
           type: "search",
           value: query,
@@ -11751,20 +11944,24 @@ function BookingsPage({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bookings-page": true, className: cn(className, classNames?.root), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-bookings-title": true, className: classNames?.title, children: title }) }),
-    showFilters && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-filters": true, className: classNames?.filters, role: "tablist", children: BOOKING_FILTERS.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+    showFilters && /* @__PURE__ */ jsxRuntime.jsx(
+      tabs.Tabs.Root,
       {
-        type: "button",
-        role: "tab",
-        "aria-selected": filter === f.value,
-        onClick: () => setFilter(f.value),
-        "data-cimplify-booking-filter": true,
-        "data-selected": filter === f.value || void 0,
-        className: classNames?.filterButton,
-        children: f.label
-      },
-      f.value
-    )) }),
+        value: filter,
+        onValueChange: (value) => setFilter(value),
+        children: /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { "data-cimplify-bookings-filters": true, className: classNames?.filters, children: BOOKING_FILTERS.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+          tabs.Tabs.Tab,
+          {
+            value: f.value,
+            "data-cimplify-booking-filter": true,
+            "data-selected": filter === f.value || void 0,
+            className: classNames?.filterButton,
+            children: f.label
+          },
+          f.value
+        )) })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-list": true, className: classNames?.list, children: /* @__PURE__ */ jsxRuntime.jsx(
       BookingList,
       {