@cimplify/sdk 0.94.2 → 0.96.0

package/dist/testing.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkRQMCRU4C_js = require('./chunk-RQMCRU4C.js');
+var chunkWEEGNH7K_js = require('./chunk-WEEGNH7K.js');
 require('./chunk-FECGCIVV.js');
 require('./chunk-XREIZ56K.js');
-require('./chunk-QLGZIBRO.js');
+require('./chunk-W5PH7SPK.js');
 require('./chunk-VEOAMBEX.js');
 require('./chunk-PTPOQVXS.js');
 require('./chunk-AETVRBKI.js');
@@ -11,20 +11,20 @@ require('./chunk-OWW5GUSB.js');
 var zod = require('zod');
 
 var PUBLIC_SCHEMAS = {
-  Brand: chunkRQMCRU4C_js.BrandSchema,
-  AddItemPayload: chunkRQMCRU4C_js.AddItemPayloadSchema,
-  Cart: chunkRQMCRU4C_js.CartSchema,
-  CartItem: chunkRQMCRU4C_js.CartItemSchema,
-  CartPricing: chunkRQMCRU4C_js.CartPricingSchema,
-  CheckoutBody: chunkRQMCRU4C_js.CheckoutBodySchema,
-  CheckoutResponse: chunkRQMCRU4C_js.CheckoutResponseSchema,
-  VariantInfo: chunkRQMCRU4C_js.VariantInfoSchema
+  Brand: chunkWEEGNH7K_js.BrandSchema,
+  AddItemPayload: chunkWEEGNH7K_js.AddItemPayloadSchema,
+  Cart: chunkWEEGNH7K_js.CartSchema,
+  CartItem: chunkWEEGNH7K_js.CartItemSchema,
+  CartPricing: chunkWEEGNH7K_js.CartPricingSchema,
+  CheckoutBody: chunkWEEGNH7K_js.CheckoutBodySchema,
+  CheckoutResponse: chunkWEEGNH7K_js.CheckoutResponseSchema,
+  VariantInfo: chunkWEEGNH7K_js.VariantInfoSchema
 };
 function exportJsonSchemas() {
   const out = {};
   for (const [name, schema] of Object.entries(PUBLIC_SCHEMAS)) {
-    const meta = chunkRQMCRU4C_js.cimplifyRegistry.get(schema);
-    const json = zod.z.toJSONSchema(schema, { metadata: chunkRQMCRU4C_js.cimplifyRegistry });
+    const meta = chunkWEEGNH7K_js.cimplifyRegistry.get(schema);
+    const json = zod.z.toJSONSchema(schema, { metadata: chunkWEEGNH7K_js.cimplifyRegistry });
     if (meta) {
       json.$id = meta.id;
       json["x-cimplify-version"] = meta.version;
@@ -36,16 +36,16 @@ function exportJsonSchemas() {
 function listRegisteredSchemas() {
   const entries = [];
   for (const schema of [
-    chunkRQMCRU4C_js.BrandSchema,
-    chunkRQMCRU4C_js.AddItemPayloadSchema,
-    chunkRQMCRU4C_js.CartSchema,
-    chunkRQMCRU4C_js.CartItemSchema,
-    chunkRQMCRU4C_js.CartPricingSchema,
-    chunkRQMCRU4C_js.CheckoutBodySchema,
-    chunkRQMCRU4C_js.CheckoutResponseSchema,
-    chunkRQMCRU4C_js.VariantInfoSchema
+    chunkWEEGNH7K_js.BrandSchema,
+    chunkWEEGNH7K_js.AddItemPayloadSchema,
+    chunkWEEGNH7K_js.CartSchema,
+    chunkWEEGNH7K_js.CartItemSchema,
+    chunkWEEGNH7K_js.CartPricingSchema,
+    chunkWEEGNH7K_js.CheckoutBodySchema,
+    chunkWEEGNH7K_js.CheckoutResponseSchema,
+    chunkWEEGNH7K_js.VariantInfoSchema
   ]) {
-    const meta = chunkRQMCRU4C_js.cimplifyRegistry.get(schema);
+    const meta = chunkWEEGNH7K_js.cimplifyRegistry.get(schema);
     if (meta) entries.push({ schema, meta });
   }
   return entries;
@@ -53,227 +53,227 @@ function listRegisteredSchemas() {
 
 Object.defineProperty(exports, "AddItemPayloadSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.AddItemPayloadSchema; }
+  get: function () { return chunkWEEGNH7K_js.AddItemPayloadSchema; }
 });
 Object.defineProperty(exports, "AddOnDetailsSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.AddOnDetailsSchema; }
+  get: function () { return chunkWEEGNH7K_js.AddOnDetailsSchema; }
 });
 Object.defineProperty(exports, "AddOnGroupDetailsSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.AddOnGroupDetailsSchema; }
+  get: function () { return chunkWEEGNH7K_js.AddOnGroupDetailsSchema; }
 });
 Object.defineProperty(exports, "AddOnInDetailsSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.AddOnInDetailsSchema; }
+  get: function () { return chunkWEEGNH7K_js.AddOnInDetailsSchema; }
 });
 Object.defineProperty(exports, "AddOnOptionDetailsSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.AddOnOptionDetailsSchema; }
+  get: function () { return chunkWEEGNH7K_js.AddOnOptionDetailsSchema; }
 });
 Object.defineProperty(exports, "AuthorizationTypeSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.AuthorizationTypeSchema; }
+  get: function () { return chunkWEEGNH7K_js.AuthorizationTypeSchema; }
 });
 Object.defineProperty(exports, "BrandContactSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandContactSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandContactSchema; }
 });
 Object.defineProperty(exports, "BrandFaqSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandFaqSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandFaqSchema; }
 });
 Object.defineProperty(exports, "BrandHeroSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandHeroSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandHeroSchema; }
 });
 Object.defineProperty(exports, "BrandNavLinkSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandNavLinkSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandNavLinkSchema; }
 });
 Object.defineProperty(exports, "BrandPolicyPageSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandPolicyPageSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandPolicyPageSchema; }
 });
 Object.defineProperty(exports, "BrandPolicySectionSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandPolicySectionSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandPolicySectionSchema; }
 });
 Object.defineProperty(exports, "BrandSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandSchema; }
 });
 Object.defineProperty(exports, "BrandSocialSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BrandSocialSchema; }
+  get: function () { return chunkWEEGNH7K_js.BrandSocialSchema; }
 });
 Object.defineProperty(exports, "BundleResolvedSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BundleResolvedSchema; }
+  get: function () { return chunkWEEGNH7K_js.BundleResolvedSchema; }
 });
 Object.defineProperty(exports, "BundleSelectionInputSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.BundleSelectionInputSchema; }
+  get: function () { return chunkWEEGNH7K_js.BundleSelectionInputSchema; }
 });
 Object.defineProperty(exports, "CartItemSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CartItemSchema; }
+  get: function () { return chunkWEEGNH7K_js.CartItemSchema; }
 });
 Object.defineProperty(exports, "CartPricingSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CartPricingSchema; }
+  get: function () { return chunkWEEGNH7K_js.CartPricingSchema; }
 });
 Object.defineProperty(exports, "CartSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CartSchema; }
+  get: function () { return chunkWEEGNH7K_js.CartSchema; }
 });
 Object.defineProperty(exports, "CheckoutBodySchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CheckoutBodySchema; }
+  get: function () { return chunkWEEGNH7K_js.CheckoutBodySchema; }
 });
 Object.defineProperty(exports, "CheckoutCustomerSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CheckoutCustomerSchema; }
+  get: function () { return chunkWEEGNH7K_js.CheckoutCustomerSchema; }
 });
 Object.defineProperty(exports, "CheckoutResponseSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CheckoutResponseSchema; }
+  get: function () { return chunkWEEGNH7K_js.CheckoutResponseSchema; }
 });
 Object.defineProperty(exports, "ChosenPriceSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.ChosenPriceSchema; }
+  get: function () { return chunkWEEGNH7K_js.ChosenPriceSchema; }
 });
 Object.defineProperty(exports, "CompositeResolvedSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CompositeResolvedSchema; }
+  get: function () { return chunkWEEGNH7K_js.CompositeResolvedSchema; }
 });
 Object.defineProperty(exports, "CompositeSelectionInputSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CompositeSelectionInputSchema; }
+  get: function () { return chunkWEEGNH7K_js.CompositeSelectionInputSchema; }
 });
 Object.defineProperty(exports, "CountryCodeSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CountryCodeSchema; }
+  get: function () { return chunkWEEGNH7K_js.CountryCodeSchema; }
 });
 Object.defineProperty(exports, "CurrencyCodeSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CurrencyCodeSchema; }
+  get: function () { return chunkWEEGNH7K_js.CurrencyCodeSchema; }
 });
 Object.defineProperty(exports, "CustomerInputValueSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.CustomerInputValueSchema; }
+  get: function () { return chunkWEEGNH7K_js.CustomerInputValueSchema; }
 });
 Object.defineProperty(exports, "DiscountDetailsSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.DiscountDetailsSchema; }
+  get: function () { return chunkWEEGNH7K_js.DiscountDetailsSchema; }
 });
 Object.defineProperty(exports, "IsoDateTimeSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.IsoDateTimeSchema; }
+  get: function () { return chunkWEEGNH7K_js.IsoDateTimeSchema; }
 });
 Object.defineProperty(exports, "LineTypeSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.LineTypeSchema; }
+  get: function () { return chunkWEEGNH7K_js.LineTypeSchema; }
 });
 Object.defineProperty(exports, "LocaleSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.LocaleSchema; }
+  get: function () { return chunkWEEGNH7K_js.LocaleSchema; }
 });
 Object.defineProperty(exports, "MoneyLooseSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.MoneyLooseSchema; }
+  get: function () { return chunkWEEGNH7K_js.MoneyLooseSchema; }
 });
 Object.defineProperty(exports, "MoneySchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.MoneySchema; }
+  get: function () { return chunkWEEGNH7K_js.MoneySchema; }
 });
 Object.defineProperty(exports, "NextActionSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.NextActionSchema; }
+  get: function () { return chunkWEEGNH7K_js.NextActionSchema; }
 });
 Object.defineProperty(exports, "PhoneE164Schema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.PhoneE164Schema; }
+  get: function () { return chunkWEEGNH7K_js.PhoneE164Schema; }
 });
 Object.defineProperty(exports, "ProductTypeSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.ProductTypeSchema; }
+  get: function () { return chunkWEEGNH7K_js.ProductTypeSchema; }
 });
 Object.defineProperty(exports, "SchemaViolationError", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.SchemaViolationError; }
+  get: function () { return chunkWEEGNH7K_js.SchemaViolationError; }
 });
 Object.defineProperty(exports, "SeedNameSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.SeedNameSchema; }
+  get: function () { return chunkWEEGNH7K_js.SeedNameSchema; }
 });
 Object.defineProperty(exports, "SelectedAddOnOptionSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.SelectedAddOnOptionSchema; }
+  get: function () { return chunkWEEGNH7K_js.SelectedAddOnOptionSchema; }
 });
 Object.defineProperty(exports, "ServiceStatusSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.ServiceStatusSchema; }
+  get: function () { return chunkWEEGNH7K_js.ServiceStatusSchema; }
 });
 Object.defineProperty(exports, "TimestampSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.TimestampSchema; }
+  get: function () { return chunkWEEGNH7K_js.TimestampSchema; }
 });
 Object.defineProperty(exports, "VariantDetailsSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.VariantDetailsSchema; }
+  get: function () { return chunkWEEGNH7K_js.VariantDetailsSchema; }
 });
 Object.defineProperty(exports, "VariantDisplayAttributeSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.VariantDisplayAttributeSchema; }
+  get: function () { return chunkWEEGNH7K_js.VariantDisplayAttributeSchema; }
 });
 Object.defineProperty(exports, "VariantInfoSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.VariantInfoSchema; }
+  get: function () { return chunkWEEGNH7K_js.VariantInfoSchema; }
 });
 Object.defineProperty(exports, "assertAddItemPayload", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.assertAddItemPayload; }
+  get: function () { return chunkWEEGNH7K_js.assertAddItemPayload; }
 });
 Object.defineProperty(exports, "assertBrand", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.assertBrand; }
+  get: function () { return chunkWEEGNH7K_js.assertBrand; }
 });
 Object.defineProperty(exports, "assertCart", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.assertCart; }
+  get: function () { return chunkWEEGNH7K_js.assertCart; }
 });
 Object.defineProperty(exports, "assertCartItem", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.assertCartItem; }
+  get: function () { return chunkWEEGNH7K_js.assertCartItem; }
 });
 Object.defineProperty(exports, "assertCheckoutBody", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.assertCheckoutBody; }
+  get: function () { return chunkWEEGNH7K_js.assertCheckoutBody; }
 });
 Object.defineProperty(exports, "assertCheckoutResponse", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.assertCheckoutResponse; }
+  get: function () { return chunkWEEGNH7K_js.assertCheckoutResponse; }
 });
 Object.defineProperty(exports, "cimplifyRegistry", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.cimplifyRegistry; }
+  get: function () { return chunkWEEGNH7K_js.cimplifyRegistry; }
 });
 Object.defineProperty(exports, "createTestClient", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.createTestClient; }
+  get: function () { return chunkWEEGNH7K_js.createTestClient; }
 });
 Object.defineProperty(exports, "fixtures", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.fixtures; }
+  get: function () { return chunkWEEGNH7K_js.fixtures; }
 });
 Object.defineProperty(exports, "makeAssertion", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.makeAssertion; }
+  get: function () { return chunkWEEGNH7K_js.makeAssertion; }
 });
 Object.defineProperty(exports, "registerSchema", {
   enumerable: true,
-  get: function () { return chunkRQMCRU4C_js.registerSchema; }
+  get: function () { return chunkWEEGNH7K_js.registerSchema; }
 });
 exports.exportJsonSchemas = exportJsonSchemas;
 exports.listRegisteredSchemas = listRegisteredSchemas;

package/dist/testing.mjs

@@ -1,8 +1,8 @@
-import { VariantInfoSchema, CheckoutResponseSchema, CheckoutBodySchema, CartPricingSchema, CartItemSchema, CartSchema, AddItemPayloadSchema, BrandSchema, cimplifyRegistry } from './chunk-VZWK2FJM.mjs';
-export { AddItemPayloadSchema, AddOnDetailsSchema, AddOnGroupDetailsSchema, AddOnInDetailsSchema, AddOnOptionDetailsSchema, AuthorizationTypeSchema, BrandContactSchema, BrandFaqSchema, BrandHeroSchema, BrandNavLinkSchema, BrandPolicyPageSchema, BrandPolicySectionSchema, BrandSchema, BrandSocialSchema, BundleResolvedSchema, BundleSelectionInputSchema, CartItemSchema, CartPricingSchema, CartSchema, CheckoutBodySchema, CheckoutCustomerSchema, CheckoutResponseSchema, ChosenPriceSchema, CompositeResolvedSchema, CompositeSelectionInputSchema, CountryCodeSchema, CurrencyCodeSchema, CustomerInputValueSchema, DiscountDetailsSchema, IsoDateTimeSchema, LineTypeSchema, LocaleSchema, MoneyLooseSchema, MoneySchema, NextActionSchema, PhoneE164Schema, ProductTypeSchema, SchemaViolationError, SeedNameSchema, SelectedAddOnOptionSchema, ServiceStatusSchema, TimestampSchema, VariantDetailsSchema, VariantDisplayAttributeSchema, VariantInfoSchema, assertAddItemPayload, assertBrand, assertCart, assertCartItem, assertCheckoutBody, assertCheckoutResponse, cimplifyRegistry, createTestClient, fixtures, makeAssertion, registerSchema } from './chunk-VZWK2FJM.mjs';
+import { VariantInfoSchema, CheckoutResponseSchema, CheckoutBodySchema, CartPricingSchema, CartItemSchema, CartSchema, AddItemPayloadSchema, BrandSchema, cimplifyRegistry } from './chunk-BUPCMMRR.mjs';
+export { AddItemPayloadSchema, AddOnDetailsSchema, AddOnGroupDetailsSchema, AddOnInDetailsSchema, AddOnOptionDetailsSchema, AuthorizationTypeSchema, BrandContactSchema, BrandFaqSchema, BrandHeroSchema, BrandNavLinkSchema, BrandPolicyPageSchema, BrandPolicySectionSchema, BrandSchema, BrandSocialSchema, BundleResolvedSchema, BundleSelectionInputSchema, CartItemSchema, CartPricingSchema, CartSchema, CheckoutBodySchema, CheckoutCustomerSchema, CheckoutResponseSchema, ChosenPriceSchema, CompositeResolvedSchema, CompositeSelectionInputSchema, CountryCodeSchema, CurrencyCodeSchema, CustomerInputValueSchema, DiscountDetailsSchema, IsoDateTimeSchema, LineTypeSchema, LocaleSchema, MoneyLooseSchema, MoneySchema, NextActionSchema, PhoneE164Schema, ProductTypeSchema, SchemaViolationError, SeedNameSchema, SelectedAddOnOptionSchema, ServiceStatusSchema, TimestampSchema, VariantDetailsSchema, VariantDisplayAttributeSchema, VariantInfoSchema, assertAddItemPayload, assertBrand, assertCart, assertCartItem, assertCheckoutBody, assertCheckoutResponse, cimplifyRegistry, createTestClient, fixtures, makeAssertion, registerSchema } from './chunk-BUPCMMRR.mjs';
 import './chunk-7TEMLVDT.mjs';
 import './chunk-U4MW6PYU.mjs';
-import './chunk-FKARGZK3.mjs';
+import './chunk-XMDLF5Y6.mjs';
 import './chunk-VUSHG3HA.mjs';
 import './chunk-KFLGQGMC.mjs';
 import './chunk-K5EN2W2Q.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.94.2",
+  "version": "0.96.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/registry/date-slot-picker.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "date-slot-picker.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Whole units needed — forwarded to availability so short days drop out. */\n  units?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  /** Currency the slot prices are denominated in. */\n  currency?: CurrencyCode;\n  /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */\n  schedulingMode?: SchedulingMode;\n  /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Forwarded to `<SlotPicker>` — value for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Forwarded to `<SlotPicker>` — hide slots already in the past. Default: true. */\n  hideElapsedSlots?: boolean;\n  /** Forwarded to `<SlotPicker>` — minimum lead time in minutes. Default: 0. */\n  minLeadMinutes?: number;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  units,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  currency,\n  schedulingMode,\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      units,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n    >\n      <div\n        data-cimplify-date-nav\n        className={cn(\"flex items-center justify-end gap-2\", classNames?.nav)}\n      >\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          aria-label=\"Previous dates\"\n          data-cimplify-date-nav-prev\n          className={cn(\n            \"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\",\n            classNames?.navButton,\n          )}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          aria-label=\"Next dates\"\n          data-cimplify-date-nav-next\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n            classNames?.navButton,\n          )}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List\n        data-cimplify-date-strip\n        className={cn(\"grid grid-cols-7 gap-1 sm:gap-2\", classNames?.dateStrip)}\n      >\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={cn(\n                \"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\",\n                classNames?.dateButton,\n              )}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={cn(\"h-32 rounded-md bg-muted/40 animate-pulse\", classNames?.loading)}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n          currency={currency}\n          schedulingMode={schedulingMode}\n          durationUnit={durationUnit}\n          durationValue={durationValue}\n          hideElapsedSlots={hideElapsedSlots}\n          minLeadMinutes={minLeadMinutes}\n        />\n      </div>\n    </Tabs.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { AvailableSlot, DayAvailability } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useServiceAvailability } from \"@cimplify/sdk/react\";\nimport { SlotPicker } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface DateSlotPickerClassNames {\n  root?: string;\n  dateStrip?: string;\n  dateButton?: string;\n  nav?: string;\n  navButton?: string;\n  slots?: string;\n  loading?: string;\n}\n\nexport interface DateSlotPickerProps {\n  /** Service ID to fetch availability and slots for. */\n  serviceId: string;\n  /** Number of days to show in the date strip. Default: 7. */\n  daysToShow?: number;\n  /** Number of participants. */\n  participantCount?: number;\n  /** Whole units needed — forwarded to availability so short days drop out. */\n  units?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot, date: string) => void;\n  /** Pre-fetched availability data (skips fetch). */\n  availability?: DayAvailability[];\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  /** Currency the slot prices are denominated in. */\n  currency?: CurrencyCode;\n  /** Forwarded to `<SlotPicker>` to render multi-day stay labels. */\n  schedulingMode?: SchedulingMode;\n  /** Forwarded to `<SlotPicker>` — unit for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Forwarded to `<SlotPicker>` — value for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Forwarded to `<SlotPicker>` — hide slots already in the past. Default: true. */\n  hideElapsedSlots?: boolean;\n  /** Forwarded to `<SlotPicker>` — minimum lead time in minutes. Default: 0. */\n  minLeadMinutes?: number;\n  /** Forwarded to `<SlotPicker>` — offered when a day has no bookable times. */\n  contactPhone?: string;\n  className?: string;\n  classNames?: DateSlotPickerClassNames;\n}\n\nfunction formatDate(dateStr: string): string {\n  const date = new Date(dateStr + \"T00:00:00\");\n  return date.toLocaleDateString(undefined, { weekday: \"short\", month: \"short\", day: \"numeric\" });\n}\n\nfunction toDateString(date: Date): string {\n  return date.toISOString().split(\"T\")[0];\n}\n\nfunction addDays(date: Date, days: number): Date {\n  const result = new Date(date);\n  result.setDate(result.getDate() + days);\n  return result;\n}\n\nexport function DateSlotPicker({\n  serviceId,\n  daysToShow = 7,\n  participantCount,\n  units,\n  selectedSlot,\n  onSlotSelect,\n  availability: availabilityProp,\n  showPrice = true,\n  currency,\n  schedulingMode,\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  contactPhone,\n  className,\n  classNames,\n}: DateSlotPickerProps): React.ReactElement {\n  const [offset, setOffset] = useState(0);\n  const [selectedDate, setSelectedDate] = useState<string>(toDateString(new Date()));\n\n  const dateRange = useMemo(() => {\n    const today = new Date();\n    const start = addDays(today, offset);\n    const dates: string[] = [];\n    for (let i = 0; i < daysToShow; i++) {\n      dates.push(toDateString(addDays(start, i)));\n    }\n    return {\n      dates,\n      startDate: dates[0],\n      endDate: dates[dates.length - 1],\n    };\n  }, [offset, daysToShow]);\n\n  const { days: fetchedDays, isLoading: availabilityLoading } = useServiceAvailability(\n    serviceId,\n    dateRange.startDate,\n    dateRange.endDate,\n    {\n      participantCount,\n      units,\n      enabled: availabilityProp === undefined,\n    },\n  );\n\n  const days = availabilityProp ?? fetchedDays;\n\n  const availabilityMap = useMemo(() => {\n    const map = new Map<string, DayAvailability>();\n    for (const day of days) {\n      map.set(day.date, day);\n    }\n    return map;\n  }, [days]);\n\n  const handlePrev = useCallback(() => {\n    setOffset((prev) => Math.max(0, prev - daysToShow));\n  }, [daysToShow]);\n\n  const handleNext = useCallback(() => {\n    setOffset((prev) => prev + daysToShow);\n  }, [daysToShow]);\n\n  const handleDateChange = useCallback((value: string | number | null) => {\n    if (typeof value === \"string\") {\n      setSelectedDate(value);\n    }\n  }, []);\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot) => {\n      onSlotSelect?.(slot, selectedDate);\n    },\n    [onSlotSelect, selectedDate],\n  );\n\n  return (\n    <Tabs.Root\n      value={selectedDate}\n      onValueChange={handleDateChange}\n      data-cimplify-date-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n    >\n      <div\n        data-cimplify-date-nav\n        className={cn(\"flex items-center justify-end gap-2\", classNames?.nav)}\n      >\n        <button\n          type=\"button\"\n          onClick={handlePrev}\n          disabled={offset === 0}\n          aria-label=\"Previous dates\"\n          data-cimplify-date-nav-prev\n          className={cn(\n            \"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\",\n            classNames?.navButton,\n          )}\n        >\n          &larr;\n        </button>\n        <button\n          type=\"button\"\n          onClick={handleNext}\n          aria-label=\"Next dates\"\n          data-cimplify-date-nav-next\n          className={cn(\n            \"grid place-items-center w-8 h-8 rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n            classNames?.navButton,\n          )}\n        >\n          &rarr;\n        </button>\n      </div>\n\n      <Tabs.List\n        data-cimplify-date-strip\n        className={cn(\"grid grid-cols-7 gap-1 sm:gap-2\", classNames?.dateStrip)}\n      >\n        {dateRange.dates.map((date) => {\n          const dayInfo = availabilityMap.get(date);\n          const hasAvailability = dayInfo?.has_availability !== false;\n          const isSelected = selectedDate === date;\n          return (\n            <Tabs.Tab\n              key={date}\n              value={date}\n              data-cimplify-date-button\n              data-selected={isSelected || undefined}\n              data-available={hasAvailability || undefined}\n              data-fully-booked={(!hasAvailability) || undefined}\n              className={cn(\n                \"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\",\n                classNames?.dateButton,\n              )}\n            >\n              {formatDate(date)}\n            </Tabs.Tab>\n          );\n        })}\n      </Tabs.List>\n\n      {availabilityLoading && (\n        <div\n          data-cimplify-date-slot-loading\n          aria-busy=\"true\"\n          className={cn(\"h-32 rounded-md bg-muted/40 animate-pulse\", classNames?.loading)}\n        />\n      )}\n\n      <div data-cimplify-date-slots className={classNames?.slots}>\n        <SlotPicker\n          serviceId={serviceId}\n          date={selectedDate}\n          participantCount={participantCount}\n          selectedSlot={selectedSlot}\n          onSlotSelect={handleSlotSelect}\n          showPrice={showPrice}\n          currency={currency}\n          schedulingMode={schedulingMode}\n          durationUnit={durationUnit}\n          durationValue={durationValue}\n          hideElapsedSlots={hideElapsedSlots}\n          minLeadMinutes={minLeadMinutes}\n          contactPhone={contactPhone}\n        />\n      </div>\n    </Tabs.Root>\n  );\n}\n"
     }
   ]
 }

package/registry/slot-picker.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "slot-picker.tsx",
-      "content": "\"use client\";\n\nimport { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport React, { useMemo } from \"react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useAvailableSlots } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface SlotPickerClassNames {\n  root?: string;\n  group?: string;\n  groupLabel?: string;\n  slot?: string;\n  slotTime?: string;\n  slotPrice?: string;\n  slotScarcity?: string;\n  loading?: string;\n  empty?: string;\n}\n\nexport interface SlotPickerProps {\n  /** Pre-fetched slots (skips fetch). */\n  slots?: AvailableSlot[];\n  /** Service ID — used to fetch slots when `slots` prop is not provided. */\n  serviceId?: string;\n  /** Date string (YYYY-MM-DD) — used to fetch slots when `slots` prop is not provided. */\n  date?: string;\n  /** Number of participants for capacity-based availability. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot) => void;\n  /** Whether to group slots by time of day. Default: true. Ignored when `schedulingMode` is `\"multi_day\"`. */\n  groupByTimeOfDay?: boolean;\n  /** Show price on each slot. Default: true. */\n  showPrice?: boolean;\n  /**\n   * Show a \"N left\" urgency tag when a slot's remaining capacity is at or below\n   * this number (and above zero). Slots at zero capacity render as sold out.\n   * Default: 3. Set to 0 to disable scarcity tags.\n   */\n  lowCapacityThreshold?: number;\n  /** Currency the slot prices are denominated in. */\n  currency?: CurrencyCode;\n  /**\n   * Hide slots whose `start_time` is already in the past. Default: true.\n   * Set to false to show elapsed slots greyed-out (still un-selectable).\n   */\n  hideElapsedSlots?: boolean;\n  /**\n   * Minimum lead time (in minutes) before a slot can be booked. Slots whose\n   * start is sooner than `now + minLeadMinutes` are filtered out (when\n   * `hideElapsedSlots` is true) or marked unavailable. Default: 0.\n   */\n  minLeadMinutes?: number;\n  /**\n   * Service scheduling mode. When `\"multi_day\"`, each slot renders as a\n   * stay summary (`\"3 nights: Fri Apr 5, 3:00 PM → Mon Apr 8, 11:00 AM\"`)\n   * instead of the time-of-day label. Defaults to `\"intraday\"`.\n   */\n  schedulingMode?: SchedulingMode;\n  /** Service duration unit — used for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Service duration value — used for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Text shown when no slots available. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: SlotPickerClassNames;\n}\n\ninterface SlotGroup {\n  label: string;\n  slots: AvailableSlot[];\n}\n\nfunction getTimeOfDay(timeStr: string): \"morning\" | \"afternoon\" | \"evening\" {\n  const hour = parseInt(timeStr.split(\"T\").pop()?.split(\":\")[0] ?? timeStr.split(\":\")[0], 10);\n  if (hour < 12) return \"morning\";\n  if (hour < 17) return \"afternoon\";\n  return \"evening\";\n}\n\nconst TIME_OF_DAY_LABELS: Record<string, string> = {\n  morning: \"Morning\",\n  afternoon: \"Afternoon\",\n  evening: \"Evening\",\n};\n\nfunction groupSlots(slots: AvailableSlot[]): SlotGroup[] {\n  const groups: Record<string, AvailableSlot[]> = {};\n  for (const slot of slots) {\n    const tod = getTimeOfDay(slot.start_time);\n    if (!groups[tod]) groups[tod] = [];\n    groups[tod].push(slot);\n  }\n  return ([\"morning\", \"afternoon\", \"evening\"] as const)\n    .filter((tod) => groups[tod]?.length)\n    .map((tod) => ({ label: TIME_OF_DAY_LABELS[tod], slots: groups[tod] }));\n}\n\nfunction formatTime(timeStr: string): string {\n  try {\n    const date = new Date(timeStr);\n    if (!isNaN(date.getTime())) {\n      return date.toLocaleTimeString(undefined, { hour: \"numeric\", minute: \"2-digit\" });\n    }\n  } catch {\n    // noop\n  }\n\n  const parts = timeStr.split(\":\");\n  if (parts.length >= 2) {\n    const hour = parseInt(parts[0], 10);\n    const minute = parts[1];\n    const ampm = hour >= 12 ? \"PM\" : \"AM\";\n    const displayHour = hour % 12 || 12;\n    return `${displayHour}:${minute} ${ampm}`;\n  }\n  return timeStr;\n}\n\nfunction pluralizeUnit(unit: DurationUnit | undefined, value: number | undefined): string {\n  if (!unit) return value === 1 ? \"day\" : \"days\";\n  const v = value ?? 1;\n  if (unit === \"minutes\") return v === 1 ? \"minute\" : \"minutes\";\n  if (unit === \"hours\") return v === 1 ? \"hour\" : \"hours\";\n  if (unit === \"days\") return v === 1 ? \"day\" : \"days\";\n  if (unit === \"weeks\") return v === 1 ? \"week\" : \"weeks\";\n  if (unit === \"months\") return v === 1 ? \"month\" : \"months\";\n  return unit;\n}\n\nfunction formatStaySummary(\n  slot: AvailableSlot,\n  durationUnit: DurationUnit | undefined,\n  durationValue: number | undefined,\n): string {\n  const start = new Date(slot.start_time);\n  const end = new Date(slot.end_time);\n  const startLabel = start.toLocaleString(undefined, {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n  });\n  const endLabel = end.toLocaleString(undefined, {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n  });\n  const unitLabel = pluralizeUnit(durationUnit, durationValue);\n  if (durationValue !== undefined) {\n    return `${durationValue} ${unitLabel}: ${startLabel} → ${endLabel}`;\n  }\n  return `${startLabel} → ${endLabel}`;\n}\n\nfunction slotToValue(slot: AvailableSlot): string {\n  return `${slot.start_time}|${slot.end_time}`;\n}\n\nexport function SlotPicker({\n  slots: slotsProp,\n  serviceId,\n  date,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  groupByTimeOfDay = true,\n  showPrice = true,\n  lowCapacityThreshold = 3,\n  currency,\n  schedulingMode = \"intraday\",\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  emptyMessage = \"No available slots\",\n  className,\n  classNames,\n}: SlotPickerProps): React.ReactElement {\n  const isMultiDay = schedulingMode === \"multi_day\";\n  const { slots: fetched, isLoading } = useAvailableSlots(\n    serviceId ?? null,\n    date ?? null,\n    {\n      participantCount,\n      enabled: slotsProp === undefined && !!serviceId && !!date,\n    },\n  );\n\n  const rawSlots = slotsProp ?? fetched;\n  // Drop slots that have already elapsed (or fall within the lead-time\n  // window). Default behaviour because nothing the merchant can do at\n  // the backend stops a client clock from being slightly ahead of the\n  // last availability response — this is the same defence other\n  // booking flows ship by default.\n  const slots = useMemo(() => {\n    if (!hideElapsedSlots) return rawSlots;\n    const cutoff = Date.now() + minLeadMinutes * 60_000;\n    return rawSlots.filter((slot) => {\n      const start = Date.parse(slot.start_time);\n      return Number.isNaN(start) || start >= cutoff;\n    });\n  }, [rawSlots, hideElapsedSlots, minLeadMinutes]);\n\n  if (isLoading && slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  const groups = groupByTimeOfDay && !isMultiDay\n    ? groupSlots(slots)\n    : [{ label: \"\", slots }];\n\n  const slotsByValue = new Map<string, AvailableSlot>();\n  for (const slot of slots) {\n    slotsByValue.set(slotToValue(slot), slot);\n  }\n\n  const selectedValue = selectedSlot ? slotToValue(selectedSlot) : \"\";\n\n  return (\n    <RadioGroup\n      data-cimplify-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n      value={selectedValue}\n      onValueChange={(value: string) => {\n        const slot = slotsByValue.get(value);\n        // Slots default to available; treat as unavailable only when the\n        // backend explicitly returns `is_available: false`.\n        if (slot && slot.is_available !== false) {\n          onSlotSelect?.(slot);\n        }\n      }}\n    >\n      {groups.map((group) => (\n        <div\n          key={group.label || \"all\"}\n          data-cimplify-slot-group\n          className={cn(\"flex flex-col gap-2\", classNames?.group)}\n        >\n          {group.label && (\n            <div\n              data-cimplify-slot-group-label\n              className={cn(\n                \"text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground\",\n                classNames?.groupLabel,\n              )}\n            >\n              {group.label}\n            </div>\n          )}\n          <div\n            className={cn(\n              isMultiDay\n                ? \"flex flex-col gap-2\"\n                : \"grid grid-cols-3 sm:grid-cols-4 gap-2\",\n            )}\n          >\n            {group.slots.map((slot) => {\n              const value = slotToValue(slot);\n              const isSelected =\n                selectedSlot?.start_time === slot.start_time &&\n                selectedSlot?.end_time === slot.end_time;\n              const capacity = slot.capacity_available ?? slot.remaining_capacity;\n              const soldOut = capacity === 0;\n              const unavailable = slot.is_available === false || soldOut;\n              const lowCapacity =\n                lowCapacityThreshold > 0 &&\n                capacity != null &&\n                capacity > 0 &&\n                capacity <= lowCapacityThreshold;\n              return (\n                <Radio.Root\n                  key={value}\n                  value={value}\n                  disabled={unavailable}\n                  data-cimplify-slot\n                  data-selected={isSelected || undefined}\n                  data-unavailable={unavailable || undefined}\n                  className={cn(\n                    \"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\",\n                    isMultiDay && \"justify-between text-left\",\n                    classNames?.slot,\n                  )}\n                >\n                  <span data-cimplify-slot-time className={classNames?.slotTime}>\n                    {isMultiDay\n                      ? formatStaySummary(slot, durationUnit, durationValue)\n                      : formatTime(slot.start_time)}\n                  </span>\n                  {showPrice && slot.price && (\n                    <span\n                      data-cimplify-slot-price\n                      className={cn(\"text-xs opacity-70\", classNames?.slotPrice)}\n                    >\n                      <Price amount={slot.price} currency={currency} />\n                    </span>\n                  )}\n                  {lowCapacity && (\n                    <span\n                      data-cimplify-slot-scarcity\n                      className={cn(\"text-xs font-medium text-amber-600\", classNames?.slotScarcity)}\n                    >\n                      {capacity} left\n                    </span>\n                  )}\n                </Radio.Root>\n              );\n            })}\n          </div>\n        </div>\n      ))}\n    </RadioGroup>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport { Radio } from \"@base-ui/react/radio\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport React, { useMemo } from \"react\";\nimport type { AvailableSlot } from \"@cimplify/sdk\";\nimport type { DurationUnit, SchedulingMode } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useAvailableSlots } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface SlotPickerClassNames {\n  root?: string;\n  group?: string;\n  groupLabel?: string;\n  slot?: string;\n  slotTime?: string;\n  slotPrice?: string;\n  slotScarcity?: string;\n  loading?: string;\n  empty?: string;\n}\n\nexport interface SlotPickerProps {\n  /** Pre-fetched slots (skips fetch). */\n  slots?: AvailableSlot[];\n  /** Service ID — used to fetch slots when `slots` prop is not provided. */\n  serviceId?: string;\n  /** Date string (YYYY-MM-DD) — used to fetch slots when `slots` prop is not provided. */\n  date?: string;\n  /** Number of participants for capacity-based availability. */\n  participantCount?: number;\n  /** Currently selected slot. */\n  selectedSlot?: AvailableSlot | null;\n  /** Called when a slot is selected. */\n  onSlotSelect?: (slot: AvailableSlot) => void;\n  /** Whether to group slots by time of day. Default: true. Ignored when `schedulingMode` is `\"multi_day\"`. */\n  groupByTimeOfDay?: boolean;\n  /** Show price on each slot. Default: true. */\n  showPrice?: boolean;\n  /**\n   * Show a \"N left\" urgency tag when a slot's remaining capacity is at or below\n   * this number (and above zero). Slots at zero capacity render as sold out.\n   * Default: 3. Set to 0 to disable scarcity tags.\n   */\n  lowCapacityThreshold?: number;\n  /** Currency the slot prices are denominated in. */\n  currency?: CurrencyCode;\n  /**\n   * Hide slots whose `start_time` is already in the past. Default: true.\n   * Set to false to show elapsed slots greyed-out (still un-selectable).\n   */\n  hideElapsedSlots?: boolean;\n  /**\n   * Minimum lead time (in minutes) before a slot can be booked. Slots whose\n   * start is sooner than `now + minLeadMinutes` are filtered out (when\n   * `hideElapsedSlots` is true) or marked unavailable. Default: 0.\n   */\n  minLeadMinutes?: number;\n  /**\n   * Service scheduling mode. When `\"multi_day\"`, each slot renders as a\n   * stay summary (`\"3 nights: Fri Apr 5, 3:00 PM → Mon Apr 8, 11:00 AM\"`)\n   * instead of the time-of-day label. Defaults to `\"intraday\"`.\n   */\n  schedulingMode?: SchedulingMode;\n  /** Service duration unit — used for the stay summary in multi-day mode. */\n  durationUnit?: DurationUnit;\n  /** Service duration value — used for the stay summary in multi-day mode. */\n  durationValue?: number;\n  /** Text shown when no slots available. */\n  emptyMessage?: string;\n  /**\n   * Phone number offered when a day has no bookable times. A service can be\n   * unbookable for reasons the storefront cannot see, and a bare empty grid\n   * reads as a broken site rather than a shop to call.\n   */\n  contactPhone?: string;\n  className?: string;\n  classNames?: SlotPickerClassNames;\n}\n\ninterface SlotGroup {\n  label: string;\n  slots: AvailableSlot[];\n}\n\nfunction getTimeOfDay(timeStr: string): \"morning\" | \"afternoon\" | \"evening\" {\n  const hour = parseInt(timeStr.split(\"T\").pop()?.split(\":\")[0] ?? timeStr.split(\":\")[0], 10);\n  if (hour < 12) return \"morning\";\n  if (hour < 17) return \"afternoon\";\n  return \"evening\";\n}\n\nconst TIME_OF_DAY_LABELS: Record<string, string> = {\n  morning: \"Morning\",\n  afternoon: \"Afternoon\",\n  evening: \"Evening\",\n};\n\nfunction groupSlots(slots: AvailableSlot[]): SlotGroup[] {\n  const groups: Record<string, AvailableSlot[]> = {};\n  for (const slot of slots) {\n    const tod = getTimeOfDay(slot.start_time);\n    if (!groups[tod]) groups[tod] = [];\n    groups[tod].push(slot);\n  }\n  return ([\"morning\", \"afternoon\", \"evening\"] as const)\n    .filter((tod) => groups[tod]?.length)\n    .map((tod) => ({ label: TIME_OF_DAY_LABELS[tod], slots: groups[tod] }));\n}\n\nfunction formatTime(timeStr: string): string {\n  try {\n    const date = new Date(timeStr);\n    if (!isNaN(date.getTime())) {\n      return date.toLocaleTimeString(undefined, { hour: \"numeric\", minute: \"2-digit\" });\n    }\n  } catch {\n    // noop\n  }\n\n  const parts = timeStr.split(\":\");\n  if (parts.length >= 2) {\n    const hour = parseInt(parts[0], 10);\n    const minute = parts[1];\n    const ampm = hour >= 12 ? \"PM\" : \"AM\";\n    const displayHour = hour % 12 || 12;\n    return `${displayHour}:${minute} ${ampm}`;\n  }\n  return timeStr;\n}\n\nfunction pluralizeUnit(unit: DurationUnit | undefined, value: number | undefined): string {\n  if (!unit) return value === 1 ? \"day\" : \"days\";\n  const v = value ?? 1;\n  if (unit === \"minutes\") return v === 1 ? \"minute\" : \"minutes\";\n  if (unit === \"hours\") return v === 1 ? \"hour\" : \"hours\";\n  if (unit === \"days\") return v === 1 ? \"day\" : \"days\";\n  if (unit === \"weeks\") return v === 1 ? \"week\" : \"weeks\";\n  if (unit === \"months\") return v === 1 ? \"month\" : \"months\";\n  return unit;\n}\n\nfunction formatStaySummary(\n  slot: AvailableSlot,\n  durationUnit: DurationUnit | undefined,\n  durationValue: number | undefined,\n): string {\n  const start = new Date(slot.start_time);\n  const end = new Date(slot.end_time);\n  const startLabel = start.toLocaleString(undefined, {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n  });\n  const endLabel = end.toLocaleString(undefined, {\n    weekday: \"short\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\",\n  });\n  const unitLabel = pluralizeUnit(durationUnit, durationValue);\n  if (durationValue !== undefined) {\n    return `${durationValue} ${unitLabel}: ${startLabel} → ${endLabel}`;\n  }\n  return `${startLabel} → ${endLabel}`;\n}\n\nfunction slotToValue(slot: AvailableSlot): string {\n  return `${slot.start_time}|${slot.end_time}`;\n}\n\nexport function SlotPicker({\n  slots: slotsProp,\n  serviceId,\n  date,\n  participantCount,\n  selectedSlot,\n  onSlotSelect,\n  groupByTimeOfDay = true,\n  showPrice = true,\n  lowCapacityThreshold = 3,\n  currency,\n  schedulingMode = \"intraday\",\n  durationUnit,\n  durationValue,\n  hideElapsedSlots = true,\n  minLeadMinutes = 0,\n  emptyMessage = \"No available slots\",\n  contactPhone,\n  className,\n  classNames,\n}: SlotPickerProps): React.ReactElement {\n  const isMultiDay = schedulingMode === \"multi_day\";\n  const { slots: fetched, isLoading } = useAvailableSlots(\n    serviceId ?? null,\n    date ?? null,\n    {\n      participantCount,\n      enabled: slotsProp === undefined && !!serviceId && !!date,\n    },\n  );\n\n  const rawSlots = slotsProp ?? fetched;\n  // Drop slots that have already elapsed (or fall within the lead-time\n  // window). Default behaviour because nothing the merchant can do at\n  // the backend stops a client clock from being slightly ahead of the\n  // last availability response — this is the same defence other\n  // booking flows ship by default.\n  const slots = useMemo(() => {\n    if (!hideElapsedSlots) return rawSlots;\n    const cutoff = Date.now() + minLeadMinutes * 60_000;\n    return rawSlots.filter((slot) => {\n      const start = Date.parse(slot.start_time);\n      return Number.isNaN(start) || start >= cutoff;\n    });\n  }, [rawSlots, hideElapsedSlots, minLeadMinutes]);\n\n  if (isLoading && slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (slots.length === 0) {\n    return (\n      <div\n        data-cimplify-slot-picker\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n        {contactPhone ? (\n          <p>\n            <a href={`tel:${contactPhone.replace(/\\s+/g, \"\")}`}>Call {contactPhone} to book</a>\n          </p>\n        ) : null}\n      </div>\n    );\n  }\n\n  const groups = groupByTimeOfDay && !isMultiDay\n    ? groupSlots(slots)\n    : [{ label: \"\", slots }];\n\n  const slotsByValue = new Map<string, AvailableSlot>();\n  for (const slot of slots) {\n    slotsByValue.set(slotToValue(slot), slot);\n  }\n\n  const selectedValue = selectedSlot ? slotToValue(selectedSlot) : \"\";\n\n  return (\n    <RadioGroup\n      data-cimplify-slot-picker\n      className={cn(\"flex flex-col gap-4\", className, classNames?.root)}\n      value={selectedValue}\n      onValueChange={(value: string) => {\n        const slot = slotsByValue.get(value);\n        // Slots default to available; treat as unavailable only when the\n        // backend explicitly returns `is_available: false`.\n        if (slot && slot.is_available !== false) {\n          onSlotSelect?.(slot);\n        }\n      }}\n    >\n      {groups.map((group) => (\n        <div\n          key={group.label || \"all\"}\n          data-cimplify-slot-group\n          className={cn(\"flex flex-col gap-2\", classNames?.group)}\n        >\n          {group.label && (\n            <div\n              data-cimplify-slot-group-label\n              className={cn(\n                \"text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground\",\n                classNames?.groupLabel,\n              )}\n            >\n              {group.label}\n            </div>\n          )}\n          <div\n            className={cn(\n              isMultiDay\n                ? \"flex flex-col gap-2\"\n                : \"grid grid-cols-3 sm:grid-cols-4 gap-2\",\n            )}\n          >\n            {group.slots.map((slot) => {\n              const value = slotToValue(slot);\n              const isSelected =\n                selectedSlot?.start_time === slot.start_time &&\n                selectedSlot?.end_time === slot.end_time;\n              const capacity = slot.capacity_available ?? slot.remaining_capacity;\n              const soldOut = capacity === 0;\n              const unavailable = slot.is_available === false || soldOut;\n              const lowCapacity =\n                lowCapacityThreshold > 0 &&\n                capacity != null &&\n                capacity > 0 &&\n                capacity <= lowCapacityThreshold;\n              return (\n                <Radio.Root\n                  key={value}\n                  value={value}\n                  disabled={unavailable}\n                  data-cimplify-slot\n                  data-selected={isSelected || undefined}\n                  data-unavailable={unavailable || undefined}\n                  className={cn(\n                    \"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\",\n                    isMultiDay && \"justify-between text-left\",\n                    classNames?.slot,\n                  )}\n                >\n                  <span data-cimplify-slot-time className={classNames?.slotTime}>\n                    {isMultiDay\n                      ? formatStaySummary(slot, durationUnit, durationValue)\n                      : formatTime(slot.start_time)}\n                  </span>\n                  {showPrice && slot.price && (\n                    <span\n                      data-cimplify-slot-price\n                      className={cn(\"text-xs opacity-70\", classNames?.slotPrice)}\n                    >\n                      <Price amount={slot.price} currency={currency} />\n                    </span>\n                  )}\n                  {lowCapacity && (\n                    <span\n                      data-cimplify-slot-scarcity\n                      className={cn(\"text-xs font-medium text-amber-600\", classNames?.slotScarcity)}\n                    >\n                      {capacity} left\n                    </span>\n                  )}\n                </Radio.Root>\n              );\n            })}\n          </div>\n        </div>\n      ))}\n    </RadioGroup>\n  );\n}\n"
     }
   ]
 }