@cimplify/sdk 0.10.2 → 0.10.4

package/dist/react.js

@@ -8203,7 +8203,7 @@ function AddOnSelector({
                           children: option.name
                         }
                       ),
-                      option.default_price != null && option.default_price !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                      option.default_price != null && parsePrice(option.default_price) !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
                         Price,
                         {
                           amount: option.default_price,
@@ -8746,7 +8746,7 @@ function CompositeSelector({
                             ]
                           }
                         ),
-                        component.price != null && component.price !== 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
+                        component.price != null && parsePrice(component.price) !== 0 && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: component.price, prefix: "+" })
                       ]
                     },
                     component.id
@@ -8765,7 +8765,7 @@ function CompositeSelector({
         "data-cimplify-composite-summary": true,
         className: cn("border-t border-border pt-4 space-y-1 text-sm", classNames?.summary),
         children: [
-          priceResult.base_price !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          parsePrice(priceResult.base_price) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               "data-cimplify-composite-summary-line": true,
@@ -8776,7 +8776,7 @@ function CompositeSelector({
               ]
             }
           ),
-          priceResult.components_total !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          parsePrice(priceResult.components_total) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               "data-cimplify-composite-summary-line": true,
@@ -10175,15 +10175,15 @@ function OrderSummary({
       ] }, item.id)
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-totals": true, className: classNames?.totals, children: [
-      order.total_discount != null && order.total_discount !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-discount": true, children: [
+      order.total_discount != null && parsePrice(order.total_discount) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-discount": true, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Discount" }),
         /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: order.total_discount, prefix: "-" })
       ] }),
-      order.service_charge != null && order.service_charge !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-service-charge": true, children: [
+      order.service_charge != null && parsePrice(order.service_charge) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-service-charge": true, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Service charge" }),
         /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: order.service_charge })
       ] }),
-      order.tax != null && order.tax !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-tax": true, children: [
+      order.tax != null && parsePrice(order.tax) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-tax": true, children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tax" }),
         /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: order.tax })
       ] }),

package/dist/react.mjs

@@ -8197,7 +8197,7 @@ function AddOnSelector({
                           children: option.name
                         }
                       ),
-                      option.default_price != null && option.default_price !== 0 && /* @__PURE__ */ jsx(
+                      option.default_price != null && parsePrice(option.default_price) !== 0 && /* @__PURE__ */ jsx(
                         Price,
                         {
                           amount: option.default_price,
@@ -8740,7 +8740,7 @@ function CompositeSelector({
                             ]
                           }
                         ),
-                        component.price != null && component.price !== 0 && /* @__PURE__ */ jsx(Price, { amount: component.price, prefix: "+" })
+                        component.price != null && parsePrice(component.price) !== 0 && /* @__PURE__ */ jsx(Price, { amount: component.price, prefix: "+" })
                       ]
                     },
                     component.id
@@ -8759,7 +8759,7 @@ function CompositeSelector({
         "data-cimplify-composite-summary": true,
         className: cn("border-t border-border pt-4 space-y-1 text-sm", classNames?.summary),
         children: [
-          priceResult.base_price !== 0 && /* @__PURE__ */ jsxs(
+          parsePrice(priceResult.base_price) !== 0 && /* @__PURE__ */ jsxs(
             "div",
             {
               "data-cimplify-composite-summary-line": true,
@@ -8770,7 +8770,7 @@ function CompositeSelector({
               ]
             }
           ),
-          priceResult.components_total !== 0 && /* @__PURE__ */ jsxs(
+          parsePrice(priceResult.components_total) !== 0 && /* @__PURE__ */ jsxs(
             "div",
             {
               "data-cimplify-composite-summary-line": true,
@@ -10169,15 +10169,15 @@ function OrderSummary({
       ] }, item.id)
     ) }),
     /* @__PURE__ */ jsxs("div", { "data-cimplify-order-totals": true, className: classNames?.totals, children: [
-      order.total_discount != null && order.total_discount !== 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-order-discount": true, children: [
+      order.total_discount != null && parsePrice(order.total_discount) !== 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-order-discount": true, children: [
         /* @__PURE__ */ jsx("span", { children: "Discount" }),
         /* @__PURE__ */ jsx(Price, { amount: order.total_discount, prefix: "-" })
       ] }),
-      order.service_charge != null && order.service_charge !== 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-order-service-charge": true, children: [
+      order.service_charge != null && parsePrice(order.service_charge) !== 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-order-service-charge": true, children: [
         /* @__PURE__ */ jsx("span", { children: "Service charge" }),
         /* @__PURE__ */ jsx(Price, { amount: order.service_charge })
       ] }),
-      order.tax != null && order.tax !== 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-order-tax": true, children: [
+      order.tax != null && parsePrice(order.tax) !== 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-order-tax": true, children: [
         /* @__PURE__ */ jsx("span", { children: "Tax" }),
         /* @__PURE__ */ jsx(Price, { amount: order.tax })
       ] }),

package/dist/styles.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}.visible{visibility:visible}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.container{width:100%}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.w-full{width:100%}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-border{border-color:var(--color-border,oklch(90% 0 0))}.border-primary{border-color:var(--color-primary,oklch(50% .1 35))}.border-transparent{border-color:#0000}.bg-primary{background-color:var(--color-primary,oklch(50% .1 35))}.bg-primary\/5{background-color:#934c3a0d}@supports (color:color-mix(in lab, red, red)){.bg-primary\/5{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 5%, transparent)}}.bg-primary\/10{background-color:#934c3a1a}@supports (color:color-mix(in lab, red, red)){.bg-primary\/10{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 10%, transparent)}}.text-center{text-align:center}.text-left{text-align:left}.text-\[10px\]{font-size:10px}.text-destructive{color:var(--color-destructive,oklch(50% .2 25))}.text-muted-foreground{color:var(--color-muted-foreground,oklch(50% 0 0))}.text-muted-foreground\/60{color:#63636399}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/60{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 60%, transparent)}}.text-muted-foreground\/70{color:#636363b3}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/70{color:color-mix(in oklab, var(--color-muted-foreground,oklch(50% 0 0)) 70%, transparent)}}.text-primary{color:var(--color-primary,oklch(50% .1 35))}.text-primary-foreground{color:var(--color-primary-foreground,oklch(99% 0 0))}.uppercase{text-transform:uppercase}.opacity-70{opacity:.7}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.\[cimplify\:checkout\]{cimplify:checkout}@media (hover:hover){.hover\:border-primary\/50:hover{border-color:#934c3a80}@supports (color:color-mix(in lab, red, red)){.hover\:border-primary\/50:hover{border-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 50%, transparent)}}.hover\:bg-muted:hover{background-color:var(--color-muted,oklch(95% 0 0))}.hover\:bg-muted\/50:hover{background-color:#eeeeee80}@supports (color:color-mix(in lab, red, red)){.hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--color-muted,oklch(95% 0 0)) 50%, transparent)}}.hover\:bg-primary\/90:hover{background-color:#934c3ae6}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary,oklch(50% .1 35)) 90%, transparent)}}.hover\:text-primary:hover{color:var(--color-primary,oklch(50% .1 35))}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-30:disabled{opacity:.3}.disabled\:opacity-50:disabled{opacity:.5}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -39,10 +39,12 @@
       "types": "./dist/advanced.d.ts",
       "import": "./dist/advanced.mjs",
       "require": "./dist/advanced.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
-    "build": "tsup && bun run build:registry",
+    "build": "tsup && bun run build:css && bun run build:registry",
+    "build:css": "bunx @tailwindcss/cli -i src/styles.css -o dist/styles.css --minify",
     "build:registry": "bun scripts/build-registry.ts",
     "dev": "tsup --watch",
     "typecheck": "tsgo --noEmit",
@@ -67,6 +69,7 @@
     }
   },
   "devDependencies": {
+    "@tailwindcss/cli": "4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^25.3.2",
@@ -75,6 +78,7 @@
     "jsdom": "^28.1.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "tailwindcss": "4.1.18",
     "tsup": "^8.5.1",
     "typescript": "5.9.3",
     "vitest": "^4.0.18"

package/registry/add-on-selector.json

@@ -9,7 +9,7 @@
   "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\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface AddOnSelectorClassNames {\n  root?: string;\n  group?: string;\n  header?: string;\n  name?: string;\n  required?: string;\n  constraint?: string;\n  validation?: string;\n  options?: string;\n  option?: string;\n  optionSelected?: string;\n  optionName?: string;\n  optionDescription?: string;\n}\n\nexport interface AddOnSelectorProps {\n  addOns: AddOnWithOptions[];\n  selectedOptions: string[];\n  onOptionsChange: (optionIds: string[]) => void;\n  className?: string;\n  classNames?: AddOnSelectorClassNames;\n}\n\nexport function AddOnSelector({\n  addOns,\n  selectedOptions,\n  onOptionsChange,\n  className,\n  classNames,\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={cn(\"space-y-6\", className, classNames?.root)}>\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\n            key={addOn.id}\n            data-cimplify-addon-group\n            className={cn(\"border border-border p-5\", classNames?.group)}\n          >\n            <div\n              data-cimplify-addon-header\n              className={cn(\"flex items-center justify-between mb-4\", classNames?.header)}\n            >\n              <div>\n                <span\n                  data-cimplify-addon-name\n                  className={cn(\"text-xs font-medium uppercase tracking-wider text-muted-foreground\", classNames?.name)}\n                >\n                  {addOn.name}\n                  {addOn.is_required && (\n                    <span\n                      data-cimplify-addon-required\n                      className={cn(\"text-destructive ml-1\", classNames?.required)}\n                    >\n                      {\" \"}*\n                    </span>\n                  )}\n                </span>\n                {(addOn.min_selections || addOn.max_selections) && (\n                  <span\n                    data-cimplify-addon-constraint\n                    className={cn(\"text-xs text-muted-foreground/70 mt-1\", classNames?.constraint)}\n                  >\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 && (\n                <span\n                  data-cimplify-addon-validation\n                  className={cn(\"text-xs text-destructive font-medium\", classNames?.validation)}\n                >\n                  Required\n                </span>\n              )}\n            </div>\n\n            <div\n              data-cimplify-addon-options\n              className={cn(\"space-y-1\", classNames?.options)}\n            >\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                    className={cn(\n                      \"w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50\",\n                      isSelected && \"bg-primary/5 border-primary\",\n                      isSelected ? classNames?.optionSelected : classNames?.option,\n                    )}\n                  >\n                    <span\n                      data-cimplify-addon-option-name\n                      className={cn(\n                        \"flex-1 min-w-0 text-sm font-medium\",\n                        isSelected && \"text-primary\",\n                        classNames?.optionName,\n                      )}\n                    >\n                      {option.name}\n                    </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"
+      "content": "\"use client\";\n\nimport React, { useCallback } from \"react\";\nimport type { AddOnWithOptions } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface AddOnSelectorClassNames {\n  root?: string;\n  group?: string;\n  header?: string;\n  name?: string;\n  required?: string;\n  constraint?: string;\n  validation?: string;\n  options?: string;\n  option?: string;\n  optionSelected?: string;\n  optionName?: string;\n  optionDescription?: string;\n}\n\nexport interface AddOnSelectorProps {\n  addOns: AddOnWithOptions[];\n  selectedOptions: string[];\n  onOptionsChange: (optionIds: string[]) => void;\n  className?: string;\n  classNames?: AddOnSelectorClassNames;\n}\n\nexport function AddOnSelector({\n  addOns,\n  selectedOptions,\n  onOptionsChange,\n  className,\n  classNames,\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={cn(\"space-y-6\", className, classNames?.root)}>\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\n            key={addOn.id}\n            data-cimplify-addon-group\n            className={cn(\"border border-border p-5\", classNames?.group)}\n          >\n            <div\n              data-cimplify-addon-header\n              className={cn(\"flex items-center justify-between mb-4\", classNames?.header)}\n            >\n              <div>\n                <span\n                  data-cimplify-addon-name\n                  className={cn(\"text-xs font-medium uppercase tracking-wider text-muted-foreground\", classNames?.name)}\n                >\n                  {addOn.name}\n                  {addOn.is_required && (\n                    <span\n                      data-cimplify-addon-required\n                      className={cn(\"text-destructive ml-1\", classNames?.required)}\n                    >\n                      {\" \"}*\n                    </span>\n                  )}\n                </span>\n                {(addOn.min_selections || addOn.max_selections) && (\n                  <span\n                    data-cimplify-addon-constraint\n                    className={cn(\"text-xs text-muted-foreground/70 mt-1\", classNames?.constraint)}\n                  >\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 && (\n                <span\n                  data-cimplify-addon-validation\n                  className={cn(\"text-xs text-destructive font-medium\", classNames?.validation)}\n                >\n                  Required\n                </span>\n              )}\n            </div>\n\n            <div\n              data-cimplify-addon-options\n              className={cn(\"space-y-1\", classNames?.options)}\n            >\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                    className={cn(\n                      \"w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50\",\n                      isSelected && \"bg-primary/5 border-primary\",\n                      isSelected ? classNames?.optionSelected : classNames?.option,\n                    )}\n                  >\n                    <span\n                      data-cimplify-addon-option-name\n                      className={cn(\n                        \"flex-1 min-w-0 text-sm font-medium\",\n                        isSelected && \"text-primary\",\n                        classNames?.optionName,\n                      )}\n                    >\n                      {option.name}\n                    </span>\n\n                    {option.default_price != null && parsePrice(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/composite-selector.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "composite-selector.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect } from \"react\";\nimport type {\n  CompositeGroupView,\n  CompositeComponentView,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport { useCimplify } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CompositeSelectorClassNames {\n  root?: string;\n  group?: string;\n  groupHeader?: string;\n  groupName?: string;\n  required?: string;\n  groupDescription?: string;\n  groupConstraint?: string;\n  validation?: string;\n  components?: string;\n  component?: string;\n  componentSelected?: string;\n  componentInfo?: string;\n  componentName?: string;\n  badgePopular?: string;\n  badgePremium?: string;\n  componentDescription?: string;\n  componentCalories?: string;\n  qty?: string;\n  qtyButton?: string;\n  qtyValue?: string;\n  summary?: string;\n  summaryLine?: string;\n  summaryTotal?: string;\n  calculating?: string;\n  priceError?: string;\n}\n\nexport interface CompositeSelectorProps {\n  compositeId: string;\n  groups: CompositeGroupView[];\n  onSelectionsChange: (selections: ComponentSelectionInput[]) => void;\n  onPriceChange?: (price: CompositePriceResult | null) => void;\n  onReady?: (ready: boolean) => void;\n  skipPriceFetch?: boolean;\n  className?: string;\n  classNames?: CompositeSelectorClassNames;\n}\n\nexport function CompositeSelector({\n  compositeId,\n  groups,\n  onSelectionsChange,\n  onPriceChange,\n  onReady,\n  skipPriceFetch,\n  className,\n  classNames,\n}: CompositeSelectorProps): React.ReactElement | null {\n  const { client } = useCimplify();\n\n  const [groupSelections, setGroupSelections] = useState<\n    Record<string, Record<string, number>>\n  >({});\n  const [priceResult, setPriceResult] = useState<CompositePriceResult | null>(null);\n  const [isPriceLoading, setIsPriceLoading] = useState(false);\n  const [priceError, setPriceError] = useState(false);\n\n  const selections = useMemo((): ComponentSelectionInput[] => {\n    const result: ComponentSelectionInput[] = [];\n    for (const groupSels of Object.values(groupSelections)) {\n      for (const [componentId, qty] of Object.entries(groupSels)) {\n        if (qty > 0) {\n          result.push({ component_id: componentId, quantity: qty });\n        }\n      }\n    }\n    return result;\n  }, [groupSelections]);\n\n  useEffect(() => {\n    onSelectionsChange(selections);\n  }, [selections, onSelectionsChange]);\n\n  useEffect(() => {\n    onPriceChange?.(priceResult);\n  }, [priceResult, onPriceChange]);\n\n  const allGroupsSatisfied = useMemo(() => {\n    for (const group of groups) {\n      const groupSels = groupSelections[group.id] || {};\n      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);\n      if (totalSelected < group.min_selections) return false;\n    }\n    return true;\n  }, [groups, groupSelections]);\n\n  useEffect(() => {\n    onReady?.(allGroupsSatisfied);\n  }, [allGroupsSatisfied, onReady]);\n\n  useEffect(() => {\n    if (skipPriceFetch || !allGroupsSatisfied || selections.length === 0) return;\n\n    let cancelled = false;\n    const timer = setTimeout(() => {\n      void (async () => {\n        setIsPriceLoading(true);\n        setPriceError(false);\n        try {\n          const result = await client.catalogue.calculateCompositePrice(compositeId, selections);\n          if (cancelled) return;\n          if (result.ok) {\n            setPriceResult(result.value);\n          } else {\n            setPriceError(true);\n          }\n        } catch {\n          if (!cancelled) setPriceError(true);\n        } finally {\n          if (!cancelled) setIsPriceLoading(false);\n        }\n      })();\n    }, 300);\n\n    return () => {\n      cancelled = true;\n      clearTimeout(timer);\n    };\n  }, [selections, allGroupsSatisfied, compositeId, client, skipPriceFetch]);\n\n  const toggleComponent = useCallback(\n    (group: CompositeGroupView, component: CompositeComponentView) => {\n      setGroupSelections((prev) => {\n        const groupSels = { ...(prev[group.id] || {}) };\n        const currentQty = groupSels[component.id] || 0;\n\n        if (currentQty > 0) {\n          if (group.min_selections > 0) {\n            const totalOthers = Object.entries(groupSels)\n              .filter(([id]) => id !== component.id)\n              .reduce((sum, [, q]) => sum + q, 0);\n            if (totalOthers < group.min_selections) {\n              return prev;\n            }\n          }\n          delete groupSels[component.id];\n        } else {\n          const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);\n          if (group.max_selections && totalSelected >= group.max_selections) {\n            if (group.max_selections === 1) {\n              return { ...prev, [group.id]: { [component.id]: 1 } };\n            }\n            return prev;\n          }\n          groupSels[component.id] = 1;\n        }\n\n        return { ...prev, [group.id]: groupSels };\n      });\n    },\n    [],\n  );\n\n  const updateQuantity = useCallback(\n    (group: CompositeGroupView, componentId: string, delta: number) => {\n      setGroupSelections((prev) => {\n        const groupSels = { ...(prev[group.id] || {}) };\n        const current = groupSels[componentId] || 0;\n        const next = Math.max(0, current + delta);\n\n        if (next === current) return prev;\n\n        if (group.max_quantity_per_component && next > group.max_quantity_per_component) {\n          return prev;\n        }\n\n        const totalAfter = Object.entries(groupSels)\n          .reduce((sum, [id, q]) => sum + (id === componentId ? next : q), 0);\n\n        if (delta > 0 && group.max_selections && totalAfter > group.max_selections) {\n          return prev;\n        }\n\n        if (delta < 0 && totalAfter < group.min_selections) {\n          return prev;\n        }\n\n        if (next === 0) {\n          delete groupSels[componentId];\n        } else {\n          groupSels[componentId] = next;\n        }\n\n        return { ...prev, [group.id]: groupSels };\n      });\n    },\n    [],\n  );\n\n  if (groups.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-composite-selector className={cn(\"space-y-6\", className, classNames?.root)}>\n      {[...groups]\n        .sort((a, b) => a.display_order - b.display_order)\n        .map((group) => {\n          const groupSels = groupSelections[group.id] || {};\n          const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);\n          const minMet = totalSelected >= group.min_selections;\n          const isSingleSelect = group.max_selections === 1;\n\n          return (\n            <div\n              key={group.id}\n              data-cimplify-composite-group\n              className={cn(\"border border-border p-5\", classNames?.group)}\n            >\n              <div\n                data-cimplify-composite-group-header\n                className={cn(\"flex items-center justify-between mb-4\", classNames?.groupHeader)}\n              >\n                <div>\n                  <span\n                    data-cimplify-composite-group-name\n                    className={cn(\"text-xs font-medium uppercase tracking-wider text-muted-foreground\", classNames?.groupName)}\n                  >\n                    {group.name}\n                    {group.min_selections > 0 && (\n                      <span\n                        data-cimplify-composite-required\n                        className={cn(\"text-destructive ml-1\", classNames?.required)}\n                      >\n                        {\" \"}*\n                      </span>\n                    )}\n                  </span>\n                  {group.description && (\n                    <span\n                      data-cimplify-composite-group-description\n                      className={cn(\"text-xs text-muted-foreground/70 mt-0.5\", classNames?.groupDescription)}\n                    >\n                      {group.description}\n                    </span>\n                  )}\n                  <span\n                    data-cimplify-composite-group-constraint\n                    className={cn(\"text-xs text-muted-foreground/70 mt-1\", classNames?.groupConstraint)}\n                  >\n                    {group.min_selections > 0 && group.max_selections\n                      ? `Choose ${group.min_selections}\\u2013${group.max_selections}`\n                      : group.min_selections > 0\n                        ? `Choose at least ${group.min_selections}`\n                        : group.max_selections\n                          ? `Choose up to ${group.max_selections}`\n                          : \"Choose as many as you like\"}\n                  </span>\n                </div>\n                {!minMet && (\n                  <span\n                    data-cimplify-composite-validation\n                    className={cn(\"text-xs text-destructive font-medium\", classNames?.validation)}\n                  >\n                    Required\n                  </span>\n                )}\n              </div>\n\n              <div\n                data-cimplify-composite-components\n                role={isSingleSelect ? \"radiogroup\" : \"group\"}\n                aria-label={group.name}\n                className={cn(\"space-y-1\", classNames?.components)}\n              >\n                {group.components\n                  .filter((c) => c.is_available && !c.is_archived)\n                  .sort((a, b) => a.display_order - b.display_order)\n                  .map((component) => {\n                    const qty = groupSels[component.id] || 0;\n                    const isSelected = qty > 0;\n                    const displayName = component.display_name || component.id;\n\n                    return (\n                      <button\n                        key={component.id}\n                        type=\"button\"\n                        role={isSingleSelect ? \"radio\" : \"checkbox\"}\n                        aria-checked={isSelected}\n                        onClick={() => toggleComponent(group, component)}\n                        data-cimplify-composite-component\n                        data-selected={isSelected || undefined}\n                        className={cn(\n                          \"w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50\",\n                          isSelected && \"bg-primary/5 border-primary\",\n                          isSelected ? classNames?.componentSelected : classNames?.component,\n                        )}\n                      >\n                        <div\n                          data-cimplify-composite-component-info\n                          className={cn(\"flex-1 min-w-0\", classNames?.componentInfo)}\n                        >\n                          <span\n                            data-cimplify-composite-component-name\n                            className={cn(\"text-sm font-medium\", isSelected && \"text-primary\", classNames?.componentName)}\n                          >\n                            {displayName}\n                          </span>\n                          {component.is_popular && (\n                            <span\n                              data-cimplify-composite-badge=\"popular\"\n                              className={cn(\"text-[10px] uppercase tracking-wider text-primary font-medium\", classNames?.badgePopular)}\n                            >\n                              Popular\n                            </span>\n                          )}\n                          {component.is_premium && (\n                            <span\n                              data-cimplify-composite-badge=\"premium\"\n                              className={cn(\"text-[10px] uppercase tracking-wider text-amber-600 font-medium\", classNames?.badgePremium)}\n                            >\n                              Premium\n                            </span>\n                          )}\n                          {component.display_description && (\n                            <span\n                              data-cimplify-composite-component-description\n                              className={cn(\"text-xs text-muted-foreground truncate\", classNames?.componentDescription)}\n                            >\n                              {component.display_description}\n                            </span>\n                          )}\n                          {component.calories != null && (\n                            <span\n                              data-cimplify-composite-component-calories\n                              className={cn(\"text-xs text-muted-foreground/60\", classNames?.componentCalories)}\n                            >\n                              {component.calories} cal\n                            </span>\n                          )}\n                        </div>\n\n                        {group.allow_quantity && isSelected && (\n                          <span\n                            data-cimplify-composite-qty\n                            onClick={(e: React.MouseEvent) => e.stopPropagation()}\n                            className={cn(\"flex items-center gap-2\", classNames?.qty)}\n                          >\n                            <button\n                              type=\"button\"\n                              onClick={() => updateQuantity(group, component.id, -1)}\n                              aria-label={`Decrease ${displayName} quantity`}\n                              className={cn(\"w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted\", classNames?.qtyButton)}\n                            >\n                              &#x2212;\n                            </button>\n                            <span className={cn(\"text-sm font-medium w-4 text-center\", classNames?.qtyValue)}>{qty}</span>\n                            <button\n                              type=\"button\"\n                              onClick={() => updateQuantity(group, component.id, 1)}\n                              aria-label={`Increase ${displayName} quantity`}\n                              className={cn(\"w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted\", classNames?.qtyButton)}\n                            >\n                              +\n                            </button>\n                          </span>\n                        )}\n\n                        {component.price != null && component.price !== 0 && (\n                          <Price amount={component.price} prefix=\"+\" />\n                        )}\n                      </button>\n                    );\n                  })}\n              </div>\n            </div>\n          );\n        })}\n\n      {priceResult && (\n        <div\n          data-cimplify-composite-summary\n          className={cn(\"border-t border-border pt-4 space-y-1 text-sm\", classNames?.summary)}\n        >\n          {priceResult.base_price !== 0 && (\n            <div\n              data-cimplify-composite-summary-line\n              className={cn(\"flex justify-between text-muted-foreground\", classNames?.summaryLine)}\n            >\n              <span>Base</span>\n              <Price amount={priceResult.base_price} />\n            </div>\n          )}\n          {priceResult.components_total !== 0 && (\n            <div\n              data-cimplify-composite-summary-line\n              className={cn(\"flex justify-between text-muted-foreground\", classNames?.summaryLine)}\n            >\n              <span>Selections</span>\n              <Price amount={priceResult.components_total} />\n            </div>\n          )}\n          <div\n            data-cimplify-composite-summary-total\n            className={cn(\"flex justify-between font-medium pt-1 border-t border-border\", classNames?.summaryTotal)}\n          >\n            <span>Total</span>\n            <Price amount={priceResult.final_price} className=\"text-primary\" />\n          </div>\n        </div>\n      )}\n\n      {isPriceLoading && (\n        <div\n          data-cimplify-composite-calculating\n          className={cn(\"flex items-center gap-2 text-sm text-muted-foreground\", classNames?.calculating)}\n        >\n          Calculating price...\n        </div>\n      )}\n\n      {priceError && !isPriceLoading && (\n        <div\n          data-cimplify-composite-price-error\n          className={cn(\"text-sm text-destructive\", classNames?.priceError)}\n        >\n          Unable to calculate price\n        </div>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect } from \"react\";\nimport type {\n  CompositeGroupView,\n  CompositeComponentView,\n  ComponentSelectionInput,\n  CompositePriceResult,\n} from \"@cimplify/sdk\";\nimport { useCimplify } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface CompositeSelectorClassNames {\n  root?: string;\n  group?: string;\n  groupHeader?: string;\n  groupName?: string;\n  required?: string;\n  groupDescription?: string;\n  groupConstraint?: string;\n  validation?: string;\n  components?: string;\n  component?: string;\n  componentSelected?: string;\n  componentInfo?: string;\n  componentName?: string;\n  badgePopular?: string;\n  badgePremium?: string;\n  componentDescription?: string;\n  componentCalories?: string;\n  qty?: string;\n  qtyButton?: string;\n  qtyValue?: string;\n  summary?: string;\n  summaryLine?: string;\n  summaryTotal?: string;\n  calculating?: string;\n  priceError?: string;\n}\n\nexport interface CompositeSelectorProps {\n  compositeId: string;\n  groups: CompositeGroupView[];\n  onSelectionsChange: (selections: ComponentSelectionInput[]) => void;\n  onPriceChange?: (price: CompositePriceResult | null) => void;\n  onReady?: (ready: boolean) => void;\n  skipPriceFetch?: boolean;\n  className?: string;\n  classNames?: CompositeSelectorClassNames;\n}\n\nexport function CompositeSelector({\n  compositeId,\n  groups,\n  onSelectionsChange,\n  onPriceChange,\n  onReady,\n  skipPriceFetch,\n  className,\n  classNames,\n}: CompositeSelectorProps): React.ReactElement | null {\n  const { client } = useCimplify();\n\n  const [groupSelections, setGroupSelections] = useState<\n    Record<string, Record<string, number>>\n  >({});\n  const [priceResult, setPriceResult] = useState<CompositePriceResult | null>(null);\n  const [isPriceLoading, setIsPriceLoading] = useState(false);\n  const [priceError, setPriceError] = useState(false);\n\n  const selections = useMemo((): ComponentSelectionInput[] => {\n    const result: ComponentSelectionInput[] = [];\n    for (const groupSels of Object.values(groupSelections)) {\n      for (const [componentId, qty] of Object.entries(groupSels)) {\n        if (qty > 0) {\n          result.push({ component_id: componentId, quantity: qty });\n        }\n      }\n    }\n    return result;\n  }, [groupSelections]);\n\n  useEffect(() => {\n    onSelectionsChange(selections);\n  }, [selections, onSelectionsChange]);\n\n  useEffect(() => {\n    onPriceChange?.(priceResult);\n  }, [priceResult, onPriceChange]);\n\n  const allGroupsSatisfied = useMemo(() => {\n    for (const group of groups) {\n      const groupSels = groupSelections[group.id] || {};\n      const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);\n      if (totalSelected < group.min_selections) return false;\n    }\n    return true;\n  }, [groups, groupSelections]);\n\n  useEffect(() => {\n    onReady?.(allGroupsSatisfied);\n  }, [allGroupsSatisfied, onReady]);\n\n  useEffect(() => {\n    if (skipPriceFetch || !allGroupsSatisfied || selections.length === 0) return;\n\n    let cancelled = false;\n    const timer = setTimeout(() => {\n      void (async () => {\n        setIsPriceLoading(true);\n        setPriceError(false);\n        try {\n          const result = await client.catalogue.calculateCompositePrice(compositeId, selections);\n          if (cancelled) return;\n          if (result.ok) {\n            setPriceResult(result.value);\n          } else {\n            setPriceError(true);\n          }\n        } catch {\n          if (!cancelled) setPriceError(true);\n        } finally {\n          if (!cancelled) setIsPriceLoading(false);\n        }\n      })();\n    }, 300);\n\n    return () => {\n      cancelled = true;\n      clearTimeout(timer);\n    };\n  }, [selections, allGroupsSatisfied, compositeId, client, skipPriceFetch]);\n\n  const toggleComponent = useCallback(\n    (group: CompositeGroupView, component: CompositeComponentView) => {\n      setGroupSelections((prev) => {\n        const groupSels = { ...(prev[group.id] || {}) };\n        const currentQty = groupSels[component.id] || 0;\n\n        if (currentQty > 0) {\n          if (group.min_selections > 0) {\n            const totalOthers = Object.entries(groupSels)\n              .filter(([id]) => id !== component.id)\n              .reduce((sum, [, q]) => sum + q, 0);\n            if (totalOthers < group.min_selections) {\n              return prev;\n            }\n          }\n          delete groupSels[component.id];\n        } else {\n          const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);\n          if (group.max_selections && totalSelected >= group.max_selections) {\n            if (group.max_selections === 1) {\n              return { ...prev, [group.id]: { [component.id]: 1 } };\n            }\n            return prev;\n          }\n          groupSels[component.id] = 1;\n        }\n\n        return { ...prev, [group.id]: groupSels };\n      });\n    },\n    [],\n  );\n\n  const updateQuantity = useCallback(\n    (group: CompositeGroupView, componentId: string, delta: number) => {\n      setGroupSelections((prev) => {\n        const groupSels = { ...(prev[group.id] || {}) };\n        const current = groupSels[componentId] || 0;\n        const next = Math.max(0, current + delta);\n\n        if (next === current) return prev;\n\n        if (group.max_quantity_per_component && next > group.max_quantity_per_component) {\n          return prev;\n        }\n\n        const totalAfter = Object.entries(groupSels)\n          .reduce((sum, [id, q]) => sum + (id === componentId ? next : q), 0);\n\n        if (delta > 0 && group.max_selections && totalAfter > group.max_selections) {\n          return prev;\n        }\n\n        if (delta < 0 && totalAfter < group.min_selections) {\n          return prev;\n        }\n\n        if (next === 0) {\n          delete groupSels[componentId];\n        } else {\n          groupSels[componentId] = next;\n        }\n\n        return { ...prev, [group.id]: groupSels };\n      });\n    },\n    [],\n  );\n\n  if (groups.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-composite-selector className={cn(\"space-y-6\", className, classNames?.root)}>\n      {[...groups]\n        .sort((a, b) => a.display_order - b.display_order)\n        .map((group) => {\n          const groupSels = groupSelections[group.id] || {};\n          const totalSelected = Object.values(groupSels).reduce((sum, q) => sum + q, 0);\n          const minMet = totalSelected >= group.min_selections;\n          const isSingleSelect = group.max_selections === 1;\n\n          return (\n            <div\n              key={group.id}\n              data-cimplify-composite-group\n              className={cn(\"border border-border p-5\", classNames?.group)}\n            >\n              <div\n                data-cimplify-composite-group-header\n                className={cn(\"flex items-center justify-between mb-4\", classNames?.groupHeader)}\n              >\n                <div>\n                  <span\n                    data-cimplify-composite-group-name\n                    className={cn(\"text-xs font-medium uppercase tracking-wider text-muted-foreground\", classNames?.groupName)}\n                  >\n                    {group.name}\n                    {group.min_selections > 0 && (\n                      <span\n                        data-cimplify-composite-required\n                        className={cn(\"text-destructive ml-1\", classNames?.required)}\n                      >\n                        {\" \"}*\n                      </span>\n                    )}\n                  </span>\n                  {group.description && (\n                    <span\n                      data-cimplify-composite-group-description\n                      className={cn(\"text-xs text-muted-foreground/70 mt-0.5\", classNames?.groupDescription)}\n                    >\n                      {group.description}\n                    </span>\n                  )}\n                  <span\n                    data-cimplify-composite-group-constraint\n                    className={cn(\"text-xs text-muted-foreground/70 mt-1\", classNames?.groupConstraint)}\n                  >\n                    {group.min_selections > 0 && group.max_selections\n                      ? `Choose ${group.min_selections}\\u2013${group.max_selections}`\n                      : group.min_selections > 0\n                        ? `Choose at least ${group.min_selections}`\n                        : group.max_selections\n                          ? `Choose up to ${group.max_selections}`\n                          : \"Choose as many as you like\"}\n                  </span>\n                </div>\n                {!minMet && (\n                  <span\n                    data-cimplify-composite-validation\n                    className={cn(\"text-xs text-destructive font-medium\", classNames?.validation)}\n                  >\n                    Required\n                  </span>\n                )}\n              </div>\n\n              <div\n                data-cimplify-composite-components\n                role={isSingleSelect ? \"radiogroup\" : \"group\"}\n                aria-label={group.name}\n                className={cn(\"space-y-1\", classNames?.components)}\n              >\n                {group.components\n                  .filter((c) => c.is_available && !c.is_archived)\n                  .sort((a, b) => a.display_order - b.display_order)\n                  .map((component) => {\n                    const qty = groupSels[component.id] || 0;\n                    const isSelected = qty > 0;\n                    const displayName = component.display_name || component.id;\n\n                    return (\n                      <button\n                        key={component.id}\n                        type=\"button\"\n                        role={isSingleSelect ? \"radio\" : \"checkbox\"}\n                        aria-checked={isSelected}\n                        onClick={() => toggleComponent(group, component)}\n                        data-cimplify-composite-component\n                        data-selected={isSelected || undefined}\n                        className={cn(\n                          \"w-full flex items-center gap-3 px-4 py-3 border transition-colors text-left border-transparent hover:bg-muted/50\",\n                          isSelected && \"bg-primary/5 border-primary\",\n                          isSelected ? classNames?.componentSelected : classNames?.component,\n                        )}\n                      >\n                        <div\n                          data-cimplify-composite-component-info\n                          className={cn(\"flex-1 min-w-0\", classNames?.componentInfo)}\n                        >\n                          <span\n                            data-cimplify-composite-component-name\n                            className={cn(\"text-sm font-medium\", isSelected && \"text-primary\", classNames?.componentName)}\n                          >\n                            {displayName}\n                          </span>\n                          {component.is_popular && (\n                            <span\n                              data-cimplify-composite-badge=\"popular\"\n                              className={cn(\"text-[10px] uppercase tracking-wider text-primary font-medium\", classNames?.badgePopular)}\n                            >\n                              Popular\n                            </span>\n                          )}\n                          {component.is_premium && (\n                            <span\n                              data-cimplify-composite-badge=\"premium\"\n                              className={cn(\"text-[10px] uppercase tracking-wider text-amber-600 font-medium\", classNames?.badgePremium)}\n                            >\n                              Premium\n                            </span>\n                          )}\n                          {component.display_description && (\n                            <span\n                              data-cimplify-composite-component-description\n                              className={cn(\"text-xs text-muted-foreground truncate\", classNames?.componentDescription)}\n                            >\n                              {component.display_description}\n                            </span>\n                          )}\n                          {component.calories != null && (\n                            <span\n                              data-cimplify-composite-component-calories\n                              className={cn(\"text-xs text-muted-foreground/60\", classNames?.componentCalories)}\n                            >\n                              {component.calories} cal\n                            </span>\n                          )}\n                        </div>\n\n                        {group.allow_quantity && isSelected && (\n                          <span\n                            data-cimplify-composite-qty\n                            onClick={(e: React.MouseEvent) => e.stopPropagation()}\n                            className={cn(\"flex items-center gap-2\", classNames?.qty)}\n                          >\n                            <button\n                              type=\"button\"\n                              onClick={() => updateQuantity(group, component.id, -1)}\n                              aria-label={`Decrease ${displayName} quantity`}\n                              className={cn(\"w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted\", classNames?.qtyButton)}\n                            >\n                              &#x2212;\n                            </button>\n                            <span className={cn(\"text-sm font-medium w-4 text-center\", classNames?.qtyValue)}>{qty}</span>\n                            <button\n                              type=\"button\"\n                              onClick={() => updateQuantity(group, component.id, 1)}\n                              aria-label={`Increase ${displayName} quantity`}\n                              className={cn(\"w-6 h-6 border border-border flex items-center justify-center text-xs hover:bg-muted\", classNames?.qtyButton)}\n                            >\n                              +\n                            </button>\n                          </span>\n                        )}\n\n                        {component.price != null && parsePrice(component.price) !== 0 && (\n                          <Price amount={component.price} prefix=\"+\" />\n                        )}\n                      </button>\n                    );\n                  })}\n              </div>\n            </div>\n          );\n        })}\n\n      {priceResult && (\n        <div\n          data-cimplify-composite-summary\n          className={cn(\"border-t border-border pt-4 space-y-1 text-sm\", classNames?.summary)}\n        >\n          {parsePrice(priceResult.base_price) !== 0 && (\n            <div\n              data-cimplify-composite-summary-line\n              className={cn(\"flex justify-between text-muted-foreground\", classNames?.summaryLine)}\n            >\n              <span>Base</span>\n              <Price amount={priceResult.base_price} />\n            </div>\n          )}\n          {parsePrice(priceResult.components_total) !== 0 && (\n            <div\n              data-cimplify-composite-summary-line\n              className={cn(\"flex justify-between text-muted-foreground\", classNames?.summaryLine)}\n            >\n              <span>Selections</span>\n              <Price amount={priceResult.components_total} />\n            </div>\n          )}\n          <div\n            data-cimplify-composite-summary-total\n            className={cn(\"flex justify-between font-medium pt-1 border-t border-border\", classNames?.summaryTotal)}\n          >\n            <span>Total</span>\n            <Price amount={priceResult.final_price} className=\"text-primary\" />\n          </div>\n        </div>\n      )}\n\n      {isPriceLoading && (\n        <div\n          data-cimplify-composite-calculating\n          className={cn(\"flex items-center gap-2 text-sm text-muted-foreground\", classNames?.calculating)}\n        >\n          Calculating price...\n        </div>\n      )}\n\n      {priceError && !isPriceLoading && (\n        <div\n          data-cimplify-composite-price-error\n          className={cn(\"text-sm text-destructive\", classNames?.priceError)}\n        >\n          Unable to calculate price\n        </div>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/order-summary.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "order-summary.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus } from \"@cimplify/sdk\";\nimport { useOrder } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderSummaryClassNames {\n  root?: string;\n  header?: string;\n  orderId?: string;\n  status?: string;\n  items?: string;\n  lineItem?: string;\n  totals?: string;\n  customer?: string;\n  loading?: string;\n}\n\nexport interface OrderSummaryProps {\n  /** Pass an Order object directly (skips fetch). */\n  order?: Order;\n  /** Or pass an order ID to fetch via useOrder. */\n  orderId?: string;\n  /** Poll for status updates. */\n  poll?: boolean;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  className?: string;\n  classNames?: OrderSummaryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderSummary — displays a single order's details, line items, and totals.\n *\n * Accepts either a pre-loaded `order` object or an `orderId` to fetch.\n * Supports polling for live status updates.\n */\nexport function OrderSummary({\n  order: orderProp,\n  orderId,\n  poll = false,\n  renderLineItem,\n  className,\n  classNames,\n}: OrderSummaryProps): React.ReactElement {\n  const { order: fetched, isLoading } = useOrder(orderProp ? null : orderId, {\n    enabled: !orderProp && !!orderId,\n    poll,\n  });\n\n  const order = orderProp ?? fetched;\n\n  if (isLoading && !order) {\n    return (\n      <div\n        data-cimplify-order-summary\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div data-cimplify-order-summary-skeleton />\n      </div>\n    );\n  }\n\n  if (!order) {\n    return (\n      <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n        <p>Order not found.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-header className={classNames?.header}>\n        <span data-cimplify-order-id className={classNames?.orderId}>\n          Order #{order.user_friendly_id}\n        </span>\n        <span\n          data-cimplify-order-status\n          data-status={order.status}\n          className={classNames?.status}\n        >\n          {STATUS_LABELS[order.status] ?? order.status}\n        </span>\n      </div>\n\n      {/* Date */}\n      <time data-cimplify-order-date dateTime={order.created_at}>\n        {new Date(order.created_at).toLocaleDateString(undefined, {\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        })}\n      </time>\n\n      {/* Customer info */}\n      {(order.customer_name || order.customer_email) && (\n        <div data-cimplify-order-customer className={classNames?.customer}>\n          {order.customer_name && (\n            <span data-cimplify-order-customer-name>{order.customer_name}</span>\n          )}\n          {order.customer_email && (\n            <span data-cimplify-order-customer-email>{order.customer_email}</span>\n          )}\n        </div>\n      )}\n\n      {/* Line items */}\n      <div data-cimplify-order-items className={classNames?.items}>\n        {order.items.map((item) =>\n          renderLineItem ? (\n            <React.Fragment key={item.id}>{renderLineItem(item)}</React.Fragment>\n          ) : (\n            <div key={item.id} data-cimplify-order-line-item className={classNames?.lineItem}>\n              <div data-cimplify-order-line-info>\n                <span data-cimplify-order-line-qty>{item.quantity}&times;</span>\n                <span data-cimplify-order-line-key>{item.line_key}</span>\n              </div>\n              <Price amount={item.price} />\n            </div>\n          ),\n        )}\n      </div>\n\n      {/* Totals */}\n      <div data-cimplify-order-totals className={classNames?.totals}>\n        {order.total_discount != null && order.total_discount !== 0 && (\n          <div data-cimplify-order-discount>\n            <span>Discount</span>\n            <Price amount={order.total_discount} prefix=\"-\" />\n          </div>\n        )}\n        {order.service_charge != null && order.service_charge !== 0 && (\n          <div data-cimplify-order-service-charge>\n            <span>Service charge</span>\n            <Price amount={order.service_charge} />\n          </div>\n        )}\n        {order.tax != null && order.tax !== 0 && (\n          <div data-cimplify-order-tax>\n            <span>Tax</span>\n            <Price amount={order.tax} />\n          </div>\n        )}\n        <div data-cimplify-order-total>\n          <span>Total</span>\n          <Price amount={order.total_price} />\n        </div>\n      </div>\n\n      {/* Tracking */}\n      {order.tracking_link && (\n        <a\n          href={order.tracking_link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          data-cimplify-order-tracking\n        >\n          Track your order\n        </a>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus } from \"@cimplify/sdk\";\nimport { useOrder } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderSummaryClassNames {\n  root?: string;\n  header?: string;\n  orderId?: string;\n  status?: string;\n  items?: string;\n  lineItem?: string;\n  totals?: string;\n  customer?: string;\n  loading?: string;\n}\n\nexport interface OrderSummaryProps {\n  /** Pass an Order object directly (skips fetch). */\n  order?: Order;\n  /** Or pass an order ID to fetch via useOrder. */\n  orderId?: string;\n  /** Poll for status updates. */\n  poll?: boolean;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  className?: string;\n  classNames?: OrderSummaryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderSummary — displays a single order's details, line items, and totals.\n *\n * Accepts either a pre-loaded `order` object or an `orderId` to fetch.\n * Supports polling for live status updates.\n */\nexport function OrderSummary({\n  order: orderProp,\n  orderId,\n  poll = false,\n  renderLineItem,\n  className,\n  classNames,\n}: OrderSummaryProps): React.ReactElement {\n  const { order: fetched, isLoading } = useOrder(orderProp ? null : orderId, {\n    enabled: !orderProp && !!orderId,\n    poll,\n  });\n\n  const order = orderProp ?? fetched;\n\n  if (isLoading && !order) {\n    return (\n      <div\n        data-cimplify-order-summary\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div data-cimplify-order-summary-skeleton />\n      </div>\n    );\n  }\n\n  if (!order) {\n    return (\n      <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n        <p>Order not found.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-header className={classNames?.header}>\n        <span data-cimplify-order-id className={classNames?.orderId}>\n          Order #{order.user_friendly_id}\n        </span>\n        <span\n          data-cimplify-order-status\n          data-status={order.status}\n          className={classNames?.status}\n        >\n          {STATUS_LABELS[order.status] ?? order.status}\n        </span>\n      </div>\n\n      {/* Date */}\n      <time data-cimplify-order-date dateTime={order.created_at}>\n        {new Date(order.created_at).toLocaleDateString(undefined, {\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        })}\n      </time>\n\n      {/* Customer info */}\n      {(order.customer_name || order.customer_email) && (\n        <div data-cimplify-order-customer className={classNames?.customer}>\n          {order.customer_name && (\n            <span data-cimplify-order-customer-name>{order.customer_name}</span>\n          )}\n          {order.customer_email && (\n            <span data-cimplify-order-customer-email>{order.customer_email}</span>\n          )}\n        </div>\n      )}\n\n      {/* Line items */}\n      <div data-cimplify-order-items className={classNames?.items}>\n        {order.items.map((item) =>\n          renderLineItem ? (\n            <React.Fragment key={item.id}>{renderLineItem(item)}</React.Fragment>\n          ) : (\n            <div key={item.id} data-cimplify-order-line-item className={classNames?.lineItem}>\n              <div data-cimplify-order-line-info>\n                <span data-cimplify-order-line-qty>{item.quantity}&times;</span>\n                <span data-cimplify-order-line-key>{item.line_key}</span>\n              </div>\n              <Price amount={item.price} />\n            </div>\n          ),\n        )}\n      </div>\n\n      {/* Totals */}\n      <div data-cimplify-order-totals className={classNames?.totals}>\n        {order.total_discount != null && parsePrice(order.total_discount) !== 0 && (\n          <div data-cimplify-order-discount>\n            <span>Discount</span>\n            <Price amount={order.total_discount} prefix=\"-\" />\n          </div>\n        )}\n        {order.service_charge != null && parsePrice(order.service_charge) !== 0 && (\n          <div data-cimplify-order-service-charge>\n            <span>Service charge</span>\n            <Price amount={order.service_charge} />\n          </div>\n        )}\n        {order.tax != null && parsePrice(order.tax) !== 0 && (\n          <div data-cimplify-order-tax>\n            <span>Tax</span>\n            <Price amount={order.tax} />\n          </div>\n        )}\n        <div data-cimplify-order-total>\n          <span>Total</span>\n          <Price amount={order.total_price} />\n        </div>\n      </div>\n\n      {/* Tracking */}\n      {order.tracking_link && (\n        <a\n          href={order.tracking_link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          data-cimplify-order-tracking\n        >\n          Track your order\n        </a>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }