@enadhq/enad-react-sdk 1.0.2 → 1.1.0

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

@@ -1,367 +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";
-import * as React from "react";
-import { useIcon } from "../../icons/icon-context";
-import { cn } from "../../ui/utils";
-import { MobileMenuDrawer } from "./mobile-menu-drawer";
-import { PromotionBar } from "./promotion-bar";
+//#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;
+	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 })
-    }
-  );
+	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
-  )) });
+	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)) });
+	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" })
-        }
-      )
-    ] })
-  ] });
+	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
-            }
-          )
-        ] })
-      ]
-    }
-  );
+	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.useState(false);
-  const [activeIndex, setActiveIndex] = React.useState(null);
-  const [scrolled, setScrolled] = React.useState(false);
-  const closeTimer = React.useRef(null);
-  const headerRef = React.useRef(null);
-  const isTransparent = variant === "transparent";
-  React.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.useCallback(() => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  }, []);
-  const scheduleClose = React.useCallback(() => {
-    cancelClose();
-    closeTimer.current = setTimeout(() => {
-      setActiveIndex(null);
-    }, CLOSE_DELAY);
-  }, [cancelClose]);
-  const handleTriggerEnter = React.useCallback(
-    (index) => {
-      cancelClose();
-      const item = navItems[index];
-      if ((item?.megaMenuCategories?.length ?? 0) > 0) {
-        setActiveIndex(index);
-      } else {
-        setActiveIndex(null);
-      }
-    },
-    [cancelClose, navItems]
-  );
-  const handlePanelEnter = React.useCallback(() => cancelClose(), [cancelClose]);
-  const handlePanelLeave = React.useCallback(() => scheduleClose(), [scheduleClose]);
-  React.useEffect(() => {
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") setActiveIndex(null);
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
-  const handleFocusOut = React.useCallback((e) => {
-    if (headerRef.current && e.relatedTarget instanceof Node && !headerRef.current.contains(e.relatedTarget)) {
-      setActiveIndex(null);
-    }
-  }, []);
-  const activeItem = activeIndex !== null ? navItems[activeIndex] : null;
-  const showPanel = activeItem !== null && (activeItem?.megaMenuCategories?.length ?? 0) > 0;
-  return {
-    menuOpen,
-    setMenuOpen,
-    activeIndex,
-    scrolled,
-    headerRef,
-    isTransparent,
-    activeItem,
-    showPanel,
-    scheduleClose,
-    handleTriggerEnter,
-    handlePanelEnter,
-    handlePanelLeave,
-    handleFocusOut
-  };
+	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) {
-  const isOverlay = variant === "overlay" || isTransparent;
-  if (isOverlay && !(isTransparent && scrolled)) return "text-white hover:text-white/70";
-  return "text-foreground hover:text-muted-foreground";
+	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.useMemo(() => navItems.map((item) => ({
-    label: item.label,
-    href: item.href ?? "",
-    children: item.megaMenuCategories?.map((cat) => ({ label: cat.title, href: cat.href })) ?? []
-  })), [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
-      }
-    )
-  ] });
+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
+	})] });
 }
-export {
-  Header
-};
+//#endregion
+export { Header };
+
 //# sourceMappingURL=header.mjs.map