@cimplify/sdk 0.46.3 → 0.48.0

package/dist/react.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { DURATION_UNIT, getVariantDisplayName, INPUT_FIELD_TYPE, PRODUCT_TYPE, RENDER_HINT } from './chunk-NRDRVZ62.mjs';
 export { getVariantDisplayName } from './chunk-NRDRVZ62.mjs';
-import { createCimplifyClient } from './chunk-WUIERJ6J.mjs';
-import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-CKRMA5F7.mjs';
+import { createCimplifyClient } from './chunk-MBR2DBEN.mjs';
+import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-OFNVLUH4.mjs';
 import { formatPrice, parsePrice, getUnitPriceAtQuantity, isOnSale, getDiscountPercentage, getBasePrice, getPriceRange, formatPriceRange } from './chunk-XY2DFX5K.mjs';
 import { isSupportedCurrency } from './chunk-Z2AYLZDF.mjs';
 import React10, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useId, useSyncExternalStore } from 'react';
@@ -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';
@@ -621,7 +624,8 @@ function useCollectionStore(collection) {
 }
 
 // src/react/hooks/use-cart.ts
-var CART_STORAGE_PREFIX = "cimplify:cart:v3";
+var LEGACY_CART_STORAGE_PREFIX = "cimplify:cart:v3";
+var legacyCachesPurged = false;
 var cartStores = /* @__PURE__ */ new Map();
 var ROLLBACK_VISIBLE_DELAY_MS = 3e3;
 function clearAllCartStores() {
@@ -631,34 +635,35 @@ function clearAllCartStores() {
       clearTimeout(handle);
     }
     entry.failedOpRemovers.clear();
-    if (entry.persistTimer) {
-      clearTimeout(entry.persistTimer);
-      entry.persistTimer = null;
-    }
   }
   cartStores.clear();
 }
 function emptyBase(currency, isLoading = true) {
   return { items: [], subtotal: 0, tax: 0, total: 0, currency, isLoading };
 }
-function advanceBaseWithPatch(entry, patch) {
-  const current = entry.collection.getBase() ?? emptyBase(entry.currency, false);
-  entry.collection.setBase({ ...applyCartPatch(current, patch), isLoading: false });
-  persistBase(entry);
-}
-function buildStoreKey(client, locationId, isDemoMode) {
+function buildStoreKey(client, locationId) {
   return [
-    client.getPublicKey() || "__demo__",
-    locationId || "__no_location__",
-    isDemoMode ? "demo" : "live"
+    client.getPublicKey() || "__no_public_key__",
+    locationId || "__no_location__"
   ].join(":");
 }
-function buildStorageKey(storeKey) {
-  return `${CART_STORAGE_PREFIX}:${storeKey}`;
-}
-function stripInternalItemMetadata(item) {
-  const { _lineKey, isOptimistic, ...rest } = item;
-  return rest;
+function purgeLegacyCartCachesOnce() {
+  if (legacyCachesPurged) return;
+  legacyCachesPurged = true;
+  if (typeof window === "undefined" || !window.localStorage) return;
+  try {
+    const keys = [];
+    for (let i = 0; i < window.localStorage.length; i += 1) {
+      const key = window.localStorage.key(i);
+      if (key && key.startsWith(LEGACY_CART_STORAGE_PREFIX)) {
+        keys.push(key);
+      }
+    }
+    for (const key of keys) {
+      window.localStorage.removeItem(key);
+    }
+  } catch {
+  }
 }
 function toProductFromServerItem(item, businessId) {
   return {
@@ -753,69 +758,13 @@ function deriveView(base, ops) {
     pendingOpCount: ops.length
   };
 }
-function persistBase(entry) {
-  if (typeof window === "undefined" || !window.localStorage) return;
-  if (!entry.isDemoMode) return;
-  if (entry.persistTimer) return;
-  entry.persistTimer = setTimeout(() => {
-    entry.persistTimer = null;
-    if (typeof window === "undefined" || !window.localStorage) return;
-    const base = entry.collection.getBase();
-    if (!base) return;
-    try {
-      window.localStorage.setItem(
-        entry.storageKey,
-        JSON.stringify({
-          items: base.items.map((item) => stripInternalItemMetadata(item)),
-          subtotal: base.subtotal,
-          tax: base.tax,
-          total: base.total,
-          currency: base.currency
-        })
-      );
-    } catch {
-    }
-  }, 100);
-}
-function hydrateFromStorage(entry) {
-  if (typeof window === "undefined" || !window.localStorage) return;
-  if (!entry.isDemoMode) {
-    try {
-      window.localStorage.removeItem(entry.storageKey);
-    } catch {
-    }
-    return;
-  }
-  try {
-    const raw = window.localStorage.getItem(entry.storageKey);
-    if (!raw) return;
-    const parsed = JSON.parse(raw);
-    if (!parsed || !Array.isArray(parsed.items)) return;
-    const items = parsed.items.map((item) => attachInternalItemMetadata(item));
-    entry.collection.setBase({
-      items,
-      subtotal: toNumber(parsed.subtotal),
-      tax: toNumber(parsed.tax),
-      total: toNumber(parsed.total),
-      currency: typeof parsed.currency === "string" && parsed.currency ? parsed.currency : entry.currency,
-      isLoading: !entry.isDemoMode
-    });
-  } catch {
-  }
-}
 async function syncFromServer(entry) {
-  if (entry.isDemoMode) {
-    const base = entry.collection.getBase() ?? emptyBase(entry.currency);
-    entry.collection.setBase({ ...base, isLoading: false });
-    return;
-  }
   if (entry.syncing) return;
   entry.syncing = true;
   try {
     const result = await entry.client.cart.get();
     if (!result.ok) throw result.error;
     entry.collection.setBase(mapServerCart(result.value, entry.currency));
-    persistBase(entry);
   } finally {
     entry.syncing = false;
   }
@@ -837,8 +786,9 @@ function scheduleFailedOpRemoval(entry, opId) {
   entry.failedOpRemovers.add(handle);
 }
 function getOrCreateStore(params) {
-  const { client, locationId, isDemoMode, currency, optimisticEnabled } = params;
-  const storeKey = buildStoreKey(client, locationId, isDemoMode);
+  const { client, locationId, currency, optimisticEnabled } = params;
+  purgeLegacyCartCachesOnce();
+  const storeKey = buildStoreKey(client, locationId);
   const existing = cartStores.get(storeKey);
   if (existing) {
     existing.optimisticEnabled = optimisticEnabled;
@@ -852,14 +802,11 @@ function getOrCreateStore(params) {
   const entry = {
     collection,
     client,
-    storageKey: buildStorageKey(storeKey),
     locationId,
     currency,
-    isDemoMode,
     optimisticEnabled,
     initialized: false,
     initializePromise: null,
-    persistTimer: null,
     syncing: false,
     failedOpRemovers: /* @__PURE__ */ new Set()
   };
@@ -872,12 +819,6 @@ async function ensureInitialized(entry) {
     return;
   }
   entry.initialized = true;
-  hydrateFromStorage(entry);
-  if (entry.isDemoMode) {
-    const base = entry.collection.getBase() ?? emptyBase(entry.currency);
-    entry.collection.setBase({ ...base, isLoading: false });
-    return;
-  }
   entry.initializePromise = syncFromServer(entry).catch(() => {
     const base = entry.collection.getBase() ?? emptyBase(entry.currency);
     entry.collection.setBase({ ...base, isLoading: false });
@@ -891,7 +832,7 @@ async function maybeResolveQuoteId(entry, product, quantity, options) {
   const requiresQuote = Boolean(
     options.variantId || addOnOptionIds && addOnOptionIds.length > 0 || options.bundleSelections && options.bundleSelections.length > 0 || options.compositeSelections && options.compositeSelections.length > 0
   );
-  if (!requiresQuote || entry.isDemoMode) return void 0;
+  if (!requiresQuote) return void 0;
   const quoteResult = await entry.client.catalogue.fetchQuote({
     product_id: product.id,
     quantity,
@@ -931,10 +872,6 @@ async function performAddItem(entry, product, quantity, options) {
   });
   const idempotencyKey = `idem_${typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}_${Math.random().toString(36).slice(2, 10)}`}`;
   const patch = { kind: "add_item", tempItem, lineKey };
-  if (entry.isDemoMode) {
-    advanceBaseWithPatch(entry, patch);
-    return;
-  }
   const useOptimistic = entry.optimisticEnabled;
   const opId = useOptimistic ? entry.collection.enqueue(patch, idempotencyKey) : null;
   try {
@@ -973,10 +910,6 @@ async function performAddItem(entry, product, quantity, options) {
 async function performRemoveItem(entry, itemId) {
   const idempotencyKey = "";
   const patch = { kind: "remove_item", itemId };
-  if (entry.isDemoMode) {
-    advanceBaseWithPatch(entry, patch);
-    return;
-  }
   const useOptimistic = entry.optimisticEnabled;
   const opId = useOptimistic ? entry.collection.enqueue(patch, idempotencyKey) : null;
   try {
@@ -1001,10 +934,6 @@ async function performUpdateQuantity(entry, itemId, quantity) {
   const resolved = clampQuantity(quantity);
   const idempotencyKey = "";
   const patch = { kind: "set_quantity", itemId, quantity: resolved };
-  if (entry.isDemoMode) {
-    advanceBaseWithPatch(entry, patch);
-    return;
-  }
   const useOptimistic = entry.optimisticEnabled;
   const opId = useOptimistic ? entry.collection.enqueue(patch, idempotencyKey) : null;
   try {
@@ -1025,10 +954,6 @@ async function performUpdateQuantity(entry, itemId, quantity) {
 async function performClear(entry) {
   const idempotencyKey = "";
   const patch = { kind: "clear" };
-  if (entry.isDemoMode) {
-    advanceBaseWithPatch(entry, patch);
-    return;
-  }
   const useOptimistic = entry.optimisticEnabled;
   const opId = useOptimistic ? entry.collection.enqueue(patch, idempotencyKey) : null;
   try {
@@ -1059,18 +984,16 @@ function useCart(options = {}) {
     throw new Error("useCart must be used within CimplifyProvider or passed { client }.");
   }
   const locationId = options.locationId ?? client.getLocationId();
-  const isDemoMode = options.demoMode ?? context?.isDemoMode ?? client.getPublicKey().trim().length === 0;
   const currency = options.currency ?? context?.currency ?? "USD";
   const optimisticEnabled = context?.optimistic ?? true;
   const entry = useMemo(
     () => getOrCreateStore({
       client,
       locationId,
-      isDemoMode,
       currency,
       optimisticEnabled
     }),
-    [client, currency, isDemoMode, locationId, optimisticEnabled]
+    [client, currency, locationId, optimisticEnabled]
   );
   const view = useCollectionStore(entry.collection);
   useEffect(() => {
@@ -1230,7 +1153,6 @@ function CimplifyProvider({
   useEffect(() => {
     onLocationChangeRef.current = onLocationChange;
   }, [onLocationChange]);
-  const isDemoMode = resolvedClient.getPublicKey().trim().length === 0;
   const baseCurrency = business?.default_currency || DEFAULT_CURRENCY;
   const [displayCurrencyOverride, setDisplayCurrencyOverride] = useState(
     () => getStoredDisplayCurrency()
@@ -1252,7 +1174,7 @@ function CimplifyProvider({
     [baseCurrency]
   );
   useEffect(() => {
-    if (displayCurrency === baseCurrency || isDemoMode) {
+    if (displayCurrency === baseCurrency) {
       setFxRate(null);
       return;
     }
@@ -1275,7 +1197,7 @@ function CimplifyProvider({
       cancelled = true;
       clearInterval(intervalId);
     };
-  }, [resolvedClient, baseCurrency, displayCurrency, isDemoMode]);
+  }, [resolvedClient, baseCurrency, displayCurrency]);
   const convertPrice = useCallback(
     (amount) => {
       const num = typeof amount === "string" ? parseFloat(amount) : amount;
@@ -1302,17 +1224,6 @@ function CimplifyProvider({
     let cancelled = false;
     async function bootstrap() {
       setIsReady(false);
-      if (isDemoMode) {
-        if (!cancelled) {
-          setBusiness(null);
-          setLocations([]);
-          setCurrentLocationState(null);
-          resolvedClient.setLocationId(null);
-          setStoredLocationId(null);
-          setIsReady(true);
-        }
-        return;
-      }
       const [businessResult, locationsResult] = await Promise.all([
         resolvedClient.business.getInfo(),
         resolvedClient.business.getLocations()
@@ -1353,7 +1264,7 @@ function CimplifyProvider({
     return () => {
       cancelled = true;
     };
-  }, [resolvedClient, isDemoMode]);
+  }, [resolvedClient]);
   const clientContextValue = useMemo(
     () => ({
       client: resolvedClient,
@@ -1362,7 +1273,6 @@ function CimplifyProvider({
       country: business?.country_code || DEFAULT_COUNTRY,
       locations,
       isReady,
-      isDemoMode,
       baseCurrency,
       optimistic
     }),
@@ -1372,7 +1282,6 @@ function CimplifyProvider({
       baseCurrency,
       locations,
       isReady,
-      isDemoMode,
       optimistic
     ]
   );
@@ -1427,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) {
@@ -1480,7 +1383,6 @@ function CimplifyCheckout({
   onError,
   onStatusChange,
   appearance,
-  demoMode,
   className
 }) {
   const resolvedOrderTypes = useMemo(
@@ -1508,8 +1410,6 @@ function CimplifyCheckout({
   const initialAppearanceRef = useRef(appearance);
   const hasWarnedInlineAppearanceRef = useRef(false);
   const isMountedRef = useRef(true);
-  const demoRunRef = useRef(0);
-  const isDemoCheckout = demoMode ?? client.getPublicKey().trim().length === 0;
   const isTestMode = client.isTestMode();
   const cimplifyCtx = useOptionalCimplify();
   const fxOptions = useMemo(() => {
@@ -1524,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 = {}) => {
@@ -1554,15 +1453,6 @@ function CimplifyCheckout({
   useEffect(() => {
     let cancelled = false;
     async function bootstrap() {
-      if (isDemoCheckout) {
-        if (!cancelled) {
-          setResolvedBusinessId(businessId ?? null);
-          setResolvedCartId(cartId ?? "cart_demo");
-          setIsInitializing(false);
-          setErrorMessage(null);
-        }
-        return;
-      }
       const needsBusinessResolve = !businessId;
       const needsCartResolve = !cartId;
       if (!needsBusinessResolve && !needsCartResolve) {
@@ -1630,11 +1520,10 @@ function CimplifyCheckout({
     return () => {
       cancelled = true;
     };
-  }, [businessId, cartId, client, isDemoCheckout]);
+  }, [businessId, cartId, client]);
   useEffect(() => {
     return () => {
       isMountedRef.current = false;
-      demoRunRef.current += 1;
       activeCheckoutRef.current?.abort();
       activeCheckoutRef.current = null;
     };
@@ -1651,42 +1540,6 @@ function CimplifyCheckout({
     setErrorMessage(null);
     setIsSubmitting(true);
     emitStatus("preparing", { display_text: statusToLabel("preparing") });
-    if (isDemoCheckout) {
-      const runId = demoRunRef.current + 1;
-      demoRunRef.current = runId;
-      const wait = async (ms) => {
-        await new Promise((resolve) => setTimeout(resolve, ms));
-        return isMountedRef.current && runId === demoRunRef.current;
-      };
-      try {
-        if (!await wait(400)) return;
-        emitStatus("processing", { display_text: statusToLabel("processing") });
-        if (!await wait(900)) return;
-        emitStatus("polling", { display_text: statusToLabel("polling") });
-        if (!await wait(1200)) return;
-        const result = {
-          success: true,
-          order: {
-            id: `ord_demo_${Date.now()}`,
-            order_number: `DEMO-${Math.random().toString(36).slice(2, 8).toUpperCase()}`,
-            status: "confirmed",
-            total: "0.00",
-            currency: "USD"
-          }
-        };
-        emitStatus("success", {
-          order_id: result.order?.id,
-          order_number: result.order?.order_number,
-          display_text: statusToLabel("success")
-        });
-        onComplete(result);
-      } finally {
-        if (isMountedRef.current && runId === demoRunRef.current) {
-          setIsSubmitting(false);
-        }
-      }
-      return;
-    }
     if (!elementsRef.current) {
       const message = "Checkout is still initializing. Please try again.";
       setErrorMessage(message);
@@ -1721,7 +1574,7 @@ function CimplifyCheckout({
     }
   });
   useEffect(() => {
-    if (isDemoCheckout || !resolvedBusinessId) {
+    if (!resolvedBusinessId) {
       elementsRef.current = null;
       return;
     }
@@ -1762,7 +1615,6 @@ function CimplifyCheckout({
   }, [
     client,
     resolvedBusinessId,
-    isDemoCheckout,
     resolvedOrderTypes,
     resolvedDefaultOrderType,
     submitLabel
@@ -1774,15 +1626,15 @@ 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..." }) });
   }
-  if (!isDemoCheckout && (!resolvedBusinessId || !resolvedCartId)) {
+  if (!resolvedBusinessId || !resolvedCartId) {
     return /* @__PURE__ */ jsx("div", { className, "data-cimplify-checkout": "", children: /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { fontSize: 13, color: colors.error }, children: errorMessage || "Unable to initialize checkout. Please refresh and try again." }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, "data-cimplify-checkout": "", children: [
-    isTestMode && !isDemoCheckout && /* @__PURE__ */ jsx(
+    isTestMode && /* @__PURE__ */ jsx(
       "p",
       {
         "data-cimplify-test-mode": "",
@@ -1795,9 +1647,9 @@ function CimplifyCheckout({
         children: "Test mode - no real charges"
       }
     ),
-    /* @__PURE__ */ jsx("div", { "data-cimplify-section": "checkout", children: /* @__PURE__ */ jsx("div", { ref: isDemoCheckout ? void 0 : 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 })
+    /* @__PURE__ */ jsx("div", { "data-cimplify-section": "checkout", children: /* @__PURE__ */ jsx("div", { ref: checkoutMountRef }) }),
+    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) {
@@ -5145,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,
@@ -5331,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:
@@ -5365,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:
@@ -5412,8 +5539,7 @@ function FieldInput({
           field,
           value,
           onValueChange,
-          classNames,
-          inputClass
+          classNames
         }
       );
     case INPUT_FIELD_TYPE.Address:
@@ -5582,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
         }
       )
     ] })
@@ -6057,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}`;
 }
@@ -6069,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,
@@ -6103,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);
@@ -6136,7 +6300,7 @@ function SlotPicker({
               "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) }),
+                /* @__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: classNames?.slotPrice, children: /* @__PURE__ */ jsx(Price, { amount: slot.price }) })
               ]
             },
@@ -6167,6 +6331,9 @@ function DateSlotPicker({
   onSlotSelect,
   availability: availabilityProp,
   showPrice = true,
+  schedulingMode,
+  durationUnit,
+  durationValue,
   className,
   classNames
 }) {
@@ -6284,7 +6451,10 @@ function DateSlotPicker({
             participantCount,
             selectedSlot,
             onSlotSelect: handleSlotSelect,
-            showPrice
+            showPrice,
+            schedulingMode,
+            durationUnit,
+            durationValue
           }
         ) })
       ]
@@ -13370,4 +13540,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 };