@intlayer/design-system 8.4.3 → 8.4.5

package/dist/esm/components/Navbar/Burger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Burger.mjs","names":[],"sources":["../../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\n/**\n * Props for the Burger menu component\n */\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the burger menu is in active/open state */\n  isActive?: boolean;\n}\n\n/**\n * Shared styles for burger menu lines\n * Creates the classic hamburger menu appearance with smooth transitions\n */\nconst lineStyle =\n  'bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300';\n\n/**\n * Burger Menu Component\n *\n * An animated hamburger menu icon that transforms between closed and open states.\n * Commonly used in mobile navigation to toggle menu visibility.\n *\n * Features:\n * - Smooth CSS transitions between states (300ms duration)\n * - Accessible with proper ARIA attributes\n * - Screen reader support with descriptive labels\n * - Role-based interaction (switch role for toggle behavior)\n * - Responsive sizing (40px × 40px clickable area)\n * - Classic three-line hamburger design\n *\n * Animation States:\n * - Closed: Three horizontal parallel lines\n * - Open: Top and bottom lines rotate to form an X, middle line fades out\n *\n * Accessibility Features:\n * - `role=\"switch\"` indicates toggle behavior\n * - `aria-expanded` reflects current menu state\n * - `aria-checked` provides current selection state\n * - `aria-controls` links to controlled menu element\n * - Dynamic `aria-label` describes current action\n *\n * @example\n * Basic usage:\n * ```tsx\n * const [isMenuOpen, setIsMenuOpen] = useState(false);\n *\n * <Burger\n *   isActive={isMenuOpen}\n *   onClick={() => setIsMenuOpen(!isMenuOpen)}\n * />\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <Burger\n *   isActive={isMenuOpen}\n *   onClick={toggleMenu}\n *   className=\"lg:hidden\"\n *   style={{ zIndex: 1000 }}\n * />\n * ```\n *\n * @param props - Burger component props\n * @returns Animated burger menu JSX element\n */\nexport const Burger = ({\n  isActive = false,\n  className,\n  ...props\n}: BurgerProps) => (\n  <div\n    className={cn('relative mr-3 size-10 cursor-pointer', className)}\n    aria-checked={isActive}\n    aria-expanded={isActive}\n    aria-controls=\"mobile-menu\"\n    role=\"switch\"\n    aria-label={isActive ? 'Close menu' : 'Open menu'}\n    {...props}\n  >\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[-45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? '-translate-y-3 opacity-0' : '-translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n\n    <div>\n      <div className={cn(lineStyle, isActive ? 'opacity-0' : 'opacity-100')} />\n    </div>\n\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? 'translate-y-3 opacity-0' : 'translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n  </div>\n);\n"],"mappings":"0FAeA,MAAM,EACJ,sEAoDW,GAAU,CACrB,WAAW,GACX,YACA,GAAG,KAEH,EAAC,MAAD,CACE,UAAW,EAAG,uCAAwC,EAAU,CAChE,eAAc,EACd,gBAAe,EACf,gBAAc,cACd,KAAK,SACL,aAAY,EAAW,aAAe,YACtC,GAAI,WAPN,CASE,EAAC,MAAD,CAAA,SAAA,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAW,EAAW,kBAAoB,WAAW,CACnE,CAAA,CACF,EAAC,MAAD,CACE,UAAW,EACT,EACA,EAAW,2BAA6B,6BACzC,CACD,CAAA,CACE,CAAA,CAAA,CAEN,EAAC,MAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAW,EAAW,YAAc,cAAc,CAAI,CAAA,CACrE,CAAA,CAEN,EAAC,MAAD,CAAA,SAAA,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAW,EAAW,iBAAmB,WAAW,CAClE,CAAA,CACF,EAAC,MAAD,CACE,UAAW,EACT,EACA,EAAW,0BAA4B,4BACxC,CACD,CAAA,CACE,CAAA,CAAA,CACF"}
+{"version":3,"file":"Burger.mjs","names":[],"sources":["../../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\n/**\n * Props for the Burger menu component\n */\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the burger menu is in active/open state */\n  isActive?: boolean;\n}\n\n/**\n * Shared styles for burger menu lines\n * Creates the classic hamburger menu appearance with smooth transitions\n */\nconst lineStyle =\n  'bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300';\n\n/**\n * Burger Menu Component\n *\n * An animated hamburger menu icon that transforms between closed and open states.\n * Commonly used in mobile navigation to toggle menu visibility.\n *\n * Features:\n * - Smooth CSS transitions between states (300ms duration)\n * - Accessible with proper ARIA attributes\n * - Screen reader support with descriptive labels\n * - Role-based interaction (switch role for toggle behavior)\n * - Responsive sizing (40px × 40px clickable area)\n * - Classic three-line hamburger design\n *\n * Animation States:\n * - Closed: Three horizontal parallel lines\n * - Open: Top and bottom lines rotate to form an X, middle line fades out\n *\n * Accessibility Features:\n * - `role=\"switch\"` indicates toggle behavior\n * - `aria-expanded` reflects current menu state\n * - `aria-checked` provides current selection state\n * - `aria-controls` links to controlled menu element\n * - Dynamic `aria-label` describes current action\n *\n * @example\n * Basic usage:\n * ```tsx\n * const [isMenuOpen, setIsMenuOpen] = useState(false);\n *\n * <Burger\n *   isActive={isMenuOpen}\n *   onClick={() => setIsMenuOpen(!isMenuOpen)}\n * />\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <Burger\n *   isActive={isMenuOpen}\n *   onClick={toggleMenu}\n *   className=\"lg:hidden\"\n *   style={{ zIndex: 1000 }}\n * />\n * ```\n *\n * @param props - Burger component props\n * @returns Animated burger menu JSX element\n */\nexport const Burger = ({\n  isActive = false,\n  className,\n  ...props\n}: BurgerProps) => (\n  <div\n    className={cn('relative mr-3 size-10 cursor-pointer', className)}\n    aria-checked={isActive}\n    aria-expanded={isActive}\n    aria-controls=\"mobile-menu\"\n    role=\"switch\"\n    aria-label={isActive ? 'Close menu' : 'Open menu'}\n    {...props}\n  >\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[-45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? '-translate-y-3 opacity-0' : '-translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n\n    <div>\n      <div className={cn(lineStyle, isActive ? 'opacity-0' : 'opacity-100')} />\n    </div>\n\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? 'translate-y-3 opacity-0' : 'translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n  </div>\n);\n"],"mappings":";;;;;;;;AAeA,MAAM,YACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDF,MAAa,UAAU,EACrB,WAAW,OACX,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,WAAW,GAAG,wCAAwC,UAAU;CAChE,gBAAc;CACd,iBAAe;CACf,iBAAc;CACd,MAAK;CACL,cAAY,WAAW,eAAe;CACtC,GAAI;WAPN;EASE,qBAAC,OAAD,aACE,oBAAC,OAAD,EACE,WAAW,GAAG,WAAW,WAAW,oBAAoB,WAAW,EACnE,GACF,oBAAC,OAAD,EACE,WAAW,GACT,WACA,WAAW,6BAA6B,6BACzC,EACD,EACE;EAEN,oBAAC,OAAD,YACE,oBAAC,OAAD,EAAK,WAAW,GAAG,WAAW,WAAW,cAAc,cAAc,EAAI,GACrE;EAEN,qBAAC,OAAD,aACE,oBAAC,OAAD,EACE,WAAW,GAAG,WAAW,WAAW,mBAAmB,WAAW,EAClE,GACF,oBAAC,OAAD,EACE,WAAW,GACT,WACA,WAAW,4BAA4B,4BACxC,EACD,EACE;EACF"}

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

@@ -1,2 +1,97 @@
-"use client";import{TabSelector as e,TabSelectorColor as t}from"../TabSelector/TabSelector.mjs";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({logo:i,sections:a,rightItems:o,selectedChoice:s})=>r(`nav`,{className:`sticky top-0 z-50 flex w-full items-center bg-card/80 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur`,children:[i,n(e,{selectedChoice:s,className:`ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6`,tabs:a,hoverable:!0,color:t.TEXT}),n(`div`,{className:`mr-4 flex items-center justify-end gap-2 md:gap-4`,children:o})]});export{i as DesktopNavbar};
+'use client';
+
+import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Navbar/DesktopNavbar.tsx
+/**
+* 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
+*/
+const DesktopNavbar = ({ logo, sections, rightItems, selectedChoice }) => /* @__PURE__ */ jsxs("nav", {
+	className: "sticky top-0 z-50 flex w-full items-center bg-card/80 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur",
+	children: [
+		logo,
+		/* @__PURE__ */ jsx(TabSelector, {
+			selectedChoice,
+			className: "ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6",
+			tabs: sections,
+			hoverable: true,
+			color: TabSelectorColor.TEXT
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "mr-4 flex items-center justify-end gap-2 md:gap-4",
+			children: rightItems
+		})
+	]
+});
+
+//#endregion
+export { DesktopNavbar };
 //# sourceMappingURL=DesktopNavbar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport {\n  TabSelector,\n  TabSelectorColor,\n  type TabSelectorItemProps,\n} from '../TabSelector';\n\n/**\n * Props for the DesktopNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype DesktopNavbarProps<T extends TabSelectorItemProps> = {\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 TabSelectorItemProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => (\n  <nav className=\"sticky top-0 z-50 flex w-full items-center bg-card/80 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=\"ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral 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"],"mappings":"kJA8FA,MAAa,GAAiD,CAC5D,OACA,WACA,aACA,oBAEA,EAAC,MAAD,CAAK,UAAU,iIAAf,CACG,EAED,EAAC,EAAD,CACkB,iBAChB,UAAU,8GACV,KAAM,EACN,UAAA,GACA,MAAO,EAAiB,KACxB,CAAA,CAEF,EAAC,MAAD,CAAK,UAAU,6DACZ,EACG,CAAA,CACF"}
+{"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport {\n  TabSelector,\n  TabSelectorColor,\n  type TabSelectorItemProps,\n} from '../TabSelector';\n\n/**\n * Props for the DesktopNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype DesktopNavbarProps<T extends TabSelectorItemProps> = {\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 TabSelectorItemProps>({\n  logo,\n  sections,\n  rightItems,\n  selectedChoice,\n}: DesktopNavbarProps<T>) => (\n  <nav className=\"sticky top-0 z-50 flex w-full items-center bg-card/80 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=\"ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf;EACG;EAED,oBAAC,aAAD;GACkB;GAChB,WAAU;GACV,MAAM;GACN;GACA,OAAO,iBAAiB;GACxB;EAEF,oBAAC,OAAD;GAAK,WAAU;aACZ;GACG;EACF"}

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

@@ -1,2 +1,170 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useScrollBlockage as t}from"../../hooks/useScrollBlockage/index.mjs";import{useScrollDetection as n}from"../../hooks/useScrollDetection.mjs";import{MaxHeightSmoother as r}from"../MaxHeightSmoother/index.mjs";import{Burger as i}from"./Burger.mjs";import{useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{m as l}from"framer-motion";const u={open:{transition:{staggerChildren:.07,delayChildren:.2}},closed:{transition:{staggerChildren:.05,staggerDirection:-1}}},d=`bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur`,f=({logo:f,topChildren:p,topSections:m=[],bottomChildren:h,bottomSections:g=[],rightItems:_,rollable:v=!0})=>{let[y,b]=o(!1),[x,S]=o(!1),C=a(null);t({disableScroll:v,key:`mobile_nav`}),n({onScrollUp:()=>b(!1),onScrollDown:()=>b(!0),isEnabled:!x&&v});let w=y?0:C.current?.clientHeight??0,T=m.length+g.length>0;return c(`nav`,{className:e(d,`sticky top-0 z-50 flex w-screen flex-col transition`,y?`-translate-y-full`:`translate-y-0`),id:`mobile-menu`,children:[c(`div`,{className:`flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]`,ref:C,children:[f,c(`div`,{className:`flex w-full flex-1 items-center justify-end gap-6`,children:[s(`div`,{className:`flex w-full items-center justify-end gap-1`,children:_}),T&&s(i,{isActive:x,onClick:()=>S(e=>!e)})]})]}),s(`div`,{className:e(d,`absolute bottom-0 left-0 w-full translate-y-full`),children:s(r,{isHidden:!x,children:c(l.div,{className:`flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide`,onClick:()=>S(!1),animate:x?`open`:`closed`,variants:u,style:{height:`calc(100vh - ${w}px)`},children:[p,c(`div`,{className:`flex h-full flex-col justify-center`,children:[m,g]}),s(`div`,{className:`m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3`,children:h})]})})})]})};export{f as MobileNavbar};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { Burger } from "./Burger.mjs";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { m } from "framer-motion";
+
+//#region src/components/Navbar/MobileNavbar.tsx
+/**
+* Framer Motion animation variants for staggered menu item reveals
+* Creates a smooth cascading effect when menu opens/closes
+*/
+const navVariants = {
+	open: { transition: {
+		staggerChildren: .07,
+		delayChildren: .2
+	} },
+	closed: { transition: {
+		staggerChildren: .05,
+		staggerDirection: -1
+	} }
+};
+/**
+* Shared background styling for mobile navbar components
+* Provides glass-morphism effect with blur and transparency
+*/
+const bgStyle = "bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur";
+/**
+* Mobile Navigation Bar Component
+*
+* A sophisticated mobile-first navigation component with rollable full-screen menu,
+* scroll-aware behavior, and smooth animations. Optimized for touch interactions and
+* mobile user experience patterns.
+*
+* Features:
+* - rollable 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 rollable full-screen menu
+*/
+const MobileNavbar = ({ logo, topChildren, topSections = [], bottomChildren, bottomSections = [], rightItems, rollable = true }) => {
+	const [isHidden, setIsHidden] = useState(false);
+	const [isUnrolled, setIsUnrolled] = useState(false);
+	const navRef = useRef(null);
+	useScrollBlockage({
+		disableScroll: rollable,
+		key: "mobile_nav"
+	});
+	useScrollDetection({
+		onScrollUp: () => setIsHidden(false),
+		onScrollDown: () => setIsHidden(true),
+		isEnabled: !isUnrolled && rollable
+	});
+	const backDivHeight = !isHidden ? navRef.current?.clientHeight ?? 0 : 0;
+	const isBurgerShowed = topSections.length + bottomSections.length > 0;
+	return /* @__PURE__ */ jsxs("nav", {
+		className: cn(bgStyle, "sticky top-0 z-50 flex w-screen flex-col transition", isHidden ? "-translate-y-full" : "translate-y-0"),
+		id: "mobile-menu",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]",
+			ref: navRef,
+			children: [logo, /* @__PURE__ */ jsxs("div", {
+				className: "flex w-full flex-1 items-center justify-end gap-6",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex w-full items-center justify-end gap-1",
+					children: rightItems
+				}), isBurgerShowed && /* @__PURE__ */ jsx(Burger, {
+					isActive: isUnrolled,
+					onClick: () => setIsUnrolled((isUnrolled) => !isUnrolled)
+				})]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn(bgStyle, "absolute bottom-0 left-0 w-full translate-y-full"),
+			children: /* @__PURE__ */ jsx(MaxHeightSmoother, {
+				isHidden: !isUnrolled,
+				children: /* @__PURE__ */ jsxs(m.div, {
+					className: "flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide",
+					onClick: () => setIsUnrolled(false),
+					animate: isUnrolled ? "open" : "closed",
+					variants: navVariants,
+					style: { height: `calc(100vh - ${backDivHeight}px)` },
+					children: [
+						topChildren,
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex h-full flex-col justify-center",
+							children: [topSections, bottomSections]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "m-auto flex w-full max-w-[400px] items-center justify-center gap-1 px-5 py-3",
+							children: bottomChildren
+						})
+					]
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+export { MobileNavbar };
 //# sourceMappingURL=MobileNavbar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport { type ReactElement, type ReactNode, useRef, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } 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 TabSelectorItemProps> = {\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  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\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 rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable 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 rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\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: rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled && rollable,\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=\"flex w-full flex-col pt-10 pb-[20%] text-lg text-text 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"],"mappings":"mbAoCA,MAAM,EAAwB,CAC5B,KAAM,CACJ,WAAY,CAAE,gBAAiB,IAAM,cAAe,GAAK,CAC1D,CACD,OAAQ,CACN,WAAY,CAAE,gBAAiB,IAAM,iBAAkB,GAAI,CAC5D,CACF,CAMK,EACJ,mEAgFW,GAAgD,CAC3D,OACA,cACA,cAAc,EAAE,CAChB,iBACA,iBAAiB,EAAE,CACnB,aACA,WAAW,MACe,CAC1B,GAAM,CAAC,EAAU,GAAe,EAAkB,GAAM,CAClD,CAAC,EAAY,GAAiB,EAAkB,GAAM,CAEtD,EAAS,EAAuB,KAAK,CAE3C,EAAkB,CAChB,cAAe,EACf,IAAK,aACN,CAAC,CAEF,EAAmB,CACjB,eAAkB,EAAY,GAAM,CACpC,iBAAoB,EAAY,GAAK,CACrC,UAAW,CAAC,GAAc,EAC3B,CAAC,CAEF,IAAM,EAAiB,EAAiD,EAArC,EAAO,SAAS,cAAgB,EAE7D,EAAiB,EAAY,OAAS,EAAe,OAAS,EAEpE,OACE,EAAC,MAAD,CACE,UAAW,EACT,EACA,sDACA,EAAW,oBAAsB,gBAClC,CACD,GAAG,uBANL,CAQE,EAAC,MAAD,CACE,UAAU,yEACV,IAAK,WAFP,CAIG,EAED,EAAC,MAAD,CAAK,UAAU,6DAAf,CACE,EAAC,MAAD,CAAK,UAAU,sDACZ,EACG,CAAA,CAEL,GACC,EAAC,EAAD,CACE,SAAU,EACV,YAAe,EAAe,GAAe,CAAC,EAAW,CACzD,CAAA,CAEA,GACF,GAEN,EAAC,MAAD,CACE,UAAW,EACT,EACA,mDACD,UAED,EAAC,EAAD,CAAmB,SAAU,CAAC,WAC5B,EAAC,EAAE,IAAH,CACE,UAAU,sEACV,YAAe,EAAc,GAAM,CACnC,QAAS,EAAa,OAAS,SAC/B,SAAU,EACV,MAAO,CACL,OAAQ,gBAAgB,EAAc,KACvC,UAPH,CASG,EACD,EAAC,MAAD,CAAK,UAAU,+CAAf,CACG,EACA,EACG,GAEN,EAAC,MAAD,CAAK,UAAU,wFACZ,EACG,CAAA,CACA,GACU,CAAA,CAChB,CAAA,CACF"}
+{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport { type ReactElement, type ReactNode, useRef, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } 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 TabSelectorItemProps> = {\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  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\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 rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable 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 rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\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: rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled && rollable,\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=\"flex w-full flex-col pt-10 pb-[20%] text-lg text-text 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"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;EAAK,EAC1D;CACD,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;EAAI,EAC5D;CACF;;;;;AAMD,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,EAAE,EAChB,gBACA,iBAAiB,EAAE,EACnB,YACA,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,MAAM;CACxD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,MAAM;CAE5D,MAAM,SAAS,OAAuB,KAAK;AAE3C,mBAAkB;EAChB,eAAe;EACf,KAAK;EACN,CAAC;AAEF,oBAAmB;EACjB,kBAAkB,YAAY,MAAM;EACpC,oBAAoB,YAAY,KAAK;EACrC,WAAW,CAAC,cAAc;EAC3B,CAAC;CAEF,MAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;CAExE,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAEpE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,gBAClC;EACD,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,GAEL,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,WAAW;KACzD,EAEA;MACF;MAEN,oBAAC,OAAD;GACE,WAAW,GACT,SACA,mDACD;aAED,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,MAAM;KACnC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,MACvC;eAPH;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,eACG;;MAEN,oBAAC,OAAD;OAAK,WAAU;iBACZ;OACG;MACA;;IACU;GAChB,EACF"}

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

@@ -1,2 +1,87 @@
-"use client";import{useDevice as e}from"../../hooks/useDevice.mjs";import{useIsMounted as t}from"../../hooks/useIsMounted.mjs";import{DesktopNavbar as n}from"./DesktopNavbar.mjs";import{MobileNavbar as r}from"./MobileNavbar.mjs";import{Fragment as i,jsx as a}from"react/jsx-runtime";const o=({logo:o,mobileTopChildren:s,desktopSections:c=[],mobileTopSections:l=[],mobileBottomChildren:u,mobileBottomSections:d=[],rightItemsDesktop:f,rightItemsMobile:p,selectedChoice:m,mobileRollable:h=!0})=>{let{isMobile:g}=e(`lg`);return t()?g?a(r,{topChildren:s,topSections:l,bottomChildren:u,bottomSections:d,logo:o,rightItems:p,rollable:h}):a(n,{sections:c,rightItems:f,logo:o,selectedChoice:m}):a(i,{})};export{o as Navbar};
+'use client';
+
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useIsMounted } from "../../hooks/useIsMounted.mjs";
+import { DesktopNavbar } from "./DesktopNavbar.mjs";
+import { MobileNavbar } from "./MobileNavbar.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/Navbar/index.tsx
+/**
+* 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
+*/
+const Navbar = ({ logo, mobileTopChildren, desktopSections = [], mobileTopSections = [], mobileBottomChildren, mobileBottomSections = [], rightItemsDesktop, rightItemsMobile, selectedChoice, mobileRollable = true }) => {
+	const { isMobile } = useDevice("lg");
+	if (!useIsMounted()) return /* @__PURE__ */ jsx(Fragment, {});
+	return isMobile ? /* @__PURE__ */ jsx(MobileNavbar, {
+		topChildren: mobileTopChildren,
+		topSections: mobileTopSections,
+		bottomChildren: mobileBottomChildren,
+		bottomSections: mobileBottomSections,
+		logo,
+		rightItems: rightItemsMobile,
+		rollable: mobileRollable
+	}) : /* @__PURE__ */ jsx(DesktopNavbar, {
+		sections: desktopSections,
+		rightItems: rightItemsDesktop,
+		logo,
+		selectedChoice
+	});
+};
+
+//#endregion
+export { Navbar };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport { useIsMounted } from '@hooks/useIsMounted';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } 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 TabSelectorItemProps> = {\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  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\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 TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\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      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":"2RA4FA,MAAa,GAA0C,CACrD,OACA,oBACA,kBAAkB,EAAE,CACpB,oBAAoB,EAAE,CACtB,uBACA,uBAAuB,EAAE,CACzB,oBACA,mBACA,iBACA,iBAAiB,MACG,CACpB,GAAM,CAAE,YAAa,EAAU,KAAK,CAKpC,OAJkB,GAAc,CAIzB,EACL,EAAC,EAAD,CACE,YAAa,EACb,YAAa,EACb,eAAgB,EAChB,eAAgB,EACV,OACN,WAAY,EACZ,SAAU,EACV,CAAA,CAEF,EAAC,EAAD,CACE,SAAU,EACV,WAAY,EACN,OACU,iBAChB,CAAA,CAlBmB,EAAA,EAAA,EAAK,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport { useIsMounted } from '@hooks/useIsMounted';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } 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 TabSelectorItemProps> = {\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  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\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 TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\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      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,EAAE,EACpB,oBAAoB,EAAE,EACtB,sBACA,uBAAuB,EAAE,EACzB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,KAAK;AAGpC,KAAI,CAFc,cAAc,CAEhB,QAAO,gCAAK;AAE5B,QAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;EACV,IAEF,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;EAChB"}

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

@@ -1,2 +1,153 @@
-"use client";import{useEffect as e,useState as t}from"react";const n=()=>{let[n,r]=t(null),i=()=>{let e=window.scrollY,t=document.querySelectorAll(`section`),n=[];t.forEach(e=>n.push({id:e.id,offsetTop:e.offsetTop,offsetHeight:e.offsetHeight}));let i=n.find(t=>t.offsetTop<=e+window.screen.height/4&&t.offsetTop+t.offsetHeight>e+window.screen.height/4);i&&r(i.id)};return e(()=>(window.addEventListener(`scroll`,i,{passive:!0}),()=>{window.removeEventListener(`scroll`,i)}),[]),{activeSection:n,onClickLogo:e=>{r(null),window.location.pathname===`/`?window.scrollTo({top:0,behavior:`smooth`}):e(`/`)},onClickSection:(e,t,n)=>{if(r(e),window.location.pathname===t){let t=document.getElementById(e);t&&t.scrollIntoView({behavior:`smooth`,block:`center`,inline:`nearest`})}else n?.()}}};export{n as useNavActions};
+'use client';
+
+import { useEffect, useState } from "react";
+
+//#region src/components/Navbar/useNavigation.ts
+/**
+* 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
+*/
+const useNavActions = () => {
+	/** Currently active section ID based on scroll position */
+	const [activeSection, setActiveSection] = useState(null);
+	/**
+	* Detects which section is currently active based on scroll position
+	* Uses viewport-aware calculation to determine active section
+	*/
+	const detectActiveSection = () => {
+		const scrollY = window.scrollY;
+		const sections = document.querySelectorAll("section");
+		const sectionsData = [];
+		sections.forEach((section) => sectionsData.push({
+			id: section.id,
+			offsetTop: section.offsetTop,
+			offsetHeight: section.offsetHeight
+		}));
+		const currentSection = sectionsData.find((section) => section.offsetTop <= scrollY + window.screen.height / 4 && section.offsetTop + section.offsetHeight > scrollY + window.screen.height / 4);
+		if (currentSection) setActiveSection(currentSection.id);
+	};
+	useEffect(() => {
+		window.addEventListener("scroll", detectActiveSection, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", detectActiveSection);
+		};
+	}, []);
+	/**
+	* Handles logo click behavior
+	* Scrolls to top if on home page, navigates to home if on other pages
+	*
+	* @param onClick - Callback function to handle navigation (e.g., router.push)
+	*/
+	const onClickLogo = (onClick) => {
+		setActiveSection(null);
+		if (window.location.pathname === "/") window.scrollTo({
+			top: 0,
+			behavior: "smooth"
+		});
+		else onClick("/");
+	};
+	/**
+	* Handles section navigation click behavior
+	* Smooth scrolls if on same page, executes callback if different page
+	*
+	* @param sectionId - ID of the target section element
+	* @param url - URL of the page containing the section (optional)
+	* @param onClick - Callback function to handle navigation (optional)
+	*/
+	const onClickSection = (sectionId, url, onClick) => {
+		setActiveSection(sectionId);
+		if (window.location.pathname === url) {
+			const sectionEl = document.getElementById(sectionId);
+			if (sectionEl) sectionEl.scrollIntoView({
+				behavior: "smooth",
+				block: "center",
+				inline: "nearest"
+			});
+		} else onClick?.();
+	};
+	return {
+		activeSection,
+		onClickLogo,
+		onClickSection
+	};
+};
+
+//#endregion
+export { useNavActions };
 //# sourceMappingURL=useNavigation.mjs.map