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

package/dist/components/MarkDownRender/MarkDownRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport { MarkdownProcessor, type MarkdownProcessorOptions } from './processor';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  options?: MarkdownProcessorOptions;\n};\n\n/**\n * Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n */\nconst stripFrontmatter = (markdown: string): string => {\n  const lines = markdown.split(/\\r?\\n/);\n\n  // Check if the very first non-empty line is the metadata start delimiter\n  const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n  if (!firstNonEmptyLine || firstNonEmptyLine.trim() !== '---') {\n    // No frontmatter, return original content\n    return markdown;\n  }\n\n  let inMetadataBlock = false;\n  let endOfMetadataIndex = -1;\n\n  for (let i = 0; i < lines.length; i++) {\n    const trimmedLine = lines[i].trim();\n\n    // Toggle metadata block on encountering the delimiter\n    if (trimmedLine === '---') {\n      if (!inMetadataBlock) {\n        // Begin metadata block\n        inMetadataBlock = true;\n        continue;\n      } else {\n        // End of metadata block\n        endOfMetadataIndex = i;\n        break;\n      }\n    }\n  }\n\n  if (endOfMetadataIndex > -1) {\n    // Return content after the frontmatter\n    return lines.slice(endOfMetadataIndex + 1).join('\\n');\n  }\n\n  // If we couldn't find the end delimiter, return original content\n  return markdown;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n\n  // Strip frontmatter from the markdown content before rendering\n  const cleanMarkdown = stripFrontmatter(children);\n\n  return (\n    <CodeProvider>\n      <TabProvider>\n        <MarkdownProcessor\n          options={{\n            disableParsingRawHTML: true,\n            overrides: {\n              h1: (props: ComponentProps<typeof H1>) => (\n                <H1 isClickable={true} {...props} />\n              ),\n              h2: (props: ComponentProps<typeof H2>) => (\n                <H2 isClickable={true} {...props} />\n              ),\n              h3: (props: ComponentProps<typeof H3>) => (\n                <H3 isClickable={true} {...props} />\n              ),\n              h4: (props: ComponentProps<typeof H4>) => (\n                <H4 isClickable={true} {...props} />\n              ),\n              h5: (props: ComponentProps<typeof H5>) => (\n                <H5 isClickable={true} {...props} />\n              ),\n              h6: (props: ComponentProps<typeof H6>) => (\n                <H6 isClickable={true} {...props} />\n              ),\n\n              code: (\n                props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n                  Partial<CodeCompAttributes> & { children: string }\n              ) =>\n                !props.className ? (\n                  <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                    {props.children}\n                  </strong>\n                ) : (\n                  <Code\n                    {...props}\n                    isDarkMode={isDarkMode}\n                    language={\n                      (props.className?.replace('lang-', '') ||\n                        'plaintext') as BundledLanguage\n                    }\n                    fileName={props.fileName}\n                    showHeader={Boolean(props.fileName)}\n                  />\n                ),\n\n              blockquote: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'blockquote'>) => (\n                <blockquote\n                  className={cn(\n                    'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n                <ul\n                  className={cn(\n                    'mt-5 flex flex-col gap-3 pl-5 list-disc',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n                <ol\n                  className={cn(\n                    'mt-5 flex flex-col gap-3 pl-5 list-decimal',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              img: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'img'>) => (\n                <img\n                  {...props}\n                  loading=\"lazy\"\n                  className={cn(\n                    'max-w-full max-h-[80vh] rounded-md',\n                    className\n                  )}\n                  src={`${props.src}?raw=true`}\n                />\n              ),\n              a: (props: ComponentProps<typeof Link>) => (\n                <Link\n                  color=\"neutral\"\n                  isExternalLink={props.href?.startsWith('http')}\n                  underlined={true}\n                  locale={locale}\n                  {...props}\n                />\n              ),\n              pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n              table: (props: ComponentProps<typeof Table>) => (\n                <Table {...props} />\n              ),\n              th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n                <th\n                  className={cn(\n                    'border-neutral bg-neutral/10 border-b p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n                <tr\n                  className={cn('hover:bg-neutral/10 hover:/10', className)}\n                  {...props}\n                />\n              ),\n              td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n                <td\n                  className={cn(\n                    'border-b border-neutral-500/50 p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n                <hr\n                  className={cn('mt-16 mx-6 text-neutral', className)}\n                  {...props}\n                />\n              ),\n              // Support both <Tab> and <Tabs> in markdown\n              Tabs: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n              Tab: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n              TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n                <Tab.Item {...props} />\n              ),\n              Columns: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div\n                  className={cn('flex max-md:flex-col gap-4', className)}\n                  {...props}\n                />\n              ),\n              Column: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div className={cn('flex-1', className)} {...props} />\n              ),\n              ...overrides,\n            },\n            ...restOptions,\n          }}\n        >\n          {cleanMarkdown ?? ''}\n        </MarkdownProcessor>\n      </TabProvider>\n    </CodeProvider>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","sources":["../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/config/client';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport type { BundledLanguage } from 'shiki';\nimport { cn } from '../../utils/cn';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport type { CodeCompAttributes } from '../IDE/Code';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\nimport { MarkdownProcessor, type MarkdownProcessorOptions } from './processor';\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  options?: MarkdownProcessorOptions;\n};\n\n/**\n * Removes frontmatter from markdown content\n * Frontmatter is the YAML metadata block at the beginning of markdown files\n * delimited by --- at the start and end\n */\nconst stripFrontmatter = (markdown: string): string => {\n  const lines = markdown.split(/\\r?\\n/);\n\n  // Check if the very first non-empty line is the metadata start delimiter\n  const firstNonEmptyLine = lines.find((line) => line.trim() !== '');\n\n  if (!firstNonEmptyLine || firstNonEmptyLine.trim() !== '---') {\n    // No frontmatter, return original content\n    return markdown;\n  }\n\n  let inMetadataBlock = false;\n  let endOfMetadataIndex = -1;\n\n  for (let i = 0; i < lines.length; i++) {\n    const trimmedLine = lines[i].trim();\n\n    // Toggle metadata block on encountering the delimiter\n    if (trimmedLine === '---') {\n      if (!inMetadataBlock) {\n        // Begin metadata block\n        inMetadataBlock = true;\n        continue;\n      } else {\n        // End of metadata block\n        endOfMetadataIndex = i;\n        break;\n      }\n    }\n  }\n\n  if (endOfMetadataIndex > -1) {\n    // Return content after the frontmatter\n    return lines.slice(endOfMetadataIndex + 1).join('\\n');\n  }\n\n  // If we couldn't find the end delimiter, return original content\n  return markdown;\n};\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * const markdownContent = `\n * # Hello World\n * This is **bold** and *italic* text.\n * `;\n *\n * <MarkdownRenderer>{markdownContent}</MarkdownRenderer>\n * ```\n *\n * @example\n * With dark mode:\n * ```tsx\n * const codeExample = `\n * # API Documentation\n * \\`\\`\\`javascript\n * const response = await fetch('/api/data');\n * const data = await response.json();\n * \\`\\`\\`\n * `;\n *\n * <MarkdownRenderer isDarkMode={true}>\n *   {codeExample}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With internationalized links:\n * ```tsx\n * const content = `\n * Visit our [documentation](/docs) for more information.\n * External link: [Google](https://google.com)\n * `;\n *\n * <MarkdownRenderer locale=\"fr\">\n *   {content}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With custom overrides:\n * ```tsx\n * const customOptions = {\n *   overrides: {\n *     h1: ({ children }) => (\n *       <h1 className=\"custom-title\">{children}</h1>\n *     ),\n *   },\n * };\n *\n * <MarkdownRenderer options={customOptions}>\n *   {markdownContent}\n * </MarkdownRenderer>\n * ```\n *\n * @example\n * With frontmatter (automatically stripped):\n * ```tsx\n * const blogPost = `\n * ---\n * title: \"My Blog Post\"\n * date: \"2023-12-01\"\n * author: \"John Doe\"\n * ---\n * # My Blog Post\n * This content will be rendered without the frontmatter.\n * `;\n *\n * <MarkdownRenderer>{blogPost}</MarkdownRenderer>\n * ```\n *\n * Features:\n * - Automatic frontmatter detection and removal\n * - Syntax-highlighted code blocks with theme support\n * - Clickable headers with anchor links\n * - Internationalized link handling with locale awareness\n * - Responsive tables with hover effects\n * - Custom blockquote, list, and image styling\n * - External link detection and security attributes\n * - Inline code with distinctive styling\n * - Lazy-loaded images with GitHub raw URL support\n * - Horizontal rules with custom styling\n *\n * Supported Markdown Elements:\n * - Headers (h1-h4) with click-to-anchor functionality\n * - Code blocks with language-specific syntax highlighting\n * - Inline code with background styling\n * - Blockquotes with custom border and padding\n * - Ordered and unordered lists with custom spacing\n * - Links (internal and external) with security attributes\n * - Images with lazy loading and responsive sizing\n * - Tables with hover effects and proper styling\n * - Horizontal rules with custom appearance\n * - All standard markdown formatting (bold, italic, etc.)\n *\n * Code Block Support:\n * - Language detection from code fence info\n * - Syntax highlighting through Code component\n * - Dark/light mode theme switching\n * - Line numbers and copy functionality (via Code component)\n * - Support for popular languages (JS, TS, Python, etc.)\n *\n * Link Handling:\n * - Automatic external link detection (starts with 'http')\n * - Security attributes for external links (rel=\"noopener noreferrer\")\n * - Locale-aware internal link routing\n * - Custom Link component integration\n * - Underlined styling for better visibility\n *\n * Image Processing:\n * - Automatic lazy loading for performance\n * - GitHub raw URL transformation for repository images\n * - Responsive sizing with max-width constraints\n * - Rounded corners for visual appeal\n *\n * Accessibility:\n * - Semantic HTML structure with proper heading hierarchy\n * - ARIA attributes through component integration\n * - Screen reader friendly link descriptions\n * - Keyboard navigation support\n * - High contrast styling options\n *\n * Performance:\n * - Lazy loading for images\n * - Efficient re-rendering with React memo patterns\n * - Code syntax highlighting with minimal bundle impact\n * - Optimized markdown parsing with markdown-to-jsx\n *\n * @param props - Component props\n * @param props.children - Raw markdown content to render\n * @param props.isDarkMode - Enable dark mode styling for code blocks\n * @param props.locale - Current locale for link internationalization\n * @param props.options - Additional markdown-to-jsx options\n * @param props.options.overrides - Custom component overrides for markdown elements\n *\n * @returns Rendered markdown content with custom styling and functionality\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  options,\n}) => {\n  const { overrides, ...restOptions } = options ?? {};\n\n  // Strip frontmatter from the markdown content before rendering\n  const cleanMarkdown = stripFrontmatter(children);\n\n  return (\n    <CodeProvider>\n      <TabProvider>\n        <MarkdownProcessor\n          options={{\n            overrides: {\n              h1: (props: ComponentProps<typeof H1>) => (\n                <H1 isClickable={true} {...props} />\n              ),\n              h2: (props: ComponentProps<typeof H2>) => (\n                <H2 isClickable={true} {...props} />\n              ),\n              h3: (props: ComponentProps<typeof H3>) => (\n                <H3 isClickable={true} {...props} />\n              ),\n              h4: (props: ComponentProps<typeof H4>) => (\n                <H4 isClickable={true} {...props} />\n              ),\n              h5: (props: ComponentProps<typeof H5>) => (\n                <H5 isClickable={true} {...props} />\n              ),\n              h6: (props: ComponentProps<typeof H6>) => (\n                <H6 isClickable={true} {...props} />\n              ),\n\n              code: (\n                props: Omit<ComponentPropsWithoutRef<'code'>, 'children'> &\n                  Partial<CodeCompAttributes> & { children: string }\n              ) =>\n                !props.className ? (\n                  <strong className=\"bg-card/60 rounded p-1 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n                    {props.children}\n                  </strong>\n                ) : (\n                  <Code\n                    {...props}\n                    isDarkMode={isDarkMode}\n                    language={\n                      (props.className?.replace('lang-', '') ||\n                        'plaintext') as BundledLanguage\n                    }\n                    fileName={props.fileName}\n                    showHeader={Boolean(props.fileName)}\n                  />\n                ),\n\n              blockquote: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'blockquote'>) => (\n                <blockquote\n                  className={cn(\n                    'border-card text-neutral mt-5 flex flex-col gap-3 border-l-4 pl-5',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ul: ({ className, ...props }: ComponentPropsWithoutRef<'ul'>) => (\n                <ul\n                  className={cn(\n                    'mt-5 flex flex-col gap-3 pl-5 list-disc',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              ol: ({ className, ...props }: ComponentPropsWithoutRef<'ol'>) => (\n                <ol\n                  className={cn(\n                    'mt-5 flex flex-col gap-3 pl-5 list-decimal',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              img: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'img'>) => (\n                <img\n                  {...props}\n                  loading=\"lazy\"\n                  className={cn(\n                    'max-w-full max-h-[80vh] rounded-md',\n                    className\n                  )}\n                  src={`${props.src}?raw=true`}\n                />\n              ),\n              a: (props: ComponentProps<typeof Link>) => (\n                <Link\n                  color=\"neutral\"\n                  isExternalLink={props.href?.startsWith('http')}\n                  underlined={true}\n                  locale={locale}\n                  {...props}\n                />\n              ),\n              pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n\n              table: (props: ComponentProps<typeof Table>) => (\n                <Table {...props} />\n              ),\n              th: ({ className, ...props }: ComponentPropsWithoutRef<'th'>) => (\n                <th\n                  className={cn(\n                    'border-neutral bg-neutral/10 border-b p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              tr: ({ className, ...props }: ComponentPropsWithoutRef<'tr'>) => (\n                <tr\n                  className={cn('hover:bg-neutral/10 hover:/10', className)}\n                  {...props}\n                />\n              ),\n              td: ({ className, ...props }: ComponentPropsWithoutRef<'td'>) => (\n                <td\n                  className={cn(\n                    'border-b border-neutral-500/50 p-4',\n                    className\n                  )}\n                  {...props}\n                />\n              ),\n              hr: ({ className, ...props }: ComponentPropsWithoutRef<'hr'>) => (\n                <hr\n                  className={cn('mt-16 mx-6 text-neutral', className)}\n                  {...props}\n                />\n              ),\n              // Support both <Tab> and <Tabs> in markdown\n              Tabs: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n              Tab: (props: ComponentProps<typeof Tab>) => <Tab {...props} />,\n              TabItem: (props: ComponentProps<typeof Tab.Item>) => (\n                <Tab.Item {...props} />\n              ),\n              Columns: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div\n                  className={cn('flex max-md:flex-col gap-4', className)}\n                  {...props}\n                />\n              ),\n              Column: ({\n                className,\n                ...props\n              }: ComponentPropsWithoutRef<'div'>) => (\n                <div className={cn('flex-1', className)} {...props} />\n              ),\n              ...overrides,\n            },\n            ...restOptions,\n          }}\n        >\n          {cleanMarkdown ?? ''}\n        </MarkdownProcessor>\n      </TabProvider>\n    </CodeProvider>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/MaxHeightSmoother/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  isFocusable?: boolean;\n  minHeight?: number;\n}\n\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isFocusable ? isHidden : undefined}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":["jsx","cn"],"mappings":";;;;AAWO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa,cAAc,WAAW;AAAA,IACtC,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAM,cAAc,WAAW;AAAA,IAC/B,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QAAA;AAAA,QAEzB,WAAWC,SAAAA;AAAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Content to render within the smoother container */\n  children: ReactNode;\n  /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n  isHidden?: boolean;\n  /** Enable expand-on-hover behavior */\n  isOverable?: boolean;\n  /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n  isFocusable?: boolean;\n  /** Minimum height in pixels for the collapsed state */\n  minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Uses CSS Grid's fractional rows to create fluid\n * animations without JavaScript height calculations, making it performant\n * and smooth across all devices and screen sizes.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n *   <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable={true}>\n *   <div>\n *     <p>This content expands when you hover over the container.</p>\n *     <p>Perfect for preview cards or tooltips.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Accessible focus-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isFocusable={true}>\n *   <div>\n *     <h3>Expandable Section</h3>\n *     <p>Tab to focus this container to expand the content.</p>\n *     <p>Great for accessible progressive disclosure.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   minHeight={100}\n *   className=\"border rounded-lg p-4\"\n * >\n *   <div>\n *     <h3>Article Preview</h3>\n *     <p>This article preview shows the first few lines...</p>\n *     <p>Hover to see the full content with smooth expansion.</p>\n *     <p>The minHeight ensures some content is always visible.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus behavior:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   isFocusable={true}\n *   minHeight={80}\n * >\n *   <div>\n *     <h4>Interactive Card</h4>\n *     <p>Expands on both hover and keyboard focus.</p>\n *     <p>Accessible to both mouse and keyboard users.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * Features:\n * - Smooth CSS Grid-based height transitions (700ms duration)\n * - Three interaction modes: controlled, hover, and focus\n * - Configurable minimum height for collapsed state\n * - Accessible keyboard navigation support\n * - Overflow handling with smooth scrolling\n * - ARIA attributes for screen reader compatibility\n * - Performance-optimized with CSS-only animations\n * - Responsive design that works on all screen sizes\n *\n * Animation Technique:\n * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions\n * instead of height animations, which provides:\n * - Smooth animations without knowing content height\n * - Better performance (no layout recalculations)\n * - More reliable across different content types\n * - Automatic adaptation to dynamic content changes\n *\n * Interaction Modes:\n * 1. **Controlled**: Use `isHidden` prop for external state control\n * 2. **Hover**: Set `isOverable={true}` for mouse hover expansion\n * 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion\n * 4. **Combined**: Use both `isOverable` and `isFocusable` together\n *\n * Accessibility Features:\n * - `role=\"button\"` when focusable for proper screen reader context\n * - `tabIndex={0}` for keyboard navigation when focusable\n * - `aria-hidden` attribute for screen reader control\n * - Semantic focus management with focus-within pseudo-class\n * - High contrast focus indicators\n * - Respects prefers-reduced-motion settings\n *\n * Use Cases:\n * - FAQ accordions and expandable sections\n * - Article previews and read-more functionality\n * - Card hover effects and content previews\n * - Progressive disclosure for complex forms\n * - Tooltip and popover content containers\n * - Mobile-friendly collapsible navigation\n * - Dashboard widget expansion\n * - Email preview in mail clients\n *\n * Performance Considerations:\n * - Pure CSS animations (no JavaScript timer overhead)\n * - GPU acceleration through transform-based animations\n * - Minimal repaints and layout shifts\n * - Efficient event handling with CSS pseudo-classes\n * - No DOM measurements or calculations required\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)\n * @param props.isOverable - Enable hover-to-expand behavior\n * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)\n * @param props.className - Additional CSS classes for styling\n * @param props.style - Inline styles (note: minHeight style will be applied)\n * @param props.role - ARIA role (automatically set to \"button\" when focusable)\n * @param props.tabIndex - Tab index (automatically set to 0 when focusable)\n * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.onFocus - Focus event handler\n * @param props.onBlur - Blur event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isFocusable ? isHidden : undefined}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":["jsx","cn"],"mappings":";;;;AAmKO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa,cAAc,WAAW;AAAA,IACtC,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAM,cAAc,WAAW;AAAA,IAC/B,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QAAA;AAAA,QAEzB,WAAWC,SAAAA;AAAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;;"}

package/dist/components/MaxHeightSmoother/index.d.ts

@@ -1,11 +1,163 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for the MaxHeightSmoother component
+ */
 interface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {
+    /** Content to render within the smoother container */
     children: ReactNode;
+    /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */
     isHidden?: boolean;
+    /** Enable expand-on-hover behavior */
     isOverable?: boolean;
+    /** Enable expand-on-focus behavior for accessibility and keyboard navigation */
     isFocusable?: boolean;
+    /** Minimum height in pixels for the collapsed state */
     minHeight?: number;
 }
+/**
+ * MaxHeightSmoother Component
+ *
+ * A sophisticated container component that provides smooth height transitions
+ * for collapsible content. Uses CSS Grid's fractional rows to create fluid
+ * animations without JavaScript height calculations, making it performant
+ * and smooth across all devices and screen sizes.
+ *
+ * @component
+ * @example
+ * Basic controlled usage:
+ * ```tsx
+ * const [isCollapsed, setIsCollapsed] = useState(true);
+ *
+ * <MaxHeightSmoother isHidden={isCollapsed}>
+ *   <div>Your collapsible content here</div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * Hover-triggered expansion:
+ * ```tsx
+ * <MaxHeightSmoother isOverable={true}>
+ *   <div>
+ *     <p>This content expands when you hover over the container.</p>
+ *     <p>Perfect for preview cards or tooltips.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * Accessible focus-triggered expansion:
+ * ```tsx
+ * <MaxHeightSmoother isFocusable={true}>
+ *   <div>
+ *     <h3>Expandable Section</h3>
+ *     <p>Tab to focus this container to expand the content.</p>
+ *     <p>Great for accessible progressive disclosure.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * With minimum height for preview:
+ * ```tsx
+ * <MaxHeightSmoother
+ *   isOverable={true}
+ *   minHeight={100}
+ *   className="border rounded-lg p-4"
+ * >
+ *   <div>
+ *     <h3>Article Preview</h3>
+ *     <p>This article preview shows the first few lines...</p>
+ *     <p>Hover to see the full content with smooth expansion.</p>
+ *     <p>The minHeight ensures some content is always visible.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * @example
+ * Combined hover and focus behavior:
+ * ```tsx
+ * <MaxHeightSmoother
+ *   isOverable={true}
+ *   isFocusable={true}
+ *   minHeight={80}
+ * >
+ *   <div>
+ *     <h4>Interactive Card</h4>
+ *     <p>Expands on both hover and keyboard focus.</p>
+ *     <p>Accessible to both mouse and keyboard users.</p>
+ *   </div>
+ * </MaxHeightSmoother>
+ * ```
+ *
+ * Features:
+ * - Smooth CSS Grid-based height transitions (700ms duration)
+ * - Three interaction modes: controlled, hover, and focus
+ * - Configurable minimum height for collapsed state
+ * - Accessible keyboard navigation support
+ * - Overflow handling with smooth scrolling
+ * - ARIA attributes for screen reader compatibility
+ * - Performance-optimized with CSS-only animations
+ * - Responsive design that works on all screen sizes
+ *
+ * Animation Technique:
+ * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions
+ * instead of height animations, which provides:
+ * - Smooth animations without knowing content height
+ * - Better performance (no layout recalculations)
+ * - More reliable across different content types
+ * - Automatic adaptation to dynamic content changes
+ *
+ * Interaction Modes:
+ * 1. **Controlled**: Use `isHidden` prop for external state control
+ * 2. **Hover**: Set `isOverable={true}` for mouse hover expansion
+ * 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion
+ * 4. **Combined**: Use both `isOverable` and `isFocusable` together
+ *
+ * Accessibility Features:
+ * - `role="button"` when focusable for proper screen reader context
+ * - `tabIndex={0}` for keyboard navigation when focusable
+ * - `aria-hidden` attribute for screen reader control
+ * - Semantic focus management with focus-within pseudo-class
+ * - High contrast focus indicators
+ * - Respects prefers-reduced-motion settings
+ *
+ * Use Cases:
+ * - FAQ accordions and expandable sections
+ * - Article previews and read-more functionality
+ * - Card hover effects and content previews
+ * - Progressive disclosure for complex forms
+ * - Tooltip and popover content containers
+ * - Mobile-friendly collapsible navigation
+ * - Dashboard widget expansion
+ * - Email preview in mail clients
+ *
+ * Performance Considerations:
+ * - Pure CSS animations (no JavaScript timer overhead)
+ * - GPU acceleration through transform-based animations
+ * - Minimal repaints and layout shifts
+ * - Efficient event handling with CSS pseudo-classes
+ * - No DOM measurements or calculations required
+ *
+ * @param props - Component props extending HTML div attributes
+ * @param props.children - Content to render within the container
+ * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)
+ * @param props.isOverable - Enable hover-to-expand behavior
+ * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation
+ * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)
+ * @param props.className - Additional CSS classes for styling
+ * @param props.style - Inline styles (note: minHeight style will be applied)
+ * @param props.role - ARIA role (automatically set to "button" when focusable)
+ * @param props.tabIndex - Tab index (automatically set to 0 when focusable)
+ * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)
+ * @param props.onClick - Click event handler
+ * @param props.onMouseEnter - Mouse enter event handler
+ * @param props.onMouseLeave - Mouse leave event handler
+ * @param props.onFocus - Focus event handler
+ * @param props.onBlur - Blur event handler
+ * @param props...rest - All other standard HTML div attributes
+ *
+ * @returns A smooth height-transitioning container with configurable interaction modes
+ */
 export declare const MaxHeightSmoother: FC<MaxHeightSmootherProps>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MaxHeightSmoother/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,UAAU,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAsCxD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D;;GAEG;AACH,UAAU,sBAAuB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,qIAAqI;IACrI,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gFAAgF;IAChF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+IG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAsCxD,CAAC"}

package/dist/components/MaxHeightSmoother/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  isFocusable?: boolean;\n  minHeight?: number;\n}\n\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isFocusable ? isHidden : undefined}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";;AAWO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa,cAAc,WAAW;AAAA,IACtC,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAM,cAAc,WAAW;AAAA,IAC/B,WAAW;AAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QAAA;AAAA,QAEzB,WAAW;AAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the MaxHeightSmoother component\n */\ninterface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {\n  /** Content to render within the smoother container */\n  children: ReactNode;\n  /** Controls collapse state. When true, content is collapsed; when false, expanded; when undefined, relies on hover/focus behavior */\n  isHidden?: boolean;\n  /** Enable expand-on-hover behavior */\n  isOverable?: boolean;\n  /** Enable expand-on-focus behavior for accessibility and keyboard navigation */\n  isFocusable?: boolean;\n  /** Minimum height in pixels for the collapsed state */\n  minHeight?: number;\n}\n\n/**\n * MaxHeightSmoother Component\n *\n * A sophisticated container component that provides smooth height transitions\n * for collapsible content. Uses CSS Grid's fractional rows to create fluid\n * animations without JavaScript height calculations, making it performant\n * and smooth across all devices and screen sizes.\n *\n * @component\n * @example\n * Basic controlled usage:\n * ```tsx\n * const [isCollapsed, setIsCollapsed] = useState(true);\n *\n * <MaxHeightSmoother isHidden={isCollapsed}>\n *   <div>Your collapsible content here</div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Hover-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isOverable={true}>\n *   <div>\n *     <p>This content expands when you hover over the container.</p>\n *     <p>Perfect for preview cards or tooltips.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Accessible focus-triggered expansion:\n * ```tsx\n * <MaxHeightSmoother isFocusable={true}>\n *   <div>\n *     <h3>Expandable Section</h3>\n *     <p>Tab to focus this container to expand the content.</p>\n *     <p>Great for accessible progressive disclosure.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   minHeight={100}\n *   className=\"border rounded-lg p-4\"\n * >\n *   <div>\n *     <h3>Article Preview</h3>\n *     <p>This article preview shows the first few lines...</p>\n *     <p>Hover to see the full content with smooth expansion.</p>\n *     <p>The minHeight ensures some content is always visible.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus behavior:\n * ```tsx\n * <MaxHeightSmoother\n *   isOverable={true}\n *   isFocusable={true}\n *   minHeight={80}\n * >\n *   <div>\n *     <h4>Interactive Card</h4>\n *     <p>Expands on both hover and keyboard focus.</p>\n *     <p>Accessible to both mouse and keyboard users.</p>\n *   </div>\n * </MaxHeightSmoother>\n * ```\n *\n * Features:\n * - Smooth CSS Grid-based height transitions (700ms duration)\n * - Three interaction modes: controlled, hover, and focus\n * - Configurable minimum height for collapsed state\n * - Accessible keyboard navigation support\n * - Overflow handling with smooth scrolling\n * - ARIA attributes for screen reader compatibility\n * - Performance-optimized with CSS-only animations\n * - Responsive design that works on all screen sizes\n *\n * Animation Technique:\n * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions\n * instead of height animations, which provides:\n * - Smooth animations without knowing content height\n * - Better performance (no layout recalculations)\n * - More reliable across different content types\n * - Automatic adaptation to dynamic content changes\n *\n * Interaction Modes:\n * 1. **Controlled**: Use `isHidden` prop for external state control\n * 2. **Hover**: Set `isOverable={true}` for mouse hover expansion\n * 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion\n * 4. **Combined**: Use both `isOverable` and `isFocusable` together\n *\n * Accessibility Features:\n * - `role=\"button\"` when focusable for proper screen reader context\n * - `tabIndex={0}` for keyboard navigation when focusable\n * - `aria-hidden` attribute for screen reader control\n * - Semantic focus management with focus-within pseudo-class\n * - High contrast focus indicators\n * - Respects prefers-reduced-motion settings\n *\n * Use Cases:\n * - FAQ accordions and expandable sections\n * - Article previews and read-more functionality\n * - Card hover effects and content previews\n * - Progressive disclosure for complex forms\n * - Tooltip and popover content containers\n * - Mobile-friendly collapsible navigation\n * - Dashboard widget expansion\n * - Email preview in mail clients\n *\n * Performance Considerations:\n * - Pure CSS animations (no JavaScript timer overhead)\n * - GPU acceleration through transform-based animations\n * - Minimal repaints and layout shifts\n * - Efficient event handling with CSS pseudo-classes\n * - No DOM measurements or calculations required\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to render within the container\n * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)\n * @param props.isOverable - Enable hover-to-expand behavior\n * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)\n * @param props.className - Additional CSS classes for styling\n * @param props.style - Inline styles (note: minHeight style will be applied)\n * @param props.role - ARIA role (automatically set to \"button\" when focusable)\n * @param props.tabIndex - Tab index (automatically set to 0 when focusable)\n * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.onFocus - Focus event handler\n * @param props.onBlur - Blur event handler\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A smooth height-transitioning container with configurable interaction modes\n */\nexport const MaxHeightSmoother: FC<MaxHeightSmootherProps> = ({\n  children,\n  isHidden,\n  className = '',\n  isOverable = false,\n  isFocusable = false,\n  minHeight = 0,\n  ...props\n}) => (\n  <div\n    aria-hidden={isFocusable ? isHidden : undefined}\n    tabIndex={isFocusable ? 0 : undefined}\n    role={isFocusable ? 'button' : 'none'}\n    className={cn(\n      'group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out',\n      typeof isHidden !== 'undefined' &&\n        !isHidden &&\n        'grid-rows-[1fr] overflow-x-auto',\n      isOverable && 'hover:grid-rows-[1fr] hover:overflow-x-auto',\n      isFocusable &&\n        'focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto',\n      className\n    )}\n    {...props}\n  >\n    <div\n      style={{\n        minHeight: `${minHeight}px`,\n      }}\n      className={cn(\n        isOverable && 'group-hover/height-smoother:visible',\n        isFocusable && 'group-focus/height-smoother:visible',\n        className\n      )}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"names":[],"mappings":";;AAmKO,MAAM,oBAAgD,CAAC;AAAA,EAC5D;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAa,cAAc,WAAW;AAAA,IACtC,UAAU,cAAc,IAAI;AAAA,IAC5B,MAAM,cAAc,WAAW;AAAA,IAC/B,WAAW;AAAA,MACT;AAAA,MACA,OAAO,aAAa,eAClB,CAAC,YACD;AAAA,MACF,cAAc;AAAA,MACd,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,WAAW,GAAG,SAAS;AAAA,QAAA;AAAA,QAEzB,WAAW;AAAA,UACT,cAAc;AAAA,UACd,eAAe;AAAA,UACf;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;"}

package/dist/components/Modal/Modal.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { ReactNode, type FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: ModalSize | `${ModalSize}`;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto py-3 shadow-sm justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\nconst MotionModal = m.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <div className=\"flex justify-center p-4\">\n        <MotionModal\n          onClick={(e) => e.stopPropagation()}\n          initial={{ scale: isOpen ? 0.5 : 1 }}\n          animate={{ scale: isOpen ? 1 : 0.5 }}\n          transition={{ duration: 0.3 }}\n          className={modalVariants({\n            size,\n            className,\n          })}\n          role=\"dialog\"\n          aria-modal\n          roundedSize=\"2xl\"\n          {...props}\n        >\n          <div\n            className={cn(\n              'cursor-default px-4',\n              hasCloseButton && hasTitle\n                ? `flex items-center justify-center`\n                : hasCloseButton\n                  ? `flex items-center justify-end`\n                  : hasTitle\n                    ? `items-center`\n                    : `hidden`\n            )}\n          >\n            {hasTitle && (\n              <H3 className=\"ml-4 flex items-center justify-center text-lg font-bold\">\n                {title}\n              </H3>\n            )}\n            {hasCloseButton && (\n              <Button\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                label=\"Close modal\"\n                className=\"ml-auto\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onClose?.();\n                }}\n                Icon={X}\n                size={ButtonSize.ICON_MD}\n              />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-center overflow-auto\">\n            {children}\n          </div>\n        </MotionModal>\n      </div>\n    </m.div>,\n    containerElement\n  );\n};\n"],"names":["ModalSize","cva","m","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","jsxs","cn","H3","Button","ButtonVariant","ButtonColor","X","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { ReactNode, type FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  /** Small modal: max height 30vh, max width xl */\n  SM = 'sm',\n  /** Medium modal: max height 50vh, max width xl */\n  MD = 'md',\n  /** Large modal: max height 70vh, max width 2xl */\n  LG = 'lg',\n  /** Extra large modal: max height 95vh, max width 6xl */\n  XL = 'xl',\n  /** Unset size: max height 95vh, full width responsive */\n  UNSET = 'unset',\n}\n\n/**\n * Props for the Modal component\n */\ntype ModalProps = {\n  /** Content to be displayed inside the modal */\n  children: ReactNode;\n  /** Controls whether the modal is visible */\n  isOpen: boolean;\n  /** Callback function called when the modal should be closed */\n  onClose?: () => void;\n  /** Container element to render the modal into (defaults to document.body) */\n  container?: HTMLElement;\n  /** Whether to disable scrolling on the background content */\n  disableScroll?: boolean;\n  /** Whether to display a close button in the modal header */\n  hasCloseButton?: boolean;\n  /** Optional title displayed at the top of the modal */\n  title?: string;\n  /** Size variant for the modal */\n  size?: ModalSize | `${ModalSize}`;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\n/**\n * Class name variants for different modal sizes using class-variance-authority\n * Defines responsive sizing and scrollable content for modal containers\n */\nconst modalVariants = cva(\n  'cursor-default overflow-auto py-3 shadow-sm justify-center',\n  {\n    variants: {\n      size: {\n        /** Small modal: height auto, max-height 30vh, width 95vw, max-width xl */\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        /** Medium modal: height auto, max-height 50vh, width 95vw, max-width xl */\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        /** Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl */\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        /** Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl */\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        /** Unset modal: height auto, max-height 95vh, width 95vw, no max-width */\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n/**\n * Motion-enabled modal component with Framer Motion support\n * Extends Container component with motion capabilities for animations\n */\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <div className=\"flex justify-center p-4\">\n        <MotionModal\n          onClick={(e) => e.stopPropagation()}\n          initial={{ scale: isOpen ? 0.5 : 1 }}\n          animate={{ scale: isOpen ? 1 : 0.5 }}\n          transition={{ duration: 0.3 }}\n          className={modalVariants({\n            size,\n            className,\n          })}\n          role=\"dialog\"\n          aria-modal\n          roundedSize=\"2xl\"\n          {...props}\n        >\n          <div\n            className={cn(\n              'cursor-default px-4',\n              hasCloseButton && hasTitle\n                ? `flex items-center justify-center`\n                : hasCloseButton\n                  ? `flex items-center justify-end`\n                  : hasTitle\n                    ? `items-center`\n                    : `hidden`\n            )}\n          >\n            {hasTitle && (\n              <H3 className=\"ml-4 flex items-center justify-center text-lg font-bold\">\n                {title}\n              </H3>\n            )}\n            {hasCloseButton && (\n              <Button\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                label=\"Close modal\"\n                className=\"ml-auto\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onClose?.();\n                }}\n                Icon={X}\n                size={ButtonSize.ICON_MD}\n              />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-center overflow-auto\">\n            {children}\n          </div>\n        </MotionModal>\n      </div>\n    </m.div>,\n    containerElement\n  );\n};\n"],"names":["ModalSize","cva","m","Container","useGetElementOrWindow","useScrollBlockage","jsx","Fragment","createPortal","jsxs","cn","H3","Button","ButtonVariant","ButtonColor","X","ButtonSize"],"mappings":"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"}

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

@@ -1,29 +1,107 @@
 import { ReactNode, FC } from 'react';
 import { ContainerProps } from '../Container';
+/**
+ * Enumeration of available modal sizes
+ */
 export declare enum ModalSize {
+    /** Small modal: max height 30vh, max width xl */
     SM = "sm",
+    /** Medium modal: max height 50vh, max width xl */
     MD = "md",
+    /** Large modal: max height 70vh, max width 2xl */
     LG = "lg",
+    /** Extra large modal: max height 95vh, max width 6xl */
     XL = "xl",
+    /** Unset size: max height 95vh, full width responsive */
     UNSET = "unset"
 }
+/**
+ * Props for the Modal component
+ */
 type ModalProps = {
+    /** Content to be displayed inside the modal */
     children: ReactNode;
+    /** Controls whether the modal is visible */
     isOpen: boolean;
+    /** Callback function called when the modal should be closed */
     onClose?: () => void;
+    /** Container element to render the modal into (defaults to document.body) */
     container?: HTMLElement;
+    /** Whether to disable scrolling on the background content */
     disableScroll?: boolean;
+    /** Whether to display a close button in the modal header */
     hasCloseButton?: boolean;
+    /** Optional title displayed at the top of the modal */
     title?: string;
+    /** Size variant for the modal */
     size?: ModalSize | `${ModalSize}`;
 } & Pick<ContainerProps, 'className' | 'transparency' | 'border' | 'background' | 'roundedSize' | 'borderColor' | 'padding' | 'separator' | 'gap'>;
 /**
- * Usage example:
+ * Modal Component
+ *
+ * A highly customizable modal dialog component with portal rendering, Framer Motion animations,
+ * and comprehensive accessibility features. Supports multiple size variants and scroll management.
+ *
+ * Features:
+ * - Portal rendering to any container element (defaults to document.body)
+ * - Smooth animations with Framer Motion
+ * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing
+ * - Optional title and close button
+ * - Background scroll prevention
+ * - Click-outside-to-close functionality
+ * - Full accessibility support with ARIA attributes
+ * - Keyboard navigation support (ESC to close)
+ * - Extensible styling with Container props
+ *
+ * @example
+ * Basic usage:
+ * ```jsx
+ * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+ *   <p>Modal content goes here</p>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * With title and close button:
+ * ```jsx
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   title="Confirm Action"
+ *   hasCloseButton
+ *   size={ModalSize.LG}
+ * >
+ *   <div>
+ *     <p>Are you sure you want to continue?</p>
+ *     <Button onClick={onConfirm}>Confirm</Button>
+ *   </div>
+ * </Modal>
+ * ```
+ *
+ * @example
+ * Custom container and styling:
  * ```jsx
- * <Modal isOpen={isOpen} onClose={onClose}>
- *   Modal content
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   container={customContainer}
+ *   background="card"
+ *   padding="lg"
+ *   border="default"
+ * >
+ *   Content with custom styling
  * </Modal>
  * ```
+ *
+ * Accessibility Notes:
+ * - Modal receives focus when opened
+ * - Background content is hidden from screen readers when modal is open
+ * - ESC key closes modal (handled by browser for role="dialog")
+ * - Click outside modal closes it
+ * - Close button has descriptive label for screen readers
+ *
+ * @param props - Modal component props
+ * @returns JSX element rendered via createPortal
  */
 export declare const Modal: FC<ModalProps>;
 export {};

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

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

package/dist/components/Modal/Modal.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { ReactNode, type FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: string;\n  size?: ModalSize | `${ModalSize}`;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\nconst modalVariants = cva(\n  'cursor-default overflow-auto py-3 shadow-sm justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\nconst MotionModal = m.create(Container);\n\n/**\n * Usage example:\n * ```jsx\n * <Modal isOpen={isOpen} onClose={onClose}>\n *   Modal content\n * </Modal>\n * ```\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <div className=\"flex justify-center p-4\">\n        <MotionModal\n          onClick={(e) => e.stopPropagation()}\n          initial={{ scale: isOpen ? 0.5 : 1 }}\n          animate={{ scale: isOpen ? 1 : 0.5 }}\n          transition={{ duration: 0.3 }}\n          className={modalVariants({\n            size,\n            className,\n          })}\n          role=\"dialog\"\n          aria-modal\n          roundedSize=\"2xl\"\n          {...props}\n        >\n          <div\n            className={cn(\n              'cursor-default px-4',\n              hasCloseButton && hasTitle\n                ? `flex items-center justify-center`\n                : hasCloseButton\n                  ? `flex items-center justify-end`\n                  : hasTitle\n                    ? `items-center`\n                    : `hidden`\n            )}\n          >\n            {hasTitle && (\n              <H3 className=\"ml-4 flex items-center justify-center text-lg font-bold\">\n                {title}\n              </H3>\n            )}\n            {hasCloseButton && (\n              <Button\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                label=\"Close modal\"\n                className=\"ml-auto\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onClose?.();\n                }}\n                Icon={X}\n                size={ButtonSize.ICON_MD}\n              />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-center overflow-auto\">\n            {children}\n          </div>\n        </MotionModal>\n      </div>\n    </m.div>,\n    containerElement\n  );\n};\n"],"names":["ModalSize","m"],"mappings":"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"}
+{"version":3,"file":"Modal.mjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { ReactNode, type FC } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  /** Small modal: max height 30vh, max width xl */\n  SM = 'sm',\n  /** Medium modal: max height 50vh, max width xl */\n  MD = 'md',\n  /** Large modal: max height 70vh, max width 2xl */\n  LG = 'lg',\n  /** Extra large modal: max height 95vh, max width 6xl */\n  XL = 'xl',\n  /** Unset size: max height 95vh, full width responsive */\n  UNSET = 'unset',\n}\n\n/**\n * Props for the Modal component\n */\ntype ModalProps = {\n  /** Content to be displayed inside the modal */\n  children: ReactNode;\n  /** Controls whether the modal is visible */\n  isOpen: boolean;\n  /** Callback function called when the modal should be closed */\n  onClose?: () => void;\n  /** Container element to render the modal into (defaults to document.body) */\n  container?: HTMLElement;\n  /** Whether to disable scrolling on the background content */\n  disableScroll?: boolean;\n  /** Whether to display a close button in the modal header */\n  hasCloseButton?: boolean;\n  /** Optional title displayed at the top of the modal */\n  title?: string;\n  /** Size variant for the modal */\n  size?: ModalSize | `${ModalSize}`;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\n/**\n * Class name variants for different modal sizes using class-variance-authority\n * Defines responsive sizing and scrollable content for modal containers\n */\nconst modalVariants = cva(\n  'cursor-default overflow-auto py-3 shadow-sm justify-center',\n  {\n    variants: {\n      size: {\n        /** Small modal: height auto, max-height 30vh, width 95vw, max-width xl */\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        /** Medium modal: height auto, max-height 50vh, width 95vw, max-width xl */\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        /** Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl */\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        /** Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl */\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        /** Unset modal: height auto, max-height 95vh, width 95vw, no max-width */\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n/**\n * Motion-enabled modal component with Framer Motion support\n * Extends Container component with motion capabilities for animations\n */\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"bg-background/40 /40 invisible fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <div className=\"flex justify-center p-4\">\n        <MotionModal\n          onClick={(e) => e.stopPropagation()}\n          initial={{ scale: isOpen ? 0.5 : 1 }}\n          animate={{ scale: isOpen ? 1 : 0.5 }}\n          transition={{ duration: 0.3 }}\n          className={modalVariants({\n            size,\n            className,\n          })}\n          role=\"dialog\"\n          aria-modal\n          roundedSize=\"2xl\"\n          {...props}\n        >\n          <div\n            className={cn(\n              'cursor-default px-4',\n              hasCloseButton && hasTitle\n                ? `flex items-center justify-center`\n                : hasCloseButton\n                  ? `flex items-center justify-end`\n                  : hasTitle\n                    ? `items-center`\n                    : `hidden`\n            )}\n          >\n            {hasTitle && (\n              <H3 className=\"ml-4 flex items-center justify-center text-lg font-bold\">\n                {title}\n              </H3>\n            )}\n            {hasCloseButton && (\n              <Button\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                label=\"Close modal\"\n                className=\"ml-auto\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onClose?.();\n                }}\n                Icon={X}\n                size={ButtonSize.ICON_MD}\n              />\n            )}\n          </div>\n          <div className=\"flex flex-1 flex-col items-center overflow-auto\">\n            {children}\n          </div>\n        </MotionModal>\n      </div>\n    </m.div>,\n    containerElement\n  );\n};\n"],"names":["ModalSize","m"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Burger.cjs","sources":["../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n  isActive?: boolean;\n}\n\nconst lineStyle =\n  'bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300';\n\nexport const Burger = ({\n  isActive = false,\n  className,\n  ...props\n}: BurgerProps) => (\n  <div\n    className={cn('relative mr-3 size-10 cursor-pointer', className)}\n    aria-checked={isActive}\n    aria-expanded={isActive}\n    aria-controls=\"mobile-menu\"\n    role=\"switch\"\n    aria-label={isActive ? 'Close menu' : 'Open menu'}\n    {...props}\n  >\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[-45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? '-translate-y-3 opacity-0' : '-translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n\n    <div>\n      <div className={cn(lineStyle, isActive ? 'opacity-0' : 'opacity-100')} />\n    </div>\n\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? 'translate-y-3 opacity-0' : 'translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n  </div>\n);\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAOA,MAAM,YACJ;AAEK,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,wCAAwC,SAAS;AAAA,IAC/D,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,MAAK;AAAA,IACL,cAAY,WAAW,eAAe;AAAA,IACrC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAD,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAE,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,oBAAoB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,6BAA6B;AAAA,YAAA;AAAA,UAC1C;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEAC,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,OAAA,EAAI,WAAWD,SAAAA,GAAG,WAAW,WAAW,cAAc,aAAa,EAAA,CAAG,EAAA,CACzE;AAAA,sCAEC,OAAA,EACC,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,mBAAmB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,4BAA4B;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"Burger.cjs","sources":["../../../src/components/Navbar/Burger.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Burger menu component\n */\ninterface BurgerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Whether the burger menu is in active/open state */\n  isActive?: boolean;\n}\n\n/**\n * Shared styles for burger menu lines\n * Creates the classic hamburger menu appearance with smooth transitions\n */\nconst lineStyle =\n  'bg-text  absolute top-1/2 block h-[2px] w-8 transition duration-300';\n\n/**\n * Burger Menu Component\n *\n * An animated hamburger menu icon that transforms between closed and open states.\n * Commonly used in mobile navigation to toggle menu visibility.\n *\n * Features:\n * - Smooth CSS transitions between states (300ms duration)\n * - Accessible with proper ARIA attributes\n * - Screen reader support with descriptive labels\n * - Role-based interaction (switch role for toggle behavior)\n * - Responsive sizing (40px × 40px clickable area)\n * - Classic three-line hamburger design\n *\n * Animation States:\n * - Closed: Three horizontal parallel lines\n * - Open: Top and bottom lines rotate to form an X, middle line fades out\n *\n * Accessibility Features:\n * - `role=\"switch\"` indicates toggle behavior\n * - `aria-expanded` reflects current menu state\n * - `aria-checked` provides current selection state\n * - `aria-controls` links to controlled menu element\n * - Dynamic `aria-label` describes current action\n *\n * @example\n * Basic usage:\n * ```tsx\n * const [isMenuOpen, setIsMenuOpen] = useState(false);\n *\n * <Burger\n *   isActive={isMenuOpen}\n *   onClick={() => setIsMenuOpen(!isMenuOpen)}\n * />\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <Burger\n *   isActive={isMenuOpen}\n *   onClick={toggleMenu}\n *   className=\"lg:hidden\"\n *   style={{ zIndex: 1000 }}\n * />\n * ```\n *\n * @param props - Burger component props\n * @returns Animated burger menu JSX element\n */\nexport const Burger = ({\n  isActive = false,\n  className,\n  ...props\n}: BurgerProps) => (\n  <div\n    className={cn('relative mr-3 size-10 cursor-pointer', className)}\n    aria-checked={isActive}\n    aria-expanded={isActive}\n    aria-controls=\"mobile-menu\"\n    role=\"switch\"\n    aria-label={isActive ? 'Close menu' : 'Open menu'}\n    {...props}\n  >\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[-45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? '-translate-y-3 opacity-0' : '-translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n\n    <div>\n      <div className={cn(lineStyle, isActive ? 'opacity-0' : 'opacity-100')} />\n    </div>\n\n    <div>\n      <div\n        className={cn(lineStyle, isActive ? 'rotate-[45deg]' : 'rotate-0')}\n      />\n      <div\n        className={cn(\n          lineStyle,\n          isActive ? 'translate-y-3 opacity-0' : 'translate-y-2 opacity-100'\n        )}\n      />\n    </div>\n  </div>\n);\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;AAeA,MAAM,YACJ;AAoDK,MAAM,SAAS,CAAC;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,wCAAwC,SAAS;AAAA,IAC/D,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,iBAAc;AAAA,IACd,MAAK;AAAA,IACL,cAAY,WAAW,eAAe;AAAA,IACrC,GAAG;AAAA,IAEJ,UAAA;AAAA,MAAAD,gCAAC,OAAA,EACC,UAAA;AAAA,QAAAE,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,oBAAoB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEpEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,6BAA6B;AAAA,YAAA;AAAA,UAC1C;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEAC,2BAAAA,IAAC,OAAA,EACC,UAAAA,2BAAAA,IAAC,OAAA,EAAI,WAAWD,SAAAA,GAAG,WAAW,WAAW,cAAc,aAAa,EAAA,CAAG,EAAA,CACzE;AAAA,sCAEC,OAAA,EACC,UAAA;AAAA,QAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA,GAAG,WAAW,WAAW,mBAAmB,UAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnEC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD,SAAAA;AAAAA,cACT;AAAA,cACA,WAAW,4BAA4B;AAAA,YAAA;AAAA,UACzC;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AACF;;"}

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

@@ -1,7 +1,61 @@
 import { HTMLAttributes } from 'react';
+/**
+ * Props for the Burger menu component
+ */
 interface BurgerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the burger menu is in active/open state */
     isActive?: boolean;
 }
+/**
+ * Burger Menu Component
+ *
+ * An animated hamburger menu icon that transforms between closed and open states.
+ * Commonly used in mobile navigation to toggle menu visibility.
+ *
+ * Features:
+ * - Smooth CSS transitions between states (300ms duration)
+ * - Accessible with proper ARIA attributes
+ * - Screen reader support with descriptive labels
+ * - Role-based interaction (switch role for toggle behavior)
+ * - Responsive sizing (40px × 40px clickable area)
+ * - Classic three-line hamburger design
+ *
+ * Animation States:
+ * - Closed: Three horizontal parallel lines
+ * - Open: Top and bottom lines rotate to form an X, middle line fades out
+ *
+ * Accessibility Features:
+ * - `role="switch"` indicates toggle behavior
+ * - `aria-expanded` reflects current menu state
+ * - `aria-checked` provides current selection state
+ * - `aria-controls` links to controlled menu element
+ * - Dynamic `aria-label` describes current action
+ *
+ * @example
+ * Basic usage:
+ * ```tsx
+ * const [isMenuOpen, setIsMenuOpen] = useState(false);
+ *
+ * <Burger
+ *   isActive={isMenuOpen}
+ *   onClick={() => setIsMenuOpen(!isMenuOpen)}
+ * />
+ * ```
+ *
+ * @example
+ * With custom styling:
+ * ```tsx
+ * <Burger
+ *   isActive={isMenuOpen}
+ *   onClick={toggleMenu}
+ *   className="lg:hidden"
+ *   style={{ zIndex: 1000 }}
+ * />
+ * ```
+ *
+ * @param props - Burger component props
+ * @returns Animated burger menu JSX element
+ */
 export declare const Burger: ({ isActive, className, ...props }: BurgerProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Burger.d.ts.map