@timmbr/ui 1.3.0 → 1.3.1

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

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

package/dist/components/NavHeader/NavHeader.js

@@ -65,16 +65,28 @@ const NavHeader = React.forwardRef(
     const globalMotion = useGlobalAnimation();
     const { shouldAnimate, motionClass } = resolveMotion(motionProp, globalMotion);
     const isOfferBannerVisible = shorthandShowOfferBanner !== void 0 ? shorthandShowOfferBanner : typeof offerBanner === "object" && offerBanner !== null && "show" in offerBanner ? offerBanner.show ?? true : Boolean(offerBanner);
-    const navigationConfig = Array.isArray(navigation) ? { items: navigation } : navigation ?? {};
-    const navItems = shorthandItems ?? navigationConfig.items ?? [];
+    const navigationConfig = React.useMemo(
+      () => Array.isArray(navigation) ? { items: navigation } : navigation ?? {},
+      [navigation]
+    );
+    const navItems = React.useMemo(
+      () => shorthandItems ?? navigationConfig.items ?? [],
+      [shorthandItems, navigationConfig.items]
+    );
     const isNavItemsVisible = shorthandShowNavItems !== void 0 ? shorthandShowNavItems : navigationConfig.show ?? true;
-    const maxVisibleNavItems = shorthandMaxVisibleNavItems !== void 0 ? shorthandMaxVisibleNavItems : navigationConfig.maxVisibleItems;
+    const maxVisibleNavItems = shorthandMaxVisibleNavItems ?? navigationConfig.maxVisibleItems;
     const controlledActiveId = shorthandActiveItemId !== void 0 ? shorthandActiveItemId : navigationConfig.activeItemId;
     const defaultActiveItemId = shorthandDefaultActiveItemId !== void 0 ? shorthandDefaultActiveItemId : navigationConfig.defaultActiveItemId ?? null;
     const onActiveItemChange = shorthandOnActiveItemChange ?? navigationConfig.onActiveItemChange;
-    const searchConfig = typeof search === "object" && search !== null ? search : {};
+    const searchConfig = React.useMemo(
+      () => typeof search === "object" && search !== null ? search : {},
+      [search]
+    );
     const isSearchVisible = shorthandShowSearch !== void 0 ? shorthandShowSearch : searchConfig.show ?? Boolean(search);
-    const actionsConfig = Array.isArray(actions) ? { items: actions } : actions ?? {};
+    const actionsConfig = React.useMemo(
+      () => Array.isArray(actions) ? { items: actions } : actions ?? {},
+      [actions]
+    );
     const actionItems = actionsConfig.items;
     const isActionsVisible = shorthandShowActions !== void 0 ? shorthandShowActions : actionsConfig.show ?? true;
     const maxVisibleActions = shorthandMaxVisibleActions !== void 0 ? shorthandMaxVisibleActions : actionsConfig.maxVisible;
@@ -83,7 +95,10 @@ const NavHeader = React.forwardRef(
     const profileAction = shorthandProfileAction ?? actionsConfig.profile;
     const wishlistAction = shorthandWishlistAction ?? actionsConfig.wishlist;
     const cartAction = shorthandCartAction ?? actionsConfig.cart;
-    const mobileConfig = mobile ?? {};
+    const mobileConfig = React.useMemo(
+      () => mobile ?? {},
+      [mobile]
+    );
     const tabSliderOption = mobileConfig.tabSlider;
     const tabSliderConfig = typeof tabSliderOption === "object" && tabSliderOption !== null ? tabSliderOption : {};
     const isMobileTabSliderEnabled = shorthandMobileTabSlider !== void 0 ? shorthandMobileTabSlider : typeof tabSliderOption === "boolean" ? tabSliderOption : tabSliderConfig.show ?? true;
@@ -237,7 +252,7 @@ const NavHeader = React.forwardRef(
         window.removeEventListener("resize", handleResize);
         resizeObserver?.disconnect();
       };
-    }, [maxVisibleActions, navItems.length, search]);
+    }, [maxVisibleActions, navItems.length, search, isSearchVisible]);
     const [uncontrolledMobileActiveId, setUncontrolledMobileActiveId] = React.useState(
       defaultMobileActiveItemId
     );

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

@@ -111,7 +111,7 @@ const NavActions = ({
     if (items.length <= limit) {
       return { visibleActions: items, overflowActions: [] };
     }
-    const countToKeep = typeof maxVisibleActions === "number" ? maxVisibleActions : Math.max(1, limit - 1);
+    const countToKeep = Math.max(1, limit - 1);
     const hasPriorities = items.some((i) => i.priority);
     if (!hasPriorities) {
       return {

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,CAmG5C,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;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"}

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

@@ -41,19 +41,17 @@ const NavBrand = ({
             children: logo
           }
         ),
-        miniLogo && /* @__PURE__ */ jsx(
+        showMini && /* @__PURE__ */ jsx(
           motion.div,
           {
-            initial: false,
+            initial: shouldAnimate ? { opacity: 0, scale: 0.92 } : false,
             animate: shouldAnimate ? {
-              opacity: showMini ? 1 : 0,
-              scale: showMini ? 1 : 0.92
+              opacity: 1,
+              scale: 1
             } : 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"),
+              "absolute inset-0 flex items-center justify-center shrink-0 pointer-events-auto",
               motionClass
             ),
             children: miniLogo

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { AnimatePresence, motion, headerMegaMenuVariants, getTransition } from '@timmbr/motion';
+import { AnimatePresence, motion, fadeSlideDownVariants, getTransition } from '@timmbr/motion';
 import { cn } from '@timmbr/utils';
 import { megaMenuCardVariants } from '../NavHeader.styles.js';
 
@@ -50,7 +50,7 @@ const NavMegaMenu = ({
               initial: shouldAnimate ? "hidden" : false,
               animate: shouldAnimate ? "visible" : void 0,
               exit: shouldAnimate ? "exit" : void 0,
-              variants: shouldAnimate ? headerMegaMenuVariants : void 0,
+              variants: shouldAnimate ? fadeSlideDownVariants : void 0,
               transition: getTransition("fast"),
               style: widthStyle,
               "data-slot": "nav-megamenu-card",

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

@@ -71,10 +71,10 @@ const NavMobileSearchDrawer = ({
       role: "dialog",
       "aria-modal": "true",
       "aria-label": "Search drawer",
-      initial: shouldAnimate ? { opacity: 0, y: "-8px" } : false,
-      animate: shouldAnimate ? { opacity: 1, y: 0 } : void 0,
-      exit: shouldAnimate ? { opacity: 0, y: "-8px" } : void 0,
-      transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
+      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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmbr/ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
   "type": "module",
   "main": "./dist/index.js",
@@ -42,10 +42,10 @@
     "@radix-ui/react-tooltip": "^1.2.16",
     "class-variance-authority": "^0.7.1",
     "@timmbr/hooks": "1.0.0-beta",
-    "@timmbr/theme": "1.1.0",
+    "@timmbr/motion": "1.1.0",
     "@timmbr/utils": "1.1.0",
     "@timmbr/icons": "1.2.0",
-    "@timmbr/motion": "1.1.0"
+    "@timmbr/theme": "1.1.0"
   },
   "peerDependencies": {
     "next": ">=13.0.0 || >=14.0.0 || >=15.0.0 || >=16.0.0",