@intlayer/design-system 8.4.3 → 8.4.5

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

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\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';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-text\" {...props} />\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n  return ({ className, children, ...rest }: ComponentProps<'code'>) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      return (\n        <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n          {content}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as BundledLanguage;\n\n    return (\n      <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n        {content}\n      </Code>\n    );\n  };\n};\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n  <Table isRollable {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n  <th\n    className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n    {...props}\n  />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n  <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n  <td\n    className={cn('border-neutral-500/50 border-b p-4', className)}\n    {...props}\n  />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n  <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: ThRenderer,\n  tr: TrRenderer,\n  td: TdRenderer,\n  hr: HrRenderer,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n  isDarkMode?: boolean,\n  locale?: LocalesValues\n) => ({\n  ...staticMarkdownComponents,\n  code: createCodeRenderer(isDarkMode),\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode = false,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  // Generate components with props bound to them\n  const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\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';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-text\" {...props} />\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n  return ({ className, children, ...rest }: ComponentProps<'code'>) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      return (\n        <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n          {content}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as BundledLanguage;\n\n    return (\n      <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n        {content}\n      </Code>\n    );\n  };\n};\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n  <Table isRollable {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n  <th\n    className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n    {...props}\n  />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n  <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n  <td\n    className={cn('border-neutral-500/50 border-b p-4', className)}\n    {...props}\n  />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n  <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: ThRenderer,\n  tr: TrRenderer,\n  td: TdRenderer,\n  hr: HrRenderer,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n  isDarkMode?: boolean,\n  locale?: LocalesValues\n) => ({\n  ...staticMarkdownComponents,\n  code: createCodeRenderer(isDarkMode),\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode = false,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  // Generate components with props bound to them\n  const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1,3 @@
-import{MarkdownRenderer as e,baseMarkdownComponents as t,getIntlayerMarkdownOptions as n}from"./MarkDownRender.mjs";export{e as MarkdownRenderer,t as baseMarkdownComponents,n as getIntlayerMarkdownOptions};
+import { MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender.mjs";
+
+export { MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions };

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

@@ -1,2 +1,144 @@
-import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,className:i=``,isOverable:a=!1,isFocusable:o=!1,minHeight:s=0,...c})=>t(`div`,{"aria-hidden":o?r:void 0,tabIndex:o?0:void 0,role:o?`button`:`none`,className:e(`group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out`,r!==void 0&&!r&&`grid-rows-[1fr] overflow-x-auto`,a&&`hover:grid-rows-[1fr] hover:overflow-x-auto`,o&&`focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto`,i),...c,children:t(`div`,{style:{minHeight:`${s}px`},className:e(a&&`group-hover/height-smoother:visible`,o&&`group-focus/height-smoother:visible`,i),children:n})});export{n as MaxHeightSmoother};
+import { cn } from "../../utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/MaxHeightSmoother/index.tsx
+/**
+* MaxHeightSmoother Component
+*
+* A sophisticated container component that provides smooth height transitions
+* for collapsible content. Implemented entirely in CSS — no client-side
+* JavaScript, hooks, or event listeners — making it compatible with React
+* Server Components and Next.js App Router without `'use client'`.
+*
+* @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>
+*   <p>This content expands when you hover over the container.</p>
+* </MaxHeightSmoother>
+* ```
+*
+* @example
+* Focus-triggered expansion (keyboard accessible):
+* ```tsx
+* <MaxHeightSmoother isFocusable>
+*   <p>Tab to focus this container to expand the content.</p>
+* </MaxHeightSmoother>
+* ```
+*
+* @example
+* With minimum height for preview:
+* ```tsx
+* <MaxHeightSmoother isOverable minHeight={100} className="border rounded-lg p-4">
+*   <h3>Article Preview</h3>
+*   <p>This shows a preview of the content. Hover to see all.</p>
+* </MaxHeightSmoother>
+* ```
+*
+* @example
+* Combined hover and focus:
+* ```tsx
+* <MaxHeightSmoother isOverable isFocusable minHeight={80}>
+*   <h4>Interactive Card</h4>
+*   <p>Expands on both hover and keyboard focus.</p>
+* </MaxHeightSmoother>
+* ```
+*
+* ## Animation Strategies
+*
+* ### Strategy A — `grid-template-rows` (`minHeight === 0`)
+* Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.
+* Clean and performant; no fixed height ceiling required.
+* Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.
+*
+* ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)
+* When a visible preview floor is required, `grid-template-rows` produces a
+* "dead time" artifact: the track silently grows from 0 → minHeight before
+* anything visible happens, resulting in a perceived snap.
+*
+* `max-height` sidesteps this entirely — the transition starts from the
+* already-visible floor value, producing a single continuous expansion.
+*
+* The collapsed floor (`--mhs-collapsed`) and expanded ceiling
+* (`--mhs-expanded`) are injected as CSS variables via inline style,
+* NOT as `max-height` directly. This lets Tailwind own `max-height`
+* entirely, so `:hover` and `:focus-within` can override it freely
+* without fighting inline-style specificity.
+*
+* Both variables are consumer-overridable via CSS:
+* ```css
+* .my-container {
+*   --mhs-collapsed: 80px;
+*   --mhs-expanded: 1200px;
+* }
+* ```
+*
+* Trade-off: easing is applied over [minHeight → 3000px], not the real
+* content height. For typical content this is imperceptible. If pixel-perfect
+* easing is critical, use a JS-measured height with a controlled `isHidden`
+* prop and a `style={{ maxHeight }}` override instead.
+*
+* ## Interaction Modes
+*
+* 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)
+* 2. **Hover** — Set `isOverable` for mouse hover expansion
+* 3. **Focus** — Set `isFocusable` for keyboard focus expansion
+* 4. **Combined** — Use `isOverable` and `isFocusable` together
+*
+* ## Accessibility
+*
+* - `role="button"` and `tabIndex={0}` when `isFocusable` is true
+* - `aria-expanded` reflects the current disclosure state
+* - Focus expansion via `:focus-within` CSS pseudo-class
+* - `motion-reduce:transition-none` respects `prefers-reduced-motion`
+*
+* Note: because this component relies on CSS pseudo-classes for interaction,
+* keyboard toggle (Enter / Space) is not supported in uncontrolled mode.
+* For full keyboard toggle behaviour, manage `isHidden` externally and
+* wire an `onClick` / `onKeyDown` handler on the parent.
+*
+* ## Performance
+*
+* - Pure CSS animations — no JavaScript timers or DOM measurements
+* - No `'use client'` directive required
+* - Compatible with React Server Components and Next.js App Router
+* - GPU-accelerated transitions
+*
+* @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 behaviour
+* @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation
+* @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)
+* @param props.className - Additional CSS classes
+* @param props.style - Inline styles (CSS variable overrides will be merged)
+*
+* @returns A smooth height-transitioning container with configurable interaction modes
+*/
+const MaxHeightSmoother = ({ children, isHidden, className = "", isOverable = false, isFocusable = false, minHeight = 0, ...props }) => /* @__PURE__ */ jsx("div", {
+	"aria-hidden": isFocusable ? isHidden : void 0,
+	tabIndex: isFocusable ? 0 : void 0,
+	role: isFocusable ? "button" : "none",
+	className: cn("group/height-smoother relative grid w-full grid-rows-[0fr] overflow-hidden transition-all duration-700 ease-in-out", typeof isHidden !== "undefined" && !isHidden && "grid-rows-[1fr] overflow-x-auto", isOverable && "hover:grid-rows-[1fr] hover:overflow-x-auto", isFocusable && "focus-within:grid-rows-[1fr] focus-within:overflow-x-auto focus:grid-rows-[1fr] focus:overflow-x-auto", className),
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		style: { minHeight: `${minHeight}px` },
+		className: cn(isOverable && "group-hover/height-smoother:visible", isFocusable && "group-focus/height-smoother:visible", className),
+		children
+	})
+});
+
+//#endregion
+export { MaxHeightSmoother };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';\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. Implemented entirely in CSS — no client-side\n * JavaScript, hooks, or event listeners — making it compatible with React\n * Server Components and Next.js App Router without `'use client'`.\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>\n *   <p>This content expands when you hover over the container.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Focus-triggered expansion (keyboard accessible):\n * ```tsx\n * <MaxHeightSmoother isFocusable>\n *   <p>Tab to focus this container to expand the content.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother isOverable minHeight={100} className=\"border rounded-lg p-4\">\n *   <h3>Article Preview</h3>\n *   <p>This shows a preview of the content. Hover to see all.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus:\n * ```tsx\n * <MaxHeightSmoother isOverable isFocusable minHeight={80}>\n *   <h4>Interactive Card</h4>\n *   <p>Expands on both hover and keyboard focus.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * ## Animation Strategies\n *\n * ### Strategy A — `grid-template-rows` (`minHeight === 0`)\n * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.\n * Clean and performant; no fixed height ceiling required.\n * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.\n *\n * ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)\n * When a visible preview floor is required, `grid-template-rows` produces a\n * \"dead time\" artifact: the track silently grows from 0 → minHeight before\n * anything visible happens, resulting in a perceived snap.\n *\n * `max-height` sidesteps this entirely — the transition starts from the\n * already-visible floor value, producing a single continuous expansion.\n *\n * The collapsed floor (`--mhs-collapsed`) and expanded ceiling\n * (`--mhs-expanded`) are injected as CSS variables via inline style,\n * NOT as `max-height` directly. This lets Tailwind own `max-height`\n * entirely, so `:hover` and `:focus-within` can override it freely\n * without fighting inline-style specificity.\n *\n * Both variables are consumer-overridable via CSS:\n * ```css\n * .my-container {\n *   --mhs-collapsed: 80px;\n *   --mhs-expanded: 1200px;\n * }\n * ```\n *\n * Trade-off: easing is applied over [minHeight → 3000px], not the real\n * content height. For typical content this is imperceptible. If pixel-perfect\n * easing is critical, use a JS-measured height with a controlled `isHidden`\n * prop and a `style={{ maxHeight }}` override instead.\n *\n * ## Interaction Modes\n *\n * 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)\n * 2. **Hover** — Set `isOverable` for mouse hover expansion\n * 3. **Focus** — Set `isFocusable` for keyboard focus expansion\n * 4. **Combined** — Use `isOverable` and `isFocusable` together\n *\n * ## Accessibility\n *\n * - `role=\"button\"` and `tabIndex={0}` when `isFocusable` is true\n * - `aria-expanded` reflects the current disclosure state\n * - Focus expansion via `:focus-within` CSS pseudo-class\n * - `motion-reduce:transition-none` respects `prefers-reduced-motion`\n *\n * Note: because this component relies on CSS pseudo-classes for interaction,\n * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.\n * For full keyboard toggle behaviour, manage `isHidden` externally and\n * wire an `onClick` / `onKeyDown` handler on the parent.\n *\n * ## Performance\n *\n * - Pure CSS animations — no JavaScript timers or DOM measurements\n * - No `'use client'` directive required\n * - Compatible with React Server Components and Next.js App Router\n * - GPU-accelerated transitions\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 behaviour\n * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)\n * @param props.className - Additional CSS classes\n * @param props.style - Inline styles (CSS variable overrides will be merged)\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"],"mappings":"gFA+IA,MAAa,GAAiD,CAC5D,WACA,WACA,YAAY,GACZ,aAAa,GACb,cAAc,GACd,YAAY,EACZ,GAAG,KAEH,EAAC,MAAD,CACE,cAAa,EAAc,EAAW,IAAA,GACtC,SAAU,EAAc,EAAI,IAAA,GAC5B,KAAM,EAAc,SAAW,OAC/B,UAAW,EACT,qHACO,IAAa,QAClB,CAAC,GACD,kCACF,GAAc,8CACd,GACE,wGACF,EACD,CACD,GAAI,WAEJ,EAAC,MAAD,CACE,MAAO,CACL,UAAW,GAAG,EAAU,IACzB,CACD,UAAW,EACT,GAAc,sCACd,GAAe,sCACf,EACD,CAEA,WACG,CAAA,CACF,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { CSSProperties, FC, HTMLAttributes, ReactNode } from 'react';\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. Implemented entirely in CSS — no client-side\n * JavaScript, hooks, or event listeners — making it compatible with React\n * Server Components and Next.js App Router without `'use client'`.\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>\n *   <p>This content expands when you hover over the container.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Focus-triggered expansion (keyboard accessible):\n * ```tsx\n * <MaxHeightSmoother isFocusable>\n *   <p>Tab to focus this container to expand the content.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * With minimum height for preview:\n * ```tsx\n * <MaxHeightSmoother isOverable minHeight={100} className=\"border rounded-lg p-4\">\n *   <h3>Article Preview</h3>\n *   <p>This shows a preview of the content. Hover to see all.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * @example\n * Combined hover and focus:\n * ```tsx\n * <MaxHeightSmoother isOverable isFocusable minHeight={80}>\n *   <h4>Interactive Card</h4>\n *   <p>Expands on both hover and keyboard focus.</p>\n * </MaxHeightSmoother>\n * ```\n *\n * ## Animation Strategies\n *\n * ### Strategy A — `grid-template-rows` (`minHeight === 0`)\n * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.\n * Clean and performant; no fixed height ceiling required.\n * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.\n *\n * ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)\n * When a visible preview floor is required, `grid-template-rows` produces a\n * \"dead time\" artifact: the track silently grows from 0 → minHeight before\n * anything visible happens, resulting in a perceived snap.\n *\n * `max-height` sidesteps this entirely — the transition starts from the\n * already-visible floor value, producing a single continuous expansion.\n *\n * The collapsed floor (`--mhs-collapsed`) and expanded ceiling\n * (`--mhs-expanded`) are injected as CSS variables via inline style,\n * NOT as `max-height` directly. This lets Tailwind own `max-height`\n * entirely, so `:hover` and `:focus-within` can override it freely\n * without fighting inline-style specificity.\n *\n * Both variables are consumer-overridable via CSS:\n * ```css\n * .my-container {\n *   --mhs-collapsed: 80px;\n *   --mhs-expanded: 1200px;\n * }\n * ```\n *\n * Trade-off: easing is applied over [minHeight → 3000px], not the real\n * content height. For typical content this is imperceptible. If pixel-perfect\n * easing is critical, use a JS-measured height with a controlled `isHidden`\n * prop and a `style={{ maxHeight }}` override instead.\n *\n * ## Interaction Modes\n *\n * 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)\n * 2. **Hover** — Set `isOverable` for mouse hover expansion\n * 3. **Focus** — Set `isFocusable` for keyboard focus expansion\n * 4. **Combined** — Use `isOverable` and `isFocusable` together\n *\n * ## Accessibility\n *\n * - `role=\"button\"` and `tabIndex={0}` when `isFocusable` is true\n * - `aria-expanded` reflects the current disclosure state\n * - Focus expansion via `:focus-within` CSS pseudo-class\n * - `motion-reduce:transition-none` respects `prefers-reduced-motion`\n *\n * Note: because this component relies on CSS pseudo-classes for interaction,\n * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.\n * For full keyboard toggle behaviour, manage `isHidden` externally and\n * wire an `onClick` / `onKeyDown` handler on the parent.\n *\n * ## Performance\n *\n * - Pure CSS animations — no JavaScript timers or DOM measurements\n * - No `'use client'` directive required\n * - Compatible with React Server Components and Next.js App Router\n * - GPU-accelerated transitions\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 behaviour\n * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation\n * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)\n * @param props.className - Additional CSS classes\n * @param props.style - Inline styles (CSS variable overrides will be merged)\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+IA,MAAa,qBAAiD,EAC5D,UACA,UACA,YAAY,IACZ,aAAa,OACb,cAAc,OACd,YAAY,GACZ,GAAG,YAEH,oBAAC,OAAD;CACE,eAAa,cAAc,WAAW;CACtC,UAAU,cAAc,IAAI;CAC5B,MAAM,cAAc,WAAW;CAC/B,WAAW,GACT,sHACA,OAAO,aAAa,eAClB,CAAC,YACD,mCACF,cAAc,+CACd,eACE,yGACF,UACD;CACD,GAAI;WAEJ,oBAAC,OAAD;EACE,OAAO,EACL,WAAW,GAAG,UAAU,KACzB;EACD,WAAW,GACT,cAAc,uCACd,eAAe,uCACf,UACD;EAEA;EACG;CACF"}

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

@@ -1,2 +1,19 @@
-import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=({children:n,isHidden:r,minWidth:i=0,align:a=`left`,className:o,...s})=>t(`div`,{className:e(`relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out`,r?``:`grid-cols-[1fr]`,o),"aria-hidden":r,inert:r?!0:void 0,...s,children:t(`div`,{style:{minWidth:`${i}px`},className:e(a===`right`&&`ml-auto`),children:n})});export{n as MaxWidthSmoother};
+import { cn } from "../../utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/MaxWidthSmoother/index.tsx
+const MaxWidthSmoother = ({ children, isHidden, minWidth = 0, align = "left", className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out", isHidden ? "" : "grid-cols-[1fr]", className),
+	"aria-hidden": isHidden,
+	inert: isHidden ? true : void 0,
+	...props,
+	children: /* @__PURE__ */ jsx("div", {
+		style: { minWidth: `${minWidth}px` },
+		className: cn(align === "right" && "ml-auto"),
+		children
+	})
+});
+
+//#endregion
+export { MaxWidthSmoother };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\ntype Align = 'left' | 'right';\n\ntype MaxWidthSmootherProps = HTMLAttributes<HTMLDivElement> & {\n  isHidden: boolean;\n  minWidth?: number;\n  align?: Align;\n};\n\nexport const MaxWidthSmoother = ({\n  children,\n  isHidden,\n  minWidth = 0,\n  align = 'left',\n  className,\n  ...props\n}: MaxWidthSmootherProps) => (\n  <div\n    className={cn(\n      'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n      isHidden ? '' : 'grid-cols-[1fr]',\n      className\n    )}\n    aria-hidden={isHidden}\n    inert={isHidden ? true : undefined}\n    {...props}\n  >\n    <div\n      style={{\n        minWidth: `${minWidth}px`,\n      }}\n      className={cn(align === 'right' && 'ml-auto')}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"mappings":"gFAWA,MAAa,GAAoB,CAC/B,WACA,WACA,WAAW,EACX,QAAQ,OACR,YACA,GAAG,KAEH,EAAC,MAAD,CACE,UAAW,EACT,mHACA,EAAW,GAAK,kBAChB,EACD,CACD,cAAa,EACb,MAAO,EAAW,GAAO,IAAA,GACzB,GAAI,WAEJ,EAAC,MAAD,CACE,MAAO,CACL,SAAU,GAAG,EAAS,IACvB,CACD,UAAW,EAAG,IAAU,SAAW,UAAU,CAE5C,WACG,CAAA,CACF,CAAA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/MaxWidthSmoother/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\n\ntype Align = 'left' | 'right';\n\ntype MaxWidthSmootherProps = HTMLAttributes<HTMLDivElement> & {\n  isHidden: boolean;\n  minWidth?: number;\n  align?: Align;\n};\n\nexport const MaxWidthSmoother = ({\n  children,\n  isHidden,\n  minWidth = 0,\n  align = 'left',\n  className,\n  ...props\n}: MaxWidthSmootherProps) => (\n  <div\n    className={cn(\n      'relative grid h-full grid-cols-[0fr] overflow-x-hidden overflow-y-hidden transition-all duration-500 ease-in-out',\n      isHidden ? '' : 'grid-cols-[1fr]',\n      className\n    )}\n    aria-hidden={isHidden}\n    inert={isHidden ? true : undefined}\n    {...props}\n  >\n    <div\n      style={{\n        minWidth: `${minWidth}px`,\n      }}\n      className={cn(align === 'right' && 'ml-auto')}\n    >\n      {children}\n    </div>\n  </div>\n);\n"],"mappings":";;;;AAWA,MAAa,oBAAoB,EAC/B,UACA,UACA,WAAW,GACX,QAAQ,QACR,WACA,GAAG,YAEH,oBAAC,OAAD;CACE,WAAW,GACT,oHACA,WAAW,KAAK,mBAChB,UACD;CACD,eAAa;CACb,OAAO,WAAW,OAAO;CACzB,GAAI;WAEJ,oBAAC,OAAD;EACE,OAAO,EACL,UAAU,GAAG,SAAS,KACvB;EACD,WAAW,GAAG,UAAU,WAAW,UAAU;EAE5C;EACG;CACF"}

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

@@ -1,2 +1,202 @@
-"use client";import{cn as e}from"../../utils/cn.mjs";import{useGetElementOrWindow as t}from"../../hooks/useGetElementOrWindow.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{Container as r}from"../Container/index.mjs";import{Button as i,ButtonColor as a,ButtonSize as o,ButtonVariant as s}from"../Button/Button.mjs";import{H3 as c}from"../Headers/index.mjs";import{useEffect as l}from"react";import{cva as u}from"class-variance-authority";import{X as d}from"lucide-react";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{motion as h}from"framer-motion";import{createPortal as g}from"react-dom";let _=function(e){return e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.UNSET=`unset`,e}({});const v=u(`flex cursor-default flex-col overflow-hidden shadow-sm`,{variants:{size:{sm:`h-auto max-h-[30vh] w-[95vw] max-w-xl`,md:`h-auto max-h-[50vh] w-[95vw] max-w-xl`,lg:`h-auto max-h-[70vh] w-[95vw] max-w-4xl`,xl:`h-auto max-h-[95vh] w-[95vw] max-w-6xl`,unset:`h-auto max-h-[95vh] w-[95vw]`}},defaultVariants:{size:`unset`}}),y={none:`p-0`,sm:`px-2 py-4`,md:`px-4 py-6`,lg:`px-6 py-8`,xl:`px-8 py-10`,"2xl":`px-10 py-12`},b=h.create(r),x=({children:r,isOpen:u,container:x,onClose:S,hasCloseButton:C=!1,title:w,size:T=_.MD,className:E,isScrollable:D=!1,disableScroll:O=!0,padding:k=`none`,...A})=>{let j=t(x);if(n({key:`modal`,disableScroll:u&&O}),l(()=>{let e=e=>{e.key===`Escape`&&u&&S&&S()};return document.addEventListener(`keydown`,e),()=>{document.removeEventListener(`keydown`,e)}},[u,S]),!j)return p(f,{});let M=!!w,N=y[k||`none`];return g(p(h.div,{className:`invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur`,animate:u?`visible`:`invisible`,variants:{visible:{opacity:1,visibility:`visible`,transition:{duration:.1,when:`beforeChildren`}},invisible:{opacity:0,visibility:`hidden`,transition:{duration:.1,when:`afterChildren`}}},onClick:e=>{e.stopPropagation(),S?.()},"aria-hidden":!u,children:m(b,{onClick:e=>e.stopPropagation(),initial:{scale:u?.5:1},animate:{scale:u?1:.5},transition:{duration:.3},className:v({size:T,className:E}),role:`dialog`,"aria-modal":!0,roundedSize:`4xl`,padding:`none`,...A,children:[m(`div`,{className:e(`relative flex-none px-4 pt-4`,C&&M?`flex items-start`:C?`flex justify-end`:M?`items-center`:`hidden`),children:[M&&p(c,{className:`mb-2 ml-1 flex items-center justify-center font-bold text-lg`,children:w}),C&&p(i,{variant:s.HOVERABLE,color:a.TEXT,label:`Close modal`,className:`ml-auto`,onClick:e=>{e.stopPropagation(),S?.()},Icon:d,size:o.ICON_MD})]}),p(`div`,{className:e(`flex min-h-0 w-full flex-1 flex-col`,D===!0&&`overflow-auto`,D===`y`&&`overflow-y-auto overflow-x-hidden`,D===`x`&&`overflow-x-auto overflow-y-hidden`,!D&&`overflow-visible`),children:p(`div`,{className:e(`flex h-full w-full flex-1 flex-col`,N),children:r})})]})}),j)};export{x as Modal,_ as ModalSize};
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { Container } from "../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { H3 } from "../Headers/index.mjs";
+import { useEffect } from "react";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { createPortal } from "react-dom";
+
+//#region src/components/Modal/Modal.tsx
+/**
+* Enumeration of available modal sizes
+*/
+let ModalSize = /* @__PURE__ */ function(ModalSize) {
+	ModalSize["SM"] = "sm";
+	ModalSize["MD"] = "md";
+	ModalSize["LG"] = "lg";
+	ModalSize["XL"] = "xl";
+	ModalSize["UNSET"] = "unset";
+	return ModalSize;
+}({});
+const modalVariants = cva("flex cursor-default flex-col overflow-hidden shadow-sm", {
+	variants: { size: {
+		sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
+		md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",
+		lg: "h-auto max-h-[70vh] w-[95vw] max-w-4xl",
+		xl: "h-auto max-h-[95vh] w-[95vw] max-w-6xl",
+		unset: "h-auto max-h-[95vh] w-[95vw]"
+	} },
+	defaultVariants: { size: "unset" }
+});
+const contentPaddingVariants = {
+	none: "p-0",
+	sm: "px-2 py-4",
+	md: "px-4 py-6",
+	lg: "px-6 py-8",
+	xl: "px-8 py-10",
+	"2xl": "px-10 py-12"
+};
+const MotionModal = motion.create(Container);
+/**
+* Modal Component
+*
+* A highly customizable modal dialog component with portal rendering, Framer Motion animations,
+* and comprehensive accessibility features. Supports multiple size variants and scroll management.
+*
+* Features:
+* - Portal rendering to any container element (defaults to document.body)
+* - Smooth animations with Framer Motion
+* - Size variants: SM, MD, LG, XL, UNSET with responsive sizing
+* - Optional title and close button
+* - Background scroll prevention
+* - Click-outside-to-close functionality
+* - Full accessibility support with ARIA attributes
+* - Keyboard navigation support (ESC to close)
+* - Extensible styling with Container props
+*
+* @example
+* Basic usage:
+* ```jsx
+* <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+*   <p>Modal content goes here</p>
+* </Modal>
+* ```
+*
+* @example
+* With title and close button:
+* ```jsx
+* <Modal
+*   isOpen={isOpen}
+*   onClose={onClose}
+*   title="Confirm Action"
+*   hasCloseButton
+*   size={ModalSize.LG}
+* >
+*   <div>
+*     <p>Are you sure you want to continue?</p>
+*     <Button onClick={onConfirm}>Confirm</Button>
+*   </div>
+* </Modal>
+* ```
+*
+* @example
+* Custom container and styling:
+* ```jsx
+* <Modal
+*   isOpen={isOpen}
+*   onClose={onClose}
+*   container={customContainer}
+*   background="card"
+*   padding="lg"
+*   border="default"
+* >
+*   Content with custom styling
+* </Modal>
+* ```
+*
+* Accessibility Notes:
+* - Modal receives focus when opened
+* - Background content is hidden from screen readers when modal is open
+* - ESC key closes modal (handled by browser for role="dialog")
+* - Click outside modal closes it
+* - Close button has descriptive label for screen readers
+*
+* @param props - Modal component props
+* @returns JSX element rendered via createPortal
+*/
+const Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, title, size = ModalSize.MD, className, isScrollable = false, disableScroll = true, padding = "none", ...props }) => {
+	const containerElement = useGetElementOrWindow(container);
+	useScrollBlockage({
+		key: "modal",
+		disableScroll: isOpen && disableScroll
+	});
+	useEffect(() => {
+		const handleEscape = (event) => {
+			if (event.key === "Escape" && isOpen && onClose) onClose();
+		};
+		document.addEventListener("keydown", handleEscape);
+		return () => {
+			document.removeEventListener("keydown", handleEscape);
+		};
+	}, [isOpen, onClose]);
+	if (!containerElement) return /* @__PURE__ */ jsx(Fragment$1, {});
+	const hasTitle = Boolean(title);
+	const contentPaddingClass = contentPaddingVariants[padding || "none"];
+	return createPortal(/* @__PURE__ */ jsx(motion.div, {
+		className: "invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur",
+		animate: isOpen ? "visible" : "invisible",
+		variants: {
+			visible: {
+				opacity: 1,
+				visibility: "visible",
+				transition: {
+					duration: .1,
+					when: "beforeChildren"
+				}
+			},
+			invisible: {
+				opacity: 0,
+				visibility: "hidden",
+				transition: {
+					duration: .1,
+					when: "afterChildren"
+				}
+			}
+		},
+		onClick: (e) => {
+			e.stopPropagation();
+			onClose?.();
+		},
+		"aria-hidden": !isOpen,
+		children: /* @__PURE__ */ jsxs(MotionModal, {
+			onClick: (e) => e.stopPropagation(),
+			initial: { scale: isOpen ? .5 : 1 },
+			animate: { scale: isOpen ? 1 : .5 },
+			transition: { duration: .3 },
+			className: modalVariants({
+				size,
+				className
+			}),
+			role: "dialog",
+			"aria-modal": true,
+			roundedSize: "4xl",
+			padding: "none",
+			...props,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("relative flex-none px-4 pt-4", hasCloseButton && hasTitle ? `flex items-start` : hasCloseButton ? `flex justify-end` : hasTitle ? `items-center` : `hidden`),
+				children: [hasTitle && /* @__PURE__ */ jsx(H3, {
+					className: "mb-2 ml-1 flex items-center justify-center font-bold text-lg",
+					children: title
+				}), hasCloseButton && /* @__PURE__ */ jsx(Button, {
+					variant: ButtonVariant.HOVERABLE,
+					color: ButtonColor.TEXT,
+					label: "Close modal",
+					className: "ml-auto",
+					onClick: (e) => {
+						e.stopPropagation();
+						onClose?.();
+					},
+					Icon: X,
+					size: ButtonSize.ICON_MD
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: cn("flex min-h-0 w-full flex-1 flex-col", isScrollable === true && "overflow-auto", isScrollable === "y" && "overflow-y-auto overflow-x-hidden", isScrollable === "x" && "overflow-x-auto overflow-y-hidden", !isScrollable && "overflow-visible"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("flex h-full w-full flex-1 flex-col", contentPaddingClass),
+					children
+				})
+			})]
+		})
+	}), containerElement);
+};
+
+//#endregion
+export { Modal, ModalSize };
 //# sourceMappingURL=Modal.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, 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  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?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\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  'flex cursor-default flex-col overflow-hidden shadow-sm',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-4xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={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  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={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\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex h-full w-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":"gpBAgBA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,MAAA,cACD,CA4BD,MAAM,EAAgB,EACpB,yDACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,wCACJ,GAAI,wCACJ,GAAI,yCACJ,GAAI,yCACJ,MAAO,+BACR,CACF,CACD,gBAAiB,CACf,KAAM,QACP,CACF,CACF,CAGK,EAAyB,CAC7B,KAAM,MACN,GAAI,YACJ,GAAI,YACJ,GAAI,YACJ,GAAI,aACJ,MAAO,cACR,CAEK,EAAcA,EAAE,OAAO,EAAU,CAqE1B,GAAyB,CACpC,WACA,SACA,YACA,UACA,iBAAiB,GACjB,QACA,OAAO,EAAU,GACjB,YACA,eAAe,GACf,gBAAgB,GAChB,UAAU,OACV,GAAG,KACC,CACJ,IAAM,EAAmB,EAAsB,EAAU,CAgBzD,GAdA,EAAkB,CAAE,IAAK,QAAS,cAAe,GAAU,EAAe,CAAC,CAE3E,MAAgB,CACd,IAAM,EAAgB,GAAyB,CACzC,EAAM,MAAQ,UAAY,GAAU,GACtC,GAAS,EAIb,OADA,SAAS,iBAAiB,UAAW,EAAa,KACrC,CACX,SAAS,oBAAoB,UAAW,EAAa,GAEtD,CAAC,EAAQ,EAAQ,CAAC,CAEjB,CAAC,EAAkB,OAAO,EAAA,EAAA,EAAK,CAAA,CAEnC,IAAM,EAAW,EAAQ,EAGnB,EACJ,EACG,GAAmD,QAGxD,OAAO,EACL,EAACA,EAAE,IAAH,CACE,UAAU,6IACV,QAAS,EAAS,UAAY,YAC9B,SAAU,CACR,QAAS,CACP,QAAS,EACT,WAAY,UACZ,WAAY,CAAE,SAAU,GAAK,KAAM,iBAAkB,CACtD,CACD,UAAW,CACT,QAAS,EACT,WAAY,SACZ,WAAY,CAAE,SAAU,GAAK,KAAM,gBAAiB,CACrD,CACF,CACD,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,KAAW,EAEb,cAAa,CAAC,WAEd,EAAC,EAAD,CACE,QAAU,GAAM,EAAE,iBAAiB,CACnC,QAAS,CAAE,MAAO,EAAS,GAAM,EAAG,CACpC,QAAS,CAAE,MAAO,EAAS,EAAI,GAAK,CACpC,WAAY,CAAE,SAAU,GAAK,CAC7B,UAAW,EAAc,CAAE,OAAM,YAAW,CAAC,CAC7C,KAAK,SACL,aAAA,GACA,YAAY,MAEZ,QAAQ,OACR,GAAI,WAXN,CAcE,EAAC,MAAD,CACE,UAAW,EACT,+BACA,GAAkB,EACd,mBACA,EACE,mBACA,EACE,eACA,SACT,UAVH,CAYG,GACC,EAAC,EAAD,CAAI,UAAU,wEACX,EACE,CAAA,CAEN,GACC,EAAC,EAAD,CACE,QAAS,EAAc,UACvB,MAAO,EAAY,KACnB,MAAM,cACN,UAAU,UACV,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,KAAW,EAEb,KAAM,EACN,KAAM,EAAW,QACjB,CAAA,CAEA,GAGN,EAAC,MAAD,CACE,UAAW,EACT,sCAEA,IAAiB,IAAQ,gBACzB,IAAiB,KAAO,oCACxB,IAAiB,KAAO,oCACxB,CAAC,GAAgB,mBAClB,UAID,EAAC,MAAD,CACE,UAAW,EACT,qCACA,EACD,CAEA,WACG,CAAA,CACF,CAAA,CACM,GACR,CAAA,CACR,EACD"}
+{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, 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  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?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\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  'flex cursor-default flex-col overflow-hidden shadow-sm',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-4xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={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  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={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\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div\n            className={cn(\n              'flex h-full w-full flex-1 flex-col',\n              contentPaddingClass\n            )}\n          >\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,YAAL;AACL;AACA;AACA;AACA;AACA;;KACD;AA4BD,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;AAGD,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAGb,WAAS,iBAAiB,WAAW,aAAa;AAClD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,kCAAK;CAEnC,MAAM,WAAW,QAAQ,MAAM;CAG/B,MAAM,sBACJ,uBACG,WAAmD;AAGxD,QAAO,aACL,oBAACA,OAAE,KAAH;EACE,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC,aAAD;GACE,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IAAE;IAAM;IAAW,CAAC;GAC7C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;aAXN,CAcE,qBAAC,OAAD;IACE,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;cAVH,CAYG,YACC,oBAAC,IAAD;KAAI,WAAU;eACX;KACE,GAEN,kBACC,oBAAC,QAAD;KACE,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAM,WAAW;KACjB,EAEA;OAGN,oBAAC,OAAD;IACE,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,mBAClB;cAID,oBAAC,OAAD;KACE,WAAW,GACT,sCACA,oBACD;KAEA;KACG;IACF,EACM;;EACR,GACR,iBACD"}

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

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

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

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