@thorprovider/blocks 2.0.0 → 3.0.0

package/dist/blocks/e-commerce/navigation/mega-menu.js

@@ -0,0 +1,250 @@
+"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 mega_menu_exports = {};
+__export(mega_menu_exports, {
+  MegaMenu: () => MegaMenu,
+  megaMenuPropsSchema: () => megaMenuPropsSchema
+});
+module.exports = __toCommonJS(mega_menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_zod = require("zod");
+var import_menu = require("../../../lib/types/menu.js");
+var import_utils = require("../../../lib/utils.js");
+var import_category_icon = require("./category-icon.js");
+const megaMenuPropsSchema = import_zod.z.object({
+  categories: import_zod.z.array(import_menu.menuItemSchema),
+  collections: import_zod.z.array(import_menu.collectionItemSchema),
+  onNavigate: import_zod.z.custom().optional(),
+  categoryColumnTitle: import_zod.z.string().optional(),
+  collectionsTitle: import_zod.z.string().optional(),
+  viewAllLabel: import_zod.z.string().optional(),
+  collectionsHref: import_zod.z.string().optional(),
+  ariaLabel: import_zod.z.string().optional()
+});
+function MegaMenuColumn({
+  title,
+  items,
+  activeId,
+  onHover,
+  onNavigate,
+  level,
+  scrollable = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "shrink-0 px-3 pb-1 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        className: (0, import_utils.cn)("flex-1 py-1", scrollable ? "overflow-y-auto" : ""),
+        role: "list",
+        children: items.map((item) => {
+          const isActive = item.id === activeId;
+          const hasChildren = Boolean(item.children && item.children.length > 0);
+          const parsedIcon = import_category_icon.categoryIconNameSchema.safeParse(item.icon);
+          const iconName = parsedIcon.success ? parsedIcon.data : void 0;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "a",
+            {
+              href: item.href ?? "#",
+              className: (0, import_utils.cn)(
+                "group/item flex items-center gap-2.5 px-3 py-2 text-sm transition-colors",
+                isActive ? "bg-secondary font-semibold text-primary" : "text-foreground hover:bg-secondary/60"
+              ),
+              onMouseEnter: () => onHover?.(item),
+              onClick: () => {
+                onHover?.(item);
+                onNavigate?.();
+              },
+              "aria-current": isActive ? "true" : void 0,
+              children: [
+                level === 1 ? item.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: item.image || void 0,
+                    alt: "",
+                    loading: "lazy",
+                    className: "size-7 shrink-0 rounded object-cover"
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_category_icon.CategoryIcon,
+                  {
+                    name: iconName,
+                    className: "size-4 shrink-0 text-muted-foreground group-hover/item:text-primary"
+                  }
+                ) : null,
+                level === 2 && item.image ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: item.image || void 0,
+                    alt: "",
+                    loading: "lazy",
+                    className: "size-6 shrink-0 rounded object-cover"
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex-1 leading-tight", children: item.label }),
+                item.badge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "rounded bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground", children: item.badge }) : null,
+                hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_lucide_react.ChevronRight,
+                  {
+                    className: (0, import_utils.cn)(
+                      "size-3.5 shrink-0 transition-transform",
+                      isActive ? "text-primary" : "text-muted-foreground"
+                    )
+                  }
+                ) : null
+              ]
+            }
+          ) }, item.id);
+        })
+      }
+    )
+  ] });
+}
+function MegaMenu({
+  categories,
+  collections,
+  onNavigate,
+  categoryColumnTitle = "Comprar por categor\xEDas",
+  collectionsTitle = "Colecciones",
+  viewAllLabel = "Ver todas las colecciones",
+  collectionsHref = "/colecciones",
+  ariaLabel = "Men\xFA de categor\xEDas"
+}) {
+  const [activeL1, setActiveL1] = (0, import_react.useState)(categories[0]);
+  const [activeL2, setActiveL2] = (0, import_react.useState)(
+    categories[0]?.children?.[0]
+  );
+  const handleL1Hover = (item) => {
+    setActiveL1(item);
+    setActiveL2(item.children?.[0]);
+  };
+  const l2Items = activeL1?.children ?? [];
+  const l3Items = activeL2?.children ?? [];
+  const featuredImage = activeL2?.image ?? activeL1?.image;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "flex h-[520px] overflow-hidden rounded-b-lg border border-t-0 bg-card shadow-xl",
+      role: "dialog",
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          MegaMenuColumn,
+          {
+            title: categoryColumnTitle,
+            items: categories,
+            activeId: activeL1?.id,
+            onHover: handleL1Hover,
+            onNavigate,
+            level: 1,
+            scrollable: true
+          }
+        ) }),
+        l2Items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          MegaMenuColumn,
+          {
+            title: activeL1?.label,
+            items: l2Items,
+            activeId: activeL2?.id,
+            onHover: (item) => setActiveL2(item),
+            onNavigate,
+            level: 2,
+            scrollable: true
+          }
+        ) }) : null,
+        l3Items.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex w-52 min-w-0 shrink-0 flex-col overflow-hidden border-r", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          MegaMenuColumn,
+          {
+            title: activeL2?.label,
+            items: l3Items,
+            onNavigate,
+            level: 3,
+            scrollable: true
+          }
+        ) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          featuredImage ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "a",
+            {
+              href: activeL2?.href ?? activeL1?.href ?? "#",
+              onClick: onNavigate,
+              className: "group relative block h-44 shrink-0 overflow-hidden",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "img",
+                  {
+                    src: featuredImage || void 0,
+                    alt: activeL2?.label ?? activeL1?.label ?? "",
+                    loading: "lazy",
+                    className: "size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "absolute bottom-2 left-3 right-3 text-xs font-bold leading-tight text-white", children: activeL2?.label ?? activeL1?.label })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-1 flex-col overflow-y-auto", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "shrink-0 px-3 pb-2 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: collectionsTitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-1 px-3 pb-3", children: collections.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "a",
+              {
+                href: col.href,
+                className: "group flex items-center gap-3 rounded-md p-1.5 transition-colors hover:bg-secondary/60",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "img",
+                    {
+                      src: col.image || void 0,
+                      alt: "",
+                      loading: "lazy",
+                      className: "size-12 shrink-0 rounded-md object-cover transition-transform duration-300 group-hover:scale-105"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "truncate text-xs font-semibold leading-tight text-foreground", children: col.label }),
+                    col.description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "truncate text-[11px] text-muted-foreground", children: col.description }) : null
+                  ] })
+                ]
+              },
+              col.id
+            )) })
+          ] }),
+          collectionsHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-t p-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "a",
+            {
+              href: collectionsHref,
+              className: "block rounded-md bg-secondary px-3 py-2.5 text-center text-xs font-bold text-foreground hover:bg-secondary/70",
+              children: viewAllLabel
+            }
+          ) }) : null
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MegaMenu,
+  megaMenuPropsSchema
+});
+//# sourceMappingURL=mega-menu.js.map

package/dist/blocks/e-commerce/navigation/mega-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/navigation/mega-menu.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronRight } from 'lucide-react'\nimport { useState } from 'react'\nimport { z } from 'zod'\n\nimport {\n  collectionItemSchema,\n  menuItemSchema,\n  type MenuItem,\n} from '../../../lib/types/menu'\nimport { cn } from '../../../lib/utils'\nimport { CategoryIcon, categoryIconNameSchema } from './category-icon'\n\n/**\n * Three-level category flyout: L1 categories, L2 subcategories, L3 sub-sub\n * categories, plus a right panel with a featured image and collection links.\n *\n * Framework-agnostic and prop-driven: plain anchors replace router links,\n * `loading=\"lazy\"` images replace next/image, and Spanish copy/hrefs are\n * optional props with ES defaults. `onNavigate` lets the tenant close the\n * flyout on navigation; `collectionsHref` controls the \"view all\" link\n * (pass `''` to hide it).\n *\n * Ported from the legacy `@thorprovider/components` navigation library\n * (source: branch `feat/storefronts`).\n */\n\nexport const megaMenuPropsSchema = z.object({\n  categories: z.array(menuItemSchema),\n  collections: z.array(collectionItemSchema),\n  onNavigate: z.custom<() => void>().optional(),\n  categoryColumnTitle: z.string().optional(),\n  collectionsTitle: z.string().optional(),\n  viewAllLabel: z.string().optional(),\n  collectionsHref: z.string().optional(),\n  ariaLabel: z.string().optional(),\n})\n\nexport type MegaMenuProps = z.infer<typeof megaMenuPropsSchema>\n\nfunction MegaMenuColumn({\n  title,\n  items,\n  activeId,\n  onHover,\n  onNavigate,\n  level,\n  scrollable = false,\n}: {\n  title?: string\n  items: MenuItem[]\n  activeId?: string\n  onHover?: (item: MenuItem) => void\n  onNavigate?: () => void\n  level: 1 | 2 | 3\n  scrollable?: boolean\n}) {\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      {title ? (\n        <p className=\"shrink-0 px-3 pb-1 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground\">\n          {title}\n        </p>\n      ) : null}\n      <ul\n        className={cn('flex-1 py-1', scrollable ? 'overflow-y-auto' : '')}\n        role=\"list\"\n      >\n        {items.map((item) => {\n          const isActive = item.id === activeId\n          const hasChildren = Boolean(item.children && item.children.length > 0)\n          const parsedIcon = categoryIconNameSchema.safeParse(item.icon)\n          const iconName = parsedIcon.success ? parsedIcon.data : undefined\n          return (\n            <li key={item.id}>\n              <a\n                href={item.href ?? '#'}\n                className={cn(\n                  'group/item flex items-center gap-2.5 px-3 py-2 text-sm transition-colors',\n                  isActive\n                    ? 'bg-secondary font-semibold text-primary'\n                    : 'text-foreground hover:bg-secondary/60',\n                )}\n                onMouseEnter={() => onHover?.(item)}\n                onClick={() => {\n                  onHover?.(item)\n                  onNavigate?.()\n                }}\n                aria-current={isActive ? 'true' : undefined}\n              >\n                {level === 1 ? (\n                  item.image ? (\n                    <img\n                      src={item.image || undefined}\n                      alt=\"\"\n                      loading=\"lazy\"\n                      className=\"size-7 shrink-0 rounded object-cover\"\n                    />\n                  ) : (\n                    <CategoryIcon\n                      name={iconName}\n                      className=\"size-4 shrink-0 text-muted-foreground group-hover/item:text-primary\"\n                    />\n                  )\n                ) : null}\n                {level === 2 && item.image ? (\n                  <img\n                    src={item.image || undefined}\n                    alt=\"\"\n                    loading=\"lazy\"\n                    className=\"size-6 shrink-0 rounded object-cover\"\n                  />\n                ) : null}\n                <span className=\"flex-1 leading-tight\">{item.label}</span>\n                {item.badge ? (\n                  <span className=\"rounded bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground\">\n                    {item.badge}\n                  </span>\n                ) : null}\n                {hasChildren ? (\n                  <ChevronRight\n                    className={cn(\n                      'size-3.5 shrink-0 transition-transform',\n                      isActive ? 'text-primary' : 'text-muted-foreground',\n                    )}\n                  />\n                ) : null}\n              </a>\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n\nexport function MegaMenu({\n  categories,\n  collections,\n  onNavigate,\n  categoryColumnTitle = 'Comprar por categorías',\n  collectionsTitle = 'Colecciones',\n  viewAllLabel = 'Ver todas las colecciones',\n  collectionsHref = '/colecciones',\n  ariaLabel = 'Menú de categorías',\n}: MegaMenuProps) {\n  const [activeL1, setActiveL1] = useState<MenuItem>(categories[0])\n  const [activeL2, setActiveL2] = useState<MenuItem | undefined>(\n    categories[0]?.children?.[0],\n  )\n\n  const handleL1Hover = (item: MenuItem) => {\n    setActiveL1(item)\n    setActiveL2(item.children?.[0])\n  }\n\n  const l2Items = activeL1?.children ?? []\n  const l3Items = activeL2?.children ?? []\n\n  const featuredImage = activeL2?.image ?? activeL1?.image\n\n  return (\n    <div\n      className=\"flex h-[520px] overflow-hidden rounded-b-lg border border-t-0 bg-card shadow-xl\"\n      role=\"dialog\"\n      aria-label={ariaLabel}\n    >\n      <div className=\"flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r\">\n        <MegaMenuColumn\n          title={categoryColumnTitle}\n          items={categories}\n          activeId={activeL1?.id}\n          onHover={handleL1Hover}\n          onNavigate={onNavigate}\n          level={1}\n          scrollable\n        />\n      </div>\n\n      {l2Items.length > 0 ? (\n        <div className=\"flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r\">\n          <MegaMenuColumn\n            title={activeL1?.label}\n            items={l2Items}\n            activeId={activeL2?.id}\n            onHover={(item) => setActiveL2(item)}\n            onNavigate={onNavigate}\n            level={2}\n            scrollable\n          />\n        </div>\n      ) : null}\n\n      {l3Items.length > 0 ? (\n        <div className=\"flex w-52 min-w-0 shrink-0 flex-col overflow-hidden border-r\">\n          <MegaMenuColumn\n            title={activeL2?.label}\n            items={l3Items}\n            onNavigate={onNavigate}\n            level={3}\n            scrollable\n          />\n        </div>\n      ) : null}\n\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {featuredImage ? (\n          <a\n            href={activeL2?.href ?? activeL1?.href ?? '#'}\n            onClick={onNavigate}\n            className=\"group relative block h-44 shrink-0 overflow-hidden\"\n          >\n            <img\n              src={featuredImage || undefined}\n              alt={activeL2?.label ?? activeL1?.label ?? ''}\n              loading=\"lazy\"\n              className=\"size-full object-cover transition-transform duration-300 group-hover:scale-105\"\n            />\n            <div className=\"absolute inset-0 bg-gradient-to-t from-black/70 to-transparent\" />\n            <p className=\"absolute bottom-2 left-3 right-3 text-xs font-bold leading-tight text-white\">\n              {activeL2?.label ?? activeL1?.label}\n            </p>\n          </a>\n        ) : null}\n\n        <div className=\"flex flex-1 flex-col overflow-y-auto\">\n          <p className=\"shrink-0 px-3 pb-2 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground\">\n            {collectionsTitle}\n          </p>\n          <div className=\"flex flex-col gap-1 px-3 pb-3\">\n            {collections.map((col) => (\n              <a\n                key={col.id}\n                href={col.href}\n                className=\"group flex items-center gap-3 rounded-md p-1.5 transition-colors hover:bg-secondary/60\"\n              >\n                <img\n                  src={col.image || undefined}\n                  alt=\"\"\n                  loading=\"lazy\"\n                  className=\"size-12 shrink-0 rounded-md object-cover transition-transform duration-300 group-hover:scale-105\"\n                />\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-xs font-semibold leading-tight text-foreground\">\n                    {col.label}\n                  </p>\n                  {col.description ? (\n                    <p className=\"truncate text-[11px] text-muted-foreground\">\n                      {col.description}\n                    </p>\n                  ) : null}\n                </div>\n              </a>\n            ))}\n          </div>\n        </div>\n        {collectionsHref ? (\n          <div className=\"border-t p-3\">\n            <a\n              href={collectionsHref}\n              className=\"block rounded-md bg-secondary px-3 py-2.5 text-center text-xs font-bold text-foreground hover:bg-secondary/70\"\n            >\n              {viewAllLabel}\n            </a>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/navigation/mega-menu.mjs

@@ -0,0 +1,228 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { useState } from "react";
+import { z } from "zod";
+import {
+  collectionItemSchema,
+  menuItemSchema
+} from "../../../lib/types/menu.mjs";
+import { cn } from "../../../lib/utils.mjs";
+import { CategoryIcon, categoryIconNameSchema } from "./category-icon.mjs";
+const megaMenuPropsSchema = z.object({
+  categories: z.array(menuItemSchema),
+  collections: z.array(collectionItemSchema),
+  onNavigate: z.custom().optional(),
+  categoryColumnTitle: z.string().optional(),
+  collectionsTitle: z.string().optional(),
+  viewAllLabel: z.string().optional(),
+  collectionsHref: z.string().optional(),
+  ariaLabel: z.string().optional()
+});
+function MegaMenuColumn({
+  title,
+  items,
+  activeId,
+  onHover,
+  onNavigate,
+  level,
+  scrollable = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    title ? /* @__PURE__ */ jsx("p", { className: "shrink-0 px-3 pb-1 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: title }) : null,
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cn("flex-1 py-1", scrollable ? "overflow-y-auto" : ""),
+        role: "list",
+        children: items.map((item) => {
+          const isActive = item.id === activeId;
+          const hasChildren = Boolean(item.children && item.children.length > 0);
+          const parsedIcon = categoryIconNameSchema.safeParse(item.icon);
+          const iconName = parsedIcon.success ? parsedIcon.data : void 0;
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: item.href ?? "#",
+              className: cn(
+                "group/item flex items-center gap-2.5 px-3 py-2 text-sm transition-colors",
+                isActive ? "bg-secondary font-semibold text-primary" : "text-foreground hover:bg-secondary/60"
+              ),
+              onMouseEnter: () => onHover?.(item),
+              onClick: () => {
+                onHover?.(item);
+                onNavigate?.();
+              },
+              "aria-current": isActive ? "true" : void 0,
+              children: [
+                level === 1 ? item.image ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.image || void 0,
+                    alt: "",
+                    loading: "lazy",
+                    className: "size-7 shrink-0 rounded object-cover"
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  CategoryIcon,
+                  {
+                    name: iconName,
+                    className: "size-4 shrink-0 text-muted-foreground group-hover/item:text-primary"
+                  }
+                ) : null,
+                level === 2 && item.image ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: item.image || void 0,
+                    alt: "",
+                    loading: "lazy",
+                    className: "size-6 shrink-0 rounded object-cover"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx("span", { className: "flex-1 leading-tight", children: item.label }),
+                item.badge ? /* @__PURE__ */ jsx("span", { className: "rounded bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground", children: item.badge }) : null,
+                hasChildren ? /* @__PURE__ */ jsx(
+                  ChevronRight,
+                  {
+                    className: cn(
+                      "size-3.5 shrink-0 transition-transform",
+                      isActive ? "text-primary" : "text-muted-foreground"
+                    )
+                  }
+                ) : null
+              ]
+            }
+          ) }, item.id);
+        })
+      }
+    )
+  ] });
+}
+function MegaMenu({
+  categories,
+  collections,
+  onNavigate,
+  categoryColumnTitle = "Comprar por categor\xEDas",
+  collectionsTitle = "Colecciones",
+  viewAllLabel = "Ver todas las colecciones",
+  collectionsHref = "/colecciones",
+  ariaLabel = "Men\xFA de categor\xEDas"
+}) {
+  const [activeL1, setActiveL1] = useState(categories[0]);
+  const [activeL2, setActiveL2] = useState(
+    categories[0]?.children?.[0]
+  );
+  const handleL1Hover = (item) => {
+    setActiveL1(item);
+    setActiveL2(item.children?.[0]);
+  };
+  const l2Items = activeL1?.children ?? [];
+  const l3Items = activeL2?.children ?? [];
+  const featuredImage = activeL2?.image ?? activeL1?.image;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex h-[520px] overflow-hidden rounded-b-lg border border-t-0 bg-card shadow-xl",
+      role: "dialog",
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r", children: /* @__PURE__ */ jsx(
+          MegaMenuColumn,
+          {
+            title: categoryColumnTitle,
+            items: categories,
+            activeId: activeL1?.id,
+            onHover: handleL1Hover,
+            onNavigate,
+            level: 1,
+            scrollable: true
+          }
+        ) }),
+        l2Items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r", children: /* @__PURE__ */ jsx(
+          MegaMenuColumn,
+          {
+            title: activeL1?.label,
+            items: l2Items,
+            activeId: activeL2?.id,
+            onHover: (item) => setActiveL2(item),
+            onNavigate,
+            level: 2,
+            scrollable: true
+          }
+        ) }) : null,
+        l3Items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex w-52 min-w-0 shrink-0 flex-col overflow-hidden border-r", children: /* @__PURE__ */ jsx(
+          MegaMenuColumn,
+          {
+            title: activeL2?.label,
+            items: l3Items,
+            onNavigate,
+            level: 3,
+            scrollable: true
+          }
+        ) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          featuredImage ? /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: activeL2?.href ?? activeL1?.href ?? "#",
+              onClick: onNavigate,
+              className: "group relative block h-44 shrink-0 overflow-hidden",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: featuredImage || void 0,
+                    alt: activeL2?.label ?? activeL1?.label ?? "",
+                    loading: "lazy",
+                    className: "size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 to-transparent" }),
+                /* @__PURE__ */ jsx("p", { className: "absolute bottom-2 left-3 right-3 text-xs font-bold leading-tight text-white", children: activeL2?.label ?? activeL1?.label })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-y-auto", children: [
+            /* @__PURE__ */ jsx("p", { className: "shrink-0 px-3 pb-2 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: collectionsTitle }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 px-3 pb-3", children: collections.map((col) => /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: col.href,
+                className: "group flex items-center gap-3 rounded-md p-1.5 transition-colors hover:bg-secondary/60",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: col.image || void 0,
+                      alt: "",
+                      loading: "lazy",
+                      className: "size-12 shrink-0 rounded-md object-cover transition-transform duration-300 group-hover:scale-105"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold leading-tight text-foreground", children: col.label }),
+                    col.description ? /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: col.description }) : null
+                  ] })
+                ]
+              },
+              col.id
+            )) })
+          ] }),
+          collectionsHref ? /* @__PURE__ */ jsx("div", { className: "border-t p-3", children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: collectionsHref,
+              className: "block rounded-md bg-secondary px-3 py-2.5 text-center text-xs font-bold text-foreground hover:bg-secondary/70",
+              children: viewAllLabel
+            }
+          ) }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MegaMenu,
+  megaMenuPropsSchema
+};
+//# sourceMappingURL=mega-menu.mjs.map

package/dist/blocks/e-commerce/navigation/mega-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/e-commerce/navigation/mega-menu.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronRight } from 'lucide-react'\nimport { useState } from 'react'\nimport { z } from 'zod'\n\nimport {\n  collectionItemSchema,\n  menuItemSchema,\n  type MenuItem,\n} from '../../../lib/types/menu'\nimport { cn } from '../../../lib/utils'\nimport { CategoryIcon, categoryIconNameSchema } from './category-icon'\n\n/**\n * Three-level category flyout: L1 categories, L2 subcategories, L3 sub-sub\n * categories, plus a right panel with a featured image and collection links.\n *\n * Framework-agnostic and prop-driven: plain anchors replace router links,\n * `loading=\"lazy\"` images replace next/image, and Spanish copy/hrefs are\n * optional props with ES defaults. `onNavigate` lets the tenant close the\n * flyout on navigation; `collectionsHref` controls the \"view all\" link\n * (pass `''` to hide it).\n *\n * Ported from the legacy `@thorprovider/components` navigation library\n * (source: branch `feat/storefronts`).\n */\n\nexport const megaMenuPropsSchema = z.object({\n  categories: z.array(menuItemSchema),\n  collections: z.array(collectionItemSchema),\n  onNavigate: z.custom<() => void>().optional(),\n  categoryColumnTitle: z.string().optional(),\n  collectionsTitle: z.string().optional(),\n  viewAllLabel: z.string().optional(),\n  collectionsHref: z.string().optional(),\n  ariaLabel: z.string().optional(),\n})\n\nexport type MegaMenuProps = z.infer<typeof megaMenuPropsSchema>\n\nfunction MegaMenuColumn({\n  title,\n  items,\n  activeId,\n  onHover,\n  onNavigate,\n  level,\n  scrollable = false,\n}: {\n  title?: string\n  items: MenuItem[]\n  activeId?: string\n  onHover?: (item: MenuItem) => void\n  onNavigate?: () => void\n  level: 1 | 2 | 3\n  scrollable?: boolean\n}) {\n  return (\n    <div className=\"flex min-h-0 flex-1 flex-col\">\n      {title ? (\n        <p className=\"shrink-0 px-3 pb-1 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground\">\n          {title}\n        </p>\n      ) : null}\n      <ul\n        className={cn('flex-1 py-1', scrollable ? 'overflow-y-auto' : '')}\n        role=\"list\"\n      >\n        {items.map((item) => {\n          const isActive = item.id === activeId\n          const hasChildren = Boolean(item.children && item.children.length > 0)\n          const parsedIcon = categoryIconNameSchema.safeParse(item.icon)\n          const iconName = parsedIcon.success ? parsedIcon.data : undefined\n          return (\n            <li key={item.id}>\n              <a\n                href={item.href ?? '#'}\n                className={cn(\n                  'group/item flex items-center gap-2.5 px-3 py-2 text-sm transition-colors',\n                  isActive\n                    ? 'bg-secondary font-semibold text-primary'\n                    : 'text-foreground hover:bg-secondary/60',\n                )}\n                onMouseEnter={() => onHover?.(item)}\n                onClick={() => {\n                  onHover?.(item)\n                  onNavigate?.()\n                }}\n                aria-current={isActive ? 'true' : undefined}\n              >\n                {level === 1 ? (\n                  item.image ? (\n                    <img\n                      src={item.image || undefined}\n                      alt=\"\"\n                      loading=\"lazy\"\n                      className=\"size-7 shrink-0 rounded object-cover\"\n                    />\n                  ) : (\n                    <CategoryIcon\n                      name={iconName}\n                      className=\"size-4 shrink-0 text-muted-foreground group-hover/item:text-primary\"\n                    />\n                  )\n                ) : null}\n                {level === 2 && item.image ? (\n                  <img\n                    src={item.image || undefined}\n                    alt=\"\"\n                    loading=\"lazy\"\n                    className=\"size-6 shrink-0 rounded object-cover\"\n                  />\n                ) : null}\n                <span className=\"flex-1 leading-tight\">{item.label}</span>\n                {item.badge ? (\n                  <span className=\"rounded bg-primary px-1.5 py-0.5 text-[10px] font-bold text-primary-foreground\">\n                    {item.badge}\n                  </span>\n                ) : null}\n                {hasChildren ? (\n                  <ChevronRight\n                    className={cn(\n                      'size-3.5 shrink-0 transition-transform',\n                      isActive ? 'text-primary' : 'text-muted-foreground',\n                    )}\n                  />\n                ) : null}\n              </a>\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n\nexport function MegaMenu({\n  categories,\n  collections,\n  onNavigate,\n  categoryColumnTitle = 'Comprar por categorías',\n  collectionsTitle = 'Colecciones',\n  viewAllLabel = 'Ver todas las colecciones',\n  collectionsHref = '/colecciones',\n  ariaLabel = 'Menú de categorías',\n}: MegaMenuProps) {\n  const [activeL1, setActiveL1] = useState<MenuItem>(categories[0])\n  const [activeL2, setActiveL2] = useState<MenuItem | undefined>(\n    categories[0]?.children?.[0],\n  )\n\n  const handleL1Hover = (item: MenuItem) => {\n    setActiveL1(item)\n    setActiveL2(item.children?.[0])\n  }\n\n  const l2Items = activeL1?.children ?? []\n  const l3Items = activeL2?.children ?? []\n\n  const featuredImage = activeL2?.image ?? activeL1?.image\n\n  return (\n    <div\n      className=\"flex h-[520px] overflow-hidden rounded-b-lg border border-t-0 bg-card shadow-xl\"\n      role=\"dialog\"\n      aria-label={ariaLabel}\n    >\n      <div className=\"flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r\">\n        <MegaMenuColumn\n          title={categoryColumnTitle}\n          items={categories}\n          activeId={activeL1?.id}\n          onHover={handleL1Hover}\n          onNavigate={onNavigate}\n          level={1}\n          scrollable\n        />\n      </div>\n\n      {l2Items.length > 0 ? (\n        <div className=\"flex w-56 min-w-0 shrink-0 flex-col overflow-hidden border-r\">\n          <MegaMenuColumn\n            title={activeL1?.label}\n            items={l2Items}\n            activeId={activeL2?.id}\n            onHover={(item) => setActiveL2(item)}\n            onNavigate={onNavigate}\n            level={2}\n            scrollable\n          />\n        </div>\n      ) : null}\n\n      {l3Items.length > 0 ? (\n        <div className=\"flex w-52 min-w-0 shrink-0 flex-col overflow-hidden border-r\">\n          <MegaMenuColumn\n            title={activeL2?.label}\n            items={l3Items}\n            onNavigate={onNavigate}\n            level={3}\n            scrollable\n          />\n        </div>\n      ) : null}\n\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {featuredImage ? (\n          <a\n            href={activeL2?.href ?? activeL1?.href ?? '#'}\n            onClick={onNavigate}\n            className=\"group relative block h-44 shrink-0 overflow-hidden\"\n          >\n            <img\n              src={featuredImage || undefined}\n              alt={activeL2?.label ?? activeL1?.label ?? ''}\n              loading=\"lazy\"\n              className=\"size-full object-cover transition-transform duration-300 group-hover:scale-105\"\n            />\n            <div className=\"absolute inset-0 bg-gradient-to-t from-black/70 to-transparent\" />\n            <p className=\"absolute bottom-2 left-3 right-3 text-xs font-bold leading-tight text-white\">\n              {activeL2?.label ?? activeL1?.label}\n            </p>\n          </a>\n        ) : null}\n\n        <div className=\"flex flex-1 flex-col overflow-y-auto\">\n          <p className=\"shrink-0 px-3 pb-2 pt-3 text-[10px] font-bold uppercase tracking-widest text-muted-foreground\">\n            {collectionsTitle}\n          </p>\n          <div className=\"flex flex-col gap-1 px-3 pb-3\">\n            {collections.map((col) => (\n              <a\n                key={col.id}\n                href={col.href}\n                className=\"group flex items-center gap-3 rounded-md p-1.5 transition-colors hover:bg-secondary/60\"\n              >\n                <img\n                  src={col.image || undefined}\n                  alt=\"\"\n                  loading=\"lazy\"\n                  className=\"size-12 shrink-0 rounded-md object-cover transition-transform duration-300 group-hover:scale-105\"\n                />\n                <div className=\"min-w-0\">\n                  <p className=\"truncate text-xs font-semibold leading-tight text-foreground\">\n                    {col.label}\n                  </p>\n                  {col.description ? (\n                    <p className=\"truncate text-[11px] text-muted-foreground\">\n                      {col.description}\n                    </p>\n                  ) : null}\n                </div>\n              </a>\n            ))}\n          </div>\n        </div>\n        {collectionsHref ? (\n          <div className=\"border-t p-3\">\n            <a\n              href={collectionsHref}\n              className=\"block rounded-md bg-secondary px-3 py-2.5 text-center text-xs font-bold text-foreground hover:bg-secondary/70\"\n            >\n              {viewAllLabel}\n            </a>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}"],"mappings":"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","names":[]}

package/dist/blocks/e-commerce/navigation/mobile-bottom-nav.d.ts

@@ -0,0 +1,71 @@
+import { z } from 'zod';
+export declare const mobileBottomNavItemSchema: z.ZodObject<{
+    id: z.ZodOptional<z.ZodString>;
+    label: z.ZodString;
+    href: z.ZodString;
+    icon: z.ZodOptional<z.ZodEnum<["wrench", "bolt", "tree", "refrigerator", "wind", "droplet", "zap", "hard-hat", "car", "utensils", "boxes", "sofa", "shield", "sun", "chef-hat", "tractor", "store", "home"]>>;
+}, "strip", z.ZodTypeAny, {
+    label: string;
+    href: string;
+    id?: string | undefined;
+    icon?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
+}, {
+    label: string;
+    href: string;
+    id?: string | undefined;
+    icon?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
+}>;
+export type MobileBottomNavItem = z.infer<typeof mobileBottomNavItemSchema>;
+export declare const mobileBottomNavPropsSchema: z.ZodObject<{
+    items: z.ZodArray<z.ZodObject<{
+        id: z.ZodOptional<z.ZodString>;
+        label: z.ZodString;
+        href: z.ZodString;
+        icon: z.ZodOptional<z.ZodEnum<["wrench", "bolt", "tree", "refrigerator", "wind", "droplet", "zap", "hard-hat", "car", "utensils", "boxes", "sofa", "shield", "sun", "chef-hat", "tractor", "store", "home"]>>;
+    }, "strip", z.ZodTypeAny, {
+        label: string;
+        href: string;
+        id?: string | undefined;
+        icon?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
+    }, {
+        label: string;
+        href: string;
+        id?: string | undefined;
+        icon?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
+    }>, "many">;
+    currentHref: z.ZodOptional<z.ZodString>;
+    ariaLabel: z.ZodOptional<z.ZodString>;
+    className: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    items: {
+        label: string;
+        href: string;
+        id?: string | undefined;
+        icon?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
+    }[];
+    className?: string | undefined;
+    ariaLabel?: string | undefined;
+    currentHref?: string | undefined;
+}, {
+    items: {
+        label: string;
+        href: string;
+        id?: string | undefined;
+        icon?: "tree" | "home" | "wrench" | "bolt" | "refrigerator" | "wind" | "droplet" | "zap" | "hard-hat" | "car" | "utensils" | "boxes" | "sofa" | "shield" | "sun" | "chef-hat" | "tractor" | "store" | undefined;
+    }[];
+    className?: string | undefined;
+    ariaLabel?: string | undefined;
+    currentHref?: string | undefined;
+}>;
+export type MobileBottomNavProps = z.infer<typeof mobileBottomNavPropsSchema>;
+/**
+ * Mobile-only bottom navigation offering the primary destinations.
+ *
+ * Framework-agnostic and prop-driven: plain anchors (no router). Hidden at
+ * `md` and up; offsets the iOS home indicator via `env(safe-area-inset-bottom)`;
+ * each destination meets the 44px minimum touch target. The current
+ * destination is marked with `aria-current="page"` and a non-colour cue (weight
+ * + indicator bar), never colour alone.
+ */
+export declare function MobileBottomNav({ items, currentHref, ariaLabel, className, }: MobileBottomNavProps): import("react").JSX.Element | null;
+//# sourceMappingURL=mobile-bottom-nav.d.ts.map

package/dist/blocks/e-commerce/navigation/mobile-bottom-nav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-bottom-nav.d.ts","sourceRoot":"","sources":["../../../../src/blocks/e-commerce/navigation/mobile-bottom-nav.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAKvB,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;EAKpC,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAE3E,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKrC,CAAA;AAEF,MAAM,MAAM,oBAAoB,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,0BAA0B,CAAC,CAAA;AAE7E;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,WAAW,EACX,SAAqB,EACrB,SAAS,GACV,EAAE,oBAAoB,sCAwCtB"}