@thorprovider/blocks 1.0.0 → 3.0.0

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

@@ -0,0 +1,138 @@
+"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_grid_exports = {};
+__export(product_category_grid_exports, {
+  CategoryGrid: () => CategoryGrid,
+  default: () => product_category_grid_default
+});
+module.exports = __toCommonJS(product_category_grid_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_input = require("../../../ui/input.js");
+var import_utils = require("../../../lib/utils.js");
+var import_category_card = require("./category-card.js");
+var import_category_shared = require("./category-shared.js");
+const CONTAINER = "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8";
+const LAYOUT = {
+  grid: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
+  icons: "mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+  list: "grid grid-cols-1 gap-4 lg:grid-cols-2"
+};
+const SKELETON = {
+  grid: "aspect-[5/4]",
+  icons: "h-36",
+  list: "h-28"
+};
+function Header({
+  presentation,
+  title,
+  description,
+  badge
+}) {
+  if (presentation === "icons") {
+    if (!badge && !title && !description) return null;
+    return /* @__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 text-lg", children: description }) : null
+    ] });
+  }
+  if (!title && !description) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_utils.cn)("text-center", presentation === "list" ? "mb-8" : "mb-12"), children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: (0, import_utils.cn)("text-3xl font-bold tracking-tight text-balance", presentation === "list" && "mb-4"), children: title }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_utils.cn)("text-muted-foreground text-lg", presentation !== "list" && "mt-4"), children: description }) : null
+  ] });
+}
+function CategoryGrid(props) {
+  const presentation = props.presentation ?? "grid";
+  const {
+    categories,
+    className,
+    title,
+    description,
+    badge,
+    cta,
+    query,
+    onQueryChange,
+    onBrowse,
+    onViewAll,
+    searchPlaceholder,
+    searchLabel,
+    emptyLabel,
+    noResultsLabel,
+    viewAllLabel
+  } = props;
+  const displayed = props.maxItems !== void 0 ? categories.slice(0, props.maxItems) : categories;
+  const hasQuery = Boolean(query && query.trim() !== "");
+  const emptyMessage = hasQuery ? noResultsLabel ?? emptyLabel : emptyLabel;
+  const skeletonCount = props.skeletonCount ?? 6;
+  const cellPresentation = presentation;
+  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: CONTAINER, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Header, { presentation, title, description, badge }),
+    presentation === "list" && 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,
+    props.loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: LAYOUT[presentation], "aria-busy": "true", children: Array.from({ length: skeletonCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_utils.cn)("bg-muted/50 animate-pulse rounded-xl", SKELETON[presentation])
+      },
+      `skeleton-${index}`
+    )) }) : displayed.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: LAYOUT[presentation], children: displayed.map((category) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_category_card.CategoryCard,
+      {
+        category,
+        presentation: cellPresentation,
+        browseLabel: props.browseLabel,
+        itemsLabel: props.itemsLabel,
+        trendingLabel: props.trendingLabel,
+        featuredLabel: props.featuredLabel,
+        imageFallback: props.imageFallback,
+        onBrowse
+      },
+      category.id
+    )) }),
+    !props.loading && presentation !== "list" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_category_shared.SectionCta, { cta }) : null,
+    !props.loading && presentation !== "grid" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_category_shared.ViewAllButton, { onViewAll, viewAllLabel }) : null
+  ] }) });
+}
+var product_category_grid_default = CategoryGrid;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CategoryGrid
+});
+//# sourceMappingURL=product-category-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/product-category-grid.tsx"],"sourcesContent":["'use client'\n\nimport { Search } from 'lucide-react'\n\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\nimport type {\n  CategoryGridSpecProps,\n  ProductCategoryItem,\n} from '../../../lib/contracts'\nimport { CategoryCard, type CategoryCardPresentation } from './category-card'\nimport { SectionCta, ViewAllButton } from './category-shared'\n\nexport type CategoryGridPresentation = NonNullable<CategoryGridSpecProps['presentation']>\n\nexport interface CategoryGridProps extends CategoryGridSpecProps {\n  onBrowse?: (category: ProductCategoryItem) => void\n  onViewAll?: () => void\n  onQueryChange?: (query: string) => void\n}\n\nconst CONTAINER = 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'\n\nconst LAYOUT: Record<CategoryGridPresentation, string> = {\n  grid: 'grid gap-6 sm:grid-cols-2 lg:grid-cols-3',\n  icons: 'mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4',\n  list: 'grid grid-cols-1 gap-4 lg:grid-cols-2',\n}\n\nconst SKELETON: Record<CategoryGridPresentation, string> = {\n  grid: 'aspect-[5/4]',\n  icons: 'h-36',\n  list: 'h-28',\n}\n\nfunction Header({\n  presentation,\n  title,\n  description,\n  badge,\n}: {\n  presentation: CategoryGridPresentation\n  title?: string\n  description?: string\n  badge?: string\n}) {\n  if (presentation === 'icons') {\n    if (!badge && !title && !description) return null\n    return (\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 text-lg\">{description}</p> : null}\n      </div>\n    )\n  }\n\n  if (!title && !description) return null\n  return (\n    <div className={cn('text-center', presentation === 'list' ? 'mb-8' : 'mb-12')}>\n      {title ? (\n        <h2 className={cn('text-3xl font-bold tracking-tight text-balance', presentation === 'list' && 'mb-4')}>\n          {title}\n        </h2>\n      ) : null}\n      {description ? (\n        <p className={cn('text-muted-foreground text-lg', presentation !== 'list' && 'mt-4')}>\n          {description}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nexport function CategoryGrid(props: CategoryGridProps) {\n  const presentation = props.presentation ?? 'grid'\n  const {\n    categories,\n    className,\n    title,\n    description,\n    badge,\n    cta,\n    query,\n    onQueryChange,\n    onBrowse,\n    onViewAll,\n    searchPlaceholder,\n    searchLabel,\n    emptyLabel,\n    noResultsLabel,\n    viewAllLabel,\n  } = props\n\n  const displayed =\n    props.maxItems !== undefined ? categories.slice(0, props.maxItems) : categories\n  const hasQuery = Boolean(query && query.trim() !== '')\n  const emptyMessage = hasQuery ? (noResultsLabel ?? emptyLabel) : emptyLabel\n  const skeletonCount = props.skeletonCount ?? 6\n  const cellPresentation = presentation as CategoryCardPresentation\n\n  return (\n    <section className={cn('py-12', className)}>\n      <div className={CONTAINER}>\n        <Header presentation={presentation} title={title} description={description} badge={badge} />\n\n        {presentation === 'list' && 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        {props.loading ? (\n          <div className={LAYOUT[presentation]} aria-busy=\"true\">\n            {Array.from({ length: skeletonCount }, (_, index) => (\n              <div\n                key={`skeleton-${index}`}\n                className={cn('bg-muted/50 animate-pulse rounded-xl', SKELETON[presentation])}\n              />\n            ))}\n          </div>\n        ) : displayed.length === 0 ? (\n          emptyMessage ? (\n            <p className=\"text-muted-foreground py-10 text-center text-sm\">{emptyMessage}</p>\n          ) : null\n        ) : (\n          <div className={LAYOUT[presentation]}>\n            {displayed.map((category) => (\n              <CategoryCard\n                key={category.id}\n                category={category}\n                presentation={cellPresentation}\n                browseLabel={props.browseLabel}\n                itemsLabel={props.itemsLabel}\n                trendingLabel={props.trendingLabel}\n                featuredLabel={props.featuredLabel}\n                imageFallback={props.imageFallback}\n                onBrowse={onBrowse}\n              />\n            ))}\n          </div>\n        )}\n\n        {!props.loading && presentation !== 'list' ? <SectionCta cta={cta} /> : null}\n        {!props.loading && presentation !== 'grid' ? (\n          <ViewAllButton onViewAll={onViewAll} viewAllLabel={viewAllLabel} />\n        ) : null}\n      </div>\n    </section>\n  )\n}\n\nexport default CategoryGrid\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { Input } from "../../../ui/input.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { CategoryCard } from "./category-card.mjs";
+import { SectionCta, ViewAllButton } from "./category-shared.mjs";
+const CONTAINER = "mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8";
+const LAYOUT = {
+  grid: "grid gap-6 sm:grid-cols-2 lg:grid-cols-3",
+  icons: "mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+  list: "grid grid-cols-1 gap-4 lg:grid-cols-2"
+};
+const SKELETON = {
+  grid: "aspect-[5/4]",
+  icons: "h-36",
+  list: "h-28"
+};
+function Header({
+  presentation,
+  title,
+  description,
+  badge
+}) {
+  if (presentation === "icons") {
+    if (!badge && !title && !description) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "mx-auto mb-12 max-w-3xl text-center", children: [
+      badge ? /* @__PURE__ */ jsx("div", { className: "mb-4 inline-flex", children: /* @__PURE__ */ 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__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-balance", children: title }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-4 text-lg", children: description }) : null
+    ] });
+  }
+  if (!title && !description) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("text-center", presentation === "list" ? "mb-8" : "mb-12"), children: [
+    title ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight text-balance", presentation === "list" && "mb-4"), children: title }) : null,
+    description ? /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground text-lg", presentation !== "list" && "mt-4"), children: description }) : null
+  ] });
+}
+function CategoryGrid(props) {
+  const presentation = props.presentation ?? "grid";
+  const {
+    categories,
+    className,
+    title,
+    description,
+    badge,
+    cta,
+    query,
+    onQueryChange,
+    onBrowse,
+    onViewAll,
+    searchPlaceholder,
+    searchLabel,
+    emptyLabel,
+    noResultsLabel,
+    viewAllLabel
+  } = props;
+  const displayed = props.maxItems !== void 0 ? categories.slice(0, props.maxItems) : categories;
+  const hasQuery = Boolean(query && query.trim() !== "");
+  const emptyMessage = hasQuery ? noResultsLabel ?? emptyLabel : emptyLabel;
+  const skeletonCount = props.skeletonCount ?? 6;
+  const cellPresentation = presentation;
+  return /* @__PURE__ */ jsx("section", { className: cn("py-12", className), children: /* @__PURE__ */ jsxs("div", { className: CONTAINER, children: [
+    /* @__PURE__ */ jsx(Header, { presentation, title, description, badge }),
+    presentation === "list" && onQueryChange ? /* @__PURE__ */ jsxs("div", { className: "relative mx-auto mb-8 max-w-md", children: [
+      /* @__PURE__ */ jsx(
+        Search,
+        {
+          className: "text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "search",
+          placeholder: searchPlaceholder,
+          value: query ?? "",
+          onChange: (event) => onQueryChange(event.target.value),
+          className: "ps-9 h-9",
+          "aria-label": searchLabel ?? searchPlaceholder
+        }
+      )
+    ] }) : null,
+    props.loading ? /* @__PURE__ */ jsx("div", { className: LAYOUT[presentation], "aria-busy": "true", children: Array.from({ length: skeletonCount }, (_, index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("bg-muted/50 animate-pulse rounded-xl", SKELETON[presentation])
+      },
+      `skeleton-${index}`
+    )) }) : displayed.length === 0 ? emptyMessage ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-10 text-center text-sm", children: emptyMessage }) : null : /* @__PURE__ */ jsx("div", { className: LAYOUT[presentation], children: displayed.map((category) => /* @__PURE__ */ jsx(
+      CategoryCard,
+      {
+        category,
+        presentation: cellPresentation,
+        browseLabel: props.browseLabel,
+        itemsLabel: props.itemsLabel,
+        trendingLabel: props.trendingLabel,
+        featuredLabel: props.featuredLabel,
+        imageFallback: props.imageFallback,
+        onBrowse
+      },
+      category.id
+    )) }),
+    !props.loading && presentation !== "list" ? /* @__PURE__ */ jsx(SectionCta, { cta }) : null,
+    !props.loading && presentation !== "grid" ? /* @__PURE__ */ jsx(ViewAllButton, { onViewAll, viewAllLabel }) : null
+  ] }) });
+}
+var product_category_grid_default = CategoryGrid;
+export {
+  CategoryGrid,
+  product_category_grid_default as default
+};
+//# sourceMappingURL=product-category-grid.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/product-categories/product-category-grid.tsx"],"sourcesContent":["'use client'\n\nimport { Search } from 'lucide-react'\n\nimport { Input } from '../../../ui/input'\nimport { cn } from '../../../lib/utils'\nimport type {\n  CategoryGridSpecProps,\n  ProductCategoryItem,\n} from '../../../lib/contracts'\nimport { CategoryCard, type CategoryCardPresentation } from './category-card'\nimport { SectionCta, ViewAllButton } from './category-shared'\n\nexport type CategoryGridPresentation = NonNullable<CategoryGridSpecProps['presentation']>\n\nexport interface CategoryGridProps extends CategoryGridSpecProps {\n  onBrowse?: (category: ProductCategoryItem) => void\n  onViewAll?: () => void\n  onQueryChange?: (query: string) => void\n}\n\nconst CONTAINER = 'mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8'\n\nconst LAYOUT: Record<CategoryGridPresentation, string> = {\n  grid: 'grid gap-6 sm:grid-cols-2 lg:grid-cols-3',\n  icons: 'mx-auto grid max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4',\n  list: 'grid grid-cols-1 gap-4 lg:grid-cols-2',\n}\n\nconst SKELETON: Record<CategoryGridPresentation, string> = {\n  grid: 'aspect-[5/4]',\n  icons: 'h-36',\n  list: 'h-28',\n}\n\nfunction Header({\n  presentation,\n  title,\n  description,\n  badge,\n}: {\n  presentation: CategoryGridPresentation\n  title?: string\n  description?: string\n  badge?: string\n}) {\n  if (presentation === 'icons') {\n    if (!badge && !title && !description) return null\n    return (\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 text-lg\">{description}</p> : null}\n      </div>\n    )\n  }\n\n  if (!title && !description) return null\n  return (\n    <div className={cn('text-center', presentation === 'list' ? 'mb-8' : 'mb-12')}>\n      {title ? (\n        <h2 className={cn('text-3xl font-bold tracking-tight text-balance', presentation === 'list' && 'mb-4')}>\n          {title}\n        </h2>\n      ) : null}\n      {description ? (\n        <p className={cn('text-muted-foreground text-lg', presentation !== 'list' && 'mt-4')}>\n          {description}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nexport function CategoryGrid(props: CategoryGridProps) {\n  const presentation = props.presentation ?? 'grid'\n  const {\n    categories,\n    className,\n    title,\n    description,\n    badge,\n    cta,\n    query,\n    onQueryChange,\n    onBrowse,\n    onViewAll,\n    searchPlaceholder,\n    searchLabel,\n    emptyLabel,\n    noResultsLabel,\n    viewAllLabel,\n  } = props\n\n  const displayed =\n    props.maxItems !== undefined ? categories.slice(0, props.maxItems) : categories\n  const hasQuery = Boolean(query && query.trim() !== '')\n  const emptyMessage = hasQuery ? (noResultsLabel ?? emptyLabel) : emptyLabel\n  const skeletonCount = props.skeletonCount ?? 6\n  const cellPresentation = presentation as CategoryCardPresentation\n\n  return (\n    <section className={cn('py-12', className)}>\n      <div className={CONTAINER}>\n        <Header presentation={presentation} title={title} description={description} badge={badge} />\n\n        {presentation === 'list' && 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        {props.loading ? (\n          <div className={LAYOUT[presentation]} aria-busy=\"true\">\n            {Array.from({ length: skeletonCount }, (_, index) => (\n              <div\n                key={`skeleton-${index}`}\n                className={cn('bg-muted/50 animate-pulse rounded-xl', SKELETON[presentation])}\n              />\n            ))}\n          </div>\n        ) : displayed.length === 0 ? (\n          emptyMessage ? (\n            <p className=\"text-muted-foreground py-10 text-center text-sm\">{emptyMessage}</p>\n          ) : null\n        ) : (\n          <div className={LAYOUT[presentation]}>\n            {displayed.map((category) => (\n              <CategoryCard\n                key={category.id}\n                category={category}\n                presentation={cellPresentation}\n                browseLabel={props.browseLabel}\n                itemsLabel={props.itemsLabel}\n                trendingLabel={props.trendingLabel}\n                featuredLabel={props.featuredLabel}\n                imageFallback={props.imageFallback}\n                onBrowse={onBrowse}\n              />\n            ))}\n          </div>\n        )}\n\n        {!props.loading && presentation !== 'list' ? <SectionCta cta={cta} /> : null}\n        {!props.loading && presentation !== 'grid' ? (\n          <ViewAllButton onViewAll={onViewAll} viewAllLabel={viewAllLabel} />\n        ) : null}\n      </div>\n    </section>\n  )\n}\n\nexport default CategoryGrid\n"],"mappings":";AAiDM,SAGM,KAHN;AA/CN,SAAS,cAAc;AAEvB,SAAS,aAAa;AACtB,SAAS,UAAU;AAKnB,SAAS,oBAAmD;AAC5D,SAAS,YAAY,qBAAqB;AAU1C,MAAM,YAAY;AAElB,MAAM,SAAmD;AAAA,EACvD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,WAAqD;AAAA,EACzD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;AAEA,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,iBAAiB,SAAS;AAC5B,QAAI,CAAC,SAAS,CAAC,SAAS,CAAC,YAAa,QAAO;AAC7C,WACE,qBAAC,SAAI,WAAU,uCACZ;AAAA,cACC,oBAAC,SAAI,WAAU,oBACb,8BAAC,UAAK,WAAU,0FACb,iBACH,GACF,IACE;AAAA,MACH,QAAQ,oBAAC,QAAG,WAAU,kDAAkD,iBAAM,IAAQ;AAAA,MACtF,cAAc,oBAAC,OAAE,WAAU,sCAAsC,uBAAY,IAAO;AAAA,OACvF;AAAA,EAEJ;AAEA,MAAI,CAAC,SAAS,CAAC,YAAa,QAAO;AACnC,SACE,qBAAC,SAAI,WAAW,GAAG,eAAe,iBAAiB,SAAS,SAAS,OAAO,GACzE;AAAA,YACC,oBAAC,QAAG,WAAW,GAAG,kDAAkD,iBAAiB,UAAU,MAAM,GAClG,iBACH,IACE;AAAA,IACH,cACC,oBAAC,OAAE,WAAW,GAAG,iCAAiC,iBAAiB,UAAU,MAAM,GAChF,uBACH,IACE;AAAA,KACN;AAEJ;AAEO,SAAS,aAAa,OAA0B;AACrD,QAAM,eAAe,MAAM,gBAAgB;AAC3C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,YACJ,MAAM,aAAa,SAAY,WAAW,MAAM,GAAG,MAAM,QAAQ,IAAI;AACvE,QAAM,WAAW,QAAQ,SAAS,MAAM,KAAK,MAAM,EAAE;AACrD,QAAM,eAAe,WAAY,kBAAkB,aAAc;AACjE,QAAM,gBAAgB,MAAM,iBAAiB;AAC7C,QAAM,mBAAmB;AAEzB,SACE,oBAAC,aAAQ,WAAW,GAAG,SAAS,SAAS,GACvC,+BAAC,SAAI,WAAW,WACd;AAAA,wBAAC,UAAO,cAA4B,OAAc,aAA0B,OAAc;AAAA,IAEzF,iBAAiB,UAAU,gBAC1B,qBAAC,SAAI,WAAU,kCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,aAAa;AAAA,UACb,OAAO,SAAS;AAAA,UAChB,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,KAAK;AAAA,UACrD,WAAU;AAAA,UACV,cAAY,eAAe;AAAA;AAAA,MAC7B;AAAA,OACF,IACE;AAAA,IAEH,MAAM,UACL,oBAAC,SAAI,WAAW,OAAO,YAAY,GAAG,aAAU,QAC7C,gBAAM,KAAK,EAAE,QAAQ,cAAc,GAAG,CAAC,GAAG,UACzC;AAAA,MAAC;AAAA;AAAA,QAEC,WAAW,GAAG,wCAAwC,SAAS,YAAY,CAAC;AAAA;AAAA,MADvE,YAAY,KAAK;AAAA,IAExB,CACD,GACH,IACE,UAAU,WAAW,IACvB,eACE,oBAAC,OAAE,WAAU,mDAAmD,wBAAa,IAC3E,OAEJ,oBAAC,SAAI,WAAW,OAAO,YAAY,GAChC,oBAAU,IAAI,CAAC,aACd;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,cAAc;AAAA,QACd,aAAa,MAAM;AAAA,QACnB,YAAY,MAAM;AAAA,QAClB,eAAe,MAAM;AAAA,QACrB,eAAe,MAAM;AAAA,QACrB,eAAe,MAAM;AAAA,QACrB;AAAA;AAAA,MARK,SAAS;AAAA,IAShB,CACD,GACH;AAAA,IAGD,CAAC,MAAM,WAAW,iBAAiB,SAAS,oBAAC,cAAW,KAAU,IAAK;AAAA,IACvE,CAAC,MAAM,WAAW,iBAAiB,SAClC,oBAAC,iBAAc,WAAsB,cAA4B,IAC/D;AAAA,KACN,GACF;AAEJ;AAEA,IAAO,gCAAQ;","names":[]}

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

@@ -0,0 +1,41 @@
+import type { CTA } from '../../../lib/types';
+import type { ProductCategoryItem, ProductCategorySpecProps } from '../../../lib/contracts';
+/**
+ * The bounded presentation surface. `grid` is image-forward, `icons` is a
+ * compact icon grid, and `list` is a described row list with subcategory chips
+ * and an optional controlled search. The value changes structure, never the
+ * data contract or the callbacks.
+ */
+export type ProductCategoryPresentation = NonNullable<ProductCategorySpecProps['presentation']>;
+export interface ProductCategoryProps {
+    /** Canonical category projection; absent optional fields degrade gracefully. */
+    categories: ProductCategoryItem[];
+    /** Bounded presentation option; defaults to `grid`. */
+    presentation?: ProductCategoryPresentation;
+    title?: string;
+    description?: string;
+    /** Optional eyebrow label (`icons` presentation). */
+    badge?: string;
+    /** Optional section-level link action. */
+    cta?: CTA;
+    /** Controlled search value (`list` presentation); the host owns filtering. */
+    query?: string;
+    onQueryChange?: (query: string) => void;
+    onBrowse?: (category: ProductCategoryItem) => void;
+    onViewAll?: () => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    emptyLabel?: string;
+    noResultsLabel?: string;
+    browseLabel?: string;
+    viewAllLabel?: string;
+    trendingLabel?: string;
+    featuredLabel?: string;
+    itemsLabel?: string;
+    /** Neutral placeholder for a missing image; defaults to `PRODUCT_IMAGE_FALLBACK`. */
+    imageFallback?: string;
+    className?: string;
+}
+export declare function ProductCategory(props: ProductCategoryProps): import("react").JSX.Element;
+export default ProductCategory;
+//# sourceMappingURL=product-category.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-category.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/product-categories/product-category.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAA;AAC7C,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAA;AAE3F;;;;;GAKG;AACH,MAAM,MAAM,2BAA2B,GAAG,WAAW,CAAC,wBAAwB,CAAC,cAAc,CAAC,CAAC,CAAA;AAE/F,MAAM,WAAW,oBAAoB;IACnC,gFAAgF;IAChF,UAAU,EAAE,mBAAmB,EAAE,CAAA;IACjC,uDAAuD;IACvD,YAAY,CAAC,EAAE,2BAA2B,CAAA;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,GAAG,CAAA;IACT,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qFAAqF;IACrF,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAwXD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAK1D;AAED,eAAe,eAAe,CAAA"}