@cimplify/sdk 0.9.10 → 0.10.0

package/dist/utils.d.mts

@@ -1,2 +1,55 @@
-export { C as CURRENCY_SYMBOLS, M as MOBILE_MONEY_PROVIDERS, s as categorizePaymentError, y as detectMobileMoneyProvider, c as formatMoney, d as formatNumberCompact, f as formatPrice, a as formatPriceAdjustment, b as formatPriceCompact, j as formatPriceWithTax, e as formatProductPrice, m as getBasePrice, k as getCurrencySymbol, o as getDiscountPercentage, l as getDisplayPrice, q as getMarkupPercentage, r as getProductCurrency, g as getTaxAmount, h as hasTaxInfo, n as isOnSale, v as isPaymentStatusFailure, w as isPaymentStatusRequiresAction, x as isPaymentStatusSuccess, i as isTaxInclusive, t as normalizePaymentResponse, u as normalizeStatusResponse, p as parsePrice } from './index-Cd0shhZU.mjs';
-import './payment-CTalZM5l.mjs';
+import { M as Money, C as CurrencyCode, aB as PricePathTaxInfo, bm as PaymentErrorDetails, bk as PaymentResponse, bl as PaymentStatusResponse } from './payment-CrNyrc-D.mjs';
+import { P as ProductWithPrice } from './price-C9Z-hr49.mjs';
+
+declare const CURRENCY_SYMBOLS: Record<string, string>;
+declare function getCurrencySymbol(currencyCode: CurrencyCode): string;
+declare function formatNumberCompact(value: number, decimals?: number): string;
+declare function formatPrice(amount: number | Money, currency?: CurrencyCode, locale?: string): string;
+declare function formatPriceAdjustment(amount: number, currency?: CurrencyCode, locale?: string): string;
+declare function formatPriceCompact(amount: number | Money, currency?: CurrencyCode, decimals?: number): string;
+declare function formatMoney(amount: Money | number, currency?: CurrencyCode): string;
+declare function parsePrice(value: Money | string | number | undefined | null): number;
+declare function hasTaxInfo(priceInfo: {
+    tax_info?: PricePathTaxInfo;
+}): boolean;
+declare function getTaxAmount(priceInfo: {
+    tax_info?: PricePathTaxInfo;
+}): number;
+declare function isTaxInclusive(priceInfo: {
+    tax_info?: PricePathTaxInfo;
+}): boolean;
+declare function formatPriceWithTax(priceInfo: {
+    final_price: Money;
+    tax_info?: PricePathTaxInfo;
+}, currency?: CurrencyCode): string;
+declare function getDisplayPrice(product: ProductWithPrice): number;
+declare function getBasePrice(product: ProductWithPrice): number;
+declare function isOnSale(product: ProductWithPrice): boolean;
+declare function getDiscountPercentage(product: ProductWithPrice): number;
+declare function getMarkupPercentage(product: ProductWithPrice): number;
+declare function getProductCurrency(product: ProductWithPrice): CurrencyCode;
+declare function formatProductPrice(product: ProductWithPrice, locale?: string): string;
+
+declare function categorizePaymentError(error: Error, errorCode?: string): PaymentErrorDetails;
+declare function normalizePaymentResponse(response: unknown): PaymentResponse;
+declare function isPaymentStatusSuccess(status: string | undefined): boolean;
+declare function isPaymentStatusFailure(status: string | undefined): boolean;
+declare function isPaymentStatusRequiresAction(status: string | undefined): boolean;
+declare function normalizeStatusResponse(response: unknown): PaymentStatusResponse;
+declare const MOBILE_MONEY_PROVIDERS: {
+    readonly mtn: {
+        readonly name: "MTN Mobile Money";
+        readonly prefix: readonly ["024", "054", "055", "059"];
+    };
+    readonly vodafone: {
+        readonly name: "Vodafone Cash";
+        readonly prefix: readonly ["020", "050"];
+    };
+    readonly airtel: {
+        readonly name: "AirtelTigo Money";
+        readonly prefix: readonly ["027", "057", "026", "056"];
+    };
+};
+declare function detectMobileMoneyProvider(phoneNumber: string): "mtn" | "vodafone" | "airtel" | null;
+
+export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice };

package/dist/utils.d.ts

@@ -1,2 +1,55 @@
-export { C as CURRENCY_SYMBOLS, M as MOBILE_MONEY_PROVIDERS, s as categorizePaymentError, y as detectMobileMoneyProvider, c as formatMoney, d as formatNumberCompact, f as formatPrice, a as formatPriceAdjustment, b as formatPriceCompact, j as formatPriceWithTax, e as formatProductPrice, m as getBasePrice, k as getCurrencySymbol, o as getDiscountPercentage, l as getDisplayPrice, q as getMarkupPercentage, r as getProductCurrency, g as getTaxAmount, h as hasTaxInfo, n as isOnSale, v as isPaymentStatusFailure, w as isPaymentStatusRequiresAction, x as isPaymentStatusSuccess, i as isTaxInclusive, t as normalizePaymentResponse, u as normalizeStatusResponse, p as parsePrice } from './index-B_25cFc1.js';
-import './payment-CTalZM5l.js';
+import { M as Money, C as CurrencyCode, aB as PricePathTaxInfo, bm as PaymentErrorDetails, bk as PaymentResponse, bl as PaymentStatusResponse } from './payment-CrNyrc-D.js';
+import { P as ProductWithPrice } from './price-RKKoTz-9.js';
+
+declare const CURRENCY_SYMBOLS: Record<string, string>;
+declare function getCurrencySymbol(currencyCode: CurrencyCode): string;
+declare function formatNumberCompact(value: number, decimals?: number): string;
+declare function formatPrice(amount: number | Money, currency?: CurrencyCode, locale?: string): string;
+declare function formatPriceAdjustment(amount: number, currency?: CurrencyCode, locale?: string): string;
+declare function formatPriceCompact(amount: number | Money, currency?: CurrencyCode, decimals?: number): string;
+declare function formatMoney(amount: Money | number, currency?: CurrencyCode): string;
+declare function parsePrice(value: Money | string | number | undefined | null): number;
+declare function hasTaxInfo(priceInfo: {
+    tax_info?: PricePathTaxInfo;
+}): boolean;
+declare function getTaxAmount(priceInfo: {
+    tax_info?: PricePathTaxInfo;
+}): number;
+declare function isTaxInclusive(priceInfo: {
+    tax_info?: PricePathTaxInfo;
+}): boolean;
+declare function formatPriceWithTax(priceInfo: {
+    final_price: Money;
+    tax_info?: PricePathTaxInfo;
+}, currency?: CurrencyCode): string;
+declare function getDisplayPrice(product: ProductWithPrice): number;
+declare function getBasePrice(product: ProductWithPrice): number;
+declare function isOnSale(product: ProductWithPrice): boolean;
+declare function getDiscountPercentage(product: ProductWithPrice): number;
+declare function getMarkupPercentage(product: ProductWithPrice): number;
+declare function getProductCurrency(product: ProductWithPrice): CurrencyCode;
+declare function formatProductPrice(product: ProductWithPrice, locale?: string): string;
+
+declare function categorizePaymentError(error: Error, errorCode?: string): PaymentErrorDetails;
+declare function normalizePaymentResponse(response: unknown): PaymentResponse;
+declare function isPaymentStatusSuccess(status: string | undefined): boolean;
+declare function isPaymentStatusFailure(status: string | undefined): boolean;
+declare function isPaymentStatusRequiresAction(status: string | undefined): boolean;
+declare function normalizeStatusResponse(response: unknown): PaymentStatusResponse;
+declare const MOBILE_MONEY_PROVIDERS: {
+    readonly mtn: {
+        readonly name: "MTN Mobile Money";
+        readonly prefix: readonly ["024", "054", "055", "059"];
+    };
+    readonly vodafone: {
+        readonly name: "Vodafone Cash";
+        readonly prefix: readonly ["020", "050"];
+    };
+    readonly airtel: {
+        readonly name: "AirtelTigo Money";
+        readonly prefix: readonly ["027", "057", "026", "056"];
+    };
+};
+declare function detectMobileMoneyProvider(phoneNumber: string): "mtn" | "vodafone" | "airtel" | null;
+
+export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice };

package/dist/utils.js

@@ -2,7 +2,6 @@
 
 // src/utils/price.ts
 var CURRENCY_SYMBOLS = {
-  // Major world currencies
   USD: "$",
   EUR: "\u20AC",
   GBP: "\xA3",
@@ -35,7 +34,6 @@ var CURRENCY_SYMBOLS = {
   IDR: "Rp",
   VND: "\u20AB",
   TWD: "NT$",
-  // African currencies
   GHS: "GH\u20B5",
   NGN: "\u20A6",
   KES: "KSh",
@@ -226,12 +224,9 @@ function formatProductPrice(product, locale = "en-US") {
 
 // src/types/common.ts
 function money(value) {
-  return value;
+  return typeof value === "string" ? parseFloat(value) || 0 : value;
 }
 function moneyFromNumber(value) {
-  return value.toFixed(2);
-}
-function currencyCode(value) {
   return value;
 }
 var DOCS_ERROR_BASE_URL = "https://docs.cimplify.io/reference/error-codes";
@@ -365,8 +360,8 @@ function normalizePaymentResponse(response) {
   }
   if (isWebPaymentResponse(response)) {
     const authType = response.authorization_type?.toLowerCase();
-    const validAuthTypes = ["otp", "pin", "phone", "birthday", "address"];
-    const safeAuthType = authType && validAuthTypes.includes(authType) ? authType : void 0;
+    const validStringAuthTypes = ["otp", "pin", "phone", "birthday"];
+    const safeAuthType = authType && validStringAuthTypes.includes(authType) ? authType : void 0;
     return {
       provider: response.transaction.provider_type?.toLowerCase() || "unknown",
       requires_action: response.requires_action || false,
@@ -405,7 +400,8 @@ var PAYMENT_FAILURE_STATUSES = /* @__PURE__ */ new Set([
   "declined",
   "cancelled",
   "voided",
-  "error"
+  "error",
+  "abandoned"
 ]);
 var PAYMENT_REQUIRES_ACTION_STATUSES = /* @__PURE__ */ new Set([
   "requires_action",
@@ -435,29 +431,34 @@ var PAYMENT_STATUS_ALIAS_MAP = {
   unresolved: "pending"
 };
 var KNOWN_PAYMENT_STATUSES = /* @__PURE__ */ new Set([
+  "initialized",
   "pending",
   "processing",
+  "authorized",
+  "captured",
+  "failed",
+  "cancelled",
+  "refunded",
+  "unknown",
+  "voided",
+  "requires_action",
+  "abandoned",
+  "reversed",
+  "disputed",
+  "refund_pending",
   "created",
   "pending_confirmation",
   "success",
   "succeeded",
-  "failed",
   "declined",
-  "authorized",
-  "refunded",
   "partially_refunded",
   "partially_paid",
   "paid",
   "unpaid",
-  "requires_action",
   "requires_payment_method",
   "requires_capture",
-  "captured",
-  "cancelled",
   "completed",
-  "voided",
-  "error",
-  "unknown"
+  "error"
 ]);
 function normalizeStatusToken(status) {
   return status?.trim().toLowerCase().replace(/[\s-]+/g, "_") ?? "";
@@ -486,13 +487,15 @@ function normalizeStatusResponse(response) {
     return {
       status: "pending",
       paid: false,
+      amount: moneyFromNumber(0),
+      currency: "",
       message: "No status available"
     };
   }
   const res = response;
   const normalizedStatus = normalizePaymentStatusValue(res.status ?? void 0);
-  const normalizedAmount = typeof res.amount === "string" ? money(res.amount) : typeof res.amount === "number" && Number.isFinite(res.amount) ? moneyFromNumber(res.amount) : void 0;
-  const normalizedCurrency = typeof res.currency === "string" && res.currency.trim().length > 0 ? currencyCode(res.currency) : void 0;
+  const normalizedAmount = typeof res.amount === "string" ? money(res.amount) : typeof res.amount === "number" && Number.isFinite(res.amount) ? moneyFromNumber(res.amount) : moneyFromNumber(0);
+  const normalizedCurrency = typeof res.currency === "string" && res.currency.trim().length > 0 ? res.currency : "";
   const paidValue = res.paid === true;
   const derivedPaid = paidValue || [
     "success",

package/dist/utils.mjs

@@ -1,6 +1,5 @@
 // src/utils/price.ts
 var CURRENCY_SYMBOLS = {
-  // Major world currencies
   USD: "$",
   EUR: "\u20AC",
   GBP: "\xA3",
@@ -33,7 +32,6 @@ var CURRENCY_SYMBOLS = {
   IDR: "Rp",
   VND: "\u20AB",
   TWD: "NT$",
-  // African currencies
   GHS: "GH\u20B5",
   NGN: "\u20A6",
   KES: "KSh",
@@ -224,12 +222,9 @@ function formatProductPrice(product, locale = "en-US") {
 
 // src/types/common.ts
 function money(value) {
-  return value;
+  return typeof value === "string" ? parseFloat(value) || 0 : value;
 }
 function moneyFromNumber(value) {
-  return value.toFixed(2);
-}
-function currencyCode(value) {
   return value;
 }
 var DOCS_ERROR_BASE_URL = "https://docs.cimplify.io/reference/error-codes";
@@ -363,8 +358,8 @@ function normalizePaymentResponse(response) {
   }
   if (isWebPaymentResponse(response)) {
     const authType = response.authorization_type?.toLowerCase();
-    const validAuthTypes = ["otp", "pin", "phone", "birthday", "address"];
-    const safeAuthType = authType && validAuthTypes.includes(authType) ? authType : void 0;
+    const validStringAuthTypes = ["otp", "pin", "phone", "birthday"];
+    const safeAuthType = authType && validStringAuthTypes.includes(authType) ? authType : void 0;
     return {
       provider: response.transaction.provider_type?.toLowerCase() || "unknown",
       requires_action: response.requires_action || false,
@@ -403,7 +398,8 @@ var PAYMENT_FAILURE_STATUSES = /* @__PURE__ */ new Set([
   "declined",
   "cancelled",
   "voided",
-  "error"
+  "error",
+  "abandoned"
 ]);
 var PAYMENT_REQUIRES_ACTION_STATUSES = /* @__PURE__ */ new Set([
   "requires_action",
@@ -433,29 +429,34 @@ var PAYMENT_STATUS_ALIAS_MAP = {
   unresolved: "pending"
 };
 var KNOWN_PAYMENT_STATUSES = /* @__PURE__ */ new Set([
+  "initialized",
   "pending",
   "processing",
+  "authorized",
+  "captured",
+  "failed",
+  "cancelled",
+  "refunded",
+  "unknown",
+  "voided",
+  "requires_action",
+  "abandoned",
+  "reversed",
+  "disputed",
+  "refund_pending",
   "created",
   "pending_confirmation",
   "success",
   "succeeded",
-  "failed",
   "declined",
-  "authorized",
-  "refunded",
   "partially_refunded",
   "partially_paid",
   "paid",
   "unpaid",
-  "requires_action",
   "requires_payment_method",
   "requires_capture",
-  "captured",
-  "cancelled",
   "completed",
-  "voided",
-  "error",
-  "unknown"
+  "error"
 ]);
 function normalizeStatusToken(status) {
   return status?.trim().toLowerCase().replace(/[\s-]+/g, "_") ?? "";
@@ -484,13 +485,15 @@ function normalizeStatusResponse(response) {
     return {
       status: "pending",
       paid: false,
+      amount: moneyFromNumber(0),
+      currency: "",
       message: "No status available"
     };
   }
   const res = response;
   const normalizedStatus = normalizePaymentStatusValue(res.status ?? void 0);
-  const normalizedAmount = typeof res.amount === "string" ? money(res.amount) : typeof res.amount === "number" && Number.isFinite(res.amount) ? moneyFromNumber(res.amount) : void 0;
-  const normalizedCurrency = typeof res.currency === "string" && res.currency.trim().length > 0 ? currencyCode(res.currency) : void 0;
+  const normalizedAmount = typeof res.amount === "string" ? money(res.amount) : typeof res.amount === "number" && Number.isFinite(res.amount) ? moneyFromNumber(res.amount) : moneyFromNumber(0);
+  const normalizedCurrency = typeof res.currency === "string" && res.currency.trim().length > 0 ? res.currency : "";
   const paidValue = res.paid === true;
   const derivedPaid = paidValue || [
     "success",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.9.10",
+  "version": "0.10.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -9,8 +9,12 @@
     "storefront"
   ],
   "license": "MIT",
+  "bin": {
+    "cimplify-sdk": "./dist/cli.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "registry"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -38,7 +42,8 @@
     }
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && bun run build:registry",
+    "build:registry": "bun scripts/build-registry.ts",
     "dev": "tsup --watch",
     "typecheck": "tsgo --noEmit",
     "clean": "rm -rf dist",
@@ -69,8 +74,13 @@
     "@typescript/native-preview": "^7.0.0-dev.20260228.1",
     "jsdom": "^28.1.0",
     "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsup": "^8.5.1",
     "typescript": "5.9.3",
     "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.6.0"
   }
 }

package/registry/add-on-selector.json

@@ -0,0 +1,15 @@
+{
+  "name": "add-on-selector",
+  "title": "AddOnSelector",
+  "description": "Modifier groups with single-select or multi-select options.",
+  "type": "component",
+  "registryDependencies": [
+    "price"
+  ],
+  "files": [
+    {
+      "path": "add-on-selector.tsx",
+      "content": "\"use client\";\n\nimport React, { useCallback } from \"react\";\nimport type { AddOnWithOptions } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\n\nexport interface AddOnSelectorProps {\n  addOns: AddOnWithOptions[];\n  selectedOptions: string[];\n  onOptionsChange: (optionIds: string[]) => void;\n  className?: string;\n}\n\n/**\n * AddOnSelector — modifier groups with single-select (radio) or multi-select (checkbox).\n *\n * Respects min/max constraints, required flags, and mutual exclusivity.\n */\nexport function AddOnSelector({\n  addOns,\n  selectedOptions,\n  onOptionsChange,\n  className,\n}: AddOnSelectorProps): React.ReactElement | null {\n  const isOptionSelected = useCallback(\n    (optionId: string) => selectedOptions.includes(optionId),\n    [selectedOptions],\n  );\n\n  const toggleOption = useCallback(\n    (addOn: AddOnWithOptions, optionId: string) => {\n      const isSelected = selectedOptions.includes(optionId);\n\n      if (addOn.is_mutually_exclusive || !addOn.is_multiple_allowed) {\n        const groupOptionIds = new Set(addOn.options.map((o) => o.id));\n        const withoutGroup = selectedOptions.filter((id) => !groupOptionIds.has(id));\n\n        if (isSelected) {\n          if (!addOn.is_required) {\n            onOptionsChange(withoutGroup);\n          }\n        } else {\n          onOptionsChange([...withoutGroup, optionId]);\n        }\n      } else {\n        if (isSelected) {\n          onOptionsChange(selectedOptions.filter((id) => id !== optionId));\n        } else {\n          const currentCount = selectedOptions.filter((id) =>\n            addOn.options.some((o) => o.id === id),\n          ).length;\n\n          if (addOn.max_selections && currentCount >= addOn.max_selections) {\n            return;\n          }\n\n          onOptionsChange([...selectedOptions, optionId]);\n        }\n      }\n    },\n    [selectedOptions, onOptionsChange],\n  );\n\n  if (!addOns || addOns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-addon-selector className={className}>\n      {addOns.map((addOn) => {\n        const currentSelections = selectedOptions.filter((id) =>\n          addOn.options.some((o) => o.id === id),\n        ).length;\n        const minMet = !addOn.min_selections || currentSelections >= addOn.min_selections;\n        const isSingleSelect = addOn.is_mutually_exclusive || !addOn.is_multiple_allowed;\n\n        return (\n          <div key={addOn.id} data-cimplify-addon-group>\n            {/* Group header */}\n            <div data-cimplify-addon-header>\n              <div>\n                <span data-cimplify-addon-name>\n                  {addOn.name}\n                  {addOn.is_required && <span data-cimplify-addon-required> *</span>}\n                </span>\n                {(addOn.min_selections || addOn.max_selections) && (\n                  <span data-cimplify-addon-constraint>\n                    {addOn.min_selections && addOn.max_selections\n                      ? `Choose ${addOn.min_selections}\\u2013${addOn.max_selections}`\n                      : addOn.min_selections\n                        ? `Choose at least ${addOn.min_selections}`\n                        : `Choose up to ${addOn.max_selections}`}\n                  </span>\n                )}\n              </div>\n              {!minMet && <span data-cimplify-addon-validation>Required</span>}\n            </div>\n\n            {/* Options */}\n            <div data-cimplify-addon-options>\n              {addOn.options.map((option) => {\n                const isSelected = isOptionSelected(option.id);\n\n                return (\n                  <button\n                    key={option.id}\n                    type=\"button\"\n                    role={isSingleSelect ? \"radio\" : \"checkbox\"}\n                    aria-checked={isSelected}\n                    onClick={() => toggleOption(addOn, option.id)}\n                    data-cimplify-addon-option\n                    data-selected={isSelected || undefined}\n                  >\n                    <span data-cimplify-addon-option-name>{option.name}</span>\n\n                    {option.default_price != null && option.default_price !== 0 && (\n                      <Price\n                        amount={option.default_price}\n                        prefix=\"+\"\n                      />\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/availability-badge.json

@@ -0,0 +1,15 @@
+{
+  "name": "availability-badge",
+  "title": "AvailabilityBadge",
+  "description": "Displays in-stock / out-of-stock status for tracked products.",
+  "type": "component",
+  "registryDependencies": [
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "availability-badge.tsx",
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface AvailabilityBadgeClassNames {\n  root?: string;\n  dot?: string;\n  label?: string;\n}\n\nexport interface AvailabilityBadgeProps {\n  /** The product to check availability for. */\n  product: Product;\n  /** Override availability (e.g. from location_availability). */\n  isAvailable?: boolean;\n  /** Override stock status (e.g. from location_availability). */\n  isInStock?: boolean;\n  className?: string;\n  classNames?: AvailabilityBadgeClassNames;\n}\n\n/**\n * AvailabilityBadge — displays in-stock / out-of-stock status for tracked products.\n *\n * Returns `null` for products that don't have inventory tracking enabled,\n * since there's no meaningful stock state to show.\n */\nexport function AvailabilityBadge({\n  product,\n  isAvailable,\n  isInStock,\n  className,\n  classNames,\n}: AvailabilityBadgeProps): React.ReactElement | null {\n  if (product.is_tracked !== true) {\n    return null;\n  }\n\n  const outOfStock = isInStock === false || isAvailable === false;\n  const stockState = outOfStock ? \"out_of_stock\" : \"in_stock\";\n  const label = outOfStock ? \"Out of Stock\" : \"In Stock\";\n\n  return (\n    <span\n      data-cimplify-availability-badge\n      data-stock-state={stockState}\n      className={cn(className, classNames?.root)}\n      style={{ display: \"inline-flex\", alignItems: \"center\", gap: \"0.375rem\" }}\n    >\n      <span\n        data-cimplify-availability-dot\n        className={classNames?.dot}\n        style={{\n          display: \"inline-block\",\n          width: \"0.5rem\",\n          height: \"0.5rem\",\n          borderRadius: \"9999px\",\n        }}\n      />\n      <span data-cimplify-availability-label className={classNames?.label}>\n        {label}\n      </span>\n    </span>\n  );\n}\n"
+    }
+  ]
+}

package/registry/booking-card.json

@@ -0,0 +1,16 @@
+{
+  "name": "booking-card",
+  "title": "BookingCard",
+  "description": "Single booking display with status, time, and action buttons.",
+  "type": "component",
+  "registryDependencies": [
+    "price",
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "booking-card.tsx",
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { CustomerBooking, BookingStatus } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BookingCardClassNames {\n  root?: string;\n  service?: string;\n  status?: string;\n  time?: string;\n  confirmationCode?: string;\n  total?: string;\n  actions?: string;\n  cancelButton?: string;\n  rescheduleButton?: string;\n}\n\nexport interface BookingCardProps {\n  /** The booking to display. */\n  booking: CustomerBooking;\n  /** Called when cancel is clicked. */\n  onCancel?: (booking: CustomerBooking) => void;\n  /** Called when reschedule is clicked. */\n  onReschedule?: (booking: CustomerBooking) => void;\n  /** Custom renderer for the booking. */\n  renderBooking?: (booking: CustomerBooking) => React.ReactNode;\n  className?: string;\n  classNames?: BookingCardClassNames;\n}\n\nconst STATUS_LABELS: Record<string, string> = {\n  pending: \"Pending\",\n  confirmed: \"Confirmed\",\n  in_progress: \"In Progress\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  no_show: \"No Show\",\n};\n\nfunction isActiveStatus(status: BookingStatus): boolean {\n  const s = String(status).toLowerCase();\n  return s !== \"completed\" && s !== \"cancelled\" && s !== \"no_show\";\n}\n\nfunction getFirstServiceItem(booking: CustomerBooking) {\n  return booking.service_items[0] ?? null;\n}\n\nfunction formatScheduledTime(start?: string | null, end?: string | null): string | null {\n  if (!start) return null;\n  try {\n    const startDate = new Date(start);\n    const options: Intl.DateTimeFormatOptions = {\n      month: \"short\",\n      day: \"numeric\",\n      hour: \"numeric\",\n      minute: \"2-digit\",\n    };\n    let formatted = startDate.toLocaleString(undefined, options);\n    if (end) {\n      const endDate = new Date(end);\n      formatted += ` – ${endDate.toLocaleTimeString(undefined, { hour: \"numeric\", minute: \"2-digit\" })}`;\n    }\n    return formatted;\n  } catch {\n    return start;\n  }\n}\n\nexport function BookingCard({\n  booking,\n  onCancel,\n  onReschedule,\n  renderBooking,\n  className,\n  classNames,\n}: BookingCardProps): React.ReactElement {\n  if (renderBooking) {\n    return (\n      <div\n        data-cimplify-booking-card\n        data-status={booking.status}\n        className={cn(className, classNames?.root)}\n      >\n        {renderBooking(booking)}\n      </div>\n    );\n  }\n\n  const firstItem = getFirstServiceItem(booking);\n  const active = isActiveStatus(booking.status);\n  const scheduledTime = firstItem\n    ? formatScheduledTime(firstItem.scheduled_start, firstItem.scheduled_end)\n    : null;\n\n  return (\n    <div\n      data-cimplify-booking-card\n      data-status={booking.status}\n      className={cn(className, classNames?.root)}\n    >\n      <div data-cimplify-booking-main>\n        <span data-cimplify-booking-service className={classNames?.service}>\n          Booking #{booking.order_id.slice(0, 8)}\n        </span>\n        <span\n          data-cimplify-booking-status\n          data-status={booking.status}\n          className={classNames?.status}\n        >\n          {STATUS_LABELS[booking.status] ?? booking.status}\n        </span>\n      </div>\n\n      {firstItem?.confirmation_code && (\n        <span data-cimplify-booking-code className={classNames?.confirmationCode}>\n          {firstItem.confirmation_code}\n        </span>\n      )}\n\n      {scheduledTime && (\n        <time data-cimplify-booking-time className={classNames?.time}>\n          {scheduledTime}\n        </time>\n      )}\n\n      <span data-cimplify-booking-total className={classNames?.total}>\n        <Price amount={booking.total_price} />\n      </span>\n\n      {active && (onCancel || onReschedule) && (\n        <div data-cimplify-booking-actions className={classNames?.actions}>\n          {onReschedule && (\n            <button\n              type=\"button\"\n              onClick={() => onReschedule(booking)}\n              data-cimplify-booking-reschedule\n              className={classNames?.rescheduleButton}\n            >\n              Reschedule\n            </button>\n          )}\n          {onCancel && (\n            <button\n              type=\"button\"\n              onClick={() => onCancel(booking)}\n              data-cimplify-booking-cancel\n              className={classNames?.cancelButton}\n            >\n              Cancel\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/booking-list.json

@@ -0,0 +1,16 @@
+{
+  "name": "booking-list",
+  "title": "BookingList",
+  "description": "List of booking cards with optional self-fetching.",
+  "type": "component",
+  "registryDependencies": [
+    "booking-card",
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "booking-list.tsx",
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { CustomerBooking } from \"@cimplify/sdk\";\nimport { useBookings } from \"@cimplify/sdk/react\";\nimport { BookingCard } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BookingListClassNames {\n  root?: string;\n  item?: string;\n  loading?: string;\n  empty?: string;\n}\n\nexport interface BookingListProps {\n  /** Pre-fetched bookings (skips fetch). */\n  bookings?: CustomerBooking[];\n  /** Filter: \"all\", \"upcoming\", or \"past\". */\n  filter?: \"all\" | \"upcoming\" | \"past\";\n  /** Called when cancel is clicked on a booking. */\n  onCancel?: (booking: CustomerBooking) => void;\n  /** Called when reschedule is clicked on a booking. */\n  onReschedule?: (booking: CustomerBooking) => void;\n  /** Called when a booking is clicked. */\n  onBookingClick?: (booking: CustomerBooking) => void;\n  /** Custom booking renderer. */\n  renderBooking?: (booking: CustomerBooking) => React.ReactNode;\n  /** Text shown when empty. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: BookingListClassNames;\n}\n\nexport function BookingList({\n  bookings: bookingsProp,\n  filter,\n  onCancel,\n  onReschedule,\n  onBookingClick,\n  renderBooking,\n  emptyMessage = \"No bookings yet\",\n  className,\n  classNames,\n}: BookingListProps): React.ReactElement {\n  const { bookings: fetched, isLoading } = useBookings({\n    filter,\n    enabled: bookingsProp === undefined,\n  });\n\n  const bookings = bookingsProp ?? fetched;\n\n  if (isLoading && bookings.length === 0) {\n    return (\n      <div\n        data-cimplify-booking-list\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (bookings.length === 0) {\n    return (\n      <div\n        data-cimplify-booking-list\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-booking-list className={cn(className, classNames?.root)}>\n      {bookings.map((booking) => (\n        <div\n          key={booking.order_id}\n          data-cimplify-booking-list-item\n          className={classNames?.item}\n          onClick={() => onBookingClick?.(booking)}\n          role={onBookingClick ? \"button\" : undefined}\n          tabIndex={onBookingClick ? 0 : undefined}\n          onKeyDown={\n            onBookingClick\n              ? (e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    onBookingClick(booking);\n                  }\n                }\n              : undefined\n          }\n        >\n          <BookingCard\n            booking={booking}\n            onCancel={onCancel}\n            onReschedule={onReschedule}\n            renderBooking={renderBooking}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/booking-page.json

@@ -0,0 +1,18 @@
+{
+  "name": "booking-page",
+  "title": "BookingPage",
+  "description": "Full booking flow with date/slot picker, staff selection, and cart integration.",
+  "type": "component",
+  "registryDependencies": [
+    "date-slot-picker",
+    "staff-picker",
+    "price",
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "booking-page.tsx",
+      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport type { Product } from \"@cimplify/sdk\";\nimport type { Service, Staff, AvailableSlot } from \"@cimplify/sdk\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport { StaffPicker } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BookingPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  serviceInfo?: string;\n  step?: string;\n  stepTitle?: string;\n  summary?: string;\n  summaryRow?: string;\n  confirmButton?: string;\n  backButton?: string;\n  error?: string;\n}\n\nexport interface BookingPageProps {\n  /** The service being booked. */\n  service: Service;\n  /** Optional staff list for staff selection step. */\n  staff?: Staff[];\n  /** Number of participants. */\n  participantCount?: number;\n  /** Page title. */\n  title?: string;\n  /** Called after successfully adding to cart. */\n  onBooked?: (slot: AvailableSlot, staffId: string | null) => void;\n  /** Called when user wants to go back. */\n  onBack?: () => void;\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  className?: string;\n  classNames?: BookingPageClassNames;\n}\n\ntype BookingStep = \"select-slot\" | \"select-staff\" | \"confirm\";\n\nexport function BookingPage({\n  service,\n  staff,\n  participantCount,\n  title,\n  onBooked,\n  onBack,\n  showPrice = true,\n  className,\n  classNames,\n}: BookingPageProps): React.ReactElement {\n  const { addItem } = useCart();\n\n  const [step, setStep] = useState<BookingStep>(\"select-slot\");\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n  const [selectedDate, setSelectedDate] = useState<string | null>(null);\n  const [selectedStaffId, setSelectedStaffId] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const hasStaffStep = staff && staff.length > 0;\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot, date: string) => {\n      setSelectedSlot(slot);\n      setSelectedDate(date);\n      setError(null);\n      if (hasStaffStep) {\n        setStep(\"select-staff\");\n      } else {\n        setStep(\"confirm\");\n      }\n    },\n    [hasStaffStep],\n  );\n\n  const handleStaffSelect = useCallback((staffId: string | null) => {\n    setSelectedStaffId(staffId);\n    setStep(\"confirm\");\n  }, []);\n\n  const handleBack = useCallback(() => {\n    setError(null);\n    if (step === \"confirm\" && hasStaffStep) {\n      setStep(\"select-staff\");\n    } else if (step === \"confirm\" || step === \"select-staff\") {\n      setStep(\"select-slot\");\n    } else {\n      onBack?.();\n    }\n  }, [step, hasStaffStep, onBack]);\n\n  const handleConfirm = useCallback(async () => {\n    if (!selectedSlot || !selectedDate) return;\n\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      const serviceProduct = {\n        id: service.product_id || service.id,\n        business_id: service.business_id || \"\",\n        category_id: service.category_id || undefined,\n        name: service.name,\n        slug: service.id,\n        description: service.description || undefined,\n        image_url: service.image_url || undefined,\n        default_price: (service.price || \"0\") as Product[\"default_price\"],\n        type: \"service\" as const,\n        inventory_type: \"none\" as const,\n        variant_strategy: \"fetch_all\" as const,\n        is_active: service.is_available,\n        created_at: new Date().toISOString(),\n        updated_at: new Date().toISOString(),\n      };\n\n      await addItem(serviceProduct, 1, {\n        scheduledStart: selectedSlot.start_time,\n        scheduledEnd: selectedSlot.end_time,\n        staffId: selectedStaffId || undefined,\n      });\n\n      onBooked?.(selectedSlot, selectedStaffId);\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Failed to add booking to cart\");\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [selectedSlot, selectedDate, selectedStaffId, service, addItem, onBooked]);\n\n  return (\n    <div data-cimplify-booking-page className={cn(className, classNames?.root)}>\n      <div data-cimplify-booking-page-header className={classNames?.header}>\n        {onBack && step === \"select-slot\" && (\n          <button\n            type=\"button\"\n            onClick={onBack}\n            data-cimplify-booking-page-back\n            className={classNames?.backButton}\n          >\n            Back\n          </button>\n        )}\n        {step !== \"select-slot\" && (\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-booking-page-back\n            className={classNames?.backButton}\n          >\n            Back\n          </button>\n        )}\n        <h1 data-cimplify-booking-page-title className={classNames?.title}>\n          {title || `Book ${service.name}`}\n        </h1>\n      </div>\n\n      <div data-cimplify-booking-service-info className={classNames?.serviceInfo}>\n        <span data-cimplify-booking-service-name>{service.name}</span>\n        <span data-cimplify-booking-service-duration>{service.duration_minutes} min</span>\n        {service.price && (\n          <span data-cimplify-booking-service-price>\n            <Price amount={service.price} />\n          </span>\n        )}\n      </div>\n\n      {error && (\n        <div data-cimplify-booking-error className={classNames?.error}>\n          {error}\n        </div>\n      )}\n\n      {step === \"select-slot\" && (\n        <div data-cimplify-booking-step=\"select-slot\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Select a date &amp; time\n          </h2>\n          <DateSlotPicker\n            serviceId={service.id}\n            participantCount={participantCount}\n            selectedSlot={selectedSlot}\n            onSlotSelect={handleSlotSelect}\n            showPrice={showPrice}\n          />\n        </div>\n      )}\n\n      {step === \"select-staff\" && staff && (\n        <div data-cimplify-booking-step=\"select-staff\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Choose a provider\n          </h2>\n          <StaffPicker\n            staff={staff}\n            selectedStaffId={selectedStaffId}\n            onStaffSelect={handleStaffSelect}\n          />\n        </div>\n      )}\n\n      {step === \"confirm\" && selectedSlot && (\n        <div data-cimplify-booking-step=\"confirm\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Confirm your booking\n          </h2>\n          <div data-cimplify-booking-summary className={classNames?.summary}>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Service</span>\n              <span>{service.name}</span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Date</span>\n              <span>{selectedDate}</span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Time</span>\n              <span>\n                {new Date(selectedSlot.start_time).toLocaleTimeString(undefined, {\n                  hour: \"numeric\",\n                  minute: \"2-digit\",\n                })}\n              </span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Duration</span>\n              <span>{service.duration_minutes} min</span>\n            </div>\n            {selectedStaffId && staff && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Provider</span>\n                <span>{staff.find((s) => s.id === selectedStaffId)?.name ?? \"Selected\"}</span>\n              </div>\n            )}\n            {(selectedSlot.price || service.price) && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Price</span>\n                <span>\n                  <Price amount={selectedSlot.price || service.price!} />\n                </span>\n              </div>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isSubmitting}\n            data-cimplify-booking-confirm\n            className={classNames?.confirmButton}\n          >\n            {isSubmitting ? \"Adding to cart…\" : \"Add to cart\"}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/bookings-page.json

@@ -0,0 +1,17 @@
+{
+  "name": "bookings-page",
+  "title": "BookingsPage",
+  "description": "Booking history with filter tabs and inline detail view.",
+  "type": "component",
+  "registryDependencies": [
+    "booking-list",
+    "booking-card",
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "bookings-page.tsx",
+      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport type { CustomerBooking } from \"@cimplify/sdk\";\nimport { BookingList } from \"@cimplify/sdk/react\";\nimport { BookingCard } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BookingsPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  filters?: string;\n  filterButton?: string;\n  list?: string;\n  detail?: string;\n  backButton?: string;\n}\n\nexport interface BookingsPageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched bookings for SSR. */\n  bookings?: CustomerBooking[];\n  /** Called when navigating to a booking detail (e.g. for routing). */\n  onBookingNavigate?: (booking: CustomerBooking) => void;\n  /** Called when cancel is clicked. */\n  onCancel?: (booking: CustomerBooking) => void;\n  /** Called when reschedule is clicked. */\n  onReschedule?: (booking: CustomerBooking) => void;\n  /** Show filter tabs. Default: true. */\n  showFilters?: boolean;\n  /** Custom booking renderer. */\n  renderBooking?: (booking: CustomerBooking) => React.ReactNode;\n  className?: string;\n  classNames?: BookingsPageClassNames;\n}\n\nconst BOOKING_FILTERS: { label: string; value: \"all\" | \"upcoming\" | \"past\" }[] = [\n  { label: \"All\", value: \"all\" },\n  { label: \"Upcoming\", value: \"upcoming\" },\n  { label: \"Past\", value: \"past\" },\n];\n\nexport function BookingsPage({\n  title = \"My Bookings\",\n  bookings: bookingsProp,\n  onBookingNavigate,\n  onCancel,\n  onReschedule,\n  showFilters = true,\n  renderBooking,\n  className,\n  classNames,\n}: BookingsPageProps): React.ReactElement {\n  const [filter, setFilter] = useState<\"all\" | \"upcoming\" | \"past\">(\"all\");\n  const [selectedBooking, setSelectedBooking] = useState<CustomerBooking | null>(null);\n\n  const handleBookingClick = useCallback(\n    (booking: CustomerBooking) => {\n      if (onBookingNavigate) {\n        onBookingNavigate(booking);\n      } else {\n        setSelectedBooking(booking);\n      }\n    },\n    [onBookingNavigate],\n  );\n\n  const handleBack = useCallback(() => {\n    setSelectedBooking(null);\n  }, []);\n\n  if (selectedBooking && !onBookingNavigate) {\n    return (\n      <div data-cimplify-bookings-page className={cn(className, classNames?.root)}>\n        <div data-cimplify-bookings-detail className={classNames?.detail}>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-bookings-back\n            className={classNames?.backButton}\n          >\n            Back to bookings\n          </button>\n          <BookingCard\n            booking={selectedBooking}\n            onCancel={onCancel}\n            onReschedule={onReschedule}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-bookings-page className={cn(className, classNames?.root)}>\n      <div data-cimplify-bookings-header className={classNames?.header}>\n        <h1 data-cimplify-bookings-title className={classNames?.title}>\n          {title}\n        </h1>\n      </div>\n\n      {showFilters && (\n        <div data-cimplify-bookings-filters className={classNames?.filters} role=\"tablist\">\n          {BOOKING_FILTERS.map((f) => (\n            <button\n              key={f.value}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={filter === f.value}\n              onClick={() => setFilter(f.value)}\n              data-cimplify-booking-filter\n              data-selected={filter === f.value || undefined}\n              className={classNames?.filterButton}\n            >\n              {f.label}\n            </button>\n          ))}\n        </div>\n      )}\n\n      <div data-cimplify-bookings-list className={classNames?.list}>\n        <BookingList\n          bookings={bookingsProp}\n          filter={filter}\n          onCancel={onCancel}\n          onReschedule={onReschedule}\n          onBookingClick={handleBookingClick}\n          renderBooking={renderBooking}\n        />\n      </div>\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/bundle-selector.json

@@ -0,0 +1,15 @@
+{
+  "name": "bundle-selector",
+  "title": "BundleSelector",
+  "description": "Bundle component picker with variant choices and price summary.",
+  "type": "component",
+  "registryDependencies": [
+    "price"
+  ],
+  "files": [
+    {
+      "path": "bundle-selector.tsx",
+      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef } from \"react\";\nimport type { BundleComponentView, BundleComponentVariantView, BundlePriceType } from \"@cimplify/sdk\";\nimport type { Money } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\n\nexport interface BundleSelectorProps {\n  components: BundleComponentView[];\n  bundlePrice?: Money;\n  discountValue?: Money;\n  pricingType?: BundlePriceType;\n  onSelectionsChange: (selections: BundleSelectionInput[]) => void;\n  onPriceChange?: (price: number) => void;\n  onReady?: (ready: boolean) => void;\n  className?: string;\n}\n\nexport function BundleSelector({\n  components,\n  bundlePrice,\n  discountValue,\n  pricingType,\n  onSelectionsChange,\n  onPriceChange,\n  onReady,\n  className,\n}: BundleSelectorProps): React.ReactElement | null {\n  const [variantChoices, setVariantChoices] = useState<Record<string, string>>({});\n  const lastComponentIds = useRef(\"\");\n\n  useEffect(() => {\n    const ids = components.map((c) => c.id).sort().join();\n    if (ids === lastComponentIds.current) return;\n    lastComponentIds.current = ids;\n\n    const defaults: Record<string, string> = {};\n    for (const comp of components) {\n      if (comp.variant_id) {\n        defaults[comp.id] = comp.variant_id;\n      } else if (comp.available_variants.length > 0) {\n        const defaultVariant =\n          comp.available_variants.find((v) => v.is_default) || comp.available_variants[0];\n        if (defaultVariant) {\n          defaults[comp.id] = defaultVariant.id;\n        }\n      }\n    }\n    setVariantChoices(defaults);\n  }, [components]);\n\n  const selections = useMemo((): BundleSelectionInput[] => {\n    return components.map((comp) => ({\n      component_id: comp.id,\n      variant_id: variantChoices[comp.id],\n      quantity: comp.quantity,\n    }));\n  }, [components, variantChoices]);\n\n  useEffect(() => {\n    onSelectionsChange(selections);\n  }, [selections, onSelectionsChange]);\n\n  useEffect(() => {\n    onReady?.(components.length > 0 && selections.length > 0);\n  }, [components, selections, onReady]);\n\n  const totalPrice = useMemo(() => {\n    if (pricingType === \"fixed\" && bundlePrice) {\n      return parsePrice(bundlePrice);\n    }\n    const componentsTotal = components.reduce((sum, comp) => {\n      return sum + getComponentPrice(comp, variantChoices[comp.id]) * comp.quantity;\n    }, 0);\n    if (pricingType === \"percentage_discount\" && discountValue) {\n      return componentsTotal * (1 - parsePrice(discountValue) / 100);\n    }\n    if (pricingType === \"fixed_discount\" && discountValue) {\n      return componentsTotal - parsePrice(discountValue);\n    }\n    return componentsTotal;\n  }, [components, variantChoices, pricingType, bundlePrice, discountValue]);\n\n  useEffect(() => {\n    onPriceChange?.(totalPrice);\n  }, [totalPrice, onPriceChange]);\n\n  const handleVariantChange = useCallback(\n    (componentId: string, variantId: string) => {\n      setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));\n    },\n    [],\n  );\n\n  if (components.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-bundle-selector className={className}>\n      <span data-cimplify-bundle-heading>Included in this bundle</span>\n\n      <div data-cimplify-bundle-components>\n        {components.map((comp) => (\n          <BundleComponentCard\n            key={comp.id}\n            component={comp}\n            selectedVariantId={variantChoices[comp.id]}\n            onVariantChange={(variantId) =>\n              handleVariantChange(comp.id, variantId)\n            }\n          />\n        ))}\n      </div>\n\n      {bundlePrice && (\n        <div data-cimplify-bundle-summary>\n          <span>Bundle price</span>\n          <Price amount={bundlePrice} />\n        </div>\n      )}\n      {discountValue && (\n        <div data-cimplify-bundle-savings>\n          <span>You save</span>\n          <Price amount={discountValue} />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction getComponentPrice(\n  component: BundleComponentView,\n  selectedVariantId: string | undefined,\n): number {\n  if (!selectedVariantId || component.available_variants.length === 0) {\n    return parsePrice(component.effective_price);\n  }\n  if (selectedVariantId === component.variant_id) {\n    return parsePrice(component.effective_price);\n  }\n  const bakedAdj = component.variant_id\n    ? component.available_variants.find((v) => v.id === component.variant_id)\n    : undefined;\n  const selectedAdj = component.available_variants.find((v) => v.id === selectedVariantId);\n  if (!selectedAdj) return parsePrice(component.effective_price);\n  return parsePrice(component.effective_price)\n    - parsePrice(bakedAdj?.price_adjustment ?? \"0\")\n    + parsePrice(selectedAdj.price_adjustment);\n}\n\ninterface BundleComponentCardProps {\n  component: BundleComponentView;\n  selectedVariantId?: string;\n  onVariantChange: (variantId: string) => void;\n}\n\nfunction BundleComponentCard({\n  component,\n  selectedVariantId,\n  onVariantChange,\n}: BundleComponentCardProps): React.ReactElement {\n  const showVariantPicker =\n    component.allow_variant_choice && component.available_variants.length > 1;\n\n  const displayPrice = useMemo(\n    () => getComponentPrice(component, selectedVariantId),\n    [component, selectedVariantId],\n  );\n\n  return (\n    <div data-cimplify-bundle-component>\n      <div data-cimplify-bundle-component-header>\n        <div>\n          {component.quantity > 1 && (\n            <span data-cimplify-bundle-component-qty>&times;{component.quantity}</span>\n          )}\n          <span data-cimplify-bundle-component-name>{component.product_name}</span>\n        </div>\n        <Price amount={displayPrice} />\n      </div>\n\n      {showVariantPicker && (\n        <div data-cimplify-bundle-variant-picker>\n          {component.available_variants.map((variant: BundleComponentVariantView) => {\n            const isSelected = selectedVariantId === variant.id;\n            const adjustment = parsePrice(variant.price_adjustment);\n\n            return (\n              <button\n                key={variant.id}\n                type=\"button\"\n                aria-pressed={isSelected}\n                onClick={() => onVariantChange(variant.id)}\n                data-cimplify-bundle-variant-option\n                data-selected={isSelected || undefined}\n              >\n                {variant.display_name}\n                {adjustment !== 0 && (\n                  <span data-cimplify-bundle-variant-adjustment>\n                    {adjustment > 0 ? \"+\" : \"\"}\n                    <Price amount={variant.price_adjustment} />\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/cart-page.json

@@ -0,0 +1,17 @@
+{
+  "name": "cart-page",
+  "title": "CartPage",
+  "description": "Full-page cart with summary, discount input, and checkout.",
+  "type": "component",
+  "registryDependencies": [
+    "cart-summary",
+    "discount-input",
+    "cn"
+  ],
+  "files": [
+    {
+      "path": "cart-page.tsx",
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { CartSummary } from \"./cart-summary\";\nimport { DiscountInput } from \"@cimplify/sdk/react\";\nimport type { DiscountValidation } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CartPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  content?: string;\n  discount?: string;\n  footer?: string;\n  checkoutButton?: string;\n  continueButton?: string;\n  empty?: string;\n}\n\nexport interface CartPageProps {\n  /** Page title. */\n  title?: string;\n  /** Called when checkout is initiated. */\n  onCheckout?: () => void;\n  /** Called when \"continue shopping\" is clicked. */\n  onContinueShopping?: () => void;\n  /** Called when a valid discount is applied. */\n  onDiscountApply?: (validation: DiscountValidation) => void;\n  /** Called when discount is removed. */\n  onDiscountClear?: () => void;\n  /** Show discount code input. Default: true. */\n  showDiscount?: boolean;\n  /** Show \"continue shopping\" link. Default: true. */\n  showContinueShopping?: boolean;\n  /** Checkout button text. */\n  checkoutLabel?: string;\n  className?: string;\n  classNames?: CartPageClassNames;\n}\n\n/**\n * CartPage — full-page cart view with summary, discount input, and checkout.\n *\n * Composes CartSummary and DiscountInput into a complete cart experience.\n */\nexport function CartPage({\n  title = \"Your Cart\",\n  onCheckout,\n  onContinueShopping,\n  onDiscountApply,\n  onDiscountClear,\n  showDiscount = true,\n  showContinueShopping = true,\n  checkoutLabel = \"Proceed to Checkout\",\n  className,\n  classNames,\n}: CartPageProps): React.ReactElement {\n  const { isEmpty, subtotal } = useCart();\n\n  return (\n    <div data-cimplify-cart-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-cart-page-header className={classNames?.header}>\n        <h1 data-cimplify-cart-page-title className={classNames?.title}>\n          {title}\n        </h1>\n        {showContinueShopping && (\n          <button\n            type=\"button\"\n            onClick={onContinueShopping}\n            data-cimplify-cart-continue\n            className={classNames?.continueButton}\n          >\n            Continue Shopping\n          </button>\n        )}\n      </div>\n\n      {/* Cart content */}\n      <div data-cimplify-cart-page-content className={classNames?.content}>\n        <CartSummary />\n\n        {/* Discount input */}\n        {showDiscount && !isEmpty && (\n          <div data-cimplify-cart-page-discount className={classNames?.discount}>\n            <DiscountInput\n              orderSubtotal={subtotal.toString()}\n              onApply={onDiscountApply}\n              onClear={onDiscountClear}\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Footer with checkout */}\n      {!isEmpty && (\n        <div data-cimplify-cart-page-footer className={classNames?.footer}>\n          <button\n            type=\"button\"\n            onClick={onCheckout}\n            data-cimplify-cart-checkout-button\n            className={classNames?.checkoutButton}\n          >\n            {checkoutLabel}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ]
+}

package/registry/cart-summary.json

@@ -0,0 +1,16 @@
+{
+  "name": "cart-summary",
+  "title": "CartSummary",
+  "description": "Cart line items with quantity controls and totals.",
+  "type": "component",
+  "registryDependencies": [
+    "price",
+    "quantity-selector"
+  ],
+  "files": [
+    {
+      "path": "cart-summary.tsx",
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { UseCartItem } from \"@cimplify/sdk/react\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { getVariantDisplayName } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { QuantitySelector } from \"@cimplify/sdk/react\";\nimport { useProductPrice } from \"@cimplify/sdk/react\";\n\nexport interface CartSummaryProps {\n  onCheckout?: () => void;\n  onItemRemove?: (itemId: string) => void;\n  onQuantityChange?: (itemId: string, quantity: number) => void;\n  emptyMessage?: string;\n  className?: string;\n}\n\nfunction CartLineItemRow({\n  item,\n  onRemove,\n  onQuantityChange,\n}: {\n  item: UseCartItem;\n  onRemove: (itemId: string) => void;\n  onQuantityChange: (itemId: string, qty: number) => void;\n}): React.ReactElement {\n  const { unitPrice } = useProductPrice({\n    product: item.product,\n    variant: item.variant,\n    addOnOptions: item.addOnOptions,\n  });\n  const hasComposite = item.compositeSelections && item.compositeSelections.length > 0;\n  const hasBundle = item.bundleSelections && item.bundleSelections.length > 0;\n\n  return (\n    <div data-cimplify-cart-item>\n      <div data-cimplify-cart-item-info>\n        <span data-cimplify-cart-item-name>{item.product.name}</span>\n\n        {item.variant && (\n          <span data-cimplify-cart-item-variant>\n            {getVariantDisplayName(item.variant, item.product.name)}\n          </span>\n        )}\n\n        {item.addOnOptions && item.addOnOptions.length > 0 && (\n          <span data-cimplify-cart-item-addons>\n            + {item.addOnOptions.map((opt) => opt.name).join(\", \")}\n          </span>\n        )}\n\n        {(hasComposite || hasBundle) && (\n          <span data-cimplify-cart-item-badge>\n            {hasComposite ? \"Custom\" : \"Bundle\"}\n          </span>\n        )}\n\n        <Price amount={unitPrice} />\n      </div>\n\n      <div data-cimplify-cart-item-controls>\n        <QuantitySelector\n          value={item.quantity}\n          onChange={(qty) => onQuantityChange(item.id, qty)}\n          min={0}\n        />\n        <button\n          type=\"button\"\n          onClick={() => onRemove(item.id)}\n          data-cimplify-cart-item-remove\n          aria-label={`Remove ${item.product.name}`}\n        >\n          Remove\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * CartSummary — renders cart line items + totals.\n *\n * NOT a drawer or modal — just the cart content. Templates wrap this in\n * their own drawer/modal shell with animations.\n */\nexport function CartSummary({\n  onCheckout,\n  onItemRemove,\n  onQuantityChange,\n  emptyMessage = \"Your cart is empty\",\n  className,\n}: CartSummaryProps): React.ReactElement {\n  const { items, itemCount, subtotal, tax, total, isEmpty, removeItem, updateQuantity } =\n    useCart();\n\n  const handleRemove = (itemId: string) => {\n    if (onItemRemove) {\n      onItemRemove(itemId);\n    } else {\n      void removeItem(itemId);\n    }\n  };\n\n  const handleQuantityChange = (itemId: string, qty: number) => {\n    if (onQuantityChange) {\n      onQuantityChange(itemId, qty);\n    } else {\n      void updateQuantity(itemId, qty);\n    }\n  };\n\n  return (\n    <div data-cimplify-cart-summary className={className}>\n      {isEmpty ? (\n        <div data-cimplify-cart-empty>\n          <p>{emptyMessage}</p>\n        </div>\n      ) : (\n        <>\n          {/* Line items */}\n          <div data-cimplify-cart-items>\n            {items.map((item) => (\n              <CartLineItemRow\n                key={item.id}\n                item={item}\n                onRemove={handleRemove}\n                onQuantityChange={handleQuantityChange}\n              />\n            ))}\n          </div>\n\n          {/* Totals */}\n          <div data-cimplify-cart-totals>\n            <div data-cimplify-cart-subtotal>\n              <span>Subtotal ({itemCount} {itemCount === 1 ? \"item\" : \"items\"})</span>\n              <Price amount={subtotal} />\n            </div>\n            <div data-cimplify-cart-tax>\n              <span>Tax</span>\n              <Price amount={tax} />\n            </div>\n            <div data-cimplify-cart-total>\n              <span>Total</span>\n              <Price amount={total} />\n            </div>\n          </div>\n\n          {onCheckout && (\n            <button\n              type=\"button\"\n              onClick={onCheckout}\n              data-cimplify-cart-checkout\n            >\n              Proceed to Checkout\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n"
+    }
+  ]
+}