@intlayer/design-system 6.1.5 → 6.1.6

package/dist/components/Navbar/DesktopNavbar.d.ts

@@ -1,11 +1,89 @@
 import { ReactElement, ReactNode } from 'react';
 import { TabProps } from '../TabSelector';
+/**
+ * Props for the DesktopNavbar component
+ * @template T - The tab props type extending TabProps
+ */
 type DesktopNavbarProps<T extends TabProps> = {
+    /** Logo component or element displayed on the left side */
     logo: ReactNode;
+    /** Array of navigation sections as tab elements */
     sections: ReactElement<T>[];
+    /** Right-aligned items (e.g., user menu, search, settings) */
     rightItems?: ReactNode;
+    /** Currently selected tab key for highlighting active state */
     selectedChoice: T['key'];
 };
+/**
+ * Desktop Navigation Bar Component
+ *
+ * A horizontal navigation bar optimized for desktop and tablet viewports.
+ * Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,
+ * and right-aligned utility items.
+ *
+ * Features:
+ * - Sticky positioning with z-index layering (z-50)
+ * - Semi-transparent backdrop with blur effect for modern glass-morphism design
+ * - Responsive spacing that adapts across screen sizes
+ * - Horizontal scrollable tabs for overflow content
+ * - Left-to-right layout: Logo → Navigation → Utility Items
+ * - Integrated with TabSelector for consistent tab behavior
+ *
+ * Layout Structure:
+ * ```
+ * [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]
+ * ```
+ *
+ * Responsive Behavior:
+ * - Base: 2vw margin-left, 3-unit gap between tabs
+ * - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs
+ * - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs
+ * - Right items: 2-unit gap on mobile, 4-unit gap on medium screens
+ *
+ * Styling Features:
+ * - Semi-transparent card background (`bg-card/80`)
+ * - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)
+ * - Backdrop blur effect for content behind navbar
+ * - Horizontal overflow scrolling for tab content
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const navigationTabs = [
+ *   { key: 'home', label: 'Home', href: '/' },
+ *   { key: 'products', label: 'Products', href: '/products' },
+ *   { key: 'about', label: 'About', href: '/about' }
+ * ];
+ *
+ * <DesktopNavbar
+ *   logo={<CompanyLogo />}
+ *   sections={navigationTabs}
+ *   selectedChoice="home"
+ *   rightItems={<UserProfileMenu />}
+ * />
+ * ```
+ *
+ * @example
+ * With multiple right items:
+ * ```tsx
+ * <DesktopNavbar
+ *   logo={<Logo />}
+ *   sections={navSections}
+ *   selectedChoice={currentPage}
+ *   rightItems={
+ *     <>
+ *       <SearchButton />
+ *       <NotificationBell />
+ *       <UserMenu />
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @template T - Tab properties type extending TabProps for type safety
+ * @param props - DesktopNavbar component props
+ * @returns Horizontal desktop navigation JSX element
+ */
 export declare const DesktopNavbar: <T extends TabProps>({ logo, sections, rightItems, selectedChoice, }: DesktopNavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DesktopNavbar.d.ts.map

package/dist/components/Navbar/DesktopNavbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,KAAK,QAAQ,EAAiC,MAAM,gBAAgB,CAAC;AAE9E,KAAK,kBAAkB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC5C,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,EAAE,iDAK/C,kBAAkB,CAAC,CAAC,CAAC,4CAgBvB,CAAC"}
+{"version":3,"file":"DesktopNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,KAAK,QAAQ,EAAiC,MAAM,gBAAgB,CAAC;AAE9E;;;GAGG;AACH,KAAK,kBAAkB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC5C,2DAA2D;IAC3D,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+DAA+D;IAC/D,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,EAAE,iDAK/C,kBAAkB,CAAC,CAAC,CAAC,4CAgBvB,CAAC"}

package/dist/components/Navbar/DesktopNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { type TabProps, TabSelector, TabSelectorColor } from '../TabSelector';\n\ntype DesktopNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  sections: ReactElement<T>[];\n  rightItems?: ReactNode;\n  selectedChoice: T['key'];\n};\n\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => (\n  <nav className=\"bg-card/80 sticky top-0 z-50 flex w-full items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n    {logo}\n\n    <TabSelector\n      selectedChoice={selectedChoice}\n      className=\"text-neutral ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n      tabs={sections}\n      hoverable\n      color={TabSelectorColor.TEXT}\n    />\n\n    <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n      {rightItems}\n    </div>\n  </nav>\n);\n"],"names":[],"mappings":";;;AAaO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,OAAA,EAAI,WAAU,yHACZ,UAAA;AAAA,EAAA;AAAA,EAED;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,MAAM;AAAA,MACN,WAAS;AAAA,MACT,OAAO,iBAAiB;AAAA,IAAA;AAAA,EAAA;AAAA,EAG1B,oBAAC,OAAA,EAAI,WAAU,qDACZ,UAAA,WAAA,CACH;AAAA,EAAA,CACF;"}
+{"version":3,"file":"DesktopNavbar.mjs","sources":["../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { type TabProps, TabSelector, TabSelectorColor } from '../TabSelector';\n\n/**\n * Props for the DesktopNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype DesktopNavbarProps<T extends TabProps> = {\n  /** Logo component or element displayed on the left side */\n  logo: ReactNode;\n  /** Array of navigation sections as tab elements */\n  sections: ReactElement<T>[];\n  /** Right-aligned items (e.g., user menu, search, settings) */\n  rightItems?: ReactNode;\n  /** Currently selected tab key for highlighting active state */\n  selectedChoice: T['key'];\n};\n\n/**\n * Desktop Navigation Bar Component\n *\n * A horizontal navigation bar optimized for desktop and tablet viewports.\n * Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,\n * and right-aligned utility items.\n *\n * Features:\n * - Sticky positioning with z-index layering (z-50)\n * - Semi-transparent backdrop with blur effect for modern glass-morphism design\n * - Responsive spacing that adapts across screen sizes\n * - Horizontal scrollable tabs for overflow content\n * - Left-to-right layout: Logo → Navigation → Utility Items\n * - Integrated with TabSelector for consistent tab behavior\n *\n * Layout Structure:\n * ```\n * [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]\n * ```\n *\n * Responsive Behavior:\n * - Base: 2vw margin-left, 3-unit gap between tabs\n * - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs\n * - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs\n * - Right items: 2-unit gap on mobile, 4-unit gap on medium screens\n *\n * Styling Features:\n * - Semi-transparent card background (`bg-card/80`)\n * - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)\n * - Backdrop blur effect for content behind navbar\n * - Horizontal overflow scrolling for tab content\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navigationTabs = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'products', label: 'Products', href: '/products' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <DesktopNavbar\n *   logo={<CompanyLogo />}\n *   sections={navigationTabs}\n *   selectedChoice=\"home\"\n *   rightItems={<UserProfileMenu />}\n * />\n * ```\n *\n * @example\n * With multiple right items:\n * ```tsx\n * <DesktopNavbar\n *   logo={<Logo />}\n *   sections={navSections}\n *   selectedChoice={currentPage}\n *   rightItems={\n *     <>\n *       <SearchButton />\n *       <NotificationBell />\n *       <UserMenu />\n *     </>\n *   }\n * />\n * ```\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - DesktopNavbar component props\n * @returns Horizontal desktop navigation JSX element\n */\nexport const DesktopNavbar = <T extends TabProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => (\n  <nav className=\"bg-card/80 sticky top-0 z-50 flex w-full items-center px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n    {logo}\n\n    <TabSelector\n      selectedChoice={selectedChoice}\n      className=\"text-neutral ml-[2vw] gap-3 overflow-x-auto tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n      tabs={sections}\n      hoverable\n      color={TabSelectorColor.TEXT}\n    />\n\n    <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n      {rightItems}\n    </div>\n  </nav>\n);\n"],"names":[],"mappings":";;;AA2FO,MAAM,gBAAgB,CAAqB;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,OAAA,EAAI,WAAU,yHACZ,UAAA;AAAA,EAAA;AAAA,EAED;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,MAAM;AAAA,MACN,WAAS;AAAA,MACT,OAAO,iBAAiB;AAAA,IAAA;AAAA,EAAA;AAAA,EAG1B,oBAAC,OAAA,EAAI,WAAU,qDACZ,UAAA,WAAA,CACH;AAAA,EAAA,CACF;"}

package/dist/components/Navbar/MobileNavbar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.cjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\ntype MobileNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: ReactElement<T>[];\n  bottomChildren?: ReactNode;\n  bottomSections?: ReactElement<T>[];\n  rightItems?: ReactNode;\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["useState","useRef","useScrollBlockage","useScrollDetection","jsxs","cn","jsx","Burger","isUnrolled","MaxHeightSmoother","m"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAA;AAAA,EAAI;AAAA,EAE1D,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAA;AAAA,EAAG;AAE9D;AAEA,MAAM,UACJ;AAEK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAA;AAAA,EACd;AAAA,EACA,iBAAiB,CAAA;AAAA,EACjB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAkB,KAAK;AAE3D,QAAM,SAASC,aAAAA,OAAuB,IAAI;AAE1CC,kDAAkB;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAEDC,8CAAmB;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAEpE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MAAA;AAAA,MAEnC,IAAG;AAAA,MAEH,UAAA;AAAA,QAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAEDA,2BAAAA,KAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,gBAAAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,8CACZ,UAAA,YACH;AAAA,gBAEC,kBACCA,2BAAAA;AAAAA,kBAACC,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACC,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC1D,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAAC,2BAAAA,IAACG,sDAAA,EAAkB,UAAU,CAAC,YAC5B,UAAAL,2BAAAA;AAAAA,cAACM,aAAAA,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBAAA;AAAA,gBAGtC,UAAA;AAAA,kBAAA;AAAA,kBACDN,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAEAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,gFACZ,UAAA,eAAA,CACH;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,EACF,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"MobileNavbar.cjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with collapsible full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - Collapsible hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with collapsible full-screen menu\n */\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["useState","useRef","useScrollBlockage","useScrollDetection","jsxs","cn","jsx","Burger","isUnrolled","MaxHeightSmoother","m"],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAA;AAAA,EAAI;AAAA,EAE1D,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAA;AAAA,EAAG;AAE9D;AAMA,MAAM,UACJ;AAgFK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAA;AAAA,EACd;AAAA,EACA,iBAAiB,CAAA;AAAA,EACjB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAIA,aAAAA,SAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAkB,KAAK;AAE3D,QAAM,SAASC,aAAAA,OAAuB,IAAI;AAE1CC,kDAAkB;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAEDC,8CAAmB;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAEpE,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MAAA;AAAA,MAEnC,IAAG;AAAA,MAEH,UAAA;AAAA,QAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAEDA,2BAAAA,KAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,gBAAAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,8CACZ,UAAA,YACH;AAAA,gBAEC,kBACCA,2BAAAA;AAAAA,kBAACC,yBAAAA;AAAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACC,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC1D,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAAC,2BAAAA,IAACG,sDAAA,EAAkB,UAAU,CAAC,YAC5B,UAAAL,2BAAAA;AAAAA,cAACM,aAAAA,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBAAA;AAAA,gBAGtC,UAAA;AAAA,kBAAA;AAAA,kBACDN,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAEAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,gFACZ,UAAA,eAAA,CACH;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,EACF,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/components/Navbar/MobileNavbar.d.ts

@@ -1,13 +1,101 @@
 import { ReactElement, ReactNode } from 'react';
 import { TabProps } from '../TabSelector';
+/**
+ * Props for the MobileNavbar component
+ * @template T - The tab props type extending TabProps
+ */
 type MobileNavbarProps<T extends TabProps> = {
+    /** Logo component or element displayed in the header */
     logo: ReactNode;
+    /** Additional content displayed at the top of expanded mobile menu */
     topChildren?: ReactNode;
+    /** Navigation sections displayed in the top area of expanded menu */
     topSections?: ReactElement<T>[];
+    /** Additional content displayed at the bottom of expanded mobile menu */
     bottomChildren?: ReactNode;
+    /** Navigation sections displayed in the bottom area of expanded menu */
     bottomSections?: ReactElement<T>[];
+    /** Right-aligned items in the collapsed header (e.g., search, notifications) */
     rightItems?: ReactNode;
 };
+/**
+ * Mobile Navigation Bar Component
+ *
+ * A sophisticated mobile-first navigation component with collapsible full-screen menu,
+ * scroll-aware behavior, and smooth animations. Optimized for touch interactions and
+ * mobile user experience patterns.
+ *
+ * Features:
+ * - Collapsible hamburger menu with full-screen overlay
+ * - Auto-hide on scroll down, show on scroll up for screen space optimization
+ * - Background scroll prevention when menu is open
+ * - Staggered animations for smooth menu item reveals
+ * - Flexible content areas (top/bottom children and sections)
+ * - Responsive layout with viewport-aware sizing
+ * - Backdrop blur effects for modern glass-morphism design
+ *
+ * Layout Structure:
+ * ```
+ * [Logo] ----------- [Right Items] [Burger]
+ *           (when expanded)
+ * ┌─────────────────────────────────────────┐
+ * │ [Top Children]                          │
+ * │ [Top Sections - Navigation Items]       │
+ * │ [Bottom Sections - Navigation Items]    │
+ * │ [Bottom Children]                       │
+ * └─────────────────────────────────────────┘
+ * ```
+ *
+ * Behavioral Features:
+ * - Sticky positioning with dynamic hide/show based on scroll direction
+ * - Background scroll locking when menu is expanded
+ * - Click outside to close expanded menu
+ * - Smooth height animations with MaxHeightSmoother
+ * - Intelligent burger button visibility (only shown if sections exist)
+ *
+ * Animation Details:
+ * - Menu items animate in with staggered timing (70ms delay between items)
+ * - Exit animations are reversed with 50ms stagger
+ * - Initial delay of 200ms before items start animating in
+ * - Full viewport height menu with dynamic height calculation
+ *
+ * @example
+ * Basic mobile navbar:
+ * ```tsx
+ * <MobileNavbar
+ *   logo={<MobileLogo />}
+ *   topSections={primaryNavItems}
+ *   rightItems={<SearchIcon />}
+ * />
+ * ```
+ *
+ * @example
+ * Full-featured mobile navbar:
+ * ```tsx
+ * <MobileNavbar
+ *   logo={<Logo />}
+ *   topChildren={<WelcomeMessage />}
+ *   topSections={mainNavItems}
+ *   bottomSections={utilityNavItems}
+ *   bottomChildren={<UserProfile />}
+ *   rightItems={
+ *     <>
+ *       <NotificationIcon />
+ *       <SearchIcon />
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * Accessibility Features:
+ * - Menu expanded state communicated via aria-expanded
+ * - Focus management and keyboard navigation support
+ * - Screen reader friendly with semantic nav structure
+ *
+ * @template T - Tab properties type extending TabProps for type safety
+ * @param props - MobileNavbar component props
+ * @returns Mobile navigation with collapsible full-screen menu
+ */
 export declare const MobileNavbar: <T extends TabProps>({ logo, topChildren, topSections, bottomChildren, bottomSections, rightItems, }: MobileNavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=MobileNavbar.d.ts.map

package/dist/components/Navbar/MobileNavbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C,KAAK,iBAAiB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC3C,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAcF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,QAAQ,EAAE,iFAO9C,iBAAiB,CAAC,CAAC,CAAC,4CAgFtB,CAAC"}
+{"version":3,"file":"MobileNavbar.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI5E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG/C;;;GAGG;AACH,KAAK,iBAAiB,CAAC,CAAC,SAAS,QAAQ,IAAI;IAC3C,wDAAwD;IACxD,IAAI,EAAE,SAAS,CAAC;IAChB,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,qEAAqE;IACrE,WAAW,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,yEAAyE;IACzE,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,wEAAwE;IACxE,cAAc,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACnC,gFAAgF;IAChF,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC;AAsBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,QAAQ,EAAE,iFAO9C,iBAAiB,CAAC,CAAC,CAAC,4CAgFtB,CAAC"}

package/dist/components/Navbar/MobileNavbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.mjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\ntype MobileNavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  topChildren?: ReactNode;\n  topSections?: ReactElement<T>[];\n  bottomChildren?: ReactNode;\n  bottomSections?: ReactElement<T>[];\n  rightItems?: ReactNode;\n};\n\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["isUnrolled"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAA;AAAA,EAAI;AAAA,EAE1D,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAA;AAAA,EAAG;AAE9D;AAEA,MAAM,UACJ;AAEK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAA;AAAA,EACd;AAAA,EACA,iBAAiB,CAAA;AAAA,EACjB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAE3D,QAAM,SAAS,OAAuB,IAAI;AAE1C,oBAAkB;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAED,qBAAmB;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAEpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MAAA;AAAA,MAEnC,IAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,gBAAA,oBAAC,OAAA,EAAI,WAAU,8CACZ,UAAA,YACH;AAAA,gBAEC,kBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACA,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC1D,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA,oBAAC,mBAAA,EAAkB,UAAU,CAAC,YAC5B,UAAA;AAAA,cAAC,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBAAA;AAAA,gBAGtC,UAAA;AAAA,kBAAA;AAAA,kBACD,qBAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAEA,oBAAC,OAAA,EAAI,WAAU,gFACZ,UAAA,eAAA,CACH;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,EACF,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"MobileNavbar.mjs","sources":["../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { useRef, useState, type ReactElement, type ReactNode } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with collapsible full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - Collapsible hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with collapsible full-screen menu\n */\nexport const MobileNavbar = <T extends TabProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"text-text flex w-full flex-col pb-[20%] pt-10 text-lg tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"names":["isUnrolled"],"mappings":";;;;;;;;;;;;;;AAiCA,MAAM,cAAwB;AAAA,EAC5B,MAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,MAAM,eAAe,IAAA;AAAA,EAAI;AAAA,EAE1D,QAAQ;AAAA,IACN,YAAY,EAAE,iBAAiB,MAAM,kBAAkB,GAAA;AAAA,EAAG;AAE9D;AAMA,MAAM,UACJ;AAgFK,MAAM,eAAe,CAAqB;AAAA,EAC/C;AAAA,EACA;AAAA,EACA,cAAc,CAAA;AAAA,EACd;AAAA,EACA,iBAAiB,CAAA;AAAA,EACjB;AACF,MAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AACvD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,KAAK;AAE3D,QAAM,SAAS,OAAuB,IAAI;AAE1C,oBAAkB;AAAA,IAChB,eAAe;AAAA,IACf,KAAK;AAAA,EAAA,CACN;AAED,qBAAmB;AAAA,IACjB,YAAY,MAAM,YAAY,KAAK;AAAA,IACnC,cAAc,MAAM,YAAY,IAAI;AAAA,IACpC,WAAW,CAAC;AAAA,EAAA,CACb;AAED,QAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;AAExE,QAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAEpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,sBAAsB;AAAA,MAAA;AAAA,MAEnC,IAAG;AAAA,MAEH,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,cAED,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,gBAAA,oBAAC,OAAA,EAAI,WAAU,8CACZ,UAAA,YACH;AAAA,gBAEC,kBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,UAAU;AAAA,oBACV,SAAS,MAAM,cAAc,CAACA,gBAAe,CAACA,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAC1D,EAAA,CAEJ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA,oBAAC,mBAAA,EAAkB,UAAU,CAAC,YAC5B,UAAA;AAAA,cAAC,EAAE;AAAA,cAAF;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,MAAM,cAAc,KAAK;AAAA,gBAClC,SAAS,aAAa,SAAS;AAAA,gBAC/B,UAAU;AAAA,gBACV,OAAO;AAAA,kBACL,QAAQ,gBAAgB,aAAa;AAAA,gBAAA;AAAA,gBAGtC,UAAA;AAAA,kBAAA;AAAA,kBACD,qBAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,GACH;AAAA,kBAEA,oBAAC,OAAA,EAAI,WAAU,gFACZ,UAAA,eAAA,CACH;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,EACF,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Navbar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport type { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\ntype NavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  selectedChoice: T['key'];\n  desktopSections?: ReactElement<T>[];\n  mobileTopChildren?: ReactNode;\n  mobileTopSections?: ReactElement<T>[];\n  mobileBottomChildren?: ReactNode;\n  mobileBottomSections?: ReactElement<T>[];\n  rightItemsDesktop?: ReactNode;\n  rightItemsMobile?: ReactNode;\n};\n\nexport const Navbar = <T extends TabProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"names":["useDevice","useIsMounted","jsx","Fragment","MobileNavbar","DesktopNavbar"],"mappings":";;;;;;;;;;;;;;;AAoBO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAA;AAAA,EAClB,oBAAoB,CAAA;AAAA,EACpB;AAAA,EACA,uBAAuB,CAAA;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,EAAE,SAAA,IAAaA,gBAAAA,UAAU,IAAI;AACnC,QAAM,YAAYC,mBAAAA,aAAA;AAElB,MAAI,CAAC,UAAW,QAAOC,+BAAAC,WAAAA,UAAA,CAAA,CAAE;AAEzB,SAAO,WACLD,2BAAAA;AAAAA,IAACE,+BAAAA;AAAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdF,2BAAAA;AAAAA,IAACG,gCAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport type { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport const Navbar = <T extends TabProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"names":["useDevice","useIsMounted","jsx","Fragment","MobileNavbar","DesktopNavbar"],"mappings":";;;;;;;;;;;;;;;AAyFO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAA;AAAA,EAClB,oBAAoB,CAAA;AAAA,EACpB;AAAA,EACA,uBAAuB,CAAA;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,EAAE,SAAA,IAAaA,gBAAAA,UAAU,IAAI;AACnC,QAAM,YAAYC,mBAAAA,aAAA;AAElB,MAAI,CAAC,UAAW,QAAOC,+BAAAC,WAAAA,UAAA,CAAA,CAAE;AAEzB,SAAO,WACLD,2BAAAA;AAAAA,IAACE,+BAAAA;AAAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGdF,2BAAAA;AAAAA,IAACG,gCAAAA;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

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

@@ -1,16 +1,85 @@
 import { ReactElement, ReactNode } from 'react';
 import { TabProps } from '../TabSelector';
+/**
+ * Props for the responsive Navbar component
+ * @template T - The tab props type extending TabProps
+ */
 type NavbarProps<T extends TabProps> = {
+    /** Logo component or element to display in navbar */
     logo: ReactNode;
+    /** Currently selected tab key for active state management */
     selectedChoice: T['key'];
+    /** Navigation sections displayed on desktop layout */
     desktopSections?: ReactElement<T>[];
+    /** Additional content displayed at top of mobile navbar */
     mobileTopChildren?: ReactNode;
+    /** Navigation sections displayed at top of mobile navbar */
     mobileTopSections?: ReactElement<T>[];
+    /** Additional content displayed at bottom of mobile navbar */
     mobileBottomChildren?: ReactNode;
+    /** Navigation sections displayed at bottom of mobile navbar */
     mobileBottomSections?: ReactElement<T>[];
+    /** Right-aligned items for desktop navbar (e.g., user menu, settings) */
     rightItemsDesktop?: ReactNode;
+    /** Right-aligned items for mobile navbar */
     rightItemsMobile?: ReactNode;
 };
+/**
+ * Responsive Navbar Component
+ *
+ * A highly adaptable navigation component that automatically switches between desktop and mobile
+ * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.
+ *
+ * Features:
+ * - Automatic responsive switching at 'lg' breakpoint (1024px)
+ * - Separate section configurations for desktop and mobile layouts
+ * - Support for logo placement and right-aligned utility items
+ * - Generic typing for tab properties and selected states
+ * - Mobile-specific top/bottom content areas for enhanced mobile UX
+ * - Hydration-safe rendering with useIsMounted hook
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const navSections = [
+ *   { key: 'home', label: 'Home', href: '/' },
+ *   { key: 'about', label: 'About', href: '/about' }
+ * ];
+ *
+ * <Navbar
+ *   logo={<Logo />}
+ *   selectedChoice="home"
+ *   desktopSections={navSections}
+ *   mobileTopSections={navSections}
+ *   rightItemsDesktop={<UserMenu />}
+ * />
+ * ```
+ *
+ * @example
+ * Advanced mobile configuration:
+ * ```tsx
+ * <Navbar
+ *   logo={<Logo />}
+ *   selectedChoice={activeTab}
+ *   desktopSections={mainNavItems}
+ *   mobileTopSections={primaryMobileNavItems}
+ *   mobileTopChildren={<SearchBar />}
+ *   mobileBottomSections={secondaryMobileNavItems}
+ *   mobileBottomChildren={<UserProfile />}
+ *   rightItemsDesktop={<DesktopActions />}
+ *   rightItemsMobile={<MobileActions />}
+ * />
+ * ```
+ *
+ * Responsive Behavior:
+ * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout
+ * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout
+ * - Automatic detection with no flash of unstyled content
+ *
+ * @template T - Tab properties type extending TabProps for type safety
+ * @param props - Navbar component props
+ * @returns Responsive navbar JSX element
+ */
 export declare const Navbar: <T extends TabProps>({ logo, mobileTopChildren, desktopSections, mobileTopSections, mobileBottomChildren, mobileBottomSections, rightItemsDesktop, rightItemsMobile, selectedChoice, }: NavbarProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ,IAAI;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,eAAe,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,oBAAoB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,EAAE,mKAUxC,WAAW,CAAC,CAAC,CAAC,4CAuBhB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAI/C;;;GAGG;AACH,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ,IAAI;IACrC,qDAAqD;IACrD,IAAI,EAAE,SAAS,CAAC;IAChB,6DAA6D;IAC7D,cAAc,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IACzB,sDAAsD;IACtD,eAAe,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,2DAA2D;IAC3D,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACtC,8DAA8D;IAC9D,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC,+DAA+D;IAC/D,oBAAoB,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,SAAS,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,EAAE,mKAUxC,WAAW,CAAC,CAAC,CAAC,4CAuBhB,CAAC"}

package/dist/components/Navbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport type { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\ntype NavbarProps<T extends TabProps> = {\n  logo: ReactNode;\n  selectedChoice: T['key'];\n  desktopSections?: ReactElement<T>[];\n  mobileTopChildren?: ReactNode;\n  mobileTopSections?: ReactElement<T>[];\n  mobileBottomChildren?: ReactNode;\n  mobileBottomSections?: ReactElement<T>[];\n  rightItemsDesktop?: ReactNode;\n  rightItemsMobile?: ReactNode;\n};\n\nexport const Navbar = <T extends TabProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAA;AAAA,EAClB,oBAAoB,CAAA;AAAA,EACpB;AAAA,EACA,uBAAuB,CAAA;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,EAAE,SAAA,IAAa,UAAU,IAAI;AACnC,QAAM,YAAY,aAAA;AAElB,MAAI,CAAC,UAAW,QAAO,oBAAA,UAAA,CAAA,CAAE;AAEzB,SAAO,WACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { useDevice, useIsMounted } from '../../hooks';\nimport type { TabProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport const Navbar = <T extends TabProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AAyFO,MAAM,SAAS,CAAqB;AAAA,EACzC;AAAA,EACA;AAAA,EACA,kBAAkB,CAAA;AAAA,EAClB,oBAAoB,CAAA;AAAA,EACpB;AAAA,EACA,uBAAuB,CAAA;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,EAAE,SAAA,IAAa,UAAU,IAAI;AACnC,QAAM,YAAY,aAAA;AAElB,MAAI,CAAC,UAAW,QAAO,oBAAA,UAAA,CAAA,CAAE;AAEzB,SAAO,WACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB,gBAAgB;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,IAAA;AAAA,EAAA,IAGd;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Navbar/useNavigation.cjs

@@ -51,7 +51,14 @@ const useNavActions = () => {
       onClick?.();
     }
   };
-  return { activeSection, onClickLogo, onClickSection };
+  return {
+    /** Currently active section ID, null if no section is active */
+    activeSection,
+    /** Handler for logo click interactions */
+    onClickLogo,
+    /** Handler for section navigation clicks */
+    onClickSection
+  };
 };
 exports.useNavActions = useNavActions;
 //# sourceMappingURL=useNavigation.cjs.map

package/dist/components/Navbar/useNavigation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigation.cjs","sources":["../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\ninterface SectionData {\n  id: string;\n  offsetTop: number;\n  offsetHeight: number;\n}\n\nexport const useNavActions = () => {\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n\n  const detectActiveSection = () => {\n    const scrollY = window.scrollY;\n    const sections = document.querySelectorAll('section');\n    const sectionsData: SectionData[] = [];\n\n    sections.forEach((section) =>\n      sectionsData.push({\n        id: section.id,\n        offsetTop: section.offsetTop,\n        offsetHeight: section.offsetHeight,\n      })\n    );\n\n    const currentSection = sectionsData.find(\n      (section) =>\n        section.offsetTop <= scrollY + window.screen.height / 4 &&\n        section.offsetTop + section.offsetHeight >\n          scrollY + window.screen.height / 4\n    );\n\n    if (currentSection) {\n      setActiveSection(currentSection.id);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', detectActiveSection);\n    };\n  }, []);\n\n  const onClickLogo = (onClick: (url: string) => void) => {\n    setActiveSection(null);\n\n    if (window.location.pathname === '/') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      onClick('/');\n    }\n  };\n\n  const onClickSection = (\n    sectionId: string,\n    url?: string,\n    onClick?: () => void\n  ) => {\n    setActiveSection(sectionId);\n\n    if (window.location.pathname === url) {\n      const sectionEl = document.getElementById(sectionId);\n\n      if (sectionEl) {\n        sectionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        });\n      }\n    } else {\n      onClick?.();\n    }\n  };\n\n  return { activeSection, onClickLogo, onClickSection };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAUO,MAAM,gBAAgB,MAAM;AACjC,QAAM,CAAC,eAAe,gBAAgB,IAAIA,aAAAA,SAAwB,IAAI;AAEtE,QAAM,sBAAsB,MAAM;AAChC,UAAM,UAAU,OAAO;AACvB,UAAM,WAAW,SAAS,iBAAiB,SAAS;AACpD,UAAM,eAA8B,CAAA;AAEpC,aAAS;AAAA,MAAQ,CAAC,YAChB,aAAa,KAAK;AAAA,QAChB,IAAI,QAAQ;AAAA,QACZ,WAAW,QAAQ;AAAA,QACnB,cAAc,QAAQ;AAAA,MAAA,CACvB;AAAA,IAAA;AAGH,UAAM,iBAAiB,aAAa;AAAA,MAClC,CAAC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS;AAAA,IAAA;AAGvC,QAAI,gBAAgB;AAClB,uBAAiB,eAAe,EAAE;AAAA,IACpC;AAAA,EACF;AAEAC,eAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM;AAExE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,cAAc,CAAC,YAAmC;AACtD,qBAAiB,IAAI;AAErB,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,aAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,IAChD,OAAO;AACL,cAAQ,GAAG;AAAA,IACb;AAAA,EACF;AAEA,QAAM,iBAAiB,CACrB,WACA,KACA,YACG;AACH,qBAAiB,SAAS;AAE1B,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,YAAM,YAAY,SAAS,eAAe,SAAS;AAEnD,UAAI,WAAW;AACb,kBAAU,eAAe;AAAA,UACvB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA,CACT;AAAA,MACH;AAAA,IACF,OAAO;AACL,gBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe,aAAa,eAAA;AACvC;;"}
+{"version":3,"file":"useNavigation.cjs","sources":["../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Interface describing section data used for scroll detection\n */\ninterface SectionData {\n  /** Unique identifier of the section element */\n  id: string;\n  /** Distance from top of document to section start */\n  offsetTop: number;\n  /** Height of the section element */\n  offsetHeight: number;\n}\n\n/**\n * Navigation Actions Hook\n *\n * A comprehensive hook for managing navigation interactions and scroll-based section detection.\n * Provides automatic active section detection based on scroll position and handles smooth\n * scrolling navigation behaviors.\n *\n * Features:\n * - Automatic active section detection based on scroll position\n * - Smooth scrolling to sections within the same page\n * - Logo click handling with home navigation\n * - Section click handling with conditional scrolling vs navigation\n * - Passive scroll event listeners for optimal performance\n * - Viewport-aware active section calculation (using screen height / 4 offset)\n *\n * Active Section Detection:\n * - Monitors all `<section>` elements on the page\n * - Calculates which section is currently in the \"active\" zone\n * - Active zone is defined as the top 25% of the viewport\n * - Updates activeSection state as user scrolls\n *\n * Navigation Behaviors:\n * - Logo click: Scrolls to top if on home page, navigates to home if on other pages\n * - Section click: Smooth scrolls if on same page, executes callback if different page\n * - All scrolling uses smooth behavior for better UX\n *\n * @example\n * Basic usage in navigation component:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n *\n * // In navigation items\n * const navItems = sections.map(section => (\n *   <TabSelectorItem\n *     key={section.id}\n *     isActive={activeSection === section.id}\n *     onClick={() => onClickSection(section.id, section.url, section.onClick)}\n *   >\n *     {section.label}\n *   </TabSelectorItem>\n * ));\n *\n * // In logo\n * <Logo onClick={() => onClickLogo(navigate)} />\n * ```\n *\n * @example\n * Advanced usage with routing:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n * const navigate = useNavigate();\n *\n * const handleLogoClick = () => {\n *   onClickLogo((url) => {\n *     navigate(url);\n *     // Additional logic like analytics\n *     trackEvent('logo_click');\n *   });\n * };\n *\n * const handleSectionClick = (sectionId: string) => {\n *   onClickSection(\n *     sectionId,\n *     `/page#${sectionId}`,\n *     () => {\n *       navigate(`/page#${sectionId}`);\n *       trackEvent('section_navigation', { sectionId });\n *     }\n *   );\n * };\n * ```\n *\n * Performance Considerations:\n * - Uses passive scroll event listeners to prevent blocking\n * - Automatically cleans up event listeners on unmount\n * - Efficiently queries DOM elements using native selectors\n * - Calculates section positions dynamically for accuracy\n *\n * @returns Object containing navigation state and action handlers\n */\nexport const useNavActions = () => {\n  /** Currently active section ID based on scroll position */\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n\n  /**\n   * Detects which section is currently active based on scroll position\n   * Uses viewport-aware calculation to determine active section\n   */\n  const detectActiveSection = () => {\n    const scrollY = window.scrollY;\n    const sections = document.querySelectorAll('section');\n    const sectionsData: SectionData[] = [];\n\n    // Collect position data for all sections\n    sections.forEach((section) =>\n      sectionsData.push({\n        id: section.id,\n        offsetTop: section.offsetTop,\n        offsetHeight: section.offsetHeight,\n      })\n    );\n\n    // Find section that intersects with the active zone (top 25% of viewport)\n    const currentSection = sectionsData.find(\n      (section) =>\n        section.offsetTop <= scrollY + window.screen.height / 4 &&\n        section.offsetTop + section.offsetHeight >\n          scrollY + window.screen.height / 4\n    );\n\n    if (currentSection) {\n      setActiveSection(currentSection.id);\n    }\n  };\n\n  // Set up scroll listener for active section detection\n  useEffect(() => {\n    window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', detectActiveSection);\n    };\n  }, []);\n\n  /**\n   * Handles logo click behavior\n   * Scrolls to top if on home page, navigates to home if on other pages\n   *\n   * @param onClick - Callback function to handle navigation (e.g., router.push)\n   */\n  const onClickLogo = (onClick: (url: string) => void) => {\n    setActiveSection(null);\n\n    if (window.location.pathname === '/') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      onClick('/');\n    }\n  };\n\n  /**\n   * Handles section navigation click behavior\n   * Smooth scrolls if on same page, executes callback if different page\n   *\n   * @param sectionId - ID of the target section element\n   * @param url - URL of the page containing the section (optional)\n   * @param onClick - Callback function to handle navigation (optional)\n   */\n  const onClickSection = (\n    sectionId: string,\n    url?: string,\n    onClick?: () => void\n  ) => {\n    setActiveSection(sectionId);\n\n    // If on the same page, scroll to section\n    if (window.location.pathname === url) {\n      const sectionEl = document.getElementById(sectionId);\n\n      if (sectionEl) {\n        sectionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        });\n      }\n    } else {\n      // If on different page, execute callback (typically navigation)\n      onClick?.();\n    }\n  };\n\n  return {\n    /** Currently active section ID, null if no section is active */\n    activeSection,\n    /** Handler for logo click interactions */\n    onClickLogo,\n    /** Handler for section navigation clicks */\n    onClickSection,\n  };\n};\n"],"names":["useState","useEffect"],"mappings":";;;;AAgGO,MAAM,gBAAgB,MAAM;AAEjC,QAAM,CAAC,eAAe,gBAAgB,IAAIA,aAAAA,SAAwB,IAAI;AAMtE,QAAM,sBAAsB,MAAM;AAChC,UAAM,UAAU,OAAO;AACvB,UAAM,WAAW,SAAS,iBAAiB,SAAS;AACpD,UAAM,eAA8B,CAAA;AAGpC,aAAS;AAAA,MAAQ,CAAC,YAChB,aAAa,KAAK;AAAA,QAChB,IAAI,QAAQ;AAAA,QACZ,WAAW,QAAQ;AAAA,QACnB,cAAc,QAAQ;AAAA,MAAA,CACvB;AAAA,IAAA;AAIH,UAAM,iBAAiB,aAAa;AAAA,MAClC,CAAC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS;AAAA,IAAA;AAGvC,QAAI,gBAAgB;AAClB,uBAAiB,eAAe,EAAE;AAAA,IACpC;AAAA,EACF;AAGAC,eAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM;AAExE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAA,CAAE;AAQL,QAAM,cAAc,CAAC,YAAmC;AACtD,qBAAiB,IAAI;AAErB,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,aAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,IAChD,OAAO;AACL,cAAQ,GAAG;AAAA,IACb;AAAA,EACF;AAUA,QAAM,iBAAiB,CACrB,WACA,KACA,YACG;AACH,qBAAiB,SAAS;AAG1B,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,YAAM,YAAY,SAAS,eAAe,SAAS;AAEnD,UAAI,WAAW;AACb,kBAAU,eAAe;AAAA,UACvB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA,CACT;AAAA,MACH;AAAA,IACF,OAAO;AAEL,gBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ;;"}

package/dist/components/Navbar/useNavigation.d.ts

@@ -1,6 +1,89 @@
+/**
+ * Navigation Actions Hook
+ *
+ * A comprehensive hook for managing navigation interactions and scroll-based section detection.
+ * Provides automatic active section detection based on scroll position and handles smooth
+ * scrolling navigation behaviors.
+ *
+ * Features:
+ * - Automatic active section detection based on scroll position
+ * - Smooth scrolling to sections within the same page
+ * - Logo click handling with home navigation
+ * - Section click handling with conditional scrolling vs navigation
+ * - Passive scroll event listeners for optimal performance
+ * - Viewport-aware active section calculation (using screen height / 4 offset)
+ *
+ * Active Section Detection:
+ * - Monitors all `<section>` elements on the page
+ * - Calculates which section is currently in the "active" zone
+ * - Active zone is defined as the top 25% of the viewport
+ * - Updates activeSection state as user scrolls
+ *
+ * Navigation Behaviors:
+ * - Logo click: Scrolls to top if on home page, navigates to home if on other pages
+ * - Section click: Smooth scrolls if on same page, executes callback if different page
+ * - All scrolling uses smooth behavior for better UX
+ *
+ * @example
+ * Basic usage in navigation component:
+ * ```tsx
+ * const { activeSection, onClickLogo, onClickSection } = useNavActions();
+ *
+ * // In navigation items
+ * const navItems = sections.map(section => (
+ *   <TabSelectorItem
+ *     key={section.id}
+ *     isActive={activeSection === section.id}
+ *     onClick={() => onClickSection(section.id, section.url, section.onClick)}
+ *   >
+ *     {section.label}
+ *   </TabSelectorItem>
+ * ));
+ *
+ * // In logo
+ * <Logo onClick={() => onClickLogo(navigate)} />
+ * ```
+ *
+ * @example
+ * Advanced usage with routing:
+ * ```tsx
+ * const { activeSection, onClickLogo, onClickSection } = useNavActions();
+ * const navigate = useNavigate();
+ *
+ * const handleLogoClick = () => {
+ *   onClickLogo((url) => {
+ *     navigate(url);
+ *     // Additional logic like analytics
+ *     trackEvent('logo_click');
+ *   });
+ * };
+ *
+ * const handleSectionClick = (sectionId: string) => {
+ *   onClickSection(
+ *     sectionId,
+ *     `/page#${sectionId}`,
+ *     () => {
+ *       navigate(`/page#${sectionId}`);
+ *       trackEvent('section_navigation', { sectionId });
+ *     }
+ *   );
+ * };
+ * ```
+ *
+ * Performance Considerations:
+ * - Uses passive scroll event listeners to prevent blocking
+ * - Automatically cleans up event listeners on unmount
+ * - Efficiently queries DOM elements using native selectors
+ * - Calculates section positions dynamically for accuracy
+ *
+ * @returns Object containing navigation state and action handlers
+ */
 export declare const useNavActions: () => {
+    /** Currently active section ID, null if no section is active */
     activeSection: string | null;
+    /** Handler for logo click interactions */
     onClickLogo: (onClick: (url: string) => void) => void;
+    /** Handler for section navigation clicks */
     onClickSection: (sectionId: string, url?: string, onClick?: () => void) => void;
 };
 //# sourceMappingURL=useNavigation.d.ts.map

package/dist/components/Navbar/useNavigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/useNavigation.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa;;2BAoCM,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;gCAWtC,MAAM,QACX,MAAM,YACF,MAAM,IAAI;CAoBvB,CAAC"}
+{"version":3,"file":"useNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/useNavigation.ts"],"names":[],"mappings":"AAgBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,eAAO,MAAM,aAAa;IA6FtB,gEAAgE;;IAEhE,0CAA0C;2BA7Cd,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI;IA+CjD,4CAA4C;gCA5BjC,MAAM,QACX,MAAM,YACF,MAAM,IAAI;CA6BvB,CAAC"}

package/dist/components/Navbar/useNavigation.mjs

@@ -49,7 +49,14 @@ const useNavActions = () => {
       onClick?.();
     }
   };
-  return { activeSection, onClickLogo, onClickSection };
+  return {
+    /** Currently active section ID, null if no section is active */
+    activeSection,
+    /** Handler for logo click interactions */
+    onClickLogo,
+    /** Handler for section navigation clicks */
+    onClickSection
+  };
 };
 export {
   useNavActions

package/dist/components/Navbar/useNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigation.mjs","sources":["../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\ninterface SectionData {\n  id: string;\n  offsetTop: number;\n  offsetHeight: number;\n}\n\nexport const useNavActions = () => {\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n\n  const detectActiveSection = () => {\n    const scrollY = window.scrollY;\n    const sections = document.querySelectorAll('section');\n    const sectionsData: SectionData[] = [];\n\n    sections.forEach((section) =>\n      sectionsData.push({\n        id: section.id,\n        offsetTop: section.offsetTop,\n        offsetHeight: section.offsetHeight,\n      })\n    );\n\n    const currentSection = sectionsData.find(\n      (section) =>\n        section.offsetTop <= scrollY + window.screen.height / 4 &&\n        section.offsetTop + section.offsetHeight >\n          scrollY + window.screen.height / 4\n    );\n\n    if (currentSection) {\n      setActiveSection(currentSection.id);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', detectActiveSection);\n    };\n  }, []);\n\n  const onClickLogo = (onClick: (url: string) => void) => {\n    setActiveSection(null);\n\n    if (window.location.pathname === '/') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      onClick('/');\n    }\n  };\n\n  const onClickSection = (\n    sectionId: string,\n    url?: string,\n    onClick?: () => void\n  ) => {\n    setActiveSection(sectionId);\n\n    if (window.location.pathname === url) {\n      const sectionEl = document.getElementById(sectionId);\n\n      if (sectionEl) {\n        sectionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        });\n      }\n    } else {\n      onClick?.();\n    }\n  };\n\n  return { activeSection, onClickLogo, onClickSection };\n};\n"],"names":[],"mappings":";;AAUO,MAAM,gBAAgB,MAAM;AACjC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AAEtE,QAAM,sBAAsB,MAAM;AAChC,UAAM,UAAU,OAAO;AACvB,UAAM,WAAW,SAAS,iBAAiB,SAAS;AACpD,UAAM,eAA8B,CAAA;AAEpC,aAAS;AAAA,MAAQ,CAAC,YAChB,aAAa,KAAK;AAAA,QAChB,IAAI,QAAQ;AAAA,QACZ,WAAW,QAAQ;AAAA,QACnB,cAAc,QAAQ;AAAA,MAAA,CACvB;AAAA,IAAA;AAGH,UAAM,iBAAiB,aAAa;AAAA,MAClC,CAAC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS;AAAA,IAAA;AAGvC,QAAI,gBAAgB;AAClB,uBAAiB,eAAe,EAAE;AAAA,IACpC;AAAA,EACF;AAEA,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM;AAExE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,cAAc,CAAC,YAAmC;AACtD,qBAAiB,IAAI;AAErB,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,aAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,IAChD,OAAO;AACL,cAAQ,GAAG;AAAA,IACb;AAAA,EACF;AAEA,QAAM,iBAAiB,CACrB,WACA,KACA,YACG;AACH,qBAAiB,SAAS;AAE1B,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,YAAM,YAAY,SAAS,eAAe,SAAS;AAEnD,UAAI,WAAW;AACb,kBAAU,eAAe;AAAA,UACvB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA,CACT;AAAA,MACH;AAAA,IACF,OAAO;AACL,gBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,eAAe,aAAa,eAAA;AACvC;"}
+{"version":3,"file":"useNavigation.mjs","sources":["../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Interface describing section data used for scroll detection\n */\ninterface SectionData {\n  /** Unique identifier of the section element */\n  id: string;\n  /** Distance from top of document to section start */\n  offsetTop: number;\n  /** Height of the section element */\n  offsetHeight: number;\n}\n\n/**\n * Navigation Actions Hook\n *\n * A comprehensive hook for managing navigation interactions and scroll-based section detection.\n * Provides automatic active section detection based on scroll position and handles smooth\n * scrolling navigation behaviors.\n *\n * Features:\n * - Automatic active section detection based on scroll position\n * - Smooth scrolling to sections within the same page\n * - Logo click handling with home navigation\n * - Section click handling with conditional scrolling vs navigation\n * - Passive scroll event listeners for optimal performance\n * - Viewport-aware active section calculation (using screen height / 4 offset)\n *\n * Active Section Detection:\n * - Monitors all `<section>` elements on the page\n * - Calculates which section is currently in the \"active\" zone\n * - Active zone is defined as the top 25% of the viewport\n * - Updates activeSection state as user scrolls\n *\n * Navigation Behaviors:\n * - Logo click: Scrolls to top if on home page, navigates to home if on other pages\n * - Section click: Smooth scrolls if on same page, executes callback if different page\n * - All scrolling uses smooth behavior for better UX\n *\n * @example\n * Basic usage in navigation component:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n *\n * // In navigation items\n * const navItems = sections.map(section => (\n *   <TabSelectorItem\n *     key={section.id}\n *     isActive={activeSection === section.id}\n *     onClick={() => onClickSection(section.id, section.url, section.onClick)}\n *   >\n *     {section.label}\n *   </TabSelectorItem>\n * ));\n *\n * // In logo\n * <Logo onClick={() => onClickLogo(navigate)} />\n * ```\n *\n * @example\n * Advanced usage with routing:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n * const navigate = useNavigate();\n *\n * const handleLogoClick = () => {\n *   onClickLogo((url) => {\n *     navigate(url);\n *     // Additional logic like analytics\n *     trackEvent('logo_click');\n *   });\n * };\n *\n * const handleSectionClick = (sectionId: string) => {\n *   onClickSection(\n *     sectionId,\n *     `/page#${sectionId}`,\n *     () => {\n *       navigate(`/page#${sectionId}`);\n *       trackEvent('section_navigation', { sectionId });\n *     }\n *   );\n * };\n * ```\n *\n * Performance Considerations:\n * - Uses passive scroll event listeners to prevent blocking\n * - Automatically cleans up event listeners on unmount\n * - Efficiently queries DOM elements using native selectors\n * - Calculates section positions dynamically for accuracy\n *\n * @returns Object containing navigation state and action handlers\n */\nexport const useNavActions = () => {\n  /** Currently active section ID based on scroll position */\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n\n  /**\n   * Detects which section is currently active based on scroll position\n   * Uses viewport-aware calculation to determine active section\n   */\n  const detectActiveSection = () => {\n    const scrollY = window.scrollY;\n    const sections = document.querySelectorAll('section');\n    const sectionsData: SectionData[] = [];\n\n    // Collect position data for all sections\n    sections.forEach((section) =>\n      sectionsData.push({\n        id: section.id,\n        offsetTop: section.offsetTop,\n        offsetHeight: section.offsetHeight,\n      })\n    );\n\n    // Find section that intersects with the active zone (top 25% of viewport)\n    const currentSection = sectionsData.find(\n      (section) =>\n        section.offsetTop <= scrollY + window.screen.height / 4 &&\n        section.offsetTop + section.offsetHeight >\n          scrollY + window.screen.height / 4\n    );\n\n    if (currentSection) {\n      setActiveSection(currentSection.id);\n    }\n  };\n\n  // Set up scroll listener for active section detection\n  useEffect(() => {\n    window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', detectActiveSection);\n    };\n  }, []);\n\n  /**\n   * Handles logo click behavior\n   * Scrolls to top if on home page, navigates to home if on other pages\n   *\n   * @param onClick - Callback function to handle navigation (e.g., router.push)\n   */\n  const onClickLogo = (onClick: (url: string) => void) => {\n    setActiveSection(null);\n\n    if (window.location.pathname === '/') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      onClick('/');\n    }\n  };\n\n  /**\n   * Handles section navigation click behavior\n   * Smooth scrolls if on same page, executes callback if different page\n   *\n   * @param sectionId - ID of the target section element\n   * @param url - URL of the page containing the section (optional)\n   * @param onClick - Callback function to handle navigation (optional)\n   */\n  const onClickSection = (\n    sectionId: string,\n    url?: string,\n    onClick?: () => void\n  ) => {\n    setActiveSection(sectionId);\n\n    // If on the same page, scroll to section\n    if (window.location.pathname === url) {\n      const sectionEl = document.getElementById(sectionId);\n\n      if (sectionEl) {\n        sectionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        });\n      }\n    } else {\n      // If on different page, execute callback (typically navigation)\n      onClick?.();\n    }\n  };\n\n  return {\n    /** Currently active section ID, null if no section is active */\n    activeSection,\n    /** Handler for logo click interactions */\n    onClickLogo,\n    /** Handler for section navigation clicks */\n    onClickSection,\n  };\n};\n"],"names":[],"mappings":";;AAgGO,MAAM,gBAAgB,MAAM;AAEjC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AAMtE,QAAM,sBAAsB,MAAM;AAChC,UAAM,UAAU,OAAO;AACvB,UAAM,WAAW,SAAS,iBAAiB,SAAS;AACpD,UAAM,eAA8B,CAAA;AAGpC,aAAS;AAAA,MAAQ,CAAC,YAChB,aAAa,KAAK;AAAA,QAChB,IAAI,QAAQ;AAAA,QACZ,WAAW,QAAQ;AAAA,QACnB,cAAc,QAAQ;AAAA,MAAA,CACvB;AAAA,IAAA;AAIH,UAAM,iBAAiB,aAAa;AAAA,MAClC,CAAC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS;AAAA,IAAA;AAGvC,QAAI,gBAAgB;AAClB,uBAAiB,eAAe,EAAE;AAAA,IACpC;AAAA,EACF;AAGA,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM;AAExE,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,mBAAmB;AAAA,IAC1D;AAAA,EACF,GAAG,CAAA,CAAE;AAQL,QAAM,cAAc,CAAC,YAAmC;AACtD,qBAAiB,IAAI;AAErB,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,aAAO,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,IAChD,OAAO;AACL,cAAQ,GAAG;AAAA,IACb;AAAA,EACF;AAUA,QAAM,iBAAiB,CACrB,WACA,KACA,YACG;AACH,qBAAiB,SAAS;AAG1B,QAAI,OAAO,SAAS,aAAa,KAAK;AACpC,YAAM,YAAY,SAAS,eAAe,SAAS;AAEnD,UAAI,WAAW;AACb,kBAAU,eAAe;AAAA,UACvB,UAAU;AAAA,UACV,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA,CACT;AAAA,MACH;AAAA,IACF,OAAO;AAEL,gBAAA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ;"}