@timmbr/ui 1.4.1 → 1.5.0

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

@@ -1,10 +1,10 @@
 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"
+  "w-full bg-surface-dark text-bg-2 font-title! text-body-3 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-grey-1000/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",
+  "w-full bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-b border-border-warm relative z-40 transition-colors",
   {
     variants: {
       sticky: {
@@ -36,12 +36,12 @@ const navHeaderContainerVariants = cva(
   }
 );
 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",
+  "font-bold text-body-2 xl:text-body-2 2xl:text-body-2 text-grey-800 hover:text-primary 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]"
+        true: "text-primary",
+        false: "text-grey-800"
       },
       disabled: {
         true: "opacity-40 cursor-not-allowed pointer-events-none",
@@ -55,12 +55,12 @@ const navHeaderItemVariants = cva(
   }
 );
 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",
+  "group flex flex-col items-center justify-center gap-[3.5px] min-w-[36px] sm:min-w-[40px] lg:min-w-[52px] text-grey-800 hover:text-primary 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]"
+        true: "text-primary",
+        false: "text-grey-800"
       }
     },
     defaultVariants: {
@@ -69,16 +69,16 @@ const navActionVariants = cva(
   }
 );
 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"
+  "w-full max-w-[1216px] mx-auto bg-grey-50 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"
+  "absolute top-full left-0 right-0 w-full mt-2 bg-grey-50 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"
+  "absolute top-full right-0 mt-3 w-60 bg-grey-50 border border-border-warm 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]",
+  "w-full flex items-center justify-between gap-3 px-3 py-2.5 text-body-3 font-semibold text-grey-800 hover:text-primary hover:bg-bg-2/60 rounded-xl transition-colors cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
   {
     variants: {
       disabled: {
@@ -92,14 +92,14 @@ const actionOverflowItemVariants = cva(
   }
 );
 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]"
+  "w-full overflow-x-auto flex items-center gap-6 px-4 py-2 border-b border-border-warm 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",
+  "relative text-body-3 sm:text-body-2 tracking-tight whitespace-nowrap py-1.5 px-1 font-semibold transition-colors cursor-pointer select-none",
   {
     variants: {
       active: {
-        true: "text-[#C0643A] font-bold",
+        true: "text-primary font-bold",
         false: "text-grey-600 hover:text-grey-900"
       },
       disabled: {
@@ -114,7 +114,7 @@ const mobileTabItemVariants = cva(
   }
 );
 const mobileTabContentPanelVariants = cva(
-  "w-full bg-[#FFFFFE] border-b border-[#E7DFD3] shadow-md overflow-hidden"
+  "w-full bg-grey-50 border-b border-border-warm 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"

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

@@ -144,6 +144,17 @@ export interface NavActionItem {
     disabled?: boolean;
     /** Priority level determining which items resist collapsing into overflow */
     priority?: 'high' | 'normal' | 'low';
+    /**
+     * Label not known yet (e.g. session still loading): renders a skeleton in
+     * the label slot instead of `label`.
+     */
+    isLoading?: boolean;
+    /**
+     * Extra classes for the label slot. Give labels that change at runtime a
+     * fixed width (the profile action defaults to `w-16 truncate`) so the
+     * header doesn't shift when the text swaps.
+     */
+    labelClassName?: string;
     /** Optional custom renderer for complex items */
     render?: (props: {
         item: NavActionItem;
@@ -192,6 +203,10 @@ export interface NavActionsConfig {
     cart?: Partial<NavActionItem> & {
         count?: number;
     };
+    /** Auth trigger mode: 'modal' triggers popup flow, 'redirect' fallbacks to /auth page */
+    authMode?: 'modal' | 'redirect';
+    /** Callback fired when user triggers auth in modal mode */
+    onAuthTrigger?: () => void;
 }
 /**
  * Mobile and tablet responsive navigation (< 1024px) configuration object.
@@ -299,6 +314,10 @@ export interface NavHeaderProps extends MotionProps, Omit<React.HTMLAttributes<H
     cartAction?: Partial<NavActionItem> & {
         count?: number;
     };
+    /** Shorthand auth mode: 'modal' triggers modal popup, 'redirect' falls back to /auth page. Defaults to 'modal'. */
+    authMode?: 'modal' | 'redirect';
+    /** Shorthand callback fired when user triggers auth in modal mode. */
+    onAuthTrigger?: () => void;
     /** Shorthand toggle for mobile horizontal tab slider. Defaults to true. */
     mobileTabSlider?: boolean;
     /** Shorthand search display style on mobile/tablet screens (< 1024px). */

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

@@ -1 +1 @@
-{"version":3,"file":"NavHeader.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"NavHeader.types.d.ts","sourceRoot":"","sources":["../../../src/components/NavHeader/NavHeader.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+/** Placeholder for an action label that isn't known yet (fills the label slot). */
+export declare function NavActionLabelSkeleton(): React.JSX.Element;
+//# sourceMappingURL=NavActionLabelSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavActionLabelSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavActionLabelSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,mFAAmF;AACnF,wBAAgB,sBAAsB,sBAQrC"}

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

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { skeletonVariants } from '../../Skeleton/Skeleton.styles.js';
+
+function NavActionLabelSkeleton() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "nav-action-label-skeleton",
+      className: cn(skeletonVariants({ variant: "text" }), "block h-3 align-middle")
+    }
+  );
+}
+
+export { NavActionLabelSkeleton };

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

@@ -1 +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"}
+{"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;AAIxD,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,CAmM9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -5,6 +5,7 @@ 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 { NavActionLabelSkeleton } from './NavActionLabelSkeleton.js';
 import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
 import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
 
@@ -71,13 +72,13 @@ const NavActionOverflow = ({
             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",
+                className: "absolute -top-1 -right-2 min-w-[16px] h-4 px-1 rounded-full bg-primary text-grey-50 text-caption 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("span", { className: "hidden lg:inline font-bold text-caption tracking-[0.0926em] uppercase whitespace-nowrap", children: label })
         ]
       }
     ),
@@ -104,10 +105,10 @@ const NavActionOverflow = ({
           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 })
+              /* @__PURE__ */ jsx("span", { className: "shrink-0 text-grey-500 group-hover:text-primary transition-colors", children: item.icon }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: item.isLoading ? /* @__PURE__ */ jsx(NavActionLabelSkeleton, {}) : 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 })
+            typeof item.badge !== "undefined" && item.badge !== null && /* @__PURE__ */ jsx("span", { className: "shrink-0 px-1.5 py-0.5 rounded-full bg-primary text-grey-50 text-caption font-bold", children: item.badge })
           ] });
           const itemClass = cn(
             actionOverflowItemVariants({ disabled: item.disabled }),

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

@@ -1,5 +1,12 @@
 import * as React from 'react';
 import type { NavActionItem } from '../NavHeader.types';
+/**
+ * Profile label slot: sized to its text, so gaps stay even, but
+ * - at least as wide as "LOGIN" (34.6px): the loading skeleton and LOGIN are
+ *   the same width, so signed-out visitors see no shift at all;
+ * - at most 64px: longer names are cut with "…" (full name in `title`).
+ */
+export declare const PROFILE_LABEL_CLASS = "min-w-[35px] max-w-16 truncate text-center";
 export interface NavActionsProps {
     actions?: NavActionItem[];
     profileAction?: Partial<NavActionItem>;
@@ -9,6 +16,8 @@ export interface NavActionsProps {
     cartAction?: Partial<NavActionItem> & {
         count?: number;
     };
+    authMode?: 'modal' | 'redirect';
+    onAuthTrigger?: () => void;
     maxVisibleActions?: number | 'auto';
     overflowActionLabel?: React.ReactNode;
     overflowActionIcon?: React.ReactNode;

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

@@ -1 +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"}
+{"version":3,"file":"NavActions.d.ts","sourceRoot":"","sources":["../../../../src/components/NavHeader/subcomponents/NavActions.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,+CAA+C,CAAC;AAEhF,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,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,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,CA6ThD,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -1,18 +1,23 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { User, Heart, ShoppingCart } from '@timmbr/icons';
+import { openAuthModal } from '@timmbr/hooks';
+import { Heart, ShoppingCart, User } from '@timmbr/icons';
 import { cn } from '@timmbr/utils';
 import { navActionVariants } from '../NavHeader.styles.js';
+import { NavActionLabelSkeleton } from './NavActionLabelSkeleton.js';
 import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
 import { NavActionOverflow } from './NavActionOverflow.js';
 import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
 
+const PROFILE_LABEL_CLASS = "min-w-[35px] max-w-16 truncate text-center";
 const NavActions = ({
   actions,
   profileAction,
   wishlistAction,
   cartAction,
+  authMode = "modal",
+  onAuthTrigger,
   maxVisibleActions = "auto",
   overflowActionLabel,
   overflowActionIcon,
@@ -30,16 +35,21 @@ const NavActions = ({
     }
     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 isExplicitAccountLink = Boolean(profileAction?.href) && profileAction?.href !== "/auth" && profileAction?.href !== "/login";
+    const profileHref = authMode === "modal" && !isExplicitAccountLink ? void 0 : profileAction?.href ?? "/auth";
+    const handleProfileClick = (e) => {
+      if (profileAction?.onClick) {
+        profileAction.onClick(e);
+      }
+      if (authMode === "modal" && !isExplicitAccountLink) {
+        e.preventDefault();
+        if (onAuthTrigger) {
+          onAuthTrigger();
+        } else {
+          openAuthModal();
+        }
+      }
+    };
     const wishCount = wishlistAction?.count;
     defaultItems.push({
       id: "wishlist",
@@ -65,8 +75,22 @@ const NavActions = ({
       ariaLabel: cartAction?.ariaLabel ?? (cartCount ? `Shopping cart with ${cartCount} items` : "Shopping cart"),
       priority: "high"
     });
+    defaultItems.push({
+      id: "profile",
+      label: profileAction?.label ?? "LOGIN",
+      icon: profileAction?.icon ?? /* @__PURE__ */ jsx(User, { size: 22, className: "stroke-[1.8]" }),
+      href: profileHref,
+      zone: profileAction?.zone,
+      crossZone: profileAction?.crossZone,
+      onClick: handleProfileClick,
+      ariaLabel: profileAction?.ariaLabel ?? "User Account",
+      priority: "high",
+      isLoading: profileAction?.isLoading,
+      // LOGIN / skeleton / first name share one fixed-width slot: no layout shift
+      labelClassName: profileAction?.labelClassName ?? PROFILE_LABEL_CLASS
+    });
     return [...customItems, ...defaultItems];
-  }, [actions, profileAction, wishlistAction, cartAction]);
+  }, [actions, profileAction, wishlistAction, cartAction, authMode, onAuthTrigger]);
   React.useEffect(() => {
     if (maxVisibleActions !== "auto") {
       setMeasuredMaxVisible(null);
@@ -154,9 +178,20 @@ const NavActions = ({
           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 })
+              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-primary text-grey-50 text-caption 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 })
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "hidden lg:inline-block font-bold text-caption tracking-[0.0926em] uppercase whitespace-nowrap",
+                  item.labelClassName
+                ),
+                title: !item.isLoading && typeof item.label === "string" ? item.label : void 0,
+                "data-slot": "nav-action-label",
+                children: item.isLoading ? /* @__PURE__ */ jsx(NavActionLabelSkeleton, {}) : item.label
+              }
+            )
           ] });
           const actionClass = cn(
             navActionVariants(),
@@ -200,6 +235,7 @@ const NavActions = ({
               type: "button",
               disabled: item.disabled,
               "aria-label": item.ariaLabel,
+              "aria-busy": item.isLoading || void 0,
               onClick: item.onClick,
               className: actionClass,
               "data-slot": "nav-action-button",
@@ -225,4 +261,4 @@ const NavActions = ({
   );
 };
 
-export { NavActions };
+export { NavActions, PROFILE_LABEL_CLASS };

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

@@ -1 +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,CAiG5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"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;AAK5D,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,CA4F5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -5,6 +5,7 @@ import { cn } from '@timmbr/utils';
 import { resolveNavDestination, isCrossZoneNavigation } from '../NavHeader.helpers.js';
 import { useTimmbrConfig } from '../../../providers/TimmbrConfigProvider.js';
 
+const BRAND_FADE = { duration: 0.2, ease: [0.16, 1, 0.3, 1] };
 const NavBrand = ({
   branding,
   isSearchOpen = false,
@@ -17,6 +18,8 @@ const NavBrand = ({
   const resolvedHref = resolveNavDestination(href, zone, config.zones?.zones) ?? "/";
   const requiresCrossZone = isCrossZoneNavigation(zone, config.zones?.currentZone);
   const showMini = Boolean(isSearchOpen && miniLogo);
+  const visible = { opacity: 1, scale: 1 };
+  const hidden = { opacity: 0, scale: 0.92 };
   const logoNode = /* @__PURE__ */ jsxs(
     "div",
     {
@@ -27,31 +30,27 @@ const NavBrand = ({
           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] },
+            animate: showMini ? hidden : visible,
+            transition: shouldAnimate ? BRAND_FADE : { duration: 0 },
+            "aria-hidden": showMini || void 0,
             className: cn(
-              "flex items-center justify-center shrink-0 transition-opacity",
+              "flex items-center justify-center shrink-0 will-change-[opacity,transform]",
               showMini ? "pointer-events-none" : "pointer-events-auto",
-              !shouldAnimate && (showMini ? "opacity-0" : "opacity-100"),
               motionClass
             ),
             children: logo
           }
         ),
-        showMini && /* @__PURE__ */ jsx(
+        miniLogo && /* @__PURE__ */ jsx(
           motion.div,
           {
-            initial: shouldAnimate ? { opacity: 0, scale: 0.92 } : false,
-            animate: shouldAnimate ? {
-              opacity: 1,
-              scale: 1
-            } : void 0,
-            transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+            initial: false,
+            animate: showMini ? visible : hidden,
+            transition: shouldAnimate ? BRAND_FADE : { duration: 0 },
+            "aria-hidden": !showMini || void 0,
             className: cn(
-              "absolute inset-0 flex items-center justify-center shrink-0 pointer-events-auto",
+              "absolute inset-0 flex items-center justify-center shrink-0 will-change-[opacity,transform]",
+              showMini ? "pointer-events-auto" : "pointer-events-none",
               motionClass
             ),
             children: miniLogo

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

@@ -60,16 +60,16 @@ const NavItems = ({
           };
           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 }),
+            item.badge && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center text-body-3 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",
+                className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary 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" })
+            isActive && !shouldAnimate && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary rounded-full" })
           ] });
           const className = cn(
             navHeaderItemVariants({ active: isActive, disabled: item.disabled }),

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

@@ -59,14 +59,14 @@ const NavItemsOverflow = ({
             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",
+              "px-2 py-2 flex items-center justify-center rounded-lg hover:bg-grey-1000/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" })
+              (isOpen || isChildActive) && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-2 right-2 h-[2.5px] bg-primary rounded-full" })
             ]
           }
         ),
@@ -78,7 +78,7 @@ const NavItemsOverflow = ({
             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",
+              "absolute top-full left-0 mt-2 w-56 bg-grey-50 border border-border-warm shadow-2xl rounded-2xl p-2 z-50 text-left overflow-hidden divide-y divide-grey-100",
               !shouldAnimate && "transition-none",
               motionClass
             ),
@@ -98,13 +98,13 @@ const NavItemsOverflow = ({
                 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 })
+                /* @__PURE__ */ jsx("span", { className: cn("truncate", isActive && "text-primary 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-caption 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]",
+                "w-full flex items-center justify-between gap-3 px-3 py-2 text-body-3 font-semibold text-grey-800 hover:text-primary hover:bg-bg-2/60 rounded-xl transition-colors cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
                 item.disabled && "opacity-40 cursor-not-allowed pointer-events-none",
-                isActive && "bg-[#F7F1E6]/80 text-[#C0643A]",
+                isActive && "bg-bg-2/80 text-primary",
                 item.className
               );
               const handleClick = (e) => {

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

@@ -78,14 +78,14 @@ const NavMobileSearchDrawer = ({
       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__ */ jsxs("div", { className: "w-full bg-[var(--color-bg-2,#F7F1E6)] border-b border-border-warm 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",
+              className: "w-10 h-10 rounded-full flex items-center justify-center text-grey-800 hover:text-primary hover:bg-grey-1000/5 transition-colors cursor-pointer shrink-0",
               "data-slot": "nav-mobile-search-back-btn",
               children: /* @__PURE__ */ jsx(ArrowLeft, { size: 22, className: "stroke-[2]" })
             }
@@ -108,7 +108,7 @@ const NavMobileSearchDrawer = ({
                 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"
+                className: "w-full h-11 pl-10 pr-9 rounded-full bg-grey-50 border border-border-warm text-body-2 text-grey-900 placeholder:text-grey-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all shadow-xs"
               }
             ),
             value.length > 0 && /* @__PURE__ */ jsx(
@@ -125,13 +125,13 @@ const NavMobileSearchDrawer = ({
         ] }),
         /* @__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("h4", { className: "font-title! text-body-3 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",
+                className: "px-3.5 py-1.5 rounded-full bg-grey-50 border border-border-warm text-body-3 font-semibold text-grey-700 hover:border-primary hover:text-primary hover:bg-grey-50 transition-colors cursor-pointer shadow-xs",
                 children: item.label
               },
               item.id

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

@@ -41,10 +41,10 @@ const NavMobileTabSlider = ({
           motion.div,
           {
             layoutId: "active-mobile-tab-indicator",
-            className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full",
+            className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary rounded-full",
             transition: { type: "spring", stiffness: 380, damping: 30 }
           }
-        ) : isActive ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-[#C0643A] rounded-full" }) : null;
+        ) : isActive ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 h-[2.5px] bg-primary rounded-full" }) : null;
         if (resolvedHref && !item.content && !item.disabled) {
           if (CustomLink && !requiresCrossZone) {
             return /* @__PURE__ */ jsxs(