@timmbr/ui 1.1.0 → 1.3.0

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { NavActionItem } from '../NavHeader.types';
+export interface NavActionsProps {
+    actions?: NavActionItem[];
+    profileAction?: Partial<NavActionItem>;
+    wishlistAction?: Partial<NavActionItem> & {
+        count?: number;
+    };
+    cartAction?: Partial<NavActionItem> & {
+        count?: number;
+    };
+    maxVisibleActions?: number | 'auto';
+    overflowActionLabel?: React.ReactNode;
+    overflowActionIcon?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    linkComponent?: React.ComponentType<any>;
+}
+export declare const NavActions: React.FC<NavActionsProps>;
+export default NavActions;
+//# sourceMappingURL=NavActions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavActions.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavActions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpC,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,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,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsRhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,228 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { User, Heart, ShoppingCart } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { navActionVariants } from '../NavHeader.styles.js';
+import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
+import { NavActionOverflow } from './NavActionOverflow.js';
+import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
+
+const NavActions = ({
+  actions,
+  profileAction,
+  wishlistAction,
+  cartAction,
+  maxVisibleActions = "auto",
+  overflowActionLabel,
+  overflowActionIcon,
+  rightContent,
+  shouldAnimate = true,
+  motionClass,
+  linkComponent: CustomLink
+}) => {
+  const config = useTimmbrConfig();
+  const containerRef = React.useRef(null);
+  const [measuredMaxVisible, setMeasuredMaxVisible] = React.useState(null);
+  const items = React.useMemo(() => {
+    if (actions && actions.length > 0 && !profileAction && !wishlistAction && !cartAction) {
+      return actions;
+    }
+    const defaultItems = [];
+    const customItems = actions ?? [];
+    defaultItems.push({
+      id: "profile",
+      label: profileAction?.label ?? "PROFILE",
+      icon: profileAction?.icon ?? /* @__PURE__ */ jsx(User, { size: 22, className: "stroke-[1.8]" }),
+      href: profileAction?.href ?? "/account",
+      zone: profileAction?.zone,
+      crossZone: profileAction?.crossZone,
+      onClick: profileAction?.onClick,
+      ariaLabel: profileAction?.ariaLabel ?? "User Account"
+    });
+    const wishCount = wishlistAction?.count;
+    defaultItems.push({
+      id: "wishlist",
+      label: wishlistAction?.label ?? "WISH LIST",
+      icon: wishlistAction?.icon ?? /* @__PURE__ */ jsx(Heart, { size: 22, className: "stroke-[1.8]" }),
+      href: wishlistAction?.href ?? "/wishlist",
+      zone: wishlistAction?.zone,
+      crossZone: wishlistAction?.crossZone,
+      badge: wishlistAction?.badge ?? (wishCount && wishCount > 0 ? wishCount : void 0),
+      onClick: wishlistAction?.onClick,
+      ariaLabel: wishlistAction?.ariaLabel ?? (wishCount ? `Wishlist with ${wishCount} items` : "Wishlist")
+    });
+    const cartCount = cartAction?.count;
+    defaultItems.push({
+      id: "cart",
+      label: cartAction?.label ?? "CART",
+      icon: cartAction?.icon ?? /* @__PURE__ */ jsx(ShoppingCart, { size: 22, className: "stroke-[1.8]" }),
+      href: cartAction?.href ?? "/cart",
+      zone: cartAction?.zone,
+      crossZone: cartAction?.crossZone,
+      badge: cartAction?.badge ?? (cartCount && cartCount > 0 ? cartCount : void 0),
+      onClick: cartAction?.onClick,
+      ariaLabel: cartAction?.ariaLabel ?? (cartCount ? `Shopping cart with ${cartCount} items` : "Shopping cart"),
+      priority: "high"
+    });
+    return [...customItems, ...defaultItems];
+  }, [actions, profileAction, wishlistAction, cartAction]);
+  React.useEffect(() => {
+    if (maxVisibleActions !== "auto") {
+      setMeasuredMaxVisible(null);
+      return;
+    }
+    const container = containerRef.current;
+    if (!container || typeof ResizeObserver === "undefined") return;
+    const calculateFit = () => {
+      const parent = container.parentElement;
+      if (!parent) return;
+      const parentWidth = parent.clientWidth;
+      if (parentWidth <= 0) return;
+      let siblingsWidth = 0;
+      Array.from(parent.children).forEach((child) => {
+        if (child !== container) {
+          siblingsWidth += child.offsetWidth || 0;
+        }
+      });
+      const availableWidth = Math.max(0, parentWidth - siblingsWidth);
+      const itemWidth = 68;
+      const moreWidth = 68;
+      if (availableWidth <= moreWidth) {
+        setMeasuredMaxVisible(1);
+        return;
+      }
+      const maxSlots = Math.floor(availableWidth / itemWidth);
+      setMeasuredMaxVisible(Math.max(1, maxSlots));
+    };
+    calculateFit();
+    const observer = new ResizeObserver(() => {
+      calculateFit();
+    });
+    if (container.parentElement) {
+      observer.observe(container.parentElement);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [maxVisibleActions, items.length]);
+  const { visibleActions, overflowActions } = React.useMemo(() => {
+    const limit = typeof maxVisibleActions === "number" ? maxVisibleActions : measuredMaxVisible ?? items.length;
+    if (items.length <= limit) {
+      return { visibleActions: items, overflowActions: [] };
+    }
+    const countToKeep = typeof maxVisibleActions === "number" ? maxVisibleActions : Math.max(1, limit - 1);
+    const hasPriorities = items.some((i) => i.priority);
+    if (!hasPriorities) {
+      return {
+        visibleActions: items.slice(0, countToKeep),
+        overflowActions: items.slice(countToKeep)
+      };
+    }
+    const priorityScore = (item) => {
+      if (item.priority === "high") return 3;
+      if (item.priority === "low") return 1;
+      return 2;
+    };
+    const indexed = items.map((item, index) => ({ item, index, score: priorityScore(item) }));
+    const sorted = [...indexed].sort((a, b) => b.score - a.score || a.index - b.index);
+    const visibleIndices = new Set(sorted.slice(0, countToKeep).map((x) => x.index));
+    const visible = [];
+    const overflow = [];
+    items.forEach((item, index) => {
+      if (visibleIndices.has(index)) {
+        visible.push(item);
+      } else {
+        overflow.push(item);
+      }
+    });
+    return { visibleActions: visible, overflowActions: overflow };
+  }, [items, maxVisibleActions, measuredMaxVisible]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "flex items-center gap-1.5 sm:gap-2.5 lg:gap-[18px]",
+      "data-slot": "nav-actions-container",
+      children: [
+        visibleActions.map((item) => {
+          if (item.render) {
+            return /* @__PURE__ */ jsx("div", { className: "relative inline-flex items-center", children: item.render({ item, isOverflow: false }) }, item.id);
+          }
+          const resolvedHref = resolveNavDestination(item.href, item.zone, config.zones?.zones);
+          const requiresCrossZone = isCrossZoneNavigation(item.zone, config.zones?.currentZone, item.crossZone);
+          const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+              item.icon,
+              typeof item.badge !== "undefined" && item.badge !== null && /* @__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", children: item.badge })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "hidden lg:inline font-sans font-bold text-[10px] tracking-[0.0926em] uppercase whitespace-nowrap", children: item.label })
+          ] });
+          const actionClass = cn(
+            navActionVariants(),
+            item.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+            !shouldAnimate && "transition-none",
+            motionClass,
+            item.className
+          );
+          if (resolvedHref && !item.disabled) {
+            if (CustomLink && !requiresCrossZone) {
+              return /* @__PURE__ */ jsx(
+                CustomLink,
+                {
+                  href: resolvedHref,
+                  "aria-label": item.ariaLabel,
+                  className: actionClass,
+                  onClick: item.onClick,
+                  "data-slot": "nav-action-link",
+                  children: content
+                },
+                item.id
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: resolvedHref,
+                "aria-label": item.ariaLabel,
+                "data-cross-zone": requiresCrossZone ? "true" : void 0,
+                className: actionClass,
+                onClick: item.onClick,
+                "data-slot": "nav-action-link",
+                children: content
+              },
+              item.id
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: item.disabled,
+              "aria-label": item.ariaLabel,
+              onClick: item.onClick,
+              className: actionClass,
+              "data-slot": "nav-action-button",
+              children: content
+            },
+            item.id
+          );
+        }),
+        overflowActions.length > 0 && /* @__PURE__ */ jsx(
+          NavActionOverflow,
+          {
+            items: overflowActions,
+            label: overflowActionLabel,
+            icon: overflowActionIcon,
+            shouldAnimate,
+            motionClass,
+            linkComponent: CustomLink
+          }
+        ),
+        rightContent && /* @__PURE__ */ jsx("div", { className: "ml-2 flex items-center", children: rightContent })
+      ]
+    }
+  );
+};
+
+export { NavActions };

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { NavHeaderBranding } from '../NavHeader.types';
+export interface NavBrandProps {
+    branding: NavHeaderBranding;
+    isSearchOpen?: boolean;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    linkComponent?: React.ComponentType<any>;
+}
+export declare const NavBrand: React.FC<NavBrandProps>;
+export default NavBrand;
+//# sourceMappingURL=NavBrand.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavBrand.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavBrand.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAG5D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,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,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmG5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { motion } from '@timmbr/motion';
+import { cn } from '@timmbr/utils';
+import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
+import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
+
+const NavBrand = ({
+  branding,
+  isSearchOpen = false,
+  shouldAnimate = true,
+  motionClass,
+  linkComponent: CustomLink
+}) => {
+  const config = useTimmbrConfig();
+  const { logo, miniLogo, href = "/", zone, alt = "Brand Home", className, onClick } = branding;
+  const resolvedHref = resolveNavDestination(href, zone, config.zones?.zones) ?? "/";
+  const requiresCrossZone = isCrossZoneNavigation(zone, config.zones?.currentZone);
+  const showMini = Boolean(isSearchOpen && miniLogo);
+  const logoNode = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative flex items-center justify-center shrink-0 min-w-[32px] h-8",
+      "data-slot": "nav-brand-logo",
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: false,
+            animate: shouldAnimate ? {
+              opacity: showMini ? 0 : 1,
+              scale: showMini ? 0.92 : 1
+            } : void 0,
+            transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+            className: cn(
+              "flex items-center justify-center shrink-0 transition-opacity",
+              showMini ? "pointer-events-none" : "pointer-events-auto",
+              !shouldAnimate && (showMini ? "opacity-0" : "opacity-100"),
+              motionClass
+            ),
+            children: logo
+          }
+        ),
+        miniLogo && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: false,
+            animate: shouldAnimate ? {
+              opacity: showMini ? 1 : 0,
+              scale: showMini ? 1 : 0.92
+            } : void 0,
+            transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+            className: cn(
+              "absolute inset-0 flex items-center justify-center shrink-0",
+              showMini ? "pointer-events-auto" : "pointer-events-none",
+              !shouldAnimate && (showMini ? "opacity-100" : "opacity-0"),
+              motionClass
+            ),
+            children: miniLogo
+          }
+        )
+      ]
+    }
+  );
+  const wrapperClass = cn(
+    "inline-flex items-center justify-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded-md transition-transform",
+    className
+  );
+  if (CustomLink && !requiresCrossZone) {
+    return /* @__PURE__ */ jsx(
+      CustomLink,
+      {
+        href: resolvedHref,
+        "aria-label": alt,
+        className: wrapperClass,
+        onClick,
+        "data-slot": "nav-brand-link",
+        children: logoNode
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: resolvedHref,
+      "aria-label": alt,
+      "data-cross-zone": requiresCrossZone ? "true" : void 0,
+      "data-slot": "nav-brand-link",
+      className: wrapperClass,
+      onClick,
+      children: logoNode
+    }
+  );
+};
+
+export { NavBrand };

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { NavHeaderItem } from '../NavHeader.types';
+export interface NavItemsProps {
+    items: NavHeaderItem[];
+    activeItemId: string | null;
+    onItemMouseEnter: (id: string) => void;
+    onItemMouseLeave: () => void;
+    onItemClick: (id: string, item: NavHeaderItem) => void;
+    maxVisibleItems?: number;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    linkComponent?: React.ComponentType<any>;
+}
+export declare const NavItems: React.FC<NavItemsProps>;
+//# sourceMappingURL=NavItems.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavItems.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavItems.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,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,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiJ5C,CAAC"}

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

@@ -0,0 +1,141 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { motion } from '@timmbr/motion';
+import { cn } from '@timmbr/utils';
+import { navHeaderItemVariants } from '../NavHeader.styles.js';
+import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
+import { NavItemsOverflow } from './NavItemsOverflow.js';
+import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
+
+const NavItems = ({
+  items,
+  activeItemId,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  onItemClick,
+  maxVisibleItems,
+  shouldAnimate = true,
+  motionClass,
+  linkComponent: CustomLink
+}) => {
+  const config = useTimmbrConfig();
+  const { visibleItems, overflowItems } = React.useMemo(() => {
+    if (typeof maxVisibleItems !== "number" || items.length <= maxVisibleItems) {
+      return { visibleItems: items, overflowItems: [] };
+    }
+    const visibleCount = Math.max(1, maxVisibleItems);
+    return {
+      visibleItems: items.slice(0, visibleCount),
+      overflowItems: items.slice(visibleCount)
+    };
+  }, [items, maxVisibleItems]);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Main Navigation",
+      className: "flex items-center gap-2.5 xl:gap-4 2xl:gap-6 h-full",
+      "data-slot": "nav-items-container",
+      onMouseLeave: onItemMouseLeave,
+      children: [
+        visibleItems.map((item) => {
+          const isActive = activeItemId === item.id;
+          const hasContent = Boolean(item.content);
+          const resolvedHref = resolveNavDestination(item.href, item.zone, config.zones?.zones);
+          const requiresCrossZone = isCrossZoneNavigation(item.zone, config.zones?.currentZone, item.crossZone);
+          const handleClick = (e) => {
+            if (item.disabled) {
+              e.preventDefault();
+              return;
+            }
+            onItemClick(item.id, item);
+          };
+          const handleKeyDown = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              if (hasContent && !item.href) {
+                e.preventDefault();
+                onItemClick(item.id, item);
+              }
+            }
+          };
+          const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { children: item.label }),
+            item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center text-xs font-semibold px-1.5 py-0.5 rounded-full bg-primary-100 text-primary-800", children: item.badge }),
+            isActive && shouldAnimate && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                layoutId: "nav-header-active-indicator",
+                className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full",
+                transition: { type: "spring", stiffness: 500, damping: 35 }
+              }
+            ),
+            isActive && !shouldAnimate && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full" })
+          ] });
+          const className = cn(
+            navHeaderItemVariants({ active: isActive, disabled: item.disabled }),
+            !shouldAnimate && "transition-none",
+            motionClass,
+            item.className
+          );
+          if (!hasContent && resolvedHref) {
+            if (CustomLink && !requiresCrossZone) {
+              return /* @__PURE__ */ jsx(
+                CustomLink,
+                {
+                  href: resolvedHref,
+                  className,
+                  onClick: handleClick,
+                  "data-slot": "nav-item-link",
+                  children: itemContent
+                },
+                item.id
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: resolvedHref,
+                "data-cross-zone": requiresCrossZone ? "true" : void 0,
+                className,
+                onClick: handleClick,
+                "data-slot": "nav-item-link",
+                children: itemContent
+              },
+              item.id
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className,
+              "aria-haspopup": "dialog",
+              "aria-expanded": isActive,
+              disabled: item.disabled,
+              onClick: handleClick,
+              onKeyDown: handleKeyDown,
+              onMouseEnter: () => onItemMouseEnter(item.id),
+              "data-slot": "nav-item-trigger",
+              "data-active": isActive ? "true" : void 0,
+              children: itemContent
+            },
+            item.id
+          );
+        }),
+        overflowItems.length > 0 && /* @__PURE__ */ jsx(
+          NavItemsOverflow,
+          {
+            items: overflowItems,
+            activeItemId,
+            onItemClick,
+            shouldAnimate,
+            motionClass,
+            linkComponent: CustomLink
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { NavItems };

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { NavHeaderItem } from '../NavHeader.types';
+export interface NavItemsOverflowProps {
+    items: NavHeaderItem[];
+    activeItemId: string | null;
+    onItemClick: (id: string, item: NavHeaderItem) => void;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    linkComponent?: React.ComponentType<any>;
+}
+export declare const NavItemsOverflow: React.FC<NavItemsOverflowProps>;
+export default NavItemsOverflow;
+//# sourceMappingURL=NavItemsOverflow.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavItemsOverflow.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavItemsOverflow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IACvD,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,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkL5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}