@cimplify/sdk 0.11.0 → 0.12.1

package/dist/react.mjs

@@ -7,6 +7,9 @@ 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';
+import { Field } from '@base-ui/react/field';
+import { Input } from '@base-ui/react/input';
+import { Tabs } from '@base-ui/react/tabs';
 
 // src/ads/index.tsx
 
@@ -8002,7 +8005,6 @@ function VariantSelector({
                 Radio.Root,
                 {
                   value: value.id,
-                  render: /* @__PURE__ */ jsx("button", { type: "button" }),
                   "data-cimplify-variant-option": true,
                   "data-selected": isSelected || void 0,
                   className: cn(
@@ -8050,7 +8052,6 @@ function VariantSelector({
             Radio.Root,
             {
               value: variant.id,
-              render: /* @__PURE__ */ jsx("button", { type: "button" }),
               "data-cimplify-variant-option": true,
               "data-selected": isSelected || void 0,
               className: cn(
@@ -8208,7 +8209,6 @@ function AddOnSelector({
                     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(
@@ -8449,7 +8449,6 @@ function BundleComponentCard({
                 Radio.Root,
                 {
                   value: variant.id,
-                  render: /* @__PURE__ */ jsx("button", { type: "button" }),
                   "data-cimplify-bundle-variant-option": true,
                   "data-selected": isSelected || void 0,
                   className: cn(
@@ -8695,7 +8694,6 @@ function CompositeSelector({
                       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(
@@ -9166,33 +9164,44 @@ function ProductImageGallery({
         )
       }
     ),
-    normalizedImages.length > 1 && /* @__PURE__ */ jsx("div", { "data-cimplify-image-gallery-thumbnails": true, style: { display: "flex", gap: "0.5rem", marginTop: "0.75rem" }, children: normalizedImages.map((image, index) => /* @__PURE__ */ jsx(
-      "button",
+    normalizedImages.length > 1 && /* @__PURE__ */ jsx(
+      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__ */ 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__ */ jsx(
+            Radio.Root,
+            {
+              value: String(index),
+              "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__ */ jsx(
+                "img",
+                {
+                  src: image,
+                  alt: "",
+                  style: { width: "100%", height: "100%", objectFit: "cover" }
+                }
+              )
+            },
+            `${image}-${index}`
+          );
+        })
+      }
+    )
   ] });
 }
 function CartLineItemRow({
@@ -9803,6 +9812,26 @@ function ProductGrid({
     )
   ] });
 }
+var SearchIcon = () => /* @__PURE__ */ 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__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+    ]
+  }
+);
 function SearchInput({
   placeholder = "Search products...",
   searchOptions,
@@ -9813,42 +9842,58 @@ function SearchInput({
   classNames
 }) {
   const { results, isLoading, query, setQuery, clear } = useSearch(searchOptions);
-  const handleChange = useCallback(
-    (e) => {
-      setQuery(e.target.value);
+  const handleValueChange = useCallback(
+    (value) => {
+      setQuery(value);
     },
     [setQuery]
   );
   return /* @__PURE__ */ jsxs(
-    "div",
+    Field.Root,
     {
       "data-cimplify-search": true,
       className: cn(className, classNames?.root),
       style: { position: "relative" },
       children: [
-        /* @__PURE__ */ 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__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: clear,
-            "data-cimplify-search-clear": true,
-            className: classNames?.clearButton,
-            "aria-label": "Clear search",
-            children: "\xD7"
-          }
-        ),
+        /* @__PURE__ */ jsx(Field.Label, { className: "sr-only", children: "Search products" }),
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-cimplify-search-icon-wrapper": true,
+              style: {
+                position: "absolute",
+                left: "0.5rem",
+                pointerEvents: "none",
+                display: "flex",
+                alignItems: "center"
+              },
+              children: /* @__PURE__ */ jsx(SearchIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "search",
+              value: query,
+              onValueChange: handleValueChange,
+              placeholder,
+              "data-cimplify-search-input": true,
+              className: classNames?.input
+            }
+          ),
+          query.length > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { "data-cimplify-search-results": true, className: classNames?.results, children: [
           isLoading && /* @__PURE__ */ jsx("div", { "data-cimplify-search-loading": true, className: classNames?.loading, "aria-busy": "true", children: "Searching..." }),
           !isLoading && results.length === 0 && query.length >= 2 && /* @__PURE__ */ jsx("div", { "data-cimplify-search-empty": true, className: classNames?.empty, children: "No results found" }),
@@ -9868,6 +9913,7 @@ function SearchInput({
     }
   );
 }
+var ALL_VALUE = "__all__";
 function CategoryFilter({
   selectedId = null,
   onSelect,
@@ -9877,9 +9923,9 @@ function CategoryFilter({
   classNames
 }) {
   const { categories, isLoading } = useCategories();
-  const handleSelect = useCallback(
-    (id) => {
-      onSelect(id);
+  const handleValueChange = useCallback(
+    (value) => {
+      onSelect(value === ALL_VALUE ? null : String(value));
     },
     [onSelect]
   );
@@ -9893,45 +9939,45 @@ function CategoryFilter({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    Tabs.Root,
     {
-      "data-cimplify-category-filter": true,
-      className: cn(className, classNames?.root),
-      role: "tablist",
-      "aria-label": "Filter by category",
-      children: [
-        /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { "data-cimplify-category-count": true, className: classNames?.count, children: category.product_count })
-            ]
-          },
-          category.id
-        ))
-      ]
+      value: selectedId ?? ALL_VALUE,
+      onValueChange: handleValueChange,
+      children: /* @__PURE__ */ jsxs(
+        Tabs.List,
+        {
+          "data-cimplify-category-filter": true,
+          "aria-label": "Filter by category",
+          className: cn(className, classNames?.root),
+          children: [
+            /* @__PURE__ */ jsx(
+              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__ */ jsxs(
+              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__ */ jsx("span", { "data-cimplify-category-count": true, className: classNames?.count, children: category.product_count })
+                ]
+              },
+              category.id
+            ))
+          ]
+        }
+      )
     }
   );
 }
@@ -9974,50 +10020,74 @@ function DiscountInput({
     [handleApply]
   );
   const isApplied = appliedValidation?.is_eligible === true;
-  return /* @__PURE__ */ jsxs("div", { "data-cimplify-discount": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxs("div", { "data-cimplify-discount-form": true, children: [
-      /* @__PURE__ */ 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__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleClear,
-          "data-cimplify-discount-clear": true,
-          className: classNames?.button,
-          children: "Remove"
-        }
-      ) : /* @__PURE__ */ 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__ */ jsx("div", { "data-cimplify-discount-error": true, className: classNames?.error, children: error.message }),
-    appliedValidation && !appliedValidation.is_eligible && /* @__PURE__ */ jsx("div", { "data-cimplify-discount-error": true, className: classNames?.error, children: appliedValidation.ineligibility_reason ?? "This code is not valid." }),
-    isApplied && appliedValidation.discount_amount && /* @__PURE__ */ jsxs("div", { "data-cimplify-discount-success": true, className: classNames?.success, children: [
-      /* @__PURE__ */ jsx("span", { children: "Discount applied" }),
-      /* @__PURE__ */ 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__ */ jsxs(
+    Field.Root,
+    {
+      "data-cimplify-discount": true,
+      invalid: hasError,
+      disabled: isApplied,
+      className: cn(className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-cimplify-discount-form": true, children: [
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              "data-cimplify-discount-clear": true,
+              className: classNames?.button,
+              children: "Remove"
+            }
+          ) : /* @__PURE__ */ 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__ */ jsx(
+          Field.Error,
+          {
+            match: true,
+            "data-cimplify-discount-error": true,
+            className: classNames?.error,
+            children: errorMessage
+          }
+        ),
+        isApplied && appliedValidation.discount_amount && /* @__PURE__ */ jsxs(
+          Field.Description,
+          {
+            "data-cimplify-discount-success": true,
+            className: classNames?.success,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "Discount applied" }),
+              /* @__PURE__ */ jsx(Price, { amount: appliedValidation.discount_amount, prefix: "-" })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 function CategoryGrid({
   categories: categoriesProp,
@@ -10464,6 +10534,9 @@ function formatTime(timeStr) {
   }
   return timeStr;
 }
+function slotToValue(slot) {
+  return `${slot.start_time}|${slot.end_time}`;
+}
 function SlotPicker({
   slots: slotsProp,
   serviceId,
@@ -10508,29 +10581,48 @@ function SlotPicker({
     );
   }
   const groups = groupByTimeOfDay ? groupSlots(slots) : [{ label: "", slots }];
-  return /* @__PURE__ */ jsx("div", { "data-cimplify-slot-picker": true, className: cn(className, classNames?.root), children: groups.map((group) => /* @__PURE__ */ jsxs("div", { "data-cimplify-slot-group": true, className: classNames?.group, children: [
-    group.label && /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: formatTime(slot.start_time) }),
-            showPrice && slot.price && /* @__PURE__ */ jsx("span", { "data-cimplify-slot-price": true, className: classNames?.slotPrice, children: /* @__PURE__ */ 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__ */ jsx(
+    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__ */ jsxs("div", { "data-cimplify-slot-group": true, className: classNames?.group, children: [
+        group.label && /* @__PURE__ */ 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__ */ jsxs(
+            Radio.Root,
+            {
+              value,
+              disabled: !slot.is_available,
+              "data-cimplify-slot": true,
+              "data-selected": isSelected || void 0,
+              "data-unavailable": !slot.is_available || void 0,
+              className: classNames?.slot,
+              children: [
+                /* @__PURE__ */ jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: formatTime(slot.start_time) }),
+                showPrice && slot.price && /* @__PURE__ */ jsx("span", { "data-cimplify-slot-price": true, className: classNames?.slotPrice, children: /* @__PURE__ */ jsx(Price, { amount: slot.price }) })
+              ]
+            },
+            value
+          );
+        })
+      ] }, group.label || "all"))
+    }
+  );
 }
 function formatDate(dateStr) {
   const date = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
@@ -10593,8 +10685,10 @@ function DateSlotPicker({
   const handleNext = useCallback(() => {
     setOffset((prev) => prev + daysToShow);
   }, [daysToShow]);
-  const handleDateSelect = useCallback((date) => {
-    setSelectedDate(date);
+  const handleDateChange = useCallback((value) => {
+    if (typeof value === "string") {
+      setSelectedDate(value);
+    }
   }, []);
   const handleSlotSelect = useCallback(
     (slot) => {
@@ -10602,72 +10696,79 @@ function DateSlotPicker({
     },
     [onSlotSelect, selectedDate]
   );
-  return /* @__PURE__ */ jsxs("div", { "data-cimplify-date-slot-picker": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxs("div", { "data-cimplify-date-nav": true, className: classNames?.nav, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handlePrev,
-          disabled: offset === 0,
-          "data-cimplify-date-nav-prev": true,
-          className: classNames?.navButton,
-          children: "\u2190"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleNext,
-          "data-cimplify-date-nav-next": true,
-          className: classNames?.navButton,
-          children: "\u2192"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ 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__ */ 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__ */ jsx(
-      "div",
-      {
-        "data-cimplify-date-slot-loading": true,
-        "aria-busy": "true",
-        className: classNames?.loading
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { "data-cimplify-date-slots": true, className: classNames?.slots, children: /* @__PURE__ */ jsx(
-      SlotPicker,
-      {
-        serviceId,
-        date: selectedDate,
-        participantCount,
-        selectedSlot,
-        onSlotSelect: handleSlotSelect,
-        showPrice
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Tabs.Root,
+    {
+      value: selectedDate,
+      onValueChange: handleDateChange,
+      "data-cimplify-date-slot-picker": true,
+      className: cn(className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-cimplify-date-nav": true, className: classNames?.nav, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handlePrev,
+              disabled: offset === 0,
+              "data-cimplify-date-nav-prev": true,
+              className: classNames?.navButton,
+              children: "\u2190"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleNext,
+              "data-cimplify-date-nav-next": true,
+              className: classNames?.navButton,
+              children: "\u2192"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(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__ */ jsx(
+            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__ */ jsx(
+          "div",
+          {
+            "data-cimplify-date-slot-loading": true,
+            "aria-busy": "true",
+            className: classNames?.loading
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-cimplify-date-slots": true, className: classNames?.slots, children: /* @__PURE__ */ jsx(
+          SlotPicker,
+          {
+            serviceId,
+            date: selectedDate,
+            participantCount,
+            selectedSlot,
+            onSlotSelect: handleSlotSelect,
+            showPrice
+          }
+        ) })
+      ]
+    }
+  );
 }
+var ANY_VALUE = "__any__";
 function StaffPicker({
   staff,
   selectedStaffId,
@@ -10677,44 +10778,54 @@ function StaffPicker({
   className,
   classNames
 }) {
-  return /* @__PURE__ */ jsxs("div", { "data-cimplify-staff-picker": true, className: cn(className, classNames?.root), children: [
-    showAnyOption && /* @__PURE__ */ 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__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
-      }
-    ),
-    staff.map((member) => /* @__PURE__ */ 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__ */ jsx(
-            "img",
-            {
-              src: member.avatar_url,
-              alt: member.name,
-              "data-cimplify-staff-avatar": true,
-              className: classNames?.avatar
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
-          member.bio && /* @__PURE__ */ jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
-        ]
+  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
+  return /* @__PURE__ */ jsxs(
+    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__ */ jsx(
+          Radio.Root,
+          {
+            value: ANY_VALUE,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === null || void 0,
+            "data-any": true,
+            className: classNames?.option,
+            children: /* @__PURE__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
+          }
+        ),
+        staff.map((member) => /* @__PURE__ */ jsxs(
+          Radio.Root,
+          {
+            value: member.id,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === member.id || void 0,
+            className: classNames?.option,
+            children: [
+              member.avatar_url && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: member.avatar_url,
+                  alt: member.name,
+                  "data-cimplify-staff-avatar": true,
+                  className: classNames?.avatar
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
+              member.bio && /* @__PURE__ */ jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
+            ]
+          },
+          member.id
+        ))
+      ]
+    }
+  );
 }
 var STATUS_LABELS3 = {
   pending: "Pending",
@@ -11386,10 +11497,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",
@@ -11403,6 +11514,10 @@ function OrderHistoryPage({
 }) {
   const [statusFilter, setStatusFilter] = useState(void 0);
   const [selectedOrder, setSelectedOrder] = useState(null);
+  const handleTabChange = useCallback((value) => {
+    const filter = STATUS_FILTERS.find((f) => f.tabValue === value);
+    setStatusFilter(filter?.value);
+  }, []);
   const handleOrderClick = useCallback(
     (order) => {
       if (onOrderNavigate) {
@@ -11416,6 +11531,7 @@ function OrderHistoryPage({
   const handleBack = useCallback(() => {
     setSelectedOrder(null);
   }, []);
+  const activeTabValue = STATUS_FILTERS.find((f) => f.value === statusFilter)?.tabValue ?? "all";
   if (selectedOrder && !onOrderNavigate) {
     return /* @__PURE__ */ jsx("div", { "data-cimplify-order-history-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxs("div", { "data-cimplify-order-history-detail": true, className: classNames?.detail, children: [
       /* @__PURE__ */ jsx(
@@ -11433,20 +11549,17 @@ function OrderHistoryPage({
   }
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-order-history-page": true, className: cn(className, classNames?.root), children: [
     /* @__PURE__ */ jsx("div", { "data-cimplify-order-history-header": true, className: classNames?.header, children: /* @__PURE__ */ jsx("h1", { "data-cimplify-order-history-title": true, className: classNames?.title, children: title }) }),
-    showFilters && /* @__PURE__ */ jsx("div", { "data-cimplify-order-history-filters": true, className: classNames?.filters, role: "tablist", children: STATUS_FILTERS.map((filter) => /* @__PURE__ */ jsx(
-      "button",
+    showFilters && /* @__PURE__ */ jsx(Tabs.Root, { value: activeTabValue, onValueChange: handleTabChange, children: /* @__PURE__ */ jsx(Tabs.List, { "data-cimplify-order-history-filters": true, className: classNames?.filters, children: STATUS_FILTERS.map((filter) => /* @__PURE__ */ jsx(
+      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__ */ jsx("div", { "data-cimplify-order-history-list": true, className: classNames?.list, children: /* @__PURE__ */ jsx(
       OrderHistory,
       {
@@ -11474,7 +11587,7 @@ function SearchPage({
     /* @__PURE__ */ jsx("div", { "data-cimplify-search-page-header": true, className: classNames?.header, children: /* @__PURE__ */ jsx("h1", { "data-cimplify-search-page-title": true, className: classNames?.title, children: title }) }),
     /* @__PURE__ */ jsxs("div", { "data-cimplify-search-page-input": true, className: classNames?.inputContainer, children: [
       /* @__PURE__ */ jsx(
-        "input",
+        Input,
         {
           type: "search",
           value: query,
@@ -11816,20 +11929,24 @@ function BookingsPage({
   }
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-bookings-page": true, className: cn(className, classNames?.root), children: [
     /* @__PURE__ */ jsx("div", { "data-cimplify-bookings-header": true, className: classNames?.header, children: /* @__PURE__ */ jsx("h1", { "data-cimplify-bookings-title": true, className: classNames?.title, children: title }) }),
-    showFilters && /* @__PURE__ */ jsx("div", { "data-cimplify-bookings-filters": true, className: classNames?.filters, role: "tablist", children: BOOKING_FILTERS.map((f) => /* @__PURE__ */ jsx(
-      "button",
+    showFilters && /* @__PURE__ */ jsx(
+      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__ */ jsx(Tabs.List, { "data-cimplify-bookings-filters": true, className: classNames?.filters, children: BOOKING_FILTERS.map((f) => /* @__PURE__ */ jsx(
+          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__ */ jsx("div", { "data-cimplify-bookings-list": true, className: classNames?.list, children: /* @__PURE__ */ jsx(
       BookingList,
       {