@thorprovider/blocks 2.0.0 → 3.0.0

package/dist/blocks/e-commerce/checkout-forms/checkout-form-types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.d.ts

@@ -0,0 +1,20 @@
+import type { Money } from '@thorprovider/types';
+import type { CheckoutLabels, CheckoutOrderSummary, CheckoutTotalsState } from './checkout';
+export interface CheckoutOrderSummaryPanelProps {
+    summary: CheckoutOrderSummary;
+    labels: CheckoutLabels;
+    formatMoney?: (money: Money) => string;
+    totalsState?: CheckoutTotalsState;
+    onRetryTotals?: () => void;
+    promoCode: string;
+    onPromoCodeChange: (value: string) => void;
+    onApplyPromo?: (code: string) => void;
+    promoPending?: boolean;
+    trustNotes?: string[];
+}
+/**
+ * Internal projection of the checkout's own cart. It is not a public block: the
+ * amount contract is `Money` only and every total is rendered verbatim.
+ */
+export declare function CheckoutOrderSummaryPanel({ summary, labels, formatMoney: formatMoneyProp, totalsState, onRetryTotals, promoCode, onPromoCodeChange, onApplyPromo, promoPending, trustNotes, }: CheckoutOrderSummaryPanelProps): import("react").JSX.Element;
+//# sourceMappingURL=checkout-order-summary.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-order-summary.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,KAAK,EACV,cAAc,EACd,oBAAoB,EAEpB,mBAAmB,EACpB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,oBAAoB,CAAA;IAC7B,MAAM,EAAE,cAAc,CAAA;IACtB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,mBAAmB,CAAA;IACjC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;CACtB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,EACxC,OAAO,EACP,MAAM,EACN,WAAW,EAAE,eAAe,EAC5B,WAAoB,EACpB,aAAa,EACb,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,YAAoB,EACpB,UAAU,GACX,EAAE,8BAA8B,+BAuLhC"}

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.js

@@ -0,0 +1,176 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkout_order_summary_exports = {};
+__export(checkout_order_summary_exports, {
+  CheckoutOrderSummaryPanel: () => CheckoutOrderSummaryPanel
+});
+module.exports = __toCommonJS(checkout_order_summary_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_field = require("../../../ui/field.js");
+var import_input = require("../../../ui/input.js");
+var import_separator = require("../../../ui/separator.js");
+var import_money = require("../../../lib/money.js");
+function CheckoutOrderSummaryPanel({
+  summary,
+  labels,
+  formatMoney: formatMoneyProp,
+  totalsState = "idle",
+  onRetryTotals,
+  promoCode,
+  onPromoCodeChange,
+  onApplyPromo,
+  promoPending = false,
+  trustNotes
+}) {
+  const format = (value) => (0, import_money.formatMoney)(value, formatMoneyProp);
+  const lineAmount = (item) => (0, import_money.isAvailableMoney)(item.lineTotal) ? format(item.lineTotal) : null;
+  const renderTotals = () => {
+    if (totalsState === "pending") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", "aria-live": "polite", children: labels.totalsPendingLabel });
+    }
+    if (totalsState === "error") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-destructive text-sm", children: labels.totalsErrorLabel }),
+        onRetryTotals ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetryTotals, children: labels.retryLabel }) : null
+      ] });
+    }
+    const totals = summary.totals;
+    if (!totals) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.totalsUnavailableLabel }),
+        onRetryTotals ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetryTotals, children: labels.retryLabel }) : null
+      ] });
+    }
+    const subtotalText = format(totals.subtotal);
+    const totalText = format(totals.total);
+    if (subtotalText === null || totalText === null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.totalsUnavailableLabel }),
+        onRetryTotals ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetryTotals, children: labels.retryLabel }) : null
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: labels.subtotalLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium tabular-nums", children: subtotalText })
+      ] }),
+      (0, import_money.isAvailableMoney)(totals.discount) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: labels.discountLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium tabular-nums", children: format(totals.discount) })
+      ] }) : null,
+      (0, import_money.isAvailableMoney)(totals.tax) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: labels.taxLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium tabular-nums", children: format(totals.tax) })
+      ] }) : null,
+      (0, import_money.isAvailableMoney)(totals.shipping) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Truck, { "aria-hidden": "true", className: "size-4" }),
+          labels.shippingLabel
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-medium tabular-nums", children: format(totals.shipping) })
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold", children: labels.totalLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold tabular-nums", children: totalText })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "lg:sticky lg:top-8", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_card.CardContent, { className: "flex flex-col gap-4 p-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardTitle, { children: labels.orderSummaryTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4", children: summary.items.map((item) => {
+      const amount = lineAmount(item);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+          item.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "img",
+            {
+              src: item.image,
+              alt: item.name,
+              width: 64,
+              height: 64,
+              className: "bg-muted size-16 rounded-lg object-cover"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-hidden": "true", className: "bg-muted size-16 rounded-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_badge.Badge,
+            {
+              variant: "secondary",
+              className: "absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs",
+              children: item.quantity
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium", children: item.name }),
+          item.variant ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground", children: item.variant }) : null,
+          item.quantity > 1 && (0, import_money.isAvailableMoney)(item.unitPrice) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-muted-foreground text-xs", children: [
+            format(item.unitPrice),
+            " ",
+            labels.eachLabel
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-medium tabular-nums", children: amount ?? labels.amountUnavailableLabel })
+      ] }, String(item.id));
+    }) }),
+    onApplyPromo ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.Field, { className: "gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLabel, { htmlFor: "checkout-promo-code", children: labels.promoCodeLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_input.Input,
+            {
+              id: "checkout-promo-code",
+              placeholder: labels.promoPlaceholder,
+              value: promoCode,
+              onChange: (e) => onPromoCodeChange(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_button.Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: promoPending,
+              onClick: () => onApplyPromo(promoCode),
+              children: labels.promoApplyLabel
+            }
+          )
+        ] })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_separator.Separator, {}),
+    renderTotals(),
+    trustNotes && trustNotes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground flex flex-col gap-2 text-sm", children: trustNotes.map((note, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Shield, { "aria-hidden": "true", className: "size-4" }),
+      note
+    ] }, `${index}:${note}`)) }) : null
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckoutOrderSummaryPanel
+});
+//# sourceMappingURL=checkout-order-summary.js.map

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"sourcesContent":["'use client'\n\nimport { Shield, Truck } from 'lucide-react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardTitle } from '../../../ui/card'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { Separator } from '../../../ui/separator'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { Money } from '@thorprovider/types'\nimport type {\n  CheckoutLabels,\n  CheckoutOrderSummary,\n  CheckoutOrderLine,\n  CheckoutTotalsState,\n} from './checkout'\n\nexport interface CheckoutOrderSummaryPanelProps {\n  summary: CheckoutOrderSummary\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n  totalsState?: CheckoutTotalsState\n  onRetryTotals?: () => void\n  promoCode: string\n  onPromoCodeChange: (value: string) => void\n  onApplyPromo?: (code: string) => void\n  promoPending?: boolean\n  trustNotes?: string[]\n}\n\n/**\n * Internal projection of the checkout's own cart. It is not a public block: the\n * amount contract is `Money` only and every total is rendered verbatim.\n */\nexport function CheckoutOrderSummaryPanel({\n  summary,\n  labels,\n  formatMoney: formatMoneyProp,\n  totalsState = 'idle',\n  onRetryTotals,\n  promoCode,\n  onPromoCodeChange,\n  onApplyPromo,\n  promoPending = false,\n  trustNotes,\n}: CheckoutOrderSummaryPanelProps) {\n  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)\n  const lineAmount = (item: CheckoutOrderLine): string | null =>\n    isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null\n\n  const renderTotals = () => {\n    if (totalsState === 'pending') {\n      return (\n        <p className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n          {labels.totalsPendingLabel}\n        </p>\n      )\n    }\n    if (totalsState === 'error') {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"alert\">\n          <p className=\"text-destructive text-sm\">{labels.totalsErrorLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const totals = summary.totals\n    if (!totals) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const subtotalText = format(totals.subtotal)\n    const totalText = format(totals.total)\n    // Required totals: an absent/malformed amount is unavailable, never a\n    // fabricated zero.\n    if (subtotalText === null || totalText === null) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"flex flex-col gap-2 text-sm\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-muted-foreground\">{labels.subtotalLabel}</span>\n          <span className=\"font-medium tabular-nums\">{subtotalText}</span>\n        </div>\n        {isAvailableMoney(totals.discount) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.discountLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.discount)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.tax) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.taxLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.tax)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.shipping) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"flex items-center gap-1.5 text-muted-foreground\">\n              <Truck aria-hidden=\"true\" className=\"size-4\" />\n              {labels.shippingLabel}\n            </span>\n            <span className=\"font-medium tabular-nums\">{format(totals.shipping)}</span>\n          </div>\n        ) : null}\n        <Separator />\n        <div className=\"flex items-center justify-between\">\n          <span className=\"font-semibold\">{labels.totalLabel}</span>\n          <span className=\"font-semibold tabular-nums\">{totalText}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Card className=\"lg:sticky lg:top-8\">\n      <CardContent className=\"flex flex-col gap-4 p-6\">\n        <CardTitle>{labels.orderSummaryTitle}</CardTitle>\n\n        <div className=\"flex flex-col gap-4\">\n          {summary.items.map((item) => {\n            const amount = lineAmount(item)\n            return (\n              <div key={String(item.id)} className=\"flex items-center gap-3\">\n                <div className=\"relative\">\n                  {item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.name}\n                      width={64}\n                      height={64}\n                      className=\"bg-muted size-16 rounded-lg object-cover\"\n                    />\n                  ) : (\n                    <div aria-hidden=\"true\" className=\"bg-muted size-16 rounded-lg\" />\n                  )}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs\"\n                  >\n                    {item.quantity}\n                  </Badge>\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium\">{item.name}</p>\n                  {item.variant ? (\n                    <p className=\"text-sm text-muted-foreground\">{item.variant}</p>\n                  ) : null}\n                  {item.quantity > 1 && isAvailableMoney(item.unitPrice) ? (\n                    <p className=\"text-muted-foreground text-xs\">\n                      {format(item.unitPrice)} {labels.eachLabel}\n                    </p>\n                  ) : null}\n                </div>\n                <p className=\"text-sm font-medium tabular-nums\">\n                  {amount ?? labels.amountUnavailableLabel}\n                </p>\n              </div>\n            )\n          })}\n        </div>\n\n        {onApplyPromo ? (\n          <>\n            <Separator />\n            <Field className=\"gap-2\">\n              <FieldLabel htmlFor=\"checkout-promo-code\">{labels.promoCodeLabel}</FieldLabel>\n              <div className=\"flex gap-2\">\n                <Input\n                  id=\"checkout-promo-code\"\n                  placeholder={labels.promoPlaceholder}\n                  value={promoCode}\n                  onChange={(e) => onPromoCodeChange(e.target.value)}\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  disabled={promoPending}\n                  onClick={() => onApplyPromo(promoCode)}\n                >\n                  {labels.promoApplyLabel}\n                </Button>\n              </div>\n            </Field>\n          </>\n        ) : null}\n\n        <Separator />\n\n        {renderTotals()}\n\n        {trustNotes && trustNotes.length > 0 ? (\n          <div className=\"text-muted-foreground flex flex-col gap-2 text-sm\">\n            {trustNotes.map((note, index) => (\n              <span key={`${index}:${note}`} className=\"flex items-center gap-2\">\n                <Shield aria-hidden=\"true\" className=\"size-4\" />\n                {note}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.mjs

@@ -0,0 +1,152 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Shield, Truck } from "lucide-react";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent, CardTitle } from "../../../ui/card.mjs";
+import { Field, FieldLabel } from "../../../ui/field.mjs";
+import { Input } from "../../../ui/input.mjs";
+import { Separator } from "../../../ui/separator.mjs";
+import { formatMoney, isAvailableMoney } from "../../../lib/money.mjs";
+function CheckoutOrderSummaryPanel({
+  summary,
+  labels,
+  formatMoney: formatMoneyProp,
+  totalsState = "idle",
+  onRetryTotals,
+  promoCode,
+  onPromoCodeChange,
+  onApplyPromo,
+  promoPending = false,
+  trustNotes
+}) {
+  const format = (value) => formatMoney(value, formatMoneyProp);
+  const lineAmount = (item) => isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null;
+  const renderTotals = () => {
+    if (totalsState === "pending") {
+      return /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", "aria-live": "polite", children: labels.totalsPendingLabel });
+    }
+    if (totalsState === "error") {
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", role: "alert", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-destructive text-sm", children: labels.totalsErrorLabel }),
+        onRetryTotals ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetryTotals, children: labels.retryLabel }) : null
+      ] });
+    }
+    const totals = summary.totals;
+    if (!totals) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", role: "status", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: labels.totalsUnavailableLabel }),
+        onRetryTotals ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetryTotals, children: labels.retryLabel }) : null
+      ] });
+    }
+    const subtotalText = format(totals.subtotal);
+    const totalText = format(totals.total);
+    if (subtotalText === null || totalText === null) {
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", role: "status", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: labels.totalsUnavailableLabel }),
+        onRetryTotals ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-fit", onClick: onRetryTotals, children: labels.retryLabel }) : null
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-sm", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.subtotalLabel }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: subtotalText })
+      ] }),
+      isAvailableMoney(totals.discount) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.discountLabel }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: format(totals.discount) })
+      ] }) : null,
+      isAvailableMoney(totals.tax) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.taxLabel }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: format(totals.tax) })
+      ] }) : null,
+      isAvailableMoney(totals.shipping) ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Truck, { "aria-hidden": "true", className: "size-4" }),
+          labels.shippingLabel
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums", children: format(totals.shipping) })
+      ] }) : null,
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold", children: labels.totalLabel }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums", children: totalText })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(Card, { className: "lg:sticky lg:top-8", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4 p-6", children: [
+    /* @__PURE__ */ jsx(CardTitle, { children: labels.orderSummaryTitle }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: summary.items.map((item) => {
+      const amount = lineAmount(item);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          item.image ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: item.image,
+              alt: item.name,
+              width: 64,
+              height: 64,
+              className: "bg-muted size-16 rounded-lg object-cover"
+            }
+          ) : /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "bg-muted size-16 rounded-lg" }),
+          /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: "secondary",
+              className: "absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs",
+              children: item.quantity
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: item.name }),
+          item.variant ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: item.variant }) : null,
+          item.quantity > 1 && isAvailableMoney(item.unitPrice) ? /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground text-xs", children: [
+            format(item.unitPrice),
+            " ",
+            labels.eachLabel
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium tabular-nums", children: amount ?? labels.amountUnavailableLabel })
+      ] }, String(item.id));
+    }) }),
+    onApplyPromo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsxs(Field, { className: "gap-2", children: [
+        /* @__PURE__ */ jsx(FieldLabel, { htmlFor: "checkout-promo-code", children: labels.promoCodeLabel }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "checkout-promo-code",
+              placeholder: labels.promoPlaceholder,
+              value: promoCode,
+              onChange: (e) => onPromoCodeChange(e.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: promoPending,
+              onClick: () => onApplyPromo(promoCode),
+              children: labels.promoApplyLabel
+            }
+          )
+        ] })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx(Separator, {}),
+    renderTotals(),
+    trustNotes && trustNotes.length > 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex flex-col gap-2 text-sm", children: trustNotes.map((note, index) => /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Shield, { "aria-hidden": "true", className: "size-4" }),
+      note
+    ] }, `${index}:${note}`)) }) : null
+  ] }) });
+}
+export {
+  CheckoutOrderSummaryPanel
+};
+//# sourceMappingURL=checkout-order-summary.mjs.map

package/dist/blocks/e-commerce/checkout-forms/checkout-order-summary.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-order-summary.tsx"],"sourcesContent":["'use client'\n\nimport { Shield, Truck } from 'lucide-react'\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent, CardTitle } from '../../../ui/card'\nimport { Field, FieldLabel } from '../../../ui/field'\nimport { Input } from '../../../ui/input'\nimport { Separator } from '../../../ui/separator'\nimport { formatMoney, isAvailableMoney } from '../../../lib/money'\nimport type { Money } from '@thorprovider/types'\nimport type {\n  CheckoutLabels,\n  CheckoutOrderSummary,\n  CheckoutOrderLine,\n  CheckoutTotalsState,\n} from './checkout'\n\nexport interface CheckoutOrderSummaryPanelProps {\n  summary: CheckoutOrderSummary\n  labels: CheckoutLabels\n  formatMoney?: (money: Money) => string\n  totalsState?: CheckoutTotalsState\n  onRetryTotals?: () => void\n  promoCode: string\n  onPromoCodeChange: (value: string) => void\n  onApplyPromo?: (code: string) => void\n  promoPending?: boolean\n  trustNotes?: string[]\n}\n\n/**\n * Internal projection of the checkout's own cart. It is not a public block: the\n * amount contract is `Money` only and every total is rendered verbatim.\n */\nexport function CheckoutOrderSummaryPanel({\n  summary,\n  labels,\n  formatMoney: formatMoneyProp,\n  totalsState = 'idle',\n  onRetryTotals,\n  promoCode,\n  onPromoCodeChange,\n  onApplyPromo,\n  promoPending = false,\n  trustNotes,\n}: CheckoutOrderSummaryPanelProps) {\n  const format = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)\n  const lineAmount = (item: CheckoutOrderLine): string | null =>\n    isAvailableMoney(item.lineTotal) ? format(item.lineTotal) : null\n\n  const renderTotals = () => {\n    if (totalsState === 'pending') {\n      return (\n        <p className=\"text-muted-foreground text-sm\" aria-live=\"polite\">\n          {labels.totalsPendingLabel}\n        </p>\n      )\n    }\n    if (totalsState === 'error') {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"alert\">\n          <p className=\"text-destructive text-sm\">{labels.totalsErrorLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const totals = summary.totals\n    if (!totals) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    const subtotalText = format(totals.subtotal)\n    const totalText = format(totals.total)\n    // Required totals: an absent/malformed amount is unavailable, never a\n    // fabricated zero.\n    if (subtotalText === null || totalText === null) {\n      return (\n        <div className=\"flex flex-col gap-2\" role=\"status\">\n          <p className=\"text-muted-foreground text-sm\">{labels.totalsUnavailableLabel}</p>\n          {onRetryTotals ? (\n            <Button type=\"button\" variant=\"outline\" size=\"sm\" className=\"w-fit\" onClick={onRetryTotals}>\n              {labels.retryLabel}\n            </Button>\n          ) : null}\n        </div>\n      )\n    }\n\n    return (\n      <div className=\"flex flex-col gap-2 text-sm\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"text-muted-foreground\">{labels.subtotalLabel}</span>\n          <span className=\"font-medium tabular-nums\">{subtotalText}</span>\n        </div>\n        {isAvailableMoney(totals.discount) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.discountLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.discount)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.tax) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"text-muted-foreground\">{labels.taxLabel}</span>\n            <span className=\"font-medium tabular-nums\">{format(totals.tax)}</span>\n          </div>\n        ) : null}\n        {isAvailableMoney(totals.shipping) ? (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"flex items-center gap-1.5 text-muted-foreground\">\n              <Truck aria-hidden=\"true\" className=\"size-4\" />\n              {labels.shippingLabel}\n            </span>\n            <span className=\"font-medium tabular-nums\">{format(totals.shipping)}</span>\n          </div>\n        ) : null}\n        <Separator />\n        <div className=\"flex items-center justify-between\">\n          <span className=\"font-semibold\">{labels.totalLabel}</span>\n          <span className=\"font-semibold tabular-nums\">{totalText}</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <Card className=\"lg:sticky lg:top-8\">\n      <CardContent className=\"flex flex-col gap-4 p-6\">\n        <CardTitle>{labels.orderSummaryTitle}</CardTitle>\n\n        <div className=\"flex flex-col gap-4\">\n          {summary.items.map((item) => {\n            const amount = lineAmount(item)\n            return (\n              <div key={String(item.id)} className=\"flex items-center gap-3\">\n                <div className=\"relative\">\n                  {item.image ? (\n                    <img\n                      src={item.image}\n                      alt={item.name}\n                      width={64}\n                      height={64}\n                      className=\"bg-muted size-16 rounded-lg object-cover\"\n                    />\n                  ) : (\n                    <div aria-hidden=\"true\" className=\"bg-muted size-16 rounded-lg\" />\n                  )}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"absolute -right-2 -top-2 size-6 justify-center rounded-full p-0 text-xs\"\n                  >\n                    {item.quantity}\n                  </Badge>\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"text-sm font-medium\">{item.name}</p>\n                  {item.variant ? (\n                    <p className=\"text-sm text-muted-foreground\">{item.variant}</p>\n                  ) : null}\n                  {item.quantity > 1 && isAvailableMoney(item.unitPrice) ? (\n                    <p className=\"text-muted-foreground text-xs\">\n                      {format(item.unitPrice)} {labels.eachLabel}\n                    </p>\n                  ) : null}\n                </div>\n                <p className=\"text-sm font-medium tabular-nums\">\n                  {amount ?? labels.amountUnavailableLabel}\n                </p>\n              </div>\n            )\n          })}\n        </div>\n\n        {onApplyPromo ? (\n          <>\n            <Separator />\n            <Field className=\"gap-2\">\n              <FieldLabel htmlFor=\"checkout-promo-code\">{labels.promoCodeLabel}</FieldLabel>\n              <div className=\"flex gap-2\">\n                <Input\n                  id=\"checkout-promo-code\"\n                  placeholder={labels.promoPlaceholder}\n                  value={promoCode}\n                  onChange={(e) => onPromoCodeChange(e.target.value)}\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  disabled={promoPending}\n                  onClick={() => onApplyPromo(promoCode)}\n                >\n                  {labels.promoApplyLabel}\n                </Button>\n              </div>\n            </Field>\n          </>\n        ) : null}\n\n        <Separator />\n\n        {renderTotals()}\n\n        {trustNotes && trustNotes.length > 0 ? (\n          <div className=\"text-muted-foreground flex flex-col gap-2 text-sm\">\n            {trustNotes.map((note, index) => (\n              <span key={`${index}:${note}`} className=\"flex items-center gap-2\">\n                <Shield aria-hidden=\"true\" className=\"size-4\" />\n                {note}\n              </span>\n            ))}\n          </div>\n        ) : null}\n      </CardContent>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.d.ts

@@ -0,0 +1,12 @@
+import type { PaymentMethod } from '@thorprovider/types';
+import type { CheckoutChangeHandler, CheckoutFieldDescriptions, CheckoutValuesFieldErrors, CheckoutLabels, CheckoutValues } from './checkout';
+export interface CheckoutPaymentStepProps {
+    values: CheckoutValues;
+    onChange: CheckoutChangeHandler;
+    labels: CheckoutLabels;
+    paymentMethods?: PaymentMethod[];
+    fieldErrors?: CheckoutValuesFieldErrors;
+    fieldDescriptions?: CheckoutFieldDescriptions;
+}
+export declare function CheckoutPaymentStep({ values, onChange, labels, paymentMethods, fieldErrors, fieldDescriptions, }: CheckoutPaymentStepProps): import("react").JSX.Element;
+//# sourceMappingURL=checkout-payment-step.d.ts.map

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkout-payment-step.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-payment-step.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,KAAK,EACV,qBAAqB,EACrB,yBAAyB,EACzB,yBAAyB,EACzB,cAAc,EACd,cAAc,EACf,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,cAAc,CAAA;IACtB,QAAQ,EAAE,qBAAqB,CAAA;IAC/B,MAAM,EAAE,cAAc,CAAA;IACtB,cAAc,CAAC,EAAE,aAAa,EAAE,CAAA;IAChC,WAAW,CAAC,EAAE,yBAAyB,CAAA;IACvC,iBAAiB,CAAC,EAAE,yBAAyB,CAAA;CAC9C;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,MAAM,EACN,cAAmB,EACnB,WAAW,EACX,iBAAiB,GAClB,EAAE,wBAAwB,+BAqE1B"}

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.js

@@ -0,0 +1,93 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var checkout_payment_step_exports = {};
+__export(checkout_payment_step_exports, {
+  CheckoutPaymentStep: () => CheckoutPaymentStep
+});
+module.exports = __toCommonJS(checkout_payment_step_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_field = require("../../../ui/field.js");
+var import_radio_group = require("../../../ui/radio-group.js");
+var import_checkout_field_feedback = require("./checkout-field-feedback.js");
+function CheckoutPaymentStep({
+  values,
+  onChange,
+  labels,
+  paymentMethods = [],
+  fieldErrors,
+  fieldDescriptions
+}) {
+  const selectedMethod = paymentMethods.find((method) => method.id === values.paymentMethod);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.FieldSet, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldLegend, { children: labels.paymentMethodLegend }),
+    paymentMethods.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: labels.noPaymentMethodsLabel }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_radio_group.RadioGroup,
+      {
+        value: values.paymentMethod,
+        onValueChange: (value) => value && onChange("paymentMethod", String(value)),
+        className: "grid grid-cols-1 gap-3",
+        children: paymentMethods.map((method) => {
+          const unavailable = method.isEnabled === false;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_field.Field,
+            {
+              orientation: "horizontal",
+              className: "flex-wrap items-start justify-between gap-3 rounded-lg border p-4",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.FieldContent, { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_field.FieldLabel, { htmlFor: `payment-${method.id}`, className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: method.name }),
+                  method.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xs font-normal", children: method.description }) : null,
+                  unavailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground text-xs font-normal", children: labels.unavailableMethodLabel }) : null
+                ] }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_radio_group.RadioGroupItem,
+                  {
+                    value: method.id,
+                    id: `payment-${method.id}`,
+                    disabled: unavailable
+                  }
+                )
+              ]
+            },
+            method.id
+          );
+        })
+      }
+    ),
+    selectedMethod ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-muted/50 rounded-lg p-4 text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-medium", children: selectedMethod.name }),
+      selectedMethod.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1", children: selectedMethod.description }) : null,
+      selectedMethod.requiresSetup ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-1 text-xs", children: labels.requiresSetupLabel }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_field.Field, { "data-invalid": !!fieldErrors?.paymentMethod?.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_checkout_field_feedback.CheckoutFieldFeedback,
+      {
+        id: "checkout-payment-method",
+        errors: fieldErrors?.paymentMethod,
+        description: fieldDescriptions?.paymentMethod
+      }
+    ) })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckoutPaymentStep
+});
+//# sourceMappingURL=checkout-payment-step.js.map

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/checkout-forms/checkout-payment-step.tsx"],"sourcesContent":["'use client'\n\nimport { Field, FieldContent, FieldLabel, FieldLegend, FieldSet } from '../../../ui/field'\nimport { RadioGroup, RadioGroupItem } from '../../../ui/radio-group'\nimport { CheckoutFieldFeedback, checkoutFieldAria } from './checkout-field-feedback'\nimport type { PaymentMethod } from '@thorprovider/types'\nimport type {\n  CheckoutChangeHandler,\n  CheckoutFieldDescriptions,\n  CheckoutValuesFieldErrors,\n  CheckoutLabels,\n  CheckoutValues,\n} from './checkout'\n\nexport interface CheckoutPaymentStepProps {\n  values: CheckoutValues\n  onChange: CheckoutChangeHandler\n  labels: CheckoutLabels\n  paymentMethods?: PaymentMethod[]\n  fieldErrors?: CheckoutValuesFieldErrors\n  fieldDescriptions?: CheckoutFieldDescriptions\n}\n\nexport function CheckoutPaymentStep({\n  values,\n  onChange,\n  labels,\n  paymentMethods = [],\n  fieldErrors,\n  fieldDescriptions,\n}: CheckoutPaymentStepProps) {\n  const selectedMethod = paymentMethods.find((method) => method.id === values.paymentMethod)\n\n  return (\n    <FieldSet>\n      <FieldLegend>{labels.paymentMethodLegend}</FieldLegend>\n      {paymentMethods.length === 0 ? (\n        <p className=\"text-muted-foreground text-sm\">{labels.noPaymentMethodsLabel}</p>\n      ) : (\n        <RadioGroup\n          value={values.paymentMethod}\n          onValueChange={(value) => value && onChange('paymentMethod', String(value))}\n          className=\"grid grid-cols-1 gap-3\"\n        >\n          {paymentMethods.map((method) => {\n            const unavailable = method.isEnabled === false\n            return (\n              <Field\n                key={method.id}\n                orientation=\"horizontal\"\n                className=\"flex-wrap items-start justify-between gap-3 rounded-lg border p-4\"\n              >\n                <FieldContent className=\"min-w-0\">\n                  <FieldLabel htmlFor={`payment-${method.id}`} className=\"flex flex-col gap-0.5\">\n                    <span>{method.name}</span>\n                    {method.description ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">\n                        {method.description}\n                      </span>\n                    ) : null}\n                    {unavailable ? (\n                      <span className=\"text-muted-foreground text-xs font-normal\">\n                        {labels.unavailableMethodLabel}\n                      </span>\n                    ) : null}\n                  </FieldLabel>\n                </FieldContent>\n                <RadioGroupItem\n                  value={method.id}\n                  id={`payment-${method.id}`}\n                  disabled={unavailable}\n                />\n              </Field>\n            )\n          })}\n        </RadioGroup>\n      )}\n\n      {selectedMethod ? (\n        <div className=\"bg-muted/50 rounded-lg p-4 text-sm\">\n          <p className=\"font-medium\">{selectedMethod.name}</p>\n          {selectedMethod.description ? (\n            <p className=\"text-muted-foreground mt-1\">{selectedMethod.description}</p>\n          ) : null}\n          {selectedMethod.requiresSetup ? (\n            <p className=\"text-muted-foreground mt-1 text-xs\">{labels.requiresSetupLabel}</p>\n          ) : null}\n        </div>\n      ) : null}\n\n      <Field data-invalid={!!fieldErrors?.paymentMethod?.length}>\n        <CheckoutFieldFeedback\n          id=\"checkout-payment-method\"\n          errors={fieldErrors?.paymentMethod}\n          description={fieldDescriptions?.paymentMethod}\n        />\n      </Field>\n    </FieldSet>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCM;AAjCN,mBAAuE;AACvE,yBAA2C;AAC3C,qCAAyD;AAmBlD,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,iBAAiB,eAAe,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,aAAa;AAEzF,SACE,6CAAC,yBACC;AAAA,gDAAC,4BAAa,iBAAO,qBAAoB;AAAA,IACxC,eAAe,WAAW,IACzB,4CAAC,OAAE,WAAU,iCAAiC,iBAAO,uBAAsB,IAE3E;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,OAAO;AAAA,QACd,eAAe,CAAC,UAAU,SAAS,SAAS,iBAAiB,OAAO,KAAK,CAAC;AAAA,QAC1E,WAAU;AAAA,QAET,yBAAe,IAAI,CAAC,WAAW;AAC9B,gBAAM,cAAc,OAAO,cAAc;AACzC,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,aAAY;AAAA,cACZ,WAAU;AAAA,cAEV;AAAA,4DAAC,6BAAa,WAAU,WACtB,uDAAC,2BAAW,SAAS,WAAW,OAAO,EAAE,IAAI,WAAU,yBACrD;AAAA,8DAAC,UAAM,iBAAO,MAAK;AAAA,kBAClB,OAAO,cACN,4CAAC,UAAK,WAAU,6CACb,iBAAO,aACV,IACE;AAAA,kBACH,cACC,4CAAC,UAAK,WAAU,6CACb,iBAAO,wBACV,IACE;AAAA,mBACN,GACF;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,OAAO;AAAA,oBACd,IAAI,WAAW,OAAO,EAAE;AAAA,oBACxB,UAAU;AAAA;AAAA,gBACZ;AAAA;AAAA;AAAA,YAvBK,OAAO;AAAA,UAwBd;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,IAGD,iBACC,6CAAC,SAAI,WAAU,sCACb;AAAA,kDAAC,OAAE,WAAU,eAAe,yBAAe,MAAK;AAAA,MAC/C,eAAe,cACd,4CAAC,OAAE,WAAU,8BAA8B,yBAAe,aAAY,IACpE;AAAA,MACH,eAAe,gBACd,4CAAC,OAAE,WAAU,sCAAsC,iBAAO,oBAAmB,IAC3E;AAAA,OACN,IACE;AAAA,IAEJ,4CAAC,sBAAM,gBAAc,CAAC,CAAC,aAAa,eAAe,QACjD;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH,QAAQ,aAAa;AAAA,QACrB,aAAa,mBAAmB;AAAA;AAAA,IAClC,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/checkout-forms/checkout-payment-step.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field, FieldContent, FieldLabel, FieldLegend, FieldSet } from "../../../ui/field.mjs";
+import { RadioGroup, RadioGroupItem } from "../../../ui/radio-group.mjs";
+import { CheckoutFieldFeedback } from "./checkout-field-feedback.mjs";
+function CheckoutPaymentStep({
+  values,
+  onChange,
+  labels,
+  paymentMethods = [],
+  fieldErrors,
+  fieldDescriptions
+}) {
+  const selectedMethod = paymentMethods.find((method) => method.id === values.paymentMethod);
+  return /* @__PURE__ */ jsxs(FieldSet, { children: [
+    /* @__PURE__ */ jsx(FieldLegend, { children: labels.paymentMethodLegend }),
+    paymentMethods.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: labels.noPaymentMethodsLabel }) : /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        value: values.paymentMethod,
+        onValueChange: (value) => value && onChange("paymentMethod", String(value)),
+        className: "grid grid-cols-1 gap-3",
+        children: paymentMethods.map((method) => {
+          const unavailable = method.isEnabled === false;
+          return /* @__PURE__ */ jsxs(
+            Field,
+            {
+              orientation: "horizontal",
+              className: "flex-wrap items-start justify-between gap-3 rounded-lg border p-4",
+              children: [
+                /* @__PURE__ */ jsx(FieldContent, { className: "min-w-0", children: /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: `payment-${method.id}`, className: "flex flex-col gap-0.5", children: [
+                  /* @__PURE__ */ jsx("span", { children: method.name }),
+                  method.description ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: method.description }) : null,
+                  unavailable ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-normal", children: labels.unavailableMethodLabel }) : null
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    value: method.id,
+                    id: `payment-${method.id}`,
+                    disabled: unavailable
+                  }
+                )
+              ]
+            },
+            method.id
+          );
+        })
+      }
+    ),
+    selectedMethod ? /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 rounded-lg p-4 text-sm", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: selectedMethod.name }),
+      selectedMethod.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1", children: selectedMethod.description }) : null,
+      selectedMethod.requiresSetup ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: labels.requiresSetupLabel }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(Field, { "data-invalid": !!fieldErrors?.paymentMethod?.length, children: /* @__PURE__ */ jsx(
+      CheckoutFieldFeedback,
+      {
+        id: "checkout-payment-method",
+        errors: fieldErrors?.paymentMethod,
+        description: fieldDescriptions?.paymentMethod
+      }
+    ) })
+  ] });
+}
+export {
+  CheckoutPaymentStep
+};
+//# sourceMappingURL=checkout-payment-step.mjs.map