@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1,77 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/Navbar/Burger.tsx
-/**
-* Shared styles for burger menu lines
-* Creates the classic hamburger menu appearance with smooth transitions
-*/
-const lineStyle = "bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300";
-/**
-* Burger Menu Component
-*
-* An animated hamburger menu icon that transforms between closed and open states.
-* Commonly used in mobile navigation to toggle menu visibility.
-*
-* Features:
-* - Smooth CSS transitions between states (300ms duration)
-* - Accessible with proper ARIA attributes
-* - Screen reader support with descriptive labels
-* - Role-based interaction (switch role for toggle behavior)
-* - Responsive sizing (40px × 40px clickable area)
-* - Classic three-line hamburger design
-*
-* Animation States:
-* - Closed: Three horizontal parallel lines
-* - Open: Top and bottom lines rotate to form an X, middle line fades out
-*
-* Accessibility Features:
-* - `role="switch"` indicates toggle behavior
-* - `aria-expanded` reflects current menu state
-* - `aria-checked` provides current selection state
-* - `aria-controls` links to controlled menu element
-* - Dynamic `aria-label` describes current action
-*
-* @example
-* Basic usage:
-* ```tsx
-* const [isMenuOpen, setIsMenuOpen] = useState(false);
-*
-* <Burger
-*   isActive={isMenuOpen}
-*   onClick={() => setIsMenuOpen(!isMenuOpen)}
-* />
-* ```
-*
-* @example
-* With custom styling:
-* ```tsx
-* <Burger
-*   isActive={isMenuOpen}
-*   onClick={toggleMenu}
-*   className="lg:hidden"
-*   style={{ zIndex: 1000 }}
-* />
-* ```
-*
-* @param props - Burger component props
-* @returns Animated burger menu JSX element
-*/
-const Burger = ({ isActive = false, className, ...props }) => /* @__PURE__ */ jsxs("div", {
-	className: cn("relative mr-3 size-10 cursor-pointer", className),
-	"aria-checked": isActive,
-	"aria-expanded": isActive,
-	"aria-controls": "mobile-menu",
-	role: "switch",
-	"aria-label": isActive ? "Close menu" : "Open menu",
-	...props,
-	children: [
-		/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "rotate-[-45deg]" : "rotate-0") }), /* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "-translate-y-3 opacity-0" : "-translate-y-2 opacity-100") })] }),
-		/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "opacity-0" : "opacity-100") }) }),
-		/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "rotate-[45deg]" : "rotate-0") }), /* @__PURE__ */ jsx("div", { className: cn(lineStyle, isActive ? "translate-y-3 opacity-0" : "translate-y-2 opacity-100") })] })
-	]
-});
-
-//#endregion
-export { Burger };
+import{cn as e}from"../../utils/cn.mjs";import{jsx as t,jsxs as n}from"react/jsx-runtime";const r=`bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300`,i=({isActive:i=!1,className:a,...o})=>n(`div`,{className:e(`relative mr-3 size-10 cursor-pointer`,a),"aria-checked":i,"aria-expanded":i,"aria-controls":`mobile-menu`,role:`switch`,"aria-label":i?`Close menu`:`Open menu`,...o,children:[n(`div`,{children:[t(`div`,{className:e(r,i?`rotate-[-45deg]`:`rotate-0`)}),t(`div`,{className:e(r,i?`-translate-y-3 opacity-0`:`-translate-y-2 opacity-100`)})]}),t(`div`,{children:t(`div`,{className:e(r,i?`opacity-0`:`opacity-100`)})}),n(`div`,{children:[t(`div`,{className:e(r,i?`rotate-[45deg]`:`rotate-0`)}),t(`div`,{className:e(r,i?`translate-y-3 opacity-0`:`translate-y-2 opacity-100`)})]})]});export{i as Burger};
 //# sourceMappingURL=Burger.mjs.map

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":";;;;;;;;AAeA,MAAM,YACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDF,MAAa,UAAU,EACrB,WAAW,OACX,WACA,GAAG,YAEH,qBAAC;CACC,WAAW,GAAG,wCAAwC,UAAU;CAChE,gBAAc;CACd,iBAAe;CACf,iBAAc;CACd,MAAK;CACL,cAAY,WAAW,eAAe;CACtC,GAAI;;EAEJ,qBAAC,oBACC,oBAAC,SACC,WAAW,GAAG,WAAW,WAAW,oBAAoB,WAAW,GACnE,EACF,oBAAC,SACC,WAAW,GACT,WACA,WAAW,6BAA6B,6BACzC,GACD,IACE;EAEN,oBAAC,mBACC,oBAAC,SAAI,WAAW,GAAG,WAAW,WAAW,cAAc,cAAc,GAAI,GACrE;EAEN,qBAAC,oBACC,oBAAC,SACC,WAAW,GAAG,WAAW,WAAW,mBAAmB,WAAW,GAClE,EACF,oBAAC,SACC,WAAW,GACT,WACA,WAAW,4BAA4B,4BACxC,GACD,IACE;;EACF"}
+{"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,MAAA,CACC,UAAW,EAAG,uCAAwC,EAAU,CAChE,eAAc,EACd,gBAAe,EACf,gBAAc,cACd,KAAK,SACL,aAAY,EAAW,aAAe,YACtC,GAAI,YAEJ,EAAC,MAAA,CAAA,SAAA,CACC,EAAC,MAAA,CACC,UAAW,EAAG,EAAW,EAAW,kBAAoB,WAAW,CAAA,CACnE,CACF,EAAC,MAAA,CACC,UAAW,EACT,EACA,EAAW,2BAA6B,6BACzC,CAAA,CACD,CAAA,CAAA,CACE,CAEN,EAAC,MAAA,CAAA,SACC,EAAC,MAAA,CAAI,UAAW,EAAG,EAAW,EAAW,YAAc,cAAc,CAAA,CAAI,CAAA,CACrE,CAEN,EAAC,MAAA,CAAA,SAAA,CACC,EAAC,MAAA,CACC,UAAW,EAAG,EAAW,EAAW,iBAAmB,WAAW,CAAA,CAClE,CACF,EAAC,MAAA,CACC,UAAW,EACT,EACA,EAAW,0BAA4B,4BACxC,CAAA,CACD,CAAA,CAAA,CACE,GACF"}

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

@@ -1,97 +1,2 @@
-'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 };
+"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};
 //# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC;CAAI,WAAU;;EACZ;EAED,oBAAC;GACiB;GAChB,WAAU;GACV,MAAM;GACN;GACA,OAAO,iBAAiB;IACxB;EAEF,oBAAC;GAAI,WAAU;aACZ;IACG;;EACF"}
+{"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,MAAA,CAAI,UAAU,kIACZ,EAED,EAAC,EAAA,CACiB,iBAChB,UAAU,8GACV,KAAM,EACN,UAAA,GACA,MAAO,EAAiB,MACxB,CAEF,EAAC,MAAA,CAAI,UAAU,6DACZ,GACG,GACF"}

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

@@ -1,170 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
-import { useScrollDetection } from "../../hooks/useScrollDetection.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 };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{MaxHeightSmoother as t}from"../MaxHeightSmoother/index.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{useScrollDetection as r}from"../../hooks/useScrollDetection.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);n({disableScroll:v,key:`mobile_nav`}),r({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(t,{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};
 //# 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":";;;;;;;;;;;;;;;;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;EACC,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,gBAClC;EACD,IAAG;aAEH,qBAAC;GACC,WAAU;GACV,KAAK;cAEJ,MAED,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAI,WAAU;eACZ;MACG,EAEL,kBACC,oBAAC;KACC,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,WAAW;MACzD;KAEA;IACF,EAEN,oBAAC;GACC,WAAW,GACT,SACA,mDACD;aAED,oBAAC;IAAkB,UAAU,CAAC;cAC5B,qBAAC,EAAE;KACD,WAAU;KACV,eAAe,cAAc,MAAM;KACnC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,MACvC;;MAEA;MACD,qBAAC;OAAI,WAAU;kBACZ,aACA;QACG;MAEN,oBAAC;OAAI,WAAU;iBACZ;QACG;;MACA;KACU;IAChB;GACF"}
+{"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,MAAA,CACC,UAAW,EACT,EACA,sDACA,EAAW,oBAAsB,gBAClC,CACD,GAAG,wBAEH,EAAC,MAAA,CACC,UAAU,yEACV,IAAK,YAEJ,EAED,EAAC,MAAA,CAAI,UAAU,8DACb,EAAC,MAAA,CAAI,UAAU,sDACZ,GACG,CAEL,GACC,EAAC,EAAA,CACC,SAAU,EACV,YAAe,EAAe,GAAe,CAAC,EAAW,EACzD,CAAA,EAEA,CAAA,EACF,CAEN,EAAC,MAAA,CACC,UAAW,EACT,EACA,mDACD,UAED,EAAC,EAAA,CAAkB,SAAU,CAAC,WAC5B,EAAC,EAAE,IAAA,CACD,UAAU,sEACV,YAAe,EAAc,GAAM,CACnC,QAAS,EAAa,OAAS,SAC/B,SAAU,EACV,MAAO,CACL,OAAQ,gBAAgB,EAAc,KACvC,WAEA,EACD,EAAC,MAAA,CAAI,UAAU,gDACZ,EACA,EAAA,EACG,CAEN,EAAC,MAAA,CAAI,UAAU,wFACZ,GACG,GACA,EACU,EAChB,CAAA,EACF"}

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

@@ -1,87 +1,2 @@
-'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 };
+"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};
 //# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,iCAAK;AAE5B,QAAO,WACL,oBAAC;EACC,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;GACV,GAEF,oBAAC;EACC,UAAU;EACV,YAAY;EACN;EACU;GAChB"}
+{"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,EAAA,CACC,YAAa,EACb,YAAa,EACb,eAAgB,EAChB,eAAgB,EACV,OACN,WAAY,EACZ,SAAU,GACV,CAEF,EAAC,EAAA,CACC,SAAU,EACV,WAAY,EACN,OACU,kBAChB,CAlBmB,EAAA,EAAA,EAAA,CAAK"}