@timmbr/ui 1.2.0 → 1.3.1

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"}

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

@@ -0,0 +1,165 @@
+"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 { navHeaderItemVariants } from '../NavHeader.styles.js';
+import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
+import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
+
+const NavItemsOverflow = ({
+  items,
+  activeItemId,
+  onItemClick,
+  shouldAnimate = true,
+  motionClass,
+  linkComponent: CustomLink
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const config = useTimmbrConfig();
+  const isChildActive = items.some((item) => item.id === activeItemId);
+  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;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative flex items-center h-full",
+      "data-slot": "nav-items-overflow",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-label": "More navigation categories",
+            "aria-expanded": isOpen,
+            "aria-haspopup": "menu",
+            onClick: () => setIsOpen((prev) => !prev),
+            className: cn(
+              navHeaderItemVariants({ active: isOpen || isChildActive }),
+              "px-2 py-2 flex items-center justify-center rounded-lg hover:bg-black/5 transition-colors",
+              !shouldAnimate && "transition-none",
+              motionClass
+            ),
+            "data-slot": "nav-items-overflow-trigger",
+            children: [
+              /* @__PURE__ */ jsx(MoreHorizontal, { size: 20, className: "stroke-[2]" }),
+              (isOpen || isChildActive) && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-2 right-2 h-[2.5px] bg-[#C0643A] rounded-full" })
+            ]
+          }
+        ),
+        /* @__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(
+              "absolute top-full left-0 mt-2 w-56 bg-white border border-[#E7DFD3] shadow-2xl rounded-2xl p-2 z-50 text-left overflow-hidden divide-y divide-grey-100",
+              !shouldAnimate && "transition-none",
+              motionClass
+            ),
+            role: "menu",
+            "aria-orientation": "vertical",
+            "data-slot": "nav-items-overflow-popover",
+            children: /* @__PURE__ */ jsx("div", { className: "py-1 flex flex-col gap-0.5", children: items.map((item) => {
+              const isActive = activeItemId === 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__ */ jsx("span", { className: cn("truncate", isActive && "text-[#C0643A] font-bold"), children: item.label }),
+                item.badge && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 rounded-full bg-primary-100 text-primary-800 text-[10px] font-bold", children: item.badge })
+              ] });
+              const itemClass = cn(
+                "w-full flex items-center justify-between gap-3 px-3 py-2 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]",
+                item.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
+                isActive && "bg-[#F7F1E6]/80 text-[#C0643A]",
+                item.className
+              );
+              const handleClick = (e) => {
+                if (item.disabled) {
+                  e.preventDefault();
+                  return;
+                }
+                onItemClick(item.id, item);
+                setIsOpen(false);
+              };
+              if (resolvedHref && !item.disabled) {
+                if (CustomLink && !requiresCrossZone) {
+                  return /* @__PURE__ */ jsx(
+                    CustomLink,
+                    {
+                      href: resolvedHref,
+                      role: "menuitem",
+                      className: itemClass,
+                      onClick: handleClick,
+                      children: itemRowContent
+                    },
+                    item.id
+                  );
+                }
+                return /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: resolvedHref,
+                    "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,
+                  onClick: handleClick,
+                  className: itemClass,
+                  children: itemRowContent
+                },
+                item.id
+              );
+            }) })
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { NavItemsOverflow };

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { NavHeaderItem } from '../NavHeader.types';
+export interface NavMegaMenuProps {
+    activeItem: NavHeaderItem | null;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onClose?: () => void;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+}
+export declare const NavMegaMenu: React.FC<NavMegaMenuProps>;
+//# sourceMappingURL=NavMegaMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavMegaMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavMegaMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqElD,CAAC"}

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

@@ -0,0 +1,73 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { AnimatePresence, motion, fadeSlideDownVariants, getTransition } from '@timmbr/motion';
+import { cn } from '@timmbr/utils';
+import { megaMenuCardVariants } from '../NavHeader.styles.js';
+
+const NavMegaMenu = ({
+  activeItem,
+  onMouseEnter,
+  onMouseLeave,
+  onClose,
+  shouldAnimate = true,
+  motionClass
+}) => {
+  const hasContent = Boolean(activeItem?.content);
+  React.useEffect(() => {
+    if (!hasContent) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [hasContent, onClose]);
+  const widthStyle = React.useMemo(() => {
+    if (typeof activeItem?.popoverWidth === "number") {
+      return { maxWidth: `${activeItem.popoverWidth}px` };
+    }
+    return {};
+  }, [activeItem?.popoverWidth]);
+  const isFullBleed = activeItem?.popoverWidth === "full";
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: hasContent && activeItem && /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "nav-megamenu-wrapper",
+      className: "absolute top-full left-0 right-0 z-50 pt-1 pointer-events-none",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "w-full flex justify-center pointer-events-auto",
+          onMouseEnter,
+          onMouseLeave,
+          children: /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              role: "region",
+              "aria-label": `${typeof activeItem.label === "string" ? activeItem.label : "Navigation"} Submenu`,
+              initial: shouldAnimate ? "hidden" : false,
+              animate: shouldAnimate ? "visible" : void 0,
+              exit: shouldAnimate ? "exit" : void 0,
+              variants: shouldAnimate ? fadeSlideDownVariants : void 0,
+              transition: getTransition("fast"),
+              style: widthStyle,
+              "data-slot": "nav-megamenu-card",
+              className: cn(
+                megaMenuCardVariants(),
+                isFullBleed && "max-w-none rounded-none border-x-0",
+                !shouldAnimate && "transition-none",
+                motionClass
+              ),
+              children: activeItem.content
+            },
+            activeItem.id
+          )
+        }
+      )
+    }
+  ) });
+};
+
+export { NavMegaMenu };

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { NavSearchConfig } from '../NavHeader.types';
+export interface NavMobileSearchDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+    config?: NavSearchConfig | boolean;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+    linkComponent?: React.ComponentType<any>;
+}
+export declare const NavMobileSearchDrawer: React.FC<NavMobileSearchDrawerProps>;
+export default NavMobileSearchDrawer;
+//# sourceMappingURL=NavMobileSearchDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavMobileSearchDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavMobileSearchDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC;IACnC,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,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAoKtE,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

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

@@ -0,0 +1,149 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from '@timmbr/motion';
+import { ArrowLeft, Search, X } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { mobileSearchDrawerVariants } from '../NavHeader.styles.js';
+
+const NavMobileSearchDrawer = ({
+  isOpen,
+  onClose,
+  value,
+  onChange,
+  onSubmit,
+  config = {},
+  shouldAnimate = true,
+  motionClass
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+  const searchConfig = typeof config === "object" ? config : {};
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => {
+        inputRef.current?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+  const handleClear = () => {
+    onChange("");
+    inputRef.current?.focus();
+  };
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim()) {
+      onSubmit(value);
+      onClose();
+    }
+  };
+  const handlePopularSearchClick = (tagLabel) => {
+    onChange(tagLabel);
+    onSubmit(tagLabel);
+    onClose();
+  };
+  const drawerContent = /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Search drawer",
+      initial: shouldAnimate ? { opacity: 0, y: "100%" } : false,
+      animate: shouldAnimate ? { opacity: 1, y: "0%" } : void 0,
+      exit: shouldAnimate ? { opacity: 0, y: "100%" } : void 0,
+      transition: { duration: 0.28, ease: [0.32, 0.72, 0, 1] },
+      className: cn(mobileSearchDrawerVariants(), motionClass),
+      "data-slot": "nav-mobile-search-drawer",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full bg-[var(--color-bg-2,#F7F1E6)] border-b border-[#E7DFD3] px-3 py-3 flex items-center gap-3 shrink-0 shadow-xs", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Close search and go back",
+              className: "w-10 h-10 rounded-full flex items-center justify-center text-grey-800 hover:text-[#C0643A] hover:bg-black/5 transition-colors cursor-pointer shrink-0",
+              "data-slot": "nav-mobile-search-back-btn",
+              children: /* @__PURE__ */ jsx(ArrowLeft, { size: 22, className: "stroke-[2]" })
+            }
+          ),
+          /* @__PURE__ */ jsx("form", { onSubmit: handleFormSubmit, className: "flex-1 relative flex items-center", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full flex items-center", children: [
+            /* @__PURE__ */ jsx(
+              Search,
+              {
+                size: 18,
+                className: "absolute left-3.5 text-grey-500 pointer-events-none stroke-[2]"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                role: "searchbox",
+                "aria-label": "Search store products",
+                value,
+                onChange: (e) => onChange(e.target.value),
+                placeholder: searchConfig.placeholder ?? "Search for furniture, decor, and more...",
+                className: "w-full h-11 pl-10 pr-9 rounded-full bg-white border border-[#E7DFD3] text-sm text-grey-900 placeholder:text-grey-400 focus:outline-none focus:border-[#C0643A] focus:ring-2 focus:ring-[#C0643A]/20 transition-all shadow-xs"
+              }
+            ),
+            value.length > 0 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClear,
+                "aria-label": "Clear search input",
+                className: "absolute right-3 w-6 h-6 rounded-full bg-grey-200 hover:bg-grey-300 text-grey-600 flex items-center justify-center transition-colors cursor-pointer",
+                children: /* @__PURE__ */ jsx(X, { size: 14, className: "stroke-[2.5]" })
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 sm:p-6 space-y-6 bg-[var(--color-bg-2,#F7F1E6)]", children: [
+          searchConfig.popularSearches && searchConfig.popularSearches.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("h4", { className: "font-title text-xs font-semibold text-grey-500 uppercase tracking-wider", children: "POPULAR SEARCHES" }),
+            /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: searchConfig.popularSearches.map((item) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => handlePopularSearchClick(item.label),
+                className: "px-3.5 py-1.5 rounded-full bg-white border border-[#E7DFD3] text-xs font-semibold text-grey-700 hover:border-[#C0643A] hover:text-[#C0643A] hover:bg-white transition-colors cursor-pointer shadow-xs",
+                children: item.label
+              },
+              item.id
+            )) })
+          ] }),
+          searchConfig.suggestions && /* @__PURE__ */ jsx("div", { className: "pt-2", children: searchConfig.suggestions })
+        ] })
+      ]
+    }
+  ) });
+  if (!mounted) return null;
+  return createPortal(drawerContent, document.body);
+};
+
+export { NavMobileSearchDrawer };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { NavHeaderItem } from '../NavHeader.types';
+export interface NavMobileTabContentProps {
+    activeItem: NavHeaderItem | null;
+    onClose?: () => void;
+    shouldAnimate?: boolean;
+    motionClass?: string;
+}
+export declare const NavMobileTabContent: React.FC<NavMobileTabContentProps>;
+export default NavMobileTabContent;
+//# sourceMappingURL=NavMobileTabContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavMobileTabContent.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavMobileTabContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,aAAa,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAuClE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { AnimatePresence, motion } from '@timmbr/motion';
+import { cn } from '@timmbr/utils';
+import { mobileTabContentPanelVariants } from '../NavHeader.styles.js';
+
+const NavMobileTabContent = ({
+  activeItem,
+  onClose,
+  shouldAnimate = true,
+  motionClass
+}) => {
+  React.useEffect(() => {
+    if (!activeItem || !onClose) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [activeItem, onClose]);
+  const hasContent = Boolean(activeItem && activeItem.content);
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: hasContent && /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: shouldAnimate ? { height: 0, opacity: 0 } : false,
+      animate: shouldAnimate ? { height: "auto", opacity: 1 } : void 0,
+      exit: shouldAnimate ? { height: 0, opacity: 0 } : void 0,
+      transition: { duration: 0.22, ease: [0.25, 1, 0.5, 1] },
+      className: cn(mobileTabContentPanelVariants(), motionClass),
+      "data-slot": "nav-mobile-tab-content-panel",
+      children: /* @__PURE__ */ jsx("div", { className: "w-full", children: activeItem.content })
+    },
+    activeItem.id
+  ) });
+};
+
+export { NavMobileTabContent };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavMobileTabSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavMobileTabSlider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,WAAW,uBAAuB;IACtC,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,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuGhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}