@cimplify/sdk 0.9.8 → 0.9.9

package/dist/react.d.mts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { A as AdSlot, a as AdPosition, e as AdContextValue } from './ads-MkGm5l1T.mjs';
 export { c as AdConfig, g as getVariantDisplayName } from './ads-MkGm5l1T.mjs';
 import { C as CimplifyClient, Y as ProcessCheckoutResult, _ as CheckoutStatus, $ as CheckoutStatusContext, bq as Location, bn as Business, aS as Order, d as QuoteBundleSelectionInput, Q as QuoteCompositeSelectionInput, P as PriceQuote, g as QuoteUiMessage, w as ElementsOptions, cK as AuthenticatedData, cG as AddressInfo, cH as PaymentMethodInfo, s as CimplifyElements, cM as ElementsCheckoutResult, X as ProcessCheckoutOptions } from './client-D4EiM667.mjs';
-import { s as Product, d as Pagination, h as CimplifyError, t as ProductWithDetails, N as Category, aE as BundleSelectionInput, af as ComponentSelectionInput, Q as Collection, C as CurrencyCode, u as ProductVariant, x as VariantAxisWithValues, M as Money, H as AddOnWithOptions } from './payment-D58dS_E9.mjs';
+import { s as Product, d as Pagination, h as CimplifyError, t as ProductWithDetails, N as Category, aE as BundleSelectionInput, af as ComponentSelectionInput, Q as Collection, C as CurrencyCode, u as ProductVariant, x as VariantAxisWithValues, M as Money, H as AddOnWithOptions, a1 as BundleComponentView, ac as CompositeGroupView, ag as CompositePriceResult } from './payment-D58dS_E9.mjs';
 
 interface UserIdentity {
     uid: string;
@@ -420,6 +420,59 @@ interface AddOnSelectorProps {
  */
 declare function AddOnSelector({ addOns, selectedOptions, onOptionsChange, className, }: AddOnSelectorProps): React.ReactElement | null;
 
+interface BundleSelectorProps {
+    components: BundleComponentView[];
+    bundlePrice?: Money;
+    discountValue?: Money;
+    onSelectionsChange: (selections: BundleSelectionInput[]) => void;
+    onReady?: (ready: boolean) => void;
+    className?: string;
+}
+/**
+ * BundleSelector — curated product set with optional variant choices.
+ *
+ * Each bundle component shows the included product. If `allow_variant_choice`
+ * is true, the customer can pick which variant they want for that slot.
+ *
+ * Accepts pre-fetched `BundleComponentView[]` from the product detail response
+ * — no internal data fetching.
+ */
+declare function BundleSelector({ components, bundlePrice, discountValue, onSelectionsChange, onReady, className, }: BundleSelectorProps): React.ReactElement | null;
+
+interface CompositeSelectorProps {
+    compositeId: string;
+    groups: CompositeGroupView[];
+    onSelectionsChange: (selections: ComponentSelectionInput[]) => void;
+    onPriceChange?: (price: CompositePriceResult | null) => void;
+    onReady?: (ready: boolean) => void;
+    className?: string;
+}
+/**
+ * CompositeSelector — "build your own" product configurator.
+ *
+ * Renders component groups (e.g. "Choose your base", "Pick toppings") with
+ * min/max selection constraints. Calculates real-time pricing via the SDK.
+ *
+ * Accepts pre-fetched `CompositeGroupView[]` from the product detail response
+ * — no internal data fetching, only live pricing calls.
+ */
+declare function CompositeSelector({ compositeId, groups, onSelectionsChange, onPriceChange, onReady, className, }: CompositeSelectorProps): React.ReactElement | null;
+
+interface ProductCustomizerProps {
+    product: ProductWithDetails;
+    onAddToCart?: (product: ProductWithDetails, quantity: number, options: AddToCartOptions) => void | Promise<void>;
+    className?: string;
+}
+/**
+ * ProductCustomizer — full product customization + add-to-cart flow.
+ *
+ * Auto-detects product type and routes to CompositeSelector / BundleSelector /
+ * VariantSelector + AddOnSelector. Ships a built-in "Add to Cart" button with
+ * QuantitySelector. When `onAddToCart` is provided it calls that instead of
+ * using the SDK cart (escape hatch for custom logic like toasts).
+ */
+declare function ProductCustomizer({ product, onAddToCart, className, }: ProductCustomizerProps): React.ReactElement;
+
 interface ProductImageGalleryProps {
     images: string[];
     productName: string;
@@ -448,4 +501,4 @@ interface CartSummaryProps {
  */
 declare function CartSummary({ onCheckout, onItemRemove, onQuantityChange, emptyMessage, className, }: CartSummaryProps): React.ReactElement;
 
-export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, CartSummary, type CartSummaryProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, ElementsProvider, PaymentElement, Price, type PriceProps, ProductImageGallery, type ProductImageGalleryProps, QuantitySelector, type QuantitySelectorProps, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseProductOptions, type UseProductResult, type UseProductsOptions, type UseProductsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseSearchOptions, type UseSearchResult, VariantSelector, type VariantSelectorProps, useAds, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };
+export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, BundleSelector, type BundleSelectorProps, CartSummary, type CartSummaryProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CompositeSelector, type CompositeSelectorProps, ElementsProvider, PaymentElement, Price, type PriceProps, ProductCustomizer, type ProductCustomizerProps, ProductImageGallery, type ProductImageGalleryProps, QuantitySelector, type QuantitySelectorProps, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseProductOptions, type UseProductResult, type UseProductsOptions, type UseProductsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseSearchOptions, type UseSearchResult, VariantSelector, type VariantSelectorProps, useAds, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };

package/dist/react.d.ts

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { A as AdSlot, a as AdPosition, e as AdContextValue } from './ads-MkGm5l1T.js';
 export { c as AdConfig, g as getVariantDisplayName } from './ads-MkGm5l1T.js';
 import { C as CimplifyClient, Y as ProcessCheckoutResult, _ as CheckoutStatus, $ as CheckoutStatusContext, bq as Location, bn as Business, aS as Order, d as QuoteBundleSelectionInput, Q as QuoteCompositeSelectionInput, P as PriceQuote, g as QuoteUiMessage, w as ElementsOptions, cK as AuthenticatedData, cG as AddressInfo, cH as PaymentMethodInfo, s as CimplifyElements, cM as ElementsCheckoutResult, X as ProcessCheckoutOptions } from './client-CYRL8s1S.js';
-import { s as Product, d as Pagination, h as CimplifyError, t as ProductWithDetails, N as Category, aE as BundleSelectionInput, af as ComponentSelectionInput, Q as Collection, C as CurrencyCode, u as ProductVariant, x as VariantAxisWithValues, M as Money, H as AddOnWithOptions } from './payment-D58dS_E9.js';
+import { s as Product, d as Pagination, h as CimplifyError, t as ProductWithDetails, N as Category, aE as BundleSelectionInput, af as ComponentSelectionInput, Q as Collection, C as CurrencyCode, u as ProductVariant, x as VariantAxisWithValues, M as Money, H as AddOnWithOptions, a1 as BundleComponentView, ac as CompositeGroupView, ag as CompositePriceResult } from './payment-D58dS_E9.js';
 
 interface UserIdentity {
     uid: string;
@@ -420,6 +420,59 @@ interface AddOnSelectorProps {
  */
 declare function AddOnSelector({ addOns, selectedOptions, onOptionsChange, className, }: AddOnSelectorProps): React.ReactElement | null;
 
+interface BundleSelectorProps {
+    components: BundleComponentView[];
+    bundlePrice?: Money;
+    discountValue?: Money;
+    onSelectionsChange: (selections: BundleSelectionInput[]) => void;
+    onReady?: (ready: boolean) => void;
+    className?: string;
+}
+/**
+ * BundleSelector — curated product set with optional variant choices.
+ *
+ * Each bundle component shows the included product. If `allow_variant_choice`
+ * is true, the customer can pick which variant they want for that slot.
+ *
+ * Accepts pre-fetched `BundleComponentView[]` from the product detail response
+ * — no internal data fetching.
+ */
+declare function BundleSelector({ components, bundlePrice, discountValue, onSelectionsChange, onReady, className, }: BundleSelectorProps): React.ReactElement | null;
+
+interface CompositeSelectorProps {
+    compositeId: string;
+    groups: CompositeGroupView[];
+    onSelectionsChange: (selections: ComponentSelectionInput[]) => void;
+    onPriceChange?: (price: CompositePriceResult | null) => void;
+    onReady?: (ready: boolean) => void;
+    className?: string;
+}
+/**
+ * CompositeSelector — "build your own" product configurator.
+ *
+ * Renders component groups (e.g. "Choose your base", "Pick toppings") with
+ * min/max selection constraints. Calculates real-time pricing via the SDK.
+ *
+ * Accepts pre-fetched `CompositeGroupView[]` from the product detail response
+ * — no internal data fetching, only live pricing calls.
+ */
+declare function CompositeSelector({ compositeId, groups, onSelectionsChange, onPriceChange, onReady, className, }: CompositeSelectorProps): React.ReactElement | null;
+
+interface ProductCustomizerProps {
+    product: ProductWithDetails;
+    onAddToCart?: (product: ProductWithDetails, quantity: number, options: AddToCartOptions) => void | Promise<void>;
+    className?: string;
+}
+/**
+ * ProductCustomizer — full product customization + add-to-cart flow.
+ *
+ * Auto-detects product type and routes to CompositeSelector / BundleSelector /
+ * VariantSelector + AddOnSelector. Ships a built-in "Add to Cart" button with
+ * QuantitySelector. When `onAddToCart` is provided it calls that instead of
+ * using the SDK cart (escape hatch for custom logic like toasts).
+ */
+declare function ProductCustomizer({ product, onAddToCart, className, }: ProductCustomizerProps): React.ReactElement;
+
 interface ProductImageGalleryProps {
     images: string[];
     productName: string;
@@ -448,4 +501,4 @@ interface CartSummaryProps {
  */
 declare function CartSummary({ onCheckout, onItemRemove, onQuantityChange, emptyMessage, className, }: CartSummaryProps): React.ReactElement;
 
-export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, CartSummary, type CartSummaryProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, ElementsProvider, PaymentElement, Price, type PriceProps, ProductImageGallery, type ProductImageGalleryProps, QuantitySelector, type QuantitySelectorProps, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseProductOptions, type UseProductResult, type UseProductsOptions, type UseProductsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseSearchOptions, type UseSearchResult, VariantSelector, type VariantSelectorProps, useAds, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };
+export { Ad, AdPosition, type AdProps, AdProvider, AdSlot, AddOnSelector, type AddOnSelectorProps, type AddToCartOptions, AddressElement, AuthElement, BundleSelector, type BundleSelectorProps, CartSummary, type CartSummaryProps, CimplifyCheckout, type CimplifyCheckoutProps, type CimplifyContextValue, CimplifyProvider, type CimplifyProviderProps, CompositeSelector, type CompositeSelectorProps, ElementsProvider, PaymentElement, Price, type PriceProps, ProductCustomizer, type ProductCustomizerProps, ProductImageGallery, type ProductImageGalleryProps, QuantitySelector, type QuantitySelectorProps, type UseCartItem, type UseCartOptions, type UseCartResult, type UseCategoriesOptions, type UseCategoriesResult, type UseCollectionOptions, type UseCollectionResult, type UseCollectionsOptions, type UseCollectionsResult, type UseLocationsOptions, type UseLocationsResult, type UseOrderOptions, type UseOrderResult, type UseProductOptions, type UseProductResult, type UseProductsOptions, type UseProductsResult, type UseQuoteInput, type UseQuoteOptions, type UseQuoteResult, type UseSearchOptions, type UseSearchResult, VariantSelector, type VariantSelectorProps, useAds, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };

package/dist/react.js

@@ -6752,6 +6752,522 @@ function AddOnSelector({
     ] }, addOn.id);
   }) });
 }
+function BundleSelector({
+  components,
+  bundlePrice,
+  discountValue,
+  onSelectionsChange,
+  onReady,
+  className
+}) {
+  const [variantChoices, setVariantChoices] = React3.useState({});
+  React3.useEffect(() => {
+    const defaults = {};
+    for (const comp of components) {
+      if (comp.variant_id) {
+        defaults[comp.id] = comp.variant_id;
+      } else if (comp.available_variants.length > 0) {
+        const defaultVariant = comp.available_variants.find((v) => v.is_default) || comp.available_variants[0];
+        if (defaultVariant) {
+          defaults[comp.id] = defaultVariant.id;
+        }
+      }
+    }
+    setVariantChoices(defaults);
+  }, [components]);
+  const selections = React3.useMemo(() => {
+    return components.map((comp) => ({
+      component_id: comp.id,
+      variant_id: variantChoices[comp.id],
+      quantity: comp.quantity
+    }));
+  }, [components, variantChoices]);
+  React3.useEffect(() => {
+    onSelectionsChange(selections);
+  }, [selections, onSelectionsChange]);
+  React3.useEffect(() => {
+    onReady?.(components.length > 0 && selections.length > 0);
+  }, [components, selections, onReady]);
+  const handleVariantChange = React3.useCallback(
+    (componentId, variantId) => {
+      setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));
+    },
+    []
+  );
+  if (components.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-selector": true, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-bundle-heading": true, children: "Included in this bundle" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-components": true, children: components.map((comp) => /* @__PURE__ */ jsxRuntime.jsx(
+      BundleComponentCard,
+      {
+        component: comp,
+        selectedVariantId: variantChoices[comp.id],
+        onVariantChange: (variantId) => handleVariantChange(comp.id, variantId)
+      },
+      comp.id
+    )) }),
+    bundlePrice && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-summary": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Bundle price" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: bundlePrice })
+    ] }),
+    discountValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-savings": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "You save" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: discountValue })
+    ] })
+  ] });
+}
+function BundleComponentCard({
+  component,
+  selectedVariantId,
+  onVariantChange
+}) {
+  const showVariantPicker = component.allow_variant_choice && component.available_variants.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bundle-component": true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-component-header": true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      component.quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-bundle-component-qty": true, children: [
+        "\xD7",
+        component.quantity
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-bundle-component-name": true, children: component.product_name })
+    ] }) }),
+    showVariantPicker && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bundle-variant-picker": true, children: component.available_variants.map((variant) => {
+      const isSelected = selectedVariantId === variant.id;
+      const adjustment = parsePrice(variant.price_adjustment);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-selected": isSelected,
+          onClick: () => onVariantChange(variant.id),
+          "data-cimplify-bundle-variant-option": true,
+          "data-selected": isSelected || void 0,
+          children: [
+            variant.display_name,
+            adjustment !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-bundle-variant-adjustment": true, children: [
+              adjustment > 0 ? "+" : "",
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: variant.price_adjustment })
+            ] })
+          ]
+        },
+        variant.id
+      );
+    }) })
+  ] });
+}
+function CompositeSelector({
+  compositeId,
+  groups,
+  onSelectionsChange,
+  onPriceChange,
+  onReady,
+  className
+}) {
+  const { client } = useCimplify();
+  const [groupSelections, setGroupSelections] = React3.useState({});
+  const [priceResult, setPriceResult] = React3.useState(null);
+  const [isPriceLoading, setIsPriceLoading] = React3.useState(false);
+  const selections = React3.useMemo(() => {
+    const result = [];
+    for (const groupSels of Object.values(groupSelections)) {
+      for (const [componentId, qty] of Object.entries(groupSels)) {
+        if (qty > 0) {
+          result.push({ component_id: componentId, quantity: qty });
+        }
+      }
+    }
+    return result;
+  }, [groupSelections]);
+  React3.useEffect(() => {
+    onSelectionsChange(selections);
+  }, [selections, onSelectionsChange]);
+  React3.useEffect(() => {
+    onPriceChange?.(priceResult);
+  }, [priceResult, onPriceChange]);
+  const allGroupsSatisfied = React3.useMemo(() => {
+    for (const group of groups) {
+      const groupSels = groupSelections[group.id] || {};
+      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+      if (totalSelected < group.min_selections) return false;
+    }
+    return true;
+  }, [groups, groupSelections]);
+  React3.useEffect(() => {
+    onReady?.(allGroupsSatisfied);
+  }, [allGroupsSatisfied, onReady]);
+  React3.useEffect(() => {
+    if (!allGroupsSatisfied || selections.length === 0) return;
+    let cancelled = false;
+    setIsPriceLoading(true);
+    void client.catalogue.calculateCompositePrice(compositeId, selections).then((result) => {
+      if (cancelled) return;
+      if (result.ok) {
+        setPriceResult(result.value);
+      }
+    }).finally(() => {
+      if (!cancelled) setIsPriceLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selections, allGroupsSatisfied, compositeId, client]);
+  const toggleComponent = React3.useCallback(
+    (group, component) => {
+      setGroupSelections((prev) => {
+        const groupSels = { ...prev[group.id] || {} };
+        const currentQty = groupSels[component.id] || 0;
+        if (currentQty > 0) {
+          if (group.min_selections > 0) {
+            const totalOthers = Object.entries(groupSels).filter(([id]) => id !== component.id).reduce((sum, [, q]) => sum + q, 0);
+            if (totalOthers < group.min_selections) {
+              return prev;
+            }
+          }
+          delete groupSels[component.id];
+        } else {
+          const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+          if (group.max_selections && totalSelected >= group.max_selections) {
+            if (group.max_selections === 1) {
+              return { ...prev, [group.id]: { [component.id]: 1 } };
+            }
+            return prev;
+          }
+          groupSels[component.id] = 1;
+        }
+        return { ...prev, [group.id]: groupSels };
+      });
+    },
+    []
+  );
+  const updateQuantity = React3.useCallback(
+    (group, componentId, delta) => {
+      setGroupSelections((prev) => {
+        const groupSels = { ...prev[group.id] || {} };
+        const current = groupSels[componentId] || 0;
+        const next = Math.max(0, current + delta);
+        if (group.max_quantity_per_component && next > group.max_quantity_per_component) {
+          return prev;
+        }
+        if (next === 0) {
+          delete groupSels[componentId];
+        } else {
+          groupSels[componentId] = next;
+        }
+        return { ...prev, [group.id]: groupSels };
+      });
+    },
+    []
+  );
+  if (groups.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-selector": true, className, children: [
+    [...groups].sort((a, b) => a.display_order - b.display_order).map((group) => {
+      const groupSels = groupSelections[group.id] || {};
+      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+      const minMet = totalSelected >= group.min_selections;
+      const isSingleSelect = group.max_selections === 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-group": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-group-header": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-composite-group-name": true, children: [
+              group.name,
+              group.min_selections > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-required": true, children: " *" })
+            ] }),
+            group.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-group-description": true, children: group.description }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-group-constraint": true, children: group.min_selections > 0 && group.max_selections ? `Choose ${group.min_selections}\u2013${group.max_selections}` : group.min_selections > 0 ? `Choose at least ${group.min_selections}` : group.max_selections ? `Choose up to ${group.max_selections}` : "Choose as many as you like" })
+          ] }),
+          !minMet && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-validation": true, children: "Required" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-components": true, children: group.components.filter((c) => c.is_available && !c.is_archived).sort((a, b) => a.display_order - b.display_order).map((component) => {
+          const qty = groupSels[component.id] || 0;
+          const isSelected = qty > 0;
+          const displayName = component.display_name || component.id;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: isSingleSelect ? "radio" : "checkbox",
+              "aria-checked": isSelected,
+              onClick: () => toggleComponent(group, component),
+              "data-cimplify-composite-component": true,
+              "data-selected": isSelected || void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-component-info": true, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-component-name": true, children: displayName }),
+                  component.is_popular && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-badge": "popular", children: "Popular" }),
+                  component.is_premium && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-badge": "premium", children: "Premium" }),
+                  component.display_description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-composite-component-description": true, children: component.display_description }),
+                  component.calories != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-composite-component-calories": true, children: [
+                    component.calories,
+                    " cal"
+                  ] })
+                ] }),
+                group.allow_quantity && isSelected && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    "data-cimplify-composite-qty": true,
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => updateQuantity(group, component.id, -1),
+                          "aria-label": `Decrease ${displayName} quantity`,
+                          children: "\u2212"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: qty }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => updateQuantity(group, component.id, 1),
+                          "aria-label": `Increase ${displayName} quantity`,
+                          children: "+"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                component.price && component.price !== "0" && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
+              ]
+            },
+            component.id
+          );
+        }) })
+      ] }, group.id);
+    }),
+    priceResult && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary": true, children: [
+      priceResult.base_price !== "0" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Base" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.base_price })
+      ] }),
+      priceResult.components_total !== "0" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Selections" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.components_total })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-composite-summary-total": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: priceResult.final_price })
+      ] })
+    ] }),
+    isPriceLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-composite-calculating": true, children: "Calculating price..." })
+  ] });
+}
+function ProductCustomizer({
+  product,
+  onAddToCart,
+  className
+}) {
+  const [quantity, setQuantity] = React3.useState(1);
+  const [isAdded, setIsAdded] = React3.useState(false);
+  const [isSubmitting, setIsSubmitting] = React3.useState(false);
+  const [selectedVariantId, setSelectedVariantId] = React3.useState();
+  const [selectedVariant, setSelectedVariant] = React3.useState();
+  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = React3.useState([]);
+  const [compositeSelections, setCompositeSelections] = React3.useState([]);
+  const [compositePrice, setCompositePrice] = React3.useState(null);
+  const [compositeReady, setCompositeReady] = React3.useState(false);
+  const [bundleSelections, setBundleSelections] = React3.useState([]);
+  const [bundleReady, setBundleReady] = React3.useState(false);
+  const cart = useCart();
+  const productType = product.type || "product";
+  const isComposite = productType === "composite";
+  const isBundle = productType === "bundle";
+  const isStandard = !isComposite && !isBundle;
+  const hasVariants = isStandard && product.variants && product.variants.length > 0;
+  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;
+  React3.useEffect(() => {
+    setQuantity(1);
+    setIsAdded(false);
+    setIsSubmitting(false);
+    setSelectedVariantId(void 0);
+    setSelectedVariant(void 0);
+    setSelectedAddOnOptionIds([]);
+    setCompositeSelections([]);
+    setCompositePrice(null);
+    setCompositeReady(false);
+    setBundleSelections([]);
+    setBundleReady(false);
+  }, [product.id]);
+  const selectedAddOnOptions = React3.useMemo(() => {
+    if (!product.add_ons) return [];
+    const options = [];
+    for (const addOn of product.add_ons) {
+      for (const option of addOn.options) {
+        if (selectedAddOnOptionIds.includes(option.id)) {
+          options.push(option);
+        }
+      }
+    }
+    return options;
+  }, [product.add_ons, selectedAddOnOptionIds]);
+  const normalizedAddOnOptionIds = React3.useMemo(() => {
+    if (selectedAddOnOptionIds.length === 0) return [];
+    return Array.from(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).sort();
+  }, [selectedAddOnOptionIds]);
+  const localTotalPrice = React3.useMemo(() => {
+    if (isComposite && compositePrice) {
+      return parsePrice(compositePrice.final_price) * quantity;
+    }
+    let price = parsePrice(product.default_price);
+    if (selectedVariant?.price_adjustment) {
+      price += parsePrice(selectedVariant.price_adjustment);
+    }
+    for (const option of selectedAddOnOptions) {
+      if (option.default_price) {
+        price += parsePrice(option.default_price);
+      }
+    }
+    return price * quantity;
+  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice]);
+  const requiredAddOnsSatisfied = React3.useMemo(() => {
+    if (!product.add_ons) return true;
+    for (const addOn of product.add_ons) {
+      if (addOn.is_required) {
+        const selectedInGroup = selectedAddOnOptionIds.filter(
+          (id) => addOn.options.some((opt) => opt.id === id)
+        ).length;
+        const minRequired = addOn.min_selections || 1;
+        if (selectedInGroup < minRequired) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [product.add_ons, selectedAddOnOptionIds]);
+  const quoteInput = React3.useMemo(
+    () => ({
+      productId: product.id,
+      quantity,
+      variantId: selectedVariantId,
+      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : void 0
+    }),
+    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds]
+  );
+  const { quote } = useQuote(quoteInput, {
+    enabled: isStandard && requiredAddOnsSatisfied
+  });
+  const quoteId = quote?.quote_id;
+  const quotedTotalPrice = React3.useMemo(() => {
+    if (!quote) return void 0;
+    const quotedTotal = quote.quoted_total_price_info?.final_price ?? quote.final_price_info.final_price;
+    return quotedTotal === void 0 || quotedTotal === null ? void 0 : parsePrice(quotedTotal);
+  }, [quote]);
+  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;
+  const canAddToCart = React3.useMemo(() => {
+    if (isComposite) return compositeReady;
+    if (isBundle) return bundleReady;
+    return requiredAddOnsSatisfied;
+  }, [isComposite, isBundle, compositeReady, bundleReady, requiredAddOnsSatisfied]);
+  const handleVariantChange = React3.useCallback(
+    (variantId, variant) => {
+      setSelectedVariantId(variantId);
+      setSelectedVariant(variant);
+    },
+    []
+  );
+  const handleAddToCart = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+    const options = {
+      variantId: selectedVariantId,
+      variant: selectedVariant ? { id: selectedVariant.id, name: selectedVariant.name || "", price_adjustment: selectedVariant.price_adjustment } : void 0,
+      quoteId,
+      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : void 0,
+      addOnOptions: selectedAddOnOptions.length > 0 ? selectedAddOnOptions.map((opt) => ({
+        id: opt.id,
+        name: opt.name,
+        add_on_id: opt.add_on_id,
+        default_price: opt.default_price
+      })) : void 0,
+      compositeSelections: isComposite && compositeSelections.length > 0 ? compositeSelections : void 0,
+      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : void 0
+    };
+    try {
+      if (onAddToCart) {
+        await onAddToCart(product, quantity, options);
+      } else {
+        await cart.addItem(product, quantity, options);
+      }
+      setIsAdded(true);
+      setTimeout(() => {
+        setIsAdded(false);
+        setQuantity(1);
+      }, 2e3);
+    } catch {
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer": true, className, children: [
+    isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsxRuntime.jsx(
+      CompositeSelector,
+      {
+        compositeId: product.composite_id,
+        groups: product.groups,
+        onSelectionsChange: setCompositeSelections,
+        onPriceChange: setCompositePrice,
+        onReady: setCompositeReady
+      }
+    ),
+    isBundle && product.components && /* @__PURE__ */ jsxRuntime.jsx(
+      BundleSelector,
+      {
+        components: product.components,
+        bundlePrice: product.bundle_price,
+        discountValue: product.discount_value,
+        onSelectionsChange: setBundleSelections,
+        onReady: setBundleReady
+      }
+    ),
+    hasVariants && /* @__PURE__ */ jsxRuntime.jsx(
+      VariantSelector,
+      {
+        variants: product.variants,
+        variantAxes: product.variant_axes,
+        basePrice: product.default_price,
+        selectedVariantId,
+        onVariantChange: handleVariantChange
+      }
+    ),
+    hasAddOns && /* @__PURE__ */ jsxRuntime.jsx(
+      AddOnSelector,
+      {
+        addOns: product.add_ons,
+        selectedOptions: selectedAddOnOptionIds,
+        onOptionsChange: setSelectedAddOnOptionIds
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer-actions": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        QuantitySelector,
+        {
+          value: quantity,
+          onChange: setQuantity,
+          min: 1
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleAddToCart,
+          disabled: isAdded || isSubmitting || !canAddToCart,
+          "data-cimplify-customizer-submit": true,
+          children: isAdded ? "Added to Cart" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            "Add to Cart \xB7 ",
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: displayTotalPrice })
+          ] })
+        }
+      )
+    ] }),
+    !canAddToCart && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-customizer-validation": true, children: "Please select all required options" })
+  ] });
+}
 var ASPECT_STYLES = {
   square: { aspectRatio: "1/1" },
   "4/3": { aspectRatio: "4/3" },
@@ -6933,12 +7449,15 @@ exports.AdProvider = AdProvider;
 exports.AddOnSelector = AddOnSelector;
 exports.AddressElement = AddressElement;
 exports.AuthElement = AuthElement;
+exports.BundleSelector = BundleSelector;
 exports.CartSummary = CartSummary;
 exports.CimplifyCheckout = CimplifyCheckout;
 exports.CimplifyProvider = CimplifyProvider;
+exports.CompositeSelector = CompositeSelector;
 exports.ElementsProvider = ElementsProvider;
 exports.PaymentElement = PaymentElement;
 exports.Price = Price;
+exports.ProductCustomizer = ProductCustomizer;
 exports.ProductImageGallery = ProductImageGallery;
 exports.QuantitySelector = QuantitySelector;
 exports.VariantSelector = VariantSelector;

package/dist/react.mjs

@@ -6746,6 +6746,522 @@ function AddOnSelector({
     ] }, addOn.id);
   }) });
 }
+function BundleSelector({
+  components,
+  bundlePrice,
+  discountValue,
+  onSelectionsChange,
+  onReady,
+  className
+}) {
+  const [variantChoices, setVariantChoices] = useState({});
+  useEffect(() => {
+    const defaults = {};
+    for (const comp of components) {
+      if (comp.variant_id) {
+        defaults[comp.id] = comp.variant_id;
+      } else if (comp.available_variants.length > 0) {
+        const defaultVariant = comp.available_variants.find((v) => v.is_default) || comp.available_variants[0];
+        if (defaultVariant) {
+          defaults[comp.id] = defaultVariant.id;
+        }
+      }
+    }
+    setVariantChoices(defaults);
+  }, [components]);
+  const selections = useMemo(() => {
+    return components.map((comp) => ({
+      component_id: comp.id,
+      variant_id: variantChoices[comp.id],
+      quantity: comp.quantity
+    }));
+  }, [components, variantChoices]);
+  useEffect(() => {
+    onSelectionsChange(selections);
+  }, [selections, onSelectionsChange]);
+  useEffect(() => {
+    onReady?.(components.length > 0 && selections.length > 0);
+  }, [components, selections, onReady]);
+  const handleVariantChange = useCallback(
+    (componentId, variantId) => {
+      setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));
+    },
+    []
+  );
+  if (components.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-bundle-selector": true, className, children: [
+    /* @__PURE__ */ jsx("span", { "data-cimplify-bundle-heading": true, children: "Included in this bundle" }),
+    /* @__PURE__ */ jsx("div", { "data-cimplify-bundle-components": true, children: components.map((comp) => /* @__PURE__ */ jsx(
+      BundleComponentCard,
+      {
+        component: comp,
+        selectedVariantId: variantChoices[comp.id],
+        onVariantChange: (variantId) => handleVariantChange(comp.id, variantId)
+      },
+      comp.id
+    )) }),
+    bundlePrice && /* @__PURE__ */ jsxs("div", { "data-cimplify-bundle-summary": true, children: [
+      /* @__PURE__ */ jsx("span", { children: "Bundle price" }),
+      /* @__PURE__ */ jsx(Price, { amount: bundlePrice })
+    ] }),
+    discountValue && /* @__PURE__ */ jsxs("div", { "data-cimplify-bundle-savings": true, children: [
+      /* @__PURE__ */ jsx("span", { children: "You save" }),
+      /* @__PURE__ */ jsx(Price, { amount: discountValue })
+    ] })
+  ] });
+}
+function BundleComponentCard({
+  component,
+  selectedVariantId,
+  onVariantChange
+}) {
+  const showVariantPicker = component.allow_variant_choice && component.available_variants.length > 1;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-bundle-component": true, children: [
+    /* @__PURE__ */ jsx("div", { "data-cimplify-bundle-component-header": true, children: /* @__PURE__ */ jsxs("div", { children: [
+      component.quantity > 1 && /* @__PURE__ */ jsxs("span", { "data-cimplify-bundle-component-qty": true, children: [
+        "\xD7",
+        component.quantity
+      ] }),
+      /* @__PURE__ */ jsx("span", { "data-cimplify-bundle-component-name": true, children: component.product_name })
+    ] }) }),
+    showVariantPicker && /* @__PURE__ */ jsx("div", { "data-cimplify-bundle-variant-picker": true, children: component.available_variants.map((variant) => {
+      const isSelected = selectedVariantId === variant.id;
+      const adjustment = parsePrice(variant.price_adjustment);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-selected": isSelected,
+          onClick: () => onVariantChange(variant.id),
+          "data-cimplify-bundle-variant-option": true,
+          "data-selected": isSelected || void 0,
+          children: [
+            variant.display_name,
+            adjustment !== 0 && /* @__PURE__ */ jsxs("span", { "data-cimplify-bundle-variant-adjustment": true, children: [
+              adjustment > 0 ? "+" : "",
+              /* @__PURE__ */ jsx(Price, { amount: variant.price_adjustment })
+            ] })
+          ]
+        },
+        variant.id
+      );
+    }) })
+  ] });
+}
+function CompositeSelector({
+  compositeId,
+  groups,
+  onSelectionsChange,
+  onPriceChange,
+  onReady,
+  className
+}) {
+  const { client } = useCimplify();
+  const [groupSelections, setGroupSelections] = useState({});
+  const [priceResult, setPriceResult] = useState(null);
+  const [isPriceLoading, setIsPriceLoading] = useState(false);
+  const selections = useMemo(() => {
+    const result = [];
+    for (const groupSels of Object.values(groupSelections)) {
+      for (const [componentId, qty] of Object.entries(groupSels)) {
+        if (qty > 0) {
+          result.push({ component_id: componentId, quantity: qty });
+        }
+      }
+    }
+    return result;
+  }, [groupSelections]);
+  useEffect(() => {
+    onSelectionsChange(selections);
+  }, [selections, onSelectionsChange]);
+  useEffect(() => {
+    onPriceChange?.(priceResult);
+  }, [priceResult, onPriceChange]);
+  const allGroupsSatisfied = useMemo(() => {
+    for (const group of groups) {
+      const groupSels = groupSelections[group.id] || {};
+      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+      if (totalSelected < group.min_selections) return false;
+    }
+    return true;
+  }, [groups, groupSelections]);
+  useEffect(() => {
+    onReady?.(allGroupsSatisfied);
+  }, [allGroupsSatisfied, onReady]);
+  useEffect(() => {
+    if (!allGroupsSatisfied || selections.length === 0) return;
+    let cancelled = false;
+    setIsPriceLoading(true);
+    void client.catalogue.calculateCompositePrice(compositeId, selections).then((result) => {
+      if (cancelled) return;
+      if (result.ok) {
+        setPriceResult(result.value);
+      }
+    }).finally(() => {
+      if (!cancelled) setIsPriceLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selections, allGroupsSatisfied, compositeId, client]);
+  const toggleComponent = useCallback(
+    (group, component) => {
+      setGroupSelections((prev) => {
+        const groupSels = { ...prev[group.id] || {} };
+        const currentQty = groupSels[component.id] || 0;
+        if (currentQty > 0) {
+          if (group.min_selections > 0) {
+            const totalOthers = Object.entries(groupSels).filter(([id]) => id !== component.id).reduce((sum, [, q]) => sum + q, 0);
+            if (totalOthers < group.min_selections) {
+              return prev;
+            }
+          }
+          delete groupSels[component.id];
+        } else {
+          const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+          if (group.max_selections && totalSelected >= group.max_selections) {
+            if (group.max_selections === 1) {
+              return { ...prev, [group.id]: { [component.id]: 1 } };
+            }
+            return prev;
+          }
+          groupSels[component.id] = 1;
+        }
+        return { ...prev, [group.id]: groupSels };
+      });
+    },
+    []
+  );
+  const updateQuantity = useCallback(
+    (group, componentId, delta) => {
+      setGroupSelections((prev) => {
+        const groupSels = { ...prev[group.id] || {} };
+        const current = groupSels[componentId] || 0;
+        const next = Math.max(0, current + delta);
+        if (group.max_quantity_per_component && next > group.max_quantity_per_component) {
+          return prev;
+        }
+        if (next === 0) {
+          delete groupSels[componentId];
+        } else {
+          groupSels[componentId] = next;
+        }
+        return { ...prev, [group.id]: groupSels };
+      });
+    },
+    []
+  );
+  if (groups.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-selector": true, className, children: [
+    [...groups].sort((a, b) => a.display_order - b.display_order).map((group) => {
+      const groupSels = groupSelections[group.id] || {};
+      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);
+      const minMet = totalSelected >= group.min_selections;
+      const isSingleSelect = group.max_selections === 1;
+      return /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-group": true, children: [
+        /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-group-header": true, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("span", { "data-cimplify-composite-group-name": true, children: [
+              group.name,
+              group.min_selections > 0 && /* @__PURE__ */ jsx("span", { "data-cimplify-composite-required": true, children: " *" })
+            ] }),
+            group.description && /* @__PURE__ */ jsx("span", { "data-cimplify-composite-group-description": true, children: group.description }),
+            /* @__PURE__ */ jsx("span", { "data-cimplify-composite-group-constraint": true, children: group.min_selections > 0 && group.max_selections ? `Choose ${group.min_selections}\u2013${group.max_selections}` : group.min_selections > 0 ? `Choose at least ${group.min_selections}` : group.max_selections ? `Choose up to ${group.max_selections}` : "Choose as many as you like" })
+          ] }),
+          !minMet && /* @__PURE__ */ jsx("span", { "data-cimplify-composite-validation": true, children: "Required" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { "data-cimplify-composite-components": true, children: group.components.filter((c) => c.is_available && !c.is_archived).sort((a, b) => a.display_order - b.display_order).map((component) => {
+          const qty = groupSels[component.id] || 0;
+          const isSelected = qty > 0;
+          const displayName = component.display_name || component.id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: isSingleSelect ? "radio" : "checkbox",
+              "aria-checked": isSelected,
+              onClick: () => toggleComponent(group, component),
+              "data-cimplify-composite-component": true,
+              "data-selected": isSelected || void 0,
+              children: [
+                /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-component-info": true, children: [
+                  /* @__PURE__ */ jsx("span", { "data-cimplify-composite-component-name": true, children: displayName }),
+                  component.is_popular && /* @__PURE__ */ jsx("span", { "data-cimplify-composite-badge": "popular", children: "Popular" }),
+                  component.is_premium && /* @__PURE__ */ jsx("span", { "data-cimplify-composite-badge": "premium", children: "Premium" }),
+                  component.display_description && /* @__PURE__ */ jsx("span", { "data-cimplify-composite-component-description": true, children: component.display_description }),
+                  component.calories != null && /* @__PURE__ */ jsxs("span", { "data-cimplify-composite-component-calories": true, children: [
+                    component.calories,
+                    " cal"
+                  ] })
+                ] }),
+                group.allow_quantity && isSelected && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    "data-cimplify-composite-qty": true,
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => updateQuantity(group, component.id, -1),
+                          "aria-label": `Decrease ${displayName} quantity`,
+                          children: "\u2212"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { children: qty }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => updateQuantity(group, component.id, 1),
+                          "aria-label": `Increase ${displayName} quantity`,
+                          children: "+"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                component.price && component.price !== "0" && /* @__PURE__ */ jsx(Price, { amount: component.price, prefix: "+" })
+              ]
+            },
+            component.id
+          );
+        }) })
+      ] }, group.id);
+    }),
+    priceResult && /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-summary": true, children: [
+      priceResult.base_price !== "0" && /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
+        /* @__PURE__ */ jsx("span", { children: "Base" }),
+        /* @__PURE__ */ jsx(Price, { amount: priceResult.base_price })
+      ] }),
+      priceResult.components_total !== "0" && /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-summary-line": true, children: [
+        /* @__PURE__ */ jsx("span", { children: "Selections" }),
+        /* @__PURE__ */ jsx(Price, { amount: priceResult.components_total })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { "data-cimplify-composite-summary-total": true, children: [
+        /* @__PURE__ */ jsx("span", { children: "Total" }),
+        /* @__PURE__ */ jsx(Price, { amount: priceResult.final_price })
+      ] })
+    ] }),
+    isPriceLoading && /* @__PURE__ */ jsx("div", { "data-cimplify-composite-calculating": true, children: "Calculating price..." })
+  ] });
+}
+function ProductCustomizer({
+  product,
+  onAddToCart,
+  className
+}) {
+  const [quantity, setQuantity] = useState(1);
+  const [isAdded, setIsAdded] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [selectedVariantId, setSelectedVariantId] = useState();
+  const [selectedVariant, setSelectedVariant] = useState();
+  const [selectedAddOnOptionIds, setSelectedAddOnOptionIds] = useState([]);
+  const [compositeSelections, setCompositeSelections] = useState([]);
+  const [compositePrice, setCompositePrice] = useState(null);
+  const [compositeReady, setCompositeReady] = useState(false);
+  const [bundleSelections, setBundleSelections] = useState([]);
+  const [bundleReady, setBundleReady] = useState(false);
+  const cart = useCart();
+  const productType = product.type || "product";
+  const isComposite = productType === "composite";
+  const isBundle = productType === "bundle";
+  const isStandard = !isComposite && !isBundle;
+  const hasVariants = isStandard && product.variants && product.variants.length > 0;
+  const hasAddOns = isStandard && product.add_ons && product.add_ons.length > 0;
+  useEffect(() => {
+    setQuantity(1);
+    setIsAdded(false);
+    setIsSubmitting(false);
+    setSelectedVariantId(void 0);
+    setSelectedVariant(void 0);
+    setSelectedAddOnOptionIds([]);
+    setCompositeSelections([]);
+    setCompositePrice(null);
+    setCompositeReady(false);
+    setBundleSelections([]);
+    setBundleReady(false);
+  }, [product.id]);
+  const selectedAddOnOptions = useMemo(() => {
+    if (!product.add_ons) return [];
+    const options = [];
+    for (const addOn of product.add_ons) {
+      for (const option of addOn.options) {
+        if (selectedAddOnOptionIds.includes(option.id)) {
+          options.push(option);
+        }
+      }
+    }
+    return options;
+  }, [product.add_ons, selectedAddOnOptionIds]);
+  const normalizedAddOnOptionIds = useMemo(() => {
+    if (selectedAddOnOptionIds.length === 0) return [];
+    return Array.from(new Set(selectedAddOnOptionIds.map((id) => id.trim()).filter(Boolean))).sort();
+  }, [selectedAddOnOptionIds]);
+  const localTotalPrice = useMemo(() => {
+    if (isComposite && compositePrice) {
+      return parsePrice(compositePrice.final_price) * quantity;
+    }
+    let price = parsePrice(product.default_price);
+    if (selectedVariant?.price_adjustment) {
+      price += parsePrice(selectedVariant.price_adjustment);
+    }
+    for (const option of selectedAddOnOptions) {
+      if (option.default_price) {
+        price += parsePrice(option.default_price);
+      }
+    }
+    return price * quantity;
+  }, [product.default_price, selectedVariant, selectedAddOnOptions, quantity, isComposite, compositePrice]);
+  const requiredAddOnsSatisfied = useMemo(() => {
+    if (!product.add_ons) return true;
+    for (const addOn of product.add_ons) {
+      if (addOn.is_required) {
+        const selectedInGroup = selectedAddOnOptionIds.filter(
+          (id) => addOn.options.some((opt) => opt.id === id)
+        ).length;
+        const minRequired = addOn.min_selections || 1;
+        if (selectedInGroup < minRequired) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [product.add_ons, selectedAddOnOptionIds]);
+  const quoteInput = useMemo(
+    () => ({
+      productId: product.id,
+      quantity,
+      variantId: selectedVariantId,
+      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : void 0
+    }),
+    [product.id, quantity, selectedVariantId, normalizedAddOnOptionIds]
+  );
+  const { quote } = useQuote(quoteInput, {
+    enabled: isStandard && requiredAddOnsSatisfied
+  });
+  const quoteId = quote?.quote_id;
+  const quotedTotalPrice = useMemo(() => {
+    if (!quote) return void 0;
+    const quotedTotal = quote.quoted_total_price_info?.final_price ?? quote.final_price_info.final_price;
+    return quotedTotal === void 0 || quotedTotal === null ? void 0 : parsePrice(quotedTotal);
+  }, [quote]);
+  const displayTotalPrice = quotedTotalPrice ?? localTotalPrice;
+  const canAddToCart = useMemo(() => {
+    if (isComposite) return compositeReady;
+    if (isBundle) return bundleReady;
+    return requiredAddOnsSatisfied;
+  }, [isComposite, isBundle, compositeReady, bundleReady, requiredAddOnsSatisfied]);
+  const handleVariantChange = useCallback(
+    (variantId, variant) => {
+      setSelectedVariantId(variantId);
+      setSelectedVariant(variant);
+    },
+    []
+  );
+  const handleAddToCart = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+    const options = {
+      variantId: selectedVariantId,
+      variant: selectedVariant ? { id: selectedVariant.id, name: selectedVariant.name || "", price_adjustment: selectedVariant.price_adjustment } : void 0,
+      quoteId,
+      addOnOptionIds: normalizedAddOnOptionIds.length > 0 ? normalizedAddOnOptionIds : void 0,
+      addOnOptions: selectedAddOnOptions.length > 0 ? selectedAddOnOptions.map((opt) => ({
+        id: opt.id,
+        name: opt.name,
+        add_on_id: opt.add_on_id,
+        default_price: opt.default_price
+      })) : void 0,
+      compositeSelections: isComposite && compositeSelections.length > 0 ? compositeSelections : void 0,
+      bundleSelections: isBundle && bundleSelections.length > 0 ? bundleSelections : void 0
+    };
+    try {
+      if (onAddToCart) {
+        await onAddToCart(product, quantity, options);
+      } else {
+        await cart.addItem(product, quantity, options);
+      }
+      setIsAdded(true);
+      setTimeout(() => {
+        setIsAdded(false);
+        setQuantity(1);
+      }, 2e3);
+    } catch {
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer": true, className, children: [
+    isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsx(
+      CompositeSelector,
+      {
+        compositeId: product.composite_id,
+        groups: product.groups,
+        onSelectionsChange: setCompositeSelections,
+        onPriceChange: setCompositePrice,
+        onReady: setCompositeReady
+      }
+    ),
+    isBundle && product.components && /* @__PURE__ */ jsx(
+      BundleSelector,
+      {
+        components: product.components,
+        bundlePrice: product.bundle_price,
+        discountValue: product.discount_value,
+        onSelectionsChange: setBundleSelections,
+        onReady: setBundleReady
+      }
+    ),
+    hasVariants && /* @__PURE__ */ jsx(
+      VariantSelector,
+      {
+        variants: product.variants,
+        variantAxes: product.variant_axes,
+        basePrice: product.default_price,
+        selectedVariantId,
+        onVariantChange: handleVariantChange
+      }
+    ),
+    hasAddOns && /* @__PURE__ */ jsx(
+      AddOnSelector,
+      {
+        addOns: product.add_ons,
+        selectedOptions: selectedAddOnOptionIds,
+        onOptionsChange: setSelectedAddOnOptionIds
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer-actions": true, children: [
+      /* @__PURE__ */ jsx(
+        QuantitySelector,
+        {
+          value: quantity,
+          onChange: setQuantity,
+          min: 1
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleAddToCart,
+          disabled: isAdded || isSubmitting || !canAddToCart,
+          "data-cimplify-customizer-submit": true,
+          children: isAdded ? "Added to Cart" : /* @__PURE__ */ jsxs(Fragment, { children: [
+            "Add to Cart \xB7 ",
+            /* @__PURE__ */ jsx(Price, { amount: displayTotalPrice })
+          ] })
+        }
+      )
+    ] }),
+    !canAddToCart && /* @__PURE__ */ jsx("p", { "data-cimplify-customizer-validation": true, children: "Please select all required options" })
+  ] });
+}
 var ASPECT_STYLES = {
   square: { aspectRatio: "1/1" },
   "4/3": { aspectRatio: "4/3" },
@@ -6922,4 +7438,4 @@ function CartSummary({
   ] }) });
 }
 
-export { Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, CartSummary, CimplifyCheckout, CimplifyProvider, ElementsProvider, PaymentElement, Price, ProductImageGallery, QuantitySelector, VariantSelector, getVariantDisplayName, useAds, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };
+export { Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, BundleSelector, CartSummary, CimplifyCheckout, CimplifyProvider, CompositeSelector, ElementsProvider, PaymentElement, Price, ProductCustomizer, ProductImageGallery, QuantitySelector, VariantSelector, getVariantDisplayName, useAds, useCart, useCategories, useCheckout, useCimplify, useCollection, useCollections, useElements, useElementsReady, useLocations, useOptionalCimplify, useOrder, useProduct, useProducts, useQuote, useSearch };

package/package.json

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