@cimplify/sdk 0.47.0 → 0.48.1

package/dist/react.mjs

@@ -14,6 +14,9 @@ import { RadioGroup } from '@base-ui/react/radio-group';
 import { Radio } from '@base-ui/react/radio';
 import { Checkbox } from '@base-ui/react/checkbox';
 import { Button } from '@base-ui/react/button';
+import { Popover } from '@base-ui/react/popover';
+import { DayPicker } from 'react-day-picker';
+import { format, parseISO, isValid } from 'date-fns';
 import { Tabs } from '@base-ui/react/tabs';
 import { Dialog } from '@base-ui/react/dialog';
 import { Field } from '@base-ui/react/field';
@@ -1333,16 +1336,10 @@ function useCimplifyClient() {
 function useOptionalCimplifyClient() {
   return useContext(CimplifyClientContext);
 }
-var SPACE = { sm: 8};
-function shellColors(isDark, primaryColor) {
+function shellColors(isDark) {
   return {
-    text: isDark ? "#f4f4f5" : "#1a1a1a",
     textSecondary: isDark ? "#a1a1aa" : "#52525b",
-    textMuted: isDark ? "#71717a" : "#a1a1aa",
-    border: isDark ? "#27272a" : "#e4e4e7",
-    surface: isDark ? "#18181b" : "#fafafa",
-    error: "#dc2626",
-    primary: primaryColor
+    error: "#dc2626"
   };
 }
 function statusToLabel(status) {
@@ -1427,7 +1424,6 @@ function CimplifyCheckout({
   fxOptionsRef.current = fxOptions;
   const resolvedCartRef = useRef(resolvedCart);
   resolvedCartRef.current = resolvedCart;
-  const primaryColor = appearance?.variables?.primaryColor || "#0a2540";
   const isDark = appearance?.theme === "dark";
   const emitStatus = React10.useEffectEvent(
     (nextStatus, context = {}) => {
@@ -1630,7 +1626,7 @@ function CimplifyCheckout({
       checkoutElement.setCart(transformToCheckoutCart(resolvedCart, fxOptions));
     }
   }, [resolvedCart, fxOptions]);
-  const colors = shellColors(isDark ?? false, primaryColor);
+  const colors = shellColors(isDark ?? false);
   if (isInitializing) {
     return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { fontSize: 13, color: colors.textSecondary }, children: "Preparing checkout..." }) });
   }
@@ -1652,8 +1648,8 @@ function CimplifyCheckout({
       }
     ),
     /* @__PURE__ */ jsx("div", { "data-cimplify-section": "checkout", children: /* @__PURE__ */ jsx("div", { ref: checkoutMountRef }) }),
-    status && /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.textSecondary }, children: statusText || statusToLabel(status) }),
-    errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.error }, children: errorMessage })
+    status && /* @__PURE__ */ jsx("p", { "data-cimplify-status": "", style: { marginTop: 8, fontSize: 13, color: colors.textSecondary }, children: statusText || statusToLabel(status) }),
+    errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: 8, fontSize: 13, color: colors.error }, children: errorMessage })
   ] });
 }
 function cn(...inputs) {
@@ -5001,6 +4997,262 @@ function VolumePricing({
     }
   );
 }
+function parseValue(value) {
+  if (!value) return void 0;
+  const date = parseISO(value);
+  return isValid(date) ? date : void 0;
+}
+function formatValue(date) {
+  return format(date, "yyyy-MM-dd");
+}
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Select a date",
+  minDate,
+  maxDate,
+  disabled,
+  triggerDisabled,
+  name,
+  required,
+  className,
+  classNames,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = useState(false);
+  const selected = parseValue(value);
+  const disabledMatchers = [];
+  if (minDate) disabledMatchers.push({ before: minDate });
+  if (maxDate) disabledMatchers.push({ after: maxDate });
+  if (Array.isArray(disabled)) {
+    disabledMatchers.push(...disabled);
+  } else if (disabled) {
+    disabledMatchers.push(disabled);
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-date-picker": true, className: cn(className, classNames?.root), children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs(
+        Popover.Trigger,
+        {
+          type: "button",
+          "aria-label": ariaLabel ?? placeholder,
+          disabled: triggerDisabled,
+          className: cn(
+            "w-full inline-flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            classNames?.trigger
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn(!selected && "text-muted-foreground"), children: selected ? format(selected, "EEE, MMM d, yyyy") : placeholder }),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                className: "shrink-0 text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                  /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { sideOffset: 6, align: "start", children: /* @__PURE__ */ jsx(
+        Popover.Popup,
+        {
+          className: cn(
+            "z-50 rounded-lg border border-border bg-background p-3 shadow-lg outline-none",
+            classNames?.popup
+          ),
+          children: /* @__PURE__ */ jsx(
+            DayPicker,
+            {
+              mode: "single",
+              selected,
+              onSelect: (date) => {
+                onChange?.(date ? formatValue(date) : "");
+                if (date) setOpen(false);
+              },
+              disabled: disabledMatchers.length > 0 ? disabledMatchers : void 0,
+              showOutsideDays: true,
+              weekStartsOn: 0,
+              className: cn("p-0", classNames?.calendar),
+              classNames: {
+                months: "flex flex-col gap-3",
+                month: "flex flex-col gap-3",
+                caption: "flex items-center justify-between px-1",
+                caption_label: "text-sm font-semibold",
+                nav: "flex items-center gap-1",
+                nav_button: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted transition-colors",
+                table: "w-full border-collapse",
+                head_row: "flex",
+                head_cell: "w-9 text-center text-[10px] font-medium uppercase tracking-wider text-muted-foreground",
+                row: "flex w-full mt-1",
+                cell: "w-9 h-9 text-center text-sm p-0 relative",
+                day: cn(
+                  "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-normal text-foreground hover:bg-muted transition-colors",
+                  "aria-selected:bg-foreground aria-selected:text-background aria-selected:hover:bg-foreground/90"
+                ),
+                day_selected: cn(
+                  "bg-foreground text-background hover:bg-foreground/90 focus:bg-foreground",
+                  classNames?.daySelected
+                ),
+                day_today: cn(
+                  "ring-1 ring-inset ring-primary/40",
+                  classNames?.dayToday
+                ),
+                day_outside: "text-muted-foreground/50",
+                day_disabled: cn(
+                  "text-muted-foreground/40 cursor-not-allowed line-through",
+                  classNames?.dayDisabled
+                )
+              }
+            }
+          )
+        }
+      ) }) })
+    ] }),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", required }) : null
+  ] });
+}
+function parseHHmm(value) {
+  if (!value) return null;
+  const match = /^(\d{1,2}):(\d{2})$/.exec(value);
+  if (!match) return null;
+  const hour = Number.parseInt(match[1] ?? "", 10);
+  const minute = Number.parseInt(match[2] ?? "", 10);
+  if (Number.isNaN(hour) || Number.isNaN(minute)) return null;
+  if (hour < 0 || hour > 23 || minute < 0 || minute > 59) return null;
+  return { hour, minute };
+}
+function formatHHmm(hour, minute) {
+  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+}
+function formatDisplay(hour, minute, displayFormat) {
+  if (displayFormat === "24h") {
+    return formatHHmm(hour, minute);
+  }
+  const period = hour >= 12 ? "PM" : "AM";
+  const displayHour = hour % 12 || 12;
+  return `${displayHour}:${String(minute).padStart(2, "0")} ${period}`;
+}
+function buildOptions(minTime, maxTime, stepMinutes) {
+  const min = parseHHmm(minTime) ?? { hour: 0, minute: 0 };
+  const max = parseHHmm(maxTime) ?? { hour: 23, minute: 59 };
+  const minTotal = min.hour * 60 + min.minute;
+  const maxTotal = max.hour * 60 + max.minute;
+  const step = Math.max(1, stepMinutes);
+  const out = [];
+  for (let total = minTotal; total <= maxTotal; total += step) {
+    out.push(formatHHmm(Math.floor(total / 60), total % 60));
+  }
+  return out;
+}
+function TimePicker({
+  value,
+  onChange,
+  placeholder = "Select a time",
+  minTime = "00:00",
+  maxTime = "23:30",
+  stepMinutes = 30,
+  displayFormat = "12h",
+  triggerDisabled,
+  name,
+  required,
+  className,
+  classNames,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = useState(false);
+  const parsed = parseHHmm(value);
+  const options = useMemo(
+    () => buildOptions(minTime, maxTime, stepMinutes),
+    [minTime, maxTime, stepMinutes]
+  );
+  const triggerLabel = parsed ? formatDisplay(parsed.hour, parsed.minute, displayFormat) : placeholder;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-time-picker": true, className: cn(className, classNames?.root), children: [
+    /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxs(
+        Popover.Trigger,
+        {
+          type: "button",
+          "aria-label": ariaLabel ?? placeholder,
+          disabled: triggerDisabled,
+          className: cn(
+            "w-full inline-flex items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40 focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            classNames?.trigger
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn(!parsed && "text-muted-foreground"), children: triggerLabel }),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                "aria-hidden": "true",
+                className: "shrink-0 text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "12 7 12 12 15 14" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { sideOffset: 6, align: "start", children: /* @__PURE__ */ jsx(
+        Popover.Popup,
+        {
+          className: cn(
+            "z-50 max-h-64 overflow-y-auto rounded-lg border border-border bg-background p-1 shadow-lg outline-none",
+            classNames?.popup
+          ),
+          children: /* @__PURE__ */ jsx("ul", { role: "listbox", "aria-label": ariaLabel ?? placeholder, className: "flex flex-col", children: options.map((option) => {
+            const isSelected = option === value;
+            const opt = parseHHmm(option);
+            if (!opt) return null;
+            return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": isSelected,
+                onClick: () => {
+                  onChange?.(option);
+                  setOpen(false);
+                },
+                className: cn(
+                  "w-full rounded-md px-3 py-2 text-left text-sm transition-colors hover:bg-muted",
+                  isSelected && "bg-foreground text-background hover:bg-foreground/90",
+                  classNames?.option,
+                  isSelected && classNames?.optionSelected
+                ),
+                children: formatDisplay(opt.hour, opt.minute, displayFormat)
+              }
+            ) }, option);
+          }) })
+        }
+      ) }) })
+    ] }),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", required }) : null
+  ] });
+}
 function CustomerInputFields({
   fields,
   values,
@@ -5187,13 +5439,13 @@ function FieldInput({
       );
     case INPUT_FIELD_TYPE.Date:
       return /* @__PURE__ */ jsx(
-        "input",
+        DatePicker,
         {
-          type: "date",
           value: typeof value === "string" ? value : "",
-          onChange: (e) => onValueChange(e.target.value || void 0),
+          onChange: (next) => onValueChange(next || void 0),
           required: field.is_required,
-          className: inputClass
+          placeholder: field.placeholder ?? "Select a date",
+          "aria-label": field.name
         }
       );
     case INPUT_FIELD_TYPE.File:
@@ -5221,34 +5473,53 @@ function FieldInput({
         }
       );
     case INPUT_FIELD_TYPE.DateTime: {
-      const dtLocalValue = typeof value === "string" && value.includes("T") ? value.slice(0, 16) : typeof value === "string" ? value : "";
-      return /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "datetime-local",
-          value: dtLocalValue,
-          onChange: (e) => {
-            if (!e.target.value) {
-              onValueChange(void 0);
-              return;
-            }
-            const date = new Date(e.target.value);
-            onValueChange(Number.isNaN(date.getTime()) ? e.target.value : date.toISOString());
-          },
-          required: field.is_required,
-          className: inputClass
+      const stringValue = typeof value === "string" ? value : "";
+      const [datePart, timePartRaw] = stringValue.includes("T") ? stringValue.split("T", 2) : [stringValue, ""];
+      const timePart = (timePartRaw ?? "").slice(0, 5);
+      const commit = (nextDate, nextTime) => {
+        if (!nextDate && !nextTime) {
+          onValueChange(void 0);
+          return;
         }
-      );
+        if (!nextDate) {
+          onValueChange(`${nextTime}`);
+          return;
+        }
+        const combined = `${nextDate}T${nextTime || "00:00"}`;
+        const parsed = new Date(combined);
+        onValueChange(Number.isNaN(parsed.getTime()) ? combined : parsed.toISOString());
+      };
+      return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-2", children: [
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            value: datePart ?? "",
+            onChange: (next) => commit(next, timePart),
+            placeholder: field.placeholder ?? "Select a date",
+            "aria-label": `${field.name} date`,
+            required: field.is_required
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            value: timePart,
+            onChange: (next) => commit(datePart ?? "", next),
+            placeholder: "Time",
+            "aria-label": `${field.name} time`
+          }
+        )
+      ] });
     }
     case INPUT_FIELD_TYPE.Time:
       return /* @__PURE__ */ jsx(
-        "input",
+        TimePicker,
         {
-          type: "time",
           value: typeof value === "string" ? value : "",
-          onChange: (e) => onValueChange(e.target.value || void 0),
+          onChange: (next) => onValueChange(next || void 0),
           required: field.is_required,
-          className: inputClass
+          placeholder: field.placeholder ?? "Select a time",
+          "aria-label": field.name
         }
       );
     case INPUT_FIELD_TYPE.MultiSelect:
@@ -5268,8 +5539,7 @@ function FieldInput({
           field,
           value,
           onValueChange,
-          classNames,
-          inputClass
+          classNames
         }
       );
     case INPUT_FIELD_TYPE.Address:
@@ -5438,38 +5708,39 @@ function DateRangeInput({
   field,
   value,
   onValueChange,
-  classNames,
-  inputClass
+  classNames
 }) {
   const range = value && typeof value === "object" ? value : {};
   const update = (key, v) => {
     const next = { ...range, [key]: v };
     onValueChange(next.start || next.end ? next : void 0);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-2 gap-3", classNames?.dateRangeInput), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 sm:grid-cols-2 gap-3", classNames?.dateRangeInput), children: [
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground mb-1 block", children: "Start" }),
       /* @__PURE__ */ jsx(
-        "input",
+        DatePicker,
         {
-          type: "date",
           value: range.start || "",
-          onChange: (e) => update("start", e.target.value),
+          onChange: (next) => update("start", next),
           required: field.is_required,
-          className: inputClass
+          placeholder: "Start date",
+          "aria-label": `${field.name} start date`,
+          maxDate: range.end ? /* @__PURE__ */ new Date(`${range.end}T00:00`) : void 0
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground mb-1 block", children: "End" }),
       /* @__PURE__ */ jsx(
-        "input",
+        DatePicker,
         {
-          type: "date",
           value: range.end || "",
-          onChange: (e) => update("end", e.target.value),
+          onChange: (next) => update("end", next),
           required: field.is_required,
-          className: inputClass
+          placeholder: "End date",
+          "aria-label": `${field.name} end date`,
+          minDate: range.start ? /* @__PURE__ */ new Date(`${range.start}T00:00`) : void 0
         }
       )
     ] })
@@ -5913,6 +6184,39 @@ function formatTime(timeStr) {
   }
   return timeStr;
 }
+function pluralizeUnit(unit, value) {
+  if (!unit) return value === 1 ? "day" : "days";
+  const v = value ?? 1;
+  if (unit === "minutes") return v === 1 ? "minute" : "minutes";
+  if (unit === "hours") return v === 1 ? "hour" : "hours";
+  if (unit === "days") return v === 1 ? "day" : "days";
+  if (unit === "weeks") return v === 1 ? "week" : "weeks";
+  if (unit === "months") return v === 1 ? "month" : "months";
+  return unit;
+}
+function formatStaySummary(slot, durationUnit, durationValue) {
+  const start = new Date(slot.start_time);
+  const end = new Date(slot.end_time);
+  const startLabel = start.toLocaleString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+  const endLabel = end.toLocaleString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+  const unitLabel = pluralizeUnit(durationUnit, durationValue);
+  if (durationValue !== void 0) {
+    return `${durationValue} ${unitLabel}: ${startLabel} \u2192 ${endLabel}`;
+  }
+  return `${startLabel} \u2192 ${endLabel}`;
+}
 function slotToValue(slot) {
   return `${slot.start_time}|${slot.end_time}`;
 }
@@ -5925,10 +6229,14 @@ function SlotPicker({
   onSlotSelect,
   groupByTimeOfDay = true,
   showPrice = true,
+  schedulingMode = "intraday",
+  durationUnit,
+  durationValue,
   emptyMessage = "No available slots",
   className,
   classNames
 }) {
+  const isMultiDay = schedulingMode === "multi_day";
   const { slots: fetched, isLoading } = useAvailableSlots(
     serviceId ?? null,
     date ?? null,
@@ -5959,7 +6267,7 @@ function SlotPicker({
       }
     );
   }
-  const groups = groupByTimeOfDay ? groupSlots(slots) : [{ label: "", slots }];
+  const groups = groupByTimeOfDay && !isMultiDay ? groupSlots(slots) : [{ label: "", slots }];
   const slotsByValue = /* @__PURE__ */ new Map();
   for (const slot of slots) {
     slotsByValue.set(slotToValue(slot), slot);
@@ -5969,37 +6277,74 @@ function SlotPicker({
     RadioGroup,
     {
       "data-cimplify-slot-picker": true,
-      className: cn(className, classNames?.root),
+      className: cn("flex flex-col gap-4", className, classNames?.root),
       value: selectedValue,
       onValueChange: (value) => {
         const slot = slotsByValue.get(value);
-        if (slot?.is_available) {
+        if (slot && slot.is_available !== false) {
           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"))
+      children: groups.map((group) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-cimplify-slot-group": true,
+          className: cn("flex flex-col gap-2", classNames?.group),
+          children: [
+            group.label && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-cimplify-slot-group-label": true,
+                className: cn(
+                  "text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground",
+                  classNames?.groupLabel
+                ),
+                children: group.label
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  isMultiDay ? "flex flex-col gap-2" : "grid grid-cols-3 sm:grid-cols-4 gap-2"
+                ),
+                children: 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 === false,
+                      "data-cimplify-slot": true,
+                      "data-selected": isSelected || void 0,
+                      "data-unavailable": slot.is_available === false || void 0,
+                      className: cn(
+                        "inline-flex items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[unavailable]:cursor-not-allowed data-[unavailable]:opacity-40 data-[unavailable]:line-through",
+                        isMultiDay && "justify-between text-left",
+                        classNames?.slot
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: isMultiDay ? formatStaySummary(slot, durationUnit, durationValue) : formatTime(slot.start_time) }),
+                        showPrice && slot.price && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-cimplify-slot-price": true,
+                            className: cn("text-xs opacity-70", classNames?.slotPrice),
+                            children: /* @__PURE__ */ jsx(Price, { amount: slot.price })
+                          }
+                        )
+                      ]
+                    },
+                    value
+                  );
+                })
+              }
+            )
+          ]
+        },
+        group.label || "all"
+      ))
     }
   );
 }
@@ -6023,6 +6368,9 @@ function DateSlotPicker({
   onSlotSelect,
   availability: availabilityProp,
   showPrice = true,
+  schedulingMode,
+  durationUnit,
+  durationValue,
   className,
   classNames
 }) {
@@ -6081,55 +6429,80 @@ function DateSlotPicker({
       value: selectedDate,
       onValueChange: handleDateChange,
       "data-cimplify-date-slot-picker": true,
-      className: cn(className, classNames?.root),
+      className: cn("flex flex-col gap-4", 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
-          );
-        }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-cimplify-date-nav": true,
+            className: cn("flex items-center justify-end gap-2", classNames?.nav),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handlePrev,
+                  disabled: offset === 0,
+                  "aria-label": "Previous dates",
+                  "data-cimplify-date-nav-prev": true,
+                  className: cn(
+                    "grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+                    classNames?.navButton
+                  ),
+                  children: "\u2190"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleNext,
+                  "aria-label": "Next dates",
+                  "data-cimplify-date-nav-next": true,
+                  className: cn(
+                    "grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                    classNames?.navButton
+                  ),
+                  children: "\u2192"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Tabs.List,
+          {
+            "data-cimplify-date-strip": true,
+            className: cn("grid grid-cols-7 gap-1 sm:gap-2", 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: cn(
+                    "flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40",
+                    classNames?.dateButton
+                  ),
+                  children: formatDate(date)
+                },
+                date
+              );
+            })
+          }
+        ),
         availabilityLoading && /* @__PURE__ */ jsx(
           "div",
           {
             "data-cimplify-date-slot-loading": true,
             "aria-busy": "true",
-            className: classNames?.loading
+            className: cn("h-32 rounded-md bg-muted/40 animate-pulse", classNames?.loading)
           }
         ),
         /* @__PURE__ */ jsx("div", { "data-cimplify-date-slots": true, className: classNames?.slots, children: /* @__PURE__ */ jsx(
@@ -6140,7 +6513,10 @@ function DateSlotPicker({
             participantCount,
             selectedSlot,
             onSlotSelect: handleSlotSelect,
-            showPrice
+            showPrice,
+            schedulingMode,
+            durationUnit,
+            durationValue
           }
         ) })
       ]
@@ -7099,12 +7475,11 @@ function ProductSheet({
           )
         ] }),
         fullProduct.description && /* @__PURE__ */ jsx(
-          "p",
+          "div",
           {
             "data-cimplify-product-sheet-description": true,
-            className: classNames?.description,
-            style: { margin: 0 },
-            children: fullProduct.description
+            className: cn("text-sm leading-relaxed text-muted-foreground [&_p]:m-0 [&_p+p]:mt-2", classNames?.description),
+            dangerouslySetInnerHTML: { __html: fullProduct.description }
           }
         ),
         /* @__PURE__ */ jsx(
@@ -7135,14 +7510,14 @@ function CardImage({
     "16/9": "aspect-[16/9]"
   }[aspectRatio];
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-card-image": true, className: cn("relative overflow-hidden bg-muted", aspectClass, className), children: [
-    renderImage ? renderImage({ src, alt, className: "w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]" }) : /* @__PURE__ */ jsx(
+    renderImage ? renderImage({ src, alt, className: "w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]" }) : src ? /* @__PURE__ */ jsx(
       "img",
       {
         src,
         alt,
         className: "w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
       }
-    ),
+    ) : null,
     children
   ] });
 }
@@ -7594,7 +7969,7 @@ function CompactServiceCard({
   const hasBillingPlans = product.billing_plans && product.billing_plans.length > 0;
   const href = `/products/${product.slug}`;
   const content = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : image ? /* @__PURE__ */ jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) : null }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-foreground leading-tight truncate", children: product.name }),
       product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: product.description }),
@@ -13226,4 +13601,4 @@ function SparkleIcon({ className }) {
   );
 }
 
-export { AccommodationCard, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleProductCard, BundleProductLayout, BundleSelector, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, CurrencySelector, CustomAttributesTable, CustomerInputFields, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, FeaturedCollectionLayout, FoodProductCard, FoodProductLayout, InventoryBadge, LeaseServiceCard, LocationPicker, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, ServiceProductLayout, SessionMessageBanner, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, StoreNav, SubscriptionCard, TagPills, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleProductCard, BundleProductLayout, BundleSelector, CardImage, CardShell, CardVariant, CartDrawer, CartDrawerProvider, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, ChatWidget, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, CurrencySelector, CustomAttributesTable, CustomerInputFields, DatePicker, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, FeaturedCollectionLayout, FoodProductCard, FoodProductLayout, InventoryBadge, LeaseServiceCard, LocationPicker, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, ServiceProductLayout, SessionMessageBanner, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, StoreNav, SubscriptionCard, TagPills, TimePicker, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCartDrawer, useCategories, useChat, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };