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

package/dist/components/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","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 { ReactNode, type FC } 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\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\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\nconst modalVariants = cva(\n  'cursor-default overflow-auto py-3 shadow-sm justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\nconst MotionModal = m.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\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=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto 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 text-lg font-bold\">\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"],"names":["ModalSize","cva","m","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","jsxs","cn","H3","Button","ButtonVariant","ButtonColor","X","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","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 { ReactNode, type FC } 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 overflow-auto py-3 shadow-sm justify-center',\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=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto 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 text-lg font-bold\">\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"],"names":["ModalSize","cva","m","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","jsxs","cn","H3","Button","ButtonVariant","ButtonColor","X","ButtonSize"],"mappings":"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"}

package/dist/components/Modal/Modal.d.ts

@@ -1,29 +1,107 @@
 import { ReactNode, FC } from 'react';
 import { ContainerProps } from '../Container';
+/**
+ * Enumeration of available modal sizes
+ */
 export declare enum ModalSize {
+    /** Small modal: max height 30vh, max width xl */
     SM = "sm",
+    /** Medium modal: max height 50vh, max width xl */
     MD = "md",
+    /** Large modal: max height 70vh, max width 2xl */
     LG = "lg",
+    /** Extra large modal: max height 95vh, max width 6xl */
     XL = "xl",
+    /** Unset size: max height 95vh, full width responsive */
     UNSET = "unset"
 }
+/**
+ * Props for the Modal component
+ */
 type ModalProps = {
+    /** Content to be displayed inside the modal */
     children: ReactNode;
+    /** Controls whether the modal is visible */
     isOpen: boolean;
+    /** Callback function called when the modal should be closed */
     onClose?: () => void;
+    /** Container element to render the modal into (defaults to document.body) */
     container?: HTMLElement;
+    /** Whether to disable scrolling on the background content */
     disableScroll?: boolean;
+    /** Whether to display a close button in the modal header */
     hasCloseButton?: boolean;
+    /** Optional title displayed at the top of the modal */
     title?: string;
+    /** Size variant for the modal */
     size?: ModalSize | `${ModalSize}`;
 } & Pick<ContainerProps, 'className' | 'transparency' | 'border' | 'background' | 'roundedSize' | 'borderColor' | 'padding' | 'separator' | 'gap'>;
 /**
- * Usage example:
+ * 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}>
- *   Modal content
+ * <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
  */
 export declare const Modal: FC<ModalProps>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,oBAAY,SAAS;IACnB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,KAAK,UAAU;CAChB;AAED,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,SAAS,EAAE,CAAC;CACnC,GAAG,IAAI,CACN,cAAc,EACZ,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,aAAa,GACb,SAAS,GACT,WAAW,GACX,KAAK,CACR,CAAC;AAsBF;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAiGhC,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAK3C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D;;GAEG;AACH,oBAAY,SAAS;IACnB,iDAAiD;IACjD,EAAE,OAAO;IACT,kDAAkD;IAClD,EAAE,OAAO;IACT,kDAAkD;IAClD,EAAE,OAAO;IACT,wDAAwD;IACxD,EAAE,OAAO;IACT,yDAAyD;IACzD,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,KAAK,UAAU,GAAG;IAChB,+CAA+C;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,MAAM,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,IAAI,CAAC,EAAE,SAAS,GAAG,GAAG,SAAS,EAAE,CAAC;CACnC,GAAG,IAAI,CACN,cAAc,EACZ,WAAW,GACX,cAAc,GACd,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,aAAa,GACb,SAAS,GACT,WAAW,GACX,KAAK,CACR,CAAC;AAmCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAiGhC,CAAC"}

package/dist/components/Modal/Modal.mjs

@@ -29,10 +29,15 @@ const modalVariants = cva(
   {
     variants: {
       size: {
+        /** Small modal: height auto, max-height 30vh, width 95vw, max-width xl */
         sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
+        /** Medium modal: height auto, max-height 50vh, width 95vw, max-width xl */
         md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
+        /** Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl */
         lg: "h-auto max-h-[70vh] w-[95vw] max-w-2xl",
+        /** Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl */
         xl: "h-auto max-h-[95vh] w-[95vw] max-w-6xl",
+        /** Unset modal: height auto, max-height 95vh, width 95vw, no max-width */
         unset: "h-auto max-h-[95vh] w-[95vw]"
       }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","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 { ReactNode, type FC } 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\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\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\nconst modalVariants = cva(\n  'cursor-default overflow-auto py-3 shadow-sm justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\nconst MotionModal = m.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\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=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto 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 text-lg font-bold\">\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"],"names":["ModalSize","m"],"mappings":";;;;;;;;;;;;;;;;;;AAaO,IAAK,8BAAAA,eAAL;AACLA,aAAA,IAAA,IAAK;AACLA,aAAA,IAAA,IAAK;AACLA,aAAA,IAAA,IAAK;AACLA,aAAA,IAAA,IAAK;AACLA,aAAA,OAAA,IAAQ;AALE,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AA8BZ,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAEA,MAAM,cAAcC,OAAE,OAAO,SAAS;AAU/B,MAAM,QAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,mBAAmB,sBAAsB,SAAS;AAExD,oBAAkB,EAAE,KAAK,SAAS,eAAe,UAAU,eAAe;AAE1E,MAAI,CAAC,iBAAkB,QAAO,oBAAA,UAAA,CAAA,CAAE;AAEhC,QAAM,WAAW,OAAO,UAAU;AAElC,SAAO;AAAA,IACL;AAAA,MAACA,OAAE;AAAA,MAAF;AAAA,QACC,WAAU;AAAA,QACV,SAAS,SAAS,YAAY;AAAA,QAC9B,UAAU;AAAA,UACR,SAAS;AAAA,YACP,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,YAAY,EAAE,UAAU,KAAK,MAAM,iBAAA;AAAA,UAAiB;AAAA,UAEtD,WAAW;AAAA,YACT,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,YAAY,EAAE,UAAU,KAAK,MAAM,gBAAA;AAAA,UAAgB;AAAA,QACrD;AAAA,QAEF,SAAS,CAAC,MAAM;AACd,YAAE,gBAAA;AACF,oBAAA;AAAA,QACF;AAAA,QACA,eAAa,CAAC;AAAA,QAEd,UAAA,oBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,YAClB,SAAS,EAAE,OAAO,SAAS,MAAM,EAAA;AAAA,YACjC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAA;AAAA,YAC/B,YAAY,EAAE,UAAU,IAAA;AAAA,YACxB,WAAW,cAAc;AAAA,cACvB;AAAA,cACA;AAAA,YAAA,CACD;AAAA,YACD,MAAK;AAAA,YACL,cAAU;AAAA,YACV,aAAY;AAAA,YACX,GAAG;AAAA,YAEJ,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,kBAAkB,WACd,qCACA,iBACE,kCACA,WACE,iBACA;AAAA,kBAAA;AAAA,kBAGT,UAAA;AAAA,oBAAA,YACC,oBAAC,IAAA,EAAG,WAAU,2DACX,UAAA,OACH;AAAA,oBAED,kBACC;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,SAAS,cAAc;AAAA,wBACvB,OAAO,YAAY;AAAA,wBACnB,OAAM;AAAA,wBACN,WAAU;AAAA,wBACV,SAAS,CAAC,MAAM;AACd,4BAAE,gBAAA;AACF,oCAAA;AAAA,wBACF;AAAA,wBACA,MAAM;AAAA,wBACN,MAAM,WAAW;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACnB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,oBAAC,OAAA,EAAI,WAAU,mDACZ,SAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EACF,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"Modal.mjs","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 { ReactNode, type FC } 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 overflow-auto py-3 shadow-sm justify-center',\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=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto 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 text-lg font-bold\">\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"],"names":["ModalSize","m"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Burger.cjs","sources":["../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n  isActive?: boolean;\n}\n\nconst lineStyle =\n  'bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300';\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"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAOA,MAAM,YACJ;AAEK,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,wCAAwC,SAAS;AAAA,IAC/D,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,MAAK;AAAA,IACL,cAAY,WAAW,eAAe;AAAA,IACrC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAD,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAE,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,oBAAoB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,6BAA6B;AAAA,YAAA;AAAA,UAC1C;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEAC,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,OAAA,EAAI,WAAWD,SAAAA,GAAG,WAAW,WAAW,cAAc,aAAa,EAAA,CAAG,EAAA,CACzE;AAAA,sCAEC,OAAA,EACC,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,mBAAmB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,4BAA4B;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"Burger.cjs","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"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAeA,MAAM,YACJ;AAoDK,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,wCAAwC,SAAS;AAAA,IAC/D,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,MAAK;AAAA,IACL,cAAY,WAAW,eAAe;AAAA,IACrC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAD,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAE,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,oBAAoB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,6BAA6B;AAAA,YAAA;AAAA,UAC1C;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEAC,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,OAAA,EAAI,WAAWD,SAAAA,GAAG,WAAW,WAAW,cAAc,aAAa,EAAA,CAAG,EAAA,CACzE;AAAA,sCAEC,OAAA,EACC,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,mBAAmB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,4BAA4B;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AACF;;"}

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

@@ -1,7 +1,61 @@
 import { HTMLAttributes } from 'react';
+/**
+ * Props for the Burger menu component
+ */
 interface BurgerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the burger menu is in active/open state */
     isActive?: boolean;
 }
+/**
+ * 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
+ */
 export declare const Burger: ({ isActive, className, ...props }: BurgerProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Burger.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Burger.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Burger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,UAAU,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAKD,eAAO,MAAM,MAAM,GAAI,mCAIpB,WAAW,4CAsCb,CAAC"}
+{"version":3,"file":"Burger.d.ts","sourceRoot":"","sources":["../../../src/components/Navbar/Burger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C;;GAEG;AACH,UAAU,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1D,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,MAAM,GAAI,mCAIpB,WAAW,4CAsCb,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Burger.mjs","sources":["../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n  isActive?: boolean;\n}\n\nconst lineStyle =\n  'bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300';\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"],"names":[],"mappings":";;AAOA,MAAM,YACJ;AAEK,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,wCAAwC,SAAS;AAAA,IAC/D,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,MAAK;AAAA,IACL,cAAY,WAAW,eAAe;AAAA,IACrC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,qBAAC,OAAA,EACC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,WAAW,WAAW,oBAAoB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,WAAW,6BAA6B;AAAA,YAAA;AAAA,UAC1C;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEA,oBAAC,OAAA,EACC,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,WAAW,WAAW,cAAc,aAAa,EAAA,CAAG,EAAA,CACzE;AAAA,2BAEC,OAAA,EACC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,WAAW,WAAW,mBAAmB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,WAAW,4BAA4B;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AACF;"}
+{"version":3,"file":"Burger.mjs","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"],"names":[],"mappings":";;AAeA,MAAM,YACJ;AAoDK,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,wCAAwC,SAAS;AAAA,IAC/D,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,MAAK;AAAA,IACL,cAAY,WAAW,eAAe;AAAA,IACrC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAA,qBAAC,OAAA,EACC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,WAAW,WAAW,oBAAoB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,WAAW,6BAA6B;AAAA,YAAA;AAAA,UAC1C;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEA,oBAAC,OAAA,EACC,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,WAAW,WAAW,cAAc,aAAa,EAAA,CAAG,EAAA,CACzE;AAAA,2BAEC,OAAA,EACC,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,WAAW,WAAW,mBAAmB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,WAAW,4BAA4B;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AACF;"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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