@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -0,0 +1,319 @@
+"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 product_category_exports = {};
+__export(product_category_exports, {
+  ProductCategory: () => ProductCategory,
+  default: () => product_category_default
+});
+module.exports = __toCommonJS(product_category_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_badge = require("../../../ui/badge.js");
+var import_button = require("../../../ui/button.js");
+var import_card = require("../../../ui/card.js");
+var import_input = require("../../../ui/input.js");
+var import_utils = require("../../../lib/utils.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) {
+  return image && image.trim() !== "" ? 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, {})
+  ] }) });
+}
+function GridPresentation({
+  categories,
+  title,
+  description,
+  cta,
+  onBrowse,
+  browseLabel,
+  trendingLabel,
+  itemsLabel,
+  imageFallback,
+  className
+}) {
+  const fallback = imageFallback ?? import_contracts.PRODUCT_IMAGE_FALLBACK;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: (0, import_utils.cn)("py-12", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-12 text-center", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-3xl font-bold tracking-tight text-balance", children: title }) : null,
+      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-4 text-lg", children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3", children: categories.map((category) => {
+      const countLabel = 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: resolveImage(category.image, fallback),
+                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: [
+                countLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: countLabel }) : null,
+                onBrowse && browseLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  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,
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, {})
+                    ]
+                  }
+                ) : null
+              ] })
+            ] })
+          ] })
+        },
+        category.id
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionCta, { cta })
+  ] }) });
+}
+function IconsPresentation({
+  categories,
+  title,
+  description,
+  badge,
+  cta,
+  onBrowse,
+  onViewAll,
+  viewAllLabel,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: (0, import_utils.cn)("py-12", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    badge || title || description ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto mb-12 max-w-3xl text-center", children: [
+      badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-4 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium", children: badge }) }) : null,
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-3xl font-bold tracking-tight text-balance", children: title }) : null,
+      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground mt-4", children: description }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: categories.map((category) => {
+      const Icon = 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 ? (
+              // A stretched native control keeps the whole card clickable
+              // while focus, activation, and the accessible name come from
+              // the platform. The Card stays non-interactive so no
+              // block-level element is nested inside the button, and with
+              // no browse handler there is no control and no focus target.
+              /* @__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
+              ] })
+            ] }) })
+          ]
+        },
+        category.id
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionCta, { cta }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewAllButton, { onViewAll, viewAllLabel })
+  ] }) });
+}
+function ListPresentation({
+  categories,
+  title,
+  description,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  searchLabel,
+  emptyLabel,
+  noResultsLabel,
+  featuredLabel,
+  browseLabel,
+  itemsLabel,
+  onBrowse,
+  onViewAll,
+  viewAllLabel,
+  className
+}) {
+  const hasQuery = Boolean(query && query.trim() !== "");
+  const emptyMessage = hasQuery ? noResultsLabel ?? emptyLabel : emptyLabel;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { className: (0, import_utils.cn)("py-12", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8", children: [
+    title || description ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-8 text-center", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "mb-4 text-3xl font-bold tracking-tight text-balance", children: title }) : null,
+      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground text-lg", children: description }) : null
+    ] }) : null,
+    onQueryChange ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative mx-auto mb-8 max-w-md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_lucide_react.Search,
+        {
+          className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_input.Input,
+        {
+          type: "search",
+          placeholder: searchPlaceholder,
+          value: query ?? "",
+          onChange: (event) => onQueryChange(event.target.value),
+          className: "ps-9 h-9",
+          "aria-label": searchLabel ?? searchPlaceholder
+        }
+      )
+    ] }) : null,
+    categories.length === 0 ? emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-muted-foreground py-10 text-center text-sm", children: emptyMessage }) : null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-1 gap-4 lg:grid-cols-2", children: categories.map((category) => {
+      const Icon = resolveCategoryIcon(category.icon);
+      const countLabel = formatCount(category.itemCount, itemsLabel);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_card.Card,
+        {
+          className: (0, import_utils.cn)(
+            "group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(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((sub, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs",
+                    children: sub
+                  },
+                  `${category.id}:sub:${index}`
+                )) }) : null,
+                countLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-muted-foreground text-sm", children: countLabel }) : null
+              ] })
+            ] }),
+            onBrowse && browseLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              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,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, {})
+                ]
+              }
+            ) : null
+          ] })
+        },
+        category.id
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewAllButton, { onViewAll, viewAllLabel })
+  ] }) });
+}
+function ProductCategory(props) {
+  const presentation = props.presentation ?? "grid";
+  if (presentation === "icons") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconsPresentation, { ...props });
+  if (presentation === "list") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ListPresentation, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridPresentation, { ...props });
+}
+var product_category_default = ProductCategory;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ProductCategory
+});
+//# sourceMappingURL=product-category.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/product-category.tsx"],"sourcesContent":["'use client'\n\nimport {\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  Search,\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 { Badge } from '../../../ui/badge'\nimport { Button } from '../../../ui/button'\nimport { Card, CardContent } from '../../../ui/card'\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\nimport { PRODUCT_IMAGE_FALLBACK } from '../../../lib/contracts'\nimport type { CTA } from '../../../lib/types'\nimport type { ProductCategoryItem, ProductCategorySpecProps } from '../../../lib/contracts'\n\n/**\n * The bounded presentation surface. `grid` is image-forward, `icons` is a\n * compact icon grid, and `list` is a described row list with subcategory chips\n * and an optional controlled search. The value changes structure, never the\n * data contract or the callbacks.\n */\nexport type ProductCategoryPresentation = NonNullable<ProductCategorySpecProps['presentation']>\n\nexport interface ProductCategoryProps {\n  /** Canonical category projection; absent optional fields degrade gracefully. */\n  categories: ProductCategoryItem[]\n  /** Bounded presentation option; defaults to `grid`. */\n  presentation?: ProductCategoryPresentation\n  title?: string\n  description?: string\n  /** Optional eyebrow label (`icons` presentation). */\n  badge?: string\n  /** Optional section-level link action. */\n  cta?: CTA\n  /** Controlled search value (`list` presentation); the host owns filtering. */\n  query?: string\n  onQueryChange?: (query: string) => void\n  onBrowse?: (category: ProductCategoryItem) => void\n  onViewAll?: () => void\n  // All user-facing copy is supplied by the host; the block ships no defaults.\n  searchPlaceholder?: string\n  searchLabel?: string\n  emptyLabel?: string\n  noResultsLabel?: string\n  browseLabel?: string\n  viewAllLabel?: string\n  trendingLabel?: string\n  featuredLabel?: string\n  itemsLabel?: string\n  /** Neutral placeholder for a missing image; defaults to `PRODUCT_IMAGE_FALLBACK`. */\n  imageFallback?: string\n  className?: string\n}\n\n/**\n * Bounded, neutral icon vocabulary. The prop is a plain string (never a named\n * or sector-specific enum); an unknown or absent key renders a neutral fallback.\n */\nconst 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\nconst FALLBACK_ICON: LucideIcon = LayoutGrid\n\nfunction resolveCategoryIcon(icon: string | undefined): LucideIcon {\n  if (!icon) return FALLBACK_ICON\n  return CATEGORY_ICONS[icon] ?? FALLBACK_ICON\n}\n\n/**\n * Formats a category item count only when it is a supplied, finite,\n * non-negative number. Returns `undefined` for unknown or invalid values so the\n * caller omits the count entirely (a real `0` is preserved). The optional\n * `itemsLabel` is host-supplied copy — the block never hardcodes a unit.\n */\nfunction formatCount(itemCount: number | undefined, itemsLabel: string | undefined): string | undefined {\n  if (itemCount === undefined || !Number.isFinite(itemCount) || itemCount < 0) {\n    return undefined\n  }\n  const value = itemCount.toLocaleString()\n  return itemsLabel ? `${value} ${itemsLabel}` : value\n}\n\nfunction resolveImage(image: string | undefined, fallback: string): string {\n  return image && image.trim() !== '' ? image : fallback\n}\n\nfunction SectionCta({ cta }: { cta: CTA | undefined }) {\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\nfunction ViewAllButton({ onViewAll, viewAllLabel }: { onViewAll?: () => void; viewAllLabel?: string }) {\n  // Purpose-gated: no handler or no label means no affordance.\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\nfunction GridPresentation({\n  categories,\n  title,\n  description,\n  cta,\n  onBrowse,\n  browseLabel,\n  trendingLabel,\n  itemsLabel,\n  imageFallback,\n  className,\n}: ProductCategoryProps) {\n  const fallback = imageFallback ?? PRODUCT_IMAGE_FALLBACK\n  return (\n    <section className={cn('py-12', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {title || description ? (\n          <div className='mb-12 text-center'>\n            {title ? <h2 className='text-3xl font-bold tracking-tight text-balance'>{title}</h2> : null}\n            {description ? <p className='text-muted-foreground mt-4 text-lg'>{description}</p> : null}\n          </div>\n        ) : null}\n\n        <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>\n          {categories.map(category => {\n            const countLabel = formatCount(category.itemCount, itemsLabel)\n            return (\n              <Card\n                key={category.id}\n                className='group overflow-hidden py-0 transition-all duration-500 hover:shadow-lg'\n              >\n                <div className='relative aspect-[5/4] overflow-hidden'>\n                  <img\n                    src={resolveImage(category.image, fallback)}\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\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\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                      {countLabel ? <span className='text-sm'>{countLabel}</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                          <ArrowRight />\n                        </Button>\n                      ) : null}\n                    </div>\n                  </div>\n                </div>\n              </Card>\n            )\n          })}\n        </div>\n\n        <SectionCta cta={cta} />\n      </div>\n    </section>\n  )\n}\n\nfunction IconsPresentation({\n  categories,\n  title,\n  description,\n  badge,\n  cta,\n  onBrowse,\n  onViewAll,\n  viewAllLabel,\n  className,\n}: ProductCategoryProps) {\n  return (\n    <section className={cn('py-12', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {badge || title || description ? (\n          <div className='mx-auto mb-12 max-w-3xl text-center'>\n            {badge ? (\n              <div className='mb-4 inline-flex'>\n                <span className='bg-secondary/80 text-secondary-foreground rounded-full px-4 py-1.5 text-sm font-medium'>\n                  {badge}\n                </span>\n              </div>\n            ) : null}\n            {title ? <h2 className='text-3xl font-bold tracking-tight text-balance'>{title}</h2> : null}\n            {description ? <p className='text-muted-foreground mt-4'>{description}</p> : null}\n          </div>\n        ) : null}\n\n        <div className='mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>\n          {categories.map(category => {\n            const Icon = resolveCategoryIcon(category.icon)\n            const clickable = Boolean(onBrowse)\n            return (\n              <Card\n                key={category.id}\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                  // A stretched native control keeps the whole card clickable\n                  // while focus, activation, and the accessible name come from\n                  // the platform. The Card stays non-interactive so no\n                  // block-level element is nested inside the button, and with\n                  // no browse handler there is no control and no focus target.\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        </div>\n\n        <SectionCta cta={cta} />\n        <ViewAllButton onViewAll={onViewAll} viewAllLabel={viewAllLabel} />\n      </div>\n    </section>\n  )\n}\n\nfunction ListPresentation({\n  categories,\n  title,\n  description,\n  query,\n  onQueryChange,\n  searchPlaceholder,\n  searchLabel,\n  emptyLabel,\n  noResultsLabel,\n  featuredLabel,\n  browseLabel,\n  itemsLabel,\n  onBrowse,\n  onViewAll,\n  viewAllLabel,\n  className,\n}: ProductCategoryProps) {\n  const hasQuery = Boolean(query && query.trim() !== '')\n  // The host owns filtering: this presentation renders exactly the categories it\n  // receives. Only the empty copy depends on whether a query is active.\n  const emptyMessage = hasQuery ? noResultsLabel ?? emptyLabel : emptyLabel\n\n  return (\n    <section className={cn('py-12', className)}>\n      <div className='mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'>\n        {title || description ? (\n          <div className='mb-8 text-center'>\n            {title ? (\n              <h2 className='mb-4 text-3xl font-bold tracking-tight text-balance'>{title}</h2>\n            ) : null}\n            {description ? <p className='text-muted-foreground text-lg'>{description}</p> : null}\n          </div>\n        ) : null}\n\n        {onQueryChange ? (\n          <div className='relative mx-auto mb-8 max-w-md'>\n            <Search\n              className='text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2'\n              aria-hidden='true'\n            />\n            <Input\n              type='search'\n              placeholder={searchPlaceholder}\n              value={query ?? ''}\n              onChange={event => onQueryChange(event.target.value)}\n              className='ps-9 h-9'\n              aria-label={searchLabel ?? searchPlaceholder}\n            />\n          </div>\n        ) : null}\n\n        {categories.length === 0 ? (\n          emptyMessage ? (\n            <p className='text-muted-foreground py-10 text-center text-sm'>{emptyMessage}</p>\n          ) : null\n        ) : (\n          <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>\n            {categories.map(category => {\n              const Icon = resolveCategoryIcon(category.icon)\n              const countLabel = formatCount(category.itemCount, itemsLabel)\n              return (\n                <Card\n                  key={category.id}\n                  className={cn(\n                    'group hover:border-primary relative py-0 transition-all duration-200 hover:shadow-md',\n                  )}\n                >\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\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\n                        {category.description ? (\n                          <p className='text-muted-foreground mb-3 line-clamp-2 text-sm'>\n                            {category.description}\n                          </p>\n                        ) : null}\n\n                        {category.subcategories && category.subcategories.length > 0 ? (\n                          <div className='mb-3 flex flex-wrap gap-2'>\n                            {category.subcategories.map((sub, 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                                {sub}\n                              </span>\n                            ))}\n                          </div>\n                        ) : null}\n\n                        {countLabel ? (\n                          <div className='text-muted-foreground text-sm'>{countLabel}</div>\n                        ) : null}\n                      </div>\n                    </div>\n\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                        <ArrowRight />\n                      </Button>\n                    ) : null}\n                  </CardContent>\n                </Card>\n              )\n            })}\n          </div>\n        )}\n\n        <ViewAllButton onViewAll={onViewAll} viewAllLabel={viewAllLabel} />\n      </div>\n    </section>\n  )\n}\n\nexport function ProductCategory(props: ProductCategoryProps) {\n  const presentation = props.presentation ?? 'grid'\n  if (presentation === 'icons') return <IconsPresentation {...props} />\n  if (presentation === 'list') return <ListPresentation {...props} />\n  return <GridPresentation {...props} />\n}\n\nexport default ProductCategory\n"],"mappings":"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","names":[]}