@keboola/design 16.1.0 → 17.1.0

package/dist/{MermaidDiagram-E3azndPk.js.map → MermaidDiagram-l83gco3r.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MermaidDiagram-E3azndPk.js","names":[],"sources":["../src/blocks/MermaidDiagram/peleTheme.ts","../src/blocks/MermaidDiagram/MermaidDiagram.tsx"],"sourcesContent":["import type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { createVegaColorResolver, SERIES_TOKENS, tierTwoColour } from '../../vega/vegaTokens';\n\nexport const DIAGRAM_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * The `--pele-*` declarations for one scheme, as a `style` attribute fragment.\n *\n * - Resolved colours, not `var()` refs: an exported SVG or PNG has no page CSS to read.\n * - One `getComputedStyle` snapshot per call; never hoist — values follow scheme and brand.\n * - Series 6–8 are the charts' second tier, as in Flint charts.\n */\nexport const peleThemeStyle = (scheme: ResolvedColorScheme, from?: Element | null): string => {\n  const token = createVegaColorResolver(scheme, from);\n  const series = SERIES_TOKENS.map((name) => token(name));\n\n  const vars: Record<string, string> = {\n    bg: token('card'),\n    fg: token('foreground'),\n    muted: token('muted-foreground'),\n    line: token('muted-foreground'),\n    surface: token('muted'),\n    'surface-alt': token('accent'),\n    border: token('border'),\n    accent: token('primary'),\n    critical: token('destructive'),\n    error: token('destructive'),\n    font: DIAGRAM_FONT,\n    radius: '6px',\n  };\n  [...series, ...series.map((colour) => tierTwoColour(colour, scheme))]\n    .slice(0, 8)\n    .forEach((colour, index) => {\n      vars[`series-${index + 1}`] = colour;\n    });\n\n  return Object.entries(vars)\n    .map(([name, value]) => `--pele-${name}:${value}`)\n    .join(';');\n};\n","import { useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { DiagramType, IconResolver } from 'pele/lazy';\nimport { detectType, load, PeleError, registered, render } from 'pele/lazy';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { useThemeAttributes } from '../../components/ThemeProvider/useThemeAttributes';\nimport { ZoomableSvg } from '../../components/ZoomableSvg';\nimport { DiagramSkeleton } from '../DiagramShared/DiagramSkeleton';\nimport { DiagramSource } from '../DiagramShared/DiagramSource';\nimport { createSvgCache, diagramCacheKey } from '../DiagramShared/svgCache';\nimport { makeResponsive } from '../DiagramShared/svgTransforms';\n\nimport { DIAGRAM_FONT, peleThemeStyle } from './peleTheme';\n\ntype IconPack = {\n  icons: Record<string, { body: string }>;\n  aliases?: Record<string, { parent: string }>;\n};\n\nlet lucidePack: IconPack | null = null;\nlet lucidePromise: Promise<void> | null = null;\n\n// The pack is a lazy local chunk, so no CDN fetch and it works under strict CSP.\nconst loadLucidePack = (): Promise<void> => {\n  lucidePromise ??= import('@iconify-json/lucide/icons.json')\n    .then((mod) => {\n      lucidePack = mod.default;\n    })\n    .catch((err: unknown) => {\n      lucidePromise = null;\n      throw err;\n    });\n  return lucidePromise;\n};\n\n// `lucide:name` refs resolve to the pack's 24×24 stroke body, which is the frame Pele draws.\nconst lucideIcon: IconResolver = (ref) => {\n  if (!lucidePack || !ref.startsWith('lucide:')) return null;\n  const name = ref.slice('lucide:'.length);\n  return (lucidePack.icons[name] ?? lucidePack.icons[lucidePack.aliases?.[name]?.parent ?? ''])\n    ?.body;\n};\n\nconst usesLucide = (code: string): boolean => code.includes('lucide:');\n\nconst diagramType = (code: string): DiagramType | null => {\n  try {\n    return detectType(code);\n  } catch (err) {\n    console.debug('[MermaidDiagram] no diagram type detected:', err);\n    return null;\n  }\n};\n\n/**\n * Whether a render error means \"ran out of input\" rather than \"bad syntax\".\n *\n * - A syntax error at the last non-blank character or past it, as in every streaming frame.\n * - No type yet and at most one line after the preamble: the header itself is still arriving.\n * - Lower bound only: a real error on the last character shows as truncated until the grace period.\n */\n// Closed front matter and `%%` directive or comment lines before the type header.\nconst PREAMBLE = /^(?:\\s*---\\n[\\s\\S]*?\\n---[^\\S\\n]*(?:\\n|$)|[^\\S\\n]*%%.*(?:\\n|$)|\\s*\\n)*/;\n\nconst isHeaderArriving = (code: string): boolean => {\n  const rest = code.replace(PREAMBLE, '');\n  // Front matter whose closing `---` has not arrived yet.\n  if (/^\\s*---\\n/.test(rest)) return true;\n  return !rest.trim().includes('\\n');\n};\n\nconst isTruncatedDiagram = (err: unknown, code: string): boolean => {\n  if (!(err instanceof PeleError)) return false;\n  if (err.code === 'unsupported-diagram') return isHeaderArriving(code);\n  if (err.code !== 'syntax') return false;\n  const tail = code\n    .split('\\n')\n    .slice(err.line - 1)\n    .join('\\n');\n  return tail.slice(Math.max(err.column - 1, 0)).trim().length <= 1;\n};\n\n// Longer than the gap between streamed chunks, short enough for an abandoned stream.\nconst TRUNCATION_GRACE_MS = 2_000;\n\nconst svgCache = createSvgCache();\n\n// Every streamed frame shares one theme, so its palette is read once per theme key.\nlet lastTheme = { key: '', style: '' };\nconst themeStyleFor = (themeKey: string, scheme: ResolvedColorScheme, scope: Element | null) => {\n  if (lastTheme.key !== themeKey) {\n    lastTheme = { key: themeKey, style: peleThemeStyle(scheme, scope) };\n  }\n  return lastTheme.style;\n};\n\ntype Outcome =\n  | { svg: string }\n  | { error: unknown; truncated: boolean }\n  | { loading: DiagramType | null };\n\ntype Theme = { key: string; scheme: ResolvedColorScheme; scope: Element | null };\n\n/**\n * The diagram for `code`, rendered synchronously.\n *\n * 1. A cached SVG for this code and theme.\n * 2. `loading` while the diagram type's chunk or the icon pack is not loaded yet.\n * 3. A fresh render, or the error Pele threw.\n */\nconst renderNow = (code: string, theme: Theme): Outcome => {\n  const cacheKey = diagramCacheKey(code, theme.key);\n  const cached = svgCache.get(cacheKey);\n  if (cached) return { svg: cached };\n  const type = diagramType(code);\n  if ((type !== null && !registered(type)) || (usesLucide(code) && lucidePack === null)) {\n    return { loading: type };\n  }\n  try {\n    const { svg } = render(code, { fontFamily: DIAGRAM_FONT, icons: lucideIcon });\n    const themed = makeResponsive(svg, themeStyleFor(theme.key, theme.scheme, theme.scope));\n    svgCache.set(cacheKey, themed);\n    return { svg: themed };\n  } catch (error) {\n    return { error, truncated: isTruncatedDiagram(error, code) };\n  }\n};\n\ntype Props = {\n  /** Mermaid source. */\n  code: string;\n  /** Extra toolbar controls forwarded to `ZoomableSvg`; receives the sanitized SVG. */\n  renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const MermaidDiagram = ({ code, renderActions }: Props) => {\n  // - Scheme and key come from one read, so a palette is never cached under the wrong scheme.\n  // - `scope` is the element tokens are read off (`null` = `<html>`) and is part of `themeKey`.\n  const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();\n  const cacheKey = diagramCacheKey(code, themeKey);\n\n  const [state, setState] = useState(() => ({\n    key: cacheKey,\n    outcome: renderNow(code, { key: themeKey, scheme, scope }),\n  }));\n  const [gaveUpKey, setGaveUpKey] = useState<string | null>(null);\n\n  // Render-phase reset avoids a one-frame flash of the previous diagram.\n  if (state.key !== cacheKey) {\n    setState({ key: cacheKey, outcome: renderNow(code, { key: themeKey, scheme, scope }) });\n  }\n  const { outcome } = state;\n\n  useEffect(() => {\n    if (!('loading' in outcome)) return;\n    let cancelled = false;\n    Promise.all([load(outcome.loading), usesLucide(code) ? loadLucidePack() : null])\n      .then(() => renderNow(code, { key: themeKey, scheme, scope }))\n      .catch((error: unknown) => ({ error, truncated: false }))\n      .then((next) => {\n        if (!cancelled) setState({ key: cacheKey, outcome: next });\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [outcome, code, cacheKey, themeKey, scheme, scope]);\n\n  useEffect(() => {\n    if (!('error' in outcome)) return;\n    if (!outcome.truncated) {\n      console.error('[MermaidDiagram] render failed:', outcome.error);\n      return;\n    }\n    // A streaming diagram is truncated at almost every frame; one that stops arriving shows its source.\n    const timer = setTimeout(() => setGaveUpKey(cacheKey), TRUNCATION_GRACE_MS);\n    return () => clearTimeout(timer);\n  }, [outcome, cacheKey]);\n\n  if ('svg' in outcome) {\n    return (\n      <ZoomableSvg\n        key={code}\n        html={outcome.svg}\n        copyText={`\\`\\`\\`mermaid\\n${code}\\n\\`\\`\\``}\n        className=\"tw:my-3\"\n        renderActions={renderActions}\n      />\n    );\n  }\n\n  if ('error' in outcome && (!outcome.truncated || gaveUpKey === cacheKey)) {\n    return <DiagramSource code={code} />;\n  }\n\n  return <DiagramSkeleton />;\n};\n"],"mappings":"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"}
+{"version":3,"file":"MermaidDiagram-l83gco3r.js","names":[],"sources":["../src/blocks/MermaidDiagram/peleTheme.ts","../src/blocks/MermaidDiagram/MermaidDiagram.tsx"],"sourcesContent":["import type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { createVegaColorResolver, SERIES_TOKENS, tierTwoColour } from '../../vega/vegaTokens';\n\nexport const DIAGRAM_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * The `--pele-*` declarations for one scheme, as a `style` attribute fragment.\n *\n * - Resolved colours, not `var()` refs: an exported SVG or PNG has no page CSS to read.\n * - One `getComputedStyle` snapshot per call; never hoist — values follow scheme and brand.\n * - Series 6–8 are the charts' second tier, as in Flint charts.\n */\nexport const peleThemeStyle = (scheme: ResolvedColorScheme, from?: Element | null): string => {\n  const token = createVegaColorResolver(scheme, from);\n  const series = SERIES_TOKENS.map((name) => token(name));\n\n  const vars: Record<string, string> = {\n    bg: token('card'),\n    fg: token('foreground'),\n    muted: token('muted-foreground'),\n    line: token('muted-foreground'),\n    surface: token('muted'),\n    'surface-alt': token('accent'),\n    border: token('border'),\n    accent: token('primary'),\n    critical: token('destructive'),\n    error: token('destructive'),\n    font: DIAGRAM_FONT,\n    radius: '6px',\n  };\n  [...series, ...series.map((colour) => tierTwoColour(colour, scheme))]\n    .slice(0, 8)\n    .forEach((colour, index) => {\n      vars[`series-${index + 1}`] = colour;\n    });\n\n  return Object.entries(vars)\n    .map(([name, value]) => `--pele-${name}:${value}`)\n    .join(';');\n};\n","import { useEffect, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { DiagramType, IconResolver } from 'pele/lazy';\nimport { detectType, load, PeleError, registered, render } from 'pele/lazy';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { useThemeAttributes } from '../../components/ThemeProvider/useThemeAttributes';\nimport { ZoomableSvg } from '../../components/ZoomableSvg';\nimport { DiagramSkeleton } from '../DiagramShared/DiagramSkeleton';\nimport { DiagramSource } from '../DiagramShared/DiagramSource';\nimport { createSvgCache, diagramCacheKey } from '../DiagramShared/svgCache';\nimport { makeResponsive } from '../DiagramShared/svgTransforms';\n\nimport { DIAGRAM_FONT, peleThemeStyle } from './peleTheme';\n\ntype IconPack = {\n  icons: Record<string, { body: string }>;\n  aliases?: Record<string, { parent: string }>;\n};\n\nlet lucidePack: IconPack | null = null;\nlet lucidePromise: Promise<void> | null = null;\n\n// The pack is a lazy local chunk, so no CDN fetch and it works under strict CSP.\nconst loadLucidePack = (): Promise<void> => {\n  lucidePromise ??= import('@iconify-json/lucide/icons.json')\n    .then((mod) => {\n      lucidePack = mod.default;\n    })\n    .catch((err: unknown) => {\n      lucidePromise = null;\n      throw err;\n    });\n  return lucidePromise;\n};\n\n// `lucide:name` refs resolve to the pack's 24×24 stroke body, which is the frame Pele draws.\nconst lucideIcon: IconResolver = (ref) => {\n  if (!lucidePack || !ref.startsWith('lucide:')) return null;\n  const name = ref.slice('lucide:'.length);\n  return (lucidePack.icons[name] ?? lucidePack.icons[lucidePack.aliases?.[name]?.parent ?? ''])\n    ?.body;\n};\n\nconst usesLucide = (code: string): boolean => code.includes('lucide:');\n\nconst diagramType = (code: string): DiagramType | null => {\n  try {\n    return detectType(code);\n  } catch (err) {\n    console.debug('[MermaidDiagram] no diagram type detected:', err);\n    return null;\n  }\n};\n\n/**\n * Whether a render error means \"ran out of input\" rather than \"bad syntax\".\n *\n * - A syntax error at the last non-blank character or past it, as in every streaming frame.\n * - No type yet and at most one line after the preamble: the header itself is still arriving.\n * - Lower bound only: a real error on the last character shows as truncated until the grace period.\n */\n// Closed front matter and `%%` directive or comment lines before the type header.\nconst PREAMBLE = /^(?:\\s*---\\n[\\s\\S]*?\\n---[^\\S\\n]*(?:\\n|$)|[^\\S\\n]*%%.*(?:\\n|$)|\\s*\\n)*/;\n\nconst isHeaderArriving = (code: string): boolean => {\n  const rest = code.replace(PREAMBLE, '');\n  // Front matter whose closing `---` has not arrived yet.\n  if (/^\\s*---\\n/.test(rest)) return true;\n  return !rest.trim().includes('\\n');\n};\n\nconst isTruncatedDiagram = (err: unknown, code: string): boolean => {\n  if (!(err instanceof PeleError)) return false;\n  if (err.code === 'unsupported-diagram') return isHeaderArriving(code);\n  if (err.code !== 'syntax') return false;\n  const tail = code\n    .split('\\n')\n    .slice(err.line - 1)\n    .join('\\n');\n  return tail.slice(Math.max(err.column - 1, 0)).trim().length <= 1;\n};\n\n// Longer than the gap between streamed chunks, short enough for an abandoned stream.\nconst TRUNCATION_GRACE_MS = 2_000;\n\nconst svgCache = createSvgCache();\n\n// Every streamed frame shares one theme, so its palette is read once per theme key.\nlet lastTheme = { key: '', style: '' };\nconst themeStyleFor = (themeKey: string, scheme: ResolvedColorScheme, scope: Element | null) => {\n  if (lastTheme.key !== themeKey) {\n    lastTheme = { key: themeKey, style: peleThemeStyle(scheme, scope) };\n  }\n  return lastTheme.style;\n};\n\ntype Outcome =\n  | { svg: string }\n  | { error: unknown; truncated: boolean }\n  | { loading: DiagramType | null };\n\ntype Theme = { key: string; scheme: ResolvedColorScheme; scope: Element | null };\n\n/**\n * The diagram for `code`, rendered synchronously.\n *\n * 1. A cached SVG for this code and theme.\n * 2. `loading` while the diagram type's chunk or the icon pack is not loaded yet.\n * 3. A fresh render, or the error Pele threw.\n */\nconst renderNow = (code: string, theme: Theme): Outcome => {\n  const cacheKey = diagramCacheKey(code, theme.key);\n  const cached = svgCache.get(cacheKey);\n  if (cached) return { svg: cached };\n  const type = diagramType(code);\n  if ((type !== null && !registered(type)) || (usesLucide(code) && lucidePack === null)) {\n    return { loading: type };\n  }\n  try {\n    const { svg } = render(code, { fontFamily: DIAGRAM_FONT, icons: lucideIcon });\n    const themed = makeResponsive(svg, themeStyleFor(theme.key, theme.scheme, theme.scope));\n    svgCache.set(cacheKey, themed);\n    return { svg: themed };\n  } catch (error) {\n    return { error, truncated: isTruncatedDiagram(error, code) };\n  }\n};\n\ntype Props = {\n  /** Mermaid source. */\n  code: string;\n  /** Extra toolbar controls forwarded to `ZoomableSvg`; receives the sanitized SVG. */\n  renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const MermaidDiagram = ({ code, renderActions }: Props) => {\n  // - Scheme and key come from one read, so a palette is never cached under the wrong scheme.\n  // - `scope` is the element tokens are read off (`null` = `<html>`) and is part of `themeKey`.\n  const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();\n  const cacheKey = diagramCacheKey(code, themeKey);\n\n  const [state, setState] = useState(() => ({\n    key: cacheKey,\n    outcome: renderNow(code, { key: themeKey, scheme, scope }),\n  }));\n  const [gaveUpKey, setGaveUpKey] = useState<string | null>(null);\n\n  // Render-phase reset avoids a one-frame flash of the previous diagram.\n  if (state.key !== cacheKey) {\n    setState({ key: cacheKey, outcome: renderNow(code, { key: themeKey, scheme, scope }) });\n  }\n  const { outcome } = state;\n\n  useEffect(() => {\n    if (!('loading' in outcome)) return;\n    let cancelled = false;\n    Promise.all([load(outcome.loading), usesLucide(code) ? loadLucidePack() : null])\n      .then(() => renderNow(code, { key: themeKey, scheme, scope }))\n      .catch((error: unknown) => ({ error, truncated: false }))\n      .then((next) => {\n        if (!cancelled) setState({ key: cacheKey, outcome: next });\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [outcome, code, cacheKey, themeKey, scheme, scope]);\n\n  useEffect(() => {\n    if (!('error' in outcome)) return;\n    if (!outcome.truncated) {\n      console.error('[MermaidDiagram] render failed:', outcome.error);\n      return;\n    }\n    // A streaming diagram is truncated at almost every frame; one that stops arriving shows its source.\n    const timer = setTimeout(() => setGaveUpKey(cacheKey), TRUNCATION_GRACE_MS);\n    return () => clearTimeout(timer);\n  }, [outcome, cacheKey]);\n\n  if ('svg' in outcome) {\n    return (\n      <ZoomableSvg\n        key={code}\n        html={outcome.svg}\n        copyText={`\\`\\`\\`mermaid\\n${code}\\n\\`\\`\\``}\n        className=\"tw:my-3\"\n        renderActions={renderActions}\n      />\n    );\n  }\n\n  if ('error' in outcome && (!outcome.truncated || gaveUpKey === cacheKey)) {\n    return <DiagramSource code={code} />;\n  }\n\n  return <DiagramSkeleton />;\n};\n"],"mappings":"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"}

package/dist/{Modal-Cf_kPEBW.js → Modal-CLu6Eg5p.js}

@@ -1,6 +1,6 @@
 import { cn } from "./classNames-DkX30VJU.js";
 import { X } from "./icons-DDR9dFSr.js";
-import { Button } from "./Button-DbvGzEDb.js";
+import { Button } from "./Button-BAMX1iuI.js";
 import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-7vgpfc6B.js";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -151,4 +151,4 @@ Modal.Header = ModalHeader;
 Modal.Overlay = ModalOverlay;
 export { Modal };
 
-//# sourceMappingURL=Modal-Cf_kPEBW.js.map
+//# sourceMappingURL=Modal-CLu6Eg5p.js.map

package/dist/{Modal-Cf_kPEBW.js.map → Modal-CLu6Eg5p.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Modal-Cf_kPEBW.js","names":[],"sources":["../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalContent.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/ModalActions.tsx","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalIcon.tsx","../src/components/Modal/ModalImage.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as=\"form\"` is reserved for future use. */\ntype Props = ComponentProps<'div'> & {\n  as?: 'form';\n};\n\n/**\n * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.\n * Takes available height inside `Modal.Content` and scrolls when content overflows.\n */\nexport const ModalBody = ({ className, ...props }: Props) => (\n  <div\n    data-slot=\"modal-body\"\n    className={cn(\n      // scrollable body - takes available space and scrolls when content overflows\n      'tw:flex-1',\n      'tw:overflow-y-auto',\n\n      // soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n      'tw:scroll-fade-y',\n\n      // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n      'tw:px-4',\n      'tw:py-1',\n\n      // normalize nested Lucide icon sizing, matching Popover/HoverCard/Alert content surfaces\n      \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n      'tw:[&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n  size?: 'small' | 'medium' | 'large';\n  /** `top` keeps a form that changes height in place; ignored by the legacy brand (always top-anchored). */\n  align?: 'center' | 'top';\n};\n\nexport const ModalContent = ({\n  size = 'medium',\n  align = 'center',\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n    // Keeps parent modals (e.g. FullScreenModal) open\n    event.stopPropagation();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal>\n      <ModalOverlay>\n        <Content\n          // props first so callers can't override the computed data-size\n          {...props}\n          data-size={size}\n          data-align={align}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/modal',\n\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-overlay',\n\n            'tw:top-1/2',\n            'tw:-translate-y-1/2',\n            'tw:data-[align=top]:top-20',\n            'tw:data-[align=top]:translate-y-0',\n\n            'tw:w-full',\n            'tw:max-w-2xl',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n            'tw:rounded-modal',\n            'tw:bg-card',\n            'tw:text-card-foreground',\n            // Dark depth is a lighter surface plus a hairline, not a shadow.\n            'tw:[[data-theme=dark]_&]:ring-1',\n            'tw:[[data-theme=dark]_&]:ring-foreground/10',\n\n            // Vertical padding here survives an omitted Header/Footer; horizontal is theirs, so the\n            // Body scrollbar sits at the modal edge.\n            'tw:py-4',\n\n            'tw:duration-200',\n            'tw:data-[state=open]:animate-in',\n            'tw:data-[state=open]:fade-in-0',\n            'tw:data-[state=closed]:animate-out',\n            'tw:data-[state=closed]:fade-out-0',\n\n            // No -1/2 slide classes: centring uses `translate`, the animation `transform`; they\n            // compose, so a -50% slide would stack to -100% and fly in from the top-left.\n            'tw:data-[state=open]:zoom-in-95',\n            'tw:data-[state=closed]:zoom-out-95',\n\n            {\n              'tw:max-w-[480px]': size === 'small',\n              'tw:max-w-4xl': size === 'large',\n            },\n\n            className,\n          )}\n          onEscapeKeyDown={handleEscapeKeyDown}\n        >\n          {children}\n        </Content>\n      </ModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\n/**\n * The modal's action row.\n *\n * - A child that should fill the row carries `tw:w-full` itself; the footer is already full width.\n * - tailwind-merge replaces only within a group: `tw:flex-col` keeps `items-center`, so add `tw:items-stretch`.\n */\nexport const ModalFooter = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    className={cn('tw:flex', 'tw:items-center', 'tw:justify-end', 'tw:gap-2', 'tw:px-4', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the\n * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.\n */\nexport const ModalActions = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:col-start-3',\n      'tw:row-start-1',\n      'tw:self-start',\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-1',\n      // gutter from the title, carried here so the header grid needs no column gap\n      'tw:ml-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\nimport { ModalActions } from './ModalActions';\nimport { ModalDescription } from './ModalDescription';\nimport { ModalTitle } from './ModalTitle';\n\ntype Props = {\n  /** Status icon slot — `<Modal.Icon />` or `<Modal.Image />`. */\n  icon?: ReactNode;\n  /** Visible subtitle below the title (also fills `aria-describedby`). */\n  description?: ReactNode;\n  /** Screen-reader-only description; fills `aria-describedby` without rendering visibly. */\n  'aria-description'?: string;\n  /** Controls rendered top-right, before the close icon. */\n  actions?: ReactNode;\n  /** Hide the top-right close icon. */\n  hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\n/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */\nexport const ModalHeader = ({\n  className,\n  icon,\n  description,\n  'aria-description': ariaDescription,\n  actions,\n  hideCloseIcon = false,\n  children,\n  ...props\n}: Props) => (\n  <div\n    {...props}\n    data-slot=\"modal-header\"\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr_auto]',\n      'tw:items-center',\n      'tw:px-4',\n      className,\n    )}\n  >\n    {icon}\n\n    {children && <ModalTitle className=\"tw:col-start-2 tw:row-start-1\">{children}</ModalTitle>}\n    {(actions || !hideCloseIcon) && (\n      <ModalActions>\n        {actions}\n        {!hideCloseIcon && (\n          <Close asChild>\n            <Button variant=\"invisible\" size=\"icon-sm\">\n              <X />\n              <span className=\"tw:sr-only\">Close</span>\n            </Button>\n          </Close>\n        )}\n      </ModalActions>\n    )}\n    {(description || ariaDescription) && (\n      <ModalDescription\n        className={cn(\n          'tw:col-start-1',\n          'tw:col-end-4',\n          'tw:row-start-2',\n          description ? 'tw:mt-1' : 'tw:sr-only',\n        )}\n      >\n        {description ?? ariaDescription}\n      </ModalDescription>\n    )}\n  </div>\n);\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';\n\ntype Props = {\n  color: NamedColor | (string & {});\n  icon: ReactNode;\n};\n\nconst NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);\n\n/**\n * Status-coloured icon for `Modal`, authored inside `Modal.Header`; remote images use `Modal.Image`.\n *\n * - Soft-tinted inline badge in the header grid's first column, next to the title.\n * - `color` is categorical (`red` destructive … `violet` agent), fixed across brand themes.\n */\nexport const ModalIcon = ({ color, icon }: Props) => {\n  const customColor = color && !NAMED_COLORS.has(color) ? color : undefined;\n\n  return (\n    <span\n      data-slot=\"modal-icon\"\n      className={cn(\n        'tw:flex',\n        'tw:shrink-0',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:[&_svg]:aspect-square',\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:size-8',\n        'tw:rounded',\n        'tw:overflow-hidden',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n        {\n          'tw:bg-warning-100 tw:text-warning-500 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200':\n            color === 'orange',\n          'tw:bg-blue-100 tw:text-blue-600 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200':\n            color === 'blue',\n          'tw:bg-green-100 tw:text-green-900 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200':\n            color === 'green',\n          'tw:bg-error-100 tw:text-error-500 tw:[[data-theme=dark]_&]:bg-error-900 tw:[[data-theme=dark]_&]:text-error-200':\n            color === 'red',\n          'tw:bg-neutral-100 tw:text-neutral-500 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300':\n            color === 'gray',\n          'tw:bg-purple-100 tw:text-purple-500 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200':\n            color === 'violet',\n        },\n\n        // custom (non-named) colour\n        { 'tw:text-white': !!customColor },\n      )}\n      style={customColor ? { backgroundColor: customColor } : undefined}\n    >\n      {icon}\n    </span>\n  );\n};\n","import { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n  src: string;\n  /** Accessible alt text. Defaults to `\"\"` (decorative) — provide it when the image carries meaning. */\n  alt?: string;\n};\n\nexport const ModalImage = ({ src, alt = '' }: Props) => {\n  const [hasImageError, setHasImageError] = useState(false);\n\n  // Reset the error state when the source changes, so a reused badge (new logo, or a retry after a\n  // transient failure) isn't permanently hidden by an earlier onError.\n  useEffect(() => setHasImageError(false), [src]);\n\n  if (hasImageError) return null;\n\n  return (\n    <span\n      data-slot=\"modal-image\"\n      className={cn(\n        'tw:shrink-0',\n        'tw:overflow-hidden',\n\n        // inline badge in the header grid's first column\n        'tw:flex',\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:rounded',\n        'tw:size-8',\n      )}\n    >\n      <img\n        src={src}\n        alt={alt}\n        className=\"tw:size-full tw:object-contain\"\n        onError={() => setHasImageError(true)}\n      />\n    </span>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { ModalBody } from './ModalBody';\nimport { ModalContent } from './ModalContent';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalIcon } from './ModalIcon';\nimport { ModalImage } from './ModalImage';\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Root>;\n\n/**\n * Blocking dialog the user must act on before continuing. Built on Radix Dialog.\n *\n * - Not for side editing (`Sheet`), anchored confirms (`Popconfirm`) or hover previews (`HoverCard`).\n * - `Modal.Content` wraps Header + Body + Footer; a form's `FormBody` goes in Body, its buttons in Footer.\n *\n * @see RECIPES.md#modal-form\n * @see RECIPES.md#confirm-dialog\n */\nexport const Modal = (props: Props) => <Root {...props} />;\n\nModal.Close = Close;\nModal.Trigger = Trigger;\n\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Icon = ModalIcon;\nModal.Image = ModalImage;\nModal.Footer = ModalFooter;\nModal.Header = ModalHeader;\nModal.Overlay = ModalOverlay;\n"],"mappings":"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"}
+{"version":3,"file":"Modal-CLu6Eg5p.js","names":[],"sources":["../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalContent.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/ModalActions.tsx","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalIcon.tsx","../src/components/Modal/ModalImage.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as=\"form\"` is reserved for future use. */\ntype Props = ComponentProps<'div'> & {\n  as?: 'form';\n};\n\n/**\n * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.\n * Takes available height inside `Modal.Content` and scrolls when content overflows.\n */\nexport const ModalBody = ({ className, ...props }: Props) => (\n  <div\n    data-slot=\"modal-body\"\n    className={cn(\n      // scrollable body - takes available space and scrolls when content overflows\n      'tw:flex-1',\n      'tw:overflow-y-auto',\n\n      // soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n      'tw:scroll-fade-y',\n\n      // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n      'tw:px-4',\n      'tw:py-1',\n\n      // normalize nested Lucide icon sizing, matching Popover/HoverCard/Alert content surfaces\n      \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n      'tw:[&_svg]:shrink-0',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n  size?: 'small' | 'medium' | 'large';\n  /** `top` keeps a form that changes height in place; ignored by the legacy brand (always top-anchored). */\n  align?: 'center' | 'top';\n};\n\nexport const ModalContent = ({\n  size = 'medium',\n  align = 'center',\n  className,\n  children,\n  onEscapeKeyDown,\n  ...props\n}: Props) => {\n  const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n    // Keeps parent modals (e.g. FullScreenModal) open\n    event.stopPropagation();\n    onEscapeKeyDown?.(event);\n  };\n\n  return (\n    <Portal>\n      <ModalOverlay>\n        <Content\n          // props first so callers can't override the computed data-size\n          {...props}\n          data-size={size}\n          data-align={align}\n          className={cn(\n            'tailwindcss-preflight',\n            'tw:group/modal',\n\n            'tw:fixed',\n            'tw:left-1/2',\n            'tw:-translate-x-1/2',\n            'tw:z-overlay',\n\n            'tw:top-1/2',\n            'tw:-translate-y-1/2',\n            'tw:data-[align=top]:top-20',\n            'tw:data-[align=top]:translate-y-0',\n\n            'tw:w-full',\n            'tw:max-w-2xl',\n            'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n            'tw:flex',\n            'tw:flex-col',\n            'tw:gap-4',\n            'tw:rounded-modal',\n            'tw:bg-card',\n            'tw:text-card-foreground',\n            // Dark depth is a lighter surface plus a hairline, not a shadow.\n            'tw:[[data-theme=dark]_&]:ring-1',\n            'tw:[[data-theme=dark]_&]:ring-foreground/10',\n\n            // Vertical padding here survives an omitted Header/Footer; horizontal is theirs, so the\n            // Body scrollbar sits at the modal edge.\n            'tw:py-4',\n\n            'tw:duration-200',\n            'tw:data-[state=open]:animate-in',\n            'tw:data-[state=open]:fade-in-0',\n            'tw:data-[state=closed]:animate-out',\n            'tw:data-[state=closed]:fade-out-0',\n\n            // No -1/2 slide classes: centring uses `translate`, the animation `transform`; they\n            // compose, so a -50% slide would stack to -100% and fly in from the top-left.\n            'tw:data-[state=open]:zoom-in-95',\n            'tw:data-[state=closed]:zoom-out-95',\n\n            {\n              'tw:max-w-[480px]': size === 'small',\n              'tw:max-w-4xl': size === 'large',\n            },\n\n            className,\n          )}\n          onEscapeKeyDown={handleEscapeKeyDown}\n        >\n          {children}\n        </Content>\n      </ModalOverlay>\n    </Portal>\n  );\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\n/**\n * The modal's action row.\n *\n * - A child that should fill the row carries `tw:w-full` itself; the footer is already full width.\n * - tailwind-merge replaces only within a group: `tw:flex-col` keeps `items-center`, so add `tw:items-stretch`.\n */\nexport const ModalFooter = ({ className, ...props }: Props) => (\n  <div\n    {...props}\n    className={cn('tw:flex', 'tw:items-center', 'tw:justify-end', 'tw:gap-2', 'tw:px-4', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the\n * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.\n */\nexport const ModalActions = ({ className, ...props }: Props) => (\n  <div\n    className={cn(\n      'tw:col-start-3',\n      'tw:row-start-1',\n      'tw:self-start',\n      'tw:flex',\n      'tw:items-center',\n      'tw:gap-1',\n      // gutter from the title, carried here so the header grid needs no column gap\n      'tw:ml-3',\n      className,\n    )}\n    {...props}\n  />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\nimport { ModalActions } from './ModalActions';\nimport { ModalDescription } from './ModalDescription';\nimport { ModalTitle } from './ModalTitle';\n\ntype Props = {\n  /** Status icon slot — `<Modal.Icon />` or `<Modal.Image />`. */\n  icon?: ReactNode;\n  /** Visible subtitle below the title (also fills `aria-describedby`). */\n  description?: ReactNode;\n  /** Screen-reader-only description; fills `aria-describedby` without rendering visibly. */\n  'aria-description'?: string;\n  /** Controls rendered top-right, before the close icon. */\n  actions?: ReactNode;\n  /** Hide the top-right close icon. */\n  hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\n/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */\nexport const ModalHeader = ({\n  className,\n  icon,\n  description,\n  'aria-description': ariaDescription,\n  actions,\n  hideCloseIcon = false,\n  children,\n  ...props\n}: Props) => (\n  <div\n    {...props}\n    data-slot=\"modal-header\"\n    className={cn(\n      'tw:grid',\n      'tw:grid-cols-[auto_1fr_auto]',\n      'tw:items-center',\n      'tw:px-4',\n      className,\n    )}\n  >\n    {icon}\n\n    {children && <ModalTitle className=\"tw:col-start-2 tw:row-start-1\">{children}</ModalTitle>}\n    {(actions || !hideCloseIcon) && (\n      <ModalActions>\n        {actions}\n        {!hideCloseIcon && (\n          <Close asChild>\n            <Button variant=\"invisible\" size=\"icon-sm\">\n              <X />\n              <span className=\"tw:sr-only\">Close</span>\n            </Button>\n          </Close>\n        )}\n      </ModalActions>\n    )}\n    {(description || ariaDescription) && (\n      <ModalDescription\n        className={cn(\n          'tw:col-start-1',\n          'tw:col-end-4',\n          'tw:row-start-2',\n          description ? 'tw:mt-1' : 'tw:sr-only',\n        )}\n      >\n        {description ?? ariaDescription}\n      </ModalDescription>\n    )}\n  </div>\n);\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';\n\ntype Props = {\n  color: NamedColor | (string & {});\n  icon: ReactNode;\n};\n\nconst NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);\n\n/**\n * Status-coloured icon for `Modal`, authored inside `Modal.Header`; remote images use `Modal.Image`.\n *\n * - Soft-tinted inline badge in the header grid's first column, next to the title.\n * - `color` is categorical (`red` destructive … `violet` agent), fixed across brand themes.\n */\nexport const ModalIcon = ({ color, icon }: Props) => {\n  const customColor = color && !NAMED_COLORS.has(color) ? color : undefined;\n\n  return (\n    <span\n      data-slot=\"modal-icon\"\n      className={cn(\n        'tw:flex',\n        'tw:shrink-0',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:[&_svg]:aspect-square',\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:size-8',\n        'tw:rounded',\n        'tw:overflow-hidden',\n        'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n        {\n          'tw:bg-warning-100 tw:text-warning-500 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200':\n            color === 'orange',\n          'tw:bg-blue-100 tw:text-blue-600 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200':\n            color === 'blue',\n          'tw:bg-green-100 tw:text-green-900 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200':\n            color === 'green',\n          'tw:bg-error-100 tw:text-error-500 tw:[[data-theme=dark]_&]:bg-error-900 tw:[[data-theme=dark]_&]:text-error-200':\n            color === 'red',\n          'tw:bg-neutral-100 tw:text-neutral-500 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300':\n            color === 'gray',\n          'tw:bg-purple-100 tw:text-purple-500 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200':\n            color === 'violet',\n        },\n\n        // custom (non-named) colour\n        { 'tw:text-white': !!customColor },\n      )}\n      style={customColor ? { backgroundColor: customColor } : undefined}\n    >\n      {icon}\n    </span>\n  );\n};\n","import { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n  src: string;\n  /** Accessible alt text. Defaults to `\"\"` (decorative) — provide it when the image carries meaning. */\n  alt?: string;\n};\n\nexport const ModalImage = ({ src, alt = '' }: Props) => {\n  const [hasImageError, setHasImageError] = useState(false);\n\n  // Reset the error state when the source changes, so a reused badge (new logo, or a retry after a\n  // transient failure) isn't permanently hidden by an earlier onError.\n  useEffect(() => setHasImageError(false), [src]);\n\n  if (hasImageError) return null;\n\n  return (\n    <span\n      data-slot=\"modal-image\"\n      className={cn(\n        'tw:shrink-0',\n        'tw:overflow-hidden',\n\n        // inline badge in the header grid's first column\n        'tw:flex',\n        'tw:col-start-1',\n        'tw:row-start-1',\n        'tw:self-start',\n        'tw:mr-3',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:rounded',\n        'tw:size-8',\n      )}\n    >\n      <img\n        src={src}\n        alt={alt}\n        className=\"tw:size-full tw:object-contain\"\n        onError={() => setHasImageError(true)}\n      />\n    </span>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { ModalBody } from './ModalBody';\nimport { ModalContent } from './ModalContent';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalIcon } from './ModalIcon';\nimport { ModalImage } from './ModalImage';\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Root>;\n\n/**\n * Blocking dialog the user must act on before continuing. Built on Radix Dialog.\n *\n * - Not for side editing (`Sheet`), anchored confirms (`Popconfirm`) or hover previews (`HoverCard`).\n * - `Modal.Content` wraps Header + Body + Footer; a form's `FormBody` goes in Body, its buttons in Footer.\n *\n * @see RECIPES.md#modal-form\n * @see RECIPES.md#confirm-dialog\n */\nexport const Modal = (props: Props) => <Root {...props} />;\n\nModal.Close = Close;\nModal.Trigger = Trigger;\n\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Icon = ModalIcon;\nModal.Image = ModalImage;\nModal.Footer = ModalFooter;\nModal.Header = ModalHeader;\nModal.Overlay = ModalOverlay;\n"],"mappings":"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"}

package/dist/{MultiActionButtonGroup-8WQwL4UQ.js → MultiActionButtonGroup-B3-wNw7w.js}

@@ -1,6 +1,6 @@
 import { cn } from "./classNames-DkX30VJU.js";
-import { Tooltip } from "./utils-DjFceY3H.js";
-import { Button } from "./Button-DbvGzEDb.js";
+import { Tooltip } from "./utils-BxEJOnFD.js";
+import { Button } from "./Button-BAMX1iuI.js";
 import { ButtonGroup } from "./internal/components/ButtonGroup.js";
 import { jsx } from "react/jsx-runtime";
 // src/blocks/MultiActionButtonGroup/MultiActionButton.tsx
@@ -28,4 +28,4 @@ const MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(
 MultiActionButtonGroup.Button = MultiActionButton;
 export { MultiActionButtonGroup };
 
-//# sourceMappingURL=MultiActionButtonGroup-8WQwL4UQ.js.map
+//# sourceMappingURL=MultiActionButtonGroup-B3-wNw7w.js.map

package/dist/{MultiActionButtonGroup-8WQwL4UQ.js.map → MultiActionButtonGroup-B3-wNw7w.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MultiActionButtonGroup-8WQwL4UQ.js","names":[],"sources":["../src/blocks/MultiActionButtonGroup/MultiActionButton.tsx","../src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\n\ntype Props = {\n  disabled?: boolean;\n  icon: ReactNode;\n  isLoading?: boolean;\n  label: string;\n  onClick: ComponentProps<typeof Button>['onClick'];\n  tooltipContent: ReactNode;\n  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];\n  'data-testid'?: string;\n};\n\nexport const MultiActionButton = ({\n  disabled,\n  icon,\n  isLoading,\n  label,\n  onClick,\n  tooltipContent,\n  tooltipVariant,\n  'data-testid': dataTestId,\n}: Props) => (\n  <Tooltip placement=\"top\" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>\n    <Button\n      disabled={disabled}\n      isLoading={isLoading}\n      aria-label={label}\n      onClick={onClick}\n      variant=\"invisible\"\n      size=\"icon\"\n      data-testid={dataTestId}\n    >\n      {icon}\n    </Button>\n  </Tooltip>\n);\n","import type { PropsWithChildren } from 'react';\n\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { cn } from '../../utils';\n\nimport { MultiActionButton } from './MultiActionButton';\n\ntype Props = {\n  className?: string;\n} & PropsWithChildren;\n\nexport const MultiActionButtonGroup = ({ children, className }: Props) => (\n  <ButtonGroup className={cn('tw:text-nowrap', className)}>{children}</ButtonGroup>\n);\n\nMultiActionButtonGroup.Button = MultiActionButton;\n"],"mappings":";;;;;;AAgBA,MAAa,qBAAqB,EAChC,UACA,MACA,WACA,OACA,SACA,gBACA,gBACA,eAAe,iBAEf,oBAAC,SAAD;CAAS,WAAU;CAAM,SAAS;CAAgB,gBAAA;CAAe,SAAS;CACxE,UAAA,oBAAC,QAAD;EACY;EACC;EACX,cAAY;EACH;EACT,SAAQ;EACR,MAAK;EACL,eAAa;EAEZ,UAAA;CACK,CAAA;AACD,CAAA;;AC3BX,MAAa,0BAA0B,EAAE,UAAU,gBACjD,oBAAC,aAAD;CAAa,WAAW,GAAG,kBAAkB,SAAS;CAAI;AAAsB,CAAA;AAGlF,uBAAuB,SAAS"}
+{"version":3,"file":"MultiActionButtonGroup-B3-wNw7w.js","names":[],"sources":["../src/blocks/MultiActionButtonGroup/MultiActionButton.tsx","../src/blocks/MultiActionButtonGroup/MultiActionButtonGroup.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\n\ntype Props = {\n  disabled?: boolean;\n  icon: ReactNode;\n  isLoading?: boolean;\n  label: string;\n  onClick: ComponentProps<typeof Button>['onClick'];\n  tooltipContent: ReactNode;\n  tooltipVariant?: ComponentProps<typeof Tooltip>['variant'];\n  'data-testid'?: string;\n};\n\nexport const MultiActionButton = ({\n  disabled,\n  icon,\n  isLoading,\n  label,\n  onClick,\n  tooltipContent,\n  tooltipVariant,\n  'data-testid': dataTestId,\n}: Props) => (\n  <Tooltip placement=\"top\" tooltip={tooltipContent} triggerAsChild variant={tooltipVariant}>\n    <Button\n      disabled={disabled}\n      isLoading={isLoading}\n      aria-label={label}\n      onClick={onClick}\n      variant=\"invisible\"\n      size=\"icon\"\n      data-testid={dataTestId}\n    >\n      {icon}\n    </Button>\n  </Tooltip>\n);\n","import type { PropsWithChildren } from 'react';\n\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { cn } from '../../utils';\n\nimport { MultiActionButton } from './MultiActionButton';\n\ntype Props = {\n  className?: string;\n} & PropsWithChildren;\n\nexport const MultiActionButtonGroup = ({ children, className }: Props) => (\n  <ButtonGroup className={cn('tw:text-nowrap', className)}>{children}</ButtonGroup>\n);\n\nMultiActionButtonGroup.Button = MultiActionButton;\n"],"mappings":";;;;;;AAgBA,MAAa,qBAAqB,EAChC,UACA,MACA,WACA,OACA,SACA,gBACA,gBACA,eAAe,iBAEf,oBAAC,SAAD;CAAS,WAAU;CAAM,SAAS;CAAgB,gBAAA;CAAe,SAAS;CACxE,UAAA,oBAAC,QAAD;EACY;EACC;EACX,cAAY;EACH;EACT,SAAQ;EACR,MAAK;EACL,eAAa;EAEZ,UAAA;CACK,CAAA;AACD,CAAA;;AC3BX,MAAa,0BAA0B,EAAE,UAAU,gBACjD,oBAAC,aAAD;CAAa,WAAW,GAAG,kBAAkB,SAAS;CAAI;AAAsB,CAAA;AAGlF,uBAAuB,SAAS"}

package/dist/{Navbar-CRjxVboE.js → Navbar-BEc-Pqo5.js}

@@ -1,7 +1,7 @@
 import { cn } from "./classNames-DkX30VJU.js";
 import { Search } from "./icons-DDR9dFSr.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
-import { BrandLogo } from "./BrandLogo-Dn7hhp2c.js";
+import { BrandLogo } from "./BrandLogo-n4Qhi1tI.js";
 import { Root, Slot, Slottable } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -313,4 +313,4 @@ Navbar.MenuItemAdornment = NavbarMenuItemAdornment;
 Navbar.MenuAvatar = NavbarMenuAvatar;
 export { Navbar };
 
-//# sourceMappingURL=Navbar-CRjxVboE.js.map
+//# sourceMappingURL=Navbar-BEc-Pqo5.js.map

package/dist/{Navbar-CRjxVboE.js.map → Navbar-BEc-Pqo5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Navbar-CRjxVboE.js","names":["variants","variants"],"sources":["../src/components/Navbar/NavbarContent.tsx","../src/components/Navbar/NavbarFooter.tsx","../src/components/Navbar/NavbarHeader.tsx","../src/components/Navbar/NavbarMenu.tsx","../src/components/Navbar/NavbarMenuAvatar.tsx","../src/components/Navbar/NavbarMenuItemAdornment.tsx","../src/components/Navbar/NavbarMenuButton.tsx","../src/components/Navbar/NavbarMenuItem.tsx","../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\ntype Props = {\n  className?: string;\n  children?: ReactNode;\n};\n\nexport const NavbarContent = ({ children, className }: Props) => (\n  <ScrollArea\n    type=\"auto\"\n    orientation=\"horizontal\"\n    className=\"tw:flex-1\"\n    scrollBarClassName=\"tw:h-1.5\"\n  >\n    <div className={cn('tw:flex', 'tw:py-1.5', className)}>{children}</div>\n  </ScrollArea>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n// `flex items-center`, not a bare block: this slot is documented to hold several\n// items (search, notifications, avatar). As a block they are inline-level boxes\n// aligned on a text baseline, so a button carrying an icon and a text-only button\n// sit at different heights — visibly off-centre against the bar. Centring them is\n// a no-op for the common single-`Navbar.Menu` child, and `gap` only applies\n// between siblings, so existing compositions keep their spacing.\nexport const NavbarFooter = ({ children, className, ...rest }: Props) => (\n  <div {...rest} className={cn('tw:flex tw:items-center tw:gap-2 tw:py-1.5', className)}>\n    {children}\n  </div>\n);\n","import { type ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { BrandLogo } from '../BrandLogo';\n\ntype Props = ComponentProps<'div'>;\n\nexport const NavbarHeader = ({ children, className, ...rest }: Props) => (\n  // BrandLogo reads the nearest ThemeProvider (or the default context) and\n  // renders null when the active brand ships no logo, so no provider gate needed.\n  <div {...rest} className={cn('tw:overflow-hidden', 'tw:py-1.5', className)}>\n    {children ?? <BrandLogo variant=\"wordmark\" className=\"tw:h-7\" />}\n  </div>\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n// `tw:m-0` alongside `tw:p-0`: browsers give `<ul>` a default block margin. In a plain\n// app the scoped preflight resets it, but in kbc-ui the legacy Bootstrap layer (which sits\n// above the preflight so Bootstrap padding survives on its own elements) re-applies\n// `ul { margin-bottom: 10px }`, which then inflates this menu's height and pushes the whole\n// navbar row off-center. Resetting the margin explicitly (utilities beat the legacy layer)\n// keeps the row centered everywhere.\nconst variants = cva(\n  ['tw:m-0', 'tw:p-0', 'tw:flex', 'tw:items-center', 'tw:justify-center', 'tw:gap-2'],\n  {\n    variants: {\n      marker: {\n        none: [],\n        'forward-slash': [\n          // Style all li children with pseudo-element marker\n          'tw:[&_li]:flex',\n          'tw:[&_li]:items-center',\n          'tw:[&_li]:before:content-[\"/\"]',\n          'tw:[&_li]:before:text-border',\n          'tw:[&_li]:before:text-sm',\n          'tw:[&_li]:before:mr-0.5',\n          'tw:[&_li:not(:first-child)]:before:ml-0.5',\n        ],\n      },\n    },\n    defaultVariants: {\n      marker: 'none',\n    },\n  },\n);\n\ntype Props = ComponentProps<'ul'> & VariantProps<typeof variants>;\n\nexport const NavbarMenu = ({ className, marker, ...rest }: Props) => (\n  <ul {...rest} className={variants({ marker, className })} />\n);\n","import type { ComponentProps } from 'react';\nimport * as RadixAvatar from '@radix-ui/react-avatar';\nimport BoringAvatar from 'boring-avatars';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'> & {\n  src?: string;\n  alt?: string;\n};\n\nexport const NavbarMenuAvatar = ({ ref, className, type = 'button', src, alt, ...rest }: Props) => {\n  const altText = alt ?? 'Avatar';\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type={type}\n      className={cn(\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:size-8',\n\n        'tw:aspect-square',\n        'tw:overflow-hidden',\n        'tw:shrink-0',\n\n        'tw:rounded-lg',\n        'tw:bg-transparent',\n        'tw:cursor-pointer',\n\n        // Disabled state\n        'tw:disabled:opacity-disabled',\n        'tw:disabled:cursor-not-allowed',\n\n        // Focus-visible (matches SidebarMenuButton exactly)\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        className,\n      )}\n    >\n      <RadixAvatar.Root>\n        <RadixAvatar.Image src={src} alt={altText} className=\"tw:size-full tw:object-cover\" />\n\n        <RadixAvatar.Fallback asChild>\n          <BoringAvatar\n            square\n            name={altText}\n            variant=\"beam\"\n            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}\n            size={32}\n          />\n        </RadixAvatar.Fallback>\n      </RadixAvatar.Root>\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst variants = cva(\n  [\n    'tw:flex',\n    'tw:justify-center',\n    'tw:items-center',\n\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n    'tw:[&:not(svg)]:h-5',\n    'tw:[&:not(svg)]:min-w-5',\n\n    'tw:p-1',\n    'tw:aspect-square',\n    'tw:rounded-md',\n  ],\n  {\n    defaultVariants: { variant: 'icon-accent' },\n    variants: {\n      variant: {\n        icon: ['tw:text-sidebar-foreground', 'tw:[&_svg]:text-sidebar-foreground'],\n        'icon-emphasized': ['tw:text-white', 'tw:[&_svg]:text-white'],\n        'icon-accent': [\n          // color-aware accent styling\n          'tw:group-data-[accent=blue]/navbar:text-sidebar-primary',\n          'tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:text-purple-500',\n          'tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500',\n          'tw:group-data-[accent=orange]/navbar:text-warning-500',\n          'tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500',\n          'tw:group-data-[accent=green]/navbar:text-primary-500',\n          'tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500',\n        ],\n        'icon-accent-emphasized': [\n          'tw:text-white',\n          'tw:[&_svg]:text-white',\n\n          'tw:group-data-[accent=blue]/navbar:bg-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:bg-purple-500',\n          'tw:group-data-[accent=orange]/navbar:bg-warning-500',\n          'tw:group-data-[accent=green]/navbar:bg-primary-500',\n        ],\n        'icon-button': ['tw:size-4', 'tw:!p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        shortcut: ['tw:bg-muted', 'tw:text-sidebar-foreground', 'tw:ml-auto'],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;\n\nexport const NavbarMenuItemAdornment = ({\n  ref,\n  asChild = false,\n  className,\n  variant = 'icon-accent',\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'span';\n\n  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Search } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst variants = cva(\n  [\n    'tw:group/navbar-menu-button',\n    'tw:box-border',\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2',\n    'tw:bg-transparent',\n\n    'tw:leading-9',\n\n    'tw:border',\n    'tw:rounded-lg',\n    'tw:whitespace-nowrap',\n    'tw:select-none',\n\n    // focus-visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-sidebar-ring/50',\n\n    // disabled\n    'tw:disabled:opacity-disabled',\n    'tw:disabled:hover:bg-transparent',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-hover',\n          'tw:aria-expanded:bg-sidebar-hover',\n\n          // Active page. Mirrors `Sidebar.MenuButton`, which styles `aria-current=\"page\"` — a top nav\n          // needs the same affordance, and without it a Navbar-shelled app cannot show where you are.\n          // `aria-current` rather than a prop: with `asChild` the slot is an <a>, and that is the\n          // attribute a router sets on an active link (TanStack's `Link` does it for free).\n          'tw:aria-[current=page]:bg-sidebar-selected',\n          'tw:aria-[current=page]:hover:bg-sidebar-selected',\n          'tw:aria-[current=page]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]',\n          'tw:aria-[current=page]:font-medium',\n        ],\n        emphasized: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-hover',\n          'tw:aria-expanded:bg-sidebar-hover',\n\n          'tw:aria-[current=page]:bg-sidebar-selected',\n          'tw:aria-[current=page]:hover:bg-sidebar-selected',\n          'tw:aria-[current=page]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]',\n\n          'tw:font-semibold',\n        ],\n        icon: [\n          'tw:size-8',\n          'tw:aspect-square',\n          'tw:justify-center',\n          'tw:font-normal',\n          'tw:border-transparent',\n          'tw:text-primary',\n          'tw:[&_svg]:!text-primary',\n          'tw:hover:bg-sidebar-hover',\n          'tw:aria-expanded:bg-sidebar-hover',\n        ],\n        search: [\n          'tw:max-h-8',\n          'tw:min-w-52',\n          'tw:px-3',\n          'tw:py-1',\n          'tw:font-normal',\n          'tw:border-input',\n          'tw:text-muted-foreground',\n          'tw:[&_svg]:!text-muted-foreground',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> & {\n  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */\n  icon?: ReactNode;\n  asChild?: boolean;\n} & VariantProps<typeof variants>;\n\nexport const NavbarMenuButton = ({\n  ref,\n  className,\n  type = 'button',\n  children,\n  icon,\n  asChild = false,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n  const isSearchVariant = variant === 'search';\n  const isEmphasizedVariant = variant === 'emphasized';\n  const adornment = isSearchVariant ? <Search /> : icon;\n\n  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {\n    if (isSearchVariant || variant === 'icon') return 'icon-button';\n    if (isEmphasizedVariant) return 'icon-accent-emphasized';\n    return 'icon-accent';\n  })();\n\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      type={type}\n      data-variant={variant}\n      className={cn(variants({ className, variant }))}\n    >\n      {adornment && (\n        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>\n      )}\n\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const NavbarMenuItem = ({ className, ...rest }: Props) => (\n  <li {...rest} className={cn('tw:flex', 'tw:items-center', 'tw:gap-2', className)} />\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { NavbarContent } from './NavbarContent';\nimport { NavbarFooter } from './NavbarFooter';\nimport { NavbarHeader } from './NavbarHeader';\nimport { NavbarMenu } from './NavbarMenu';\nimport { NavbarMenuAvatar } from './NavbarMenuAvatar';\nimport { NavbarMenuButton } from './NavbarMenuButton';\nimport { NavbarMenuItem } from './NavbarMenuItem';\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst navbarClassnames = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/navbar',\n    'tw:sticky',\n    'tw:top-0',\n    'tw:z-50',\n    'tw:flex',\n    'tw:gap-2',\n    'tw:items-center',\n\n    // The left side is intentionally smaller to align the logo with the sidebar icons.\n    'tw:pl-2',\n    'tw:pr-3',\n\n    'tw:bg-sidebar',\n    // Required with `bg-sidebar`: otherwise `currentColor` (text, `BrandLogo`) is black on dark.\n    'tw:text-sidebar-foreground',\n    'tw:text-xs',\n    'tw:leading-4',\n  ],\n  {\n    defaultVariants: {\n      bordered: false,\n    },\n    variants: {\n      bordered: {\n        true: [\n          'tw:before:content',\n          'tw:before:h-0.5',\n          'tw:before:w-full',\n          'tw:before:absolute',\n          'tw:before:left-0',\n          'tw:before:top-0',\n          'tw:data-[accent=blue]:before:bg-sidebar-primary',\n          'tw:data-[accent=purple]:before:bg-purple-500',\n          'tw:data-[accent=green]:before:bg-primary-500',\n          'tw:data-[accent=orange]:before:bg-warning-500',\n        ],\n        false: '',\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'nav'> &\n  VariantProps<typeof navbarClassnames> & {\n    accent?: 'blue' | 'purple' | 'green' | 'orange';\n  };\n\n/**\n * Top navigation bar for the app shell, hosted inside `<AppShell.Header>`.\n *\n * - Composition: `Navbar.Header` (brand), `Navbar.Content` (scrollable menu), `Navbar.Footer`.\n * - `bordered` adds a top hairline coloured by `accent`.\n * - Override the default `aria-label` when a page has more than one nav.\n *\n * @see AppShell — the sidebar rail uses `Sidebar` instead.\n */\nexport const Navbar = ({ className, accent = 'blue', bordered = false, ...rest }: Props) => (\n  // - `<nav>`, not `<header>`: `AppShell.Header` is already the `<header>` landmark.\n  // - `aria-label` precedes `...rest` so a caller's label wins.\n  <nav\n    aria-label=\"Main navigation\"\n    {...rest}\n    data-slot=\"navbar\"\n    data-accent={accent}\n    className={navbarClassnames({ bordered, className })}\n  />\n);\n\nNavbar.Header = NavbarHeader;\nNavbar.Footer = NavbarFooter;\nNavbar.Content = NavbarContent;\n\nNavbar.Menu = NavbarMenu;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuButton = NavbarMenuButton;\nNavbar.MenuItemAdornment = NavbarMenuItemAdornment;\nNavbar.MenuAvatar = NavbarMenuAvatar;\n"],"mappings":";;;;;;;;;;AAUA,MAAa,iBAAiB,EAAE,UAAU,gBACxC,oBAAC,YAAD;CACE,MAAK;CACL,aAAY;CACZ,WAAU;CACV,oBAAmB;CAEnB,UAAA,oBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,aAAa,SAAS;EAAI;CAAc,CAAA;AAC5D,CAAA;;ACNd,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,8CAA8C,SAAS;CACjF;AACE,CAAA;;ACRP,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WAGrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,sBAAsB,aAAa,SAAS;CACtE,UAAA,YAAY,oBAAC,WAAD;EAAW,SAAQ;EAAW,WAAU;CAAU,CAAA;AAC5D,CAAA;;ACFP,MAAMA,aAAW,IACf;CAAC;CAAU;CAAU;CAAW;CAAmB;CAAqB;AAAU,GAClF;CACE,UAAU,EACR,QAAQ;EACN,MAAM,CAAC;EACP,iBAAiB;GAEf;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CACF;AAIA,MAAa,cAAc,EAAE,WAAW,QAAQ,GAAG,WACjD,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAWA,WAAS;EAAE;EAAQ;CAAU,CAAC;AAAI,CAAA;;AC1B7D,MAAa,oBAAoB,EAAE,KAAK,WAAW,OAAO,UAAU,KAAK,KAAK,GAAG,WAAkB;CACjG,MAAM,UAAU,OAAO;CAEvB,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GACT,WACA,mBACA,qBACA,aAEA,oBACA,sBACA,eAEA,iBACA,qBACA,qBAGA,gCACA,kCAGA,mCACA,2BACA,yCACA,SACF;EAEA,UAAA,qBAAC,YAAY,MAAb,EAAA,UAAA,CACE,oBAAC,YAAY,OAAb;GAAwB;GAAK,KAAK;GAAS,WAAU;EAAgC,CAAA,GAErF,oBAAC,YAAY,UAAb;GAAsB,SAAA;GACpB,UAAA,oBAAC,cAAD;IACE,QAAA;IACA,MAAM;IACN,SAAQ;IACR,QAAQ;KAAC;KAAW;KAAW;KAAW;KAAW;IAAS;IAC9D,MAAM;GACP,CAAA;EACmB,CAAA,CACN,EAAA,CAAA;CACZ,CAAA;AAEZ;;ACtDA,MAAMC,aAAW,IACf;CACE;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,SAAS,cAAc;CAC1C,UAAU,EACR,SAAS;EACP,MAAM,CAAC,8BAA8B,oCAAoC;EACzE,mBAAmB,CAAC,iBAAiB,uBAAuB;EAC5D,eAAe;GAEb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,0BAA0B;GACxB;GACA;GAEA;GACA;GACA;GACA;EACF;EACA,eAAe;GAAC;GAAa;GAAW;EAA4C;EACpF,UAAU;GAAC;GAAe;GAA8B;EAAY;CACtE,EACF;AACF,CACF;AAIA,MAAa,2BAA2B,EACtC,KACA,UAAU,OACV,WACA,UAAU,eACV,GAAG,YACQ;CAGX,OAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,GAAI;EAAY;EAAK,WAAWA,WAAS;GAAE;GAAS;EAAU,CAAC;CAAI,CAAA;AAClF;;ACtDA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;GACA;GACA;EACF;EACA,YAAY;GACV;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAQA,MAAa,oBAAoB,EAC/B,KACA,WACA,OAAO,UACP,UACA,MACA,UAAU,OACV,UAAU,WACV,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,kBAAkB,YAAY;CACpC,MAAM,sBAAsB,YAAY;CACxC,MAAM,YAAY,kBAAkB,oBAAC,QAAD,CAAS,CAAA,IAAI;CAEjD,MAAM,0BAAqF;EACzF,IAAI,mBAAmB,YAAY,QAAQ,OAAO;EAClD,IAAI,qBAAqB,OAAO;EAChC,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACC;EACN,gBAAc;EACd,WAAW,GAAG,SAAS;GAAE;GAAW;EAAQ,CAAC,CAAC;EALhD,UAAA,CAOG,aACC,oBAAC,yBAAD;GAAyB,SAAS;GAAmB,UAAA;EAAmC,CAAA,GAG1F,oBAAC,WAAD,EAAY,SAAoB,CAAA,CAC5B;;AAEV;;AC1IA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAC7C,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAW,GAAG,WAAW,mBAAmB,YAAY,SAAS;AAAI,CAAA;;ACMrF,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,UAAU,MACZ;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;CACT,EACF;AACF,CACF;;;;;;;;;;AAgBA,MAAa,UAAU,EAAE,WAAW,SAAS,QAAQ,WAAW,OAAO,GAAG,WAGxE,oBAAC,OAAD;CACE,cAAW;CACX,GAAI;CACJ,aAAU;CACV,eAAa;CACb,WAAW,iBAAiB;EAAE;EAAU;CAAU,CAAC;AACpD,CAAA;AAGH,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,UAAU;AAEjB,OAAO,OAAO;AACd,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,aAAa"}
+{"version":3,"file":"Navbar-BEc-Pqo5.js","names":["variants","variants"],"sources":["../src/components/Navbar/NavbarContent.tsx","../src/components/Navbar/NavbarFooter.tsx","../src/components/Navbar/NavbarHeader.tsx","../src/components/Navbar/NavbarMenu.tsx","../src/components/Navbar/NavbarMenuAvatar.tsx","../src/components/Navbar/NavbarMenuItemAdornment.tsx","../src/components/Navbar/NavbarMenuButton.tsx","../src/components/Navbar/NavbarMenuItem.tsx","../src/components/Navbar/Navbar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\ntype Props = {\n  className?: string;\n  children?: ReactNode;\n};\n\nexport const NavbarContent = ({ children, className }: Props) => (\n  <ScrollArea\n    type=\"auto\"\n    orientation=\"horizontal\"\n    className=\"tw:flex-1\"\n    scrollBarClassName=\"tw:h-1.5\"\n  >\n    <div className={cn('tw:flex', 'tw:py-1.5', className)}>{children}</div>\n  </ScrollArea>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n// `flex items-center`, not a bare block: this slot is documented to hold several\n// items (search, notifications, avatar). As a block they are inline-level boxes\n// aligned on a text baseline, so a button carrying an icon and a text-only button\n// sit at different heights — visibly off-centre against the bar. Centring them is\n// a no-op for the common single-`Navbar.Menu` child, and `gap` only applies\n// between siblings, so existing compositions keep their spacing.\nexport const NavbarFooter = ({ children, className, ...rest }: Props) => (\n  <div {...rest} className={cn('tw:flex tw:items-center tw:gap-2 tw:py-1.5', className)}>\n    {children}\n  </div>\n);\n","import { type ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { BrandLogo } from '../BrandLogo';\n\ntype Props = ComponentProps<'div'>;\n\nexport const NavbarHeader = ({ children, className, ...rest }: Props) => (\n  // BrandLogo reads the nearest ThemeProvider (or the default context) and\n  // renders null when the active brand ships no logo, so no provider gate needed.\n  <div {...rest} className={cn('tw:overflow-hidden', 'tw:py-1.5', className)}>\n    {children ?? <BrandLogo variant=\"wordmark\" className=\"tw:h-7\" />}\n  </div>\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\n// `tw:m-0` alongside `tw:p-0`: browsers give `<ul>` a default block margin. In a plain\n// app the scoped preflight resets it, but in kbc-ui the legacy Bootstrap layer (which sits\n// above the preflight so Bootstrap padding survives on its own elements) re-applies\n// `ul { margin-bottom: 10px }`, which then inflates this menu's height and pushes the whole\n// navbar row off-center. Resetting the margin explicitly (utilities beat the legacy layer)\n// keeps the row centered everywhere.\nconst variants = cva(\n  ['tw:m-0', 'tw:p-0', 'tw:flex', 'tw:items-center', 'tw:justify-center', 'tw:gap-2'],\n  {\n    variants: {\n      marker: {\n        none: [],\n        'forward-slash': [\n          // Style all li children with pseudo-element marker\n          'tw:[&_li]:flex',\n          'tw:[&_li]:items-center',\n          'tw:[&_li]:before:content-[\"/\"]',\n          'tw:[&_li]:before:text-border',\n          'tw:[&_li]:before:text-sm',\n          'tw:[&_li]:before:mr-0.5',\n          'tw:[&_li:not(:first-child)]:before:ml-0.5',\n        ],\n      },\n    },\n    defaultVariants: {\n      marker: 'none',\n    },\n  },\n);\n\ntype Props = ComponentProps<'ul'> & VariantProps<typeof variants>;\n\nexport const NavbarMenu = ({ className, marker, ...rest }: Props) => (\n  <ul {...rest} className={variants({ marker, className })} />\n);\n","import type { ComponentProps } from 'react';\nimport * as RadixAvatar from '@radix-ui/react-avatar';\nimport BoringAvatar from 'boring-avatars';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'> & {\n  src?: string;\n  alt?: string;\n};\n\nexport const NavbarMenuAvatar = ({ ref, className, type = 'button', src, alt, ...rest }: Props) => {\n  const altText = alt ?? 'Avatar';\n\n  return (\n    <button\n      {...rest}\n      ref={ref}\n      type={type}\n      className={cn(\n        'tw:flex',\n        'tw:items-center',\n        'tw:justify-center',\n        'tw:size-8',\n\n        'tw:aspect-square',\n        'tw:overflow-hidden',\n        'tw:shrink-0',\n\n        'tw:rounded-lg',\n        'tw:bg-transparent',\n        'tw:cursor-pointer',\n\n        // Disabled state\n        'tw:disabled:opacity-disabled',\n        'tw:disabled:cursor-not-allowed',\n\n        // Focus-visible (matches SidebarMenuButton exactly)\n        'tw:focus-visible:outline-hidden',\n        'tw:focus-visible:ring-2',\n        'tw:focus-visible:ring-sidebar-ring/50',\n        className,\n      )}\n    >\n      <RadixAvatar.Root>\n        <RadixAvatar.Image src={src} alt={altText} className=\"tw:size-full tw:object-cover\" />\n\n        <RadixAvatar.Fallback asChild>\n          <BoringAvatar\n            square\n            name={altText}\n            variant=\"beam\"\n            colors={['#1F8FFF', '#004787', '#28D8FF', '#925cff', '#A8C2E6']}\n            size={32}\n          />\n        </RadixAvatar.Fallback>\n      </RadixAvatar.Root>\n    </button>\n  );\n};\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nconst variants = cva(\n  [\n    'tw:flex',\n    'tw:justify-center',\n    'tw:items-center',\n\n    'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n    'tw:[&:not(svg)]:h-5',\n    'tw:[&:not(svg)]:min-w-5',\n\n    'tw:p-1',\n    'tw:aspect-square',\n    'tw:rounded-md',\n  ],\n  {\n    defaultVariants: { variant: 'icon-accent' },\n    variants: {\n      variant: {\n        icon: ['tw:text-sidebar-foreground', 'tw:[&_svg]:text-sidebar-foreground'],\n        'icon-emphasized': ['tw:text-white', 'tw:[&_svg]:text-white'],\n        'icon-accent': [\n          // color-aware accent styling\n          'tw:group-data-[accent=blue]/navbar:text-sidebar-primary',\n          'tw:group-data-[accent=blue]/navbar:[&_svg]:text-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:text-purple-500',\n          'tw:group-data-[accent=purple]/navbar:[&_svg]:text-purple-500',\n          'tw:group-data-[accent=orange]/navbar:text-warning-500',\n          'tw:group-data-[accent=orange]/navbar:[&_svg]:text-warning-500',\n          'tw:group-data-[accent=green]/navbar:text-primary-500',\n          'tw:group-data-[accent=green]/navbar:[&_svg]:text-primary-500',\n        ],\n        'icon-accent-emphasized': [\n          'tw:text-white',\n          'tw:[&_svg]:text-white',\n\n          'tw:group-data-[accent=blue]/navbar:bg-sidebar-primary',\n          'tw:group-data-[accent=purple]/navbar:bg-purple-500',\n          'tw:group-data-[accent=orange]/navbar:bg-warning-500',\n          'tw:group-data-[accent=green]/navbar:bg-primary-500',\n        ],\n        'icon-button': ['tw:size-4', 'tw:!p-0', 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4'],\n        shortcut: ['tw:bg-muted', 'tw:text-sidebar-foreground', 'tw:ml-auto'],\n      },\n    },\n  },\n);\n\ntype Props = { asChild?: boolean } & ComponentProps<'span'> & VariantProps<typeof variants>;\n\nexport const NavbarMenuItemAdornment = ({\n  ref,\n  asChild = false,\n  className,\n  variant = 'icon-accent',\n  ...props\n}: Props) => {\n  const Comp = asChild ? Slot : 'span';\n\n  return <Comp {...props} ref={ref} className={variants({ variant, className })} />;\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Root, Slottable } from '@radix-ui/react-slot';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Search } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst variants = cva(\n  [\n    'tw:group/navbar-menu-button',\n    'tw:box-border',\n    'tw:flex',\n    'tw:items-center',\n    'tw:gap-2',\n    'tw:bg-transparent',\n\n    'tw:leading-9',\n\n    'tw:border',\n    'tw:rounded-lg',\n    'tw:whitespace-nowrap',\n    'tw:select-none',\n\n    // focus-visible\n    'tw:!outline-hidden',\n    'tw:focus-visible:ring-2',\n    'tw:focus-visible:ring-sidebar-ring/50',\n\n    // disabled\n    'tw:disabled:opacity-disabled',\n    'tw:disabled:hover:bg-transparent',\n    'tw:disabled:cursor-not-allowed',\n  ],\n  {\n    defaultVariants: {\n      variant: 'default',\n    },\n    variants: {\n      variant: {\n        default: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-hover',\n          'tw:aria-expanded:bg-sidebar-hover',\n\n          // Active page. Mirrors `Sidebar.MenuButton`, which styles `aria-current=\"page\"` — a top nav\n          // needs the same affordance, and without it a Navbar-shelled app cannot show where you are.\n          // `aria-current` rather than a prop: with `asChild` the slot is an <a>, and that is the\n          // attribute a router sets on an active link (TanStack's `Link` does it for free).\n          'tw:aria-[current=page]:bg-sidebar-selected',\n          'tw:aria-[current=page]:hover:bg-sidebar-selected',\n          'tw:aria-[current=page]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]',\n          'tw:aria-[current=page]:font-medium',\n        ],\n        emphasized: [\n          'tw:max-h-9',\n          'tw:border-transparent',\n          'tw:py-2',\n          'tw:px-1.5',\n\n          'tw:text-sidebar-foreground',\n          'tw:hover:bg-sidebar-hover',\n          'tw:aria-expanded:bg-sidebar-hover',\n\n          'tw:aria-[current=page]:bg-sidebar-selected',\n          'tw:aria-[current=page]:hover:bg-sidebar-selected',\n          'tw:aria-[current=page]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]',\n\n          'tw:font-semibold',\n        ],\n        icon: [\n          'tw:size-8',\n          'tw:aspect-square',\n          'tw:justify-center',\n          'tw:font-normal',\n          'tw:border-transparent',\n          'tw:text-primary',\n          'tw:[&_svg]:!text-primary',\n          'tw:hover:bg-sidebar-hover',\n          'tw:aria-expanded:bg-sidebar-hover',\n        ],\n        search: [\n          'tw:max-h-8',\n          'tw:min-w-52',\n          'tw:px-3',\n          'tw:py-1',\n          'tw:font-normal',\n          'tw:border-input',\n          'tw:text-muted-foreground',\n          'tw:[&_svg]:!text-muted-foreground',\n        ],\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'button'> & {\n  /** Optional leading-icon slot. Pass a Lucide icon node to render an adornment before children. */\n  icon?: ReactNode;\n  asChild?: boolean;\n} & VariantProps<typeof variants>;\n\nexport const NavbarMenuButton = ({\n  ref,\n  className,\n  type = 'button',\n  children,\n  icon,\n  asChild = false,\n  variant = 'default',\n  ...rest\n}: Props) => {\n  const Comp = asChild ? Root : 'button';\n  const isSearchVariant = variant === 'search';\n  const isEmphasizedVariant = variant === 'emphasized';\n  const adornment = isSearchVariant ? <Search /> : icon;\n\n  const adornmentVariant: ComponentProps<typeof NavbarMenuItemAdornment>['variant'] = (() => {\n    if (isSearchVariant || variant === 'icon') return 'icon-button';\n    if (isEmphasizedVariant) return 'icon-accent-emphasized';\n    return 'icon-accent';\n  })();\n\n  return (\n    <Comp\n      {...rest}\n      ref={ref}\n      type={type}\n      data-variant={variant}\n      className={cn(variants({ className, variant }))}\n    >\n      {adornment && (\n        <NavbarMenuItemAdornment variant={adornmentVariant}>{adornment}</NavbarMenuItemAdornment>\n      )}\n\n      <Slottable>{children}</Slottable>\n    </Comp>\n  );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const NavbarMenuItem = ({ className, ...rest }: Props) => (\n  <li {...rest} className={cn('tw:flex', 'tw:items-center', 'tw:gap-2', className)} />\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { NavbarContent } from './NavbarContent';\nimport { NavbarFooter } from './NavbarFooter';\nimport { NavbarHeader } from './NavbarHeader';\nimport { NavbarMenu } from './NavbarMenu';\nimport { NavbarMenuAvatar } from './NavbarMenuAvatar';\nimport { NavbarMenuButton } from './NavbarMenuButton';\nimport { NavbarMenuItem } from './NavbarMenuItem';\nimport { NavbarMenuItemAdornment } from './NavbarMenuItemAdornment';\n\nconst navbarClassnames = cva(\n  [\n    'tailwindcss-preflight',\n    'tw:group/navbar',\n    'tw:sticky',\n    'tw:top-0',\n    'tw:z-50',\n    'tw:flex',\n    'tw:gap-2',\n    'tw:items-center',\n\n    // The left side is intentionally smaller to align the logo with the sidebar icons.\n    'tw:pl-2',\n    'tw:pr-3',\n\n    'tw:bg-sidebar',\n    // Required with `bg-sidebar`: otherwise `currentColor` (text, `BrandLogo`) is black on dark.\n    'tw:text-sidebar-foreground',\n    'tw:text-xs',\n    'tw:leading-4',\n  ],\n  {\n    defaultVariants: {\n      bordered: false,\n    },\n    variants: {\n      bordered: {\n        true: [\n          'tw:before:content',\n          'tw:before:h-0.5',\n          'tw:before:w-full',\n          'tw:before:absolute',\n          'tw:before:left-0',\n          'tw:before:top-0',\n          'tw:data-[accent=blue]:before:bg-sidebar-primary',\n          'tw:data-[accent=purple]:before:bg-purple-500',\n          'tw:data-[accent=green]:before:bg-primary-500',\n          'tw:data-[accent=orange]:before:bg-warning-500',\n        ],\n        false: '',\n      },\n    },\n  },\n);\n\ntype Props = ComponentProps<'nav'> &\n  VariantProps<typeof navbarClassnames> & {\n    accent?: 'blue' | 'purple' | 'green' | 'orange';\n  };\n\n/**\n * Top navigation bar for the app shell, hosted inside `<AppShell.Header>`.\n *\n * - Composition: `Navbar.Header` (brand), `Navbar.Content` (scrollable menu), `Navbar.Footer`.\n * - `bordered` adds a top hairline coloured by `accent`.\n * - Override the default `aria-label` when a page has more than one nav.\n *\n * @see AppShell — the sidebar rail uses `Sidebar` instead.\n */\nexport const Navbar = ({ className, accent = 'blue', bordered = false, ...rest }: Props) => (\n  // - `<nav>`, not `<header>`: `AppShell.Header` is already the `<header>` landmark.\n  // - `aria-label` precedes `...rest` so a caller's label wins.\n  <nav\n    aria-label=\"Main navigation\"\n    {...rest}\n    data-slot=\"navbar\"\n    data-accent={accent}\n    className={navbarClassnames({ bordered, className })}\n  />\n);\n\nNavbar.Header = NavbarHeader;\nNavbar.Footer = NavbarFooter;\nNavbar.Content = NavbarContent;\n\nNavbar.Menu = NavbarMenu;\nNavbar.MenuItem = NavbarMenuItem;\nNavbar.MenuButton = NavbarMenuButton;\nNavbar.MenuItemAdornment = NavbarMenuItemAdornment;\nNavbar.MenuAvatar = NavbarMenuAvatar;\n"],"mappings":";;;;;;;;;;AAUA,MAAa,iBAAiB,EAAE,UAAU,gBACxC,oBAAC,YAAD;CACE,MAAK;CACL,aAAY;CACZ,WAAU;CACV,oBAAmB;CAEnB,UAAA,oBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,aAAa,SAAS;EAAI;CAAc,CAAA;AAC5D,CAAA;;ACNd,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,8CAA8C,SAAS;CACjF;AACE,CAAA;;ACRP,MAAa,gBAAgB,EAAE,UAAU,WAAW,GAAG,WAGrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,sBAAsB,aAAa,SAAS;CACtE,UAAA,YAAY,oBAAC,WAAD;EAAW,SAAQ;EAAW,WAAU;CAAU,CAAA;AAC5D,CAAA;;ACFP,MAAMA,aAAW,IACf;CAAC;CAAU;CAAU;CAAW;CAAmB;CAAqB;AAAU,GAClF;CACE,UAAU,EACR,QAAQ;EACN,MAAM,CAAC;EACP,iBAAiB;GAEf;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CACF;AAIA,MAAa,cAAc,EAAE,WAAW,QAAQ,GAAG,WACjD,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAWA,WAAS;EAAE;EAAQ;CAAU,CAAC;AAAI,CAAA;;AC1B7D,MAAa,oBAAoB,EAAE,KAAK,WAAW,OAAO,UAAU,KAAK,KAAK,GAAG,WAAkB;CACjG,MAAM,UAAU,OAAO;CAEvB,OACE,oBAAC,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GACT,WACA,mBACA,qBACA,aAEA,oBACA,sBACA,eAEA,iBACA,qBACA,qBAGA,gCACA,kCAGA,mCACA,2BACA,yCACA,SACF;EAEA,UAAA,qBAAC,YAAY,MAAb,EAAA,UAAA,CACE,oBAAC,YAAY,OAAb;GAAwB;GAAK,KAAK;GAAS,WAAU;EAAgC,CAAA,GAErF,oBAAC,YAAY,UAAb;GAAsB,SAAA;GACpB,UAAA,oBAAC,cAAD;IACE,QAAA;IACA,MAAM;IACN,SAAQ;IACR,QAAQ;KAAC;KAAW;KAAW;KAAW;KAAW;IAAS;IAC9D,MAAM;GACP,CAAA;EACmB,CAAA,CACN,EAAA,CAAA;CACZ,CAAA;AAEZ;;ACtDA,MAAMC,aAAW,IACf;CACE;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EAAE,SAAS,cAAc;CAC1C,UAAU,EACR,SAAS;EACP,MAAM,CAAC,8BAA8B,oCAAoC;EACzE,mBAAmB,CAAC,iBAAiB,uBAAuB;EAC5D,eAAe;GAEb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,0BAA0B;GACxB;GACA;GAEA;GACA;GACA;GACA;EACF;EACA,eAAe;GAAC;GAAa;GAAW;EAA4C;EACpF,UAAU;GAAC;GAAe;GAA8B;EAAY;CACtE,EACF;AACF,CACF;AAIA,MAAa,2BAA2B,EACtC,KACA,UAAU,OACV,WACA,UAAU,eACV,GAAG,YACQ;CAGX,OAAO,oBAFM,UAAU,OAAO,QAEvB;EAAM,GAAI;EAAY;EAAK,WAAWA,WAAS;GAAE;GAAS;EAAU,CAAC;CAAI,CAAA;AAClF;;ACtDA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GAMA;GACA;GACA;GACA;EACF;EACA,YAAY;GACV;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GAEA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CACF;AAQA,MAAa,oBAAoB,EAC/B,KACA,WACA,OAAO,UACP,UACA,MACA,UAAU,OACV,UAAU,WACV,GAAG,WACQ;CACX,MAAM,OAAO,UAAU,OAAO;CAC9B,MAAM,kBAAkB,YAAY;CACpC,MAAM,sBAAsB,YAAY;CACxC,MAAM,YAAY,kBAAkB,oBAAC,QAAD,CAAS,CAAA,IAAI;CAEjD,MAAM,0BAAqF;EACzF,IAAI,mBAAmB,YAAY,QAAQ,OAAO;EAClD,IAAI,qBAAqB,OAAO;EAChC,OAAO;CACT,EAAA,CAAG;CAEH,OACE,qBAAC,MAAD;EACE,GAAI;EACC;EACC;EACN,gBAAc;EACd,WAAW,GAAG,SAAS;GAAE;GAAW;EAAQ,CAAC,CAAC;EALhD,UAAA,CAOG,aACC,oBAAC,yBAAD;GAAyB,SAAS;GAAmB,UAAA;EAAmC,CAAA,GAG1F,oBAAC,WAAD,EAAY,SAAoB,CAAA,CAC5B;;AAEV;;AC1IA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAC7C,oBAAC,MAAD;CAAI,GAAI;CAAM,WAAW,GAAG,WAAW,mBAAmB,YAAY,SAAS;AAAI,CAAA;;ACMrF,MAAM,mBAAmB,IACvB;CACE;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB,EACf,UAAU,MACZ;CACA,UAAU,EACR,UAAU;EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;CACT,EACF;AACF,CACF;;;;;;;;;;AAgBA,MAAa,UAAU,EAAE,WAAW,SAAS,QAAQ,WAAW,OAAO,GAAG,WAGxE,oBAAC,OAAD;CACE,cAAW;CACX,GAAI;CACJ,aAAU;CACV,eAAa;CACb,WAAW,iBAAiB;EAAE;EAAU;CAAU,CAAC;AACpD,CAAA;AAGH,OAAO,SAAS;AAChB,OAAO,SAAS;AAChB,OAAO,UAAU;AAEjB,OAAO,OAAO;AACd,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,OAAO,oBAAoB;AAC3B,OAAO,aAAa"}

package/dist/{PageLayout-LcvJccOW.js → PageLayout-kY31oUix.js}

@@ -122,7 +122,7 @@ const Content = ({ ref, className, nav, children, ...props }) => {
 			className: "tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4",
 			children: [/* @__PURE__ */ jsx("div", {
 				"data-slot": "page-layout-nav",
-				className: "tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]",
+				className: "tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]",
 				children: nav
 			}), /* @__PURE__ */ jsx("div", {
 				"data-slot": "page-layout-content-body",
@@ -162,4 +162,4 @@ const PageLayout = Object.assign(Root, {
 });
 export { PageLayout };
 
-//# sourceMappingURL=PageLayout-LcvJccOW.js.map
+//# sourceMappingURL=PageLayout-kY31oUix.js.map

package/dist/{PageLayout-LcvJccOW.js.map → PageLayout-kY31oUix.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageLayout-LcvJccOW.js","names":[],"sources":["../src/blocks/SectionNav/constants.ts","../src/blocks/PageLayout/context.ts","../src/blocks/PageLayout/PageLayout.tsx"],"sourcesContent":["/**\n * Names the container query `SectionNav` reads to pick the tree over the dropdown.\n *\n * It has to sit on an **ancestor**: a container query matches descendants only, so the element that\n * names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose\n * width is what the switch changes (256px in a row, full width in a column), which would oscillate.\n * `PageLayout.Content nav={…}` puts it on the right element for you.\n */\nexport const SECTION_NAV_CONTAINER = 'tw:@container/section-nav';\n","import { createContext, use } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS\n * custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.\n *\n * A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:\n * `PageLayout.Footer` is already documented as usable on its own.\n */\nexport const PageLayoutRootContext = createContext<RefObject<HTMLDivElement | null> | null>(null);\n\nexport const usePageLayoutRoot = () => use(PageLayoutRootContext);\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { SECTION_NAV_CONTAINER } from '../SectionNav/constants';\n\nimport { PageLayoutRootContext, usePageLayoutRoot } from './context';\n\n/** `maxWidth`: `narrow` for forms, `default` for most pages, `wide` for dense detail views, `full` edge-to-edge. */\ntype RootProps = ComponentProps<'div'> & {\n  maxWidth?: 'default' | 'narrow' | 'wide' | 'full';\n};\n\nconst maxWidthClass = {\n  narrow: 'tw:max-w-[976px]',\n  default: 'tw:max-w-[1280px]',\n  wide: 'tw:max-w-[1600px]',\n  full: 'tw:max-w-full',\n} as const;\n\nconst Root = ({ ref, className, maxWidth = 'full', children, ...props }: RootProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <PageLayoutRootContext value={rootRef}>\n      <div\n        ref={mergeRefs(ref ?? null, rootRef)}\n        className={cn(\n          'tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto',\n          maxWidthClass[maxWidth],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </PageLayoutRootContext>\n  );\n};\n\nconst Breadcrumbs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div ref={ref} className={cn('tw:w-full', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst STICKY_CHROME_BLEED =\n  'tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background';\n\ntype HeaderProps = ComponentProps<'header'> & {\n  sticky?: boolean;\n};\n\nconst Header = ({ ref, className, sticky = false, children, ...props }: HeaderProps) => {\n  const rootRef = usePageLayoutRoot();\n  const headerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const header = headerRef.current;\n    const root = rootRef?.current;\n\n    if (!sticky || !header || !root || typeof ResizeObserver === 'undefined') return;\n\n    const publish = () => {\n      root.style.setProperty(\n        '--page-header-height',\n        `${Math.round(header.getBoundingClientRect().height)}px`,\n      );\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(header);\n    publish();\n\n    return () => {\n      observer.disconnect();\n      root.style.removeProperty('--page-header-height');\n    };\n  }, [sticky, rootRef]);\n\n  return (\n    <header\n      ref={mergeRefs(ref ?? null, headerRef)}\n      className={cn(\n        'tw:w-full',\n        sticky && ['tw:sticky tw:top-0 tw:z-20 tw:bg-background', STICKY_CHROME_BLEED],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {sticky && (\n        <div\n          aria-hidden\n          className=\"tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]\"\n        />\n      )}\n    </header>\n  );\n};\n\nconst Tabs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:w-full tw:items-center tw:border-b tw:border-border', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ContentProps = ComponentProps<'div'> & {\n  nav?: ReactNode;\n};\n\nconst scrollParent = (from: HTMLElement): HTMLElement | null => {\n  for (let el = from.parentElement; el; el = el.parentElement) {\n    if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;\n  }\n\n  return null;\n};\n\nconst useAvailableHeight = () => {\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = rowRef.current;\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const scroller = scrollParent(row);\n\n    const publish = () => {\n      const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);\n      const room = scroller\n        ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top)\n        : window.innerHeight - top;\n\n      row.style.setProperty('--section-nav-available', `${Math.max(0, Math.round(room))}px`);\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(row);\n    if (scroller) observer.observe(scroller);\n    publish();\n\n    return () => observer.disconnect();\n  }, []);\n\n  return rowRef;\n};\n\nconst Content = ({ ref, className, nav, children, ...props }: ContentProps) => {\n  const rowRef = useAvailableHeight();\n\n  if (!nav) {\n    return (\n      <div\n        ref={ref}\n        className={cn('tw:flex tw:w-full tw:flex-1 tw:flex-col', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col',\n        SECTION_NAV_CONTAINER,\n        className,\n      )}\n      {...props}\n    >\n      <div\n        ref={rowRef}\n        className=\"tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4\"\n      >\n        <div\n          data-slot=\"page-layout-nav\"\n          className=\"tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]\"\n        >\n          {nav}\n        </div>\n        <div\n          data-slot=\"page-layout-content-body\"\n          className=\"tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype FooterProps = ComponentProps<'footer'> & {\n  sticky?: boolean;\n};\n\nconst Footer = ({ ref, className, sticky = false, children, ...props }: FooterProps) => (\n  <footer\n    ref={ref}\n    className={cn(\n      'tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4',\n      sticky && ['tw:sticky tw:bottom-0 tw:z-10', STICKY_CHROME_BLEED],\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </footer>\n);\n\n/**\n * Page chrome for every new kbc-ui page: max-width column + vertical rhythm + named slots.\n *\n * - No outer padding: the shell owns the gutter to the app frame.\n * - Not for modal bodies or embedded widgets; the `Sidebar` lives in the app shell.\n * - Search / filter pills go in `PageToolbar`, never in the header.\n *\n * @see RECIPES.md#list-detail\n * @see RECIPES.md#section-nav\n */\nexport const PageLayout = Object.assign(Root, {\n  /** Usually composed by `PageHeader.Detail`; for layouts that fit neither `PageHeader` variant. */\n  Breadcrumbs,\n  /** `sticky` also publishes its height as `--page-header-height`, which `Content nav` pins to. */\n  Header,\n  /** Routing-based tab rows; use `Tabs` / `TabsContent` inside, never a raw `<button>`. */\n  Tabs,\n  /** `nav` (a `SectionNav`) makes it a two-column layout. */\n  Content,\n  /** Form submit bar; `sticky` pins it to the viewport. */\n  Footer,\n});\n"],"mappings":"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"}
+{"version":3,"file":"PageLayout-kY31oUix.js","names":[],"sources":["../src/blocks/SectionNav/constants.ts","../src/blocks/PageLayout/context.ts","../src/blocks/PageLayout/PageLayout.tsx"],"sourcesContent":["/**\n * Names the container query `SectionNav` reads to pick the tree over the dropdown.\n *\n * It has to sit on an **ancestor**: a container query matches descendants only, so the element that\n * names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose\n * width is what the switch changes (256px in a row, full width in a column), which would oscillate.\n * `PageLayout.Content nav={…}` puts it on the right element for you.\n */\nexport const SECTION_NAV_CONTAINER = 'tw:@container/section-nav';\n","import { createContext, use } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS\n * custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.\n *\n * A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:\n * `PageLayout.Footer` is already documented as usable on its own.\n */\nexport const PageLayoutRootContext = createContext<RefObject<HTMLDivElement | null> | null>(null);\n\nexport const usePageLayoutRoot = () => use(PageLayoutRootContext);\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { SECTION_NAV_CONTAINER } from '../SectionNav/constants';\n\nimport { PageLayoutRootContext, usePageLayoutRoot } from './context';\n\n/** `maxWidth`: `narrow` for forms, `default` for most pages, `wide` for dense detail views, `full` edge-to-edge. */\ntype RootProps = ComponentProps<'div'> & {\n  maxWidth?: 'default' | 'narrow' | 'wide' | 'full';\n};\n\nconst maxWidthClass = {\n  narrow: 'tw:max-w-[976px]',\n  default: 'tw:max-w-[1280px]',\n  wide: 'tw:max-w-[1600px]',\n  full: 'tw:max-w-full',\n} as const;\n\nconst Root = ({ ref, className, maxWidth = 'full', children, ...props }: RootProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  return (\n    <PageLayoutRootContext value={rootRef}>\n      <div\n        ref={mergeRefs(ref ?? null, rootRef)}\n        className={cn(\n          'tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto',\n          maxWidthClass[maxWidth],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </PageLayoutRootContext>\n  );\n};\n\nconst Breadcrumbs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div ref={ref} className={cn('tw:w-full', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst STICKY_CHROME_BLEED =\n  'tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background';\n\ntype HeaderProps = ComponentProps<'header'> & {\n  sticky?: boolean;\n};\n\nconst Header = ({ ref, className, sticky = false, children, ...props }: HeaderProps) => {\n  const rootRef = usePageLayoutRoot();\n  const headerRef = useRef<HTMLElement>(null);\n\n  useEffect(() => {\n    const header = headerRef.current;\n    const root = rootRef?.current;\n\n    if (!sticky || !header || !root || typeof ResizeObserver === 'undefined') return;\n\n    const publish = () => {\n      root.style.setProperty(\n        '--page-header-height',\n        `${Math.round(header.getBoundingClientRect().height)}px`,\n      );\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(header);\n    publish();\n\n    return () => {\n      observer.disconnect();\n      root.style.removeProperty('--page-header-height');\n    };\n  }, [sticky, rootRef]);\n\n  return (\n    <header\n      ref={mergeRefs(ref ?? null, headerRef)}\n      className={cn(\n        'tw:w-full',\n        sticky && ['tw:sticky tw:top-0 tw:z-20 tw:bg-background', STICKY_CHROME_BLEED],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {sticky && (\n        <div\n          aria-hidden\n          className=\"tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]\"\n        />\n      )}\n    </header>\n  );\n};\n\nconst Tabs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:w-full tw:items-center tw:border-b tw:border-border', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ContentProps = ComponentProps<'div'> & {\n  nav?: ReactNode;\n};\n\nconst scrollParent = (from: HTMLElement): HTMLElement | null => {\n  for (let el = from.parentElement; el; el = el.parentElement) {\n    if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;\n  }\n\n  return null;\n};\n\nconst useAvailableHeight = () => {\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = rowRef.current;\n\n    if (!row || typeof ResizeObserver === 'undefined') return;\n\n    const scroller = scrollParent(row);\n\n    const publish = () => {\n      const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);\n      const room = scroller\n        ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top)\n        : window.innerHeight - top;\n\n      row.style.setProperty('--section-nav-available', `${Math.max(0, Math.round(room))}px`);\n    };\n\n    const observer = new ResizeObserver(publish);\n\n    observer.observe(row);\n    if (scroller) observer.observe(scroller);\n    publish();\n\n    return () => observer.disconnect();\n  }, []);\n\n  return rowRef;\n};\n\nconst Content = ({ ref, className, nav, children, ...props }: ContentProps) => {\n  const rowRef = useAvailableHeight();\n\n  if (!nav) {\n    return (\n      <div\n        ref={ref}\n        className={cn('tw:flex tw:w-full tw:flex-1 tw:flex-col', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col',\n        SECTION_NAV_CONTAINER,\n        className,\n      )}\n      {...props}\n    >\n      <div\n        ref={rowRef}\n        className=\"tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4\"\n      >\n        <div\n          data-slot=\"page-layout-nav\"\n          className=\"tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]\"\n        >\n          {nav}\n        </div>\n        <div\n          data-slot=\"page-layout-content-body\"\n          className=\"tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n\ntype FooterProps = ComponentProps<'footer'> & {\n  sticky?: boolean;\n};\n\nconst Footer = ({ ref, className, sticky = false, children, ...props }: FooterProps) => (\n  <footer\n    ref={ref}\n    className={cn(\n      'tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4',\n      sticky && ['tw:sticky tw:bottom-0 tw:z-10', STICKY_CHROME_BLEED],\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </footer>\n);\n\n/**\n * Page chrome for every new kbc-ui page: max-width column + vertical rhythm + named slots.\n *\n * - No outer padding: the shell owns the gutter to the app frame.\n * - Not for modal bodies or embedded widgets; the `Sidebar` lives in the app shell.\n * - Search / filter pills go in `PageToolbar`, never in the header.\n *\n * @see RECIPES.md#list-detail\n * @see RECIPES.md#section-nav\n */\nexport const PageLayout = Object.assign(Root, {\n  /** Usually composed by `PageHeader.Detail`; for layouts that fit neither `PageHeader` variant. */\n  Breadcrumbs,\n  /** `sticky` also publishes its height as `--page-header-height`, which `Content nav` pins to. */\n  Header,\n  /** Routing-based tab rows; use `Tabs` / `TabsContent` inside, never a raw `<button>`. */\n  Tabs,\n  /** `nav` (a `SectionNav`) makes it a two-column layout. */\n  Content,\n  /** Form submit bar; `sticky` pins it to the viewport. */\n  Footer,\n});\n"],"mappings":"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"}

package/dist/{PageToolbar-By2HznxO.js → PageToolbar-NmiausP7.js}

@@ -1,6 +1,6 @@
 import { cn } from "./classNames-DkX30VJU.js";
 import { ChevronDown, Plus, X } from "./icons-DDR9dFSr.js";
-import { Button } from "./Button-DbvGzEDb.js";
+import { Button } from "./Button-BAMX1iuI.js";
 import { Popover } from "./Popover-DhOPlWgF.js";
 import { Badge } from "./Badge-CFRhducL.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -118,4 +118,4 @@ const PageToolbar = Object.assign(Root, {
 });
 export { PageToolbar };
 
-//# sourceMappingURL=PageToolbar-By2HznxO.js.map
+//# sourceMappingURL=PageToolbar-NmiausP7.js.map

package/dist/{PageToolbar-By2HznxO.js.map → PageToolbar-NmiausP7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageToolbar-By2HznxO.js","names":[],"sources":["../src/blocks/PageToolbar/PageToolbarToken.tsx","../src/blocks/PageToolbar/PageToolbar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Popover } from '../../components/Popover';\nimport { ChevronDown, X } from '../../icons';\n\ntype PageToolbarTokenProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'\n> & {\n  children: ReactNode;\n  /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */\n  popover: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\n/**\n * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`\n * popover trigger for editing values and an `×` dismiss button. The popover content\n * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).\n */\nexport const PageToolbarToken = ({\n  children,\n  popover,\n  onRemove,\n  removeAriaLabel,\n  ...props\n}: PageToolbarTokenProps) => (\n  <Popover>\n    <Badge\n      {...props}\n      asChild\n      variant=\"pill\"\n      color=\"blue-inverse\"\n      suffix={\n        <Button\n          type=\"button\"\n          variant=\"inline\"\n          size=\"icon-2xs\"\n          aria-label={removeAriaLabel}\n          onClick={onRemove}\n        >\n          <X className=\"tw:size-3\" />\n        </Button>\n      }\n    >\n      <Popover.Trigger\n        type=\"button\"\n        className=\"tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-inherit tw:text-inherit tailwindcss-preflight\"\n      >\n        {children}\n        <ChevronDown className=\"tw:size-3\" />\n      </Popover.Trigger>\n    </Badge>\n    <Popover.Content align=\"start\">{popover}</Popover.Content>\n  </Popover>\n);\n","import type { ComponentProps, ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Plus, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PageToolbarToken } from './PageToolbarToken';\n\ntype DivProps = ComponentProps<'div'>;\n\nconst Root = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:w-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Search = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn(\n      'tw:mr-auto tw:flex tw:items-center tw:gap-2 tw:w-full tw:sm:w-auto tw:sm:min-w-64 tw:sm:max-w-md',\n      // The search field fills the slot, else it stays content-width and truncates its placeholder.\n      // - First child only: stretching the filter pills after it would size them like the input.\n      // - `min-w-0` so a long value shrinks the input rather than overflowing the toolbar.\n      'tw:*:first:min-w-0 tw:*:first:flex-1',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Right = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst ControlGroup = ({ ref, className, children, ...props }: DivProps) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:basis-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ChipProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children'\n> & {\n  children: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\nconst Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (\n  <Badge\n    {...props}\n    variant=\"pill\"\n    color=\"blue-inverse\"\n    suffix={\n      <Button\n        type=\"button\"\n        variant=\"inline\"\n        size=\"icon-2xs\"\n        aria-label={removeAriaLabel}\n        onClick={onRemove}\n      >\n        <X className=\"tw:size-3\" />\n      </Button>\n    }\n  >\n    {children}\n  </Badge>\n);\n\ntype ActionProps = ComponentPropsWithoutRef<typeof Button>;\n\nconst AddFilter = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:gap-1.5', className)} {...props}>\n    <Plus className=\"tw:size-4\" />\n    {children ?? 'Add filter'}\n  </Button>\n);\n\nconst Clear = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:ml-auto', className)} {...props}>\n    {children ?? 'Clear all'}\n  </Button>\n);\n\n/**\n * Search / filter toolbar for index pages, between `PageLayout.Header` and `PageLayout.Content`.\n *\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`; nothing after `View`.\n * - `ActiveFilters` only while a filter is active; chips or tokens, never both in one toolbar.\n *\n * @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md\n */\nexport const PageToolbar = Object.assign(Root, {\n  Search,\n  Right,\n  Filters: ControlGroup,\n  Sort: ControlGroup,\n  Actions: ControlGroup,\n  /** Always last in the right cluster. */\n  View: ControlGroup,\n  /** Render only while a filter is active. */\n  ActiveFilters,\n  /** Non-editable filter chip. */\n  Chip,\n  /** Editable filter token; the caller supplies the edit popover via `popover`. */\n  Token: PageToolbarToken,\n  AddFilter,\n  Clear,\n});\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,oBAAoB,EAC/B,UACA,SACA,UACA,iBACA,GAAG,YAEH,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,OAAD;CACE,GAAI;CACJ,SAAA;CACA,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGV,UAAA,qBAAC,QAAQ,SAAT;EACE,MAAK;EACL,WAAU;EAFZ,UAAA,CAIG,UACD,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,CACrB;;AACZ,CAAA,GACP,oBAAC,QAAQ,SAAT;CAAiB,OAAM;CAAS,UAAA;AAAyB,CAAA,CAClD,EAAA,CAAA;;AC9CX,MAAM,QAAQ,EAAE,KAAK,WAAW,UAAU,GAAG,YAC3C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,UAAU,EAAE,KAAK,WAAW,UAAU,GAAG,YAC7C,oBAAC,OAAD;CACO;CACL,WAAW,GACT,oGAIA,wCACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,SAAS,EAAE,KAAK,WAAW,UAAU,GAAG,YAC5C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,gBAAgB,EAAE,KAAK,WAAW,UAAU,GAAG,YACnD,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;CAC9E;AACE,CAAA;AAGP,MAAM,iBAAiB,EAAE,KAAK,WAAW,UAAU,GAAG,YACpD,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,+DAA+D,SAAS;CACtF,GAAI;CAEH;AACE,CAAA;AAYP,MAAM,QAAQ,EAAE,UAAU,UAAU,iBAAiB,GAAG,YACtD,oBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGT;AACI,CAAA;AAKT,MAAM,aAAa,EAAE,WAAW,UAAU,GAAG,YAC3C,qBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAArF,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC5B,YAAY,YACP;;AAGV,MAAM,SAAS,EAAE,WAAW,UAAU,GAAG,YACvC,oBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAClF,UAAA,YAAY;AACP,CAAA;;;;;;;;;AAWV,MAAa,cAAc,OAAO,OAAO,MAAM;CAC7C;CACA;CACA,SAAS;CACT,MAAM;CACN,SAAS;;CAET,MAAM;;CAEN;;CAEA;;CAEA,OAAO;CACP;CACA;AACF,CAAC"}
+{"version":3,"file":"PageToolbar-NmiausP7.js","names":[],"sources":["../src/blocks/PageToolbar/PageToolbarToken.tsx","../src/blocks/PageToolbar/PageToolbar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Popover } from '../../components/Popover';\nimport { ChevronDown, X } from '../../icons';\n\ntype PageToolbarTokenProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'\n> & {\n  children: ReactNode;\n  /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */\n  popover: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\n/**\n * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`\n * popover trigger for editing values and an `×` dismiss button. The popover content\n * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).\n */\nexport const PageToolbarToken = ({\n  children,\n  popover,\n  onRemove,\n  removeAriaLabel,\n  ...props\n}: PageToolbarTokenProps) => (\n  <Popover>\n    <Badge\n      {...props}\n      asChild\n      variant=\"pill\"\n      color=\"blue-inverse\"\n      suffix={\n        <Button\n          type=\"button\"\n          variant=\"inline\"\n          size=\"icon-2xs\"\n          aria-label={removeAriaLabel}\n          onClick={onRemove}\n        >\n          <X className=\"tw:size-3\" />\n        </Button>\n      }\n    >\n      <Popover.Trigger\n        type=\"button\"\n        className=\"tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-inherit tw:text-inherit tailwindcss-preflight\"\n      >\n        {children}\n        <ChevronDown className=\"tw:size-3\" />\n      </Popover.Trigger>\n    </Badge>\n    <Popover.Content align=\"start\">{popover}</Popover.Content>\n  </Popover>\n);\n","import type { ComponentProps, ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Plus, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PageToolbarToken } from './PageToolbarToken';\n\ntype DivProps = ComponentProps<'div'>;\n\nconst Root = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:w-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Search = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn(\n      'tw:mr-auto tw:flex tw:items-center tw:gap-2 tw:w-full tw:sm:w-auto tw:sm:min-w-64 tw:sm:max-w-md',\n      // The search field fills the slot, else it stays content-width and truncates its placeholder.\n      // - First child only: stretching the filter pills after it would size them like the input.\n      // - `min-w-0` so a long value shrinks the input rather than overflowing the toolbar.\n      'tw:*:first:min-w-0 tw:*:first:flex-1',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst Right = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nconst ControlGroup = ({ ref, className, children, ...props }: DivProps) => (\n  <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props}>\n    {children}\n  </div>\n);\n\nconst ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (\n  <div\n    ref={ref}\n    className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:basis-full', className)}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\ntype ChipProps = Omit<\n  ComponentPropsWithoutRef<typeof Badge>,\n  'variant' | 'color' | 'suffix' | 'children'\n> & {\n  children: ReactNode;\n  onRemove: () => void;\n  removeAriaLabel: string;\n};\n\nconst Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (\n  <Badge\n    {...props}\n    variant=\"pill\"\n    color=\"blue-inverse\"\n    suffix={\n      <Button\n        type=\"button\"\n        variant=\"inline\"\n        size=\"icon-2xs\"\n        aria-label={removeAriaLabel}\n        onClick={onRemove}\n      >\n        <X className=\"tw:size-3\" />\n      </Button>\n    }\n  >\n    {children}\n  </Badge>\n);\n\ntype ActionProps = ComponentPropsWithoutRef<typeof Button>;\n\nconst AddFilter = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:gap-1.5', className)} {...props}>\n    <Plus className=\"tw:size-4\" />\n    {children ?? 'Add filter'}\n  </Button>\n);\n\nconst Clear = ({ className, children, ...props }: ActionProps) => (\n  <Button variant=\"invisible\" size=\"small\" className={cn('tw:ml-auto', className)} {...props}>\n    {children ?? 'Clear all'}\n  </Button>\n);\n\n/**\n * Search / filter toolbar for index pages, between `PageLayout.Header` and `PageLayout.Content`.\n *\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`; nothing after `View`.\n * - `ActiveFilters` only while a filter is active; chips or tokens, never both in one toolbar.\n *\n * @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md\n */\nexport const PageToolbar = Object.assign(Root, {\n  Search,\n  Right,\n  Filters: ControlGroup,\n  Sort: ControlGroup,\n  Actions: ControlGroup,\n  /** Always last in the right cluster. */\n  View: ControlGroup,\n  /** Render only while a filter is active. */\n  ActiveFilters,\n  /** Non-editable filter chip. */\n  Chip,\n  /** Editable filter token; the caller supplies the edit popover via `popover`. */\n  Token: PageToolbarToken,\n  AddFilter,\n  Clear,\n});\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,oBAAoB,EAC/B,UACA,SACA,UACA,iBACA,GAAG,YAEH,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,OAAD;CACE,GAAI;CACJ,SAAA;CACA,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGV,UAAA,qBAAC,QAAQ,SAAT;EACE,MAAK;EACL,WAAU;EAFZ,UAAA,CAIG,UACD,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,CACrB;;AACZ,CAAA,GACP,oBAAC,QAAQ,SAAT;CAAiB,OAAM;CAAS,UAAA;AAAyB,CAAA,CAClD,EAAA,CAAA;;AC9CX,MAAM,QAAQ,EAAE,KAAK,WAAW,UAAU,GAAG,YAC3C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,UAAU,EAAE,KAAK,WAAW,UAAU,GAAG,YAC7C,oBAAC,OAAD;CACO;CACL,WAAW,GACT,oGAIA,wCACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,SAAS,EAAE,KAAK,WAAW,UAAU,GAAG,YAC5C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,gBAAgB,EAAE,KAAK,WAAW,UAAU,GAAG,YACnD,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;CAC9E;AACE,CAAA;AAGP,MAAM,iBAAiB,EAAE,KAAK,WAAW,UAAU,GAAG,YACpD,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,+DAA+D,SAAS;CACtF,GAAI;CAEH;AACE,CAAA;AAYP,MAAM,QAAQ,EAAE,UAAU,UAAU,iBAAiB,GAAG,YACtD,oBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGT;AACI,CAAA;AAKT,MAAM,aAAa,EAAE,WAAW,UAAU,GAAG,YAC3C,qBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAArF,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC5B,YAAY,YACP;;AAGV,MAAM,SAAS,EAAE,WAAW,UAAU,GAAG,YACvC,oBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAClF,UAAA,YAAY;AACP,CAAA;;;;;;;;;AAWV,MAAa,cAAc,OAAO,OAAO,MAAM;CAC7C;CACA;CACA,SAAS;CACT,MAAM;CACN,SAAS;;CAET,MAAM;;CAEN;;CAEA;;CAEA,OAAO;CACP;CACA;AACF,CAAC"}

package/dist/{Pagination-DrXTrvfD.js → Pagination-DidOPSPB.js}

@@ -1,6 +1,6 @@
 import { cn } from "./classNames-DkX30VJU.js";
 import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-DDR9dFSr.js";
-import { Button } from "./Button-DbvGzEDb.js";
+import { Button } from "./Button-BAMX1iuI.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/Pagination/PaginationButton.tsx
 const PaginationButton = ({ ref, active: isActive = false, className, children, size = "icon", ...props }) => /* @__PURE__ */ jsx(Button, {
@@ -60,4 +60,4 @@ Pagination.Next = PaginationNext;
 Pagination.Ellipsis = PaginationEllipsis;
 export { Pagination };
 
-//# sourceMappingURL=Pagination-DrXTrvfD.js.map
+//# sourceMappingURL=Pagination-DidOPSPB.js.map

package/dist/{Pagination-DrXTrvfD.js.map → Pagination-DidOPSPB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Pagination-DrXTrvfD.js","names":[],"sources":["../src/components/Pagination/PaginationButton.tsx","../src/components/Pagination/PaginationContent.tsx","../src/components/Pagination/PaginationEllipsis.tsx","../src/components/Pagination/PaginationItem.tsx","../src/components/Pagination/PaginationNext.tsx","../src/components/Pagination/PaginationPrevious.tsx","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype Props = {\n  active?: boolean;\n} & Omit<ComponentProps<typeof Button>, 'variant'>;\n\nexport const PaginationButton = ({\n  ref,\n  active: isActive = false,\n  className,\n  children,\n  size = 'icon',\n  ...props\n}: Props) => (\n  <Button\n    {...props}\n    ref={ref}\n    variant=\"invisible\"\n    size={size}\n    data-slot=\"pagination-link\"\n    aria-current={isActive ? 'page' : undefined}\n    data-active={isActive}\n    className={cn(\n      'tw:data-[active=true]:bg-selected',\n      'tw:data-[active=true]:text-selected-foreground',\n      'tw:data-[active=true]:border-selected',\n      className,\n    )}\n  >\n    {children}\n  </Button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'ul'>;\n\nexport const PaginationContent = ({ className, ...props }: Props) => (\n  <ul\n    {...props}\n    className={cn('tw:flex', 'tw:flex-row', 'tw:items-center', 'tw:gap-1', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { Ellipsis } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const PaginationEllipsis = ({ className, ...props }: Props) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\n      // layout\n      'tw:flex',\n      'tw:p-2.5',\n      'tw:items-center',\n      'tw:justify-center',\n\n      'tw:text-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  >\n    <Ellipsis />\n  </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const PaginationItem = ({ className, ...props }: Props) => (\n  <li className={cn('tw:list-none', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronRight } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationNext = ({ children, className, ...props }: Props) => (\n  <PaginationButton\n    {...props}\n    aria-label=\"Go to next page\"\n    size=\"medium\"\n    className={cn('tw:flex-row-reverse', className)}\n  >\n    <ChevronRight className=\"tw:size-5\" />\n    {children ?? 'Next'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronLeft } from '../../icons';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationPrevious = ({ children, ...props }: Props) => (\n  <PaginationButton {...props} size=\"medium\" aria-label=\"Go to previous page\">\n    <ChevronLeft className=\"tw:size-5\" />\n    {children ?? 'Previous'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\nimport { PaginationContent } from './PaginationContent';\nimport { PaginationEllipsis } from './PaginationEllipsis';\nimport { PaginationItem } from './PaginationItem';\nimport { PaginationNext } from './PaginationNext';\nimport { PaginationPrevious } from './PaginationPrevious';\n\ntype Props = ComponentProps<'nav'>;\n\nexport const Pagination = ({ className, ...props }: Props) => (\n  <nav\n    {...props}\n    aria-label=\"pagination\"\n    className={cn(\n      'tailwindcss-preflight',\n      'tw:mx-auto',\n      'tw:flex',\n      'tw:w-full',\n      'tw:justify-center',\n      className,\n    )}\n  />\n);\n\nPagination.Content = PaginationContent;\nPagination.Item = PaginationItem;\nPagination.Button = PaginationButton;\nPagination.Previous = PaginationPrevious;\nPagination.Next = PaginationNext;\nPagination.Ellipsis = PaginationEllipsis;\n"],"mappings":";;;;;AASA,MAAa,oBAAoB,EAC/B,KACA,QAAQ,WAAW,OACnB,WACA,UACA,OAAO,QACP,GAAG,YAEH,oBAAC,QAAD;CACE,GAAI;CACC;CACL,SAAQ;CACF;CACN,aAAU;CACV,gBAAc,WAAW,SAAS,KAAA;CAClC,eAAa;CACb,WAAW,GACT,qCACA,kDACA,yCACA,SACF;CAEC;AACK,CAAA;;AC3BV,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAChD,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GAAG,WAAW,eAAe,mBAAmB,YAAY,SAAS;AACjF,CAAA;;ACHH,MAAa,sBAAsB,EAAE,WAAW,GAAG,YACjD,oBAAC,QAAD;CACE,eAAY;CACZ,WAAW,GAET,WACA,YACA,mBACA,qBAEA,sBACA,gDACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,UAAD,CAAW,CAAA;AACP,CAAA;;AClBR,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,MAAD;CAAI,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;AAAQ,CAAA;;ACE5D,MAAa,kBAAkB,EAAE,UAAU,WAAW,GAAG,YACvD,qBAAC,kBAAD;CACE,GAAI;CACJ,cAAW;CACX,MAAK;CACL,WAAW,GAAG,uBAAuB,SAAS;CAJhD,UAAA,CAME,oBAAC,cAAD,EAAc,WAAU,YAAa,CAAA,GACpC,YAAY,MACG;;;ACVpB,MAAa,sBAAsB,EAAE,UAAU,GAAG,YAChD,qBAAC,kBAAD;CAAkB,GAAI;CAAO,MAAK;CAAS,cAAW;CAAtD,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,GACnC,YAAY,UACG;;;ACCpB,MAAa,cAAc,EAAE,WAAW,GAAG,YACzC,oBAAC,OAAD;CACE,GAAI;CACJ,cAAW;CACX,WAAW,GACT,yBACA,cACA,WACA,aACA,qBACA,SACF;AACD,CAAA;AAGH,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,WAAW"}
+{"version":3,"file":"Pagination-DidOPSPB.js","names":[],"sources":["../src/components/Pagination/PaginationButton.tsx","../src/components/Pagination/PaginationContent.tsx","../src/components/Pagination/PaginationEllipsis.tsx","../src/components/Pagination/PaginationItem.tsx","../src/components/Pagination/PaginationNext.tsx","../src/components/Pagination/PaginationPrevious.tsx","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype Props = {\n  active?: boolean;\n} & Omit<ComponentProps<typeof Button>, 'variant'>;\n\nexport const PaginationButton = ({\n  ref,\n  active: isActive = false,\n  className,\n  children,\n  size = 'icon',\n  ...props\n}: Props) => (\n  <Button\n    {...props}\n    ref={ref}\n    variant=\"invisible\"\n    size={size}\n    data-slot=\"pagination-link\"\n    aria-current={isActive ? 'page' : undefined}\n    data-active={isActive}\n    className={cn(\n      'tw:data-[active=true]:bg-selected',\n      'tw:data-[active=true]:text-selected-foreground',\n      'tw:data-[active=true]:border-selected',\n      className,\n    )}\n  >\n    {children}\n  </Button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'ul'>;\n\nexport const PaginationContent = ({ className, ...props }: Props) => (\n  <ul\n    {...props}\n    className={cn('tw:flex', 'tw:flex-row', 'tw:items-center', 'tw:gap-1', className)}\n  />\n);\n","import type { ComponentProps } from 'react';\n\nimport { Ellipsis } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const PaginationEllipsis = ({ className, ...props }: Props) => (\n  <span\n    aria-hidden=\"true\"\n    className={cn(\n      // layout\n      'tw:flex',\n      'tw:p-2.5',\n      'tw:items-center',\n      'tw:justify-center',\n\n      'tw:text-foreground',\n      'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n      className,\n    )}\n    {...props}\n  >\n    <Ellipsis />\n  </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const PaginationItem = ({ className, ...props }: Props) => (\n  <li className={cn('tw:list-none', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronRight } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationNext = ({ children, className, ...props }: Props) => (\n  <PaginationButton\n    {...props}\n    aria-label=\"Go to next page\"\n    size=\"medium\"\n    className={cn('tw:flex-row-reverse', className)}\n  >\n    <ChevronRight className=\"tw:size-5\" />\n    {children ?? 'Next'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronLeft } from '../../icons';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationPrevious = ({ children, ...props }: Props) => (\n  <PaginationButton {...props} size=\"medium\" aria-label=\"Go to previous page\">\n    <ChevronLeft className=\"tw:size-5\" />\n    {children ?? 'Previous'}\n  </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\nimport { PaginationContent } from './PaginationContent';\nimport { PaginationEllipsis } from './PaginationEllipsis';\nimport { PaginationItem } from './PaginationItem';\nimport { PaginationNext } from './PaginationNext';\nimport { PaginationPrevious } from './PaginationPrevious';\n\ntype Props = ComponentProps<'nav'>;\n\nexport const Pagination = ({ className, ...props }: Props) => (\n  <nav\n    {...props}\n    aria-label=\"pagination\"\n    className={cn(\n      'tailwindcss-preflight',\n      'tw:mx-auto',\n      'tw:flex',\n      'tw:w-full',\n      'tw:justify-center',\n      className,\n    )}\n  />\n);\n\nPagination.Content = PaginationContent;\nPagination.Item = PaginationItem;\nPagination.Button = PaginationButton;\nPagination.Previous = PaginationPrevious;\nPagination.Next = PaginationNext;\nPagination.Ellipsis = PaginationEllipsis;\n"],"mappings":";;;;;AASA,MAAa,oBAAoB,EAC/B,KACA,QAAQ,WAAW,OACnB,WACA,UACA,OAAO,QACP,GAAG,YAEH,oBAAC,QAAD;CACE,GAAI;CACC;CACL,SAAQ;CACF;CACN,aAAU;CACV,gBAAc,WAAW,SAAS,KAAA;CAClC,eAAa;CACb,WAAW,GACT,qCACA,kDACA,yCACA,SACF;CAEC;AACK,CAAA;;AC3BV,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAChD,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GAAG,WAAW,eAAe,mBAAmB,YAAY,SAAS;AACjF,CAAA;;ACHH,MAAa,sBAAsB,EAAE,WAAW,GAAG,YACjD,oBAAC,QAAD;CACE,eAAY;CACZ,WAAW,GAET,WACA,YACA,mBACA,qBAEA,sBACA,gDACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,UAAD,CAAW,CAAA;AACP,CAAA;;AClBR,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,MAAD;CAAI,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;AAAQ,CAAA;;ACE5D,MAAa,kBAAkB,EAAE,UAAU,WAAW,GAAG,YACvD,qBAAC,kBAAD;CACE,GAAI;CACJ,cAAW;CACX,MAAK;CACL,WAAW,GAAG,uBAAuB,SAAS;CAJhD,UAAA,CAME,oBAAC,cAAD,EAAc,WAAU,YAAa,CAAA,GACpC,YAAY,MACG;;;ACVpB,MAAa,sBAAsB,EAAE,UAAU,GAAG,YAChD,qBAAC,kBAAD;CAAkB,GAAI;CAAO,MAAK;CAAS,cAAW;CAAtD,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,GACnC,YAAY,UACG;;;ACCpB,MAAa,cAAc,EAAE,WAAW,GAAG,YACzC,oBAAC,OAAD;CACE,GAAI;CACJ,cAAW;CACX,WAAW,GACT,yBACA,cACA,WACA,aACA,qBACA,SACF;AACD,CAAA;AAGH,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,WAAW"}

package/dist/{Popconfirm-BJuDOHdv.js → Popconfirm-C4ryoeGP.js}

@@ -1,5 +1,5 @@
 import { cn } from "./classNames-DkX30VJU.js";
-import { Button } from "./Button-DbvGzEDb.js";
+import { Button } from "./Button-BAMX1iuI.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
 import { Popover } from "./Popover-DhOPlWgF.js";
 import { createContext, use, useMemo, useState } from "react";
@@ -184,4 +184,4 @@ Popconfirm.Description = PopconfirmDescription;
 Popconfirm.Trigger = PopconfirmTrigger;
 export { Popconfirm };
 
-//# sourceMappingURL=Popconfirm-BJuDOHdv.js.map
+//# sourceMappingURL=Popconfirm-C4ryoeGP.js.map