@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/esm/components/Modal/Modal.mjs

@@ -0,0 +1,196 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { Container } from "../Container/index.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { H3 } from "../Headers/index.mjs";
+import { X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { createPortal } from "react-dom";
+
+//#region src/components/Modal/Modal.tsx
+/**
+* Enumeration of available modal sizes
+*/
+let ModalSize = /* @__PURE__ */ function(ModalSize$1) {
+	/** Small modal: max height 30vh, max width xl */
+	ModalSize$1["SM"] = "sm";
+	/** Medium modal: max height 50vh, max width xl */
+	ModalSize$1["MD"] = "md";
+	/** Large modal: max height 70vh, max width 2xl */
+	ModalSize$1["LG"] = "lg";
+	/** Extra large modal: max height 95vh, max width 6xl */
+	ModalSize$1["XL"] = "xl";
+	/** Unset size: max height 95vh, full width responsive */
+	ModalSize$1["UNSET"] = "unset";
+	return ModalSize$1;
+}({});
+/**
+* Class name variants for different modal sizes using class-variance-authority
+* Defines responsive sizing and scrollable content for modal containers
+*/
+const modalVariants = cva("cursor-default justify-center overflow-auto py-3 shadow-sm", {
+	variants: { size: {
+		sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
+		md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
+		lg: "h-auto max-h-[70vh] w-[95vw] max-w-2xl",
+		xl: "h-auto max-h-[95vh] w-[95vw] max-w-6xl",
+		unset: "h-auto max-h-[95vh] w-[95vw]"
+	} },
+	defaultVariants: { size: "unset" }
+});
+/**
+* Motion-enabled modal component with Framer Motion support
+* Extends Container component with motion capabilities for animations
+*/
+const MotionModal = motion.create(Container);
+/**
+* Modal Component
+*
+* A highly customizable modal dialog component with portal rendering, Framer Motion animations,
+* and comprehensive accessibility features. Supports multiple size variants and scroll management.
+*
+* Features:
+* - Portal rendering to any container element (defaults to document.body)
+* - Smooth animations with Framer Motion
+* - Size variants: SM, MD, LG, XL, UNSET with responsive sizing
+* - Optional title and close button
+* - Background scroll prevention
+* - Click-outside-to-close functionality
+* - Full accessibility support with ARIA attributes
+* - Keyboard navigation support (ESC to close)
+* - Extensible styling with Container props
+*
+* @example
+* Basic usage:
+* ```jsx
+* <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+*   <p>Modal content goes here</p>
+* </Modal>
+* ```
+*
+* @example
+* With title and close button:
+* ```jsx
+* <Modal
+*   isOpen={isOpen}
+*   onClose={onClose}
+*   title="Confirm Action"
+*   hasCloseButton
+*   size={ModalSize.LG}
+* >
+*   <div>
+*     <p>Are you sure you want to continue?</p>
+*     <Button onClick={onConfirm}>Confirm</Button>
+*   </div>
+* </Modal>
+* ```
+*
+* @example
+* Custom container and styling:
+* ```jsx
+* <Modal
+*   isOpen={isOpen}
+*   onClose={onClose}
+*   container={customContainer}
+*   background="card"
+*   padding="lg"
+*   border="default"
+* >
+*   Content with custom styling
+* </Modal>
+* ```
+*
+* Accessibility Notes:
+* - Modal receives focus when opened
+* - Background content is hidden from screen readers when modal is open
+* - ESC key closes modal (handled by browser for role="dialog")
+* - Click outside modal closes it
+* - Close button has descriptive label for screen readers
+*
+* @param props - Modal component props
+* @returns JSX element rendered via createPortal
+*/
+const Modal = ({ children, isOpen, container, disableScroll = true, onClose, hasCloseButton = false, title, size = ModalSize.MD, className,...props }) => {
+	const containerElement = useGetElementOrWindow(container);
+	useScrollBlockage({
+		key: "modal",
+		disableScroll: isOpen && disableScroll
+	});
+	if (!containerElement) return /* @__PURE__ */ jsx(Fragment, {});
+	const hasTitle = typeof title === "string";
+	return createPortal(/* @__PURE__ */ jsx(motion.div, {
+		className: "invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur",
+		animate: isOpen ? "visible" : "invisible",
+		variants: {
+			visible: {
+				opacity: 1,
+				visibility: "visible",
+				transition: {
+					duration: .1,
+					when: "beforeChildren"
+				}
+			},
+			invisible: {
+				opacity: 0,
+				visibility: "hidden",
+				transition: {
+					duration: .1,
+					when: "afterChildren"
+				}
+			}
+		},
+		onClick: (e) => {
+			e.stopPropagation();
+			onClose?.();
+		},
+		"aria-hidden": !isOpen,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center p-4",
+			children: /* @__PURE__ */ jsxs(MotionModal, {
+				onClick: (e) => e.stopPropagation(),
+				initial: { scale: isOpen ? .5 : 1 },
+				animate: { scale: isOpen ? 1 : .5 },
+				transition: { duration: .3 },
+				className: modalVariants({
+					size,
+					className
+				}),
+				role: "dialog",
+				"aria-modal": true,
+				roundedSize: "2xl",
+				...props,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cn("cursor-default px-4", hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`),
+					children: [hasTitle && /* @__PURE__ */ jsx(H3, {
+						className: "ml-4 flex items-center justify-center font-bold text-lg",
+						children: title
+					}), hasCloseButton && /* @__PURE__ */ jsx(Button, {
+						variant: ButtonVariant.HOVERABLE,
+						color: ButtonColor.TEXT,
+						label: "Close modal",
+						className: "ml-auto",
+						onClick: (e) => {
+							e.stopPropagation();
+							onClose?.();
+						},
+						Icon: X,
+						size: ButtonSize.ICON_MD
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-1 flex-col items-center overflow-auto",
+					children
+				})]
+			})
+		})
+	}), containerElement);
+};
+
+//#endregion
+export { Modal, ModalSize };
+//# sourceMappingURL=Modal.mjs.map

package/dist/esm/components/Modal/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.mjs","names":["m","Modal: FC<ModalProps>"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport type { FC, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  /** Small modal: max height 30vh, max width xl */\n  SM = 'sm',\n  /** Medium modal: max height 50vh, max width xl */\n  MD = 'md',\n  /** Large modal: max height 70vh, max width 2xl */\n  LG = 'lg',\n  /** Extra large modal: max height 95vh, max width 6xl */\n  XL = 'xl',\n  /** Unset size: max height 95vh, full width responsive */\n  UNSET = 'unset',\n}\n\n/**\n * Props for the Modal component\n */\ntype ModalProps = {\n  /** Content to be displayed inside the modal */\n  children: ReactNode;\n  /** Controls whether the modal is visible */\n  isOpen: boolean;\n  /** Callback function called when the modal should be closed */\n  onClose?: () => void;\n  /** Container element to render the modal into (defaults to document.body) */\n  container?: HTMLElement;\n  /** Whether to disable scrolling on the background content */\n  disableScroll?: boolean;\n  /** Whether to display a close button in the modal header */\n  hasCloseButton?: boolean;\n  /** Optional title displayed at the top of the modal */\n  title?: string;\n  /** Size variant for the modal */\n  size?: ModalSize | `${ModalSize}`;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\n/**\n * Class name variants for different modal sizes using class-variance-authority\n * Defines responsive sizing and scrollable content for modal containers\n */\nconst modalVariants = cva(\n  'cursor-default justify-center overflow-auto py-3 shadow-sm',\n  {\n    variants: {\n      size: {\n        /** Small modal: height auto, max-height 30vh, width 95vw, max-width xl */\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        /** Medium modal: height auto, max-height 50vh, width 95vw, max-width xl */\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        /** Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl */\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        /** Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl */\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        /** Unset modal: height auto, max-height 95vh, width 95vw, no max-width */\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n/**\n * Motion-enabled modal component with Framer Motion support\n * Extends Container component with motion capabilities for animations\n */\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <div className=\"flex justify-center p-4\">\n        <MotionModal\n          onClick={(e) => e.stopPropagation()}\n          initial={{ scale: isOpen ? 0.5 : 1 }}\n          animate={{ scale: isOpen ? 1 : 0.5 }}\n          transition={{ duration: 0.3 }}\n          className={modalVariants({\n            size,\n            className,\n          })}\n          role=\"dialog\"\n          aria-modal\n          roundedSize=\"2xl\"\n          {...props}\n        >\n          <div\n            className={cn(\n              'cursor-default px-4',\n              hasCloseButton && hasTitle\n                ? `flex items-center justify-center`\n                : hasCloseButton\n                  ? `flex items-center justify-end`\n                  : hasTitle\n                    ? `items-center`\n                    : `hidden`\n            )}\n          >\n            {hasTitle && (\n              <H3 className=\"ml-4 flex items-center justify-center font-bold text-lg\">\n                {title}\n              </H3>\n            )}\n            {hasCloseButton && (\n              <Button\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                label=\"Close modal\"\n                className=\"ml-auto\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onClose?.();\n                }}\n                Icon={X}\n                size={ButtonSize.ICON_MD}\n              />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-center overflow-auto\">\n            {children}\n          </div>\n        </MotionModal>\n      </div>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,kDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;AAwCF,MAAM,gBAAgB,IACpB,8DACA;CACE,UAAU,EACR,MAAM;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;;;;;AAMD,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAaC,SAAyB,EACpC,UACA,QACA,WACA,gBAAgB,MAChB,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,UACA,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,KAAI,CAAC,iBAAkB,QAAO,iCAAK;CAEnC,MAAM,WAAW,OAAO,UAAU;AAElC,QAAO,aACL,oBAACD,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,oBAAC;GAAI,WAAU;aACb,qBAAC;IACC,UAAU,MAAM,EAAE,iBAAiB;IACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;IACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;IACpC,YAAY,EAAE,UAAU,IAAK;IAC7B,WAAW,cAAc;KACvB;KACA;KACD,CAAC;IACF,MAAK;IACL;IACA,aAAY;IACZ,GAAI;eAEJ,qBAAC;KACC,WAAW,GACT,uBACA,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA,SACT;gBAEA,YACC,oBAAC;MAAG,WAAU;gBACX;OACE,EAEN,kBACC,oBAAC;MACC,SAAS,cAAc;MACvB,OAAO,YAAY;MACnB,OAAM;MACN,WAAU;MACV,UAAU,MAAM;AACd,SAAE,iBAAiB;AACnB,kBAAW;;MAEb,MAAM;MACN,MAAM,WAAW;OACjB;MAEA,EACN,oBAAC;KAAI,WAAU;KACZ;MACG;KACM;IACV;GACA,EACR,iBACD"}

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

@@ -0,0 +1,3 @@
+import { Modal, ModalSize } from "./Modal.mjs";
+
+export { Modal, ModalSize };

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

@@ -0,0 +1,77 @@
+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 };
+//# sourceMappingURL=Burger.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Burger.mjs","names":[],"sources":["../../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\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,UACA,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"}

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

@@ -0,0 +1,98 @@
+'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] 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

@@ -0,0 +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] 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"}

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

@@ -0,0 +1,171 @@
+'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 collapsible full-screen menu,
+* scroll-aware behavior, and smooth animations. Optimized for touch interactions and
+* mobile user experience patterns.
+*
+* Features:
+* - Collapsible hamburger menu with full-screen overlay
+* - Auto-hide on scroll down, show on scroll up for screen space optimization
+* - Background scroll prevention when menu is open
+* - Staggered animations for smooth menu item reveals
+* - Flexible content areas (top/bottom children and sections)
+* - Responsive layout with viewport-aware sizing
+* - Backdrop blur effects for modern glass-morphism design
+*
+* Layout Structure:
+* ```
+* [Logo] ----------- [Right Items] [Burger]
+*           (when expanded)
+* ┌─────────────────────────────────────────┐
+* │ [Top Children]                          │
+* │ [Top Sections - Navigation Items]       │
+* │ [Bottom Sections - Navigation Items]    │
+* │ [Bottom Children]                       │
+* └─────────────────────────────────────────┘
+* ```
+*
+* Behavioral Features:
+* - Sticky positioning with dynamic hide/show based on scroll direction
+* - Background scroll locking when menu is expanded
+* - Click outside to close expanded menu
+* - Smooth height animations with MaxHeightSmoother
+* - Intelligent burger button visibility (only shown if sections exist)
+*
+* Animation Details:
+* - Menu items animate in with staggered timing (70ms delay between items)
+* - Exit animations are reversed with 50ms stagger
+* - Initial delay of 200ms before items start animating in
+* - Full viewport height menu with dynamic height calculation
+*
+* @example
+* Basic mobile navbar:
+* ```tsx
+* <MobileNavbar
+*   logo={<MobileLogo />}
+*   topSections={primaryNavItems}
+*   rightItems={<SearchIcon />}
+* />
+* ```
+*
+* @example
+* Full-featured mobile navbar:
+* ```tsx
+* <MobileNavbar
+*   logo={<Logo />}
+*   topChildren={<WelcomeMessage />}
+*   topSections={mainNavItems}
+*   bottomSections={utilityNavItems}
+*   bottomChildren={<UserProfile />}
+*   rightItems={
+*     <>
+*       <NotificationIcon />
+*       <SearchIcon />
+*     </>
+*   }
+* />
+* ```
+*
+* Accessibility Features:
+* - Menu expanded state communicated via aria-expanded
+* - Focus management and keyboard navigation support
+* - Screen reader friendly with semantic nav structure
+*
+* @template T - Tab properties type extending TabProps for type safety
+* @param props - MobileNavbar component props
+* @returns Mobile navigation with collapsible full-screen menu
+*/
+const MobileNavbar = ({ logo, topChildren, topSections = [], bottomChildren, bottomSections = [], rightItems }) => {
+	const [isHidden, setIsHidden] = useState(false);
+	const [isUnrolled, setIsUnrolled] = useState(false);
+	const navRef = useRef(null);
+	useScrollBlockage({
+		disableScroll: isUnrolled,
+		key: "mobile_nav"
+	});
+	useScrollDetection({
+		onScrollUp: () => setIsHidden(false),
+		onScrollDown: () => setIsHidden(true),
+		isEnabled: !isUnrolled
+	});
+	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$1) => !isUnrolled$1)
+				})]
+			})]
+		}), /* @__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

@@ -0,0 +1 @@
+{"version":3,"file":"MobileNavbar.mjs","names":["navVariants: Variants","isUnrolled"],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { m, type Variants } from 'framer-motion';\nimport { type ReactElement, type ReactNode, useRef, useState } from 'react';\nimport { useScrollBlockage, useScrollDetection } from '../../hooks';\nimport { cn } from '../../utils/cn';\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};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with collapsible full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - Collapsible hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with collapsible full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: isUnrolled,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"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":";;;;;;;;;;;;;;;;;AAiCA,MAAMA,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,iBAC0B;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;EACb,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,iBAAe,CAACC,aAAW;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"}