@keboola/design 17.0.0 → 17.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +48 -1
- package/dist/{AIKit-CxKkvN0q.js → AIKit-DiF0LtVr.js} +22 -14
- package/dist/AIKit-DiF0LtVr.js.map +1 -0
- package/dist/{Alert-DziS8n1H.js → Alert-BQB-og_I.js} +2 -2
- package/dist/{Alert-DziS8n1H.js.map → Alert-BQB-og_I.js.map} +1 -1
- package/dist/{AlertModal-De04fFoy.js → AlertModal-BkmyEvsR.js} +2 -2
- package/dist/{AlertModal-De04fFoy.js.map → AlertModal-BkmyEvsR.js.map} +1 -1
- package/dist/{AppShell-BUa3U7-e.js → AppShell-CDbecT-t.js} +2 -2
- package/dist/{AppShell-BUa3U7-e.js.map → AppShell-CDbecT-t.js.map} +1 -1
- package/dist/{BrandEditor-hiLBX7az.js → BrandEditor-BHE6nsob.js} +6 -6
- package/dist/{BrandEditor-hiLBX7az.js.map → BrandEditor-BHE6nsob.js.map} +1 -1
- package/dist/{BrandLogo-Dn7hhp2c.js → BrandLogo-n4Qhi1tI.js} +2 -2
- package/dist/{BrandLogo-Dn7hhp2c.js.map → BrandLogo-n4Qhi1tI.js.map} +1 -1
- package/dist/{Breadcrumb-uGFEIjFF.js → Breadcrumb-BAwQTo0c.js} +3 -3
- package/dist/{Breadcrumb-uGFEIjFF.js.map → Breadcrumb-BAwQTo0c.js.map} +1 -1
- package/dist/{Button-DbvGzEDb.js → Button-BAMX1iuI.js} +2 -2
- package/dist/{Button-DbvGzEDb.js.map → Button-BAMX1iuI.js.map} +1 -1
- package/dist/{Checkbox-B2jLlyaO.js → Checkbox-CfjpwIcg.js} +2 -2
- package/dist/{Checkbox-B2jLlyaO.js.map → Checkbox-CfjpwIcg.js.map} +1 -1
- package/dist/{Clipboard-fAkDdpEu.js → Clipboard-BaU3cDi5.js} +7 -5
- package/dist/Clipboard-BaU3cDi5.js.map +1 -0
- package/dist/{ClipboardButton-71Ugbl8c.js → ClipboardButton-BWeaQEM2.js} +5 -4
- package/dist/ClipboardButton-BWeaQEM2.js.map +1 -0
- package/dist/{CodeEditor-D_b-ZCng.js → CodeEditor-BdTxkPD4.js} +4 -4
- package/dist/{CodeEditor-D_b-ZCng.js.map → CodeEditor-BdTxkPD4.js.map} +1 -1
- package/dist/{ColorInput-Cjr1jkvy.js → ColorInput-BoVdBxJ7.js} +3 -3
- package/dist/{ColorInput-Cjr1jkvy.js.map → ColorInput-BoVdBxJ7.js.map} +1 -1
- package/dist/{ColorModeSwitch-CuPYnJ2V.js → ColorModeSwitch-BDkdmHYl.js} +2 -2
- package/dist/{ColorModeSwitch-CuPYnJ2V.js.map → ColorModeSwitch-BDkdmHYl.js.map} +1 -1
- package/dist/{Combobox-DYjvYgl3.js → Combobox-CakN_1cF.js} +6 -6
- package/dist/Combobox-CakN_1cF.js.map +1 -0
- package/dist/{Command-BcTb6GsR.js → Command-D6XYzzJf.js} +2 -2
- package/dist/{Command-BcTb6GsR.js.map → Command-D6XYzzJf.js.map} +1 -1
- package/dist/{CopyField-CnwAvQz9.js → CopyField-9WBU8thS.js} +2 -2
- package/dist/{CopyField-CnwAvQz9.js.map → CopyField-9WBU8thS.js.map} +1 -1
- package/dist/{DateInput-DJNX7Vdx.js → DateInput-CCYG0AtT.js} +3 -3
- package/dist/{DateInput-DJNX7Vdx.js.map → DateInput-CCYG0AtT.js.map} +1 -1
- package/dist/{DateRangeInput-B3g8cyS0.js → DateRangeInput-CpZK1IFp.js} +3 -3
- package/dist/{DateRangeInput-B3g8cyS0.js.map → DateRangeInput-CpZK1IFp.js.map} +1 -1
- package/dist/{DateRangePicker-48yOB2qV.js → DateRangePicker-B2AUKX7u.js} +2 -2
- package/dist/{DateRangePicker-48yOB2qV.js.map → DateRangePicker-B2AUKX7u.js.map} +1 -1
- package/dist/{FieldItem-D7eCMfMB.js → FieldItem-eM7IHBt5.js} +3 -3
- package/dist/{FieldItem-D7eCMfMB.js.map → FieldItem-eM7IHBt5.js.map} +1 -1
- package/dist/{FileUpload-DskvxhAr.js → FileUpload-d-hNPfPV.js} +2 -2
- package/dist/{FileUpload-DskvxhAr.js.map → FileUpload-d-hNPfPV.js.map} +1 -1
- package/dist/{Form-BUNW7nlt.js → Form-B_9sNehB.js} +7 -7
- package/dist/{Form-BUNW7nlt.js.map → Form-B_9sNehB.js.map} +1 -1
- package/dist/{FormGroup-QJB21LKp.js → FormGroup-D7ahkK1q.js} +3 -3
- package/dist/{FormGroup-QJB21LKp.js.map → FormGroup-D7ahkK1q.js.map} +1 -1
- package/dist/{FullScreenModal-RzY5XxiG.js → FullScreenModal-CiRKNsls.js} +2 -2
- package/dist/{FullScreenModal-RzY5XxiG.js.map → FullScreenModal-CiRKNsls.js.map} +1 -1
- package/dist/{InlineEdit-CXL0ZslO.js → InlineEdit-BzOox46S.js} +4 -4
- package/dist/{InlineEdit-CXL0ZslO.js.map → InlineEdit-BzOox46S.js.map} +1 -1
- package/dist/{InputGroup-BWeanEo7.js → InputGroup-DnGP9-ZQ.js} +2 -2
- package/dist/{InputGroup-BWeanEo7.js.map → InputGroup-DnGP9-ZQ.js.map} +1 -1
- package/dist/{Kbd-BprYCICe.js → Kbd-6velz9J-.js} +2 -2
- package/dist/{Kbd-BprYCICe.js.map → Kbd-6velz9J-.js.map} +1 -1
- package/dist/{MermaidDiagram-E3azndPk.js → MermaidDiagram-l83gco3r.js} +2 -2
- package/dist/{MermaidDiagram-E3azndPk.js.map → MermaidDiagram-l83gco3r.js.map} +1 -1
- package/dist/{Modal-Cf_kPEBW.js → Modal-CLu6Eg5p.js} +2 -2
- package/dist/{Modal-Cf_kPEBW.js.map → Modal-CLu6Eg5p.js.map} +1 -1
- package/dist/{MultiActionButtonGroup-8WQwL4UQ.js → MultiActionButtonGroup-B3-wNw7w.js} +3 -3
- package/dist/{MultiActionButtonGroup-8WQwL4UQ.js.map → MultiActionButtonGroup-B3-wNw7w.js.map} +1 -1
- package/dist/{Navbar-CRjxVboE.js → Navbar-BEc-Pqo5.js} +2 -2
- package/dist/{Navbar-CRjxVboE.js.map → Navbar-BEc-Pqo5.js.map} +1 -1
- package/dist/{PageHeader-DosMyar2.js → PageHeader-CfFKjCzo.js} +2 -2
- package/dist/PageHeader-CfFKjCzo.js.map +1 -0
- package/dist/{PageToolbar-By2HznxO.js → PageToolbar-NmiausP7.js} +2 -2
- package/dist/{PageToolbar-By2HznxO.js.map → PageToolbar-NmiausP7.js.map} +1 -1
- package/dist/{Pagination-DrXTrvfD.js → Pagination-DidOPSPB.js} +2 -2
- package/dist/{Pagination-DrXTrvfD.js.map → Pagination-DidOPSPB.js.map} +1 -1
- package/dist/{Popconfirm-BJuDOHdv.js → Popconfirm-C4ryoeGP.js} +2 -2
- package/dist/{Popconfirm-BJuDOHdv.js.map → Popconfirm-C4ryoeGP.js.map} +1 -1
- package/dist/{RadioGroup-B9oC8P15.js → RadioGroup-BIElT-nH.js} +2 -2
- package/dist/{RadioGroup-B9oC8P15.js.map → RadioGroup-BIElT-nH.js.map} +1 -1
- package/dist/{Search-OgaNjqQM.js → Search-xDWaQ2z3.js} +2 -2
- package/dist/{Search-OgaNjqQM.js.map → Search-xDWaQ2z3.js.map} +1 -1
- package/dist/{SearchInput-eLS-uvOn.js → SearchInput-BwlJ77mV.js} +3 -3
- package/dist/{SearchInput-eLS-uvOn.js.map → SearchInput-BwlJ77mV.js.map} +1 -1
- package/dist/{SectionNav-L81iJBo3.js → SectionNav-DV3Hwj-5.js} +14 -8
- package/dist/SectionNav-DV3Hwj-5.js.map +1 -0
- package/dist/{Select-DRdkdzBp.js → Select-C3Q_Xk_Z.js} +2 -2
- package/dist/{Select-DRdkdzBp.js.map → Select-C3Q_Xk_Z.js.map} +1 -1
- package/dist/{Sheet-DVb4XoJ5.js → Sheet-D7NnOyud.js} +2 -2
- package/dist/{Sheet-DVb4XoJ5.js.map → Sheet-D7NnOyud.js.map} +1 -1
- package/dist/{Sidebar-DYvodJWN.js → Sidebar-DaUDM8jm.js} +5 -5
- package/dist/{Sidebar-DYvodJWN.js.map → Sidebar-DaUDM8jm.js.map} +1 -1
- package/dist/{Slider-B9IskDxf.js → Slider-Cdl8FOvI.js} +3 -3
- package/dist/{Slider-B9IskDxf.js.map → Slider-Cdl8FOvI.js.map} +1 -1
- package/dist/{Table-BwgBm3hJ.js → Table-DtLrXt4i.js} +39 -7
- package/dist/Table-DtLrXt4i.js.map +1 -0
- package/dist/{Tabs-DmJB4l_N.js → Tabs-DUOUQKh7.js} +2 -2
- package/dist/{Tabs-DmJB4l_N.js.map → Tabs-DUOUQKh7.js.map} +1 -1
- package/dist/{TextInput--1CfZybC.js → TextInput-BAL-zOAN.js} +3 -3
- package/dist/{TextInput--1CfZybC.js.map → TextInput-BAL-zOAN.js.map} +1 -1
- package/dist/{ThemeProvider-BCHllN7d.js → ThemeProvider-MzVbTDBj.js} +2 -2
- package/dist/{ThemeProvider-BCHllN7d.js.map → ThemeProvider-MzVbTDBj.js.map} +1 -1
- package/dist/{ToggleAllTooltip-BFmA6TXf.js → ToggleAllTooltip-DQE5Lw6w.js} +2 -2
- package/dist/{ToggleAllTooltip-BFmA6TXf.js.map → ToggleAllTooltip-DQE5Lw6w.js.map} +1 -1
- package/dist/{ZoomableSvg-BRPGgaWJ.js → ZoomableSvg-CIOqAYpd.js} +4 -4
- package/dist/{ZoomableSvg-BRPGgaWJ.js.map → ZoomableSvg-CIOqAYpd.js.map} +1 -1
- package/dist/editors.js +3 -3
- package/dist/flint.js +3 -3
- package/dist/flint.js.map +1 -1
- package/dist/index.d.ts +410 -354
- package/dist/index.js +52 -50
- package/dist/internal/blocks/AIKit.js +1 -1
- package/dist/internal/blocks/AppShell.js +1 -1
- package/dist/internal/blocks/AuthLayout.js +1 -1
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/BulkActionsBar.js +55 -0
- package/dist/internal/blocks/BulkActionsBar.js.map +1 -0
- package/dist/internal/blocks/ChipEditor.js +2 -2
- package/dist/internal/blocks/ClipboardButton.js +1 -1
- package/dist/internal/blocks/ColorInput.js +1 -1
- package/dist/internal/blocks/ColorModeSwitch.js +1 -1
- package/dist/internal/blocks/Command.js +1 -1
- package/dist/internal/blocks/CopyField.js +1 -1
- package/dist/internal/blocks/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/internal/blocks/ExportMenu.js +2 -2
- package/dist/internal/blocks/Form/connectors/ComboboxField.js +2 -2
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +1 -1
- package/dist/internal/blocks/Form.js +2 -2
- package/dist/internal/blocks/FormGroup.js +1 -1
- package/dist/internal/blocks/InlineEdit.js +1 -1
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
- package/dist/internal/blocks/MultiCombobox.js +3 -3
- package/dist/internal/blocks/NumberInput.js +1 -1
- package/dist/internal/blocks/PageHeader.js +1 -1
- package/dist/internal/blocks/PageSection.js +31 -0
- package/dist/internal/blocks/PageSection.js.map +1 -0
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +2 -2
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +3 -3
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +1 -1
- package/dist/internal/blocks/TimeInput.js +2 -2
- package/dist/internal/components/Alert.js +1 -1
- package/dist/internal/components/AlertModal.js +1 -1
- package/dist/internal/components/Avatar.js +3 -2
- package/dist/internal/components/Avatar.js.map +1 -1
- package/dist/internal/components/BrandLogo.js +1 -1
- package/dist/internal/components/Breadcrumb.js +1 -1
- package/dist/internal/components/Button.js +1 -1
- package/dist/internal/components/Checkbox.js +1 -1
- package/dist/internal/components/Clipboard.js +1 -1
- package/dist/internal/components/CollapsiblePanel.js +1 -1
- package/dist/internal/components/Combobox.js +1 -1
- package/dist/internal/components/DateRangePicker.js +1 -1
- package/dist/internal/components/FileUpload.js +1 -1
- package/dist/internal/components/FullScreenModal.js +1 -1
- package/dist/internal/components/InputGroup.js +1 -1
- package/dist/internal/components/Kbd.js +1 -1
- package/dist/internal/components/Modal.js +1 -1
- package/dist/internal/components/Navbar.js +1 -1
- package/dist/internal/components/Pagination.js +1 -1
- package/dist/internal/components/Popconfirm.js +1 -1
- package/dist/internal/components/RadioGroup.js +1 -1
- package/dist/internal/components/Search.js +1 -1
- package/dist/internal/components/Select.js +1 -1
- package/dist/internal/components/Sheet.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Slider.js +1 -1
- package/dist/internal/components/Table.js +1 -1
- package/dist/internal/components/Tabs.js +1 -1
- package/dist/internal/components/ThemeProvider.js +1 -1
- package/dist/internal/components/Tooltip.js +1 -1
- package/dist/internal/components/Truncated.js +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/utils.js +1 -1
- package/dist/markdown-editor.js +6 -6
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.js +74 -54
- package/dist/rjsf.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/testing.js +1 -1
- package/dist/{utils-DjFceY3H.js → utils-BxEJOnFD.js} +2 -2
- package/dist/{utils-DjFceY3H.js.map → utils-BxEJOnFD.js.map} +1 -1
- package/package.json +3 -3
- package/src/styles.css +11 -1
- package/dist/AIKit-CxKkvN0q.js.map +0 -1
- package/dist/Clipboard-fAkDdpEu.js.map +0 -1
- package/dist/ClipboardButton-71Ugbl8c.js.map +0 -1
- package/dist/Combobox-DYjvYgl3.js.map +0 -1
- package/dist/PageHeader-DosMyar2.js.map +0 -1
- package/dist/SectionNav-L81iJBo3.js.map +0 -1
- package/dist/Table-BwgBm3hJ.js.map +0 -1
|
@@ -1 +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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"}
|
|
1
|
+
{"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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
2
|
import { X } from "./icons-DDR9dFSr.js";
|
|
3
|
-
import { Button } from "./Button-
|
|
3
|
+
import { Button } from "./Button-BAMX1iuI.js";
|
|
4
4
|
import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-7vgpfc6B.js";
|
|
5
5
|
import { useEffect, useState } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -151,4 +151,4 @@ Modal.Header = ModalHeader;
|
|
|
151
151
|
Modal.Overlay = ModalOverlay;
|
|
152
152
|
export { Modal };
|
|
153
153
|
|
|
154
|
-
//# sourceMappingURL=Modal-
|
|
154
|
+
//# sourceMappingURL=Modal-CLu6Eg5p.js.map
|
|
@@ -1 +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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"}
|
|
1
|
+
{"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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
|
-
import { Tooltip } from "./utils-
|
|
3
|
-
import { Button } from "./Button-
|
|
2
|
+
import { Tooltip } from "./utils-BxEJOnFD.js";
|
|
3
|
+
import { Button } from "./Button-BAMX1iuI.js";
|
|
4
4
|
import { ButtonGroup } from "./internal/components/ButtonGroup.js";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
// src/blocks/MultiActionButtonGroup/MultiActionButton.tsx
|
|
@@ -28,4 +28,4 @@ const MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(
|
|
|
28
28
|
MultiActionButtonGroup.Button = MultiActionButton;
|
|
29
29
|
export { MultiActionButtonGroup };
|
|
30
30
|
|
|
31
|
-
//# sourceMappingURL=MultiActionButtonGroup-
|
|
31
|
+
//# sourceMappingURL=MultiActionButtonGroup-B3-wNw7w.js.map
|
package/dist/{MultiActionButtonGroup-8WQwL4UQ.js.map → MultiActionButtonGroup-B3-wNw7w.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiActionButtonGroup-
|
|
1
|
+
{"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
2
|
import { Search } from "./icons-DDR9dFSr.js";
|
|
3
3
|
import { ScrollArea } from "./internal/components/ScrollArea.js";
|
|
4
|
-
import { BrandLogo } from "./BrandLogo-
|
|
4
|
+
import { BrandLogo } from "./BrandLogo-n4Qhi1tI.js";
|
|
5
5
|
import { Root, Slot, Slottable } from "@radix-ui/react-slot";
|
|
6
6
|
import { cva } from "class-variance-authority";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -313,4 +313,4 @@ Navbar.MenuItemAdornment = NavbarMenuItemAdornment;
|
|
|
313
313
|
Navbar.MenuAvatar = NavbarMenuAvatar;
|
|
314
314
|
export { Navbar };
|
|
315
315
|
|
|
316
|
-
//# sourceMappingURL=Navbar-
|
|
316
|
+
//# sourceMappingURL=Navbar-BEc-Pqo5.js.map
|
|
@@ -1 +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"}
|
|
1
|
+
{"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"}
|
|
@@ -52,7 +52,7 @@ const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title,
|
|
|
52
52
|
...props,
|
|
53
53
|
children: [
|
|
54
54
|
/* @__PURE__ */ jsxs("div", {
|
|
55
|
-
className: "tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-4",
|
|
55
|
+
className: "tw:flex tw:min-h-9 tw:w-full tw:items-center tw:justify-between tw:gap-4",
|
|
56
56
|
children: [/* @__PURE__ */ jsx("div", {
|
|
57
57
|
className: "tw:min-w-0 tw:flex-1",
|
|
58
58
|
children: breadcrumbs
|
|
@@ -164,4 +164,4 @@ const PageHeader = {
|
|
|
164
164
|
};
|
|
165
165
|
export { PageHeader };
|
|
166
166
|
|
|
167
|
-
//# sourceMappingURL=PageHeader-
|
|
167
|
+
//# sourceMappingURL=PageHeader-CfFKjCzo.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageHeader-CfFKjCzo.js","names":[],"sources":["../src/blocks/PageHeader/styles.ts","../src/blocks/PageHeader/PageHeaderDetail.tsx","../src/blocks/PageHeader/PageHeaderIndex.tsx","../src/blocks/PageHeader/PageHeader.tsx"],"sourcesContent":["// A title holding an InlineEdit is top-aligned, with the icon and badges one title line tall,\n// so they centre on its first line however far it wraps. Other titles stay centred.\nexport const titleRowClass =\n 'tw:group/title-row tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2 tw:has-[[data-slot=inline-edit]]:items-start';\nexport const titleLineClass = 'tw:group-has-[[data-slot=inline-edit]]/title-row:min-h-9';\nexport const titleCompactLineClass = 'tw:group-has-[[data-slot=inline-edit]]/title-row:min-h-7';\n// Actions step aside while the title is renamed, and fade back once it has shrunk.\n// - Invisible at zero width rather than gone: a legacy 40px button holds the row's height.\n// - Held on one line, so their wrapped contents add no room below the field.\n// - The group drops its gap, so the field's last button lines up with the actions above.\nexport const titleGroupClass =\n 'tw:group/title tw:has-[[data-slot=inline-edit][data-expanded]]:gap-x-0';\nexport const actionsHiddenWhileRenamingClass =\n 'tw:transition-opacity tw:duration-150 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:invisible tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:w-0 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:flex-nowrap tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:overflow-hidden tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:opacity-0';\n// Badges, no taller than the title line, are gone while it is renamed and fade back once it settles.\nexport const badgesHiddenWhileRenamingClass =\n 'tw:transition-opacity tw:duration-150 tw:group-has-[[data-slot=inline-edit][data-settled]]/title:starting:opacity-0 tw:group-has-[[data-slot=inline-edit][data-expanded]]/title:hidden';\n// Beside an InlineEdit the icon box is exactly one line tall, so a taller icon overhangs it evenly.\nexport const titleIconClass =\n 'tw:flex tw:shrink-0 tw:items-center tw:group-has-[[data-slot=inline-edit]]/title-row:h-9';\nexport const titleCompactIconClass =\n 'tw:flex tw:shrink-0 tw:items-center tw:group-has-[[data-slot=inline-edit]]/title-row:h-7';\n// A title holding an InlineEdit may shrink below its text; an open rename takes the rest of the row.\nexport const titleClass =\n 'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words tw:has-[[data-slot=inline-edit]]:min-w-0 tw:has-[[data-expanded]]:flex-1';\nexport const titleCompactClass =\n 'tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words tw:has-[[data-slot=inline-edit]]:min-w-0 tw:has-[[data-expanded]]:flex-1';\n// Header badges always read as pills: force pill shape/case/tracking on any\n// Badge inside the slot via its `data-slot=\"badge\"` root (higher specificity\n// than the Badge's own variant classes, so it wins regardless of variant).\n// `tw:py-0` neutralises consumer-forced vertical padding (e.g. StatusLabel's\n// `tw:py-1.5`) so every header pill keeps the standard badge height.\n// Beside an InlineEdit an empty wrapper (no badges to show) collapses, so the title keeps the row.\nexport const badgesClass =\n 'tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:group-has-[[data-slot=inline-edit]]/title-row:empty:hidden tw:group-has-[[data-slot=inline-edit]]/title-row:has-[>:only-child:empty]:hidden tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0';\nexport const descriptionClass =\n 'tw:m-0 tw:max-w-[800px] tw:break-words tw:text-sm tw:leading-5 tw:text-muted-foreground';\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport {\n actionsHiddenWhileRenamingClass,\n badgesClass,\n badgesHiddenWhileRenamingClass,\n descriptionClass,\n titleClass,\n titleCompactClass,\n titleCompactIconClass,\n titleCompactLineClass,\n titleGroupClass,\n titleIconClass,\n titleLineClass,\n titleRowClass,\n} from './styles';\n\n// Pattern: docs/patterns/page-header/detail/detail-page-header.md\ntype PageHeaderDetailProps = Omit<ComponentProps<'header'>, 'title'> & {\n /** Chain to the entity's parent. Don't end with the entity's own name — that's the `title`. */\n breadcrumbs: ReactNode;\n /** `DropdownMenu` for all other actions, on the breadcrumbs row. */\n overflowActions?: ReactNode;\n title: ReactNode;\n /** Entity / type icon left of the title. */\n titleIcon?: ReactNode;\n /** `Badge`s beside the title (status, environment, version). */\n badges?: ReactNode;\n description?: ReactNode;\n /** Smaller title for information-dense pages. */\n compact?: boolean;\n /** `Button` with the verb appropriate to the entity (Deploy / Run / Save). */\n primaryAction?: ReactNode;\n /** `Button variant=\"secondary\"`. Further actions go in `overflowActions`. */\n secondaryAction?: ReactNode;\n /** `Tabs` row below the title block. */\n headerNav?: ReactNode;\n /** Description on its own full-width row below title and actions, not in the title column. */\n fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for one entity with a parent hierarchy worth breadcrumbing.\n *\n * - Nest inside `PageLayout.Header`.\n * - A page with no parent hierarchy uses `PageHeader.Index`, even for one entity.\n *\n * @see RECIPES.md#list-detail\n */\nexport const PageHeaderDetail = ({\n ref,\n className,\n breadcrumbs,\n overflowActions,\n title,\n titleIcon,\n badges,\n description,\n compact = false,\n primaryAction,\n secondaryAction,\n headerNav,\n fullWidthDescription = false,\n ...props\n}: PageHeaderDetailProps) => {\n const iconClass = compact ? titleCompactIconClass : titleIconClass;\n const lineClass = compact ? titleCompactLineClass : titleLineClass;\n const titleRow = (\n <div\n className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2 tw:has-[[data-expanded]]:pr-0')}\n >\n {titleIcon && <span className={iconClass}>{titleIcon}</span>}\n <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n {badges && (\n <div className={cn(badgesClass, lineClass, badgesHiddenWhileRenamingClass)}>{badges}</div>\n )}\n </div>\n );\n const actions = (primaryAction || secondaryAction) && (\n <div\n className={cn(\n 'tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2',\n actionsHiddenWhileRenamingClass,\n )}\n >\n {secondaryAction}\n {primaryAction}\n </div>\n );\n const descriptionNode = description && <p className={descriptionClass}>{description}</p>;\n return (\n <header\n ref={ref}\n className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n {...props}\n >\n {/* `min-h-9`: the row is as tall as the ⋮ button with or without it, so the title doesn't move. */}\n <div className=\"tw:flex tw:min-h-9 tw:w-full tw:items-center tw:justify-between tw:gap-4\">\n <div className=\"tw:min-w-0 tw:flex-1\">{breadcrumbs}</div>\n {overflowActions && (\n <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">{overflowActions}</div>\n )}\n </div>\n\n {fullWidthDescription ? (\n <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n <div\n className={cn(\n titleGroupClass,\n 'tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3',\n )}\n >\n {titleRow}\n {actions}\n </div>\n {descriptionNode}\n </div>\n ) : (\n <div\n className={cn(\n titleGroupClass,\n 'tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3',\n )}\n >\n <div className=\"tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2 tw:has-[[data-expanded]]:pr-0\">\n <div className={titleRowClass}>\n {titleIcon && <span className={iconClass}>{titleIcon}</span>}\n <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n {badges && (\n <div className={cn(badgesClass, lineClass, badgesHiddenWhileRenamingClass)}>\n {badges}\n </div>\n )}\n </div>\n {descriptionNode}\n </div>\n {actions}\n </div>\n )}\n\n {headerNav}\n </header>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { descriptionClass, titleClass, titleRowClass } from './styles';\n\n// Pattern: docs/patterns/page-header/index/index-page-header.md\ntype PageHeaderIndexProps = Omit<ComponentProps<'header'>, 'title'> & {\n title: ReactNode;\n /** Prose below the title; `metadata` wins when both are set. */\n description?: ReactNode;\n /** Count summary (\"3 buckets and 39 tables\"). Wins over `description`. */\n metadata?: ReactNode;\n /** Icon-only docs button (`Button variant=\"invisible\" icon={<BookOpen />}`). */\n documentation?: ReactNode;\n /** The one primary \"create X\" `Button`. */\n action?: ReactNode;\n /** `Tabs` row below the title block. */\n headerNav?: ReactNode;\n /** Description on its own full-width row; actions wrap below the title on narrow widths. */\n fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for top-level list / collection pages.\n *\n * - No breadcrumbs, no overflow menu.\n * - Search and filters belong in `PageToolbar`, not here.\n */\nexport const PageHeaderIndex = ({\n ref,\n className,\n title,\n description,\n metadata,\n documentation,\n action,\n headerNav,\n fullWidthDescription = false,\n ...props\n}: PageHeaderIndexProps) => {\n const subtitle = metadata ?? description;\n const hasActions = Boolean(documentation || action);\n return (\n <header\n ref={ref}\n className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n {...props}\n >\n {fullWidthDescription ? (\n <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n <h1 className={titleClass}>{title}</h1>\n </div>\n {hasActions && (\n <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\n {documentation}\n {action}\n </div>\n )}\n </div>\n {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n </div>\n ) : (\n <div className=\"tw:flex tw:w-full tw:items-start tw:justify-between tw:gap-4\">\n <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n <div className={titleRowClass}>\n <h1 className={titleClass}>{title}</h1>\n </div>\n {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n </div>\n {hasActions && (\n <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">\n {documentation}\n {action}\n </div>\n )}\n </div>\n )}\n {headerNav}\n </header>\n );\n};\n","import { PageHeaderDetail } from './PageHeaderDetail';\nimport { PageHeaderIndex } from './PageHeaderIndex';\n\n/**\n * Page header whose variant types enforce the page-header patterns.\n *\n * - Nest inside `PageLayout.Header`; pass `@keboola/design` `Button`s into the slots.\n * - Other layouts: custom JSX in `PageLayout.Header`; routed tabs: `PageLayout.Tabs`.\n *\n * @see RECIPES.md#page-header-tabs\n */\nexport const PageHeader = {\n /** List / collection pages. No breadcrumbs; `metadata` wins over `description`. */\n Index: PageHeaderIndex,\n /** Single-entity pages: required breadcrumbs, overflow menu, max 2 visible actions. */\n Detail: PageHeaderDetail,\n};\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
2
|
import { ChevronDown, Plus, X } from "./icons-DDR9dFSr.js";
|
|
3
|
-
import { Button } from "./Button-
|
|
3
|
+
import { Button } from "./Button-BAMX1iuI.js";
|
|
4
4
|
import { Popover } from "./Popover-DhOPlWgF.js";
|
|
5
5
|
import { Badge } from "./Badge-CFRhducL.js";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -118,4 +118,4 @@ const PageToolbar = Object.assign(Root, {
|
|
|
118
118
|
});
|
|
119
119
|
export { PageToolbar };
|
|
120
120
|
|
|
121
|
-
//# sourceMappingURL=PageToolbar-
|
|
121
|
+
//# sourceMappingURL=PageToolbar-NmiausP7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageToolbar-
|
|
1
|
+
{"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
2
|
import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-DDR9dFSr.js";
|
|
3
|
-
import { Button } from "./Button-
|
|
3
|
+
import { Button } from "./Button-BAMX1iuI.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
// src/components/Pagination/PaginationButton.tsx
|
|
6
6
|
const PaginationButton = ({ ref, active: isActive = false, className, children, size = "icon", ...props }) => /* @__PURE__ */ jsx(Button, {
|
|
@@ -60,4 +60,4 @@ Pagination.Next = PaginationNext;
|
|
|
60
60
|
Pagination.Ellipsis = PaginationEllipsis;
|
|
61
61
|
export { Pagination };
|
|
62
62
|
|
|
63
|
-
//# sourceMappingURL=Pagination-
|
|
63
|
+
//# sourceMappingURL=Pagination-DidOPSPB.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination-
|
|
1
|
+
{"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
|
-
import { Button } from "./Button-
|
|
2
|
+
import { Button } from "./Button-BAMX1iuI.js";
|
|
3
3
|
import { useStableCallback } from "./internal/hooks/useStableCallback.js";
|
|
4
4
|
import { Popover } from "./Popover-DhOPlWgF.js";
|
|
5
5
|
import { createContext, use, useMemo, useState } from "react";
|
|
@@ -184,4 +184,4 @@ Popconfirm.Description = PopconfirmDescription;
|
|
|
184
184
|
Popconfirm.Trigger = PopconfirmTrigger;
|
|
185
185
|
export { Popconfirm };
|
|
186
186
|
|
|
187
|
-
//# sourceMappingURL=Popconfirm-
|
|
187
|
+
//# sourceMappingURL=Popconfirm-C4ryoeGP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popconfirm-BJuDOHdv.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmDescription.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTitle.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n variant: 'confirm' | 'danger';\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n enabled: boolean;\n isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n const context = use(PopconfirmContext);\n if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n return context;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * The popconfirm's message: plain text, or `Popconfirm.Title` + `Popconfirm.Description`.\n *\n * - Text wraps at 384 px; only the footer's buttons widen the popover past that.\n * - Owns the spacing between its blocks: 12 px, 2 px between a title and its description.\n */\nexport const PopconfirmBody = ({ className, ...props }: Props) => (\n <div {...props} className={cn('tw:w-full tw:max-w-sm tw:text-sm tw:[&>*+*]:mt-3', className)} />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onCancel, isLoading } = usePopconfirmContext();\n\n const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onCancel(event);\n };\n\n return (\n <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n {children ?? 'Cancel'}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onConfirm(event);\n };\n\n const defaultLabel = (() => {\n if (children) return children;\n return variant === 'danger' ? 'Delete' : 'Confirm';\n })();\n\n return (\n <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button\n size=\"small\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n {...props}\n ref={ref}\n className={className}\n isLoading={isLoading}\n >\n {defaultLabel}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'> & {\n /** `centered` centres the title and description; other content keeps its alignment. */\n layout?: 'default' | 'centered';\n};\n\nexport const PopconfirmContent = ({\n className,\n onInteractOutside,\n layout = 'default',\n ...props\n}: Props) => {\n const { isLoading } = usePopconfirmContext();\n\n const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n if (isLoading) event.preventDefault();\n onInteractOutside?.(event);\n };\n\n return (\n <Popover.Content\n {...props}\n onInteractOutside={handleOnInteractOutside}\n className={cn(\n 'tw:min-w-72 tw:gap-3',\n layout === 'centered' ? 'tw:p-4 tw:[&_[data-slot^=popconfirm-]]:text-center' : 'tw:p-3',\n className,\n )}\n />\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'p'>;\n\nexport const PopconfirmDescription = ({ className, ...props }: Props) => (\n <p\n {...props}\n data-slot=\"popconfirm-description\"\n className={cn(\n 'tw:m-0 tw:text-xs tw:text-muted-foreground tw:[[data-slot=popconfirm-title]+&]:mt-0.5',\n className,\n )}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * The popconfirm's action row.\n *\n * - Every child gets an equal-width column, so Cancel and Confirm split the row evenly.\n * - A lone Confirm spans the whole row.\n */\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n <div\n {...props}\n className={cn('tw:grid tw:w-full tw:auto-cols-fr tw:grid-flow-col tw:gap-2', className)}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'p'>;\n\nexport const PopconfirmTitle = ({ className, ...props }: Props) => (\n <p\n {...props}\n data-slot=\"popconfirm-title\"\n className={cn('tw:m-0 tw:wrap-anywhere tw:font-medium', className)}\n />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n const { enabled, onConfirm } = usePopconfirmContext();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!enabled) {\n event.preventDefault();\n onConfirm(event);\n }\n\n onClick?.(event);\n };\n\n return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmDescription } from './PopconfirmDescription';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTitle } from './PopconfirmTitle';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n children: ReactNode;\n skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n variant = 'confirm',\n enabled = true,\n onOpenChange = noop,\n open,\n skipAsyncWait = false,\n ...rest\n}: Props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const handleConfirm = useStableCallback(onConfirm);\n const handleCancel = useStableCallback(onCancel);\n\n const handleOnOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange(open);\n };\n\n const context = useMemo<PopconfirmContextType>(\n () => ({\n variant,\n isLoading,\n enabled,\n onConfirm: (event) => {\n const result = handleConfirm(event);\n\n if (!(result instanceof Promise) || skipAsyncWait) return;\n\n // The async confirm's outcome drives the popover.\n // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n // - Resolved closes it; rejected leaves it up so the failure stays visible.\n // - The rejection is deliberately not caught — the host's global handler reports it.\n event.preventDefault();\n setIsLoading(true);\n result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n },\n onCancel: handleCancel,\n }),\n [variant, isLoading, enabled, skipAsyncWait, handleConfirm, handleCancel],\n );\n\n return (\n <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n </Popover>\n );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Title = PopconfirmTitle;\nPopconfirm.Description = PopconfirmDescription;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popconfirm-C4ryoeGP.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmDescription.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTitle.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n variant: 'confirm' | 'danger';\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n enabled: boolean;\n isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n const context = use(PopconfirmContext);\n if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n return context;\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * The popconfirm's message: plain text, or `Popconfirm.Title` + `Popconfirm.Description`.\n *\n * - Text wraps at 384 px; only the footer's buttons widen the popover past that.\n * - Owns the spacing between its blocks: 12 px, 2 px between a title and its description.\n */\nexport const PopconfirmBody = ({ className, ...props }: Props) => (\n <div {...props} className={cn('tw:w-full tw:max-w-sm tw:text-sm tw:[&>*+*]:mt-3', className)} />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onCancel, isLoading } = usePopconfirmContext();\n\n const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onCancel(event);\n };\n\n return (\n <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n {children ?? 'Cancel'}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onConfirm(event);\n };\n\n const defaultLabel = (() => {\n if (children) return children;\n return variant === 'danger' ? 'Delete' : 'Confirm';\n })();\n\n return (\n <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button\n size=\"small\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n {...props}\n ref={ref}\n className={className}\n isLoading={isLoading}\n >\n {defaultLabel}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'> & {\n /** `centered` centres the title and description; other content keeps its alignment. */\n layout?: 'default' | 'centered';\n};\n\nexport const PopconfirmContent = ({\n className,\n onInteractOutside,\n layout = 'default',\n ...props\n}: Props) => {\n const { isLoading } = usePopconfirmContext();\n\n const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n if (isLoading) event.preventDefault();\n onInteractOutside?.(event);\n };\n\n return (\n <Popover.Content\n {...props}\n onInteractOutside={handleOnInteractOutside}\n className={cn(\n 'tw:min-w-72 tw:gap-3',\n layout === 'centered' ? 'tw:p-4 tw:[&_[data-slot^=popconfirm-]]:text-center' : 'tw:p-3',\n className,\n )}\n />\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'p'>;\n\nexport const PopconfirmDescription = ({ className, ...props }: Props) => (\n <p\n {...props}\n data-slot=\"popconfirm-description\"\n className={cn(\n 'tw:m-0 tw:text-xs tw:text-muted-foreground tw:[[data-slot=popconfirm-title]+&]:mt-0.5',\n className,\n )}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * The popconfirm's action row.\n *\n * - Every child gets an equal-width column, so Cancel and Confirm split the row evenly.\n * - A lone Confirm spans the whole row.\n */\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n <div\n {...props}\n className={cn('tw:grid tw:w-full tw:auto-cols-fr tw:grid-flow-col tw:gap-2', className)}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'p'>;\n\nexport const PopconfirmTitle = ({ className, ...props }: Props) => (\n <p\n {...props}\n data-slot=\"popconfirm-title\"\n className={cn('tw:m-0 tw:wrap-anywhere tw:font-medium', className)}\n />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n const { enabled, onConfirm } = usePopconfirmContext();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!enabled) {\n event.preventDefault();\n onConfirm(event);\n }\n\n onClick?.(event);\n };\n\n return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmDescription } from './PopconfirmDescription';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTitle } from './PopconfirmTitle';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n children: ReactNode;\n skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n variant = 'confirm',\n enabled = true,\n onOpenChange = noop,\n open,\n skipAsyncWait = false,\n ...rest\n}: Props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const handleConfirm = useStableCallback(onConfirm);\n const handleCancel = useStableCallback(onCancel);\n\n const handleOnOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange(open);\n };\n\n const context = useMemo<PopconfirmContextType>(\n () => ({\n variant,\n isLoading,\n enabled,\n onConfirm: (event) => {\n const result = handleConfirm(event);\n\n if (!(result instanceof Promise) || skipAsyncWait) return;\n\n // The async confirm's outcome drives the popover.\n // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n // - Resolved closes it; rejected leaves it up so the failure stays visible.\n // - The rejection is deliberately not caught — the host's global handler reports it.\n event.preventDefault();\n setIsLoading(true);\n result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n },\n onCancel: handleCancel,\n }),\n [variant, isLoading, enabled, skipAsyncWait, handleConfirm, handleCancel],\n );\n\n return (\n <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n </Popover>\n );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Title = PopconfirmTitle;\nPopconfirm.Description = PopconfirmDescription;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
|
-
import { Tooltip } from "./utils-
|
|
2
|
+
import { Tooltip } from "./utils-BxEJOnFD.js";
|
|
3
3
|
import { Circle } from "./icons-DDR9dFSr.js";
|
|
4
4
|
import { radioCircleVariants, radioIndicatorVariants, radioItemButtonVariants, radioVariants } from "./styles-nwtCRF7y.js";
|
|
5
5
|
import { FieldBox } from "./FieldBox-DdSdJ3ZN.js";
|
|
@@ -107,4 +107,4 @@ RadioGroup.Item = RadioGroupItem;
|
|
|
107
107
|
RadioGroup.Separator = RadioGroupSeparator;
|
|
108
108
|
export { RadioGroup };
|
|
109
109
|
|
|
110
|
-
//# sourceMappingURL=RadioGroup-
|
|
110
|
+
//# sourceMappingURL=RadioGroup-BIElT-nH.js.map
|