@timmbr/ui 1.1.0 → 1.3.0

package/dist/components/NavHeader/NavHeader.styles.js

@@ -0,0 +1,123 @@
+import { cva } from 'class-variance-authority';
+
+const offerBannerVariants = cva(
+  "w-full bg-[#1A1714] text-[#F7F1E6] font-title text-xs font-semibold uppercase tracking-[0.14em] py-2 px-4 flex items-center justify-center relative transition-all duration-200 z-50 border-b border-black/20"
+);
+const navHeaderVariants = cva(
+  "w-full bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-b border-[#E7DFD3] relative z-40 transition-colors",
+  {
+    variants: {
+      sticky: {
+        true: "sticky top-0 shadow-sm backdrop-blur-md bg-[var(--color-bg-2,#F7F1E6)]/95",
+        false: "relative"
+      }
+    },
+    defaultVariants: {
+      sticky: false
+    }
+  }
+);
+const navHeaderContainerVariants = cva(
+  "mx-auto px-4 sm:px-6 lg:px-8 h-[74px] flex items-center justify-between gap-4 lg:gap-8 transition-all",
+  {
+    variants: {
+      maxWidth: {
+        sm: "max-w-screen-sm",
+        md: "max-w-screen-md",
+        lg: "max-w-screen-lg",
+        xl: "max-w-[1280px]",
+        "2xl": "max-w-[1440px]",
+        full: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      maxWidth: "2xl"
+    }
+  }
+);
+const navHeaderItemVariants = cva(
+  "font-sans font-bold text-[13.5px] xl:text-[14.5px] 2xl:text-[15px] text-[#404040] hover:text-[#C0643A] transition-colors relative py-2 px-1 xl:px-1.5 flex items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded select-none cursor-pointer whitespace-nowrap",
+  {
+    variants: {
+      active: {
+        true: "text-[#C0643A]",
+        false: "text-[#404040]"
+      },
+      disabled: {
+        true: "opacity-40 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      active: false,
+      disabled: false
+    }
+  }
+);
+const navActionVariants = cva(
+  "group flex flex-col items-center justify-center gap-[3.5px] min-w-[36px] sm:min-w-[40px] lg:min-w-[52px] text-[#3C3C3C] hover:text-[#C0643A] transition-colors relative focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded py-1 px-1 lg:px-1.5 select-none cursor-pointer",
+  {
+    variants: {
+      active: {
+        true: "text-[#C0643A]",
+        false: "text-[#3C3C3C]"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+const megaMenuCardVariants = cva(
+  "w-full max-w-[1216px] mx-auto bg-[#FFFFFE] border border-grey-200/80 shadow-2xl rounded-b-xl z-50 overflow-hidden"
+);
+const searchPopoverCardVariants = cva(
+  "absolute top-full left-0 right-0 w-full mt-2 bg-white border border-grey-200 shadow-2xl rounded-2xl p-4 sm:p-5 z-50 text-left"
+);
+const actionOverflowPopoverVariants = cva(
+  "absolute top-full right-0 mt-3 w-60 bg-white border border-[#E7DFD3] shadow-2xl rounded-2xl p-2 z-50 text-left overflow-hidden divide-y divide-grey-100"
+);
+const actionOverflowItemVariants = cva(
+  "w-full flex items-center justify-between gap-3 px-3 py-2.5 text-xs font-semibold text-[#3C3C3C] hover:text-[#C0643A] hover:bg-[#F7F1E6]/60 rounded-xl transition-colors cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C0643A]",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-40 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  }
+);
+const mobileTabSliderVariants = cva(
+  "w-full overflow-x-auto flex items-center gap-6 px-4 py-2 border-b border-[#E7DFD3] bg-[var(--color-bg-2,#F7F1E6)] select-none scroll-smooth [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+);
+const mobileTabItemVariants = cva(
+  "relative font-sans text-xs sm:text-sm tracking-tight whitespace-nowrap py-1.5 px-1 font-semibold transition-colors cursor-pointer select-none",
+  {
+    variants: {
+      active: {
+        true: "text-[#C0643A] font-bold",
+        false: "text-grey-600 hover:text-grey-900"
+      },
+      disabled: {
+        true: "opacity-40 cursor-not-allowed pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      active: false,
+      disabled: false
+    }
+  }
+);
+const mobileTabContentPanelVariants = cva(
+  "w-full bg-[#FFFFFE] border-b border-[#E7DFD3] shadow-md overflow-hidden"
+);
+const mobileSearchDrawerVariants = cva(
+  "fixed inset-0 z-[9999] h-[100dvh] w-screen bg-[var(--color-bg-2,#F7F1E6)] flex flex-col overflow-hidden"
+);
+
+export { actionOverflowItemVariants, actionOverflowPopoverVariants, megaMenuCardVariants, mobileSearchDrawerVariants, mobileTabContentPanelVariants, mobileTabItemVariants, mobileTabSliderVariants, navActionVariants, navHeaderContainerVariants, navHeaderItemVariants, navHeaderVariants, offerBannerVariants, searchPopoverCardVariants };

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

@@ -0,0 +1,321 @@
+import type * as React from 'react';
+import type { MotionProp, MotionProps } from '../../types/motion';
+/**
+ * Offer / Announcement banner configuration shown above the navigation header.
+ */
+export interface OfferBannerConfig {
+    /** Master toggle to show or hide the offer banner */
+    show?: boolean;
+    /** Text or content displayed in the offer banner */
+    content: React.ReactNode;
+    /** Optional destination link href */
+    href?: string;
+    /** Target zone key corresponding to TimmbrConfigProvider zones (e.g. 'store', 'docs') */
+    zone?: string;
+    /** If true, navigation will be treated as cross-zone */
+    crossZone?: boolean;
+    /** Whether the banner includes a dismiss button */
+    dismissible?: boolean;
+    /** Callback fired when user clicks the dismiss button */
+    onDismiss?: () => void;
+    /** Optional right-side CTA button or coupon element */
+    action?: React.ReactNode;
+    /** Custom background or text className */
+    className?: string;
+}
+/**
+ * Branding configuration for the header logo.
+ */
+export interface NavHeaderBranding {
+    /** Full brand logo shown when search is closed */
+    logo: React.ReactNode;
+    /** Compact or mini brand logo shown when search expands */
+    miniLogo?: React.ReactNode;
+    /** Destination link for the brand logo. Defaults to '/' */
+    href?: string;
+    /** Target zone key for cross-zone branding link */
+    zone?: string;
+    /** Accessible label or alt text */
+    alt?: string;
+    /** Custom logo wrapper className */
+    className?: string;
+    /** Click handler for branding */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+}
+/**
+ * Individual navigation item.
+ * Supports direct links (internal or cross-zone) OR rich popover / mega-menu dropdowns.
+ */
+export interface NavHeaderItem {
+    /** Unique identifier for the item */
+    id: string;
+    /** Label displayed on the navbar */
+    label: React.ReactNode;
+    /** Optional link destination. If omitted and content is provided, item acts as popover trigger */
+    href?: string;
+    /** Target zone for cross-zone navigation */
+    zone?: string;
+    /** Explicit flag to force cross-zone navigation */
+    crossZone?: boolean;
+    /** Rich popover or mega-menu content. If provided, renders dropdown below header */
+    content?: React.ReactNode;
+    /** Width mode of the popover: 'container' (1216px centered), 'full' (100vw), 'dropdown' (anchor-aligned), or explicit number */
+    popoverWidth?: 'container' | 'full' | 'dropdown' | number;
+    /** Optional badge displayed adjacent to the label */
+    badge?: React.ReactNode;
+    /** Whether this item is visually disabled */
+    disabled?: boolean;
+    /** Accessible aria-label for the nav item */
+    ariaLabel?: string;
+    /** Custom className for the nav item trigger */
+    className?: string;
+}
+/**
+ * Popular search chip/tag configuration.
+ */
+export interface PopularSearchTag {
+    id?: string;
+    label: string;
+    href?: string;
+    zone?: string;
+    onClick?: (tag: PopularSearchTag) => void;
+}
+/**
+ * Configuration for the expandable search bar and its suggestions popover.
+ */
+export interface NavSearchConfig {
+    /** Master toggle to show or hide the search feature and trigger */
+    show?: boolean;
+    /** Search input placeholder text */
+    placeholder?: string;
+    /** Controlled search input value */
+    value?: string;
+    /** Uncontrolled default search input value */
+    defaultValue?: string;
+    /** Callback fired when search input value changes */
+    onChange?: (value: string) => void;
+    /** Callback fired when user submits search (e.g. presses Enter) */
+    onSubmit?: (query: string) => void;
+    /** Controlled open state for search expansion */
+    isOpen?: boolean;
+    /** Uncontrolled default open state */
+    defaultOpen?: boolean;
+    /** Callback fired when search expands or collapses */
+    onOpenChange?: (open: boolean) => void;
+    /** Custom popover content rendered below the search input */
+    popoverContent?: React.ReactNode;
+    /** Custom suggestions node rendered inside search drawer */
+    suggestions?: React.ReactNode;
+    /** Optional preconfigured popular search suggestions */
+    popularSearches?: PopularSearchTag[];
+    /** Title for the popular searches section. Defaults to "Popular Searches" */
+    popularSearchesTitle?: string;
+    /** Callback fired when user clicks a popular search chip */
+    onPopularSearchClick?: (tag: PopularSearchTag) => void;
+    /** Custom aria-label for search input */
+    ariaLabel?: string;
+    /** Display mode for search on mobile/tablet viewports (< 1024px). Defaults to 'bar' */
+    mobileMode?: 'bar' | 'icon' | 'auto';
+}
+/**
+ * Header action item (e.g. Profile, Wishlist, Cart, Notifications).
+ */
+export interface NavActionItem {
+    id: string;
+    /** Action label (e.g. "PROFILE", "WISH LIST(0)", "CART(0)") */
+    label: React.ReactNode;
+    /** Action icon element rendered above the label */
+    icon: React.ReactNode;
+    /** Optional link destination */
+    href?: string;
+    /** Optional zone for cross-zone linking */
+    zone?: string;
+    /** Explicit cross-zone toggle */
+    crossZone?: boolean;
+    /** Badge counter or indicator */
+    badge?: React.ReactNode | number;
+    /** Click handler */
+    onClick?: (e: React.MouseEvent) => void;
+    /** Accessible aria-label */
+    ariaLabel?: string;
+    /** Custom action className */
+    className?: string;
+    /** Whether the action item is visually disabled */
+    disabled?: boolean;
+    /** Priority level determining which items resist collapsing into overflow */
+    priority?: 'high' | 'normal' | 'low';
+    /** Optional custom renderer for complex items */
+    render?: (props: {
+        item: NavActionItem;
+        isOverflow: boolean;
+    }) => React.ReactNode;
+}
+/**
+ * Navigation items and desktop mega-menu configuration object.
+ */
+export interface NavNavigationConfig {
+    /** Primary navigation category items */
+    items?: NavHeaderItem[];
+    /** Master toggle to show or hide the navigation items bar */
+    show?: boolean;
+    /** Maximum number of nav items displayed before collapsing into three-dot overflow */
+    maxVisibleItems?: number;
+    /** Controlled active navigation item ID for open mega-menu */
+    activeItemId?: string | null;
+    /** Default active navigation item ID (uncontrolled) */
+    defaultActiveItemId?: string | null;
+    /** Callback fired when the active mega-menu item changes */
+    onActiveItemChange?: (id: string | null) => void;
+}
+/**
+ * Action buttons section configuration object.
+ */
+export interface NavActionsConfig {
+    /** Array of custom action buttons */
+    items?: NavActionItem[];
+    /** Master toggle to show or hide the actions section */
+    show?: boolean;
+    /** Maximum number of action items displayed before collapsing to overflow ('auto' | number) */
+    maxVisible?: number | 'auto';
+    /** Custom overflow menu button configuration */
+    overflow?: {
+        label?: React.ReactNode;
+        icon?: React.ReactNode;
+    };
+    /** Pre-configured profile action */
+    profile?: Partial<NavActionItem>;
+    /** Pre-configured wishlist action with optional badge count */
+    wishlist?: Partial<NavActionItem> & {
+        count?: number;
+    };
+    /** Pre-configured cart action with optional badge count */
+    cart?: Partial<NavActionItem> & {
+        count?: number;
+    };
+}
+/**
+ * Mobile and tablet responsive navigation (< 1024px) configuration object.
+ */
+export interface NavMobileConfig {
+    /**
+     * Horizontal category tab slider configuration or boolean toggle.
+     */
+    tabSlider?: boolean | {
+        show?: boolean;
+        activeItemId?: string | null;
+        defaultActiveItemId?: string | null;
+        onActiveItemChange?: (id: string | null) => void;
+    };
+    /**
+     * Mobile search configuration (bar pill or icon trigger, full-screen drawer state).
+     */
+    search?: {
+        mode?: 'bar' | 'icon' | 'auto';
+        open?: boolean;
+        defaultOpen?: boolean;
+        onOpenChange?: (open: boolean) => void;
+    };
+}
+export interface NavHeaderProps extends MotionProps, Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+    /**
+     * Brand logos configuration (full logo and mini logo for search expansion).
+     */
+    branding: NavHeaderBranding;
+    /**
+     * Maximum container width for the navigation bar and mega-menu.
+     * Defaults to '2xl' (max-w-[1216px]).
+     */
+    containerMaxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    /**
+     * Whether the header stays sticky at the top of the viewport.
+     * Defaults to false.
+     */
+    sticky?: boolean;
+    /**
+     * Custom router link component override (e.g. Next.js Link, Remix Link, or custom router).
+     */
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+        [key: string]: any;
+    }>;
+    /**
+     * Custom slot rendered at the far right of the navigation bar.
+     */
+    rightContent?: React.ReactNode;
+    /**
+     * Offer / Announcement banner above header.
+     * Pass an OfferBannerConfig object, a custom ReactNode, or false to disable.
+     */
+    offerBanner?: OfferBannerConfig | React.ReactNode | boolean;
+    /**
+     * Modular primary navigation configuration object or items array.
+     */
+    navigation?: NavNavigationConfig | NavHeaderItem[];
+    /**
+     * Modular search feature configuration object or boolean toggle.
+     */
+    search?: NavSearchConfig | boolean;
+    /**
+     * Modular actions configuration object or action items array.
+     */
+    actions?: NavActionsConfig | NavActionItem[];
+    /**
+     * Modular mobile and tablet responsive configuration object.
+     */
+    mobile?: NavMobileConfig;
+    /** Shorthand master toggle for the offer banner. Defaults to true. */
+    showOfferBanner?: boolean;
+    /** Shorthand navigation items array. */
+    items?: NavHeaderItem[];
+    /** Shorthand master toggle for the navigation items section. Defaults to true. */
+    showNavItems?: boolean;
+    /** Shorthand maximum number of nav items displayed before collapsing into three-dot overflow. */
+    maxVisibleNavItems?: number;
+    /** Shorthand controlled active navigation item ID for open mega-menu. */
+    activeItemId?: string | null;
+    /** Shorthand default active navigation item ID (uncontrolled). */
+    defaultActiveItemId?: string | null;
+    /** Shorthand callback fired when the active mega-menu item changes. */
+    onActiveItemChange?: (id: string | null) => void;
+    /** Shorthand master toggle for the search feature and trigger. Defaults to true. */
+    showSearch?: boolean;
+    /** Shorthand master toggle for the action buttons section. Defaults to true. */
+    showActions?: boolean;
+    /** Shorthand maximum number of action items displayed before collapsing into overflow. */
+    maxVisibleActions?: number | 'auto';
+    /** Shorthand custom label for the overflow menu action button. Defaults to 'MORE'. */
+    overflowActionLabel?: React.ReactNode;
+    /** Shorthand custom icon for the overflow menu action button. Defaults to MoreHorizontal. */
+    overflowActionIcon?: React.ReactNode;
+    /** Shorthand profile action configuration. */
+    profileAction?: Partial<NavActionItem>;
+    /** Shorthand wishlist action configuration with optional badge count. */
+    wishlistAction?: Partial<NavActionItem> & {
+        count?: number;
+    };
+    /** Shorthand cart action configuration with optional badge count. */
+    cartAction?: Partial<NavActionItem> & {
+        count?: number;
+    };
+    /** Shorthand toggle for mobile horizontal tab slider. Defaults to true. */
+    mobileTabSlider?: boolean;
+    /** Shorthand search display style on mobile/tablet screens (< 1024px). */
+    mobileSearchMode?: 'bar' | 'icon' | 'auto';
+    /** Shorthand controlled active item ID for the mobile tab slider. */
+    mobileActiveItemId?: string | null;
+    /** Shorthand default active item ID for the mobile tab slider (uncontrolled). */
+    defaultMobileActiveItemId?: string | null;
+    /** Shorthand callback fired when the active mobile tab item changes. */
+    onMobileActiveItemChange?: (id: string | null) => void;
+    /** Shorthand controlled open state for the full-screen mobile search drawer. */
+    mobileSearchOpen?: boolean;
+    /** Shorthand default open state for the full-screen mobile search drawer. */
+    defaultMobileSearchOpen?: boolean;
+    /** Shorthand callback fired when the mobile search drawer opens or closes. */
+    onMobileSearchOpenChange?: (open: boolean) => void;
+    /** Custom motion prop override. */
+    motion?: MotionProp;
+}
+//# sourceMappingURL=NavHeader.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavHeader.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oDAAoD;IACpD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,kDAAkD;IAClD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,kGAAkG;IAClG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oFAAoF;IACpF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gIAAgI;IAChI,YAAY,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1D,qDAAqD;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,mEAAmE;IACnE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mEAAmE;IACnE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,iDAAiD;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,6DAA6D;IAC7D,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,4DAA4D;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wDAAwD;IACxD,eAAe,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACrC,6EAA6E;IAC7E,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uFAAuF;IACvF,UAAU,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,+DAA+D;IAC/D,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,mDAAmD;IACnD,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iCAAiC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACjC,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;IACrC,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,aAAa,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CACnF;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,wCAAwC;IACxC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sFAAsF;IACtF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAClD;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,wDAAwD;IACxD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+FAA+F;IAC/F,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,gDAAgD;IAChD,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;IACF,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACjC,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACvD,2DAA2D;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,OAAO,GACP;QACE,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC7B,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACpC,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;KAClD,CAAC;IACN;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;QAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;KACxC,CAAC;CACH;AAED,MAAM,WAAW,cACf,SAAQ,WAAW,EACjB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAKrD;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAE5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IAE/D;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC,CAAC;IAEH;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAM/B;;;OAGG;IACH,WAAW,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;IAE5D;;OAEG;IACH,UAAU,CAAC,EAAE,mBAAmB,GAAG,aAAa,EAAE,CAAC;IAEnD;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC;IAEnC;;OAEG;IACH,OAAO,CAAC,EAAE,gBAAgB,GAAG,aAAa,EAAE,CAAC;IAE7C;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IAMzB,sEAAsE;IACtE,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IAExB,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,iGAAiG;IACjG,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7B,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEpC,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEjD,oFAAoF;IACpF,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,0FAA0F;IAC1F,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpC,sFAAsF;IACtF,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtC,6FAA6F;IAC7F,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAErC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAEvC,yEAAyE;IACzE,cAAc,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAE7D,qEAAqE;IACrE,UAAU,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEzD,2EAA2E;IAC3E,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,0EAA0E;IAC1E,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;IAE3C,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEnC,iFAAiF;IACjF,yBAAyB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAE1C,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAEvD,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,6EAA6E;IAC7E,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,8EAA8E;IAC9E,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAMnD,mCAAmC;IACnC,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}

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

@@ -0,0 +1,11 @@
+export { NavHeader, Header } from './NavHeader';
+export type { NavHeaderProps, NavHeaderItem, NavHeaderBranding, OfferBannerConfig, NavSearchConfig, PopularSearchTag, NavActionItem, } from './NavHeader.types';
+export { useNavHeaderContext } from './NavHeader.context';
+export { offerBannerVariants, navHeaderVariants, navHeaderContainerVariants, navHeaderItemVariants, navActionVariants, megaMenuCardVariants, searchPopoverCardVariants, } from './NavHeader.styles';
+export { OfferBanner } from './subcomponents/OfferBanner';
+export { NavBrand } from './subcomponents/NavBrand';
+export { NavItems } from './subcomponents/NavItems';
+export { NavMegaMenu } from './subcomponents/NavMegaMenu';
+export { NavSearch } from './subcomponents/NavSearch';
+export { NavActions } from './subcomponents/NavActions';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,aAAa,GACd,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,0BAA0B,EAC1B,qBAAqB,EACrB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC"}

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { NavActionItem } from '../NavHeader.types';
+export interface NavActionOverflowProps {
+    items: NavActionItem[];
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    linkComponent?: React.ComponentType<any>;
+}
+export declare const NavActionOverflow: React.FC<NavActionOverflowProps>;
+export default NavActionOverflow;
+//# sourceMappingURL=NavActionOverflow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavActionOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavActionOverflow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC1C;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiM9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/NavHeader/subcomponents/NavActionOverflow.js

@@ -0,0 +1,169 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { AnimatePresence, motion } from '@timmbr/motion';
+import { MoreHorizontal } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { navActionVariants, actionOverflowItemVariants, actionOverflowPopoverVariants } from '../NavHeader.styles.js';
+import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
+import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
+
+const NavActionOverflow = ({
+  items,
+  label = "MORE",
+  icon,
+  shouldAnimate = true,
+  motionClass,
+  linkComponent: CustomLink
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const config = useTimmbrConfig();
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+  if (!items || items.length === 0) {
+    return null;
+  }
+  const totalBadges = items.reduce((acc, curr) => {
+    if (typeof curr.badge === "number") return acc + curr.badge;
+    if (typeof curr.badge === "string") {
+      const parsed = parseInt(curr.badge, 10);
+      return acc + (isNaN(parsed) ? 1 : parsed);
+    }
+    if (curr.badge) return acc + 1;
+    return acc;
+  }, 0);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex items-center", "data-slot": "nav-action-overflow", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-label": "More navigation actions",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        onClick: () => setIsOpen((prev) => !prev),
+        className: cn(
+          navActionVariants({ active: isOpen }),
+          !shouldAnimate && "transition-none",
+          motionClass
+        ),
+        "data-slot": "nav-action-overflow-trigger",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+            icon ?? /* @__PURE__ */ jsx(MoreHorizontal, { size: 22, className: "shrink-0 stroke-[1.8]" }),
+            totalBadges > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-[#C0643A] text-white text-[10px] font-bold flex items-center justify-center",
+                "aria-label": `${totalBadges} items in overflow menu`,
+                children: totalBadges
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "hidden lg:inline font-sans font-bold text-[10px] tracking-[0.0926em] uppercase whitespace-nowrap", children: label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: shouldAnimate ? { opacity: 0, y: 6, scale: 0.97 } : false,
+        animate: shouldAnimate ? { opacity: 1, y: 0, scale: 1 } : void 0,
+        exit: shouldAnimate ? { opacity: 0, y: 6, scale: 0.97 } : void 0,
+        transition: { duration: 0.18, ease: [0.25, 1, 0.5, 1] },
+        className: cn(
+          actionOverflowPopoverVariants(),
+          !shouldAnimate && "transition-none",
+          motionClass
+        ),
+        role: "menu",
+        "aria-orientation": "vertical",
+        "data-slot": "nav-action-overflow-popover",
+        children: /* @__PURE__ */ jsx("div", { className: "py-1 flex flex-col gap-0.5", children: items.map((item) => {
+          if (item.render) {
+            return /* @__PURE__ */ jsx("div", { role: "menuitem", children: item.render({ item, isOverflow: true }) }, item.id);
+          }
+          const resolvedHref = resolveNavDestination(item.href, item.zone, config.zones?.zones);
+          const requiresCrossZone = isCrossZoneNavigation(item.zone, config.zones?.currentZone, item.crossZone);
+          const itemRowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 truncate", children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-grey-500 group-hover:text-[#C0643A] transition-colors", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+            ] }),
+            typeof item.badge !== "undefined" && item.badge !== null && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 rounded-full bg-[#C0643A] text-white text-[10px] font-bold", children: item.badge })
+          ] });
+          const itemClass = cn(
+            actionOverflowItemVariants({ disabled: item.disabled }),
+            "group",
+            item.className
+          );
+          const handleClick = (e) => {
+            item.onClick?.(e);
+            setIsOpen(false);
+          };
+          if (resolvedHref && !item.disabled) {
+            if (CustomLink && !requiresCrossZone) {
+              return /* @__PURE__ */ jsx(
+                CustomLink,
+                {
+                  href: resolvedHref,
+                  "aria-label": item.ariaLabel,
+                  role: "menuitem",
+                  className: itemClass,
+                  onClick: handleClick,
+                  children: itemRowContent
+                },
+                item.id
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: resolvedHref,
+                "aria-label": item.ariaLabel,
+                "data-cross-zone": requiresCrossZone ? "true" : void 0,
+                role: "menuitem",
+                className: itemClass,
+                onClick: handleClick,
+                children: itemRowContent
+              },
+              item.id
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              disabled: item.disabled,
+              "aria-label": item.ariaLabel,
+              onClick: handleClick,
+              className: itemClass,
+              children: itemRowContent
+            },
+            item.id
+          );
+        }) })
+      }
+    ) })
+  ] });
+};
+
+export { NavActionOverflow };