@enadhq/enad-react-sdk 1.0.0 → 1.1.0

package/dist/client/storefront/layout/header.mjs

@@ -0,0 +1,326 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { MobileMenuDrawer } from "./mobile-menu-drawer.mjs";
+import { PromotionBar } from "./promotion-bar.mjs";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/layout/header.tsx
+const CLOSE_DELAY = 150;
+const EMPTY_NAV = [];
+const EMPTY_UTILITY = [];
+const EMPTY_MESSAGES = [];
+function CartElement({ cartHref, onCartClick, linkColor, label, CartIcon }) {
+	if (cartHref) return /* @__PURE__ */ jsx("a", {
+		href: cartHref,
+		className: cn("relative p-1 transition-colors duration-200 hit-area-2", linkColor),
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(CartIcon, { className: "size-5" })
+	});
+	if (onCartClick) return /* @__PURE__ */ jsx("button", {
+		onClick: onCartClick,
+		className: cn("relative p-1 transition-colors duration-200 hit-area-2", linkColor),
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(CartIcon, { className: "size-5" })
+	});
+	return null;
+}
+function MegaMenuPanel({ activeItem, showPanel, onMouseEnter, onMouseLeave, ChevronRightIcon }) {
+	const categories = activeItem?.megaMenuCategories;
+	const featured = activeItem?.megaMenuFeatured;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("hidden overflow-hidden transition-all duration-300 ease-out lg:block", showPanel ? "max-h-125 translate-y-0 opacity-100" : "max-h-0 -translate-y-1 opacity-0"),
+		onMouseEnter,
+		onMouseLeave,
+		role: "region",
+		"aria-label": "Submenu",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "border-b border-border bg-background p-8",
+			children: categories && categories.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-12",
+				children: [/* @__PURE__ */ jsx(MegaMenuCategories, { categories }), featured && featured.length > 0 && /* @__PURE__ */ jsx(MegaMenuFeatured, {
+					featured,
+					ChevronRightIcon
+				})]
+			}) : null
+		})
+	});
+}
+function MegaMenuCategories({ categories }) {
+	const columnGroups = [];
+	for (const cat of categories) if (cat.stackWithPrevious && columnGroups.length > 0) columnGroups[columnGroups.length - 1].push(cat);
+	else columnGroups.push([cat]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-1 justify-between gap-10",
+		children: columnGroups.map((group) => /* @__PURE__ */ jsx("div", {
+			className: "flex w-50 min-w-0 flex-col gap-6",
+			children: group.map((cat) => /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("a", {
+				href: cat.href,
+				className: "mb-3 block text-sm font-normal text-foreground transition-colors duration-200 hover:text-muted-foreground",
+				children: cat.title
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1.5",
+				children: cat.items?.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+					href: item.href,
+					className: "text-sm text-muted-foreground transition-colors duration-200 hover:text-foreground",
+					children: item.label
+				}) }, item.href))
+			})] }, cat.id ?? cat.title))
+		}, group[0].id ?? group[0].title))
+	});
+}
+function MegaMenuFeatured({ featured, ChevronRightIcon }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex shrink-0 gap-6",
+		children: featured.map((feat) => /* @__PURE__ */ jsxs("a", {
+			href: feat.href,
+			className: "group w-40",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "relative mb-2 aspect-[4/5] overflow-hidden rounded-[var(--enad-card-radius)] bg-muted",
+				children: feat.image?.src && /* @__PURE__ */ jsx("img", {
+					src: feat.image.src,
+					alt: feat.image.alt ?? feat.label,
+					className: "size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]"
+				})
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1 text-sm text-foreground transition-colors duration-200 group-hover:text-muted-foreground",
+				children: [feat.label, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "mt-px size-4" })]
+			})]
+		}, feat.id ?? feat.href))
+	});
+}
+function MobileHeader({ logo, linkColor, onSearchClick, cartHref, onCartClick, menuOpen, setMenuOpen, labels, SearchIcon, CartIcon, MenuIcon }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between px-4 py-3 lg:hidden",
+		children: [/* @__PURE__ */ jsx("a", {
+			href: "/",
+			className: "shrink-0",
+			children: logo
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [
+				onSearchClick && /* @__PURE__ */ jsx("button", {
+					onClick: onSearchClick,
+					className: cn("relative p-1 transition-colors duration-200 hit-area-2", linkColor),
+					"aria-label": labels?.search ?? "Search",
+					children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-5" })
+				}),
+				/* @__PURE__ */ jsx(CartElement, {
+					cartHref,
+					onCartClick,
+					linkColor,
+					label: labels?.cart ?? "Cart",
+					CartIcon
+				}),
+				/* @__PURE__ */ jsx("button", {
+					onClick: () => setMenuOpen(true),
+					className: cn("relative p-1 transition-colors duration-200 hit-area-2", linkColor),
+					"aria-label": labels?.menu ?? "Open menu",
+					"aria-expanded": menuOpen,
+					children: /* @__PURE__ */ jsx(MenuIcon, { className: "size-5" })
+				})
+			]
+		})]
+	});
+}
+function DesktopHeader({ logo, navItems, utilityLinks, linkColor, navLinkClasses, hasBackground, activeIndex, onSearchClick, cartHref, onCartClick, labels, handleTriggerEnter, scheduleClose, SearchIcon, CartIcon }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("hidden items-center justify-between px-8 py-4 lg:flex", hasBackground && "border-b border-border"),
+		children: [
+			/* @__PURE__ */ jsx("a", {
+				href: "/",
+				className: "shrink-0",
+				children: logo
+			}),
+			/* @__PURE__ */ jsx("nav", {
+				className: "flex flex-1 items-center justify-center gap-6",
+				children: navItems.map((item, index) => {
+					const hasDropdown = (item.megaMenuCategories?.length ?? 0) > 0;
+					return /* @__PURE__ */ jsx("a", {
+						href: item.href ?? "",
+						className: navLinkClasses,
+						onMouseEnter: () => handleTriggerEnter(index),
+						onMouseLeave: scheduleClose,
+						onFocus: () => handleTriggerEnter(index),
+						...hasDropdown && {
+							"aria-expanded": activeIndex === index,
+							"aria-haspopup": "true"
+						},
+						children: item.label
+					}, item.id ?? item.label);
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-5",
+				children: [
+					utilityLinks.map((link) => /* @__PURE__ */ jsx("a", {
+						href: link.href,
+						className: navLinkClasses,
+						children: link.label
+					}, link.label)),
+					onSearchClick && /* @__PURE__ */ jsx("button", {
+						onClick: onSearchClick,
+						className: cn("relative p-1 transition-colors duration-200 hit-area-2", linkColor),
+						"aria-label": labels?.search ?? "Search",
+						children: /* @__PURE__ */ jsx(SearchIcon, { className: "size-5" })
+					}),
+					/* @__PURE__ */ jsx(CartElement, {
+						cartHref,
+						onCartClick,
+						linkColor,
+						label: labels?.cart ?? "Cart",
+						CartIcon
+					})
+				]
+			})
+		]
+	});
+}
+function useHeaderState(variant, navItems) {
+	const [menuOpen, setMenuOpen] = React$1.useState(false);
+	const [activeIndex, setActiveIndex] = React$1.useState(null);
+	const [scrolled, setScrolled] = React$1.useState(false);
+	const closeTimer = React$1.useRef(null);
+	const headerRef = React$1.useRef(null);
+	const isTransparent = variant === "transparent";
+	React$1.useEffect(() => {
+		if (!isTransparent) return;
+		const handleScroll = () => setScrolled(window.scrollY > 50);
+		handleScroll();
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [isTransparent]);
+	const cancelClose = React$1.useCallback(() => {
+		if (closeTimer.current) {
+			clearTimeout(closeTimer.current);
+			closeTimer.current = null;
+		}
+	}, []);
+	const scheduleClose = React$1.useCallback(() => {
+		cancelClose();
+		closeTimer.current = setTimeout(() => {
+			setActiveIndex(null);
+		}, CLOSE_DELAY);
+	}, [cancelClose]);
+	const handleTriggerEnter = React$1.useCallback((index) => {
+		cancelClose();
+		if ((navItems[index]?.megaMenuCategories?.length ?? 0) > 0) setActiveIndex(index);
+		else setActiveIndex(null);
+	}, [cancelClose, navItems]);
+	const handlePanelEnter = React$1.useCallback(() => cancelClose(), [cancelClose]);
+	const handlePanelLeave = React$1.useCallback(() => scheduleClose(), [scheduleClose]);
+	React$1.useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") setActiveIndex(null);
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, []);
+	const handleFocusOut = React$1.useCallback((e) => {
+		if (headerRef.current && e.relatedTarget instanceof Node && !headerRef.current.contains(e.relatedTarget)) setActiveIndex(null);
+	}, []);
+	const activeItem = activeIndex !== null ? navItems[activeIndex] : null;
+	return {
+		menuOpen,
+		setMenuOpen,
+		activeIndex,
+		scrolled,
+		headerRef,
+		isTransparent,
+		activeItem,
+		showPanel: activeItem !== null && (activeItem?.megaMenuCategories?.length ?? 0) > 0,
+		scheduleClose,
+		handleTriggerEnter,
+		handlePanelEnter,
+		handlePanelLeave,
+		handleFocusOut
+	};
+}
+function resolveLinkColor(variant, isTransparent, scrolled) {
+	if ((variant === "overlay" || isTransparent) && !(isTransparent && scrolled)) return "text-white hover:text-white/70";
+	return "text-foreground hover:text-muted-foreground";
+}
+function useMobileItems(navItems) {
+	return React$1.useMemo(() => navItems.map((item) => ({
+		label: item.label,
+		href: item.href ?? "",
+		children: item.megaMenuCategories?.map((cat) => ({
+			label: cat.title,
+			href: cat.href
+		})) ?? []
+	})), [navItems]);
+}
+function Header({ variant = "default", navItems = EMPTY_NAV, utilityLinks = EMPTY_UTILITY, promotionEnabled = true, promotionMessages = EMPTY_MESSAGES, logo, onSearchClick, onCartClick, cartHref, labels, className }) {
+	const MenuIcon = useIcon("menu");
+	const SearchIcon = useIcon("search");
+	const CartIcon = useIcon("cart");
+	const ChevronRightIcon = useIcon("chevronRight");
+	const state = useHeaderState(variant, navItems);
+	const { isTransparent, scrolled, menuOpen, setMenuOpen, activeIndex } = state;
+	const { headerRef, activeItem, showPanel, handleFocusOut } = state;
+	const { scheduleClose, handleTriggerEnter, handlePanelEnter, handlePanelLeave } = state;
+	const hasBackground = variant === "default" || isTransparent && scrolled;
+	const linkColor = resolveLinkColor(variant, isTransparent, scrolled);
+	const navLinkClasses = `text-sm font-sans tracking-wide transition-colors duration-200 ${linkColor}`;
+	const mobileItems = useMobileItems(navItems);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("header", {
+		ref: headerRef,
+		className: cn("fixed inset-x-0 top-0 z-50 transition-colors duration-200", hasBackground ? "bg-background" : "bg-transparent", className),
+		onBlur: handleFocusOut,
+		children: [
+			/* @__PURE__ */ jsx(PromotionBar, {
+				enabled: promotionEnabled,
+				messages: promotionMessages
+			}),
+			/* @__PURE__ */ jsx(MobileHeader, {
+				logo,
+				linkColor,
+				onSearchClick,
+				cartHref,
+				onCartClick,
+				menuOpen,
+				setMenuOpen,
+				labels,
+				SearchIcon,
+				CartIcon,
+				MenuIcon
+			}),
+			/* @__PURE__ */ jsx(DesktopHeader, {
+				logo,
+				navItems,
+				utilityLinks,
+				linkColor,
+				navLinkClasses,
+				hasBackground,
+				activeIndex,
+				onSearchClick,
+				cartHref,
+				onCartClick,
+				labels,
+				handleTriggerEnter,
+				scheduleClose,
+				SearchIcon,
+				CartIcon
+			}),
+			/* @__PURE__ */ jsx(MegaMenuPanel, {
+				activeItem: activeItem ?? null,
+				showPanel,
+				onMouseEnter: handlePanelEnter,
+				onMouseLeave: handlePanelLeave,
+				ChevronRightIcon
+			})
+		]
+	}), /* @__PURE__ */ jsx(MobileMenuDrawer, {
+		open: menuOpen,
+		onOpenChange: setMenuOpen,
+		items: mobileItems,
+		labels: labels ? {
+			close: labels.closeMenu,
+			back: void 0
+		} : void 0
+	})] });
+}
+//#endregion
+export { Header };
+
+//# sourceMappingURL=header.mjs.map

package/dist/client/storefront/layout/header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.mjs","names":["React"],"sources":["../../../../src/client/storefront/layout/header.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { cn } from \"../../ui/utils\"\nimport { MobileMenuDrawer } from \"./mobile-menu-drawer\"\nimport { PromotionBar } from \"./promotion-bar\"\nimport type { HeaderProps, NavItem, NavChild } from \"../types\"\n\ntype IconComponent = React.ComponentType<{ className?: string }>\nconst CLOSE_DELAY = 150\nconst EMPTY_NAV: NavItem[] = []\nconst EMPTY_UTILITY: NavChild[] = []\nconst EMPTY_MESSAGES: string[] = []\n\nfunction CartElement({ cartHref, onCartClick, linkColor, label, CartIcon }: {\n  cartHref?: string; onCartClick?: () => void; linkColor: string; label: string; CartIcon: IconComponent\n}) {\n  if (cartHref) {\n    return (\n      <a href={cartHref} className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)} aria-label={label}>\n        <CartIcon className=\"size-5\" />\n      </a>\n    )\n  }\n  if (onCartClick) {\n    return (\n      <button onClick={onCartClick} className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)} aria-label={label}>\n        <CartIcon className=\"size-5\" />\n      </button>\n    )\n  }\n  return null\n}\n\nfunction MegaMenuPanel({ activeItem, showPanel, onMouseEnter, onMouseLeave, ChevronRightIcon }: {\n  activeItem: NavItem | null; showPanel: boolean; onMouseEnter: () => void; onMouseLeave: () => void; ChevronRightIcon: IconComponent\n}) {\n  const categories = activeItem?.megaMenuCategories\n  const featured = activeItem?.megaMenuFeatured\n\n  return (\n    <div\n      className={cn(\n        \"hidden overflow-hidden transition-all duration-300 ease-out lg:block\",\n        showPanel ? \"max-h-125 translate-y-0 opacity-100\" : \"max-h-0 -translate-y-1 opacity-0\",\n      )}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      role=\"region\"\n      aria-label=\"Submenu\"\n    >\n      <div className=\"border-b border-border bg-background p-8\">\n        {categories && categories.length > 0 ? (\n          <div className=\"flex gap-12\">\n            <MegaMenuCategories categories={categories} />\n            {featured && featured.length > 0 && (\n              <MegaMenuFeatured featured={featured} ChevronRightIcon={ChevronRightIcon} />\n            )}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nfunction MegaMenuCategories({ categories }: { categories: NonNullable<NavItem[\"megaMenuCategories\"]> }) {\n  const columnGroups: (typeof categories)[] = []\n  for (const cat of categories) {\n    if (cat.stackWithPrevious && columnGroups.length > 0) {\n      columnGroups[columnGroups.length - 1]!.push(cat)\n    } else {\n      columnGroups.push([cat])\n    }\n  }\n\n  return (\n    <div className=\"flex flex-1 justify-between gap-10\">\n      {columnGroups.map((group) => (\n        <div\n          key={group[0]!.id ?? group[0]!.title}\n          className=\"flex w-50 min-w-0 flex-col gap-6\"\n        >\n          {group.map((cat) => (\n            <div key={cat.id ?? cat.title}>\n              <a\n                href={cat.href}\n                className=\"mb-3 block text-sm font-normal text-foreground transition-colors duration-200 hover:text-muted-foreground\"\n              >\n                {cat.title}\n              </a>\n              <ul className=\"flex flex-col gap-1.5\">\n                {cat.items?.map((item) => (\n                  <li key={item.href}>\n                    <a\n                      href={item.href}\n                      className=\"text-sm text-muted-foreground transition-colors duration-200 hover:text-foreground\"\n                    >\n                      {item.label}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction MegaMenuFeatured({ featured, ChevronRightIcon }: {\n  featured: NonNullable<NavItem[\"megaMenuFeatured\"]>; ChevronRightIcon: IconComponent\n}) {\n  return (\n    <div className=\"flex shrink-0 gap-6\">\n      {featured.map((feat) => (\n        <a key={feat.id ?? feat.href} href={feat.href} className=\"group w-40\">\n          <div className=\"relative mb-2 aspect-[4/5] overflow-hidden rounded-[var(--enad-card-radius)] bg-muted\">\n            {feat.image?.src && (\n              <img\n                src={feat.image.src}\n                alt={feat.image.alt ?? feat.label}\n                className=\"size-full object-cover transition-transform duration-[var(--enad-image-hover-duration)] group-hover:scale-[var(--enad-image-hover-scale)]\"\n              />\n            )}\n          </div>\n          <span className=\"flex items-center gap-1 text-sm text-foreground transition-colors duration-200 group-hover:text-muted-foreground\">\n            {feat.label}\n            <ChevronRightIcon className=\"mt-px size-4\" />\n          </span>\n        </a>\n      ))}\n    </div>\n  )\n}\n\ninterface MobileHeaderProps {\n  logo: React.ReactNode; linkColor: string; onSearchClick?: () => void\n  cartHref?: string; onCartClick?: () => void; menuOpen: boolean\n  setMenuOpen: (open: boolean) => void; labels?: HeaderProps[\"labels\"]\n  SearchIcon: IconComponent; CartIcon: IconComponent; MenuIcon: IconComponent\n}\n\nfunction MobileHeader({ logo, linkColor, onSearchClick, cartHref, onCartClick, menuOpen, setMenuOpen, labels, SearchIcon, CartIcon, MenuIcon }: MobileHeaderProps) {\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 lg:hidden\">\n      <a href=\"/\" className=\"shrink-0\">{logo}</a>\n\n      <div className=\"flex items-center gap-3\">\n        {onSearchClick && (\n          <button\n            onClick={onSearchClick}\n            className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n            aria-label={labels?.search ?? \"Search\"}\n          >\n            <SearchIcon className=\"size-5\" />\n          </button>\n        )}\n        <CartElement\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          linkColor={linkColor}\n          label={labels?.cart ?? \"Cart\"}\n          CartIcon={CartIcon}\n        />\n        <button\n          onClick={() => setMenuOpen(true)}\n          className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n          aria-label={labels?.menu ?? \"Open menu\"}\n          aria-expanded={menuOpen}\n        >\n          <MenuIcon className=\"size-5\" />\n        </button>\n      </div>\n    </div>\n  )\n}\n\ninterface DesktopHeaderProps {\n  logo: React.ReactNode; navItems: NavItem[]; utilityLinks: NavChild[]\n  linkColor: string; navLinkClasses: string; hasBackground: boolean\n  activeIndex: number | null; onSearchClick?: () => void\n  cartHref?: string; onCartClick?: () => void; labels?: HeaderProps[\"labels\"]\n  handleTriggerEnter: (index: number) => void; scheduleClose: () => void\n  SearchIcon: IconComponent; CartIcon: IconComponent\n}\n\nfunction DesktopHeader({ logo, navItems, utilityLinks, linkColor, navLinkClasses, hasBackground, activeIndex, onSearchClick, cartHref, onCartClick, labels, handleTriggerEnter, scheduleClose, SearchIcon, CartIcon }: DesktopHeaderProps) {\n  return (\n    <div\n      className={cn(\n        \"hidden items-center justify-between px-8 py-4 lg:flex\",\n        hasBackground && \"border-b border-border\",\n      )}\n    >\n      <a href=\"/\" className=\"shrink-0\">{logo}</a>\n\n      <nav className=\"flex flex-1 items-center justify-center gap-6\">\n        {navItems.map((item, index) => {\n          const hasDropdown = (item.megaMenuCategories?.length ?? 0) > 0\n          return (\n            <a\n              key={item.id ?? item.label}\n              href={item.href ?? \"\"}\n              className={navLinkClasses}\n              onMouseEnter={() => handleTriggerEnter(index)}\n              onMouseLeave={scheduleClose}\n              onFocus={() => handleTriggerEnter(index)}\n              {...(hasDropdown && {\n                \"aria-expanded\": activeIndex === index,\n                \"aria-haspopup\": \"true\" as const,\n              })}\n            >\n              {item.label}\n            </a>\n          )\n        })}\n      </nav>\n\n      <div className=\"flex shrink-0 items-center gap-5\">\n        {utilityLinks.map((link) => (\n          <a key={link.label} href={link.href} className={navLinkClasses}>\n            {link.label}\n          </a>\n        ))}\n\n        {onSearchClick && (\n          <button\n            onClick={onSearchClick}\n            className={cn(\"relative p-1 transition-colors duration-200 hit-area-2\", linkColor)}\n            aria-label={labels?.search ?? \"Search\"}\n          >\n            <SearchIcon className=\"size-5\" />\n          </button>\n        )}\n\n        <CartElement\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          linkColor={linkColor}\n          label={labels?.cart ?? \"Cart\"}\n          CartIcon={CartIcon}\n        />\n      </div>\n    </div>\n  )\n}\n\nfunction useHeaderState(variant: HeaderProps[\"variant\"], navItems: NavItem[]) {\n  const [menuOpen, setMenuOpen] = React.useState(false)\n  const [activeIndex, setActiveIndex] = React.useState<number | null>(null)\n  const [scrolled, setScrolled] = React.useState(false)\n  const closeTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n  const headerRef = React.useRef<HTMLElement>(null)\n\n  const isTransparent = variant === \"transparent\"\n\n  React.useEffect(() => {\n    if (!isTransparent) return\n    const handleScroll = () => setScrolled(window.scrollY > 50)\n    handleScroll()\n    window.addEventListener(\"scroll\", handleScroll, { passive: true })\n    return () => window.removeEventListener(\"scroll\", handleScroll)\n  }, [isTransparent])\n\n  const cancelClose = React.useCallback(() => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current)\n      closeTimer.current = null\n    }\n  }, [])\n\n  const scheduleClose = React.useCallback(() => {\n    cancelClose()\n    closeTimer.current = setTimeout(() => {\n      setActiveIndex(null)\n    }, CLOSE_DELAY)\n  }, [cancelClose])\n\n  const handleTriggerEnter = React.useCallback(\n    (index: number) => {\n      cancelClose()\n      const item = navItems[index]\n      if ((item?.megaMenuCategories?.length ?? 0) > 0) {\n        setActiveIndex(index)\n      } else {\n        setActiveIndex(null)\n      }\n    },\n    [cancelClose, navItems],\n  )\n\n  const handlePanelEnter = React.useCallback(() => cancelClose(), [cancelClose])\n  const handlePanelLeave = React.useCallback(() => scheduleClose(), [scheduleClose])\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setActiveIndex(null)\n    }\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => document.removeEventListener(\"keydown\", handleKeyDown)\n  }, [])\n\n  const handleFocusOut = React.useCallback((e: React.FocusEvent) => {\n    if (\n      headerRef.current &&\n      e.relatedTarget instanceof Node &&\n      !headerRef.current.contains(e.relatedTarget)\n    ) {\n      setActiveIndex(null)\n    }\n  }, [])\n\n  const activeItem = activeIndex !== null ? navItems[activeIndex] : null\n  const showPanel = activeItem !== null && (activeItem?.megaMenuCategories?.length ?? 0) > 0\n\n  return { menuOpen, setMenuOpen, activeIndex, scrolled, headerRef, isTransparent,\n    activeItem, showPanel, scheduleClose, handleTriggerEnter, handlePanelEnter, handlePanelLeave, handleFocusOut }\n}\n\nfunction resolveLinkColor(variant: HeaderProps[\"variant\"], isTransparent: boolean, scrolled: boolean): string {\n  const isOverlay = variant === \"overlay\" || isTransparent\n  if (isOverlay && !(isTransparent && scrolled)) return \"text-white hover:text-white/70\"\n  return \"text-foreground hover:text-muted-foreground\"\n}\n\nfunction useMobileItems(navItems: NavItem[]) {\n  return React.useMemo(() => navItems.map((item) => ({\n    label: item.label, href: item.href ?? \"\",\n    children: item.megaMenuCategories?.map((cat) => ({ label: cat.title, href: cat.href })) ?? [],\n  })), [navItems])\n}\n\nfunction Header({\n  variant = \"default\",\n  navItems = EMPTY_NAV,\n  utilityLinks = EMPTY_UTILITY,\n  promotionEnabled = true,\n  promotionMessages = EMPTY_MESSAGES,\n  logo,\n  onSearchClick,\n  onCartClick,\n  cartHref,\n  labels,\n  className,\n}: HeaderProps) {\n  const MenuIcon = useIcon(\"menu\")\n  const SearchIcon = useIcon(\"search\")\n  const CartIcon = useIcon(\"cart\")\n  const ChevronRightIcon = useIcon(\"chevronRight\")\n\n  const state = useHeaderState(variant, navItems)\n  const { isTransparent, scrolled, menuOpen, setMenuOpen, activeIndex } = state\n  const { headerRef, activeItem, showPanel, handleFocusOut } = state\n  const { scheduleClose, handleTriggerEnter, handlePanelEnter, handlePanelLeave } = state\n\n  const hasBackground = variant === \"default\" || (isTransparent && scrolled)\n  const linkColor = resolveLinkColor(variant, isTransparent, scrolled)\n  const navLinkClasses = `text-sm font-sans tracking-wide transition-colors duration-200 ${linkColor}`\n  const mobileItems = useMobileItems(navItems)\n\n  return (\n    <>\n      <header\n        ref={headerRef}\n        className={cn(\n          \"fixed inset-x-0 top-0 z-50 transition-colors duration-200\",\n          hasBackground ? \"bg-background\" : \"bg-transparent\",\n          className,\n        )}\n        onBlur={handleFocusOut}\n      >\n        <PromotionBar enabled={promotionEnabled} messages={promotionMessages} />\n\n        <MobileHeader\n          logo={logo}\n          linkColor={linkColor}\n          onSearchClick={onSearchClick}\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          menuOpen={menuOpen}\n          setMenuOpen={setMenuOpen}\n          labels={labels}\n          SearchIcon={SearchIcon}\n          CartIcon={CartIcon}\n          MenuIcon={MenuIcon}\n        />\n\n        <DesktopHeader\n          logo={logo}\n          navItems={navItems}\n          utilityLinks={utilityLinks}\n          linkColor={linkColor}\n          navLinkClasses={navLinkClasses}\n          hasBackground={hasBackground}\n          activeIndex={activeIndex}\n          onSearchClick={onSearchClick}\n          cartHref={cartHref}\n          onCartClick={onCartClick}\n          labels={labels}\n          handleTriggerEnter={handleTriggerEnter}\n          scheduleClose={scheduleClose}\n          SearchIcon={SearchIcon}\n          CartIcon={CartIcon}\n        />\n\n        <MegaMenuPanel\n          activeItem={activeItem ?? null}\n          showPanel={showPanel}\n          onMouseEnter={handlePanelEnter}\n          onMouseLeave={handlePanelLeave}\n          ChevronRightIcon={ChevronRightIcon}\n        />\n      </header>\n\n      <MobileMenuDrawer\n        open={menuOpen}\n        onOpenChange={setMenuOpen}\n        items={mobileItems}\n        labels={labels ? { close: labels.closeMenu, back: undefined } : undefined}\n      />\n    </>\n  )\n}\n\nexport { Header, type HeaderProps }\n"],"mappings":"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"}

package/dist/client/storefront/layout/index.d.ts

@@ -0,0 +1,6 @@
+import { FooterProps, HeaderProps, MobileMenuDrawerProps, PromotionBarProps } from "../types.js";
+import { Footer } from "./footer.js";
+import { Header } from "./header.js";
+import { MobileMenuDrawer } from "./mobile-menu-drawer.js";
+import { PromotionBar } from "./promotion-bar.js";
+export { Footer, type FooterProps, Header, type HeaderProps, MobileMenuDrawer, type MobileMenuDrawerProps, PromotionBar, type PromotionBarProps };

package/dist/client/storefront/layout/index.mjs

@@ -0,0 +1,5 @@
+import { Footer } from "./footer.mjs";
+import { MobileMenuDrawer } from "./mobile-menu-drawer.mjs";
+import { PromotionBar } from "./promotion-bar.mjs";
+import { Header } from "./header.mjs";
+export { Footer, Header, MobileMenuDrawer, PromotionBar };

package/dist/client/storefront/layout/mobile-menu-drawer.d.ts

@@ -0,0 +1,14 @@
+import { MobileMenuDrawerProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/layout/mobile-menu-drawer.d.ts
+declare function MobileMenuDrawer({
+  open,
+  onOpenChange,
+  items,
+  labels,
+  className
+}: MobileMenuDrawerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MobileMenuDrawer, type MobileMenuDrawerProps };
+//# sourceMappingURL=mobile-menu-drawer.d.ts.map

package/dist/client/storefront/layout/mobile-menu-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-menu-drawer.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/mobile-menu-drawer.tsx"],"mappings":";;;;iBASS,gBAAA,CAAA;EAAmB,IAAA;EAAM,YAAA;EAAc,KAAA;EAAO,MAAA;EAAQ;AAAA,GAAa,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/layout/mobile-menu-drawer.mjs

@@ -0,0 +1,83 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Separator } from "../../ui-resolver/separator.mjs";
+import { Sheet, SheetContent, SheetTitle } from "../../ui-resolver/sheet.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/layout/mobile-menu-drawer.tsx
+function MobileMenuDrawer({ open, onOpenChange, items, labels, className }) {
+	const ChevronRightIcon = useIcon("chevronRight");
+	const ChevronLeftIcon = useIcon("chevronLeft");
+	const [activeSubmenu, setActiveSubmenu] = React$1.useState(null);
+	const handleClose = () => {
+		setActiveSubmenu(null);
+		onOpenChange(false);
+	};
+	const handleBack = () => {
+		setActiveSubmenu(null);
+	};
+	React$1.useEffect(() => {
+		if (!open) setActiveSubmenu(null);
+	}, [open]);
+	const activeItem = activeSubmenu !== null ? items[activeSubmenu] : null;
+	return /* @__PURE__ */ jsx(Sheet, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side: "left",
+			className: cn("w-full max-w-sm p-0", className),
+			children: [/* @__PURE__ */ jsx(SheetTitle, {
+				className: "sr-only",
+				children: labels?.close ?? "Menu"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex h-full flex-col overflow-y-auto",
+				children: activeItem && activeItem.children && activeItem.children.length > 0 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: handleBack,
+							className: "flex items-center gap-2 px-4 py-4 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+							children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" }), labels?.back ?? "Back"]
+						}),
+						/* @__PURE__ */ jsx(Separator, {}),
+						/* @__PURE__ */ jsx("a", {
+							href: activeItem.href,
+							onClick: handleClose,
+							className: "px-4 py-3 text-base font-medium text-foreground transition-colors hover:text-muted-foreground",
+							children: activeItem.label
+						}),
+						/* @__PURE__ */ jsx(Separator, {}),
+						activeItem.children.map((child) => /* @__PURE__ */ jsx("a", {
+							href: child.href,
+							onClick: handleClose,
+							className: "px-4 py-3 text-sm text-foreground transition-colors hover:text-muted-foreground",
+							children: child.label
+						}, child.href))
+					]
+				}) : /* @__PURE__ */ jsx("nav", {
+					className: "flex flex-col",
+					children: items.map((item, index) => {
+						const hasChildren = (item.children?.length ?? 0) > 0;
+						return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [hasChildren ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => setActiveSubmenu(index),
+							className: "flex items-center justify-between px-4 py-3 text-base text-foreground transition-colors hover:text-muted-foreground",
+							children: [item.label, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4 text-muted-foreground" })]
+						}) : /* @__PURE__ */ jsx("a", {
+							href: item.href,
+							onClick: handleClose,
+							className: "px-4 py-3 text-base text-foreground transition-colors hover:text-muted-foreground",
+							children: item.label
+						}), /* @__PURE__ */ jsx(Separator, {})] }, item.href || item.label);
+					})
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { MobileMenuDrawer };
+
+//# sourceMappingURL=mobile-menu-drawer.mjs.map

package/dist/client/storefront/layout/mobile-menu-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-menu-drawer.mjs","names":["React"],"sources":["../../../../src/client/storefront/layout/mobile-menu-drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport { Sheet, SheetContent, SheetTitle } from \"../../ui-resolver/sheet\";\nimport { Separator } from \"../../ui-resolver/separator\";\nimport { cn } from \"../../ui/utils\";\nimport type { MobileMenuDrawerProps } from \"../types\";\n\nfunction MobileMenuDrawer({ open, onOpenChange, items, labels, className }: MobileMenuDrawerProps) {\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n\n  const [activeSubmenu, setActiveSubmenu] = React.useState<number | null>(null);\n\n  const handleClose = () => {\n    setActiveSubmenu(null);\n    onOpenChange(false);\n  };\n\n  const handleBack = () => {\n    setActiveSubmenu(null);\n  };\n\n  React.useEffect(() => {\n    if (!open) setActiveSubmenu(null);\n  }, [open]);\n\n  const activeItem = activeSubmenu !== null ? items[activeSubmenu] : null;\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange}>\n      <SheetContent side=\"left\" className={cn(\"w-full max-w-sm p-0\", className)}>\n        <SheetTitle className=\"sr-only\">{labels?.close ?? \"Menu\"}</SheetTitle>\n\n        <div className=\"flex h-full flex-col overflow-y-auto\">\n          {/* Submenu view */}\n          {activeItem && activeItem.children && activeItem.children.length > 0 ? (\n            <div className=\"flex flex-col\">\n              <button\n                type=\"button\"\n                onClick={handleBack}\n                className=\"flex items-center gap-2 px-4 py-4 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground\"\n              >\n                <ChevronLeftIcon className=\"size-4\" />\n                {labels?.back ?? \"Back\"}\n              </button>\n              <Separator />\n              <a\n                href={activeItem.href}\n                onClick={handleClose}\n                className=\"px-4 py-3 text-base font-medium text-foreground transition-colors hover:text-muted-foreground\"\n              >\n                {activeItem.label}\n              </a>\n              <Separator />\n              {activeItem.children.map((child) => (\n                <a\n                  key={child.href}\n                  href={child.href}\n                  onClick={handleClose}\n                  className=\"px-4 py-3 text-sm text-foreground transition-colors hover:text-muted-foreground\"\n                >\n                  {child.label}\n                </a>\n              ))}\n            </div>\n          ) : (\n            /* Root menu */\n            <nav className=\"flex flex-col\">\n              {items.map((item, index) => {\n                const hasChildren = (item.children?.length ?? 0) > 0;\n                return (\n                  <React.Fragment key={item.href || item.label}>\n                    {hasChildren ? (\n                      <button\n                        type=\"button\"\n                        onClick={() => setActiveSubmenu(index)}\n                        className=\"flex items-center justify-between px-4 py-3 text-base text-foreground transition-colors hover:text-muted-foreground\"\n                      >\n                        {item.label}\n                        <ChevronRightIcon className=\"size-4 text-muted-foreground\" />\n                      </button>\n                    ) : (\n                      <a\n                        href={item.href}\n                        onClick={handleClose}\n                        className=\"px-4 py-3 text-base text-foreground transition-colors hover:text-muted-foreground\"\n                      >\n                        {item.label}\n                      </a>\n                    )}\n                    <Separator />\n                  </React.Fragment>\n                );\n              })}\n            </nav>\n          )}\n        </div>\n      </SheetContent>\n    </Sheet>\n  );\n}\n\nexport { MobileMenuDrawer, type MobileMenuDrawerProps };\n"],"mappings":";;;;;;;;AASA,SAAS,iBAAiB,EAAE,MAAM,cAAc,OAAO,QAAQ,aAAoC;CACjG,MAAM,mBAAmB,QAAQ,eAAe;CAChD,MAAM,kBAAkB,QAAQ,cAAc;CAE9C,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAAwB,KAAK;CAE7E,MAAM,oBAAoB;AACxB,mBAAiB,KAAK;AACtB,eAAa,MAAM;;CAGrB,MAAM,mBAAmB;AACvB,mBAAiB,KAAK;;AAGxB,SAAM,gBAAgB;AACpB,MAAI,CAAC,KAAM,kBAAiB,KAAK;IAChC,CAAC,KAAK,CAAC;CAEV,MAAM,aAAa,kBAAkB,OAAO,MAAM,iBAAiB;AAEnE,QACE,oBAAC,OAAD;EAAa;EAAoB;YAC/B,qBAAC,cAAD;GAAc,MAAK;GAAO,WAAW,GAAG,uBAAuB,UAAU;aAAzE,CACE,oBAAC,YAAD;IAAY,WAAU;cAAW,QAAQ,SAAS;IAAoB,CAAA,EAEtE,oBAAC,OAAD;IAAK,WAAU;cAEZ,cAAc,WAAW,YAAY,WAAW,SAAS,SAAS,IACjE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,qBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;iBAHZ,CAKE,oBAAC,iBAAD,EAAiB,WAAU,UAAW,CAAA,EACrC,QAAQ,QAAQ,OACV;;MACT,oBAAC,WAAD,EAAa,CAAA;MACb,oBAAC,KAAD;OACE,MAAM,WAAW;OACjB,SAAS;OACT,WAAU;iBAET,WAAW;OACV,CAAA;MACJ,oBAAC,WAAD,EAAa,CAAA;MACZ,WAAW,SAAS,KAAK,UACxB,oBAAC,KAAD;OAEE,MAAM,MAAM;OACZ,SAAS;OACT,WAAU;iBAET,MAAM;OACL,EANG,MAAM,KAMT,CACJ;MACE;SAGN,oBAAC,OAAD;KAAK,WAAU;eACZ,MAAM,KAAK,MAAM,UAAU;MAC1B,MAAM,eAAe,KAAK,UAAU,UAAU,KAAK;AACnD,aACE,qBAACA,QAAM,UAAP,EAAA,UAAA,CACG,cACC,qBAAC,UAAD;OACE,MAAK;OACL,eAAe,iBAAiB,MAAM;OACtC,WAAU;iBAHZ,CAKG,KAAK,OACN,oBAAC,kBAAD,EAAkB,WAAU,gCAAiC,CAAA,CACtD;WAET,oBAAC,KAAD;OACE,MAAM,KAAK;OACX,SAAS;OACT,WAAU;iBAET,KAAK;OACJ,CAAA,EAEN,oBAAC,WAAD,EAAa,CAAA,CACE,EAAA,EApBI,KAAK,QAAQ,KAAK,MAoBtB;OAEnB;KACE,CAAA;IAEJ,CAAA,CACO;;EACT,CAAA"}

package/dist/client/storefront/layout/promotion-bar.d.ts

@@ -0,0 +1,13 @@
+import { PromotionBarProps } from "../types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/layout/promotion-bar.d.ts
+declare function PromotionBar({
+  enabled,
+  messages,
+  onDismiss,
+  className
+}: PromotionBarProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { PromotionBar, type PromotionBarProps };
+//# sourceMappingURL=promotion-bar.d.ts.map

package/dist/client/storefront/layout/promotion-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"promotion-bar.d.ts","names":[],"sources":["../../../../src/client/storefront/layout/promotion-bar.tsx"],"mappings":";;;;iBAQS,YAAA,CAAA;EACP,OAAA;EACA,QAAA;EACA,SAAA;EACA;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/client/storefront/layout/promotion-bar.mjs

@@ -0,0 +1,63 @@
+"use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import { Button } from "../../ui/button.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/storefront/layout/promotion-bar.tsx
+function PromotionBar({ enabled = true, messages = [], onDismiss, className }) {
+	const ChevronLeftIcon = useIcon("chevronLeft");
+	const ChevronRightIcon = useIcon("chevronRight");
+	const CloseIcon = useIcon("close");
+	const [currentIndex, setCurrentIndex] = React$1.useState(0);
+	const [dismissed, setDismissed] = React$1.useState(false);
+	if (!enabled || dismissed || messages.length === 0) return null;
+	const hasMultiple = messages.length > 1;
+	const prev = () => {
+		setCurrentIndex((i) => (i - 1 + messages.length) % messages.length);
+	};
+	const next = () => {
+		setCurrentIndex((i) => (i + 1) % messages.length);
+	};
+	const handleDismiss = () => {
+		setDismissed(true);
+		onDismiss?.();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex items-center justify-center bg-accent text-accent-foreground px-4 py-2 text-center text-sm", className),
+		children: [
+			hasMultiple && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "absolute left-1 size-7 text-accent-foreground hover:bg-accent-foreground/10",
+				onClick: prev,
+				"aria-label": "Previous message",
+				children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "px-8",
+				children: messages[currentIndex]
+			}),
+			hasMultiple && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "absolute right-8 size-7 text-accent-foreground hover:bg-accent-foreground/10",
+				onClick: next,
+				"aria-label": "Next message",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4" })
+			}),
+			onDismiss && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "absolute right-1 size-7 text-accent-foreground hover:bg-accent-foreground/10",
+				onClick: handleDismiss,
+				"aria-label": "Dismiss",
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+			})
+		]
+	});
+}
+//#endregion
+export { PromotionBar };
+
+//# sourceMappingURL=promotion-bar.mjs.map

package/dist/client/storefront/layout/promotion-bar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"promotion-bar.mjs","names":["React"],"sources":["../../../../src/client/storefront/layout/promotion-bar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useIcon } from \"../../icons/icon-context\"\nimport { Button } from \"../../ui/button\"\nimport { cn } from \"../../ui/utils\"\nimport type { PromotionBarProps } from \"../types\"\n\nfunction PromotionBar({\n  enabled = true,\n  messages = [],\n  onDismiss,\n  className,\n}: PromotionBarProps) {\n  const ChevronLeftIcon = useIcon(\"chevronLeft\")\n  const ChevronRightIcon = useIcon(\"chevronRight\")\n  const CloseIcon = useIcon(\"close\")\n\n  const [currentIndex, setCurrentIndex] = React.useState(0)\n  const [dismissed, setDismissed] = React.useState(false)\n\n  if (!enabled || dismissed || messages.length === 0) return null\n\n  const hasMultiple = messages.length > 1\n\n  const prev = () => {\n    setCurrentIndex((i) => (i - 1 + messages.length) % messages.length)\n  }\n\n  const next = () => {\n    setCurrentIndex((i) => (i + 1) % messages.length)\n  }\n\n  const handleDismiss = () => {\n    setDismissed(true)\n    onDismiss?.()\n  }\n\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center justify-center bg-accent text-accent-foreground px-4 py-2 text-center text-sm\",\n        className,\n      )}\n    >\n      {hasMultiple && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"absolute left-1 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={prev}\n          aria-label=\"Previous message\"\n        >\n          <ChevronLeftIcon className=\"size-4\" />\n        </Button>\n      )}\n\n      <span className=\"px-8\">{messages[currentIndex]}</span>\n\n      {hasMultiple && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"absolute right-8 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={next}\n          aria-label=\"Next message\"\n        >\n          <ChevronRightIcon className=\"size-4\" />\n        </Button>\n      )}\n\n      {onDismiss && (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className=\"absolute right-1 size-7 text-accent-foreground hover:bg-accent-foreground/10\"\n          onClick={handleDismiss}\n          aria-label=\"Dismiss\"\n        >\n          <CloseIcon className=\"size-4\" />\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport { PromotionBar, type PromotionBarProps }\n"],"mappings":";;;;;;;AAQA,SAAS,aAAa,EACpB,UAAU,MACV,WAAW,EAAE,EACb,WACA,aACoB;CACpB,MAAM,kBAAkB,QAAQ,cAAc;CAC9C,MAAM,mBAAmB,QAAQ,eAAe;CAChD,MAAM,YAAY,QAAQ,QAAQ;CAElC,MAAM,CAAC,cAAc,mBAAmBA,QAAM,SAAS,EAAE;CACzD,MAAM,CAAC,WAAW,gBAAgBA,QAAM,SAAS,MAAM;AAEvD,KAAI,CAAC,WAAW,aAAa,SAAS,WAAW,EAAG,QAAO;CAE3D,MAAM,cAAc,SAAS,SAAS;CAEtC,MAAM,aAAa;AACjB,mBAAiB,OAAO,IAAI,IAAI,SAAS,UAAU,SAAS,OAAO;;CAGrE,MAAM,aAAa;AACjB,mBAAiB,OAAO,IAAI,KAAK,SAAS,OAAO;;CAGnD,MAAM,sBAAsB;AAC1B,eAAa,KAAK;AAClB,eAAa;;AAGf,QACE,qBAAC,OAAD;EACE,WAAW,GACT,4GACA,UACD;YAJH;GAMG,eACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,iBAAD,EAAiB,WAAU,UAAW,CAAA;IAC/B,CAAA;GAGX,oBAAC,QAAD;IAAM,WAAU;cAAQ,SAAS;IAAqB,CAAA;GAErD,eACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,kBAAD,EAAkB,WAAU,UAAW,CAAA;IAChC,CAAA;GAGV,aACC,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAS;IACT,cAAW;cAEX,oBAAC,WAAD,EAAW,WAAU,UAAW,CAAA;IACzB,CAAA;GAEP"}

package/dist/client/storefront/primitives/breadcrumbs.d.ts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/client/storefront/primitives/breadcrumbs.d.ts
+interface BreadcrumbItemData {
+  label: string;
+  href?: string;
+}
+interface StorefrontBreadcrumbsProps {
+  items: BreadcrumbItemData[];
+  maxItems?: number;
+  className?: string;
+}
+declare function StorefrontBreadcrumbs({
+  items,
+  maxItems,
+  className
+}: StorefrontBreadcrumbsProps): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { type BreadcrumbItemData, StorefrontBreadcrumbs, type StorefrontBreadcrumbsProps };
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/client/storefront/primitives/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","names":[],"sources":["../../../../src/client/storefront/primitives/breadcrumbs.tsx"],"mappings":";;;UAWU,kBAAA;EACR,KAAA;EACA,IAAA;AAAA;AAAA,UAGQ,0BAAA;EACR,KAAA,EAAO,kBAAA;EACP,QAAA;EACA,SAAA;AAAA;AAAA,iBASO,qBAAA,CAAA;EAAwB,KAAA;EAAO,QAAA;EAAc;AAAA,GAAa,0BAAA,GAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}