@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/customer-favorites/components/favorite-product-card.mjs

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, PRODUCT_IMAGE_FALLBACK } from "@thorprovider/blocks";
+import { compareAtLabel, priceLabel } from "../engine.mjs";
+import { FavoriteButton } from "./favorite-button.mjs";
+import { QuantityStepper } from "./quantity-stepper.mjs";
+function OrganizeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: "size-4",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.8",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M4 7h10M4 12h10M4 17h6" }),
+        /* @__PURE__ */ jsx("path", { d: "M17 12v6M14 15h6" })
+      ]
+    }
+  );
+}
+function FavoriteProductCard({
+  row,
+  labels,
+  capabilities,
+  saved,
+  saving = false,
+  saveError = false,
+  showQuantity,
+  quantityLabel,
+  quantityMax,
+  personalListCount = 0,
+  busy = false,
+  selecting = false,
+  selected = false,
+  onToggleSelected,
+  onToggleFavorite,
+  onAddToCart,
+  onOrganize,
+  onOpenProduct,
+  onQuantityChange,
+  onRemoveFromList
+}) {
+  const { product, variant } = row;
+  const previousPrice = compareAtLabel(product);
+  const variantText = variant ? variant.options.slice(0, 2).map((option) => `${option.name}: ${option.value}`).join(" \xB7 ") : product.variants.length > 1 ? labels.card.variantPending : "";
+  return /* @__PURE__ */ jsxs(Card, { className: "group flex h-full flex-col gap-0 overflow-hidden py-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] w-full overflow-hidden bg-muted", children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: product.image ?? PRODUCT_IMAGE_FALLBACK,
+          alt: product.imageAlt ?? product.title,
+          loading: "lazy",
+          className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105 motion-reduce:transition-none"
+        }
+      ),
+      selecting && onToggleSelected ? /* @__PURE__ */ jsx("label", { className: "absolute top-1 left-1 flex size-8 items-center justify-center rounded-md bg-background/90 shadow-sm focus-within:ring-2 focus-within:ring-ring", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: selected,
+          "aria-label": `${labels.aria.selectItem}: ${product.title}`,
+          onChange: onToggleSelected,
+          className: "size-5 rounded border-input accent-primary"
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsx("div", { className: "absolute top-1 right-1", children: /* @__PURE__ */ jsx(
+        FavoriteButton,
+        {
+          saved,
+          saving,
+          error: saveError,
+          disabled: !capabilities.enabled || busy,
+          labels,
+          compact: true,
+          onToggle: onToggleFavorite
+        }
+      ) }),
+      product.availability !== "available" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "absolute bottom-1.5 left-1.5 max-w-[70%] truncate", children: labels.card.availability[product.availability] }) : null,
+      capabilities.namedLists && onOrganize ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "icon",
+          variant: "secondary",
+          disabled: busy,
+          "aria-label": labels.card.organize,
+          onClick: onOrganize,
+          className: "absolute right-1 bottom-1 size-8 bg-background/90 shadow-sm",
+          children: /* @__PURE__ */ jsx(OrganizeIcon, {})
+        }
+      ) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 p-2", children: [
+      onOpenProduct ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onOpenProduct,
+          className: "line-clamp-2 min-h-9 text-left text-[13px] leading-snug font-semibold hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+          children: product.title
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "line-clamp-2 min-h-9 text-[13px] leading-snug font-semibold", children: product.title }),
+      product.brand ? /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] tracking-wide text-muted-foreground uppercase", children: product.brand }) : null,
+      variantText ? /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-muted-foreground", children: variantText }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "mt-auto flex flex-col gap-1.5 pt-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-1.5 gap-y-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold", children: priceLabel(product, labels.card.unavailablePrice) }),
+          previousPrice ? /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground line-through", children: previousPrice }) : null
+        ] }),
+        personalListCount > 1 && !showQuantity ? /* @__PURE__ */ jsx("p", { className: "truncate text-[10px] text-muted-foreground", children: labels.card.inLists.replace("{count}", String(personalListCount)) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: capabilities.addToCart && onAddToCart ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            disabled: busy,
+            onClick: onAddToCart,
+            className: "min-h-8 flex-1 px-1.5 text-[11px]",
+            children: labels.card.addToCart
+          }
+        ) : null }),
+        showQuantity && onQuantityChange ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-1", children: [
+          /* @__PURE__ */ jsx(
+            QuantityStepper,
+            {
+              value: row.quantity ?? 1,
+              max: quantityMax,
+              label: quantityLabel,
+              labels,
+              disabled: busy,
+              onChange: onQuantityChange
+            }
+          ),
+          onRemoveFromList ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "ghost",
+              disabled: busy,
+              onClick: onRemoveFromList,
+              className: "min-h-8 px-1.5 text-[11px] text-destructive",
+              children: labels.card.removeFromList
+            }
+          ) : null
+        ] }) : null
+      ] })
+    ] })
+  ] });
+}
+export {
+  FavoriteProductCard
+};
+//# sourceMappingURL=favorite-product-card.mjs.map

package/dist/blocks/designs/customer-favorites/components/favorite-product-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-favorites/components/favorite-product-card.tsx"],"sourcesContent":["'use client'\n\nimport { Badge, Button, Card, PRODUCT_IMAGE_FALLBACK } from '@thorprovider/blocks'\n\nimport type { FavoritesCapabilities, FavoritesLabels, FavoritesRow } from '../contracts'\nimport { compareAtLabel, priceLabel } from '../engine'\n\nimport { FavoriteButton } from './favorite-button'\nimport { QuantityStepper } from './quantity-stepper'\n\ntype Props = {\n  row: FavoritesRow\n  labels: FavoritesLabels\n  capabilities: FavoritesCapabilities\n  saved: boolean\n  saving?: boolean\n  saveError?: boolean\n  showQuantity: boolean\n  quantityLabel: string\n  quantityMax: number\n  personalListCount?: number\n  busy?: boolean\n  selecting?: boolean\n  selected?: boolean\n  onToggleSelected?: () => void\n  onToggleFavorite: () => void\n  onAddToCart?: () => void\n  onOrganize?: () => void\n  onOpenProduct?: () => void\n  onQuantityChange?: (quantity: number) => void\n  onRemoveFromList?: () => void\n}\n\nfunction OrganizeIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      className=\"size-4\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.8\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M4 7h10M4 12h10M4 17h6\" />\n      <path d=\"M17 12v6M14 15h6\" />\n    </svg>\n  )\n}\n\n/**\n * Vertical wishlist cell: image-first, two-line title, one variant line, current\n * and previous price, and the actions pinned to the bottom so cards align.\n */\nexport function FavoriteProductCard({\n  row,\n  labels,\n  capabilities,\n  saved,\n  saving = false,\n  saveError = false,\n  showQuantity,\n  quantityLabel,\n  quantityMax,\n  personalListCount = 0,\n  busy = false,\n  selecting = false,\n  selected = false,\n  onToggleSelected,\n  onToggleFavorite,\n  onAddToCart,\n  onOrganize,\n  onOpenProduct,\n  onQuantityChange,\n  onRemoveFromList,\n}: Props) {\n  const { product, variant } = row\n  const previousPrice = compareAtLabel(product)\n  const variantText = variant\n    ? variant.options\n        .slice(0, 2)\n        .map((option) => `${option.name}: ${option.value}`)\n        .join(' · ')\n    : product.variants.length > 1\n      ? labels.card.variantPending\n      : ''\n\n  return (\n    <Card className=\"group flex h-full flex-col gap-0 overflow-hidden py-0\">\n      <div className=\"relative aspect-[4/3] w-full overflow-hidden bg-muted\">\n        <img\n          src={product.image ?? PRODUCT_IMAGE_FALLBACK}\n          alt={product.imageAlt ?? product.title}\n          loading=\"lazy\"\n          className=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105 motion-reduce:transition-none\"\n        />\n\n        {selecting && onToggleSelected ? (\n          <label className=\"absolute top-1 left-1 flex size-8 items-center justify-center rounded-md bg-background/90 shadow-sm focus-within:ring-2 focus-within:ring-ring\">\n            <input\n              type=\"checkbox\"\n              checked={selected}\n              aria-label={`${labels.aria.selectItem}: ${product.title}`}\n              onChange={onToggleSelected}\n              className=\"size-5 rounded border-input accent-primary\"\n            />\n          </label>\n        ) : null}\n\n        <div className=\"absolute top-1 right-1\">\n          <FavoriteButton\n            saved={saved}\n            saving={saving}\n            error={saveError}\n            disabled={!capabilities.enabled || busy}\n            labels={labels}\n            compact\n            onToggle={onToggleFavorite}\n          />\n        </div>\n\n        {product.availability !== 'available' ? (\n          <Badge variant=\"secondary\" className=\"absolute bottom-1.5 left-1.5 max-w-[70%] truncate\">\n            {labels.card.availability[product.availability]}\n          </Badge>\n        ) : null}\n\n        {capabilities.namedLists && onOrganize ? (\n          <Button\n            type=\"button\"\n            size=\"icon\"\n            variant=\"secondary\"\n            disabled={busy}\n            aria-label={labels.card.organize}\n            onClick={onOrganize}\n            className=\"absolute right-1 bottom-1 size-8 bg-background/90 shadow-sm\"\n          >\n            <OrganizeIcon />\n          </Button>\n        ) : null}\n      </div>\n\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5 p-2\">\n        {onOpenProduct ? (\n          <button\n            type=\"button\"\n            onClick={onOpenProduct}\n            className=\"line-clamp-2 min-h-9 text-left text-[13px] leading-snug font-semibold hover:underline focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none\"\n          >\n            {product.title}\n          </button>\n        ) : (\n          <p className=\"line-clamp-2 min-h-9 text-[13px] leading-snug font-semibold\">{product.title}</p>\n        )}\n\n        {product.brand ? (\n          <p className=\"truncate text-[10px] tracking-wide text-muted-foreground uppercase\">\n            {product.brand}\n          </p>\n        ) : null}\n\n        {variantText ? (\n          <p className=\"truncate text-[10px] text-muted-foreground\">{variantText}</p>\n        ) : null}\n\n        <div className=\"mt-auto flex flex-col gap-1.5 pt-1\">\n          <div className=\"flex flex-wrap items-baseline gap-x-1.5 gap-y-0\">\n            <span className=\"text-[13px] font-semibold\">\n              {priceLabel(product, labels.card.unavailablePrice)}\n            </span>\n            {previousPrice ? (\n              <span className=\"text-[11px] text-muted-foreground line-through\">{previousPrice}</span>\n            ) : null}\n          </div>\n\n          {personalListCount > 1 && !showQuantity ? (\n            <p className=\"truncate text-[10px] text-muted-foreground\">\n              {labels.card.inLists.replace('{count}', String(personalListCount))}\n            </p>\n          ) : null}\n\n          <div className=\"flex items-center gap-1.5\">\n            {capabilities.addToCart && onAddToCart ? (\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                disabled={busy}\n                onClick={onAddToCart}\n                className=\"min-h-8 flex-1 px-1.5 text-[11px]\"\n              >\n                {labels.card.addToCart}\n              </Button>\n            ) : null}\n          </div>\n\n          {showQuantity && onQuantityChange ? (\n            <div className=\"flex flex-wrap items-center justify-between gap-1\">\n              <QuantityStepper\n                value={row.quantity ?? 1}\n                max={quantityMax}\n                label={quantityLabel}\n                labels={labels}\n                disabled={busy}\n                onChange={onQuantityChange}\n              />\n              {onRemoveFromList ? (\n                <Button\n                  type=\"button\"\n                  size=\"sm\"\n                  variant=\"ghost\"\n                  disabled={busy}\n                  onClick={onRemoveFromList}\n                  className=\"min-h-8 px-1.5 text-[11px] text-destructive\"\n                >\n                  {labels.card.removeFromList}\n                </Button>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      </div>\n    </Card>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/customer-favorites/components/favorites-header.d.ts

@@ -0,0 +1,10 @@
+import type { FavoritesLabels } from '../contracts';
+type Props = {
+    labels: FavoritesLabels;
+    showNewList: boolean;
+    onNewList?: () => void;
+};
+/** Compact title row; the primary action collapses to an icon on narrow containers. */
+export declare function FavoritesHeader({ labels, showNewList, onNewList }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=favorites-header.d.ts.map

package/dist/blocks/designs/customer-favorites/components/favorites-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"favorites-header.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/customer-favorites/components/favorites-header.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,eAAe,CAAA;IACvB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,CAAA;AAkBD,uFAAuF;AACvF,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,KAAK,+BAwBxE"}

package/dist/blocks/designs/customer-favorites/components/favorites-header.js

@@ -0,0 +1,68 @@
+"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 favorites_header_exports = {};
+__export(favorites_header_exports, {
+  FavoritesHeader: () => FavoritesHeader
+});
+module.exports = __toCommonJS(favorites_header_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blocks = require("@thorprovider/blocks");
+function PlusIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: "size-4",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14M5 12h14" })
+    }
+  );
+}
+function FavoritesHeader({ labels, showNewList, onNewList }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "truncate text-lg font-semibold tracking-tight", children: labels.header.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "hidden text-xs text-muted-foreground @sm:block", children: labels.header.description })
+    ] }),
+    showNewList && onNewList ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_blocks.Button,
+      {
+        type: "button",
+        size: "sm",
+        onClick: onNewList,
+        "aria-label": labels.header.newList,
+        className: "min-h-9 shrink-0 px-2.5",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlusIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hidden @sm:inline", children: labels.header.newList })
+        ]
+      }
+    ) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FavoritesHeader
+});
+//# sourceMappingURL=favorites-header.js.map

package/dist/blocks/designs/customer-favorites/components/favorites-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-favorites/components/favorites-header.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '@thorprovider/blocks'\n\nimport type { FavoritesLabels } from '../contracts'\n\ntype Props = {\n  labels: FavoritesLabels\n  showNewList: boolean\n  onNewList?: () => void\n}\n\nfunction PlusIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      className=\"size-4\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n    >\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  )\n}\n\n/** Compact title row; the primary action collapses to an icon on narrow containers. */\nexport function FavoritesHeader({ labels, showNewList, onNewList }: Props) {\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <div className=\"min-w-0\">\n        <h2 className=\"truncate text-lg font-semibold tracking-tight\">{labels.header.title}</h2>\n        <p className=\"hidden text-xs text-muted-foreground @sm:block\">\n          {labels.header.description}\n        </p>\n      </div>\n\n      {showNewList && onNewList ? (\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          onClick={onNewList}\n          aria-label={labels.header.newList}\n          className=\"min-h-9 shrink-0 px-2.5\"\n        >\n          <PlusIcon />\n          <span className=\"hidden @sm:inline\">{labels.header.newList}</span>\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBM;AArBN,oBAAuB;AAUvB,SAAS,WAAW;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MAEd,sDAAC,UAAK,GAAE,oBAAmB;AAAA;AAAA,EAC7B;AAEJ;AAGO,SAAS,gBAAgB,EAAE,QAAQ,aAAa,UAAU,GAAU;AACzE,SACE,6CAAC,SAAI,WAAU,2CACb;AAAA,iDAAC,SAAI,WAAU,WACb;AAAA,kDAAC,QAAG,WAAU,iDAAiD,iBAAO,OAAO,OAAM;AAAA,MACnF,4CAAC,OAAE,WAAU,kDACV,iBAAO,OAAO,aACjB;AAAA,OACF;AAAA,IAEC,eAAe,YACd;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAY,OAAO,OAAO;AAAA,QAC1B,WAAU;AAAA,QAEV;AAAA,sDAAC,YAAS;AAAA,UACV,4CAAC,UAAK,WAAU,qBAAqB,iBAAO,OAAO,SAAQ;AAAA;AAAA;AAAA,IAC7D,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/blocks/designs/customer-favorites/components/favorites-header.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@thorprovider/blocks";
+function PlusIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: "size-4",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14" })
+    }
+  );
+}
+function FavoritesHeader({ labels, showNewList, onNewList }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("h2", { className: "truncate text-lg font-semibold tracking-tight", children: labels.header.title }),
+      /* @__PURE__ */ jsx("p", { className: "hidden text-xs text-muted-foreground @sm:block", children: labels.header.description })
+    ] }),
+    showNewList && onNewList ? /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        onClick: onNewList,
+        "aria-label": labels.header.newList,
+        className: "min-h-9 shrink-0 px-2.5",
+        children: [
+          /* @__PURE__ */ jsx(PlusIcon, {}),
+          /* @__PURE__ */ jsx("span", { className: "hidden @sm:inline", children: labels.header.newList })
+        ]
+      }
+    ) : null
+  ] });
+}
+export {
+  FavoritesHeader
+};
+//# sourceMappingURL=favorites-header.mjs.map

package/dist/blocks/designs/customer-favorites/components/favorites-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-favorites/components/favorites-header.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '@thorprovider/blocks'\n\nimport type { FavoritesLabels } from '../contracts'\n\ntype Props = {\n  labels: FavoritesLabels\n  showNewList: boolean\n  onNewList?: () => void\n}\n\nfunction PlusIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 24 24\"\n      className=\"size-4\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n    >\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  )\n}\n\n/** Compact title row; the primary action collapses to an icon on narrow containers. */\nexport function FavoritesHeader({ labels, showNewList, onNewList }: Props) {\n  return (\n    <div className=\"flex items-center justify-between gap-2\">\n      <div className=\"min-w-0\">\n        <h2 className=\"truncate text-lg font-semibold tracking-tight\">{labels.header.title}</h2>\n        <p className=\"hidden text-xs text-muted-foreground @sm:block\">\n          {labels.header.description}\n        </p>\n      </div>\n\n      {showNewList && onNewList ? (\n        <Button\n          type=\"button\"\n          size=\"sm\"\n          onClick={onNewList}\n          aria-label={labels.header.newList}\n          className=\"min-h-9 shrink-0 px-2.5\"\n        >\n          <PlusIcon />\n          <span className=\"hidden @sm:inline\">{labels.header.newList}</span>\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";AAuBM,cASA,YATA;AArBN,SAAS,cAAc;AAUvB,SAAS,WAAW;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MAEd,8BAAC,UAAK,GAAE,oBAAmB;AAAA;AAAA,EAC7B;AAEJ;AAGO,SAAS,gBAAgB,EAAE,QAAQ,aAAa,UAAU,GAAU;AACzE,SACE,qBAAC,SAAI,WAAU,2CACb;AAAA,yBAAC,SAAI,WAAU,WACb;AAAA,0BAAC,QAAG,WAAU,iDAAiD,iBAAO,OAAO,OAAM;AAAA,MACnF,oBAAC,OAAE,WAAU,kDACV,iBAAO,OAAO,aACjB;AAAA,OACF;AAAA,IAEC,eAAe,YACd;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS;AAAA,QACT,cAAY,OAAO,OAAO;AAAA,QAC1B,WAAU;AAAA,QAEV;AAAA,8BAAC,YAAS;AAAA,UACV,oBAAC,UAAK,WAAU,qBAAqB,iBAAO,OAAO,SAAQ;AAAA;AAAA;AAAA,IAC7D,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/blocks/designs/customer-favorites/components/favorites-navigation.d.ts

@@ -0,0 +1,19 @@
+import type { CollectionId, FavoritesLabels } from '../contracts';
+export type CollectionEntry = {
+    id: CollectionId;
+    label: string;
+    count: number;
+    group: 'personal' | 'organization';
+};
+type Props = {
+    collections: CollectionEntry[];
+    active: CollectionId;
+    labels: FavoritesLabels;
+    onSelect: (id: CollectionId) => void;
+    onMore?: () => void;
+    moreLabel?: string;
+};
+/** Chips wrap on every width; overflow never becomes a horizontal scroller. */
+export declare function FavoritesNavigation({ collections, active, labels, onSelect, onMore, moreLabel, }: Props): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=favorites-navigation.d.ts.map

package/dist/blocks/designs/customer-favorites/components/favorites-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"favorites-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/customer-favorites/components/favorites-navigation.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,YAAY,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,UAAU,GAAG,cAAc,CAAA;CACnC,CAAA;AAED,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,eAAe,EAAE,CAAA;IAC9B,MAAM,EAAE,YAAY,CAAA;IACpB,MAAM,EAAE,eAAe,CAAA;IACvB,QAAQ,EAAE,CAAC,EAAE,EAAE,YAAY,KAAK,IAAI,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAKD,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,KAAK,+BA+DP"}

package/dist/blocks/designs/customer-favorites/components/favorites-navigation.js

@@ -0,0 +1,90 @@
+"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 favorites_navigation_exports = {};
+__export(favorites_navigation_exports, {
+  FavoritesNavigation: () => FavoritesNavigation
+});
+module.exports = __toCommonJS(favorites_navigation_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blocks = require("@thorprovider/blocks");
+const chip = "inline-flex min-h-10 items-center gap-1.5 rounded-full border px-3 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none";
+function FavoritesNavigation({
+  collections,
+  active,
+  labels,
+  onSelect,
+  onMore,
+  moreLabel
+}) {
+  const personal = collections.filter((entry) => entry.group === "personal");
+  const organization = collections.filter((entry) => entry.group === "organization");
+  const render = (entry) => {
+    const pressed = entry.id === active;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": pressed,
+        title: entry.label,
+        onClick: () => onSelect(entry.id),
+        className: `${chip} ${pressed ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-foreground hover:bg-muted"} max-w-56`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: entry.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              className: `rounded-full px-1.5 text-xs ${pressed ? "bg-primary-foreground/20" : "bg-muted text-muted-foreground"}`,
+              children: entry.count
+            }
+          )
+        ]
+      }
+    ) }, entry.id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "group", "aria-label": labels.aria.selectCollection, className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "ul",
+      {
+        "data-horizontal-scroll": true,
+        className: "flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]",
+        children: [
+          personal.map(render),
+          onMore ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blocks.Button, { type: "button", variant: "ghost", size: "sm", onClick: onMore, className: "min-h-10", children: moreLabel ?? labels.collections.more }) }) : null
+        ]
+      }
+    ),
+    organization.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: labels.collections.organizationGroup }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "ul",
+        {
+          "data-horizontal-scroll": true,
+          className: "mt-1 flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]",
+          children: organization.map(render)
+        }
+      )
+    ] }) : null
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FavoritesNavigation
+});
+//# sourceMappingURL=favorites-navigation.js.map

package/dist/blocks/designs/customer-favorites/components/favorites-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-favorites/components/favorites-navigation.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '@thorprovider/blocks'\n\nimport type { CollectionId, FavoritesLabels } from '../contracts'\n\nexport type CollectionEntry = {\n  id: CollectionId\n  label: string\n  count: number\n  group: 'personal' | 'organization'\n}\n\ntype Props = {\n  collections: CollectionEntry[]\n  active: CollectionId\n  labels: FavoritesLabels\n  onSelect: (id: CollectionId) => void\n  onMore?: () => void\n  moreLabel?: string\n}\n\nconst chip =\n  'inline-flex min-h-10 items-center gap-1.5 rounded-full border px-3 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'\n\n/** Chips wrap on every width; overflow never becomes a horizontal scroller. */\nexport function FavoritesNavigation({\n  collections,\n  active,\n  labels,\n  onSelect,\n  onMore,\n  moreLabel,\n}: Props) {\n  const personal = collections.filter((entry) => entry.group === 'personal')\n  const organization = collections.filter((entry) => entry.group === 'organization')\n\n  const render = (entry: CollectionEntry) => {\n    const pressed = entry.id === active\n    return (\n      <li key={entry.id} className=\"shrink-0\">\n        <button\n          type=\"button\"\n          aria-pressed={pressed}\n          title={entry.label}\n          onClick={() => onSelect(entry.id)}\n          className={`${chip} ${\n            pressed\n              ? 'border-primary bg-primary text-primary-foreground'\n              : 'border-border bg-background text-foreground hover:bg-muted'\n          } max-w-56`}\n        >\n          <span className=\"truncate\">{entry.label}</span>\n          <span\n            className={`rounded-full px-1.5 text-xs ${\n              pressed ? 'bg-primary-foreground/20' : 'bg-muted text-muted-foreground'\n            }`}\n          >\n            {entry.count}\n          </span>\n        </button>\n      </li>\n    )\n  }\n\n  return (\n    <div role=\"group\" aria-label={labels.aria.selectCollection} className=\"space-y-2\">\n      <ul\n        data-horizontal-scroll\n        className=\"flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]\"\n      >\n        {personal.map(render)}\n        {onMore ? (\n          <li className=\"shrink-0\">\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onMore} className=\"min-h-10\">\n              {moreLabel ?? labels.collections.more}\n            </Button>\n          </li>\n        ) : null}\n      </ul>\n\n      {organization.length > 0 ? (\n        <div>\n          <p className=\"text-xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {labels.collections.organizationGroup}\n          </p>\n          <ul\n            data-horizontal-scroll\n            className=\"mt-1 flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]\"\n          >\n            {organization.map(render)}\n          </ul>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCQ;AAvCR,oBAAuB;AAoBvB,MAAM,OACJ;AAGK,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAU;AACR,QAAM,WAAW,YAAY,OAAO,CAAC,UAAU,MAAM,UAAU,UAAU;AACzE,QAAM,eAAe,YAAY,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc;AAEjF,QAAM,SAAS,CAAC,UAA2B;AACzC,UAAM,UAAU,MAAM,OAAO;AAC7B,WACE,4CAAC,QAAkB,WAAU,YAC3B;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,OAAO,MAAM;AAAA,QACb,SAAS,MAAM,SAAS,MAAM,EAAE;AAAA,QAChC,WAAW,GAAG,IAAI,IAChB,UACI,sDACA,4DACN;AAAA,QAEA;AAAA,sDAAC,UAAK,WAAU,YAAY,gBAAM,OAAM;AAAA,UACxC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,+BACT,UAAU,6BAA6B,gCACzC;AAAA,cAEC,gBAAM;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IACF,KApBO,MAAM,EAqBf;AAAA,EAEJ;AAEA,SACE,6CAAC,SAAI,MAAK,SAAQ,cAAY,OAAO,KAAK,kBAAkB,WAAU,aACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,0BAAsB;AAAA,QACtB,WAAU;AAAA,QAET;AAAA,mBAAS,IAAI,MAAM;AAAA,UACnB,SACC,4CAAC,QAAG,WAAU,YACZ,sDAAC,wBAAO,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,SAAS,QAAQ,WAAU,YACxE,uBAAa,OAAO,YAAY,MACnC,GACF,IACE;AAAA;AAAA;AAAA,IACN;AAAA,IAEC,aAAa,SAAS,IACrB,6CAAC,SACC;AAAA,kDAAC,OAAE,WAAU,qEACV,iBAAO,YAAY,mBACtB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,0BAAsB;AAAA,UACtB,WAAU;AAAA,UAET,uBAAa,IAAI,MAAM;AAAA;AAAA,MAC1B;AAAA,OACF,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/blocks/designs/customer-favorites/components/favorites-navigation.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@thorprovider/blocks";
+const chip = "inline-flex min-h-10 items-center gap-1.5 rounded-full border px-3 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none";
+function FavoritesNavigation({
+  collections,
+  active,
+  labels,
+  onSelect,
+  onMore,
+  moreLabel
+}) {
+  const personal = collections.filter((entry) => entry.group === "personal");
+  const organization = collections.filter((entry) => entry.group === "organization");
+  const render = (entry) => {
+    const pressed = entry.id === active;
+    return /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": pressed,
+        title: entry.label,
+        onClick: () => onSelect(entry.id),
+        className: `${chip} ${pressed ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-foreground hover:bg-muted"} max-w-56`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `rounded-full px-1.5 text-xs ${pressed ? "bg-primary-foreground/20" : "bg-muted text-muted-foreground"}`,
+              children: entry.count
+            }
+          )
+        ]
+      }
+    ) }, entry.id);
+  };
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": labels.aria.selectCollection, className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        "data-horizontal-scroll": true,
+        className: "flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]",
+        children: [
+          personal.map(render),
+          onMore ? /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onMore, className: "min-h-10", children: moreLabel ?? labels.collections.more }) }) : null
+        ]
+      }
+    ),
+    organization.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: labels.collections.organizationGroup }),
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          "data-horizontal-scroll": true,
+          className: "mt-1 flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]",
+          children: organization.map(render)
+        }
+      )
+    ] }) : null
+  ] });
+}
+export {
+  FavoritesNavigation
+};
+//# sourceMappingURL=favorites-navigation.mjs.map

package/dist/blocks/designs/customer-favorites/components/favorites-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-favorites/components/favorites-navigation.tsx"],"sourcesContent":["'use client'\n\nimport { Button } from '@thorprovider/blocks'\n\nimport type { CollectionId, FavoritesLabels } from '../contracts'\n\nexport type CollectionEntry = {\n  id: CollectionId\n  label: string\n  count: number\n  group: 'personal' | 'organization'\n}\n\ntype Props = {\n  collections: CollectionEntry[]\n  active: CollectionId\n  labels: FavoritesLabels\n  onSelect: (id: CollectionId) => void\n  onMore?: () => void\n  moreLabel?: string\n}\n\nconst chip =\n  'inline-flex min-h-10 items-center gap-1.5 rounded-full border px-3 text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'\n\n/** Chips wrap on every width; overflow never becomes a horizontal scroller. */\nexport function FavoritesNavigation({\n  collections,\n  active,\n  labels,\n  onSelect,\n  onMore,\n  moreLabel,\n}: Props) {\n  const personal = collections.filter((entry) => entry.group === 'personal')\n  const organization = collections.filter((entry) => entry.group === 'organization')\n\n  const render = (entry: CollectionEntry) => {\n    const pressed = entry.id === active\n    return (\n      <li key={entry.id} className=\"shrink-0\">\n        <button\n          type=\"button\"\n          aria-pressed={pressed}\n          title={entry.label}\n          onClick={() => onSelect(entry.id)}\n          className={`${chip} ${\n            pressed\n              ? 'border-primary bg-primary text-primary-foreground'\n              : 'border-border bg-background text-foreground hover:bg-muted'\n          } max-w-56`}\n        >\n          <span className=\"truncate\">{entry.label}</span>\n          <span\n            className={`rounded-full px-1.5 text-xs ${\n              pressed ? 'bg-primary-foreground/20' : 'bg-muted text-muted-foreground'\n            }`}\n          >\n            {entry.count}\n          </span>\n        </button>\n      </li>\n    )\n  }\n\n  return (\n    <div role=\"group\" aria-label={labels.aria.selectCollection} className=\"space-y-2\">\n      <ul\n        data-horizontal-scroll\n        className=\"flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]\"\n      >\n        {personal.map(render)}\n        {onMore ? (\n          <li className=\"shrink-0\">\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onMore} className=\"min-h-10\">\n              {moreLabel ?? labels.collections.more}\n            </Button>\n          </li>\n        ) : null}\n      </ul>\n\n      {organization.length > 0 ? (\n        <div>\n          <p className=\"text-xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {labels.collections.organizationGroup}\n          </p>\n          <ul\n            data-horizontal-scroll\n            className=\"mt-1 flex items-center gap-2 overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none]\"\n          >\n            {organization.map(render)}\n          </ul>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":";AAyCQ,SAWE,KAXF;AAvCR,SAAS,cAAc;AAoBvB,MAAM,OACJ;AAGK,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAU;AACR,QAAM,WAAW,YAAY,OAAO,CAAC,UAAU,MAAM,UAAU,UAAU;AACzE,QAAM,eAAe,YAAY,OAAO,CAAC,UAAU,MAAM,UAAU,cAAc;AAEjF,QAAM,SAAS,CAAC,UAA2B;AACzC,UAAM,UAAU,MAAM,OAAO;AAC7B,WACE,oBAAC,QAAkB,WAAU,YAC3B;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,OAAO,MAAM;AAAA,QACb,SAAS,MAAM,SAAS,MAAM,EAAE;AAAA,QAChC,WAAW,GAAG,IAAI,IAChB,UACI,sDACA,4DACN;AAAA,QAEA;AAAA,8BAAC,UAAK,WAAU,YAAY,gBAAM,OAAM;AAAA,UACxC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,+BACT,UAAU,6BAA6B,gCACzC;AAAA,cAEC,gBAAM;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IACF,KApBO,MAAM,EAqBf;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,MAAK,SAAQ,cAAY,OAAO,KAAK,kBAAkB,WAAU,aACpE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,0BAAsB;AAAA,QACtB,WAAU;AAAA,QAET;AAAA,mBAAS,IAAI,MAAM;AAAA,UACnB,SACC,oBAAC,QAAG,WAAU,YACZ,8BAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,SAAS,QAAQ,WAAU,YACxE,uBAAa,OAAO,YAAY,MACnC,GACF,IACE;AAAA;AAAA;AAAA,IACN;AAAA,IAEC,aAAa,SAAS,IACrB,qBAAC,SACC;AAAA,0BAAC,OAAE,WAAU,qEACV,iBAAO,YAAY,mBACtB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,0BAAsB;AAAA,UACtB,WAAU;AAAA,UAET,uBAAa,IAAI,MAAM;AAAA;AAAA,MAC1B;AAAA,OACF,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/blocks/designs/customer-favorites/components/favorites-status.d.ts

@@ -0,0 +1,15 @@
+import type { FavoritesLabels } from '../contracts';
+import type { FavoritesViewState } from '../engine';
+type Props = {
+    state: FavoritesViewState;
+    labels: FavoritesLabels;
+    onExplore?: () => void;
+    onClearSearch?: () => void;
+    onRetry?: () => void;
+    onSignIn?: () => void;
+    onBackToAll?: () => void;
+};
+/** One panel per non-ready state; every empty state offers a useful next step. */
+export declare function FavoritesStatus({ state, labels, onExplore, onClearSearch, onRetry, onSignIn, onBackToAll, }: Props): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=favorites-status.d.ts.map

package/dist/blocks/designs/customer-favorites/components/favorites-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"favorites-status.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/customer-favorites/components/favorites-status.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAA;AACnD,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,kBAAkB,CAAA;IACzB,MAAM,EAAE,eAAe,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAUD,kFAAkF;AAClF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,SAAS,EACT,aAAa,EACb,OAAO,EACP,QAAQ,EACR,WAAW,GACZ,EAAE,KAAK,sCAwGP"}