@intlayer/design-system 9.0.0-canary.2 → 9.0.0-canary.20

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\n} & Partial<\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\nconst modalVariants = cva(\n  'flex cursor-default flex-col overflow-hidden shadow-sm',\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-4xl',\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\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\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=\"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  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\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-hidden 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      <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({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant=\"hoverable\"\n              color=\"text\"\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size=\"icon-md\"\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex size-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;AAGD,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,OAAO,MACP,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAGb,WAAS,iBAAiB,WAAW,aAAa;AAClD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,kCAAK;CAEnC,MAAM,WAAW,QAAQ,MAAM;CAG/B,MAAM,sBACJ,uBACG,WAAmD;AAGxD,QAAO,aACL,oBAACA,OAAE,KAAH;EACE,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,qBAAC,aAAD;GACE,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IAAE;IAAM;IAAW,CAAC;GAC7C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;aAXN,CAcE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;cAVH,CAYG,YACC,oBAAC,IAAD;KAAI,WAAU;eACX;KACE,GAEN,kBACC,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAK;KACL,EAEA;OAGN,oBAAC,OAAD;IACE,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,mBAClB;cAID,oBAAC,OAAD;KACE,WAAW,GACT,kCACA,oBACD;KAEA;KACG;IACF,EACM;;EACR,GACR,iBACD"}
+{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'unset';\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\n} & Partial<\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\nconst modalVariants = cva(\n  'flex cursor-default flex-col overflow-hidden shadow-sm',\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-4xl',\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\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\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=\"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  onClose,\n  hasCloseButton = false,\n  title,\n  size = 'md',\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\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-hidden 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      <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({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant=\"hoverable\"\n              color=\"text\"\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size=\"icon-md\"\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex size-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA8CA,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AAGA,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAEA,MAAM,cAAcA,OAAE,OAAO,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEtC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,OAAO,MACP,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,SAAS;CAExD,kBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;CAAc,CAAC;CAE1E,gBAAgB;EACd,MAAM,gBAAgB,UAAyB;GAC7C,IAAI,MAAM,QAAQ,YAAY,UAAU,SACtC,QAAQ;EAEZ;EACA,SAAS,iBAAiB,WAAW,YAAY;EACjD,aAAa;GACX,SAAS,oBAAoB,WAAW,YAAY;EACtD;CACF,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,IAAI,CAAC,kBAAkB,OAAO,iCAAI;CAElC,MAAM,WAAW,QAAQ,KAAK;CAG9B,MAAM,sBACJ,uBACG,WAAmD;CAGxD,OAAO,aACL,oBAACA,OAAE,KAAH;EACE,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAiB;GACtD;GACA,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;IAAgB;GACrD;EACF;EACA,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,UAAU;EACZ;EACA,eAAa,CAAC;YAEd,qBAAC,aAAD;GACE,UAAU,MAAM,EAAE,gBAAgB;GAClC,SAAS,EAAE,OAAO,SAAS,KAAM,EAAE;GACnC,SAAS,EAAE,OAAO,SAAS,IAAI,GAAI;GACnC,YAAY,EAAE,UAAU,GAAI;GAC5B,WAAW,cAAc;IAAE;IAAM;GAAU,CAAC;GAC5C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;aAXN,CAcE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,QACV;cAVF,CAYG,YACC,oBAAC,IAAD;KAAI,WAAU;eACX;IACC,IAEL,kBACC,oBAAC,QAAD;KACE,SAAQ;KACR,OAAM;KACN,OAAM;KACN,WAAU;KACV,UAAU,MAAM;MACd,EAAE,gBAAgB;MAClB,UAAU;KACZ;KACA,MAAM;KACN,MAAK;IACN,EAEA;OAGL,oBAAC,OAAD;IACE,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,kBACnB;cAIA,oBAAC,OAAD;KACE,WAAW,GACT,kCACA,mBACF;KAEC;IACE;GACF,EACM;;CACR,IACP,gBACF;AACF"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { TabSelector, type TabSelectorItemProps } 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/95 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n    {logo}\n\n    <TabSelector\n      selectedChoice={selectedChoice}\n      className=\"ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n      tabs={sections}\n      hoverable\n      color=\"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf;EACG;EAED,oBAAC,aAAD;GACkB;GAChB,WAAU;GACV,MAAM;GACN;GACA,OAAM;GACN;EAEF,oBAAC,OAAD;GAAK,WAAU;aACZ;GACG;EACF"}
+{"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport { TabSelector, type TabSelectorItemProps } 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/95 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n    {logo}\n\n    <TabSelector\n      selectedChoice={selectedChoice}\n      className=\"ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n      tabs={sections}\n      hoverable\n      color=\"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC,OAAD;CAAK,WAAU;WAAf;EACG;EAED,oBAAC,aAAD;GACkB;GAChB,WAAU;GACV,MAAM;GACN;GACA,OAAM;EACP;EAED,oBAAC,OAAD;GAAK,WAAU;aACZ;EACE;CACF"}

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

@@ -1,9 +1,9 @@
 '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 { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1 +1 @@
-{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport { type ReactElement, type ReactNode, useRef, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled && rollable,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-100 items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;EAAK,EAC1D;CACD,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;EAAI,EAC5D;CACF;;;;;AAMD,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,EAAE,EAChB,gBACA,iBAAiB,EAAE,EACnB,YACA,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,MAAM;CACxD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,MAAM;CAE5D,MAAM,SAAS,OAAuB,KAAK;AAE3C,mBAAkB;EAChB,eAAe;EACf,KAAK;EACN,CAAC;AAEF,oBAAmB;EACjB,kBAAkB,YAAY,MAAM;EACpC,oBAAoB,YAAY,KAAK;EACrC,WAAW,CAAC,cAAc;EAC3B,CAAC;CAEF,MAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;CAExE,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;AAEpE,QACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,gBAClC;EACD,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,GAEL,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,WAAW;KACzD,EAEA;MACF;MAEN,oBAAC,OAAD;GACE,WAAW,GACT,SACA,mDACD;aAED,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,MAAM;KACnC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,MACvC;eAPH;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,eACG;;MAEN,oBAAC,OAAD;OAAK,WAAU;iBACZ;OACG;MACA;;IACU;GAChB,EACF"}
+{"version":3,"file":"MobileNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/MobileNavbar.tsx"],"sourcesContent":["'use client';\n\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { useScrollDetection } from '@hooks/useScrollDetection';\nimport { cn } from '@utils/cn';\nimport { m, type Variants } from 'framer-motion';\nimport { type ReactElement, type ReactNode, useRef, useState } from 'react';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { Burger } from './Burger';\n\n/**\n * Props for the MobileNavbar component\n * @template T - The tab props type extending TabProps\n */\ntype MobileNavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element displayed in the header */\n  logo: ReactNode;\n  /** Additional content displayed at the top of expanded mobile menu */\n  topChildren?: ReactNode;\n  /** Navigation sections displayed in the top area of expanded menu */\n  topSections?: ReactElement<T>[];\n  /** Additional content displayed at the bottom of expanded mobile menu */\n  bottomChildren?: ReactNode;\n  /** Navigation sections displayed in the bottom area of expanded menu */\n  bottomSections?: ReactElement<T>[];\n  /** Right-aligned items in the collapsed header (e.g., search, notifications) */\n  rightItems?: ReactNode;\n  /** Whether the navbar should be rollable (default: true) */\n  rollable?: boolean;\n};\n\n/**\n * Framer Motion animation variants for staggered menu item reveals\n * Creates a smooth cascading effect when menu opens/closes\n */\nconst navVariants: Variants = {\n  open: {\n    transition: { staggerChildren: 0.07, delayChildren: 0.2 },\n  },\n  closed: {\n    transition: { staggerChildren: 0.05, staggerDirection: -1 },\n  },\n};\n\n/**\n * Shared background styling for mobile navbar components\n * Provides glass-morphism effect with blur and transparency\n */\nconst bgStyle =\n  'bg-card/95 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur';\n\n/**\n * Mobile Navigation Bar Component\n *\n * A sophisticated mobile-first navigation component with rollable full-screen menu,\n * scroll-aware behavior, and smooth animations. Optimized for touch interactions and\n * mobile user experience patterns.\n *\n * Features:\n * - rollable hamburger menu with full-screen overlay\n * - Auto-hide on scroll down, show on scroll up for screen space optimization\n * - Background scroll prevention when menu is open\n * - Staggered animations for smooth menu item reveals\n * - Flexible content areas (top/bottom children and sections)\n * - Responsive layout with viewport-aware sizing\n * - Backdrop blur effects for modern glass-morphism design\n *\n * Layout Structure:\n * ```\n * [Logo] ----------- [Right Items] [Burger]\n *           (when expanded)\n * ┌─────────────────────────────────────────┐\n * │ [Top Children]                          │\n * │ [Top Sections - Navigation Items]       │\n * │ [Bottom Sections - Navigation Items]    │\n * │ [Bottom Children]                       │\n * └─────────────────────────────────────────┘\n * ```\n *\n * Behavioral Features:\n * - Sticky positioning with dynamic hide/show based on scroll direction\n * - Background scroll locking when menu is expanded\n * - Click outside to close expanded menu\n * - Smooth height animations with MaxHeightSmoother\n * - Intelligent burger button visibility (only shown if sections exist)\n *\n * Animation Details:\n * - Menu items animate in with staggered timing (70ms delay between items)\n * - Exit animations are reversed with 50ms stagger\n * - Initial delay of 200ms before items start animating in\n * - Full viewport height menu with dynamic height calculation\n *\n * @example\n * Basic mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<MobileLogo />}\n *   topSections={primaryNavItems}\n *   rightItems={<SearchIcon />}\n * />\n * ```\n *\n * @example\n * Full-featured mobile navbar:\n * ```tsx\n * <MobileNavbar\n *   logo={<Logo />}\n *   topChildren={<WelcomeMessage />}\n *   topSections={mainNavItems}\n *   bottomSections={utilityNavItems}\n *   bottomChildren={<UserProfile />}\n *   rightItems={\n *     <>\n *       <NotificationIcon />\n *       <SearchIcon />\n *     </>\n *   }\n * />\n * ```\n *\n * Accessibility Features:\n * - Menu expanded state communicated via aria-expanded\n * - Focus management and keyboard navigation support\n * - Screen reader friendly with semantic nav structure\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - MobileNavbar component props\n * @returns Mobile navigation with rollable full-screen menu\n */\nexport const MobileNavbar = <T extends TabSelectorItemProps>({\n  logo,\n  topChildren,\n  topSections = [],\n  bottomChildren,\n  bottomSections = [],\n  rightItems,\n  rollable = true,\n}: MobileNavbarProps<T>) => {\n  const [isHidden, setIsHidden] = useState<boolean>(false);\n  const [isUnrolled, setIsUnrolled] = useState<boolean>(false);\n\n  const navRef = useRef<HTMLDivElement>(null);\n\n  useScrollBlockage({\n    disableScroll: rollable,\n    key: 'mobile_nav',\n  });\n\n  useScrollDetection({\n    onScrollUp: () => setIsHidden(false),\n    onScrollDown: () => setIsHidden(true),\n    isEnabled: !isUnrolled && rollable,\n  });\n\n  const backDivHeight = !isHidden ? (navRef.current?.clientHeight ?? 0) : 0;\n\n  const isBurgerShowed = topSections.length + bottomSections.length > 0;\n\n  return (\n    <nav\n      className={cn(\n        bgStyle,\n        'sticky top-0 z-50 flex w-screen flex-col transition',\n        isHidden ? '-translate-y-full' : 'translate-y-0'\n      )}\n      id=\"mobile-menu\"\n    >\n      <div\n        className=\"flex w-full items-center justify-between gap-1 px-4 py-3 md:gap-[10vw]\"\n        ref={navRef}\n      >\n        {logo}\n\n        <div className=\"flex w-full flex-1 items-center justify-end gap-6\">\n          <div className=\"flex w-full items-center justify-end gap-1\">\n            {rightItems}\n          </div>\n\n          {isBurgerShowed && (\n            <Burger\n              isActive={isUnrolled}\n              onClick={() => setIsUnrolled((isUnrolled) => !isUnrolled)}\n            />\n          )}\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          bgStyle,\n          'absolute bottom-0 left-0 w-full translate-y-full'\n        )}\n      >\n        <MaxHeightSmoother isHidden={!isUnrolled}>\n          <m.div\n            className=\"flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide\"\n            onClick={() => setIsUnrolled(false)}\n            animate={isUnrolled ? 'open' : 'closed'}\n            variants={navVariants}\n            style={{\n              height: `calc(100vh - ${backDivHeight}px)`,\n            }}\n          >\n            {topChildren}\n            <div className=\"flex h-full flex-col justify-center\">\n              {topSections}\n              {bottomSections}\n            </div>\n\n            <div className=\"m-auto flex w-full max-w-100 items-center justify-center gap-1 px-5 py-3\">\n              {bottomChildren}\n            </div>\n          </m.div>\n        </MaxHeightSmoother>\n      </div>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,MAAM,cAAwB;CAC5B,MAAM,EACJ,YAAY;EAAE,iBAAiB;EAAM,eAAe;CAAI,EAC1D;CACA,QAAQ,EACN,YAAY;EAAE,iBAAiB;EAAM,kBAAkB;CAAG,EAC5D;AACF;;;;;AAMA,MAAM,UACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFF,MAAa,gBAAgD,EAC3D,MACA,aACA,cAAc,CAAC,GACf,gBACA,iBAAiB,CAAC,GAClB,YACA,WAAW,WACe;CAC1B,MAAM,CAAC,UAAU,eAAe,SAAkB,KAAK;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAkB,KAAK;CAE3D,MAAM,SAAS,OAAuB,IAAI;CAE1C,kBAAkB;EAChB,eAAe;EACf,KAAK;CACP,CAAC;CAED,mBAAmB;EACjB,kBAAkB,YAAY,KAAK;EACnC,oBAAoB,YAAY,IAAI;EACpC,WAAW,CAAC,cAAc;CAC5B,CAAC;CAED,MAAM,gBAAgB,CAAC,WAAY,OAAO,SAAS,gBAAgB,IAAK;CAExE,MAAM,iBAAiB,YAAY,SAAS,eAAe,SAAS;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,SACA,uDACA,WAAW,sBAAsB,eACnC;EACA,IAAG;YANL,CAQE,qBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAFP,CAIG,MAED,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KAAK,WAAU;eACZ;IACE,IAEJ,kBACC,oBAAC,QAAD;KACE,UAAU;KACV,eAAe,eAAe,eAAe,CAAC,UAAU;IACzD,EAEA;KACF;MAEL,oBAAC,OAAD;GACE,WAAW,GACT,SACA,kDACF;aAEA,oBAAC,mBAAD;IAAmB,UAAU,CAAC;cAC5B,qBAAC,EAAE,KAAH;KACE,WAAU;KACV,eAAe,cAAc,KAAK;KAClC,SAAS,aAAa,SAAS;KAC/B,UAAU;KACV,OAAO,EACL,QAAQ,gBAAgB,cAAc,KACxC;eAPF;MASG;MACD,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,aACA,cACE;;MAEL,oBAAC,OAAD;OAAK,WAAU;iBACZ;MACE;KACA;;GACU;EAChB,EACF;;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\n\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AA+FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,EAAE,EACpB,oBAAoB,EAAE,EACtB,sBACA,uBAAuB,EAAE,EACzB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,KAAK;AAEpC,QAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;EACV,IAEF,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;EAChB"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\n\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AA+FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,CAAC,GACnB,oBAAoB,CAAC,GACrB,sBACA,uBAAuB,CAAC,GACxB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,IAAI;CAEnC,OAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;CACX,KAED,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;CACjB;AAEL"}

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

@@ -1 +1 @@
-{"version":3,"file":"useNavigation.mjs","names":[],"sources":["../../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Interface describing section data used for scroll detection\n */\ninterface SectionData {\n  /** Unique identifier of the section element */\n  id: string;\n  /** Distance from top of document to section start */\n  offsetTop: number;\n  /** Height of the section element */\n  offsetHeight: number;\n}\n\n/**\n * Navigation Actions Hook\n *\n * A comprehensive hook for managing navigation interactions and scroll-based section detection.\n * Provides automatic active section detection based on scroll position and handles smooth\n * scrolling navigation behaviors.\n *\n * Features:\n * - Automatic active section detection based on scroll position\n * - Smooth scrolling to sections within the same page\n * - Logo click handling with home navigation\n * - Section click handling with conditional scrolling vs navigation\n * - Passive scroll event listeners for optimal performance\n * - Viewport-aware active section calculation (using screen height / 4 offset)\n *\n * Active Section Detection:\n * - Monitors all `<section>` elements on the page\n * - Calculates which section is currently in the \"active\" zone\n * - Active zone is defined as the top 25% of the viewport\n * - Updates activeSection state as user scrolls\n *\n * Navigation Behaviors:\n * - Logo click: Scrolls to top if on home page, navigates to home if on other pages\n * - Section click: Smooth scrolls if on same page, executes callback if different page\n * - All scrolling uses smooth behavior for better UX\n *\n * @example\n * Basic usage in navigation component:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n *\n * // In navigation items\n * const navItems = sections.map(section => (\n *   <TabSelectorItem\n *     key={section.id}\n *     isActive={activeSection === section.id}\n *     onClick={() => onClickSection(section.id, section.url, section.onClick)}\n *   >\n *     {section.label}\n *   </TabSelectorItem>\n * ));\n *\n * // In logo\n * <Logo onClick={() => onClickLogo(navigate)} />\n * ```\n *\n * @example\n * Advanced usage with routing:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n * const navigate = useNavigate();\n *\n * const handleLogoClick = () => {\n *   onClickLogo((url) => {\n *     navigate(url);\n *     // Additional logic like analytics\n *     trackEvent('logo_click');\n *   });\n * };\n *\n * const handleSectionClick = (sectionId: string) => {\n *   onClickSection(\n *     sectionId,\n *     `/page#${sectionId}`,\n *     () => {\n *       navigate(`/page#${sectionId}`);\n *       trackEvent('section_navigation', { sectionId });\n *     }\n *   );\n * };\n * ```\n *\n * Performance Considerations:\n * - Uses passive scroll event listeners to prevent blocking\n * - Automatically cleans up event listeners on unmount\n * - Efficiently queries DOM elements using native selectors\n * - Calculates section positions dynamically for accuracy\n *\n * @returns Object containing navigation state and action handlers\n */\nexport const useNavActions = () => {\n  /** Currently active section ID based on scroll position */\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n\n  /**\n   * Detects which section is currently active based on scroll position\n   * Uses viewport-aware calculation to determine active section\n   */\n  const detectActiveSection = () => {\n    const scrollY = window.scrollY;\n    const sections = document.querySelectorAll('section');\n    const sectionsData: SectionData[] = [];\n\n    // Collect position data for all sections\n    sections.forEach((section) =>\n      sectionsData.push({\n        id: section.id,\n        offsetTop: section.offsetTop,\n        offsetHeight: section.offsetHeight,\n      })\n    );\n\n    // Find section that intersects with the active zone (top 25% of viewport)\n    const currentSection = sectionsData.find(\n      (section) =>\n        section.offsetTop <= scrollY + window.screen.height / 4 &&\n        section.offsetTop + section.offsetHeight >\n          scrollY + window.screen.height / 4\n    );\n\n    if (currentSection) {\n      setActiveSection(currentSection.id);\n    }\n  };\n\n  // Set up scroll listener for active section detection\n  useEffect(() => {\n    window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', detectActiveSection);\n    };\n  }, []);\n\n  /**\n   * Handles logo click behavior\n   * Scrolls to top if on home page, navigates to home if on other pages\n   *\n   * @param onClick - Callback function to handle navigation (e.g., router.push)\n   */\n  const onClickLogo = (onClick: (url: string) => void) => {\n    setActiveSection(null);\n\n    if (window.location.pathname === '/') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      onClick('/');\n    }\n  };\n\n  /**\n   * Handles section navigation click behavior\n   * Smooth scrolls if on same page, executes callback if different page\n   *\n   * @param sectionId - ID of the target section element\n   * @param url - URL of the page containing the section (optional)\n   * @param onClick - Callback function to handle navigation (optional)\n   */\n  const onClickSection = (\n    sectionId: string,\n    url?: string,\n    onClick?: () => void\n  ) => {\n    setActiveSection(sectionId);\n\n    // If on the same page, scroll to section\n    if (window.location.pathname === url) {\n      const sectionEl = document.getElementById(sectionId);\n\n      if (sectionEl) {\n        sectionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        });\n      }\n    } else {\n      // If on different page, execute callback (typically navigation)\n      onClick?.();\n    }\n  };\n\n  return {\n    /** Currently active section ID, null if no section is active */\n    activeSection,\n    /** Handler for logo click interactions */\n    onClickLogo,\n    /** Handler for section navigation clicks */\n    onClickSection,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAa,sBAAsB;;CAEjC,MAAM,CAAC,eAAe,oBAAoB,SAAwB,KAAK;;;;;CAMvE,MAAM,4BAA4B;EAChC,MAAM,UAAU,OAAO;EACvB,MAAM,WAAW,SAAS,iBAAiB,UAAU;EACrD,MAAM,eAA8B,EAAE;AAGtC,WAAS,SAAS,YAChB,aAAa,KAAK;GAChB,IAAI,QAAQ;GACZ,WAAW,QAAQ;GACnB,cAAc,QAAQ;GACvB,CAAC,CACH;EAGD,MAAM,iBAAiB,aAAa,MACjC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS,EACtC;AAED,MAAI,eACF,kBAAiB,eAAe,GAAG;;AAKvC,iBAAgB;AACd,SAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,MAAM,CAAC;AAEzE,eAAa;AACX,UAAO,oBAAoB,UAAU,oBAAoB;;IAE1D,EAAE,CAAC;;;;;;;CAQN,MAAM,eAAe,YAAmC;AACtD,mBAAiB,KAAK;AAEtB,MAAI,OAAO,SAAS,aAAa,IAC/B,QAAO,SAAS;GAAE,KAAK;GAAG,UAAU;GAAU,CAAC;MAE/C,SAAQ,IAAI;;;;;;;;;;CAYhB,MAAM,kBACJ,WACA,KACA,YACG;AACH,mBAAiB,UAAU;AAG3B,MAAI,OAAO,SAAS,aAAa,KAAK;GACpC,MAAM,YAAY,SAAS,eAAe,UAAU;AAEpD,OAAI,UACF,WAAU,eAAe;IACvB,UAAU;IACV,OAAO;IACP,QAAQ;IACT,CAAC;QAIJ,YAAW;;AAIf,QAAO;;EAEL;;EAEA;;EAEA;EACD"}
+{"version":3,"file":"useNavigation.mjs","names":[],"sources":["../../../../src/components/Navbar/useNavigation.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Interface describing section data used for scroll detection\n */\ninterface SectionData {\n  /** Unique identifier of the section element */\n  id: string;\n  /** Distance from top of document to section start */\n  offsetTop: number;\n  /** Height of the section element */\n  offsetHeight: number;\n}\n\n/**\n * Navigation Actions Hook\n *\n * A comprehensive hook for managing navigation interactions and scroll-based section detection.\n * Provides automatic active section detection based on scroll position and handles smooth\n * scrolling navigation behaviors.\n *\n * Features:\n * - Automatic active section detection based on scroll position\n * - Smooth scrolling to sections within the same page\n * - Logo click handling with home navigation\n * - Section click handling with conditional scrolling vs navigation\n * - Passive scroll event listeners for optimal performance\n * - Viewport-aware active section calculation (using screen height / 4 offset)\n *\n * Active Section Detection:\n * - Monitors all `<section>` elements on the page\n * - Calculates which section is currently in the \"active\" zone\n * - Active zone is defined as the top 25% of the viewport\n * - Updates activeSection state as user scrolls\n *\n * Navigation Behaviors:\n * - Logo click: Scrolls to top if on home page, navigates to home if on other pages\n * - Section click: Smooth scrolls if on same page, executes callback if different page\n * - All scrolling uses smooth behavior for better UX\n *\n * @example\n * Basic usage in navigation component:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n *\n * // In navigation items\n * const navItems = sections.map(section => (\n *   <TabSelectorItem\n *     key={section.id}\n *     isActive={activeSection === section.id}\n *     onClick={() => onClickSection(section.id, section.url, section.onClick)}\n *   >\n *     {section.label}\n *   </TabSelectorItem>\n * ));\n *\n * // In logo\n * <Logo onClick={() => onClickLogo(navigate)} />\n * ```\n *\n * @example\n * Advanced usage with routing:\n * ```tsx\n * const { activeSection, onClickLogo, onClickSection } = useNavActions();\n * const navigate = useNavigate();\n *\n * const handleLogoClick = () => {\n *   onClickLogo((url) => {\n *     navigate(url);\n *     // Additional logic like analytics\n *     trackEvent('logo_click');\n *   });\n * };\n *\n * const handleSectionClick = (sectionId: string) => {\n *   onClickSection(\n *     sectionId,\n *     `/page#${sectionId}`,\n *     () => {\n *       navigate(`/page#${sectionId}`);\n *       trackEvent('section_navigation', { sectionId });\n *     }\n *   );\n * };\n * ```\n *\n * Performance Considerations:\n * - Uses passive scroll event listeners to prevent blocking\n * - Automatically cleans up event listeners on unmount\n * - Efficiently queries DOM elements using native selectors\n * - Calculates section positions dynamically for accuracy\n *\n * @returns Object containing navigation state and action handlers\n */\nexport const useNavActions = () => {\n  /** Currently active section ID based on scroll position */\n  const [activeSection, setActiveSection] = useState<string | null>(null);\n\n  /**\n   * Detects which section is currently active based on scroll position\n   * Uses viewport-aware calculation to determine active section\n   */\n  const detectActiveSection = () => {\n    const scrollY = window.scrollY;\n    const sections = document.querySelectorAll('section');\n    const sectionsData: SectionData[] = [];\n\n    // Collect position data for all sections\n    sections.forEach((section) =>\n      sectionsData.push({\n        id: section.id,\n        offsetTop: section.offsetTop,\n        offsetHeight: section.offsetHeight,\n      })\n    );\n\n    // Find section that intersects with the active zone (top 25% of viewport)\n    const currentSection = sectionsData.find(\n      (section) =>\n        section.offsetTop <= scrollY + window.screen.height / 4 &&\n        section.offsetTop + section.offsetHeight >\n          scrollY + window.screen.height / 4\n    );\n\n    if (currentSection) {\n      setActiveSection(currentSection.id);\n    }\n  };\n\n  // Set up scroll listener for active section detection\n  useEffect(() => {\n    window.addEventListener('scroll', detectActiveSection, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', detectActiveSection);\n    };\n  }, []);\n\n  /**\n   * Handles logo click behavior\n   * Scrolls to top if on home page, navigates to home if on other pages\n   *\n   * @param onClick - Callback function to handle navigation (e.g., router.push)\n   */\n  const onClickLogo = (onClick: (url: string) => void) => {\n    setActiveSection(null);\n\n    if (window.location.pathname === '/') {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    } else {\n      onClick('/');\n    }\n  };\n\n  /**\n   * Handles section navigation click behavior\n   * Smooth scrolls if on same page, executes callback if different page\n   *\n   * @param sectionId - ID of the target section element\n   * @param url - URL of the page containing the section (optional)\n   * @param onClick - Callback function to handle navigation (optional)\n   */\n  const onClickSection = (\n    sectionId: string,\n    url?: string,\n    onClick?: () => void\n  ) => {\n    setActiveSection(sectionId);\n\n    // If on the same page, scroll to section\n    if (window.location.pathname === url) {\n      const sectionEl = document.getElementById(sectionId);\n\n      if (sectionEl) {\n        sectionEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'center',\n          inline: 'nearest',\n        });\n      }\n    } else {\n      // If on different page, execute callback (typically navigation)\n      onClick?.();\n    }\n  };\n\n  return {\n    /** Currently active section ID, null if no section is active */\n    activeSection,\n    /** Handler for logo click interactions */\n    onClickLogo,\n    /** Handler for section navigation clicks */\n    onClickSection,\n  };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAa,sBAAsB;;CAEjC,MAAM,CAAC,eAAe,oBAAoB,SAAwB,IAAI;;;;;CAMtE,MAAM,4BAA4B;EAChC,MAAM,UAAU,OAAO;EACvB,MAAM,WAAW,SAAS,iBAAiB,SAAS;EACpD,MAAM,eAA8B,CAAC;EAGrC,SAAS,SAAS,YAChB,aAAa,KAAK;GAChB,IAAI,QAAQ;GACZ,WAAW,QAAQ;GACnB,cAAc,QAAQ;EACxB,CAAC,CACH;EAGA,MAAM,iBAAiB,aAAa,MACjC,YACC,QAAQ,aAAa,UAAU,OAAO,OAAO,SAAS,KACtD,QAAQ,YAAY,QAAQ,eAC1B,UAAU,OAAO,OAAO,SAAS,CACvC;EAEA,IAAI,gBACF,iBAAiB,eAAe,EAAE;CAEtC;CAGA,gBAAgB;EACd,OAAO,iBAAiB,UAAU,qBAAqB,EAAE,SAAS,KAAK,CAAC;EAExE,aAAa;GACX,OAAO,oBAAoB,UAAU,mBAAmB;EAC1D;CACF,GAAG,CAAC,CAAC;;;;;;;CAQL,MAAM,eAAe,YAAmC;EACtD,iBAAiB,IAAI;EAErB,IAAI,OAAO,SAAS,aAAa,KAC/B,OAAO,SAAS;GAAE,KAAK;GAAG,UAAU;EAAS,CAAC;OAE9C,QAAQ,GAAG;CAEf;;;;;;;;;CAUA,MAAM,kBACJ,WACA,KACA,YACG;EACH,iBAAiB,SAAS;EAG1B,IAAI,OAAO,SAAS,aAAa,KAAK;GACpC,MAAM,YAAY,SAAS,eAAe,SAAS;GAEnD,IAAI,WACF,UAAU,eAAe;IACvB,UAAU;IACV,OAAO;IACP,QAAQ;GACV,CAAC;EAEL,OAEE,UAAU;CAEd;CAEA,OAAO;;EAEL;;EAEA;;EAEA;CACF;AACF"}

package/dist/esm/components/Pagination/NumberItemsSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberItemsSelector.mjs","names":[],"sources":["../../../../src/components/Pagination/NumberItemsSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\n\nexport type NumberItemsSelectorProps = {\n  value: string | number;\n  onValueChange: (value: string) => void;\n  min?: number;\n  max?: number;\n};\n\nexport const NumberItemsSelector: FC<NumberItemsSelectorProps> = ({\n  value,\n  onValueChange,\n  min = 5,\n  max = 500,\n}) => {\n  const { numberItemsSelector, selectPageSize } = useIntlayer('pagination');\n\n  const items = [\n    1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 100000,\n  ].filter((item) => item >= min && item <= max);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className=\"text-neutral text-sm\">{numberItemsSelector}</span>\n      <Select value={value.toString()} onValueChange={onValueChange}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder={selectPageSize} />\n        </Select.Trigger>\n        <Select.Content>\n          {items.map((item) => (\n            <Select.Item key={item} value={item.toString()}>\n              {item}\n            </Select.Item>\n          ))}\n        </Select.Content>\n      </Select>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAaA,MAAa,uBAAqD,EAChE,OACA,eACA,MAAM,GACN,MAAM,UACF;CACJ,MAAM,EAAE,qBAAqB,mBAAmB,YAAY,aAAa;CAEzE,MAAM,QAAQ;EACZ;EAAG;EAAG;EAAG;EAAI;EAAI;EAAI;EAAK;EAAK;EAAK;EAAM;EAAM;EAAM;EAAO;EAC9D,CAAC,QAAQ,SAAS,QAAQ,OAAO,QAAQ,IAAI;AAE9C,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAAM,WAAU;aAAwB;GAA2B,GACnE,qBAAC,QAAD;GAAQ,OAAO,MAAM,UAAU;GAAiB;aAAhD,CACE,oBAAC,OAAO,SAAR;IAAgB,WAAU;cACxB,oBAAC,OAAO,OAAR,EAAc,aAAa,gBAAkB;IAC9B,GACjB,oBAAC,OAAO,SAAR,YACG,MAAM,KAAK,SACV,oBAAC,OAAO,MAAR;IAAwB,OAAO,KAAK,UAAU;cAC3C;IACW,EAFI,KAEJ,CACd,EACa,EACV;KACL"}
+{"version":3,"file":"NumberItemsSelector.mjs","names":[],"sources":["../../../../src/components/Pagination/NumberItemsSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Select } from '../Select';\n\nexport type NumberItemsSelectorProps = {\n  value: string | number;\n  onValueChange: (value: string) => void;\n  min?: number;\n  max?: number;\n};\n\nexport const NumberItemsSelector: FC<NumberItemsSelectorProps> = ({\n  value,\n  onValueChange,\n  min = 5,\n  max = 500,\n}) => {\n  const { numberItemsSelector, selectPageSize } = useIntlayer('pagination');\n\n  const items = [\n    1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000, 100000,\n  ].filter((item) => item >= min && item <= max);\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <span className=\"text-neutral text-sm\">{numberItemsSelector}</span>\n      <Select value={value.toString()} onValueChange={onValueChange}>\n        <Select.Trigger className=\"w-20\">\n          <Select.Value placeholder={selectPageSize} />\n        </Select.Trigger>\n        <Select.Content>\n          {items.map((item) => (\n            <Select.Item key={item} value={item.toString()}>\n              {item}\n            </Select.Item>\n          ))}\n        </Select.Content>\n      </Select>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAaA,MAAa,uBAAqD,EAChE,OACA,eACA,MAAM,GACN,MAAM,UACF;CACJ,MAAM,EAAE,qBAAqB,mBAAmB,YAAY,YAAY;CAExE,MAAM,QAAQ;EACZ;EAAG;EAAG;EAAG;EAAI;EAAI;EAAI;EAAK;EAAK;EAAK;EAAM;EAAM;EAAM;EAAO;CAC/D,CAAC,CAAC,QAAQ,SAAS,QAAQ,OAAO,QAAQ,GAAG;CAE7C,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GAAM,WAAU;aAAwB;EAA0B,IAClE,qBAAC,QAAD;GAAQ,OAAO,MAAM,SAAS;GAAkB;aAAhD,CACE,oBAAC,OAAO,SAAR;IAAgB,WAAU;cACxB,oBAAC,OAAO,OAAR,EAAc,aAAa,eAAiB;GAC9B,IAChB,oBAAC,OAAO,SAAR,YACG,MAAM,KAAK,SACV,oBAAC,OAAO,MAAR;IAAwB,OAAO,KAAK,SAAS;cAC1C;GACU,GAFK,IAEL,CACd,EACa,EACV;IACL;;AAET"}

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button } from "../Button/Button.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { Button } from "../Button/Button.mjs";
 import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":[],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\nexport const paginationVariants = cva(\n  'flex items-center justify-center gap-1',\n  {\n    variants: {\n      size: {\n        sm: 'gap-1',\n        md: 'gap-2',\n        lg: 'gap-3',\n      },\n      color: {\n        text: 'background-text',\n        primary: 'background-primary',\n        secondary: 'background-secondary',\n        neutral: 'background-neutral',\n      },\n      variant: {\n        default: '',\n        bordered: 'rounded-lg border border-border p-2',\n        ghost: 'bg-transparent',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nexport type PaginationSize = 'sm' | 'md' | 'lg';\n\nexport type PaginationVariant = 'default' | 'bordered' | 'ghost';\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof paginationVariants> & {\n    currentPage: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    showFirstLast?: boolean;\n    showPrevNext?: boolean;\n    maxVisiblePages?: number;\n    disabled?: boolean;\n  };\n\nconst generatePageNumbers = (\n  currentPage: number,\n  totalPages: number,\n  maxVisiblePages: number\n): (number | 'ellipsis')[] => {\n  if (totalPages <= maxVisiblePages) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: (number | 'ellipsis')[] = [];\n  const halfVisible = Math.floor(maxVisiblePages / 2);\n\n  pages.push(1);\n\n  if (currentPage <= halfVisible + 2) {\n    for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n      pages.push(i);\n    }\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    if (totalPages > 1) {\n      pages.push(totalPages);\n    }\n  } else if (currentPage >= totalPages - halfVisible - 1) {\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    for (\n      let i = Math.max(2, totalPages - maxVisiblePages + 2);\n      i <= totalPages;\n      i++\n    ) {\n      pages.push(i);\n    }\n  } else {\n    pages.push('ellipsis');\n    const start = currentPage - halfVisible;\n    const end = currentPage + halfVisible;\n    for (let i = start; i <= end; i++) {\n      pages.push(i);\n    }\n    pages.push('ellipsis');\n    pages.push(totalPages);\n  }\n\n  return pages;\n};\n\nconst selector = (option: HTMLElement) =>\n  option?.getAttribute('aria-current') === 'true';\n\nconst getButtonSize = (size?: PaginationSize | `${PaginationSize}` | null) => {\n  if (size === 'sm') {\n    return 'icon-sm';\n  } else if (size === 'lg') {\n    return 'icon-lg';\n  } else {\n    return 'icon-md';\n  }\n};\n\nconst InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n    {...props}\n  />\n);\n\nexport const Pagination: FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  showFirstLast = false,\n  showPrevNext = true,\n  maxVisiblePages = 5,\n  disabled = false,\n  size = 'md',\n  variant = 'default',\n  color = 'text',\n  className,\n  ...props\n}) => {\n  const { goToNextPage, goToPreviousPage } = useIntlayer('pagination');\n\n  const pageNumbers = generatePageNumbers(\n    currentPage,\n    totalPages,\n    maxVisiblePages\n  );\n\n  const buttonSize = getButtonSize(size);\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    {\n      selector,\n      isHoverable: true,\n    }\n  );\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      calculatePosition();\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, [currentPage, calculatePosition]);\n\n  if (totalPages <= 1) return null;\n\n  const handlePageChange = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onPageChange(page);\n    }\n  };\n\n  return (\n    <div\n      className={cn(paginationVariants({ size, variant }), className)}\n      {...props}\n    >\n      <div className=\"relative flex items-center gap-1\">\n        {choiceIndicatorPosition && (\n          <InputIndicator style={choiceIndicatorPosition} ref={indicatorRef} />\n        )}\n\n        {showPrevNext && (\n          <Button\n            variant=\"outline\"\n            size={buttonSize}\n            color=\"text\"\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={disabled || isFirstPage}\n            label={goToPreviousPage.value}\n            Icon={ChevronLeft}\n            ref={(el) => {\n              if (el) optionsRefs.current[0] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n\n        <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n          {pageNumbers.map((page, index) => {\n            if (page === 'ellipsis') {\n              const isFirstEllipsis = index === pageNumbers.indexOf('ellipsis');\n              const ellipsisKey = isFirstEllipsis\n                ? 'ellipsis-start'\n                : 'ellipsis-end';\n              return (\n                <div\n                  key={ellipsisKey}\n                  className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n                >\n                  <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                </div>\n              );\n            }\n\n            const isActive = page === currentPage;\n            // Calculate ref index: offset by 1 if showPrevNext, then count only non-ellipsis items\n            const refIndex =\n              (showPrevNext ? 1 : 0) +\n              pageNumbers.slice(0, index).filter((p) => p !== 'ellipsis')\n                .length;\n\n            return (\n              <Button\n                key={page}\n                variant={isActive ? 'default' : 'outline'}\n                size={buttonSize}\n                color=\"text\"\n                onClick={() => handlePageChange(page)}\n                disabled={disabled}\n                label={`Go to page ${page}`}\n                aria-current={isActive ? 'true' : 'false'}\n                ref={(el) => {\n                  if (el) optionsRefs.current[refIndex] = el;\n                }}\n                className={cn(\n                  'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm',\n                  size === 'sm' && 'h-6 w-6 text-xs',\n                  size === 'lg' && 'size-10 text-base',\n                  isActive && 'font-semibold'\n                )}\n              >\n                {page}\n              </Button>\n            );\n          })}\n        </div>\n\n        {showPrevNext && (\n          <Button\n            variant=\"outline\"\n            size={buttonSize}\n            color=\"text\"\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={disabled || isLastPage}\n            label={goToNextPage.value}\n            Icon={ChevronRight}\n            ref={(el) => {\n              const lastRefIndex =\n                (showPrevNext ? 1 : 0) +\n                pageNumbers.filter((p) => p !== 'ellipsis').length;\n              if (el) optionsRefs.current[lastRefIndex] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.mjs","names":[],"sources":["../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { useItemSelector } from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\nexport const paginationVariants = cva(\n  'flex items-center justify-center gap-1',\n  {\n    variants: {\n      size: {\n        sm: 'gap-1',\n        md: 'gap-2',\n        lg: 'gap-3',\n      },\n      color: {\n        text: 'background-text',\n        primary: 'background-primary',\n        secondary: 'background-secondary',\n        neutral: 'background-neutral',\n      },\n      variant: {\n        default: '',\n        bordered: 'rounded-lg border border-border p-2',\n        ghost: 'bg-transparent',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      variant: 'default',\n    },\n  }\n);\n\nexport type PaginationSize = 'sm' | 'md' | 'lg';\n\nexport type PaginationVariant = 'default' | 'bordered' | 'ghost';\n\nexport type PaginationProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof paginationVariants> & {\n    currentPage: number;\n    totalPages: number;\n    onPageChange: (page: number) => void;\n    showFirstLast?: boolean;\n    showPrevNext?: boolean;\n    maxVisiblePages?: number;\n    disabled?: boolean;\n  };\n\nconst generatePageNumbers = (\n  currentPage: number,\n  totalPages: number,\n  maxVisiblePages: number\n): (number | 'ellipsis')[] => {\n  if (totalPages <= maxVisiblePages) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const pages: (number | 'ellipsis')[] = [];\n  const halfVisible = Math.floor(maxVisiblePages / 2);\n\n  pages.push(1);\n\n  if (currentPage <= halfVisible + 2) {\n    for (let i = 2; i <= Math.min(maxVisiblePages - 1, totalPages - 1); i++) {\n      pages.push(i);\n    }\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    if (totalPages > 1) {\n      pages.push(totalPages);\n    }\n  } else if (currentPage >= totalPages - halfVisible - 1) {\n    if (totalPages > maxVisiblePages) {\n      pages.push('ellipsis');\n    }\n    for (\n      let i = Math.max(2, totalPages - maxVisiblePages + 2);\n      i <= totalPages;\n      i++\n    ) {\n      pages.push(i);\n    }\n  } else {\n    pages.push('ellipsis');\n    const start = currentPage - halfVisible;\n    const end = currentPage + halfVisible;\n    for (let i = start; i <= end; i++) {\n      pages.push(i);\n    }\n    pages.push('ellipsis');\n    pages.push(totalPages);\n  }\n\n  return pages;\n};\n\nconst selector = (option: HTMLElement) =>\n  option?.getAttribute('aria-current') === 'true';\n\nconst getButtonSize = (size?: PaginationSize | `${PaginationSize}` | null) => {\n  if (size === 'sm') {\n    return 'icon-sm';\n  } else if (size === 'lg') {\n    return 'icon-lg';\n  } else {\n    return 'icon-md';\n  }\n};\n\nconst InputIndicator: FC<ComponentProps<'div'>> = (props) => (\n  <div\n    className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/10 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n    {...props}\n  />\n);\n\nexport const Pagination: FC<PaginationProps> = ({\n  currentPage,\n  totalPages,\n  onPageChange,\n  showFirstLast = false,\n  showPrevNext = true,\n  maxVisiblePages = 5,\n  disabled = false,\n  size = 'md',\n  variant = 'default',\n  color = 'text',\n  className,\n  ...props\n}) => {\n  const { goToNextPage, goToPreviousPage } = useIntlayer('pagination');\n\n  const pageNumbers = generatePageNumbers(\n    currentPage,\n    totalPages,\n    maxVisiblePages\n  );\n\n  const buttonSize = getButtonSize(size);\n  const isFirstPage = currentPage === 1;\n  const isLastPage = currentPage === totalPages;\n\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    {\n      selector,\n      isHoverable: true,\n    }\n  );\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      calculatePosition();\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, [currentPage, calculatePosition]);\n\n  if (totalPages <= 1) return null;\n\n  const handlePageChange = (page: number) => {\n    if (!disabled && page >= 1 && page <= totalPages && page !== currentPage) {\n      onPageChange(page);\n    }\n  };\n\n  return (\n    <div\n      className={cn(paginationVariants({ size, variant }), className)}\n      {...props}\n    >\n      <div className=\"relative flex items-center gap-1\">\n        {choiceIndicatorPosition && (\n          <InputIndicator style={choiceIndicatorPosition} ref={indicatorRef} />\n        )}\n\n        {showPrevNext && (\n          <Button\n            variant=\"outline\"\n            size={buttonSize}\n            color=\"text\"\n            onClick={() => handlePageChange(currentPage - 1)}\n            disabled={disabled || isFirstPage}\n            label={goToPreviousPage.value}\n            Icon={ChevronLeft}\n            ref={(el) => {\n              if (el) optionsRefs.current[0] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n\n        <div className=\"flex items-center gap-1 max-md:gap-0.5\">\n          {pageNumbers.map((page, index) => {\n            if (page === 'ellipsis') {\n              const isFirstEllipsis = index === pageNumbers.indexOf('ellipsis');\n              const ellipsisKey = isFirstEllipsis\n                ? 'ellipsis-start'\n                : 'ellipsis-end';\n              return (\n                <div\n                  key={ellipsisKey}\n                  className=\"flex h-8 min-w-8 items-center justify-center px-1\"\n                >\n                  <MoreHorizontal className=\"h-4 w-4 text-muted-foreground\" />\n                </div>\n              );\n            }\n\n            const isActive = page === currentPage;\n            // Calculate ref index: offset by 1 if showPrevNext, then count only non-ellipsis items\n            const refIndex =\n              (showPrevNext ? 1 : 0) +\n              pageNumbers.slice(0, index).filter((p) => p !== 'ellipsis')\n                .length;\n\n            return (\n              <Button\n                key={page}\n                variant={isActive ? 'default' : 'outline'}\n                size={buttonSize}\n                color=\"text\"\n                onClick={() => handlePageChange(page)}\n                disabled={disabled}\n                label={`Go to page ${page}`}\n                aria-current={isActive ? 'true' : 'false'}\n                ref={(el) => {\n                  if (el) optionsRefs.current[refIndex] = el;\n                }}\n                className={cn(\n                  'flex aspect-square h-8 w-8 min-w-0 items-center justify-center p-0 text-sm',\n                  size === 'sm' && 'h-6 w-6 text-xs',\n                  size === 'lg' && 'size-10 text-base',\n                  isActive && 'font-semibold'\n                )}\n              >\n                {page}\n              </Button>\n            );\n          })}\n        </div>\n\n        {showPrevNext && (\n          <Button\n            variant=\"outline\"\n            size={buttonSize}\n            color=\"text\"\n            onClick={() => handlePageChange(currentPage + 1)}\n            disabled={disabled || isLastPage}\n            label={goToNextPage.value}\n            Icon={ChevronRight}\n            ref={(el) => {\n              const lastRefIndex =\n                (showPrevNext ? 1 : 0) +\n                pageNumbers.filter((p) => p !== 'ellipsis').length;\n              if (el) optionsRefs.current[lastRefIndex] = el;\n            }}\n            className=\"min-w-0 px-2\"\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Pagination/ShowingResultsNumberItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShowingResultsNumberItems.mjs","names":[],"sources":["../../../../src/components/Pagination/ShowingResultsNumberItems.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useNumber } from 'react-intlayer/format';\n\nexport type ShowingResultsNumberItemsProps = {\n  currentPage: number;\n  pageSize: number;\n  totalItems: number;\n};\n\nexport const ShowingResultsNumberItems: FC<ShowingResultsNumberItemsProps> = ({\n  currentPage,\n  pageSize,\n  totalItems,\n}) => {\n  const { showingResults } = useIntlayer('pagination');\n  const number = useNumber();\n\n  // Guard against weird inputs\n  const safePageSize = Math.max(1, pageSize);\n  const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n  const page = Math.min(Math.max(1, currentPage), totalPages);\n\n  const start =\n    totalItems === 0 ? 0 : Math.min((page - 1) * safePageSize + 1, totalItems);\n  const end = totalItems === 0 ? 0 : Math.min(page * safePageSize, totalItems);\n\n  return (\n    <div className=\"text-neutral text-sm\">\n      {showingResults({\n        start: number(start),\n        end: number(end),\n        total: number(totalItems),\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAYA,MAAa,6BAAiE,EAC5E,aACA,UACA,iBACI;CACJ,MAAM,EAAE,mBAAmB,YAAY,aAAa;CACpD,MAAM,SAAS,WAAW;CAG1B,MAAM,eAAe,KAAK,IAAI,GAAG,SAAS;CAC1C,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,aAAa,CAAC;CACpE,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,YAAY,EAAE,WAAW;CAE3D,MAAM,QACJ,eAAe,IAAI,IAAI,KAAK,KAAK,OAAO,KAAK,eAAe,GAAG,WAAW;CAC5E,MAAM,MAAM,eAAe,IAAI,IAAI,KAAK,IAAI,OAAO,cAAc,WAAW;AAE5E,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ,eAAe;GACd,OAAO,OAAO,MAAM;GACpB,KAAK,OAAO,IAAI;GAChB,OAAO,OAAO,WAAW;GAC1B,CAAC;EACE"}
+{"version":3,"file":"ShowingResultsNumberItems.mjs","names":[],"sources":["../../../../src/components/Pagination/ShowingResultsNumberItems.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useNumber } from 'react-intlayer/format';\n\nexport type ShowingResultsNumberItemsProps = {\n  currentPage: number;\n  pageSize: number;\n  totalItems: number;\n};\n\nexport const ShowingResultsNumberItems: FC<ShowingResultsNumberItemsProps> = ({\n  currentPage,\n  pageSize,\n  totalItems,\n}) => {\n  const { showingResults } = useIntlayer('pagination');\n  const number = useNumber();\n\n  // Guard against weird inputs\n  const safePageSize = Math.max(1, pageSize);\n  const totalPages = Math.max(1, Math.ceil(totalItems / safePageSize));\n  const page = Math.min(Math.max(1, currentPage), totalPages);\n\n  const start =\n    totalItems === 0 ? 0 : Math.min((page - 1) * safePageSize + 1, totalItems);\n  const end = totalItems === 0 ? 0 : Math.min(page * safePageSize, totalItems);\n\n  return (\n    <div className=\"text-neutral text-sm\">\n      {showingResults({\n        start: number(start),\n        end: number(end),\n        total: number(totalItems),\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAYA,MAAa,6BAAiE,EAC5E,aACA,UACA,iBACI;CACJ,MAAM,EAAE,mBAAmB,YAAY,YAAY;CACnD,MAAM,SAAS,UAAU;CAGzB,MAAM,eAAe,KAAK,IAAI,GAAG,QAAQ;CACzC,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,KAAK,aAAa,YAAY,CAAC;CACnE,MAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,WAAW,GAAG,UAAU;CAE1D,MAAM,QACJ,eAAe,IAAI,IAAI,KAAK,KAAK,OAAO,KAAK,eAAe,GAAG,UAAU;CAC3E,MAAM,MAAM,eAAe,IAAI,IAAI,KAAK,IAAI,OAAO,cAAc,UAAU;CAE3E,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,eAAe;GACd,OAAO,OAAO,KAAK;GACnB,KAAK,OAAO,GAAG;GACf,OAAO,OAAO,UAAU;EAC1B,CAAC;CACE;AAET"}

package/dist/esm/components/Pagination/pagination.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.content.mjs","names":[],"sources":["../../../../src/components/Pagination/pagination.content.ts"],"sourcesContent":["import { type Dictionary, insert, t } from 'intlayer';\n\nconst paginationContent = {\n  key: 'pagination',\n  content: {\n    numberItemsSelector: t({\n      en: 'Items per page',\n      fr: 'Eléments par page',\n      es: 'Items por página',\n      'en-GB': 'Items per page',\n      de: 'Items pro Seite',\n      ja: 'ページあたりのアイテム数',\n      ko: '페이지당 아이템 수',\n      zh: '每页项目数',\n      it: 'Elementi per pagina',\n      pt: 'Itens por página',\n      hi: 'पृष्ठ पर आइटम्स',\n      ar: 'عدد العناصر لكل صفحة',\n      ru: 'Элементов на странице',\n      tr: 'Sayfa başına öğe',\n      pl: 'Elementów na stronę',\n      id: 'Item per halaman',\n      vi: 'Số mục trên mỗi trang',\n      uk: 'Записів на сторінку',\n    }),\n    showingResults: insert(\n      t({\n        ar: 'عرض {{start}} إلى {{end}} من {{total}} نتائج',\n        de: 'Zeigt {{start}} bis {{end}} von {{total}} Ergebnissen',\n        en: 'Showing {{start}} to {{end}} of {{total}} results',\n        'en-GB': 'Showing {{start}} to {{end}} of {{total}} results',\n        es: 'Mostrando {{start}} a {{end}} de {{total}} resultados',\n        fr: 'Afficher {{start}} à {{end}} de {{total}} résultats',\n        hi: '{{start}} से {{end}} तक के {{total}} परिणाम दिखा रहे हैं',\n        id: 'Menampilkan {{start}} hingga {{end}} dari {{total}} hasil',\n        it: 'Mostrando {{start}} a {{end}} di {{total}} risultati',\n        ja: '{{start}} から {{end}} までの {{total}} 件の結果を表示',\n        ko: '{{start}} 에서 {{end}} 까지의 {{total}} 개 결과 표시',\n        pl: 'Wyświetlane {{start}} do {{end}} z {{total}} wyników',\n        pt: 'Mostrando {{start}} a {{end}} de {{total}} resultados',\n        ru: 'Показано {{start}}-{{end}} из {{total}} результатов',\n        tr: '{{start}} から {{end}} までの {{total}} 件の結果を表示',\n        uk: 'Показано від {{start}} до {{end}} з {{total}} результатів',\n        vi: 'Hiển thị {{start}} đến {{end}} trong tổng số {{total}} kết quả',\n        zh: '显示第 {{start}} 到 {{end}} 项，共 {{total}} 个结果',\n      })\n    ),\n    selectPageSize: t({\n      en: 'Select page size',\n      fr: 'Sélectionner la taille de la page',\n      es: 'Seleccionar tamaño de página',\n      'en-GB': 'Select page size',\n      de: 'Seitegröße auswählen',\n      ja: 'ページサイズを選択',\n      ko: '페이지 크기 선택',\n      zh: '选择页面大小',\n      it: 'Seleziona una dimensione di pagina',\n      pt: 'Selecionar um tamanho de página',\n      hi: 'पृष्ठ आकार चुनें',\n      ar: 'اختر حجم الصفحة',\n      ru: 'Выберите размер страницы',\n      tr: 'Sayfa boyutunu seç',\n      pl: 'Wybierz liczbę elementów na stronę',\n      id: 'Pilih jumlah item per halaman',\n      vi: 'Chọn số mục trên mỗi trang',\n      uk: 'Оберіть кількість елементів на сторінку',\n    }),\n    goToNextPage: t({\n      en: 'Go to next page',\n      fr: 'Aller à la page suivante',\n      es: 'Ir a la página siguiente',\n      'en-GB': 'Go to next page',\n      de: 'Zur nächsten Seite',\n      ja: '次のページに移動',\n      ko: '다음 페이지로 이동',\n      zh: '转到下一页',\n      it: 'Vai alla pagina successiva',\n      pt: 'Ir para a página seguinte',\n      hi: 'अगली पृष्ठ पर जाएं',\n      ar: 'اذهب إلى الصفحة التالية',\n      ru: 'Перейти к следующей странице',\n      tr: 'Sonraki sayfaya git',\n      pl: 'Przejdź do następnej strony',\n      id: 'Pergi ke halaman berikutnya',\n      vi: 'Chuyển sang trang tiếp theo',\n      uk: 'Перейти на наступну сторінку',\n    }),\n    goToPreviousPage: t({\n      en: 'Go to previous page',\n      fr: 'Aller à la page précédente',\n      es: 'Ir a la página anterior',\n      'en-GB': 'Go to previous page',\n      de: 'Zur vorherigen Seite',\n      ja: '前のページに移動',\n      ko: '이전 페이지로 이동',\n      zh: '转到上一页',\n      it: 'Vai alla pagina precedente',\n      pt: 'Ir para a página anterior',\n      hi: 'पिछली पृष्ठ पर जाएं',\n      ar: 'اذهب إلى الصفحة السابقة',\n      ru: 'Перейти к предыдущей странице',\n      tr: 'Önceki sayfaya git',\n      pl: 'Przejdź do poprzedniej strony',\n      id: 'Pergi ke halaman sebelumnya',\n      vi: 'Chuyển sang trang trước',\n      uk: 'Перейти на попередню сторінку',\n    }),\n  },\n  title: 'Pagination',\n  description:\n    'Content strings used for the pagination component, including labels for navigating pages and selecting items per page.',\n  tags: ['pagination', 'component'],\n} satisfies Dictionary;\n\nexport default paginationContent;\n"],"mappings":";;;AAEA,MAAM,oBAAoB;CACxB,KAAK;CACL,SAAS;EACP,qBAAqB,EAAE;GACrB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,gBAAgB,OACd,EAAE;GACA,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC,CACH;EACD,gBAAgB,EAAE;GAChB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,cAAc,EAAE;GACd,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,kBAAkB,EAAE;GAClB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM,CAAC,cAAc,YAAY;CAClC"}
+{"version":3,"file":"pagination.content.mjs","names":[],"sources":["../../../../src/components/Pagination/pagination.content.ts"],"sourcesContent":["import { type Dictionary, insert, t } from 'intlayer';\n\nconst paginationContent = {\n  key: 'pagination',\n  content: {\n    numberItemsSelector: t({\n      en: 'Items per page',\n      fr: 'Eléments par page',\n      es: 'Items por página',\n      'en-GB': 'Items per page',\n      de: 'Items pro Seite',\n      ja: 'ページあたりのアイテム数',\n      ko: '페이지당 아이템 수',\n      zh: '每页项目数',\n      it: 'Elementi per pagina',\n      pt: 'Itens por página',\n      hi: 'पृष्ठ पर आइटम्स',\n      ar: 'عدد العناصر لكل صفحة',\n      ru: 'Элементов на странице',\n      tr: 'Sayfa başına öğe',\n      pl: 'Elementów na stronę',\n      id: 'Item per halaman',\n      vi: 'Số mục trên mỗi trang',\n      uk: 'Записів на сторінку',\n    }),\n    showingResults: insert(\n      t({\n        ar: 'عرض {{start}} إلى {{end}} من {{total}} نتائج',\n        de: 'Zeigt {{start}} bis {{end}} von {{total}} Ergebnissen',\n        en: 'Showing {{start}} to {{end}} of {{total}} results',\n        'en-GB': 'Showing {{start}} to {{end}} of {{total}} results',\n        es: 'Mostrando {{start}} a {{end}} de {{total}} resultados',\n        fr: 'Afficher {{start}} à {{end}} de {{total}} résultats',\n        hi: '{{start}} से {{end}} तक के {{total}} परिणाम दिखा रहे हैं',\n        id: 'Menampilkan {{start}} hingga {{end}} dari {{total}} hasil',\n        it: 'Mostrando {{start}} a {{end}} di {{total}} risultati',\n        ja: '{{start}} から {{end}} までの {{total}} 件の結果を表示',\n        ko: '{{start}} 에서 {{end}} 까지의 {{total}} 개 결과 표시',\n        pl: 'Wyświetlane {{start}} do {{end}} z {{total}} wyników',\n        pt: 'Mostrando {{start}} a {{end}} de {{total}} resultados',\n        ru: 'Показано {{start}}-{{end}} из {{total}} результатов',\n        tr: '{{start}} から {{end}} までの {{total}} 件の結果を表示',\n        uk: 'Показано від {{start}} до {{end}} з {{total}} результатів',\n        vi: 'Hiển thị {{start}} đến {{end}} trong tổng số {{total}} kết quả',\n        zh: '显示第 {{start}} 到 {{end}} 项，共 {{total}} 个结果',\n      })\n    ),\n    selectPageSize: t({\n      en: 'Select page size',\n      fr: 'Sélectionner la taille de la page',\n      es: 'Seleccionar tamaño de página',\n      'en-GB': 'Select page size',\n      de: 'Seitegröße auswählen',\n      ja: 'ページサイズを選択',\n      ko: '페이지 크기 선택',\n      zh: '选择页面大小',\n      it: 'Seleziona una dimensione di pagina',\n      pt: 'Selecionar um tamanho de página',\n      hi: 'पृष्ठ आकार चुनें',\n      ar: 'اختر حجم الصفحة',\n      ru: 'Выберите размер страницы',\n      tr: 'Sayfa boyutunu seç',\n      pl: 'Wybierz liczbę elementów na stronę',\n      id: 'Pilih jumlah item per halaman',\n      vi: 'Chọn số mục trên mỗi trang',\n      uk: 'Оберіть кількість елементів на сторінку',\n    }),\n    goToNextPage: t({\n      en: 'Go to next page',\n      fr: 'Aller à la page suivante',\n      es: 'Ir a la página siguiente',\n      'en-GB': 'Go to next page',\n      de: 'Zur nächsten Seite',\n      ja: '次のページに移動',\n      ko: '다음 페이지로 이동',\n      zh: '转到下一页',\n      it: 'Vai alla pagina successiva',\n      pt: 'Ir para a página seguinte',\n      hi: 'अगली पृष्ठ पर जाएं',\n      ar: 'اذهب إلى الصفحة التالية',\n      ru: 'Перейти к следующей странице',\n      tr: 'Sonraki sayfaya git',\n      pl: 'Przejdź do następnej strony',\n      id: 'Pergi ke halaman berikutnya',\n      vi: 'Chuyển sang trang tiếp theo',\n      uk: 'Перейти на наступну сторінку',\n    }),\n    goToPreviousPage: t({\n      en: 'Go to previous page',\n      fr: 'Aller à la page précédente',\n      es: 'Ir a la página anterior',\n      'en-GB': 'Go to previous page',\n      de: 'Zur vorherigen Seite',\n      ja: '前のページに移動',\n      ko: '이전 페이지로 이동',\n      zh: '转到上一页',\n      it: 'Vai alla pagina precedente',\n      pt: 'Ir para a página anterior',\n      hi: 'पिछली पृष्ठ पर जाएं',\n      ar: 'اذهب إلى الصفحة السابقة',\n      ru: 'Перейти к предыдущей странице',\n      tr: 'Önceki sayfaya git',\n      pl: 'Przejdź do poprzedniej strony',\n      id: 'Pergi ke halaman sebelumnya',\n      vi: 'Chuyển sang trang trước',\n      uk: 'Перейти на попередню сторінку',\n    }),\n  },\n  title: 'Pagination',\n  description:\n    'Content strings used for the pagination component, including labels for navigating pages and selecting items per page.',\n  tags: ['pagination', 'component'],\n} satisfies Dictionary;\n\nexport default paginationContent;\n"],"mappings":";;;AAEA,MAAM,oBAAoB;CACxB,KAAK;CACL,SAAS;EACP,qBAAqB,EAAE;GACrB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;EACD,gBAAgB,OACd,EAAE;GACA,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC,CACH;EACA,gBAAgB,EAAE;GAChB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;EACD,cAAc,EAAE;GACd,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;EACD,kBAAkB,EAAE;GAClB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,CAAC;CACH;CACA,OAAO;CACP,aACE;CACF,MAAM,CAAC,cAAc,WAAW;AAClC"}

package/dist/esm/components/Pattern/DotPattern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DotPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/**\n * Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype DotPatternProps = {\n  /** Width of the pattern tile in pixels */\n  width?: number;\n  /** Height of the pattern tile in pixels */\n  height?: number;\n  /** Horizontal offset of the pattern */\n  x?: number;\n  /** Vertical offset of the pattern */\n  y?: number;\n  /** X coordinate of the dot center within the pattern tile */\n  cx?: number;\n  /** Y coordinate of the dot center within the pattern tile */\n  cy?: number;\n  /** Radius of each dot in the pattern */\n  cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Dot Pattern Component\n *\n * A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n *\n * Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n *\n * Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n *\n * Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n *\n * @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n *   <DotPattern />\n *   <div className=\"relative z-10\">\n *     <h1>Content over dot pattern</h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n *   width={24}\n *   height={24}\n *   cr={1.5}\n *   className=\"fill-primary/20\"\n * />\n * ```\n *\n * @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n *   x={8}\n *   y={8}\n *   cx={2}\n *   cy={2}\n *   className=\"fill-accent/25\"\n * />\n * ```\n *\n * @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n *   width={32}\n *   height={32}\n *   cr={2}\n *   cx={16}\n *   cy={16}\n *   className=\"fill-neutral/10\"\n * />\n * ```\n *\n * Styling Notes:\n * - Use `fill-*` classes to customize dot color and opacity\n * - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n *\n * Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n *\n * @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'pointer-events-none absolute inset-0 size-full fill-neutral/30',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id=\"pattern-circle\"\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        patternContentUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <circle cx={cx} cy={cy} r={cr} />\n      </pattern>\n    </defs>\n    <rect\n      width=\"100%\"\n      height=\"100%\"\n      strokeWidth={0}\n      fill=\"url(#pattern-circle)\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,cAAmC,EAC9C,QAAQ,IACR,SAAS,IACT,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,kEACA,UACD;CACD,GAAI;WANN,CAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;EACE,IAAG;EACI;EACC;EACR,cAAa;EACb,qBAAoB;EACjB;EACA;YAEH,oBAAC,UAAD;GAAY;GAAQ;GAAI,GAAG;GAAM;EACzB,GACL,GACP,oBAAC,QAAD;EACE,OAAM;EACN,QAAO;EACP,aAAa;EACb,MAAK;EACL,EACE"}
+{"version":3,"file":"DotPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/DotPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/**\n * Props for the DotPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype DotPatternProps = {\n  /** Width of the pattern tile in pixels */\n  width?: number;\n  /** Height of the pattern tile in pixels */\n  height?: number;\n  /** Horizontal offset of the pattern */\n  x?: number;\n  /** Vertical offset of the pattern */\n  y?: number;\n  /** X coordinate of the dot center within the pattern tile */\n  cx?: number;\n  /** Y coordinate of the dot center within the pattern tile */\n  cy?: number;\n  /** Radius of each dot in the pattern */\n  cr?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Dot Pattern Component\n *\n * A decorative SVG component that generates a repeating dot pattern background.\n * Perfect for adding subtle texture and visual interest to sections, cards, or hero areas\n * without interfering with content readability.\n *\n * Features:\n * - Scalable vector-based pattern that looks crisp at any size\n * - Customizable dot spacing, size, and positioning\n * - Semi-transparent fill for subtle visual effect\n * - Accessibility-friendly with aria-hidden attribute\n * - Pointer events disabled to avoid interaction interference\n * - Unique pattern ID generation to prevent conflicts\n * - Full coverage with absolute positioning\n *\n * Technical Implementation:\n * - Uses SVG `<pattern>` element for efficient rendering\n * - Pattern repeats using userSpaceOnUse coordinate system\n * - Generates unique IDs using React's useId hook\n * - Fills entire container with 100% width and height\n * - Pattern tile coordinates defined in userSpaceOnUse units\n *\n * Visual Characteristics:\n * - Default: 16x16px tile with 1px radius dots\n * - Semi-transparent neutral fill (30% opacity)\n * - Dots positioned at (1,1) within each tile by default\n * - Absolute positioning covers entire parent container\n *\n * @example\n * Basic usage as background pattern:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n *   <DotPattern />\n *   <div className=\"relative z-10\">\n *     <h1>Content over dot pattern</h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom dot spacing and size:\n * ```tsx\n * <DotPattern\n *   width={24}\n *   height={24}\n *   cr={1.5}\n *   className=\"fill-primary/20\"\n * />\n * ```\n *\n * @example\n * Offset pattern positioning:\n * ```tsx\n * <DotPattern\n *   x={8}\n *   y={8}\n *   cx={2}\n *   cy={2}\n *   className=\"fill-accent/25\"\n * />\n * ```\n *\n * @example\n * Large sparse dots:\n * ```tsx\n * <DotPattern\n *   width={32}\n *   height={32}\n *   cr={2}\n *   cx={16}\n *   cy={16}\n *   className=\"fill-neutral/10\"\n * />\n * ```\n *\n * Styling Notes:\n * - Use `fill-*` classes to customize dot color and opacity\n * - Pattern automatically fills parent container\n * - Consider contrast with overlaid content\n * - Semi-transparent fills work best for backgrounds\n *\n * Accessibility:\n * - Marked as `aria-hidden=\"true\"` since it's decorative\n * - Pointer events disabled to maintain interactivity of overlaid content\n * - Does not interfere with screen readers or keyboard navigation\n *\n * @param props - DotPattern component props\n * @returns SVG element with repeating dot pattern\n */\nexport const DotPattern: FC<DotPatternProps> = ({\n  width = 16,\n  height = 16,\n  x = 0,\n  y = 0,\n  cx = 1,\n  cy = 1,\n  cr = 1,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'pointer-events-none absolute inset-0 size-full fill-neutral/30',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id=\"pattern-circle\"\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        patternContentUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <circle cx={cx} cy={cy} r={cr} />\n      </pattern>\n    </defs>\n    <rect\n      width=\"100%\"\n      height=\"100%\"\n      strokeWidth={0}\n      fill=\"url(#pattern-circle)\"\n    />\n  </svg>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,cAAmC,EAC9C,QAAQ,IACR,SAAS,IACT,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,kEACA,SACF;CACA,GAAI;WANN,CAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;EACE,IAAG;EACI;EACC;EACR,cAAa;EACb,qBAAoB;EACjB;EACA;YAEH,oBAAC,UAAD;GAAY;GAAQ;GAAI,GAAG;EAAK;CACzB,GACL,IACN,oBAAC,QAAD;EACE,OAAM;EACN,QAAO;EACP,aAAa;EACb,MAAK;CACN,EACE"}

package/dist/esm/components/Pattern/GridDistortionPattern.mjs

@@ -232,7 +232,8 @@ const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength
 			updateGridPoints(grid, mouseX, mouseY, mouseActive, currentRadius, currentStrength);
 			const rows = grid.length;
 			const columns = grid[0].length;
-			ensurePathCount(rows * (columns - 1) + columns * (rows - 1));
+			const totalSegments = rows * (columns - 1) + columns * (rows - 1);
+			ensurePathCount(totalSegments);
 			let pathIndex = 0;
 			for (let rowIndex = 0; rowIndex < rows; rowIndex++) for (let columnIndex = 0; columnIndex < columns - 1; columnIndex++) {
 				const p0 = grid[rowIndex][columnIndex];

package/dist/esm/components/Pattern/GridDistortionPattern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridDistortionPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridDistortionPattern.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type SVGProps, useEffect, useRef } from 'react';\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode';\n\n// ---------------------------------------------------------------------------\n// Theme configuration — tweak these to adjust the grid appearance globally\n// ---------------------------------------------------------------------------\n\ntype GridTheme = {\n  /** Resting line color, used far from the pointer. */\n  lineColor: string;\n  /**\n   * Color the lines fade toward as the pointer approaches. To avoid lines\n   * appearing to \"dim into the background\" near the pointer, this should be\n   * brighter (higher luminance) than {@link GridTheme.lineColor} in dark mode\n   * and clearly contrasting in light mode.\n   */\n  highlightColor: string;\n  /** Stroke opacity far from the pointer — keeps the whole grid visible. */\n  baseOpacity: number;\n  /** Extra opacity added at the pointer's center on top of {@link GridTheme.baseOpacity}. */\n  highlightOpacityBoost: number;\n};\n\n/**\n * Light mode: a visible (but subtle) gray line on white. The base opacity is\n * raised and the highlight boost lowered so the grid no longer fades to nothing\n * far from the pointer while spiking to a harsh accent underneath it.\n */\nconst LIGHT_THEME: GridTheme = {\n  lineColor: '#a8a8a8',\n  highlightColor: '#969696',\n  baseOpacity: 0.3,\n  highlightOpacityBoost: 0.3,\n};\n\n/**\n * Dark mode: a mid-gray line that brightens toward a light purple near the\n * pointer (brighter than the resting line, so the hovered segment lights up\n * instead of darkening into the black background).\n */\nconst DARK_THEME: GridTheme = {\n  lineColor: '#4d4d4d',\n  highlightColor: '#5c5c5c',\n  baseOpacity: 0.2,\n  highlightOpacityBoost: 0.2,\n};\n\n/**\n * Falloff exponent for the highlight. A gentler curve (2 = quadratic) spreads\n * the highlight over a wider area than a cubic one, smoothing the transition\n * between the resting line and the accent under the pointer.\n */\nconst HIGHLIGHT_FALLOFF_EXPONENT = 2;\n\n// ---------------------------------------------------------------------------\n// Pure helpers — defined once at module level, never recreated\n// ---------------------------------------------------------------------------\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const numericValue = parseInt(hex.replace('#', ''), 16);\n  return [\n    (numericValue >> 16) & 255,\n    (numericValue >> 8) & 255,\n    numericValue & 255,\n  ];\n};\n\n/** Neutral gray used when a color string can't be parsed into RGB. */\nconst FALLBACK_RGB: [number, number, number] = [136, 136, 136];\n\n/**\n * Resolves any CSS color string — `#rrggbb`, `rgb()/hsl()`, a named color, or a\n * `var(--token)` reference — into an `[r, g, b]` triple.\n *\n * 6-digit hex is parsed directly. Everything else is resolved by the browser\n * via a throwaway probe element mounted inside `contextElement`, so custom\n * properties resolve against the correct cascade. Falls back to a neutral gray\n * when the value can't be parsed, so the grid never emits invalid\n * `rgb(NaN, …)` strokes (which browsers render as solid black).\n */\nconst resolveColorToRgb = (\n  color: string,\n  contextElement: Element\n): [number, number, number] => {\n  const trimmed = color.trim();\n\n  // Fast path: 6-digit hex needs no DOM access.\n  if (/^#[0-9a-f]{6}$/i.test(trimmed)) {\n    return hexToRgb(trimmed);\n  }\n\n  const probe = document.createElement('span');\n  probe.style.color = trimmed;\n  probe.style.display = 'none';\n  contextElement.appendChild(probe);\n  const computedColor = getComputedStyle(probe).color;\n  probe.remove();\n\n  const channels = computedColor.match(/-?\\d+(?:\\.\\d+)?/g);\n  if (channels && channels.length >= 3) {\n    return [Number(channels[0]), Number(channels[1]), Number(channels[2])];\n  }\n\n  return FALLBACK_RGB;\n};\n\ntype Point = { baseX: number; baseY: number; x: number; y: number };\n\nconst buildSegmentAttrs = (\n  startX: number,\n  startY: number,\n  endX: number,\n  endY: number,\n  mouseX: number,\n  mouseY: number,\n  mouseActive: boolean,\n  radius: number,\n  strength: number,\n  lineRgb: [number, number, number],\n  highlightRgb: [number, number, number],\n  baseOpacity: number,\n  highlightOpacityBoost: number\n): {\n  d: string;\n  stroke: string;\n  strokeOpacity: number;\n  strokeWidth: number;\n} => {\n  let red: number;\n  let green: number;\n  let blue: number;\n  let opacity: number;\n  let strokeWidth: number;\n\n  if (!mouseActive) {\n    [red, green, blue] = lineRgb;\n    opacity = baseOpacity;\n    strokeWidth = 0.8;\n  } else {\n    const midX = (startX + endX) / 2;\n    const midY = (startY + endY) / 2;\n    const deltaX = mouseX - midX;\n    const deltaY = mouseY - midY;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const distanceRatio = Math.max(0, 1 - distance / radius);\n    const easing = distanceRatio ** HIGHLIGHT_FALLOFF_EXPONENT;\n    red = Math.round(lineRgb[0] + (highlightRgb[0] - lineRgb[0]) * easing);\n    green = Math.round(lineRgb[1] + (highlightRgb[1] - lineRgb[1]) * easing);\n    blue = Math.round(lineRgb[2] + (highlightRgb[2] - lineRgb[2]) * easing);\n    opacity = baseOpacity + easing * highlightOpacityBoost;\n    strokeWidth = 0.8 + easing * 1.2;\n    void strength; // currently unused in segment coloring, kept for API compatibility\n  }\n\n  return {\n    d: `M ${startX} ${startY} L ${endX} ${endY}`,\n    stroke: `rgb(${red},${green},${blue})`,\n    strokeOpacity: opacity,\n    strokeWidth,\n  };\n};\n\nconst updateGridPoints = (\n  grid: Point[][],\n  mouseX: number,\n  mouseY: number,\n  mouseActive: boolean,\n  radius: number,\n  strength: number\n): void => {\n  const rows = grid.length;\n  const columns = grid[0]!.length;\n\n  for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n    for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n      const point = grid[rowIndex]![columnIndex]!;\n      if (!mouseActive) {\n        point.x += (point.baseX - point.x) * 0.08;\n        point.y += (point.baseY - point.y) * 0.08;\n        continue;\n      }\n      const deltaX = mouseX - point.baseX;\n      const deltaY = mouseY - point.baseY;\n      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n\n      if (distance < radius && distance > 0) {\n        const force = (Math.cos((distance / radius) * Math.PI) + 1) / 2;\n        const displacement = force * strength * radius * 0.3;\n        point.x +=\n          (point.baseX + (deltaX / distance) * displacement - point.x) * 0.12;\n        point.y +=\n          (point.baseY + (deltaY / distance) * displacement - point.y) * 0.12;\n      } else {\n        point.x += (point.baseX - point.x) * 0.08;\n        point.y += (point.baseY - point.y) * 0.08;\n      }\n    }\n  }\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\ntype GridDistortionPatternProps = {\n  width?: number;\n  height?: number;\n  radius?: number;\n  strength?: number;\n  lineColor?: string;\n  highlightColor?: string;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridDistortionPattern: FC<GridDistortionPatternProps> = ({\n  width = 70,\n  height = 70,\n  radius = 280,\n  strength = 0.12,\n  lineColor,\n  highlightColor,\n  className,\n  ...props\n}) => {\n  const isDarkMode = useIsDarkMode();\n  const theme = isDarkMode ? DARK_THEME : LIGHT_THEME;\n\n  // Explicit props win; otherwise fall back to the active theme's defaults.\n  const resolvedLineColor = lineColor ?? theme.lineColor;\n  const resolvedHighlightColor = highlightColor ?? theme.highlightColor;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n  const mouse = useRef({ x: -9999, y: -9999, active: false });\n  const points = useRef<Point[][]>([]);\n\n  // Stable refs so the animation loop always sees the latest prop values\n  // without needing to restart itself.\n  const radiusRef = useRef(radius);\n  const strengthRef = useRef(strength);\n  // Initialized to safe placeholders; the real (possibly CSS-variable-based)\n  // colors are resolved against the DOM in the effect below.\n  const lineRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n  const highlightRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n  const baseOpacityRef = useRef(theme.baseOpacity);\n  const highlightOpacityBoostRef = useRef(theme.highlightOpacityBoost);\n\n  // Keep numeric refs in sync with props on each render (cheap assignments).\n  radiusRef.current = radius;\n  strengthRef.current = strength;\n  baseOpacityRef.current = theme.baseOpacity;\n  highlightOpacityBoostRef.current = theme.highlightOpacityBoost;\n\n  // Resolve colors once mounted — getComputedStyle is required so that\n  // `var(--token)` highlight/line colors resolve against the live cascade.\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n    lineRgbRef.current = resolveColorToRgb(resolvedLineColor, svg);\n    highlightRgbRef.current = resolveColorToRgb(resolvedHighlightColor, svg);\n  }, [resolvedLineColor, resolvedHighlightColor]);\n\n  // ---------------------------------------------------------------------------\n  // Resize — rebuild the point grid and resize the SVG viewBox\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    const resize = () => {\n      const rect = svg.getBoundingClientRect();\n      svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);\n\n      const columns = Math.ceil(rect.width / width) + 2;\n      const rows = Math.ceil(rect.height / height) + 2;\n      const newGrid: Point[][] = [];\n\n      for (let rowIndex = -1; rowIndex <= rows; rowIndex++) {\n        const row: Point[] = [];\n        for (let columnIndex = -1; columnIndex <= columns; columnIndex++) {\n          row.push({\n            baseX: columnIndex * width,\n            baseY: rowIndex * height,\n            x: columnIndex * width,\n            y: rowIndex * height,\n          });\n        }\n        newGrid.push(row);\n      }\n      points.current = newGrid;\n    };\n\n    resize();\n    const resizeObserver = new ResizeObserver(resize);\n    resizeObserver.observe(svg);\n    return () => resizeObserver.disconnect();\n  }, [width, height]);\n\n  // ---------------------------------------------------------------------------\n  // Pointer tracking — passive listeners, no React state involved\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    const handlePointerMove = (event: PointerEvent) => {\n      const rect = svg.getBoundingClientRect();\n      mouse.current = {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n        active: true,\n      };\n    };\n    const handlePointerLeave = () => {\n      mouse.current.active = false;\n    };\n\n    window.addEventListener('pointermove', handlePointerMove, {\n      passive: true,\n    });\n    window.addEventListener('pointerleave', handlePointerLeave, {\n      passive: true,\n    });\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerleave', handlePointerLeave);\n    };\n  }, []);\n\n  // ---------------------------------------------------------------------------\n  // Animation loop — writes directly to SVG DOM, no React state/re-renders\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    // We maintain a pool of <path> elements and reuse them each frame\n    // to avoid GC pressure from creating/deleting DOM nodes every tick.\n    const pathPool: SVGPathElement[] = [];\n    let frame = 0;\n\n    const ensurePathCount = (count: number) => {\n      while (pathPool.length < count) {\n        const el = document.createElementNS(\n          'http://www.w3.org/2000/svg',\n          'path'\n        );\n        el.setAttribute('fill', 'none');\n        svg.appendChild(el);\n        pathPool.push(el);\n      }\n      // Hide surplus paths\n      for (let i = count; i < pathPool.length; i++) {\n        pathPool[i]!.setAttribute('d', '');\n      }\n    };\n\n    const tick = () => {\n      const grid = points.current;\n      if (!grid.length) {\n        frame = requestAnimationFrame(tick);\n        return;\n      }\n\n      const { x: mouseX, y: mouseY, active: mouseActive } = mouse.current;\n      const currentRadius = radiusRef.current;\n      const currentStrength = strengthRef.current;\n      const lineRgb = lineRgbRef.current;\n      const highlightRgb = highlightRgbRef.current;\n      const baseOpacity = baseOpacityRef.current;\n      const highlightOpacityBoost = highlightOpacityBoostRef.current;\n\n      // Update point positions\n      updateGridPoints(\n        grid,\n        mouseX,\n        mouseY,\n        mouseActive,\n        currentRadius,\n        currentStrength\n      );\n\n      const rows = grid.length;\n      const columns = grid[0]!.length;\n\n      // Count segments up front so we can size the pool\n      const horizontalCount = rows * (columns - 1);\n      const verticalCount = columns * (rows - 1);\n      const totalSegments = horizontalCount + verticalCount;\n      ensurePathCount(totalSegments);\n\n      let pathIndex = 0;\n\n      // Horizontal segments\n      for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n        for (let columnIndex = 0; columnIndex < columns - 1; columnIndex++) {\n          const p0 = grid[rowIndex]![columnIndex]!;\n          const p1 = grid[rowIndex]![columnIndex + 1]!;\n          const attrs = buildSegmentAttrs(\n            p0.x,\n            p0.y,\n            p1.x,\n            p1.y,\n            mouseX,\n            mouseY,\n            mouseActive,\n            currentRadius,\n            currentStrength,\n            lineRgb,\n            highlightRgb,\n            baseOpacity,\n            highlightOpacityBoost\n          );\n          const el = pathPool[pathIndex++]!;\n          el.setAttribute('d', attrs.d);\n          el.setAttribute('stroke', attrs.stroke);\n          el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n          el.setAttribute('stroke-width', String(attrs.strokeWidth));\n        }\n      }\n\n      // Vertical segments\n      for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n        for (let rowIndex = 0; rowIndex < rows - 1; rowIndex++) {\n          const p0 = grid[rowIndex]![columnIndex]!;\n          const p1 = grid[rowIndex + 1]![columnIndex]!;\n          const attrs = buildSegmentAttrs(\n            p0.x,\n            p0.y,\n            p1.x,\n            p1.y,\n            mouseX,\n            mouseY,\n            mouseActive,\n            currentRadius,\n            currentStrength,\n            lineRgb,\n            highlightRgb,\n            baseOpacity,\n            highlightOpacityBoost\n          );\n          const el = pathPool[pathIndex++]!;\n          el.setAttribute('d', attrs.d);\n          el.setAttribute('stroke', attrs.stroke);\n          el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n          el.setAttribute('stroke-width', String(attrs.strokeWidth));\n        }\n      }\n\n      frame = requestAnimationFrame(tick);\n    };\n\n    tick();\n\n    return () => {\n      cancelAnimationFrame(frame);\n      // Clean up path elements we injected\n      for (const el of pathPool) {\n        el.remove();\n      }\n    };\n  }, []); // no dependencies — reads everything via refs\n\n  return (\n    <svg\n      ref={svgRef}\n      aria-hidden=\"true\"\n      className={cn(\n        'pointer-events-none absolute inset-0 size-full',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"GridDistortionPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridDistortionPattern.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type SVGProps, useEffect, useRef } from 'react';\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode';\n\n// ---------------------------------------------------------------------------\n// Theme configuration — tweak these to adjust the grid appearance globally\n// ---------------------------------------------------------------------------\n\ntype GridTheme = {\n  /** Resting line color, used far from the pointer. */\n  lineColor: string;\n  /**\n   * Color the lines fade toward as the pointer approaches. To avoid lines\n   * appearing to \"dim into the background\" near the pointer, this should be\n   * brighter (higher luminance) than {@link GridTheme.lineColor} in dark mode\n   * and clearly contrasting in light mode.\n   */\n  highlightColor: string;\n  /** Stroke opacity far from the pointer — keeps the whole grid visible. */\n  baseOpacity: number;\n  /** Extra opacity added at the pointer's center on top of {@link GridTheme.baseOpacity}. */\n  highlightOpacityBoost: number;\n};\n\n/**\n * Light mode: a visible (but subtle) gray line on white. The base opacity is\n * raised and the highlight boost lowered so the grid no longer fades to nothing\n * far from the pointer while spiking to a harsh accent underneath it.\n */\nconst LIGHT_THEME: GridTheme = {\n  lineColor: '#a8a8a8',\n  highlightColor: '#969696',\n  baseOpacity: 0.3,\n  highlightOpacityBoost: 0.3,\n};\n\n/**\n * Dark mode: a mid-gray line that brightens toward a light purple near the\n * pointer (brighter than the resting line, so the hovered segment lights up\n * instead of darkening into the black background).\n */\nconst DARK_THEME: GridTheme = {\n  lineColor: '#4d4d4d',\n  highlightColor: '#5c5c5c',\n  baseOpacity: 0.2,\n  highlightOpacityBoost: 0.2,\n};\n\n/**\n * Falloff exponent for the highlight. A gentler curve (2 = quadratic) spreads\n * the highlight over a wider area than a cubic one, smoothing the transition\n * between the resting line and the accent under the pointer.\n */\nconst HIGHLIGHT_FALLOFF_EXPONENT = 2;\n\n// ---------------------------------------------------------------------------\n// Pure helpers — defined once at module level, never recreated\n// ---------------------------------------------------------------------------\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const numericValue = parseInt(hex.replace('#', ''), 16);\n  return [\n    (numericValue >> 16) & 255,\n    (numericValue >> 8) & 255,\n    numericValue & 255,\n  ];\n};\n\n/** Neutral gray used when a color string can't be parsed into RGB. */\nconst FALLBACK_RGB: [number, number, number] = [136, 136, 136];\n\n/**\n * Resolves any CSS color string — `#rrggbb`, `rgb()/hsl()`, a named color, or a\n * `var(--token)` reference — into an `[r, g, b]` triple.\n *\n * 6-digit hex is parsed directly. Everything else is resolved by the browser\n * via a throwaway probe element mounted inside `contextElement`, so custom\n * properties resolve against the correct cascade. Falls back to a neutral gray\n * when the value can't be parsed, so the grid never emits invalid\n * `rgb(NaN, …)` strokes (which browsers render as solid black).\n */\nconst resolveColorToRgb = (\n  color: string,\n  contextElement: Element\n): [number, number, number] => {\n  const trimmed = color.trim();\n\n  // Fast path: 6-digit hex needs no DOM access.\n  if (/^#[0-9a-f]{6}$/i.test(trimmed)) {\n    return hexToRgb(trimmed);\n  }\n\n  const probe = document.createElement('span');\n  probe.style.color = trimmed;\n  probe.style.display = 'none';\n  contextElement.appendChild(probe);\n  const computedColor = getComputedStyle(probe).color;\n  probe.remove();\n\n  const channels = computedColor.match(/-?\\d+(?:\\.\\d+)?/g);\n  if (channels && channels.length >= 3) {\n    return [Number(channels[0]), Number(channels[1]), Number(channels[2])];\n  }\n\n  return FALLBACK_RGB;\n};\n\ntype Point = { baseX: number; baseY: number; x: number; y: number };\n\nconst buildSegmentAttrs = (\n  startX: number,\n  startY: number,\n  endX: number,\n  endY: number,\n  mouseX: number,\n  mouseY: number,\n  mouseActive: boolean,\n  radius: number,\n  strength: number,\n  lineRgb: [number, number, number],\n  highlightRgb: [number, number, number],\n  baseOpacity: number,\n  highlightOpacityBoost: number\n): {\n  d: string;\n  stroke: string;\n  strokeOpacity: number;\n  strokeWidth: number;\n} => {\n  let red: number;\n  let green: number;\n  let blue: number;\n  let opacity: number;\n  let strokeWidth: number;\n\n  if (!mouseActive) {\n    [red, green, blue] = lineRgb;\n    opacity = baseOpacity;\n    strokeWidth = 0.8;\n  } else {\n    const midX = (startX + endX) / 2;\n    const midY = (startY + endY) / 2;\n    const deltaX = mouseX - midX;\n    const deltaY = mouseY - midY;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const distanceRatio = Math.max(0, 1 - distance / radius);\n    const easing = distanceRatio ** HIGHLIGHT_FALLOFF_EXPONENT;\n    red = Math.round(lineRgb[0] + (highlightRgb[0] - lineRgb[0]) * easing);\n    green = Math.round(lineRgb[1] + (highlightRgb[1] - lineRgb[1]) * easing);\n    blue = Math.round(lineRgb[2] + (highlightRgb[2] - lineRgb[2]) * easing);\n    opacity = baseOpacity + easing * highlightOpacityBoost;\n    strokeWidth = 0.8 + easing * 1.2;\n    void strength; // currently unused in segment coloring, kept for API compatibility\n  }\n\n  return {\n    d: `M ${startX} ${startY} L ${endX} ${endY}`,\n    stroke: `rgb(${red},${green},${blue})`,\n    strokeOpacity: opacity,\n    strokeWidth,\n  };\n};\n\nconst updateGridPoints = (\n  grid: Point[][],\n  mouseX: number,\n  mouseY: number,\n  mouseActive: boolean,\n  radius: number,\n  strength: number\n): void => {\n  const rows = grid.length;\n  const columns = grid[0]!.length;\n\n  for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n    for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n      const point = grid[rowIndex]![columnIndex]!;\n      if (!mouseActive) {\n        point.x += (point.baseX - point.x) * 0.08;\n        point.y += (point.baseY - point.y) * 0.08;\n        continue;\n      }\n      const deltaX = mouseX - point.baseX;\n      const deltaY = mouseY - point.baseY;\n      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n\n      if (distance < radius && distance > 0) {\n        const force = (Math.cos((distance / radius) * Math.PI) + 1) / 2;\n        const displacement = force * strength * radius * 0.3;\n        point.x +=\n          (point.baseX + (deltaX / distance) * displacement - point.x) * 0.12;\n        point.y +=\n          (point.baseY + (deltaY / distance) * displacement - point.y) * 0.12;\n      } else {\n        point.x += (point.baseX - point.x) * 0.08;\n        point.y += (point.baseY - point.y) * 0.08;\n      }\n    }\n  }\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\ntype GridDistortionPatternProps = {\n  width?: number;\n  height?: number;\n  radius?: number;\n  strength?: number;\n  lineColor?: string;\n  highlightColor?: string;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridDistortionPattern: FC<GridDistortionPatternProps> = ({\n  width = 70,\n  height = 70,\n  radius = 280,\n  strength = 0.12,\n  lineColor,\n  highlightColor,\n  className,\n  ...props\n}) => {\n  const isDarkMode = useIsDarkMode();\n  const theme = isDarkMode ? DARK_THEME : LIGHT_THEME;\n\n  // Explicit props win; otherwise fall back to the active theme's defaults.\n  const resolvedLineColor = lineColor ?? theme.lineColor;\n  const resolvedHighlightColor = highlightColor ?? theme.highlightColor;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n  const mouse = useRef({ x: -9999, y: -9999, active: false });\n  const points = useRef<Point[][]>([]);\n\n  // Stable refs so the animation loop always sees the latest prop values\n  // without needing to restart itself.\n  const radiusRef = useRef(radius);\n  const strengthRef = useRef(strength);\n  // Initialized to safe placeholders; the real (possibly CSS-variable-based)\n  // colors are resolved against the DOM in the effect below.\n  const lineRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n  const highlightRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n  const baseOpacityRef = useRef(theme.baseOpacity);\n  const highlightOpacityBoostRef = useRef(theme.highlightOpacityBoost);\n\n  // Keep numeric refs in sync with props on each render (cheap assignments).\n  radiusRef.current = radius;\n  strengthRef.current = strength;\n  baseOpacityRef.current = theme.baseOpacity;\n  highlightOpacityBoostRef.current = theme.highlightOpacityBoost;\n\n  // Resolve colors once mounted — getComputedStyle is required so that\n  // `var(--token)` highlight/line colors resolve against the live cascade.\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n    lineRgbRef.current = resolveColorToRgb(resolvedLineColor, svg);\n    highlightRgbRef.current = resolveColorToRgb(resolvedHighlightColor, svg);\n  }, [resolvedLineColor, resolvedHighlightColor]);\n\n  // ---------------------------------------------------------------------------\n  // Resize — rebuild the point grid and resize the SVG viewBox\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    const resize = () => {\n      const rect = svg.getBoundingClientRect();\n      svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);\n\n      const columns = Math.ceil(rect.width / width) + 2;\n      const rows = Math.ceil(rect.height / height) + 2;\n      const newGrid: Point[][] = [];\n\n      for (let rowIndex = -1; rowIndex <= rows; rowIndex++) {\n        const row: Point[] = [];\n        for (let columnIndex = -1; columnIndex <= columns; columnIndex++) {\n          row.push({\n            baseX: columnIndex * width,\n            baseY: rowIndex * height,\n            x: columnIndex * width,\n            y: rowIndex * height,\n          });\n        }\n        newGrid.push(row);\n      }\n      points.current = newGrid;\n    };\n\n    resize();\n    const resizeObserver = new ResizeObserver(resize);\n    resizeObserver.observe(svg);\n    return () => resizeObserver.disconnect();\n  }, [width, height]);\n\n  // ---------------------------------------------------------------------------\n  // Pointer tracking — passive listeners, no React state involved\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    const handlePointerMove = (event: PointerEvent) => {\n      const rect = svg.getBoundingClientRect();\n      mouse.current = {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n        active: true,\n      };\n    };\n    const handlePointerLeave = () => {\n      mouse.current.active = false;\n    };\n\n    window.addEventListener('pointermove', handlePointerMove, {\n      passive: true,\n    });\n    window.addEventListener('pointerleave', handlePointerLeave, {\n      passive: true,\n    });\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerleave', handlePointerLeave);\n    };\n  }, []);\n\n  // ---------------------------------------------------------------------------\n  // Animation loop — writes directly to SVG DOM, no React state/re-renders\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    // We maintain a pool of <path> elements and reuse them each frame\n    // to avoid GC pressure from creating/deleting DOM nodes every tick.\n    const pathPool: SVGPathElement[] = [];\n    let frame = 0;\n\n    const ensurePathCount = (count: number) => {\n      while (pathPool.length < count) {\n        const el = document.createElementNS(\n          'http://www.w3.org/2000/svg',\n          'path'\n        );\n        el.setAttribute('fill', 'none');\n        svg.appendChild(el);\n        pathPool.push(el);\n      }\n      // Hide surplus paths\n      for (let i = count; i < pathPool.length; i++) {\n        pathPool[i]!.setAttribute('d', '');\n      }\n    };\n\n    const tick = () => {\n      const grid = points.current;\n      if (!grid.length) {\n        frame = requestAnimationFrame(tick);\n        return;\n      }\n\n      const { x: mouseX, y: mouseY, active: mouseActive } = mouse.current;\n      const currentRadius = radiusRef.current;\n      const currentStrength = strengthRef.current;\n      const lineRgb = lineRgbRef.current;\n      const highlightRgb = highlightRgbRef.current;\n      const baseOpacity = baseOpacityRef.current;\n      const highlightOpacityBoost = highlightOpacityBoostRef.current;\n\n      // Update point positions\n      updateGridPoints(\n        grid,\n        mouseX,\n        mouseY,\n        mouseActive,\n        currentRadius,\n        currentStrength\n      );\n\n      const rows = grid.length;\n      const columns = grid[0]!.length;\n\n      // Count segments up front so we can size the pool\n      const horizontalCount = rows * (columns - 1);\n      const verticalCount = columns * (rows - 1);\n      const totalSegments = horizontalCount + verticalCount;\n      ensurePathCount(totalSegments);\n\n      let pathIndex = 0;\n\n      // Horizontal segments\n      for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n        for (let columnIndex = 0; columnIndex < columns - 1; columnIndex++) {\n          const p0 = grid[rowIndex]![columnIndex]!;\n          const p1 = grid[rowIndex]![columnIndex + 1]!;\n          const attrs = buildSegmentAttrs(\n            p0.x,\n            p0.y,\n            p1.x,\n            p1.y,\n            mouseX,\n            mouseY,\n            mouseActive,\n            currentRadius,\n            currentStrength,\n            lineRgb,\n            highlightRgb,\n            baseOpacity,\n            highlightOpacityBoost\n          );\n          const el = pathPool[pathIndex++]!;\n          el.setAttribute('d', attrs.d);\n          el.setAttribute('stroke', attrs.stroke);\n          el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n          el.setAttribute('stroke-width', String(attrs.strokeWidth));\n        }\n      }\n\n      // Vertical segments\n      for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n        for (let rowIndex = 0; rowIndex < rows - 1; rowIndex++) {\n          const p0 = grid[rowIndex]![columnIndex]!;\n          const p1 = grid[rowIndex + 1]![columnIndex]!;\n          const attrs = buildSegmentAttrs(\n            p0.x,\n            p0.y,\n            p1.x,\n            p1.y,\n            mouseX,\n            mouseY,\n            mouseActive,\n            currentRadius,\n            currentStrength,\n            lineRgb,\n            highlightRgb,\n            baseOpacity,\n            highlightOpacityBoost\n          );\n          const el = pathPool[pathIndex++]!;\n          el.setAttribute('d', attrs.d);\n          el.setAttribute('stroke', attrs.stroke);\n          el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n          el.setAttribute('stroke-width', String(attrs.strokeWidth));\n        }\n      }\n\n      frame = requestAnimationFrame(tick);\n    };\n\n    tick();\n\n    return () => {\n      cancelAnimationFrame(frame);\n      // Clean up path elements we injected\n      for (const el of pathPool) {\n        el.remove();\n      }\n    };\n  }, []); // no dependencies — reads everything via refs\n\n  return (\n    <svg\n      ref={svgRef}\n      aria-hidden=\"true\"\n      className={cn(\n        'pointer-events-none absolute inset-0 size-full',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Pattern/GridPattern.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/**\n * Props for the GridPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype GridPatternProps = {\n  /** Width of each grid cell in pixels */\n  width?: number;\n  /** Height of each grid cell in pixels */\n  height?: number;\n  /** Horizontal offset of the pattern */\n  x?: number;\n  /** Vertical offset of the pattern */\n  y?: number;\n  /** Array of grid coordinates to highlight as filled squares */\n  squares?: [x: number, y: number][];\n  /** Dash pattern for grid lines (0 = solid, positive = dashed) */\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Unique identifier for the grid pattern definition\n * Static to ensure consistent referencing across instances\n */\nconst id = 'grid-pattern';\n\n/**\n * Grid Pattern Component\n *\n * A versatile SVG component that generates a repeating grid pattern background with\n * optional highlighted squares. Ideal for technical layouts, dashboards, design mockups,\n * and any interface requiring structured visual organization.\n *\n * Features:\n * - Scalable vector-based grid that renders crisp at any zoom level\n * - Customizable cell dimensions and spacing\n * - Optional square highlighting for emphasis or data visualization\n * - Configurable stroke patterns (solid or dashed lines)\n * - Theme-aware styling with automatic dark mode support\n * - Accessibility-friendly with screen reader exclusion\n * - Performance optimized with pointer events disabled\n * - Full container coverage with responsive sizing\n *\n * Technical Architecture:\n * - Uses SVG `<pattern>` for memory-efficient repetition\n * - Grid lines drawn with path elements for precision\n * - Highlighted squares rendered as separate rect elements\n * - Pattern coordinates use userSpaceOnUse for consistency\n * - Static pattern ID prevents conflicts between instances\n *\n * Visual Design:\n * - Default: 40x40px grid cells with subtle neutral strokes\n * - Light mode: 10% fill opacity, 15% stroke opacity\n * - Dark mode: Enhanced 30% stroke opacity for visibility\n * - Slight offset (-1px) for optimal line rendering\n * - Optional dashed lines for more subtle appearance\n *\n * Highlighted Squares:\n * - Defined by coordinate arrays [x, y] where x,y are grid positions\n * - Automatically sized to fit within grid cells (width-1, height-1)\n * - Positioned with 1px offset for visual separation from grid lines\n * - Inherit theme-based fill colors for consistency\n *\n * @example\n * Basic grid background:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n *   <GridPattern />\n *   <div className=\"relative z-10\">\n *     <h1>Content over grid</h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom grid size with dashed lines:\n * ```tsx\n * <GridPattern\n *   width={60}\n *   height={60}\n *   strokeDasharray={2}\n *   className=\"stroke-primary/20\"\n * />\n * ```\n *\n * @example\n * Data visualization with highlighted squares:\n * ```tsx\n * <GridPattern\n *   width={30}\n *   height={30}\n *   squares={[\n *     [0, 1], [1, 1], [2, 1],\n *     [1, 2], [3, 0], [4, 2]\n *   ]}\n *   className=\"fill-accent/20 stroke-accent/30\"\n * />\n * ```\n *\n * @example\n * Fine grid for technical layouts:\n * ```tsx\n * <GridPattern\n *   width={20}\n *   height={20}\n *   strokeDasharray={1}\n *   className=\"stroke-neutral/8 fill-neutral/5\"\n * />\n * ```\n *\n * Styling Guidelines:\n * - Use low opacity values (5-30%) for background subtlety\n * - Consider theme contrast when customizing colors\n * - Dashed patterns work well for secondary grids\n * - Match grid colors with overall design system\n *\n * Performance Notes:\n * - Pattern definition reused efficiently across large areas\n * - Highlighted squares rendered individually for flexibility\n * - Pointer events disabled to prevent interaction blocking\n * - SVG optimized for browser rendering performance\n *\n * Accessibility:\n * - Hidden from screen readers with aria-hidden=\"true\"\n * - Purely decorative - doesn't convey essential information\n * - Maintains sufficient contrast with overlaid content\n *\n * @param props - GridPattern component props\n * @returns SVG element with repeating grid pattern and optional highlights\n */\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id={id}\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <path\n          d={`M.5 ${height}V.5H${width}`}\n          fill=\"none\"\n          strokeDasharray={strokeDasharray}\n        />\n      </pattern>\n    </defs>\n    <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    {squares && (\n      <svg\n        x={x}\n        y={y}\n        className=\"overflow-visible\"\n        role=\"img\"\n        aria-label=\"Grid pattern\"\n      >\n        {squares.map(([x, y]) => (\n          <rect\n            strokeWidth=\"0\"\n            key={`${x}-${y}`}\n            width={width - 1}\n            height={height - 1}\n            x={x * width + 1}\n            y={y * height + 1}\n          />\n        ))}\n      </svg>\n    )}\n  </svg>\n);\n"],"mappings":";;;;;;;;AA0BA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GX,MAAa,eAAqC,EAChD,QAAQ,IACR,SAAS,IACT,IAAI,IACJ,IAAI,IACJ,kBAAkB,GAClB,SACA,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,0HACA,UACD;CACD,GAAI;WANN;EAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;GACM;GACG;GACC;GACR,cAAa;GACV;GACA;aAEH,oBAAC,QAAD;IACE,GAAG,OAAO,OAAO,MAAM;IACvB,MAAK;IACY;IACjB;GACM,GACL;EACP,oBAAC,QAAD;GAAM,OAAM;GAAO,QAAO;GAAO,aAAa;GAAG,MAAM,QAAQ,GAAG;GAAM;EACvE,WACC,oBAAC,OAAD;GACK;GACA;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAEV,QAAQ,KAAK,CAAC,GAAG,OAChB,oBAAC,QAAD;IACE,aAAY;IAEZ,OAAO,QAAQ;IACf,QAAQ,SAAS;IACjB,GAAG,IAAI,QAAQ;IACf,GAAG,IAAI,SAAS;IAChB,EALK,GAAG,EAAE,GAAG,IAKb,CACF;GACE;EAEJ"}
+{"version":3,"file":"GridPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridPattern.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, SVGProps } from 'react';\n\n/**\n * Props for the GridPattern component\n * Extends SVGProps to inherit all standard SVG attributes\n */\ntype GridPatternProps = {\n  /** Width of each grid cell in pixels */\n  width?: number;\n  /** Height of each grid cell in pixels */\n  height?: number;\n  /** Horizontal offset of the pattern */\n  x?: number;\n  /** Vertical offset of the pattern */\n  y?: number;\n  /** Array of grid coordinates to highlight as filled squares */\n  squares?: [x: number, y: number][];\n  /** Dash pattern for grid lines (0 = solid, positive = dashed) */\n  strokeDasharray?: number;\n} & SVGProps<SVGSVGElement>;\n\n/**\n * Unique identifier for the grid pattern definition\n * Static to ensure consistent referencing across instances\n */\nconst id = 'grid-pattern';\n\n/**\n * Grid Pattern Component\n *\n * A versatile SVG component that generates a repeating grid pattern background with\n * optional highlighted squares. Ideal for technical layouts, dashboards, design mockups,\n * and any interface requiring structured visual organization.\n *\n * Features:\n * - Scalable vector-based grid that renders crisp at any zoom level\n * - Customizable cell dimensions and spacing\n * - Optional square highlighting for emphasis or data visualization\n * - Configurable stroke patterns (solid or dashed lines)\n * - Theme-aware styling with automatic dark mode support\n * - Accessibility-friendly with screen reader exclusion\n * - Performance optimized with pointer events disabled\n * - Full container coverage with responsive sizing\n *\n * Technical Architecture:\n * - Uses SVG `<pattern>` for memory-efficient repetition\n * - Grid lines drawn with path elements for precision\n * - Highlighted squares rendered as separate rect elements\n * - Pattern coordinates use userSpaceOnUse for consistency\n * - Static pattern ID prevents conflicts between instances\n *\n * Visual Design:\n * - Default: 40x40px grid cells with subtle neutral strokes\n * - Light mode: 10% fill opacity, 15% stroke opacity\n * - Dark mode: Enhanced 30% stroke opacity for visibility\n * - Slight offset (-1px) for optimal line rendering\n * - Optional dashed lines for more subtle appearance\n *\n * Highlighted Squares:\n * - Defined by coordinate arrays [x, y] where x,y are grid positions\n * - Automatically sized to fit within grid cells (width-1, height-1)\n * - Positioned with 1px offset for visual separation from grid lines\n * - Inherit theme-based fill colors for consistency\n *\n * @example\n * Basic grid background:\n * ```tsx\n * <div className=\"relative min-h-screen\">\n *   <GridPattern />\n *   <div className=\"relative z-10\">\n *     <h1>Content over grid</h1>\n *   </div>\n * </div>\n * ```\n *\n * @example\n * Custom grid size with dashed lines:\n * ```tsx\n * <GridPattern\n *   width={60}\n *   height={60}\n *   strokeDasharray={2}\n *   className=\"stroke-primary/20\"\n * />\n * ```\n *\n * @example\n * Data visualization with highlighted squares:\n * ```tsx\n * <GridPattern\n *   width={30}\n *   height={30}\n *   squares={[\n *     [0, 1], [1, 1], [2, 1],\n *     [1, 2], [3, 0], [4, 2]\n *   ]}\n *   className=\"fill-accent/20 stroke-accent/30\"\n * />\n * ```\n *\n * @example\n * Fine grid for technical layouts:\n * ```tsx\n * <GridPattern\n *   width={20}\n *   height={20}\n *   strokeDasharray={1}\n *   className=\"stroke-neutral/8 fill-neutral/5\"\n * />\n * ```\n *\n * Styling Guidelines:\n * - Use low opacity values (5-30%) for background subtlety\n * - Consider theme contrast when customizing colors\n * - Dashed patterns work well for secondary grids\n * - Match grid colors with overall design system\n *\n * Performance Notes:\n * - Pattern definition reused efficiently across large areas\n * - Highlighted squares rendered individually for flexibility\n * - Pointer events disabled to prevent interaction blocking\n * - SVG optimized for browser rendering performance\n *\n * Accessibility:\n * - Hidden from screen readers with aria-hidden=\"true\"\n * - Purely decorative - doesn't convey essential information\n * - Maintains sufficient contrast with overlaid content\n *\n * @param props - GridPattern component props\n * @returns SVG element with repeating grid pattern and optional highlights\n */\nexport const GridPattern: FC<GridPatternProps> = ({\n  width = 40,\n  height = 40,\n  x = -1,\n  y = -1,\n  strokeDasharray = 0,\n  squares,\n  className,\n  ...props\n}) => (\n  <svg\n    aria-hidden=\"true\"\n    className={cn(\n      'pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30',\n      className\n    )}\n    {...props}\n  >\n    <defs>\n      <pattern\n        id={id}\n        width={width}\n        height={height}\n        patternUnits=\"userSpaceOnUse\"\n        x={x}\n        y={y}\n      >\n        <path\n          d={`M.5 ${height}V.5H${width}`}\n          fill=\"none\"\n          strokeDasharray={strokeDasharray}\n        />\n      </pattern>\n    </defs>\n    <rect width=\"100%\" height=\"100%\" strokeWidth={0} fill={`url(#${id})`} />\n    {squares && (\n      <svg\n        x={x}\n        y={y}\n        className=\"overflow-visible\"\n        role=\"img\"\n        aria-label=\"Grid pattern\"\n      >\n        {squares.map(([x, y]) => (\n          <rect\n            strokeWidth=\"0\"\n            key={`${x}-${y}`}\n            width={width - 1}\n            height={height - 1}\n            x={x * width + 1}\n            y={y * height + 1}\n          />\n        ))}\n      </svg>\n    )}\n  </svg>\n);\n"],"mappings":";;;;;;;;AA0BA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GX,MAAa,eAAqC,EAChD,QAAQ,IACR,SAAS,IACT,IAAI,IACJ,IAAI,IACJ,kBAAkB,GAClB,SACA,WACA,GAAG,YAEH,qBAAC,OAAD;CACE,eAAY;CACZ,WAAW,GACT,0HACA,SACF;CACA,GAAI;WANN;EAQE,oBAAC,QAAD,YACE,oBAAC,WAAD;GACM;GACG;GACC;GACR,cAAa;GACV;GACA;aAEH,oBAAC,QAAD;IACE,GAAG,OAAO,OAAO,MAAM;IACvB,MAAK;IACY;GAClB;EACM,GACL;EACN,oBAAC,QAAD;GAAM,OAAM;GAAO,QAAO;GAAO,aAAa;GAAG,MAAM,QAAQ,GAAG;EAAK;EACtE,WACC,oBAAC,OAAD;GACK;GACA;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAEV,QAAQ,KAAK,CAAC,GAAG,OAChB,oBAAC,QAAD;IACE,aAAY;IAEZ,OAAO,QAAQ;IACf,QAAQ,SAAS;IACjB,GAAG,IAAI,QAAQ;IACf,GAAG,IAAI,SAAS;GACjB,GALM,GAAG,EAAE,GAAG,GAKd,CACF;EACE;CAEJ"}