@thorprovider/blocks 1.0.0 → 3.0.0

package/dist/blocks/e-commerce/product-categories/category-card.js

@@ -0,0 +1,154 @@
+"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 category_card_exports = {};
+__export(category_card_exports, {
+  CategoryCard: () => CategoryCard,
+  default: () => category_card_default
+});
+module.exports = __toCommonJS(category_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_utils = require("../../../lib/utils.js");
+var import_category_shared = require("./category-shared.js");
+function GridCell({
+  category,
+  browseLabel,
+  itemsLabel,
+  trendingLabel,
+  imageFallback,
+  onBrowse
+}) {
+  const count = (0, import_category_shared.formatCount)(category.itemCount, itemsLabel);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "group overflow-hidden py-0 transition-all duration-500 hover:shadow-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative aspect-[5/4] overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "img",
+      {
+        src: (0, import_category_shared.resolveImage)(category.image, imageFallback),
+        alt: category.name,
+        className: "size-full object-cover transition-transform duration-500 group-hover:scale-105"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" }),
+    category.trending && trendingLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { className: "absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold", children: trendingLabel }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute right-0 bottom-0 left-0 p-6 text-white", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "mb-1 text-xl font-bold", children: category.name }),
+      category.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-3 text-sm text-white/90", children: category.description }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
+        count ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: count }) : null,
+        onBrowse && browseLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_button.Button,
+          {
+            size: "sm",
+            variant: "secondary",
+            "aria-label": `${browseLabel} ${category.name}`,
+            className: "ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30",
+            onClick: () => onBrowse(category),
+            children: browseLabel
+          }
+        ) : null
+      ] })
+    ] })
+  ] }) });
+}
+function IconsCell({ category, onBrowse }) {
+  const Icon = (0, import_category_shared.resolveCategoryIcon)(category.icon);
+  const clickable = Boolean(onBrowse);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_card.Card,
+    {
+      className: (0, import_utils.cn)(
+        "group relative overflow-hidden px-2 py-6 shadow-xs transition-all hover:shadow-md",
+        clickable && "cursor-pointer"
+      ),
+      children: [
+        clickable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onBrowse?.(category),
+            "aria-label": category.name,
+            className: "absolute inset-0 z-10 rounded-xl focus-visible:inset-ring-2 focus-visible:inset-ring-ring focus-visible:outline-none"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "size-5", strokeWidth: 1.5, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-foreground text-lg font-semibold", children: category.name }),
+            category.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-sm", children: category.description }) : null
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+function ListCell({
+  category,
+  browseLabel,
+  itemsLabel,
+  featuredLabel,
+  onBrowse
+}) {
+  const Icon = (0, import_category_shared.resolveCategoryIcon)(category.icon);
+  const count = (0, import_category_shared.formatCount)(category.itemCount, itemsLabel);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.Card, { className: "group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_card.CardContent, { className: "p-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "text-primary size-6", "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold", children: category.name }),
+        category.featured && featuredLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_badge.Badge, { variant: "secondary", className: "rounded-sm px-2 py-0.5 font-semibold", children: featuredLabel }) : null
+      ] }),
+      category.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mb-3 line-clamp-2 text-sm", children: category.description }) : null,
+      category.subcategories && category.subcategories.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: category.subcategories.map((subcategory, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          className: "bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs",
+          children: subcategory
+        },
+        `${category.id}:sub:${index}`
+      )) }) : null,
+      count ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground text-sm", children: count }) : null,
+      onBrowse && browseLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_button.Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": `${browseLabel} ${category.name}`,
+          className: "absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100",
+          onClick: () => onBrowse(category),
+          children: browseLabel
+        }
+      ) : null
+    ] })
+  ] }) }) });
+}
+function CategoryCard(props) {
+  const presentation = props.presentation ?? "grid";
+  if (presentation === "icons") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconsCell, { ...props });
+  if (presentation === "list") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListCell, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridCell, { ...props });
+}
+var category_card_default = CategoryCard;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CategoryCard
+});
+//# sourceMappingURL=category-card.js.map

package/dist/blocks/e-commerce/product-categories/category-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/category-card.tsx"],"sourcesContent":["'use client'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent } from '../../../ui/card'\nimport { cn } from '../../../lib/utils'\nimport type { CategoryCardSpecProps } from '../../../lib/contracts'\nimport type { ProductCategoryItem } from '../../../lib/contracts'\nimport {\n  formatCount,\n  resolveCategoryIcon,\n  resolveImage,\n} from './category-shared'\n\nexport type CategoryCardPresentation = NonNullable<CategoryCardSpecProps['presentation']>\n\nexport interface CategoryCardProps extends CategoryCardSpecProps {\n  onBrowse?: (category: ProductCategoryItem) => void\n}\n\nfunction GridCell({\n  category,\n  browseLabel,\n  itemsLabel,\n  trendingLabel,\n  imageFallback,\n  onBrowse,\n}: CategoryCardProps) {\n  const count = formatCount(category.itemCount, itemsLabel)\n  return (\n    <Card className=\"group overflow-hidden py-0 transition-all duration-500 hover:shadow-lg\">\n      <div className=\"relative aspect-[5/4] overflow-hidden\">\n        <img\n          src={resolveImage(category.image, imageFallback)}\n          alt={category.name}\n          className=\"size-full object-cover transition-transform duration-500 group-hover:scale-105\"\n        />\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent\" />\n        {category.trending && trendingLabel ? (\n          <Badge className=\"absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold\">\n            {trendingLabel}\n          </Badge>\n        ) : null}\n        <div className=\"absolute right-0 bottom-0 left-0 p-6 text-white\">\n          <h3 className=\"mb-1 text-xl font-bold\">{category.name}</h3>\n          {category.description ? (\n            <p className=\"mb-3 text-sm text-white/90\">{category.description}</p>\n          ) : null}\n          <div className=\"flex items-center justify-between\">\n            {count ? <span className=\"text-sm\">{count}</span> : null}\n            {onBrowse && browseLabel ? (\n              <Button\n                size=\"sm\"\n                variant=\"secondary\"\n                aria-label={`${browseLabel} ${category.name}`}\n                className=\"ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30\"\n                onClick={() => onBrowse(category)}\n              >\n                {browseLabel}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </Card>\n  )\n}\n\nfunction IconsCell({ category, onBrowse }: CategoryCardProps) {\n  const Icon = resolveCategoryIcon(category.icon)\n  const clickable = Boolean(onBrowse)\n  return (\n    <Card\n      className={cn(\n        'group relative overflow-hidden px-2 py-6 shadow-xs transition-all hover:shadow-md',\n        clickable && 'cursor-pointer',\n      )}\n    >\n      {clickable ? (\n        <button\n          type=\"button\"\n          onClick={() => onBrowse?.(category)}\n          aria-label={category.name}\n          className=\"absolute inset-0 z-10 rounded-xl focus-visible:inset-ring-2 focus-visible:inset-ring-ring focus-visible:outline-none\"\n        />\n      ) : null}\n      <CardContent>\n        <div className=\"flex flex-col gap-4\">\n          <div className=\"bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg\">\n            <Icon className=\"size-5\" strokeWidth={1.5} aria-hidden=\"true\" />\n          </div>\n          <div>\n            <h3 className=\"text-foreground text-lg font-semibold\">{category.name}</h3>\n            {category.description ? (\n              <p className=\"text-muted-foreground text-sm\">{category.description}</p>\n            ) : null}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nfunction ListCell({\n  category,\n  browseLabel,\n  itemsLabel,\n  featuredLabel,\n  onBrowse,\n}: CategoryCardProps) {\n  const Icon = resolveCategoryIcon(category.icon)\n  const count = formatCount(category.itemCount, itemsLabel)\n  return (\n    <Card className=\"group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md\">\n      <CardContent className=\"p-6\">\n        <div className=\"flex items-start gap-4\">\n          <div className=\"flex-shrink-0\">\n            <div className=\"bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors\">\n              <Icon className=\"text-primary size-6\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              <h3 className=\"text-lg font-semibold\">{category.name}</h3>\n              {category.featured && featuredLabel ? (\n                <Badge variant=\"secondary\" className=\"rounded-sm px-2 py-0.5 font-semibold\">\n                  {featuredLabel}\n                </Badge>\n              ) : null}\n            </div>\n            {category.description ? (\n              <p className=\"text-muted-foreground mb-3 line-clamp-2 text-sm\">{category.description}</p>\n            ) : null}\n            {category.subcategories && category.subcategories.length > 0 ? (\n              <div className=\"mb-3 flex flex-wrap gap-2\">\n                {category.subcategories.map((subcategory, index) => (\n                  <span\n                    key={`${category.id}:sub:${index}`}\n                    className=\"bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs\"\n                  >\n                    {subcategory}\n                  </span>\n                ))}\n              </div>\n            ) : null}\n            {count ? <div className=\"text-muted-foreground text-sm\">{count}</div> : null}\n            {onBrowse && browseLabel ? (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-label={`${browseLabel} ${category.name}`}\n                className=\"absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100\"\n                onClick={() => onBrowse(category)}\n              >\n                {browseLabel}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport function CategoryCard(props: CategoryCardProps) {\n  const presentation = props.presentation ?? 'grid'\n  if (presentation === 'icons') return <IconsCell {...props} />\n  if (presentation === 'list') return <ListCell {...props} />\n  return <GridCell {...props} />\n}\n\nexport default CategoryCard\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/product-categories/category-card.mjs

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../../../ui/badge.mjs";
+import { Button } from "../../../ui/button.mjs";
+import { Card, CardContent } from "../../../ui/card.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import {
+  formatCount,
+  resolveCategoryIcon,
+  resolveImage
+} from "./category-shared.mjs";
+function GridCell({
+  category,
+  browseLabel,
+  itemsLabel,
+  trendingLabel,
+  imageFallback,
+  onBrowse
+}) {
+  const count = formatCount(category.itemCount, itemsLabel);
+  return /* @__PURE__ */ jsx(Card, { className: "group overflow-hidden py-0 transition-all duration-500 hover:shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[5/4] overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: resolveImage(category.image, imageFallback),
+        alt: category.name,
+        className: "size-full object-cover transition-transform duration-500 group-hover:scale-105"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" }),
+    category.trending && trendingLabel ? /* @__PURE__ */ jsx(Badge, { className: "absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold", children: trendingLabel }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "absolute right-0 bottom-0 left-0 p-6 text-white", children: [
+      /* @__PURE__ */ jsx("h3", { className: "mb-1 text-xl font-bold", children: category.name }),
+      category.description ? /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm text-white/90", children: category.description }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        count ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: count }) : null,
+        onBrowse && browseLabel ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: "secondary",
+            "aria-label": `${browseLabel} ${category.name}`,
+            className: "ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30",
+            onClick: () => onBrowse(category),
+            children: browseLabel
+          }
+        ) : null
+      ] })
+    ] })
+  ] }) });
+}
+function IconsCell({ category, onBrowse }) {
+  const Icon = resolveCategoryIcon(category.icon);
+  const clickable = Boolean(onBrowse);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "group relative overflow-hidden px-2 py-6 shadow-xs transition-all hover:shadow-md",
+        clickable && "cursor-pointer"
+      ),
+      children: [
+        clickable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onBrowse?.(category),
+            "aria-label": category.name,
+            className: "absolute inset-0 z-10 rounded-xl focus-visible:inset-ring-2 focus-visible:inset-ring-ring focus-visible:outline-none"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg", children: /* @__PURE__ */ jsx(Icon, { className: "size-5", strokeWidth: 1.5, "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-foreground text-lg font-semibold", children: category.name }),
+            category.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: category.description }) : null
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+function ListCell({
+  category,
+  browseLabel,
+  itemsLabel,
+  featuredLabel,
+  onBrowse
+}) {
+  const Icon = resolveCategoryIcon(category.icon);
+  const count = formatCount(category.itemCount, itemsLabel);
+  return /* @__PURE__ */ jsx(Card, { className: "group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md", children: /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors", children: /* @__PURE__ */ jsx(Icon, { className: "text-primary size-6", "aria-hidden": "true" }) }) }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: category.name }),
+        category.featured && featuredLabel ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "rounded-sm px-2 py-0.5 font-semibold", children: featuredLabel }) : null
+      ] }),
+      category.description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-3 line-clamp-2 text-sm", children: category.description }) : null,
+      category.subcategories && category.subcategories.length > 0 ? /* @__PURE__ */ jsx("div", { className: "mb-3 flex flex-wrap gap-2", children: category.subcategories.map((subcategory, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs",
+          children: subcategory
+        },
+        `${category.id}:sub:${index}`
+      )) }) : null,
+      count ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-sm", children: count }) : null,
+      onBrowse && browseLabel ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          "aria-label": `${browseLabel} ${category.name}`,
+          className: "absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100",
+          onClick: () => onBrowse(category),
+          children: browseLabel
+        }
+      ) : null
+    ] })
+  ] }) }) });
+}
+function CategoryCard(props) {
+  const presentation = props.presentation ?? "grid";
+  if (presentation === "icons") return /* @__PURE__ */ jsx(IconsCell, { ...props });
+  if (presentation === "list") return /* @__PURE__ */ jsx(ListCell, { ...props });
+  return /* @__PURE__ */ jsx(GridCell, { ...props });
+}
+var category_card_default = CategoryCard;
+export {
+  CategoryCard,
+  category_card_default as default
+};
+//# sourceMappingURL=category-card.mjs.map

package/dist/blocks/e-commerce/product-categories/category-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/category-card.tsx"],"sourcesContent":["'use client'\n\nimport { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent } from '../../../ui/card'\nimport { cn } from '../../../lib/utils'\nimport type { CategoryCardSpecProps } from '../../../lib/contracts'\nimport type { ProductCategoryItem } from '../../../lib/contracts'\nimport {\n  formatCount,\n  resolveCategoryIcon,\n  resolveImage,\n} from './category-shared'\n\nexport type CategoryCardPresentation = NonNullable<CategoryCardSpecProps['presentation']>\n\nexport interface CategoryCardProps extends CategoryCardSpecProps {\n  onBrowse?: (category: ProductCategoryItem) => void\n}\n\nfunction GridCell({\n  category,\n  browseLabel,\n  itemsLabel,\n  trendingLabel,\n  imageFallback,\n  onBrowse,\n}: CategoryCardProps) {\n  const count = formatCount(category.itemCount, itemsLabel)\n  return (\n    <Card className=\"group overflow-hidden py-0 transition-all duration-500 hover:shadow-lg\">\n      <div className=\"relative aspect-[5/4] overflow-hidden\">\n        <img\n          src={resolveImage(category.image, imageFallback)}\n          alt={category.name}\n          className=\"size-full object-cover transition-transform duration-500 group-hover:scale-105\"\n        />\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent\" />\n        {category.trending && trendingLabel ? (\n          <Badge className=\"absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold\">\n            {trendingLabel}\n          </Badge>\n        ) : null}\n        <div className=\"absolute right-0 bottom-0 left-0 p-6 text-white\">\n          <h3 className=\"mb-1 text-xl font-bold\">{category.name}</h3>\n          {category.description ? (\n            <p className=\"mb-3 text-sm text-white/90\">{category.description}</p>\n          ) : null}\n          <div className=\"flex items-center justify-between\">\n            {count ? <span className=\"text-sm\">{count}</span> : null}\n            {onBrowse && browseLabel ? (\n              <Button\n                size=\"sm\"\n                variant=\"secondary\"\n                aria-label={`${browseLabel} ${category.name}`}\n                className=\"ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30\"\n                onClick={() => onBrowse(category)}\n              >\n                {browseLabel}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    </Card>\n  )\n}\n\nfunction IconsCell({ category, onBrowse }: CategoryCardProps) {\n  const Icon = resolveCategoryIcon(category.icon)\n  const clickable = Boolean(onBrowse)\n  return (\n    <Card\n      className={cn(\n        'group relative overflow-hidden px-2 py-6 shadow-xs transition-all hover:shadow-md',\n        clickable && 'cursor-pointer',\n      )}\n    >\n      {clickable ? (\n        <button\n          type=\"button\"\n          onClick={() => onBrowse?.(category)}\n          aria-label={category.name}\n          className=\"absolute inset-0 z-10 rounded-xl focus-visible:inset-ring-2 focus-visible:inset-ring-ring focus-visible:outline-none\"\n        />\n      ) : null}\n      <CardContent>\n        <div className=\"flex flex-col gap-4\">\n          <div className=\"bg-secondary/80 text-secondary-foreground flex size-12 items-center justify-center rounded-lg\">\n            <Icon className=\"size-5\" strokeWidth={1.5} aria-hidden=\"true\" />\n          </div>\n          <div>\n            <h3 className=\"text-foreground text-lg font-semibold\">{category.name}</h3>\n            {category.description ? (\n              <p className=\"text-muted-foreground text-sm\">{category.description}</p>\n            ) : null}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nfunction ListCell({\n  category,\n  browseLabel,\n  itemsLabel,\n  featuredLabel,\n  onBrowse,\n}: CategoryCardProps) {\n  const Icon = resolveCategoryIcon(category.icon)\n  const count = formatCount(category.itemCount, itemsLabel)\n  return (\n    <Card className=\"group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md\">\n      <CardContent className=\"p-6\">\n        <div className=\"flex items-start gap-4\">\n          <div className=\"flex-shrink-0\">\n            <div className=\"bg-primary/10 group-hover:bg-primary/20 flex size-12 items-center justify-center rounded-lg transition-colors\">\n              <Icon className=\"text-primary size-6\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <div className=\"mb-2 flex items-center gap-2\">\n              <h3 className=\"text-lg font-semibold\">{category.name}</h3>\n              {category.featured && featuredLabel ? (\n                <Badge variant=\"secondary\" className=\"rounded-sm px-2 py-0.5 font-semibold\">\n                  {featuredLabel}\n                </Badge>\n              ) : null}\n            </div>\n            {category.description ? (\n              <p className=\"text-muted-foreground mb-3 line-clamp-2 text-sm\">{category.description}</p>\n            ) : null}\n            {category.subcategories && category.subcategories.length > 0 ? (\n              <div className=\"mb-3 flex flex-wrap gap-2\">\n                {category.subcategories.map((subcategory, index) => (\n                  <span\n                    key={`${category.id}:sub:${index}`}\n                    className=\"bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs\"\n                  >\n                    {subcategory}\n                  </span>\n                ))}\n              </div>\n            ) : null}\n            {count ? <div className=\"text-muted-foreground text-sm\">{count}</div> : null}\n            {onBrowse && browseLabel ? (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                aria-label={`${browseLabel} ${category.name}`}\n                className=\"absolute end-4 bottom-4 h-8 cursor-pointer px-3 text-xs opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100\"\n                onClick={() => onBrowse(category)}\n              >\n                {browseLabel}\n              </Button>\n            ) : null}\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n\nexport function CategoryCard(props: CategoryCardProps) {\n  const presentation = props.presentation ?? 'grid'\n  if (presentation === 'icons') return <IconsCell {...props} />\n  if (presentation === 'list') return <ListCell {...props} />\n  return <GridCell {...props} />\n}\n\nexport default CategoryCard\n"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/product-categories/category-shared.d.ts

@@ -0,0 +1,15 @@
+import { type LucideIcon } from 'lucide-react';
+import type { CTA } from '../../../lib/types';
+export declare const CATEGORY_ICONS: Record<string, LucideIcon>;
+export declare const FALLBACK_ICON: LucideIcon;
+export declare function resolveCategoryIcon(icon?: string): LucideIcon;
+export declare function formatCount(itemCount: number | undefined, itemsLabel?: string): string | undefined;
+export declare function resolveImage(image: string | undefined, fallback?: string): string;
+export declare function SectionCta({ cta }: {
+    cta?: CTA;
+}): import("react").JSX.Element | null;
+export declare function ViewAllButton({ onViewAll, viewAllLabel, }: {
+    onViewAll?: () => void;
+    viewAllLabel?: string;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=category-shared.d.ts.map

package/dist/blocks/e-commerce/product-categories/category-shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"category-shared.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-categories/category-shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EA0BL,KAAK,UAAU,EAChB,MAAM,cAAc,CAAA;AAIrB,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAA;AAE7C,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAwBrD,CAAA;AAED,eAAO,MAAM,aAAa,YAAa,CAAA;AAEvC,wBAAgB,mBAAmB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAG7D;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,SAAS,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAIlG;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAIjF;AAED,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,CAAC,EAAE,GAAG,CAAA;CAAE,sCAYhD;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,YAAY,GACb,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,sCAUA"}

package/dist/blocks/e-commerce/product-categories/category-shared.js

@@ -0,0 +1,101 @@
+"use strict";
+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 category_shared_exports = {};
+__export(category_shared_exports, {
+  CATEGORY_ICONS: () => CATEGORY_ICONS,
+  FALLBACK_ICON: () => FALLBACK_ICON,
+  SectionCta: () => SectionCta,
+  ViewAllButton: () => ViewAllButton,
+  formatCount: () => formatCount,
+  resolveCategoryIcon: () => resolveCategoryIcon,
+  resolveImage: () => resolveImage
+});
+module.exports = __toCommonJS(category_shared_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_button = require("../../../ui/button.js");
+var import_contracts = require("../../../lib/contracts.js");
+const CATEGORY_ICONS = {
+  grid: import_lucide_react.LayoutGrid,
+  boxes: import_lucide_react.Boxes,
+  smartphone: import_lucide_react.Smartphone,
+  laptop: import_lucide_react.Laptop,
+  camera: import_lucide_react.Camera,
+  cable: import_lucide_react.Cable,
+  wrench: import_lucide_react.Wrench,
+  shield: import_lucide_react.ShieldCheck,
+  sparkles: import_lucide_react.Sparkles,
+  lightbulb: import_lucide_react.Lightbulb,
+  package: import_lucide_react.Package,
+  tag: import_lucide_react.Tag,
+  store: import_lucide_react.Store,
+  home: import_lucide_react.Home,
+  shirt: import_lucide_react.Shirt,
+  book: import_lucide_react.BookOpen,
+  gift: import_lucide_react.Gift,
+  heart: import_lucide_react.Heart,
+  car: import_lucide_react.Car,
+  utensils: import_lucide_react.Utensils,
+  gamepad: import_lucide_react.Gamepad2,
+  baby: import_lucide_react.Baby,
+  dumbbell: import_lucide_react.Dumbbell
+};
+const FALLBACK_ICON = import_lucide_react.LayoutGrid;
+function resolveCategoryIcon(icon) {
+  if (!icon) return FALLBACK_ICON;
+  return CATEGORY_ICONS[icon] ?? FALLBACK_ICON;
+}
+function formatCount(itemCount, itemsLabel) {
+  if (itemCount === void 0 || !Number.isFinite(itemCount) || itemCount < 0) return void 0;
+  const value = itemCount.toLocaleString();
+  return itemsLabel ? `${value} ${itemsLabel}` : value;
+}
+function resolveImage(image, fallback) {
+  const candidate = typeof image === "string" ? image.trim() : "";
+  const fallbackCandidate = typeof fallback === "string" ? fallback.trim() : "";
+  return candidate || fallbackCandidate || import_contracts.PRODUCT_IMAGE_FALLBACK;
+}
+function SectionCta({ cta }) {
+  if (!cta) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { size: "lg", className: "h-10 cursor-pointer gap-2 px-4", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { href: cta.href, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ShoppingBag, { className: "size-5" }),
+    cta.label
+  ] }) }) });
+}
+function ViewAllButton({
+  onViewAll,
+  viewAllLabel
+}) {
+  if (!onViewAll || !viewAllLabel) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_button.Button, { variant: "outline", className: "h-9 cursor-pointer px-4", onClick: onViewAll, children: [
+    viewAllLabel,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, {})
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CATEGORY_ICONS,
+  FALLBACK_ICON,
+  SectionCta,
+  ViewAllButton,
+  formatCount,
+  resolveCategoryIcon,
+  resolveImage
+});
+//# sourceMappingURL=category-shared.js.map

package/dist/blocks/e-commerce/product-categories/category-shared.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/category-shared.tsx"],"sourcesContent":["import {\n  ArrowRight,\n  Baby,\n  BookOpen,\n  Boxes,\n  Cable,\n  Camera,\n  Car,\n  Dumbbell,\n  Gamepad2,\n  Gift,\n  Heart,\n  Home,\n  Laptop,\n  LayoutGrid,\n  Lightbulb,\n  Package,\n  ShieldCheck,\n  Shirt,\n  ShoppingBag,\n  Smartphone,\n  Sparkles,\n  Store,\n  Tag,\n  Utensils,\n  Wrench,\n  type LucideIcon,\n} from 'lucide-react'\n\nimport { Button } from '../../../ui/button'\nimport { PRODUCT_IMAGE_FALLBACK } from '../../../lib/contracts'\nimport type { CTA } from '../../../lib/types'\n\nexport const CATEGORY_ICONS: Record<string, LucideIcon> = {\n  grid: LayoutGrid,\n  boxes: Boxes,\n  smartphone: Smartphone,\n  laptop: Laptop,\n  camera: Camera,\n  cable: Cable,\n  wrench: Wrench,\n  shield: ShieldCheck,\n  sparkles: Sparkles,\n  lightbulb: Lightbulb,\n  package: Package,\n  tag: Tag,\n  store: Store,\n  home: Home,\n  shirt: Shirt,\n  book: BookOpen,\n  gift: Gift,\n  heart: Heart,\n  car: Car,\n  utensils: Utensils,\n  gamepad: Gamepad2,\n  baby: Baby,\n  dumbbell: Dumbbell,\n}\n\nexport const FALLBACK_ICON = LayoutGrid\n\nexport function resolveCategoryIcon(icon?: string): LucideIcon {\n  if (!icon) return FALLBACK_ICON\n  return CATEGORY_ICONS[icon] ?? FALLBACK_ICON\n}\n\nexport function formatCount(itemCount: number | undefined, itemsLabel?: string): string | undefined {\n  if (itemCount === undefined || !Number.isFinite(itemCount) || itemCount < 0) return undefined\n  const value = itemCount.toLocaleString()\n  return itemsLabel ? `${value} ${itemsLabel}` : value\n}\n\nexport function resolveImage(image: string | undefined, fallback?: string): string {\n  const candidate = typeof image === 'string' ? image.trim() : ''\n  const fallbackCandidate = typeof fallback === 'string' ? fallback.trim() : ''\n  return candidate || fallbackCandidate || PRODUCT_IMAGE_FALLBACK\n}\n\nexport function SectionCta({ cta }: { cta?: CTA }) {\n  if (!cta) return null\n  return (\n    <div className=\"mt-12 text-center\">\n      <Button size=\"lg\" className=\"h-10 cursor-pointer gap-2 px-4\" asChild>\n        <a href={cta.href}>\n          <ShoppingBag className=\"size-5\" />\n          {cta.label}\n        </a>\n      </Button>\n    </div>\n  )\n}\n\nexport function ViewAllButton({\n  onViewAll,\n  viewAllLabel,\n}: {\n  onViewAll?: () => void\n  viewAllLabel?: string\n}) {\n  if (!onViewAll || !viewAllLabel) return null\n  return (\n    <div className=\"mt-12 text-center\">\n      <Button variant=\"outline\" className=\"h-9 cursor-pointer px-4\" onClick={onViewAll}>\n        {viewAllLabel}\n        <ArrowRight />\n      </Button>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmFQ;AAnFR,0BA2BO;AAEP,oBAAuB;AACvB,uBAAuC;AAGhC,MAAM,iBAA6C;AAAA,EACxD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ;AAEO,MAAM,gBAAgB;AAEtB,SAAS,oBAAoB,MAA2B;AAC7D,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,eAAe,IAAI,KAAK;AACjC;AAEO,SAAS,YAAY,WAA+B,YAAyC;AAClG,MAAI,cAAc,UAAa,CAAC,OAAO,SAAS,SAAS,KAAK,YAAY,EAAG,QAAO;AACpF,QAAM,QAAQ,UAAU,eAAe;AACvC,SAAO,aAAa,GAAG,KAAK,IAAI,UAAU,KAAK;AACjD;AAEO,SAAS,aAAa,OAA2B,UAA2B;AACjF,QAAM,YAAY,OAAO,UAAU,WAAW,MAAM,KAAK,IAAI;AAC7D,QAAM,oBAAoB,OAAO,aAAa,WAAW,SAAS,KAAK,IAAI;AAC3E,SAAO,aAAa,qBAAqB;AAC3C;AAEO,SAAS,WAAW,EAAE,IAAI,GAAkB;AACjD,MAAI,CAAC,IAAK,QAAO;AACjB,SACE,4CAAC,SAAI,WAAU,qBACb,sDAAC,wBAAO,MAAK,MAAK,WAAU,kCAAiC,SAAO,MAClE,uDAAC,OAAE,MAAM,IAAI,MACX;AAAA,gDAAC,mCAAY,WAAU,UAAS;AAAA,IAC/B,IAAI;AAAA,KACP,GACF,GACF;AAEJ;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,MAAI,CAAC,aAAa,CAAC,aAAc,QAAO;AACxC,SACE,4CAAC,SAAI,WAAU,qBACb,uDAAC,wBAAO,SAAQ,WAAU,WAAU,2BAA0B,SAAS,WACpE;AAAA;AAAA,IACD,4CAAC,kCAAW;AAAA,KACd,GACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/product-categories/category-shared.mjs

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowRight,
+  Baby,
+  BookOpen,
+  Boxes,
+  Cable,
+  Camera,
+  Car,
+  Dumbbell,
+  Gamepad2,
+  Gift,
+  Heart,
+  Home,
+  Laptop,
+  LayoutGrid,
+  Lightbulb,
+  Package,
+  ShieldCheck,
+  Shirt,
+  ShoppingBag,
+  Smartphone,
+  Sparkles,
+  Store,
+  Tag,
+  Utensils,
+  Wrench
+} from "lucide-react";
+import { Button } from "../../../ui/button.mjs";
+import { PRODUCT_IMAGE_FALLBACK } from "../../../lib/contracts.mjs";
+const CATEGORY_ICONS = {
+  grid: LayoutGrid,
+  boxes: Boxes,
+  smartphone: Smartphone,
+  laptop: Laptop,
+  camera: Camera,
+  cable: Cable,
+  wrench: Wrench,
+  shield: ShieldCheck,
+  sparkles: Sparkles,
+  lightbulb: Lightbulb,
+  package: Package,
+  tag: Tag,
+  store: Store,
+  home: Home,
+  shirt: Shirt,
+  book: BookOpen,
+  gift: Gift,
+  heart: Heart,
+  car: Car,
+  utensils: Utensils,
+  gamepad: Gamepad2,
+  baby: Baby,
+  dumbbell: Dumbbell
+};
+const FALLBACK_ICON = LayoutGrid;
+function resolveCategoryIcon(icon) {
+  if (!icon) return FALLBACK_ICON;
+  return CATEGORY_ICONS[icon] ?? FALLBACK_ICON;
+}
+function formatCount(itemCount, itemsLabel) {
+  if (itemCount === void 0 || !Number.isFinite(itemCount) || itemCount < 0) return void 0;
+  const value = itemCount.toLocaleString();
+  return itemsLabel ? `${value} ${itemsLabel}` : value;
+}
+function resolveImage(image, fallback) {
+  const candidate = typeof image === "string" ? image.trim() : "";
+  const fallbackCandidate = typeof fallback === "string" ? fallback.trim() : "";
+  return candidate || fallbackCandidate || PRODUCT_IMAGE_FALLBACK;
+}
+function SectionCta({ cta }) {
+  if (!cta) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mt-12 text-center", children: /* @__PURE__ */ jsx(Button, { size: "lg", className: "h-10 cursor-pointer gap-2 px-4", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: cta.href, children: [
+    /* @__PURE__ */ jsx(ShoppingBag, { className: "size-5" }),
+    cta.label
+  ] }) }) });
+}
+function ViewAllButton({
+  onViewAll,
+  viewAllLabel
+}) {
+  if (!onViewAll || !viewAllLabel) return null;
+  return /* @__PURE__ */ jsx("div", { className: "mt-12 text-center", children: /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "h-9 cursor-pointer px-4", onClick: onViewAll, children: [
+    viewAllLabel,
+    /* @__PURE__ */ jsx(ArrowRight, {})
+  ] }) });
+}
+export {
+  CATEGORY_ICONS,
+  FALLBACK_ICON,
+  SectionCta,
+  ViewAllButton,
+  formatCount,
+  resolveCategoryIcon,
+  resolveImage
+};
+//# sourceMappingURL=category-shared.mjs.map

package/dist/blocks/e-commerce/product-categories/category-shared.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/category-shared.tsx"],"sourcesContent":["import {\n  ArrowRight,\n  Baby,\n  BookOpen,\n  Boxes,\n  Cable,\n  Camera,\n  Car,\n  Dumbbell,\n  Gamepad2,\n  Gift,\n  Heart,\n  Home,\n  Laptop,\n  LayoutGrid,\n  Lightbulb,\n  Package,\n  ShieldCheck,\n  Shirt,\n  ShoppingBag,\n  Smartphone,\n  Sparkles,\n  Store,\n  Tag,\n  Utensils,\n  Wrench,\n  type LucideIcon,\n} from 'lucide-react'\n\nimport { Button } from '../../../ui/button'\nimport { PRODUCT_IMAGE_FALLBACK } from '../../../lib/contracts'\nimport type { CTA } from '../../../lib/types'\n\nexport const CATEGORY_ICONS: Record<string, LucideIcon> = {\n  grid: LayoutGrid,\n  boxes: Boxes,\n  smartphone: Smartphone,\n  laptop: Laptop,\n  camera: Camera,\n  cable: Cable,\n  wrench: Wrench,\n  shield: ShieldCheck,\n  sparkles: Sparkles,\n  lightbulb: Lightbulb,\n  package: Package,\n  tag: Tag,\n  store: Store,\n  home: Home,\n  shirt: Shirt,\n  book: BookOpen,\n  gift: Gift,\n  heart: Heart,\n  car: Car,\n  utensils: Utensils,\n  gamepad: Gamepad2,\n  baby: Baby,\n  dumbbell: Dumbbell,\n}\n\nexport const FALLBACK_ICON = LayoutGrid\n\nexport function resolveCategoryIcon(icon?: string): LucideIcon {\n  if (!icon) return FALLBACK_ICON\n  return CATEGORY_ICONS[icon] ?? FALLBACK_ICON\n}\n\nexport function formatCount(itemCount: number | undefined, itemsLabel?: string): string | undefined {\n  if (itemCount === undefined || !Number.isFinite(itemCount) || itemCount < 0) return undefined\n  const value = itemCount.toLocaleString()\n  return itemsLabel ? `${value} ${itemsLabel}` : value\n}\n\nexport function resolveImage(image: string | undefined, fallback?: string): string {\n  const candidate = typeof image === 'string' ? image.trim() : ''\n  const fallbackCandidate = typeof fallback === 'string' ? fallback.trim() : ''\n  return candidate || fallbackCandidate || PRODUCT_IMAGE_FALLBACK\n}\n\nexport function SectionCta({ cta }: { cta?: CTA }) {\n  if (!cta) return null\n  return (\n    <div className=\"mt-12 text-center\">\n      <Button size=\"lg\" className=\"h-10 cursor-pointer gap-2 px-4\" asChild>\n        <a href={cta.href}>\n          <ShoppingBag className=\"size-5\" />\n          {cta.label}\n        </a>\n      </Button>\n    </div>\n  )\n}\n\nexport function ViewAllButton({\n  onViewAll,\n  viewAllLabel,\n}: {\n  onViewAll?: () => void\n  viewAllLabel?: string\n}) {\n  if (!onViewAll || !viewAllLabel) return null\n  return (\n    <div className=\"mt-12 text-center\">\n      <Button variant=\"outline\" className=\"h-9 cursor-pointer px-4\" onClick={onViewAll}>\n        {viewAllLabel}\n        <ArrowRight />\n      </Button>\n    </div>\n  )\n}\n"],"mappings":"AAmFQ,SACE,KADF;AAnFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,cAAc;AACvB,SAAS,8BAA8B;AAGhC,MAAM,iBAA6C;AAAA,EACxD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ;AAEO,MAAM,gBAAgB;AAEtB,SAAS,oBAAoB,MAA2B;AAC7D,MAAI,CAAC,KAAM,QAAO;AAClB,SAAO,eAAe,IAAI,KAAK;AACjC;AAEO,SAAS,YAAY,WAA+B,YAAyC;AAClG,MAAI,cAAc,UAAa,CAAC,OAAO,SAAS,SAAS,KAAK,YAAY,EAAG,QAAO;AACpF,QAAM,QAAQ,UAAU,eAAe;AACvC,SAAO,aAAa,GAAG,KAAK,IAAI,UAAU,KAAK;AACjD;AAEO,SAAS,aAAa,OAA2B,UAA2B;AACjF,QAAM,YAAY,OAAO,UAAU,WAAW,MAAM,KAAK,IAAI;AAC7D,QAAM,oBAAoB,OAAO,aAAa,WAAW,SAAS,KAAK,IAAI;AAC3E,SAAO,aAAa,qBAAqB;AAC3C;AAEO,SAAS,WAAW,EAAE,IAAI,GAAkB;AACjD,MAAI,CAAC,IAAK,QAAO;AACjB,SACE,oBAAC,SAAI,WAAU,qBACb,8BAAC,UAAO,MAAK,MAAK,WAAU,kCAAiC,SAAO,MAClE,+BAAC,OAAE,MAAM,IAAI,MACX;AAAA,wBAAC,eAAY,WAAU,UAAS;AAAA,IAC/B,IAAI;AAAA,KACP,GACF,GACF;AAEJ;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,MAAI,CAAC,aAAa,CAAC,aAAc,QAAO;AACxC,SACE,oBAAC,SAAI,WAAU,qBACb,+BAAC,UAAO,SAAQ,WAAU,WAAU,2BAA0B,SAAS,WACpE;AAAA;AAAA,IACD,oBAAC,cAAW;AAAA,KACd,GACF;AAEJ;","names":[]}

package/dist/blocks/e-commerce/product-categories/product-category-grid.d.ts

@@ -0,0 +1,10 @@
+import type { CategoryGridSpecProps, ProductCategoryItem } from '../../../lib/contracts';
+export type CategoryGridPresentation = NonNullable<CategoryGridSpecProps['presentation']>;
+export interface CategoryGridProps extends CategoryGridSpecProps {
+    onBrowse?: (category: ProductCategoryItem) => void;
+    onViewAll?: () => void;
+    onQueryChange?: (query: string) => void;
+}
+export declare function CategoryGrid(props: CategoryGridProps): import("react").JSX.Element;
+export default CategoryGrid;
+//# sourceMappingURL=product-category-grid.d.ts.map

package/dist/blocks/e-commerce/product-categories/product-category-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-category-grid.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-categories/product-category-grid.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,wBAAwB,CAAA;AAI/B,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC,qBAAqB,CAAC,cAAc,CAAC,CAAC,CAAA;AAEzF,MAAM,WAAW,iBAAkB,SAAQ,qBAAqB;IAC9D,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AA6DD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAuFpD;AAED,eAAe,YAAY,CAAA"}