@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/mega-menu-universal/menu.mjs

@@ -0,0 +1,325 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, cn } from "@thorprovider/blocks";
+import {
+  useEffect,
+  useId,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { resolveConfig } from "./config.mjs";
+import { resolvePresentation } from "./presentation.mjs";
+import { findNode, findPath, hasChildren, sortNodes } from "./taxonomy.mjs";
+import { IDLE_INTENT, intentReducer } from "./intent.mjs";
+import { formatLabel } from "./labels.mjs";
+import { DesktopPanel } from "./desktop-panel.mjs";
+import { MobileMenu } from "./mobile-menu.mjs";
+import { CategoryLink, CommercialBadge, hoverSurface } from "./category-parts.mjs";
+import { ChevronIcon, MenuIcon } from "./icons.mjs";
+const barItem = "h-auto min-h-9 gap-1.5 px-3 py-2 text-sm font-medium";
+function MegaMenu({
+  categories,
+  promotions = [],
+  config: configInput,
+  labels,
+  onNavigate,
+  onOpenChange
+}) {
+  const { config } = useMemo(() => resolveConfig(configInput), [configInput]);
+  const resolved = useMemo(
+    () => resolvePresentation(categories, config, promotions),
+    [categories, config, promotions]
+  );
+  const roots = useMemo(() => sortNodes(categories), [categories]);
+  const [intent, dispatch] = useReducer(intentReducer, IDLE_INTENT);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const panelId = useId();
+  const mobileId = useId();
+  const rootRef = useRef(null);
+  const panelRef = useRef(null);
+  const mobileTriggerRef = useRef(null);
+  const triggerRefs = useRef(/* @__PURE__ */ new Map());
+  const openedVia = useRef("hover");
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const focusFirstOnOpen = useRef(false);
+  const notify = useRef(onOpenChange);
+  notify.current = onOpenChange;
+  const active = intent.activeId ? findNode(categories, intent.activeId) ?? null : null;
+  const isEmpty = categories.length === 0;
+  const clearOpenTimer = () => {
+    if (openTimer.current !== null) {
+      window.clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+  };
+  const clearCloseTimer = () => {
+    if (closeTimer.current !== null) {
+      window.clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+  const closeNow = () => {
+    clearOpenTimer();
+    clearCloseTimer();
+    dispatch({ type: "close-now" });
+  };
+  const cancelClose = () => {
+    clearCloseTimer();
+    dispatch({ type: "cancel-close" });
+  };
+  const scheduleClose = (force = false) => {
+    clearOpenTimer();
+    if (intent.activeId === null) return;
+    if (!force && openedVia.current !== "hover") return;
+    dispatch({ type: "request-close" });
+    clearCloseTimer();
+    closeTimer.current = window.setTimeout(() => dispatch({ type: "commit-close" }), config.closeDelayMs);
+  };
+  const scheduleOpen = (id) => {
+    if (!config.openOnHover) return;
+    clearCloseTimer();
+    dispatch({ type: "cancel-close" });
+    if (intent.activeId === id) return;
+    dispatch({ type: "request-open", id });
+    clearOpenTimer();
+    openTimer.current = window.setTimeout(() => dispatch({ type: "settle" }), config.openDelayMs);
+  };
+  const openNow = (id, via) => {
+    clearOpenTimer();
+    clearCloseTimer();
+    openedVia.current = via;
+    dispatch({ type: "open-now", id, via });
+  };
+  const toggle = (id) => {
+    if (intent.activeId === id) closeNow();
+    else {
+      openNow(id, "click");
+      focusFirstOnOpen.current = true;
+    }
+  };
+  const focusTrigger = (id) => {
+    if (!id) return;
+    triggerRefs.current.get(id)?.focus();
+  };
+  const navigate = (node) => {
+    onNavigate?.(node, findPath(categories, node.id));
+    closeNow();
+    setMobileOpen(false);
+  };
+  const handleTriggerKeyDown = (event, id) => {
+    if (event.key !== "ArrowDown") return;
+    event.preventDefault();
+    if (intent.activeId === id) {
+      panelRef.current?.querySelector("a[href], button")?.focus();
+      return;
+    }
+    openNow(id, "keyboard");
+    focusFirstOnOpen.current = true;
+  };
+  const handleBlur = (event) => {
+    const next = event.relatedTarget;
+    if (next && rootRef.current?.contains(next)) return;
+    if (intent.activeId !== null) scheduleClose(true);
+  };
+  useEffect(() => {
+    if (!focusFirstOnOpen.current) return;
+    focusFirstOnOpen.current = false;
+    panelRef.current?.querySelector("a[href], button")?.focus();
+  }, [intent.activeId]);
+  useEffect(() => {
+    if (intent.activeId === null && !mobileOpen) return;
+    const handleEscape = (event) => {
+      if (event.key !== "Escape") return;
+      if (mobileOpen) {
+        setMobileOpen(false);
+        mobileTriggerRef.current?.focus();
+        return;
+      }
+      const id = intent.activeId;
+      const focusInside = rootRef.current?.contains(document.activeElement) ?? false;
+      closeNow();
+      if (id && focusInside) focusTrigger(id);
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [intent.activeId, mobileOpen]);
+  useEffect(() => {
+    if (intent.activeId === null) return;
+    const handlePointerDown = (event) => {
+      if (rootRef.current && !rootRef.current.contains(event.target)) closeNow();
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [intent.activeId]);
+  const firstRun = useRef(true);
+  useEffect(() => {
+    if (firstRun.current) {
+      firstRun.current = false;
+      return;
+    }
+    notify.current?.(intent.activeId !== null, active);
+  }, [intent.activeId]);
+  useEffect(() => {
+    if (intent.activeId && !findNode(categories, intent.activeId)) {
+      dispatch({ type: "close-now" });
+    }
+  }, [categories, intent.activeId]);
+  useEffect(() => {
+    return () => {
+      if (openTimer.current !== null) window.clearTimeout(openTimer.current);
+      if (closeTimer.current !== null) window.clearTimeout(closeTimer.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      "data-qa": "mega-menu",
+      dir: config.direction,
+      className: "@container",
+      onBlur: handleBlur,
+      children: isEmpty ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-dashed border-border p-4 text-start", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: labels.empty }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: labels.emptyHint })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative hidden @2xl:block", children: [
+          /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-1.5", "aria-label": labels.menuTitle, children: roots.map((node) => {
+            const isActive = active?.id === node.id;
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "flex items-center gap-1",
+                onPointerEnter: () => scheduleOpen(node.id),
+                onPointerLeave: () => scheduleClose(),
+                children: [
+                  hasChildren(node) ? /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "sm",
+                      ref: (element) => {
+                        triggerRefs.current.set(node.id, element);
+                      },
+                      "aria-expanded": isActive,
+                      "aria-controls": panelId,
+                      onClick: () => toggle(node.id),
+                      onKeyDown: (event) => handleTriggerKeyDown(event, node.id),
+                      className: cn(barItem, hoverSurface, isActive && "bg-secondary text-primary"),
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-start", children: node.label }),
+                        /* @__PURE__ */ jsx(
+                          ChevronIcon,
+                          {
+                            className: cn(
+                              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
+                              isActive && "rotate-180 text-primary"
+                            )
+                          }
+                        )
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    CategoryLink,
+                    {
+                      node,
+                      onNavigate: navigate,
+                      className: cn(barItem, "text-foreground")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(CommercialBadge, { node, config, labels })
+                ]
+              },
+              node.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: panelRef,
+              id: panelId,
+              "data-qa": "panel",
+              role: "group",
+              "aria-label": active ? formatLabel(labels.panelLabel, { name: active.label }) : labels.menuTitle,
+              hidden: !active,
+              className: cn(
+                "absolute top-full z-20 mt-2 max-h-96 overflow-y-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-lg",
+                resolved.presentation === "cascade" ? "start-0 w-fit max-w-full" : "inset-x-0"
+              ),
+              onPointerEnter: cancelClose,
+              onPointerLeave: () => scheduleClose(),
+              children: active ? /* @__PURE__ */ jsx(
+                DesktopPanel,
+                {
+                  active,
+                  presentation: resolved.presentation,
+                  config,
+                  labels,
+                  promotions,
+                  onNavigate: navigate
+                }
+              ) : null
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "@2xl:hidden", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              ref: mobileTriggerRef,
+              "aria-expanded": mobileOpen,
+              "aria-controls": mobileId,
+              "data-qa": "mobile-trigger",
+              onClick: () => {
+                closeNow();
+                setMobileOpen((current) => !current);
+              },
+              className: cn(
+                "w-full min-h-11 justify-between gap-2 border-border bg-card px-3 py-2 text-sm font-medium text-foreground",
+                hoverSurface
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(MenuIcon, { className: "h-4 w-4 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "break-words text-start", children: labels.menuTrigger })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  ChevronIcon,
+                  {
+                    className: cn(
+                      "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
+                      mobileOpen && "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { id: mobileId, "data-qa": "mobile-panel", hidden: !mobileOpen, className: "mt-2", children: mobileOpen ? /* @__PURE__ */ jsx(
+            MobileMenu,
+            {
+              categories: roots,
+              pattern: config.mobilePattern,
+              config,
+              labels,
+              onNavigate: navigate,
+              onClose: () => {
+                setMobileOpen(false);
+                mobileTriggerRef.current?.focus();
+              }
+            }
+          ) : null })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  MegaMenu
+};
+//# sourceMappingURL=menu.mjs.map

package/dist/blocks/designs/mega-menu-universal/menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/blocks/designs/mega-menu-universal/menu.tsx"],"sourcesContent":["'use client'\n\nimport { Button, cn } from '@thorprovider/blocks'\nimport {\n  useEffect,\n  useId,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type FocusEvent,\n  type KeyboardEvent,\n} from 'react'\n\nimport type { CategoryNode, MenuConfig, MenuLabels, Promotion } from './contracts'\nimport { resolveConfig } from './config'\nimport { resolvePresentation } from './presentation'\nimport { findNode, findPath, hasChildren, sortNodes } from './taxonomy'\nimport { IDLE_INTENT, intentReducer, type OpenSource } from './intent'\nimport { formatLabel } from './labels'\nimport { DesktopPanel } from './desktop-panel'\nimport { MobileMenu } from './mobile-menu'\nimport { CategoryLink, CommercialBadge, hoverSurface } from './category-parts'\nimport { ChevronIcon, MenuIcon } from './icons'\n\nexport type MegaMenuProps = {\n  categories: CategoryNode[]\n  promotions?: Promotion[]\n  config?: Partial<MenuConfig>\n  labels: MenuLabels\n  onNavigate?: (node: CategoryNode, path: CategoryNode[]) => void\n  onOpenChange?: (open: boolean, node: CategoryNode | null) => void\n}\n\nconst barItem = 'h-auto min-h-9 gap-1.5 px-3 py-2 text-sm font-medium'\n\n/**\n * Universal commerce mega menu. One instance adapts to the catalog and the\n * configuration: four desktop presentations, drill-down or accordion on\n * mobile, hover + click + keyboard on desktop, and no landmark of its own (the\n * host shell owns the `<nav>`).\n */\nexport function MegaMenu({\n  categories,\n  promotions = [],\n  config: configInput,\n  labels,\n  onNavigate,\n  onOpenChange,\n}: MegaMenuProps) {\n  const { config } = useMemo(() => resolveConfig(configInput), [configInput])\n  const resolved = useMemo(\n    () => resolvePresentation(categories, config, promotions),\n    [categories, config, promotions],\n  )\n  const roots = useMemo(() => sortNodes(categories), [categories])\n\n  const [intent, dispatch] = useReducer(intentReducer, IDLE_INTENT)\n  const [mobileOpen, setMobileOpen] = useState(false)\n\n  const panelId = useId()\n  const mobileId = useId()\n  const rootRef = useRef<HTMLDivElement>(null)\n  const panelRef = useRef<HTMLDivElement>(null)\n  const mobileTriggerRef = useRef<HTMLButtonElement>(null)\n  const triggerRefs = useRef(new Map<string, HTMLButtonElement | null>())\n  const openedVia = useRef<OpenSource>('hover')\n  const openTimer = useRef<number | null>(null)\n  const closeTimer = useRef<number | null>(null)\n  const focusFirstOnOpen = useRef(false)\n  const notify = useRef(onOpenChange)\n  notify.current = onOpenChange\n\n  const active = intent.activeId ? findNode(categories, intent.activeId) ?? null : null\n  const isEmpty = categories.length === 0\n\n  const clearOpenTimer = () => {\n    if (openTimer.current !== null) {\n      window.clearTimeout(openTimer.current)\n      openTimer.current = null\n    }\n  }\n\n  const clearCloseTimer = () => {\n    if (closeTimer.current !== null) {\n      window.clearTimeout(closeTimer.current)\n      closeTimer.current = null\n    }\n  }\n\n  const closeNow = () => {\n    clearOpenTimer()\n    clearCloseTimer()\n    dispatch({ type: 'close-now' })\n  }\n\n  const cancelClose = () => {\n    clearCloseTimer()\n    dispatch({ type: 'cancel-close' })\n  }\n\n  const scheduleClose = (force = false) => {\n    clearOpenTimer()\n    if (intent.activeId === null) return\n    if (!force && openedVia.current !== 'hover') return\n    dispatch({ type: 'request-close' })\n    clearCloseTimer()\n    closeTimer.current = window.setTimeout(() => dispatch({ type: 'commit-close' }), config.closeDelayMs)\n  }\n\n  const scheduleOpen = (id: string) => {\n    if (!config.openOnHover) return\n    clearCloseTimer()\n    dispatch({ type: 'cancel-close' })\n    if (intent.activeId === id) return\n    dispatch({ type: 'request-open', id })\n    clearOpenTimer()\n    openTimer.current = window.setTimeout(() => dispatch({ type: 'settle' }), config.openDelayMs)\n  }\n\n  const openNow = (id: string, via: OpenSource) => {\n    clearOpenTimer()\n    clearCloseTimer()\n    openedVia.current = via\n    dispatch({ type: 'open-now', id, via })\n  }\n\n  const toggle = (id: string) => {\n    if (intent.activeId === id) closeNow()\n    else {\n      openNow(id, 'click')\n      focusFirstOnOpen.current = true\n    }\n  }\n\n  const focusTrigger = (id: string | null) => {\n    if (!id) return\n    triggerRefs.current.get(id)?.focus()\n  }\n\n  const navigate = (node: CategoryNode) => {\n    onNavigate?.(node, findPath(categories, node.id))\n    closeNow()\n    setMobileOpen(false)\n  }\n\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>, id: string) => {\n    if (event.key !== 'ArrowDown') return\n    event.preventDefault()\n    if (intent.activeId === id) {\n      panelRef.current?.querySelector<HTMLElement>('a[href], button')?.focus()\n      return\n    }\n    openNow(id, 'keyboard')\n    focusFirstOnOpen.current = true\n  }\n\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    const next = event.relatedTarget as Node | null\n    if (next && rootRef.current?.contains(next)) return\n    if (intent.activeId !== null) scheduleClose(true)\n  }\n\n  useEffect(() => {\n    if (!focusFirstOnOpen.current) return\n    focusFirstOnOpen.current = false\n    panelRef.current?.querySelector<HTMLElement>('a[href], button')?.focus()\n  }, [intent.activeId])\n\n  useEffect(() => {\n    if (intent.activeId === null && !mobileOpen) return\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key !== 'Escape') return\n      if (mobileOpen) {\n        setMobileOpen(false)\n        mobileTriggerRef.current?.focus()\n        return\n      }\n      const id = intent.activeId\n      const focusInside = rootRef.current?.contains(document.activeElement) ?? false\n      closeNow()\n      if (id && focusInside) focusTrigger(id)\n    }\n    document.addEventListener('keydown', handleEscape)\n    return () => document.removeEventListener('keydown', handleEscape)\n  }, [intent.activeId, mobileOpen])\n\n  useEffect(() => {\n    if (intent.activeId === null) return\n    const handlePointerDown = (event: PointerEvent) => {\n      if (rootRef.current && !rootRef.current.contains(event.target as Node)) closeNow()\n    }\n    document.addEventListener('pointerdown', handlePointerDown)\n    return () => document.removeEventListener('pointerdown', handlePointerDown)\n  }, [intent.activeId])\n\n  const firstRun = useRef(true)\n  useEffect(() => {\n    if (firstRun.current) {\n      firstRun.current = false\n      return\n    }\n    notify.current?.(intent.activeId !== null, active)\n  }, [intent.activeId])\n\n  // A host refetch can remove the open category: reconcile instead of leaving a\n  // panel pointing at a node that no longer exists.\n  useEffect(() => {\n    if (intent.activeId && !findNode(categories, intent.activeId)) {\n      dispatch({ type: 'close-now' })\n    }\n  }, [categories, intent.activeId])\n\n  useEffect(() => {\n    return () => {\n      if (openTimer.current !== null) window.clearTimeout(openTimer.current)\n      if (closeTimer.current !== null) window.clearTimeout(closeTimer.current)\n    }\n  }, [])\n\n  return (\n    <div\n      ref={rootRef}\n      data-qa=\"mega-menu\"\n      dir={config.direction}\n      className=\"@container\"\n      onBlur={handleBlur}\n    >\n      {isEmpty ? (\n        <div className=\"rounded-lg border border-dashed border-border p-4 text-start\">\n          <p className=\"text-sm font-semibold text-foreground\">{labels.empty}</p>\n          <p className=\"mt-1 text-sm text-muted-foreground\">{labels.emptyHint}</p>\n        </div>\n      ) : (\n        <>\n          <div className=\"relative hidden @2xl:block\">\n            <ul className=\"flex flex-wrap items-center gap-1.5\" aria-label={labels.menuTitle}>\n              {roots.map((node) => {\n                const isActive = active?.id === node.id\n                return (\n                  <li\n                    key={node.id}\n                    className=\"flex items-center gap-1\"\n                    onPointerEnter={() => scheduleOpen(node.id)}\n                    onPointerLeave={() => scheduleClose()}\n                  >\n                    {hasChildren(node) ? (\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        ref={(element) => {\n                          triggerRefs.current.set(node.id, element)\n                        }}\n                        aria-expanded={isActive}\n                        aria-controls={panelId}\n                        onClick={() => toggle(node.id)}\n                        onKeyDown={(event) => handleTriggerKeyDown(event, node.id)}\n                        className={cn(barItem, hoverSurface, isActive && 'bg-secondary text-primary')}\n                      >\n                        <span className=\"min-w-0 break-words text-start\">{node.label}</span>\n                        <ChevronIcon\n                          className={cn(\n                            'h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none',\n                            isActive && 'rotate-180 text-primary',\n                          )}\n                        />\n                      </Button>\n                    ) : (\n                      <CategoryLink\n                        node={node}\n                        onNavigate={navigate}\n                        className={cn(barItem, 'text-foreground')}\n                      />\n                    )}\n                    <CommercialBadge node={node} config={config} labels={labels} />\n                  </li>\n                )\n              })}\n            </ul>\n            <div\n              ref={panelRef}\n              id={panelId}\n              data-qa=\"panel\"\n              role=\"group\"\n              aria-label={\n                active ? formatLabel(labels.panelLabel, { name: active.label }) : labels.menuTitle\n              }\n              hidden={!active}\n              className={cn(\n                'absolute top-full z-20 mt-2 max-h-96 overflow-y-auto rounded-xl border border-border bg-popover text-popover-foreground shadow-lg',\n                resolved.presentation === 'cascade' ? 'start-0 w-fit max-w-full' : 'inset-x-0',\n              )}\n              onPointerEnter={cancelClose}\n              onPointerLeave={() => scheduleClose()}\n            >\n              {active ? (\n                <DesktopPanel\n                  active={active}\n                  presentation={resolved.presentation}\n                  config={config}\n                  labels={labels}\n                  promotions={promotions}\n                  onNavigate={navigate}\n                />\n              ) : null}\n            </div>\n          </div>\n\n          <div className=\"@2xl:hidden\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              ref={mobileTriggerRef}\n              aria-expanded={mobileOpen}\n              aria-controls={mobileId}\n              data-qa=\"mobile-trigger\"\n              onClick={() => {\n                closeNow()\n                setMobileOpen((current) => !current)\n              }}\n              className={cn(\n                'w-full min-h-11 justify-between gap-2 border-border bg-card px-3 py-2 text-sm font-medium text-foreground',\n                hoverSurface,\n              )}\n            >\n              <span className=\"flex min-w-0 items-center gap-2\">\n                <MenuIcon className=\"h-4 w-4 shrink-0\" />\n                <span className=\"break-words text-start\">{labels.menuTrigger}</span>\n              </span>\n              <ChevronIcon\n                className={cn(\n                  'h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none',\n                  mobileOpen && 'rotate-180',\n                )}\n              />\n            </Button>\n            <div id={mobileId} data-qa=\"mobile-panel\" hidden={!mobileOpen} className=\"mt-2\">\n              {mobileOpen ? (\n                <MobileMenu\n                  categories={roots}\n                  pattern={config.mobilePattern}\n                  config={config}\n                  labels={labels}\n                  onNavigate={navigate}\n                  onClose={() => {\n                    setMobileOpen(false)\n                    mobileTriggerRef.current?.focus()\n                  }}\n                />\n              ) : null}\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/mega-menu-universal/mobile-menu.d.ts

@@ -0,0 +1,12 @@
+import type { CategoryNode, MenuConfig, MenuLabels, MobilePattern } from './contracts';
+import { type NavigateHandler } from './category-parts';
+export type MobileMenuProps = {
+    categories: CategoryNode[];
+    pattern: MobilePattern;
+    config: MenuConfig;
+    labels: MenuLabels;
+    onNavigate: NavigateHandler;
+    onClose: () => void;
+};
+export declare function MobileMenu(props: MobileMenuProps): import("react").JSX.Element;
+//# sourceMappingURL=mobile-menu.d.ts.map

package/dist/blocks/designs/mega-menu-universal/mobile-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-menu.d.ts","sourceRoot":"","sources":["../../../../src/blocks/designs/mega-menu-universal/mobile-menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAKtF,OAAO,EAAyC,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAE9F,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,EAAE,YAAY,EAAE,CAAA;IAC1B,OAAO,EAAE,aAAa,CAAA;IACtB,MAAM,EAAE,UAAU,CAAA;IAClB,MAAM,EAAE,UAAU,CAAA;IAClB,UAAU,EAAE,eAAe,CAAA;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAoQD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD"}

package/dist/blocks/designs/mega-menu-universal/mobile-menu.js

@@ -0,0 +1,258 @@
+"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 mobile_menu_exports = {};
+__export(mobile_menu_exports, {
+  MobileMenu: () => MobileMenu
+});
+module.exports = __toCommonJS(mobile_menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blocks = require("@thorprovider/blocks");
+var import_react = require("react");
+var import_drilldown = require("./drilldown.js");
+var import_labels = require("./labels.js");
+var import_taxonomy = require("./taxonomy.js");
+var import_icons = require("./icons.js");
+var import_category_parts = require("./category-parts.js");
+const rowLink = "min-w-0 flex-1 px-2 py-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function MobileHeader({
+  title,
+  labels,
+  onBack,
+  onClose,
+  headingRef
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-1 border-b border-border p-2", children: [
+    onBack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_blocks.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: onBack,
+        "aria-label": labels.back,
+        className: (0, import_blocks.cn)("order-1 shrink-0 text-muted-foreground", import_category_parts.hoverSurface),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.BackIcon, { className: "h-4 w-4 rtl:rotate-180" })
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_blocks.Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        onClick: onClose,
+        "aria-label": labels.close,
+        className: (0, import_blocks.cn)("order-3 shrink-0 text-muted-foreground", import_category_parts.hoverSurface),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseIcon, { className: "h-4 w-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "p",
+      {
+        ref: headingRef,
+        tabIndex: -1,
+        className: "order-2 min-w-0 flex-1 break-words px-1 py-1.5 text-sm font-semibold text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        children: title
+      }
+    )
+  ] });
+}
+function DrillDownMenu({ categories, config, labels, onNavigate, onClose }) {
+  const [state, dispatch] = (0, import_react.useReducer)(import_drilldown.drillReducer, import_drilldown.EMPTY_DRILL);
+  const trail = (0, import_drilldown.trailNodes)(categories, state.trail);
+  const current = trail.at(-1) ?? null;
+  const level = (0, import_taxonomy.sortNodes)(current ? current.children ?? [] : categories);
+  const headingRef = (0, import_react.useRef)(null);
+  const rowRefs = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const focusTarget = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const target = focusTarget.current;
+    if (!target) return;
+    focusTarget.current = null;
+    if (target.kind === "heading") headingRef.current?.focus();
+    else rowRefs.current.get(target.id)?.focus();
+  }, [state.trail]);
+  const push = (node) => {
+    focusTarget.current = { kind: "heading" };
+    dispatch({ type: "push", id: node.id });
+  };
+  const pop = () => {
+    const leaving = state.trail.at(-1);
+    if (leaving) focusTarget.current = { kind: "row", id: leaving };
+    dispatch({ type: "pop" });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-qa": "mobile-menu", className: "rounded-lg border border-border bg-popover text-popover-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      MobileHeader,
+      {
+        title: current?.label ?? labels.menuTitle,
+        labels,
+        onBack: trail.length > 0 ? pop : void 0,
+        onClose,
+        headingRef
+      }
+    ),
+    trail.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border px-2 py-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_blocks.Button,
+        {
+          type: "button",
+          variant: "link",
+          size: "xs",
+          className: "h-6 min-h-6 px-1 text-xs",
+          onClick: () => {
+            focusTarget.current = { kind: "heading" };
+            dispatch({ type: "reset" });
+          },
+          children: labels.menuTitle
+        }
+      ),
+      trail.slice(0, -1).map((node, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "text-xs text-muted-foreground", children: labels.crumbSeparator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_blocks.Button,
+          {
+            type: "button",
+            variant: "link",
+            size: "xs",
+            className: "h-6 min-h-6 px-1 text-xs",
+            onClick: () => {
+              focusTarget.current = { kind: "heading" };
+              dispatch({ type: "jump", index });
+            },
+            children: node.label
+          }
+        )
+      ] }, node.id))
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "ul",
+      {
+        className: "max-h-96 space-y-0.5 overflow-y-auto p-2",
+        "aria-label": current ? (0, import_labels.formatLabel)(labels.panelLabel, { name: current.label }) : labels.rootLabel,
+        children: [
+          current && config.showViewAll && current.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "border-b border-border pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "a",
+            {
+              href: current.href,
+              onClick: () => onNavigate(current),
+              className: "block rounded-md px-2 py-2 text-sm font-semibold text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: (0, import_labels.formatLabel)(labels.viewAll, { name: current.label })
+            }
+          ) }) : null,
+          level.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "px-2 py-3 text-sm text-muted-foreground", children: labels.empty }) : null,
+          level.map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-start gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_category_parts.CategoryLink, { node, onNavigate, className: rowLink }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_category_parts.CountText, { node, config, labels, className: "py-2.5" }),
+            (0, import_taxonomy.hasChildren)(node) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_blocks.Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                ref: (element) => {
+                  rowRefs.current.set(node.id, element);
+                },
+                "aria-label": (0, import_labels.formatLabel)(labels.openSubmenu, { name: node.label }),
+                onClick: () => push(node),
+                className: (0, import_blocks.cn)("shrink-0 text-muted-foreground", import_category_parts.hoverSurface),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ChevronIcon, { className: "h-4 w-4 -rotate-90 rtl:rotate-90" })
+              }
+            ) : null
+          ] }, node.id))
+        ]
+      }
+    )
+  ] });
+}
+function AccordionNode({
+  node,
+  level,
+  config,
+  labels,
+  onNavigate
+}) {
+  const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const contentId = (0, import_react.useId)();
+  const expandable = (0, import_taxonomy.hasChildren)(node) && level < config.deepLevelLimit;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_category_parts.CategoryLink, { node, onNavigate, className: rowLink }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_category_parts.CountText, { node, config, labels, className: "py-2.5" }),
+      expandable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_blocks.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          "aria-expanded": expanded,
+          "aria-controls": contentId,
+          "aria-label": (0, import_labels.formatLabel)(labels.openSubmenu, { name: node.label }),
+          onClick: () => setExpanded((current) => !current),
+          className: (0, import_blocks.cn)("shrink-0 text-muted-foreground", import_category_parts.hoverSurface),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_icons.ChevronIcon,
+            {
+              className: (0, import_blocks.cn)(
+                "h-4 w-4 transition-transform motion-reduce:transition-none",
+                expanded && "rotate-180"
+              )
+            }
+          )
+        }
+      ) : null
+    ] }),
+    expandable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: contentId, hidden: !expanded, className: "ms-2 border-s border-border ps-2", children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-0.5", children: (0, import_taxonomy.sortNodes)(node.children ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AccordionNode,
+      {
+        node: child,
+        level: level + 1,
+        config,
+        labels,
+        onNavigate
+      },
+      child.id
+    )) }) : null }) : null
+  ] });
+}
+function AccordionMenu({ categories, config, labels, onNavigate, onClose }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "data-qa": "mobile-menu", className: "rounded-lg border border-border bg-popover text-popover-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MobileHeader, { title: labels.menuTitle, labels, onClose }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "max-h-96 space-y-0.5 overflow-y-auto p-2", "aria-label": labels.rootLabel, children: (0, import_taxonomy.sortNodes)(categories).map((node) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AccordionNode,
+      {
+        node,
+        level: 1,
+        config,
+        labels,
+        onNavigate
+      },
+      node.id
+    )) })
+  ] });
+}
+function MobileMenu(props) {
+  return props.pattern === "accordion" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionMenu, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrillDownMenu, { ...props });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MobileMenu
+});
+//# sourceMappingURL=mobile-menu.js.map