@timmbr/ui 1.2.0 → 1.3.1

package/dist/components/NavHeader/NavHeader.context.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { NavHeaderProps, NavHeaderItem } from './NavHeader.types';
+export interface NavHeaderContextValue {
+    activeItemId: string | null;
+    setActiveItemId: (id: string | null) => void;
+    isSearchOpen: boolean;
+    setIsSearchOpen: (open: boolean) => void;
+    searchValue: string;
+    setSearchValue: (value: string) => void;
+    shouldAnimate: boolean;
+    motionClass?: string;
+    linkComponent?: NavHeaderProps['linkComponent'];
+    handleItemMouseEnter: (id: string) => void;
+    handleItemMouseLeave: () => void;
+    handleItemClick: (id: string, item: NavHeaderItem) => void;
+    handleSearchSubmit: (query: string) => void;
+}
+export declare const NavHeaderContext: React.Context<NavHeaderContextValue | null>;
+export declare function useNavHeaderContext(): NavHeaderContextValue;
+//# sourceMappingURL=NavHeader.context.d.ts.map

package/dist/components/NavHeader/NavHeader.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavHeader.context.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvE,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAChD,oBAAoB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3D,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,gBAAgB,6CAA0D,CAAC;AAExF,wBAAgB,mBAAmB,IAAI,qBAAqB,CAM3D"}

package/dist/components/NavHeader/NavHeader.context.js

@@ -0,0 +1,13 @@
+"use client";
+import * as React from 'react';
+
+const NavHeaderContext = React.createContext(null);
+function useNavHeaderContext() {
+  const context = React.useContext(NavHeaderContext);
+  if (!context) {
+    throw new Error("useNavHeaderContext must be used within a NavHeader component tree");
+  }
+  return context;
+}
+
+export { NavHeaderContext, useNavHeaderContext };

package/dist/components/NavHeader/NavHeader.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { NavHeaderProps } from './NavHeader.types';
+export declare const NavHeader: React.ForwardRefExoticComponent<NavHeaderProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Convenience alias for NavHeader.
+ */
+export declare const Header: React.ForwardRefExoticComponent<NavHeaderProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=NavHeader.d.ts.map

package/dist/components/NavHeader/NavHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavHeader.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EACV,cAAc,EAMf,MAAM,mBAAmB,CAAC;AAa3B,eAAO,MAAM,SAAS,oFAqpBrB,CAAC;AAIF;;GAEG;AACH,eAAO,MAAM,MAAM,oFAAY,CAAC"}

package/dist/components/NavHeader/NavHeader.helpers.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Checks whether a given URL is external (protocol-relative, mailto, tel, or http(s)).
+ */
+export declare function isExternalUrl(url?: string): boolean;
+/**
+ * Determines whether navigation requires cross-zone hard link behavior.
+ */
+export declare function isCrossZoneNavigation(zone?: string, currentZone?: string, explicitCrossZone?: boolean): boolean;
+/**
+ * Resolves the destination URL taking into account zone configuration.
+ */
+export declare function resolveNavDestination(href?: string, zone?: string, zones?: Record<string, string>): string | undefined;
+//# sourceMappingURL=NavHeader.helpers.d.ts.map

package/dist/components/NavHeader/NavHeader.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavHeader.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.helpers.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,CASnD;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,CAAC,EAAE,MAAM,EACb,WAAW,CAAC,EAAE,MAAM,EACpB,iBAAiB,CAAC,EAAE,OAAO,GAC1B,OAAO,CAKT;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,CAAC,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,GAAG,SAAS,CAGpB"}

package/dist/components/NavHeader/NavHeader.helpers.js

@@ -0,0 +1,14 @@
+import { resolveZoneHref } from '../../providers/TimmbrConfigProvider.js';
+
+function isCrossZoneNavigation(zone, currentZone, explicitCrossZone) {
+  if (explicitCrossZone) return true;
+  if (!zone) return false;
+  if (!currentZone) return true;
+  return zone !== currentZone;
+}
+function resolveNavDestination(href, zone, zones) {
+  if (!href) return void 0;
+  return resolveZoneHref(href, zone, zones);
+}
+
+export { isCrossZoneNavigation, resolveNavDestination };

package/dist/components/NavHeader/NavHeader.js

@@ -0,0 +1,547 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { resolveMotion } from '../../types/motion.js';
+import { navHeaderContainerVariants, navHeaderVariants } from './NavHeader.styles.js';
+import { Search } from '@timmbr/icons';
+import { NavHeaderContext } from './NavHeader.context.js';
+import { OfferBanner } from './subcomponents/OfferBanner.js';
+import { NavBrand } from './subcomponents/NavBrand.js';
+import { NavItems } from './subcomponents/NavItems.js';
+import { NavMegaMenu } from './subcomponents/NavMegaMenu.js';
+import { NavSearch } from './subcomponents/NavSearch.js';
+import { NavActions } from './subcomponents/NavActions.js';
+import { NavMobileTabSlider } from './subcomponents/NavMobileTabSlider.js';
+import { NavMobileTabContent } from './subcomponents/NavMobileTabContent.js';
+import { NavMobileSearchDrawer } from './subcomponents/NavMobileSearchDrawer.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const NavHeader = React.forwardRef(
+  ({
+    // 1. Branding & Global Layout
+    branding,
+    containerMaxWidth = "2xl",
+    sticky = false,
+    linkComponent,
+    rightContent,
+    // 2. Modular Configuration Objects
+    offerBanner = {
+      content: "Extra 15% Off on All Home and Kitchen Orders*"
+    },
+    navigation,
+    search = true,
+    actions,
+    mobile,
+    // 3. Shorthand & Convenience Props (Backwards Compatible)
+    showOfferBanner: shorthandShowOfferBanner,
+    items: shorthandItems,
+    showNavItems: shorthandShowNavItems,
+    maxVisibleNavItems: shorthandMaxVisibleNavItems,
+    activeItemId: shorthandActiveItemId,
+    defaultActiveItemId: shorthandDefaultActiveItemId,
+    onActiveItemChange: shorthandOnActiveItemChange,
+    showSearch: shorthandShowSearch,
+    showActions: shorthandShowActions,
+    maxVisibleActions: shorthandMaxVisibleActions,
+    overflowActionLabel: shorthandOverflowActionLabel,
+    overflowActionIcon: shorthandOverflowActionIcon,
+    profileAction: shorthandProfileAction,
+    wishlistAction: shorthandWishlistAction,
+    cartAction: shorthandCartAction,
+    mobileTabSlider: shorthandMobileTabSlider,
+    mobileSearchMode: shorthandMobileSearchMode,
+    mobileActiveItemId: shorthandMobileActiveItemId,
+    defaultMobileActiveItemId: shorthandDefaultMobileActiveItemId,
+    onMobileActiveItemChange: shorthandOnMobileActiveItemChange,
+    mobileSearchOpen: shorthandMobileSearchOpen,
+    defaultMobileSearchOpen: shorthandDefaultMobileSearchOpen,
+    onMobileSearchOpenChange: shorthandOnMobileSearchOpenChange,
+    // 4. Motion & Styling Overrides
+    motion: motionProp,
+    className,
+    ...props
+  }, ref) => {
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass } = resolveMotion(motionProp, globalMotion);
+    const isOfferBannerVisible = shorthandShowOfferBanner !== void 0 ? shorthandShowOfferBanner : typeof offerBanner === "object" && offerBanner !== null && "show" in offerBanner ? offerBanner.show ?? true : Boolean(offerBanner);
+    const navigationConfig = React.useMemo(
+      () => Array.isArray(navigation) ? { items: navigation } : navigation ?? {},
+      [navigation]
+    );
+    const navItems = React.useMemo(
+      () => shorthandItems ?? navigationConfig.items ?? [],
+      [shorthandItems, navigationConfig.items]
+    );
+    const isNavItemsVisible = shorthandShowNavItems !== void 0 ? shorthandShowNavItems : navigationConfig.show ?? true;
+    const maxVisibleNavItems = shorthandMaxVisibleNavItems ?? navigationConfig.maxVisibleItems;
+    const controlledActiveId = shorthandActiveItemId !== void 0 ? shorthandActiveItemId : navigationConfig.activeItemId;
+    const defaultActiveItemId = shorthandDefaultActiveItemId !== void 0 ? shorthandDefaultActiveItemId : navigationConfig.defaultActiveItemId ?? null;
+    const onActiveItemChange = shorthandOnActiveItemChange ?? navigationConfig.onActiveItemChange;
+    const searchConfig = React.useMemo(
+      () => typeof search === "object" && search !== null ? search : {},
+      [search]
+    );
+    const isSearchVisible = shorthandShowSearch !== void 0 ? shorthandShowSearch : searchConfig.show ?? Boolean(search);
+    const actionsConfig = React.useMemo(
+      () => Array.isArray(actions) ? { items: actions } : actions ?? {},
+      [actions]
+    );
+    const actionItems = actionsConfig.items;
+    const isActionsVisible = shorthandShowActions !== void 0 ? shorthandShowActions : actionsConfig.show ?? true;
+    const maxVisibleActions = shorthandMaxVisibleActions !== void 0 ? shorthandMaxVisibleActions : actionsConfig.maxVisible;
+    const overflowActionLabel = shorthandOverflowActionLabel ?? actionsConfig.overflow?.label;
+    const overflowActionIcon = shorthandOverflowActionIcon ?? actionsConfig.overflow?.icon;
+    const profileAction = shorthandProfileAction ?? actionsConfig.profile;
+    const wishlistAction = shorthandWishlistAction ?? actionsConfig.wishlist;
+    const cartAction = shorthandCartAction ?? actionsConfig.cart;
+    const mobileConfig = React.useMemo(
+      () => mobile ?? {},
+      [mobile]
+    );
+    const tabSliderOption = mobileConfig.tabSlider;
+    const tabSliderConfig = typeof tabSliderOption === "object" && tabSliderOption !== null ? tabSliderOption : {};
+    const isMobileTabSliderEnabled = shorthandMobileTabSlider !== void 0 ? shorthandMobileTabSlider : typeof tabSliderOption === "boolean" ? tabSliderOption : tabSliderConfig.show ?? true;
+    const controlledMobileActiveId = shorthandMobileActiveItemId !== void 0 ? shorthandMobileActiveItemId : tabSliderConfig.activeItemId;
+    const defaultMobileActiveItemId = shorthandDefaultMobileActiveItemId !== void 0 ? shorthandDefaultMobileActiveItemId : tabSliderConfig.defaultActiveItemId ?? null;
+    const onMobileActiveItemChange = shorthandOnMobileActiveItemChange ?? tabSliderConfig.onActiveItemChange;
+    const mobileSearchConfig = mobileConfig.search ?? {};
+    const resolvedMobileSearchMode = shorthandMobileSearchMode ?? mobileSearchConfig.mode ?? searchConfig.mobileMode ?? "bar";
+    const controlledMobileSearchOpen = shorthandMobileSearchOpen !== void 0 ? shorthandMobileSearchOpen : mobileSearchConfig.open;
+    const defaultMobileSearchOpen = shorthandDefaultMobileSearchOpen !== void 0 ? shorthandDefaultMobileSearchOpen : mobileSearchConfig.defaultOpen ?? false;
+    const onMobileSearchOpenChange = shorthandOnMobileSearchOpenChange ?? mobileSearchConfig.onOpenChange;
+    const [uncontrolledActiveId, setUncontrolledActiveId] = React.useState(
+      defaultActiveItemId
+    );
+    const activeItemId = controlledActiveId !== void 0 ? controlledActiveId : uncontrolledActiveId;
+    const setActiveItemId = React.useCallback(
+      (id) => {
+        if (controlledActiveId === void 0) {
+          setUncontrolledActiveId(id);
+        }
+        onActiveItemChange?.(id);
+      },
+      [controlledActiveId, onActiveItemChange]
+    );
+    const [uncontrolledSearchOpen, setUncontrolledSearchOpen] = React.useState(
+      searchConfig.defaultOpen ?? false
+    );
+    const isSearchOpen = searchConfig.isOpen !== void 0 ? searchConfig.isOpen : uncontrolledSearchOpen;
+    const setIsSearchOpen = React.useCallback(
+      (open) => {
+        if (searchConfig.isOpen === void 0) {
+          setUncontrolledSearchOpen(open);
+        }
+        searchConfig.onOpenChange?.(open);
+      },
+      [searchConfig]
+    );
+    const [uncontrolledSearchValue, setUncontrolledSearchValue] = React.useState(
+      searchConfig.defaultValue ?? ""
+    );
+    const searchValue = searchConfig.value !== void 0 ? searchConfig.value : uncontrolledSearchValue;
+    const setSearchValue = React.useCallback(
+      (val) => {
+        if (searchConfig.value === void 0) {
+          setUncontrolledSearchValue(val);
+        }
+        searchConfig.onChange?.(val);
+      },
+      [searchConfig]
+    );
+    const leaveTimeoutRef = React.useRef(null);
+    const cancelLeaveTimeout = React.useCallback(() => {
+      if (leaveTimeoutRef.current) {
+        clearTimeout(leaveTimeoutRef.current);
+        leaveTimeoutRef.current = null;
+      }
+    }, []);
+    const handleItemMouseEnter = React.useCallback(
+      (id) => {
+        cancelLeaveTimeout();
+        setActiveItemId(id);
+      },
+      [cancelLeaveTimeout, setActiveItemId]
+    );
+    const handleItemMouseLeave = React.useCallback(() => {
+      cancelLeaveTimeout();
+      leaveTimeoutRef.current = setTimeout(() => {
+        setActiveItemId(null);
+      }, 180);
+    }, [cancelLeaveTimeout, setActiveItemId]);
+    const handleMegaMenuMouseEnter = React.useCallback(() => {
+      cancelLeaveTimeout();
+    }, [cancelLeaveTimeout]);
+    const handleMegaMenuMouseLeave = React.useCallback(() => {
+      cancelLeaveTimeout();
+      leaveTimeoutRef.current = setTimeout(() => {
+        setActiveItemId(null);
+      }, 180);
+    }, [cancelLeaveTimeout, setActiveItemId]);
+    const handleMegaMenuClose = React.useCallback(() => {
+      cancelLeaveTimeout();
+      setActiveItemId(null);
+    }, [cancelLeaveTimeout, setActiveItemId]);
+    const handleItemClick = React.useCallback(
+      (id, item) => {
+        if (item.content) {
+          setActiveItemId(activeItemId === id ? null : id);
+        }
+      },
+      [activeItemId, setActiveItemId]
+    );
+    const handleSearchSubmit = React.useCallback(
+      (query) => {
+        searchConfig.onSubmit?.(query);
+      },
+      [searchConfig]
+    );
+    React.useEffect(() => {
+      return () => {
+        if (leaveTimeoutRef.current) {
+          clearTimeout(leaveTimeoutRef.current);
+        }
+      };
+    }, []);
+    const innerRef = React.useRef(null);
+    const leftRef = React.useRef(null);
+    const centerRef = React.useRef(null);
+    const searchContainerRef = React.useRef(null);
+    const [autoMaxVisible, setAutoMaxVisible] = React.useState(void 0);
+    React.useEffect(() => {
+      if (maxVisibleActions !== void 0 && typeof maxVisibleActions === "number") {
+        setAutoMaxVisible(maxVisibleActions);
+        return;
+      }
+      const updateFit = () => {
+        if (!innerRef.current) return;
+        const innerWidth = innerRef.current.clientWidth;
+        if (innerWidth <= 0) return;
+        const leftWidth = leftRef.current?.offsetWidth || 0;
+        const centerWidth = centerRef.current?.offsetWidth || 0;
+        const searchBaseWidth = isSearchVisible ? 52 : 0;
+        const columnGap = innerWidth >= 1024 ? 32 : 16;
+        const columnGapsTotal = columnGap * 2;
+        const rightSectionGap = innerWidth >= 1024 ? 20 : 12;
+        const availableWidthForActions = Math.max(
+          0,
+          innerWidth - leftWidth - centerWidth - searchBaseWidth - columnGapsTotal - rightSectionGap
+        );
+        const itemFootprint = innerWidth >= 640 ? 74 : 64;
+        const moreButtonFootprint = itemFootprint;
+        if (availableWidthForActions <= moreButtonFootprint) {
+          setAutoMaxVisible(1);
+          return;
+        }
+        const calculatedSlots = Math.floor(availableWidthForActions / itemFootprint);
+        setAutoMaxVisible(Math.max(1, calculatedSlots));
+      };
+      updateFit();
+      const handleResize = () => {
+        requestAnimationFrame(updateFit);
+      };
+      window.addEventListener("resize", handleResize);
+      let resizeObserver = null;
+      if (typeof ResizeObserver !== "undefined" && innerRef.current) {
+        resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(innerRef.current);
+        if (leftRef.current) resizeObserver.observe(leftRef.current);
+        if (centerRef.current) resizeObserver.observe(centerRef.current);
+      }
+      return () => {
+        window.removeEventListener("resize", handleResize);
+        resizeObserver?.disconnect();
+      };
+    }, [maxVisibleActions, navItems.length, search, isSearchVisible]);
+    const [uncontrolledMobileActiveId, setUncontrolledMobileActiveId] = React.useState(
+      defaultMobileActiveItemId
+    );
+    const mobileActiveItemId = controlledMobileActiveId !== void 0 ? controlledMobileActiveId : uncontrolledMobileActiveId;
+    const handleMobileItemClick = React.useCallback(
+      (id, item) => {
+        if (item.content) {
+          const nextId = mobileActiveItemId === id ? null : id;
+          if (controlledMobileActiveId === void 0) {
+            setUncontrolledMobileActiveId(nextId);
+          }
+          onMobileActiveItemChange?.(nextId);
+        }
+      },
+      [mobileActiveItemId, controlledMobileActiveId, onMobileActiveItemChange]
+    );
+    const activeMobileItem = React.useMemo(() => {
+      return navItems.find((item) => item.id === mobileActiveItemId) ?? null;
+    }, [navItems, mobileActiveItemId]);
+    const [uncontrolledMobileSearchOpen, setUncontrolledMobileSearchOpen] = React.useState(
+      defaultMobileSearchOpen
+    );
+    const isMobileSearchOpen = controlledMobileSearchOpen !== void 0 ? controlledMobileSearchOpen : uncontrolledMobileSearchOpen;
+    const setIsMobileSearchOpen = React.useCallback(
+      (open) => {
+        if (controlledMobileSearchOpen === void 0) {
+          setUncontrolledMobileSearchOpen(open);
+        }
+        onMobileSearchOpenChange?.(open);
+      },
+      [controlledMobileSearchOpen, onMobileSearchOpenChange]
+    );
+    const activeItem = React.useMemo(() => {
+      return navItems.find((item) => item.id === activeItemId) ?? null;
+    }, [navItems, activeItemId]);
+    const contextValue = React.useMemo(
+      () => ({
+        activeItemId,
+        setActiveItemId,
+        isSearchOpen,
+        setIsSearchOpen,
+        searchValue,
+        setSearchValue,
+        shouldAnimate,
+        motionClass,
+        linkComponent,
+        handleItemMouseEnter,
+        handleItemMouseLeave,
+        handleItemClick,
+        handleSearchSubmit,
+        autoMaxVisibleActions: autoMaxVisible
+      }),
+      [
+        activeItemId,
+        setActiveItemId,
+        isSearchOpen,
+        setIsSearchOpen,
+        searchValue,
+        setSearchValue,
+        shouldAnimate,
+        motionClass,
+        linkComponent,
+        handleItemMouseEnter,
+        handleItemMouseLeave,
+        handleItemClick,
+        handleSearchSubmit,
+        autoMaxVisible
+      ]
+    );
+    return /* @__PURE__ */ jsx(NavHeaderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        role: "banner",
+        "data-slot": "nav-header",
+        className: cn(navHeaderVariants({ sticky }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            OfferBanner,
+            {
+              banner: offerBanner,
+              show: isOfferBannerVisible,
+              shouldAnimate,
+              motionClass,
+              linkComponent
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "hidden lg:block", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: innerRef,
+                className: cn(
+                  navHeaderContainerVariants({ maxWidth: containerMaxWidth }),
+                  "relative"
+                ),
+                "data-slot": "nav-header-inner",
+                children: [
+                  /* @__PURE__ */ jsx("div", { ref: leftRef, className: "flex-1 flex items-center justify-start h-full min-w-0 pr-8 xl:pr-14", children: isNavItemsVisible && navItems.length > 0 && /* @__PURE__ */ jsx(
+                    NavItems,
+                    {
+                      items: navItems,
+                      activeItemId,
+                      maxVisibleItems: maxVisibleNavItems,
+                      onItemMouseEnter: handleItemMouseEnter,
+                      onItemMouseLeave: handleItemMouseLeave,
+                      onItemClick: handleItemClick,
+                      shouldAnimate,
+                      motionClass,
+                      linkComponent
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: centerRef,
+                      className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center shrink-0 z-10 pointer-events-auto",
+                      children: /* @__PURE__ */ jsx(
+                        NavBrand,
+                        {
+                          branding,
+                          isSearchOpen,
+                          shouldAnimate,
+                          motionClass,
+                          linkComponent
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-2.5 lg:gap-4 justify-end min-w-0 pl-8 xl:pl-14", children: [
+                    isSearchVisible && /* @__PURE__ */ jsx("div", { ref: searchContainerRef, className: "flex items-center", children: /* @__PURE__ */ jsx(
+                      NavSearch,
+                      {
+                        config: search,
+                        isOpen: isSearchOpen,
+                        onOpenChange: setIsSearchOpen,
+                        value: searchValue,
+                        onChange: setSearchValue,
+                        onSubmit: handleSearchSubmit,
+                        shouldAnimate,
+                        motionClass,
+                        linkComponent
+                      }
+                    ) }),
+                    isActionsVisible && /* @__PURE__ */ jsx(
+                      NavActions,
+                      {
+                        actions: actionItems,
+                        maxVisibleActions: maxVisibleActions === "auto" ? autoMaxVisible : maxVisibleActions ?? autoMaxVisible,
+                        overflowActionLabel,
+                        overflowActionIcon,
+                        profileAction,
+                        wishlistAction,
+                        cartAction,
+                        rightContent,
+                        shouldAnimate,
+                        motionClass,
+                        linkComponent
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            isNavItemsVisible && /* @__PURE__ */ jsx(
+              NavMegaMenu,
+              {
+                activeItem,
+                onMouseEnter: handleMegaMenuMouseEnter,
+                onMouseLeave: handleMegaMenuMouseLeave,
+                onClose: handleMegaMenuClose,
+                shouldAnimate,
+                motionClass
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "lg:hidden", "data-slot": "nav-mobile-container", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  navHeaderContainerVariants({ maxWidth: containerMaxWidth }),
+                  "h-[62px] sm:h-[70px] px-3 sm:px-6"
+                ),
+                "data-slot": "nav-mobile-top-bar",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start shrink-0", children: /* @__PURE__ */ jsx(
+                    NavBrand,
+                    {
+                      branding,
+                      isSearchOpen: false,
+                      shouldAnimate,
+                      motionClass,
+                      linkComponent
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2.5 lg:gap-4 justify-end", children: [
+                    isSearchVisible && resolvedMobileSearchMode === "icon" && /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setIsMobileSearchOpen(true),
+                        "aria-label": "Open search drawer",
+                        className: "group flex flex-col items-center justify-center min-w-[36px] sm:min-w-[40px] lg:min-w-[52px] text-[#3C3C3C] hover:text-[#C0643A] transition-colors py-1 px-1 lg:px-1.5 cursor-pointer",
+                        "data-slot": "nav-mobile-search-icon-trigger",
+                        children: [
+                          /* @__PURE__ */ jsx(Search, { size: 22, className: "shrink-0 stroke-[1.8]" }),
+                          /* @__PURE__ */ jsx("span", { className: "hidden lg:inline font-sans font-bold text-[10px] tracking-[0.0926em] uppercase", children: "SEARCH" })
+                        ]
+                      }
+                    ),
+                    isActionsVisible && /* @__PURE__ */ jsx(
+                      NavActions,
+                      {
+                        actions: actionItems,
+                        maxVisibleActions: isSearchVisible && resolvedMobileSearchMode === "icon" ? 2 : 3,
+                        overflowActionLabel,
+                        overflowActionIcon,
+                        profileAction,
+                        wishlistAction,
+                        cartAction,
+                        rightContent,
+                        shouldAnimate,
+                        motionClass,
+                        linkComponent
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            isSearchVisible && resolvedMobileSearchMode !== "icon" && /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-6 pb-2.5 pt-0.5 bg-[var(--color-bg-2,#F7F1E6)]", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsMobileSearchOpen(true),
+                "aria-label": "Open search drawer",
+                className: "w-full h-10 px-4 flex items-center gap-2.5 rounded-full bg-white border border-[#E7DFD3] text-left text-sm text-grey-400 hover:border-grey-400 shadow-xs transition-all cursor-pointer select-none",
+                "data-slot": "nav-mobile-search-pill",
+                children: [
+                  /* @__PURE__ */ jsx(Search, { size: 18, className: "text-grey-500 shrink-0" }),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: typeof search === "object" && search.placeholder ? search.placeholder : "Search for furniture, decor, and more..." })
+                ]
+              }
+            ) }),
+            isNavItemsVisible && isMobileTabSliderEnabled && navItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                NavMobileTabSlider,
+                {
+                  items: navItems,
+                  activeItemId: mobileActiveItemId,
+                  onItemClick: handleMobileItemClick,
+                  shouldAnimate,
+                  motionClass,
+                  linkComponent
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NavMobileTabContent,
+                {
+                  activeItem: activeMobileItem,
+                  onClose: () => handleMobileItemClick(mobileActiveItemId ?? "", activeMobileItem),
+                  shouldAnimate,
+                  motionClass
+                }
+              )
+            ] })
+          ] }),
+          isSearchVisible && /* @__PURE__ */ jsx(
+            NavMobileSearchDrawer,
+            {
+              isOpen: isMobileSearchOpen,
+              onClose: () => setIsMobileSearchOpen(false),
+              value: searchValue,
+              onChange: setSearchValue,
+              onSubmit: handleSearchSubmit,
+              config: search,
+              shouldAnimate,
+              motionClass,
+              linkComponent
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+NavHeader.displayName = "NavHeader";
+const Header = NavHeader;
+
+export { Header, NavHeader };