@keboola/design 11.5.0 → 11.6.1
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/AGENTS.md +7 -6
- package/CHANGELOG.md +31 -0
- package/COMPONENT-API.md +5 -5
- package/dist/{AIKit-CNX6aiKm.js → AIKit-CQxVwyAk.js} +212 -38
- package/dist/AIKit-CQxVwyAk.js.map +1 -0
- package/dist/{Alert-Ba5b2YPq.js → Alert-C4Y9IwMI.js} +2 -2
- package/dist/{Alert-Ba5b2YPq.js.map → Alert-C4Y9IwMI.js.map} +1 -1
- package/dist/{Badge-D0pXdekt.js → Badge-o5jURtpB.js} +2 -2
- package/dist/{Badge-D0pXdekt.js.map → Badge-o5jURtpB.js.map} +1 -1
- package/dist/{BrandEditor-CSANsxUz.js → BrandEditor-CS9P4r2p.js} +5 -5
- package/dist/{BrandEditor-CSANsxUz.js.map → BrandEditor-CS9P4r2p.js.map} +1 -1
- package/dist/{Breadcrumb-g_xn_-Nf.js → Breadcrumb-D1id7YXd.js} +2 -2
- package/dist/{Breadcrumb-g_xn_-Nf.js.map → Breadcrumb-D1id7YXd.js.map} +1 -1
- package/dist/{Checkbox-CUIn2jap.js → Checkbox-Bqr6zXcW.js} +2 -2
- package/dist/{Checkbox-CUIn2jap.js.map → Checkbox-Bqr6zXcW.js.map} +1 -1
- package/dist/{Clipboard-BTW6C-b_.js → Clipboard-C2YBRfD8.js} +2 -2
- package/dist/{Clipboard-BTW6C-b_.js.map → Clipboard-C2YBRfD8.js.map} +1 -1
- package/dist/{ClipboardButton-CwZJdRaz.js → ClipboardButton-CrljClL1.js} +2 -2
- package/dist/{ClipboardButton-CwZJdRaz.js.map → ClipboardButton-CrljClL1.js.map} +1 -1
- package/dist/{CodeEditor-C9zy7PxK.js → CodeEditor-C9AS8Ch0.js} +4 -4
- package/dist/{CodeEditor-C9zy7PxK.js.map → CodeEditor-C9AS8Ch0.js.map} +1 -1
- package/dist/{ColorInput-BZV-u_94.js → ColorInput-Dg87lKcR.js} +2 -2
- package/dist/{ColorInput-BZV-u_94.js.map → ColorInput-Dg87lKcR.js.map} +1 -1
- package/dist/{Combobox-BfIfaVMA.js → Combobox-BfanUAqY.js} +3 -3
- package/dist/{Combobox-BfIfaVMA.js.map → Combobox-BfanUAqY.js.map} +1 -1
- package/dist/{Command-Bfa1kpbt.js → Command-CqxoI_De.js} +2 -2
- package/dist/{Command-Bfa1kpbt.js.map → Command-CqxoI_De.js.map} +1 -1
- package/dist/{CopyField-DpT0Ngz1.js → CopyField-Rx9HPTbJ.js} +2 -2
- package/dist/{CopyField-DpT0Ngz1.js.map → CopyField-Rx9HPTbJ.js.map} +1 -1
- package/dist/{DateInput-DiEd5uCL.js → DateInput-DpifECUQ.js} +2 -2
- package/dist/{DateInput-DiEd5uCL.js.map → DateInput-DpifECUQ.js.map} +1 -1
- package/dist/{DateRangeInput-DPfVYchl.js → DateRangeInput-9MIw7P6L.js} +2 -2
- package/dist/{DateRangeInput-DPfVYchl.js.map → DateRangeInput-9MIw7P6L.js.map} +1 -1
- package/dist/DiagramSource-C5_d8Gdj.js +11 -0
- package/dist/DiagramSource-C5_d8Gdj.js.map +1 -0
- package/dist/{FieldItem-B7XMmZSz.js → FieldItem-DtPTzNef.js} +3 -3
- package/dist/{FieldItem-B7XMmZSz.js.map → FieldItem-DtPTzNef.js.map} +1 -1
- package/dist/{FileUpload-ABThVZyg.js → FileUpload-DYQCTGjU.js} +3 -3
- package/dist/{FileUpload-ABThVZyg.js.map → FileUpload-DYQCTGjU.js.map} +1 -1
- package/dist/{Form-CsttTHn4.js → Form-DAaatlBk.js} +5 -5
- package/dist/{Form-CsttTHn4.js.map → Form-DAaatlBk.js.map} +1 -1
- package/dist/{FormGroup-DHvTFdno.js → FormGroup-Bl8JmnzJ.js} +3 -3
- package/dist/{FormGroup-DHvTFdno.js.map → FormGroup-Bl8JmnzJ.js.map} +1 -1
- package/dist/{FullScreenModal-BvPuYibe.js → FullScreenModal-CN9nAs72.js} +50 -2
- package/dist/FullScreenModal-CN9nAs72.js.map +1 -0
- package/dist/{Kbd-Cvvt91Q8.js → Kbd-D1Azcc4g.js} +2 -2
- package/dist/{Kbd-Cvvt91Q8.js.map → Kbd-D1Azcc4g.js.map} +1 -1
- package/dist/{MermaidDiagram-CXG5tC6J.js → MermaidDiagram-CujFxVzk.js} +4 -3
- package/dist/{MermaidDiagram-CXG5tC6J.js.map → MermaidDiagram-CujFxVzk.js.map} +1 -1
- package/dist/{MultiActionButtonGroup-DokHbPgM.js → MultiActionButtonGroup-CNNoBQbv.js} +2 -2
- package/dist/{MultiActionButtonGroup-DokHbPgM.js.map → MultiActionButtonGroup-CNNoBQbv.js.map} +1 -1
- package/dist/{PageToolbar-DExqEYGl.js → PageToolbar-BKVJiDAL.js} +2 -2
- package/dist/{PageToolbar-DExqEYGl.js.map → PageToolbar-BKVJiDAL.js.map} +1 -1
- package/dist/{RadioGroup-DXPbSj8P.js → RadioGroup-CUBsuP7r.js} +2 -2
- package/dist/{RadioGroup-DXPbSj8P.js.map → RadioGroup-CUBsuP7r.js.map} +1 -1
- package/dist/{Search-5uQAiNIP.js → Search-DVpJuzr9.js} +2 -2
- package/dist/{Search-5uQAiNIP.js.map → Search-DVpJuzr9.js.map} +1 -1
- package/dist/{SearchInput-D4UgAXJK.js → SearchInput-Q85p8Ews.js} +2 -2
- package/dist/{SearchInput-D4UgAXJK.js.map → SearchInput-Q85p8Ews.js.map} +1 -1
- package/dist/{SectionNav-OkKCjSA-.js → SectionNav-mpmSM3OC.js} +3 -3
- package/dist/{SectionNav-OkKCjSA-.js.map → SectionNav-mpmSM3OC.js.map} +1 -1
- package/dist/{Sidebar-D3cY1kha.js → Sidebar-CTWsHZhF.js} +2 -2
- package/dist/{Sidebar-D3cY1kha.js.map → Sidebar-CTWsHZhF.js.map} +1 -1
- package/dist/{Slider-CRf-bB4y.js → Slider-Bv0B6lI0.js} +2 -2
- package/dist/{Slider-CRf-bB4y.js.map → Slider-Bv0B6lI0.js.map} +1 -1
- package/dist/{TextInput-DH5SkbsE.js → TextInput-DiEMxVF6.js} +2 -2
- package/dist/{TextInput-DH5SkbsE.js.map → TextInput-DiEMxVF6.js.map} +1 -1
- package/dist/{ThemeProvider-2RMdVGxO.js → ThemeProvider-BI6JWBdJ.js} +2 -2
- package/dist/{ThemeProvider-2RMdVGxO.js.map → ThemeProvider-BI6JWBdJ.js.map} +1 -1
- package/dist/{ZoomableSvg-pooPb1Cu.js → ZoomableSvg-U_VH3QRO.js} +3 -3
- package/dist/{ZoomableSvg-pooPb1Cu.js.map → ZoomableSvg-U_VH3QRO.js.map} +1 -1
- package/dist/editors.js +2 -2
- package/dist/flint.js +3 -2
- package/dist/flint.js.map +1 -1
- package/dist/index.d.ts +358 -283
- package/dist/index.js +32 -32
- package/dist/internal/blocks/AIKit.js +2 -2
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ClipboardButton.js +1 -1
- package/dist/internal/blocks/ColorInput.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 +1 -1
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +1 -1
- package/dist/internal/blocks/Form.js +1 -1
- package/dist/internal/blocks/FormGroup.js +1 -1
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
- package/dist/internal/blocks/MultiCombobox.js +1 -1
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +1 -1
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +2 -2
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/TimeInput.js +1 -1
- package/dist/internal/components/Alert.js +1 -1
- package/dist/internal/components/Avatar.js +1 -1
- package/dist/internal/components/Badge.js +1 -1
- package/dist/internal/components/Breadcrumb.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/FileUpload.js +1 -1
- package/dist/internal/components/FullScreenModal.js +1 -1
- package/dist/internal/components/Kbd.js +1 -1
- package/dist/internal/components/Progress.js +3 -1
- package/dist/internal/components/Progress.js.map +1 -1
- package/dist/internal/components/RadioGroup.js +1 -1
- package/dist/internal/components/Search.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Slider.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 +4 -4
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.js +9 -9
- package/dist/styles.css +1 -1
- package/dist/{svgTransforms-C9njt92h.js → svgTransforms-CJAYPk7o.js} +2 -10
- package/dist/svgTransforms-CJAYPk7o.js.map +1 -0
- package/dist/testing.js +1 -1
- package/dist/{utils-DSvrhU8E.js → utils-DnkrFYqY.js} +3 -5
- package/dist/utils-DnkrFYqY.js.map +1 -0
- package/package.json +16 -16
- package/dist/AIKit-CNX6aiKm.js.map +0 -1
- package/dist/FullScreenModal-BvPuYibe.js.map +0 -1
- package/dist/svgTransforms-C9njt92h.js.map +0 -1
- package/dist/utils-DSvrhU8E.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AIKit-CQxVwyAk.js","names":["renderVariantIcon"],"sources":["../src/blocks/AIKit/AnswerActions.tsx","../src/blocks/AIKit/CollapsibleBody.tsx","../src/blocks/AIKit/CollapsibleStepHeader.tsx","../src/blocks/AIKit/hasMotion.ts","../src/blocks/AIKit/InlineStepDetail.tsx","../src/blocks/AIKit/InlineStepLabel.tsx","../src/blocks/AIKit/AnswerSummary.tsx","../src/blocks/AIKit/DiagramBlock.tsx","../src/blocks/AIKit/diagramChunk.ts","../src/blocks/AIKit/Markdown.tsx","../src/blocks/AIKit/MarkdownTable.tsx","../src/blocks/AIKit/MessageBubble.tsx","../src/blocks/AIKit/PlanApproval.tsx","../src/blocks/AIKit/PlanRewritingIndicator.tsx","../src/blocks/AIKit/PromptInputAction.tsx","../src/blocks/AIKit/PromptInputCommands.tsx","../src/blocks/AIKit/PromptInputSubmit.tsx","../src/blocks/AIKit/PromptInput.tsx","../src/blocks/AIKit/Question.tsx","../src/blocks/AIKit/QuestionBlock.tsx","../src/blocks/AIKit/SuggestedPrompt.tsx","../src/blocks/AIKit/ThinkingIndicator.tsx","../src/blocks/AIKit/ToolCall/ToolCallApproval.tsx","../src/blocks/AIKit/ToolCall/ToolCallChip.tsx","../src/blocks/AIKit/ToolCallStatusHeader.tsx","../src/blocks/AIKit/usageStatsHelpers.ts","../src/blocks/AIKit/UsageStatsRing.tsx","../src/blocks/AIKit/UsageStats.tsx"],"sourcesContent":["import { Button } from '../../components/Button';\nimport { ButtonGroup } from '../../components/ButtonGroup';\nimport { Tooltip } from '../../components/Tooltip';\nimport { ThumbsDown, ThumbsUp } from '../../icons';\nimport { ClipboardButton } from '../ClipboardButton';\n\n/** Which way a reader rated an answer. */\nexport type AnswerVote = 'up' | 'down';\n\nconst VOTE_BUTTONS = [\n { vote: 'up', label: 'Good answer', icon: <ThumbsUp className=\"tw:size-4\" /> },\n { vote: 'down', label: 'Bad answer', icon: <ThumbsDown className=\"tw:size-4\" /> },\n] as const;\n\ntype Props = {\n /**\n * The answer as the reader would read it, for the clipboard.\n *\n * - Empty or absent draws no copy button: a turn that produced only tool calls has nothing\n * to take away, and a disabled control is a worse answer to that than no control.\n */\n copyText?: string;\n /** The vote already recorded against this answer, or `null` for none. */\n vote: AnswerVote | null;\n onVote: (vote: AnswerVote) => void;\n};\n\n/**\n * What a reader can do with a finished answer: take it away, and say whether it was any good.\n *\n * - **Always rendered, never hover-only.** A reveal-on-hover row does not exist for anyone\n * reaching it without a pointer. The buttons are quiet (`invisible`) rather than hidden.\n * - Copy sits first: it is the one action with no round trip.\n * - **A vote can be changed but not withdrawn.** `aria-pressed` says which one is recorded, and\n * both buttons stay focusable so a reader can switch. Pressing the pressed one re-sends the\n * same vote.\n * - The recorded vote and the write are the caller's: the two chats vote against different\n * endpoints, and only the caller knows whether a turn is finished enough to rate.\n */\nexport const AnswerActions = ({ copyText, vote, onVote }: Props) => {\n return (\n <ButtonGroup space=\"extra-small\" aria-label=\"Answer actions\">\n {copyText ? (\n <ClipboardButton text={copyText} tooltip=\"Copy answer\" size=\"icon-xs\" variant=\"invisible\" />\n ) : null}\n\n {VOTE_BUTTONS.map(({ vote: candidate, label, icon }) => {\n const isRecorded = vote === candidate;\n\n return (\n <Tooltip key={candidate} tooltip={label} placement=\"top\" triggerAsChild>\n <Button\n size=\"icon-xs\"\n variant={isRecorded ? 'secondary' : 'invisible'}\n aria-label={label}\n aria-pressed={isRecorded}\n onClick={() => onVote(candidate)}\n >\n {icon}\n </Button>\n </Tooltip>\n );\n })}\n </ButtonGroup>\n );\n};\n","import type { ReactNode, TransitionEvent } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n isExpanded: boolean;\n isClosing: boolean;\n onClosed: () => void;\n children: ReactNode;\n};\n\nexport const CollapsibleBody = ({ isExpanded, isClosing, onClosed, children }: Props) => {\n const handleTransitionEnd = (event: TransitionEvent<HTMLDivElement>) => {\n if (event.target !== event.currentTarget) return;\n if (event.propertyName !== 'grid-template-rows') return;\n if (!isExpanded) onClosed();\n };\n\n return (\n <div\n className={cn(\n 'tw:grid tw:transition-[grid-template-rows] tw:duration-300 tw:ease-out tw:motion-reduce:transition-none',\n isExpanded ? 'tw:grid-rows-[1fr]' : 'tw:grid-rows-[0fr]',\n )}\n onTransitionEnd={handleTransitionEnd}\n >\n <div className=\"tw:min-h-0 tw:overflow-hidden\">{(isExpanded || isClosing) && children}</div>\n </div>\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { ChevronDown, CircleCheck, Loader2, XCircle } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Variant = 'success' | 'error' | 'processing' | 'dismissed';\n\ntype Props = {\n isExpanded: boolean;\n onToggle: () => void;\n label: ReactNode;\n variant?: Variant;\n};\n\n// Chrome speaks grey: step headers are meta-information, so they read in\n// muted ink and darken on hover — blue is reserved for genuinely interactive\n// elements (links, buttons), and status colour lives only in the icon. Error\n// keeps its tinted label: a failed step is content, not chrome.\nconst variantClasses: Record<Variant, string> = {\n success:\n 'tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground',\n error:\n 'tw:text-destructive tw:focus-visible:outline-destructive tw:not-disabled:hover:text-destructive',\n processing:\n 'tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground',\n dismissed:\n 'tw:text-muted-foreground tw:focus-visible:outline-ring tw:not-disabled:hover:text-foreground',\n};\n\n// Icons one step quieter than the label so the row reads text-first.\nconst iconClasses = 'tw:size-3.5 tw:shrink-0 tw:basis-3.5 tw:opacity-70';\n\nconst renderVariantIcon = (variant: Variant) => {\n if (variant === 'processing') {\n return <Loader2 className={cn(iconClasses, 'tw:animate-spin')} />;\n }\n // `error` and `dismissed` share the mark and take their ink from the\n // button's variant class — `destructive` for a real failure,\n // `muted-foreground` for a step the user waved off.\n if (variant === 'error' || variant === 'dismissed') {\n return <XCircle className={iconClasses} />;\n }\n return <CircleCheck className={iconClasses} />;\n};\n\nexport const CollapsibleStepHeader = ({\n isExpanded,\n onToggle,\n label,\n variant = 'success',\n}: Props) => {\n return (\n <button\n type=\"button\"\n aria-expanded={isExpanded}\n onClick={onToggle}\n className={cn(\n 'tw:flex tw:w-fit tw:items-center tw:gap-1.5 tw:text-left tw:text-xs tw:font-medium tw:transition-colors tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:disabled:opacity-40',\n variantClasses[variant],\n )}\n >\n {renderVariantIcon(variant)}\n <span className=\"tw:min-w-0\">\n {label}\n {/* Zero-width joiner keeps the chevron on the label's last line —\n an inline chevron with nothing binding it to the preceding word\n orphans onto a line of its own at some container widths. */}\n <span className=\"tw:whitespace-nowrap\">\n {''}\n <ChevronDown\n className={cn(\n 'tw:ml-1.5 tw:inline-block tw:size-3.5 tw:align-middle tw:transition-transform',\n isExpanded && 'tw:rotate-180',\n )}\n />\n </span>\n </span>\n </button>\n );\n};\n","export const hasMotion = () =>\n typeof window.matchMedia === 'function' &&\n !window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n","import type { ReactNode } from 'react';\n\ntype Props = {\n children: ReactNode;\n};\n\nexport const InlineStepDetail = ({ children }: Props) => (\n // `ml-2.5` is half of the `size-5` icon box `InlineStepLabel` puts beside a\n // step, so the rule falls on that icon's centre line rather than 2px inside\n // it. Anything drawing a run of steps can then line its own connector up with\n // the same number.\n <div className=\"tw:ml-2.5 tw:whitespace-pre-wrap tw:border-l tw:border-border tw:pl-3 tw:text-xs tw:text-muted-foreground\">\n {children}\n </div>\n);\n\nexport type { Props as InlineStepDetailProps };\n","import type { ReactNode } from 'react';\n\nimport { CircleCheck, Loader2, XCircle } from '../../icons';\n\ntype Variant = 'processing' | 'success' | 'error' | 'dismissed';\n\ntype Props = {\n variant: Variant;\n children: ReactNode;\n};\n\n// Status lives in the icon alone, and quietly: success/dismissed marks are\n// muted (they are the expected outcome, not news), the spinner is a shade\n// stronger (it reports active work), and only a real error takes the status\n// red. Fixed neutral-* greys were invisible in dark mode; tokens follow it.\nconst renderVariantIcon = (variant: Variant) => {\n if (variant === 'processing') {\n return <Loader2 className=\"tw:size-3.5 tw:animate-spin tw:text-muted-foreground\" />;\n }\n if (variant === 'error') {\n return <XCircle className=\"tw:size-3.5 tw:text-destructive\" />;\n }\n if (variant === 'dismissed') {\n return <XCircle className=\"tw:size-3.5 tw:text-muted-foreground/50\" />;\n }\n return <CircleCheck className=\"tw:size-3.5 tw:text-muted-foreground/50\" />;\n};\n\nexport const InlineStepLabel = ({ variant, children }: Props) => (\n <div className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-1\">\n {/* The icon can punch a gap in a connector drawn behind a run of steps: set\n `--inline-step-surface` on an ancestor to whatever paints behind, and the\n box masks the line across its own height. `relative` is what makes the\n mask work — the connector is absolutely positioned, so it paints above\n static content no matter what colour that content is. Unset the variable\n and the box stays transparent, so a step outside such a list is\n unchanged. */}\n <div className=\"tw:relative tw:flex tw:size-5 tw:shrink-0 tw:items-center tw:justify-center tw:[background:var(--inline-step-surface,transparent)]\">\n {renderVariantIcon(variant)}\n </div>\n <div className=\"tw:flex tw:min-w-0 tw:flex-wrap tw:items-center tw:gap-x-1.5 tw:gap-y-1 tw:text-xs tw:font-medium tw:text-muted-foreground\">\n {children}\n </div>\n </div>\n);\n\nexport type { Variant as InlineStepLabelVariant, Props as InlineStepLabelProps };\n","import { useState } from 'react';\n\nimport { CollapsibleBody } from './CollapsibleBody';\nimport { CollapsibleStepHeader } from './CollapsibleStepHeader';\nimport { hasMotion } from './hasMotion';\nimport { InlineStepDetail } from './InlineStepDetail';\nimport { InlineStepLabel } from './InlineStepLabel';\n\ntype AnswerItem = {\n question: string;\n answer?: string;\n};\n\ntype Variant = 'success' | 'dismissed';\n\ntype Props = {\n items: readonly AnswerItem[];\n variant?: Variant;\n noAnswerLabel?: string;\n onExpandToggle?: (next: boolean) => void;\n};\n\nconst SECTION_LABELS: Record<Variant, string> = {\n success: 'Answered questions',\n dismissed: 'Dismissed questions',\n};\n\nexport const AnswerSummary = ({\n items,\n variant = 'success',\n noAnswerLabel = 'No answer',\n onExpandToggle,\n}: Props) => {\n const [isExpanded, setIsExpanded] = useState(false);\n const [isClosing, setIsClosing] = useState(false);\n const toggle = () => {\n const next = !isExpanded;\n if (!next) setIsClosing(hasMotion());\n setIsExpanded(next);\n onExpandToggle?.(next);\n };\n const count = items.length;\n const [firstItem] = items;\n const label = count === 1 && firstItem ? firstItem.question : `${count} questions`;\n\n return (\n <section className=\"tw:mt-4 tw:flex tw:flex-col\" aria-label={SECTION_LABELS[variant]}>\n <CollapsibleStepHeader\n isExpanded={isExpanded}\n onToggle={toggle}\n variant={variant}\n label={label}\n />\n\n <CollapsibleBody\n isExpanded={isExpanded}\n isClosing={isClosing}\n onClosed={() => setIsClosing(false)}\n >\n <div className=\"tw:flex tw:flex-col tw:gap-4 tw:pt-4 tw:pl-5\">\n {items.map(({ question, answer }, index) => (\n <div key={`${index}-${question}`} className=\"tw:flex tw:flex-col tw:gap-1\">\n <InlineStepLabel variant={variant}>{question}</InlineStepLabel>\n <InlineStepDetail>\n {answer && answer.length > 0 ? answer : noAnswerLabel}\n </InlineStepDetail>\n </div>\n ))}\n </div>\n </CollapsibleBody>\n </section>\n );\n};\n\nexport type {\n AnswerItem as AnswerSummaryItem,\n Props as AnswerSummaryProps,\n Variant as AnswerSummaryVariant,\n};\n","import { useEffect, useState } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { DiagramSkeleton } from '../DiagramShared/DiagramSkeleton';\nimport { DiagramSource } from '../DiagramShared/DiagramSource';\n\nimport type { DiagramComponent, DiagramLoader } from './diagramChunk';\n\n/**\n * One diagram block: a skeleton while its chunk loads, the fence source plus a retry if it fails.\n *\n * - `load` runs once per mount and once per press of the retry button. The loader drops its own\n * rejected promise, so every attempt is a fresh fetch.\n * - Recovery is a gesture, not a timer: nothing on the page can tell when a chunk became\n * reachable again, and a tab left open across a deploy points at a URL that is gone for good —\n * a background loop would retry that one forever.\n * - The failure is already logged by the loader, which knows the chunk's name.\n * - A new `load` resets the block: every fence renders this same component type, so a block that\n * switches dialect would otherwise keep drawing through the dialect it had before.\n * - Both the renderer and the loader are functions held in state, so they go in through the\n * setter form — React runs a bare function as a lazy initializer or an updater instead.\n */\nexport const DiagramBlock = ({ load, code }: { load: DiagramLoader; code: string }) => {\n const [Diagram, setDiagram] = useState<DiagramComponent | null>(null);\n const [failed, setFailed] = useState(false);\n const [attempt, setAttempt] = useState(0);\n\n // Reset in the render pass rather than from an effect, so a dialect change never paints a frame\n // of the previous dialect's renderer.\n const [prevLoad, setPrevLoad] = useState(() => load);\n if (load !== prevLoad) {\n setPrevLoad(() => load);\n setDiagram(null);\n setFailed(false);\n }\n\n useEffect(() => {\n let cancelled = false;\n load().then(\n (component) => {\n if (!cancelled) setDiagram(() => component);\n },\n () => {\n if (!cancelled) setFailed(true);\n },\n );\n return () => {\n cancelled = true;\n };\n // `attempt` is the retry trigger — bumping it re-runs the import.\n }, [load, attempt]);\n\n if (Diagram) return <Diagram code={code} />;\n\n if (failed) {\n return (\n <div>\n <DiagramSource code={code} />\n <Button\n variant=\"inline\"\n size=\"small\"\n className=\"tw:mb-3\"\n onClick={() => {\n setFailed(false);\n setAttempt((count) => count + 1);\n }}\n >\n Try again\n </Button>\n </div>\n );\n }\n\n return <DiagramSkeleton />;\n};\n","import type { ComponentType } from 'react';\n\nexport type DiagramComponent = ComponentType<{ code: string }>;\nexport type DiagramLoader = () => Promise<DiagramComponent>;\n\n/**\n * An on-demand diagram chunk — shared between mounts, and retryable.\n *\n * - `lazy()` is deliberately not used here: it memoizes the settled import for the life of the\n * page, so one failed fetch (a dev server restarting, a stale tab after a deploy, a flaky\n * network) leaves every diagram in that tab rendering raw source until a full reload.\n * - A resolved import is kept, so the chunk is fetched once however many blocks mount.\n * - A failed one is cleared, so the next mount imports again. Same contract as\n * `getFlintRuntime()` one level down, inside `FlintChart`.\n * - The failure is logged here, where the chunk's name is known, so the swap to plain source is\n * never silent and a retry that fails again says so.\n */\nexport const diagramChunk = (name: string, load: DiagramLoader): DiagramLoader => {\n let pending: Promise<DiagramComponent> | null = null;\n return () => {\n pending ??= load().catch((error: unknown) => {\n console.error(`[AIKit] failed to load the ${name} chunk`, error);\n pending = null;\n throw error;\n });\n return pending;\n };\n};\n","import { isValidElement } from 'react';\nimport type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport type { Components, ExtraProps, Options } from 'react-markdown';\nimport ReactMarkdown from 'react-markdown';\nimport remarkGfm from 'remark-gfm';\n\nimport { Table } from '../../components/Table';\nimport { cn } from '../../utils';\nimport { ClipboardButton } from '../ClipboardButton';\n\nimport { DiagramBlock } from './DiagramBlock';\nimport type { DiagramLoader } from './diagramChunk';\nimport { diagramChunk } from './diagramChunk';\n\n// beautiful-mermaid pulls elkjs (~442 kB gzip), and vega + vega-lite + flint-chart outweigh the\n// rest of an answer. Most answers carry neither, so both chunks load on demand.\nconst loadMermaid = diagramChunk('MermaidDiagram', () =>\n import('@keboola/design/mermaid').then((module) => module.MermaidDiagram),\n);\n\nconst loadFlint = diagramChunk('FlintChart', () =>\n import('@keboola/design/flint').then((module) => module.FlintChart),\n);\n\n// Code surfaces are painted here rather than left to Tailwind Typography, whose\n// palette is pinned to light-mode values. The fill is the same `--muted` /\n// `--foreground` pair `styles.css` gives `.tw\\:prose blockquote` — the file's\n// idiom for an inset surface — so both follow the colour scheme and the brand.\n//\n// The colour has to be stated on `pre` and on inline `code` separately:\n// `[data-theme='dark'] .tw\\:prose` applies `prose-invert`, whose `code` rules are\n// `:where()`-wrapped, so these utilities win on specificity. Set only the fill\n// and dark mode pairs an inverted light text with it.\nconst proseClass =\n 'tw:prose tw:prose-sm tw:max-w-none tw:break-words tw:[&_pre]:bg-muted tw:[&_pre]:text-foreground tw:[&_:not(pre)>code]:bg-muted tw:[&_:not(pre)>code]:text-foreground tw:[&_:not(pre)>code]:rounded tw:[&_:not(pre)>code]:px-1 tw:[&_:not(pre)>code]:py-0.5 tw:[&_:not(pre)>code]:before:content-none tw:[&_:not(pre)>code]:after:content-none';\n\nconst getText = (node: ReactNode): string => {\n if (typeof node === 'string') return node;\n if (typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(getText).join('');\n if (\n isValidElement(node) &&\n typeof node.props === 'object' &&\n node.props !== null &&\n 'children' in node.props\n ) {\n return getText((node.props as { children: ReactNode }).children);\n }\n return '';\n};\n\nconst getLanguage = (element: ReactNode): string | undefined => {\n if (!isValidElement(element)) return undefined;\n const { props } = element;\n if (typeof props !== 'object' || props === null || !('className' in props)) return undefined;\n if (typeof props.className !== 'string') return undefined;\n return props.className.match(/language-(\\S+)/)?.[1];\n};\n\n/**\n * The plugins this renderer always runs.\n *\n * - GFM is part of its contract: tables route through the design `Table`, and autolinks and\n * task lists are what an assistant answer is written in.\n * - A caller's own plugins are appended to these, never substituted for them.\n */\nconst baseRemarkPlugins: NonNullable<Options['remarkPlugins']> = [remarkGfm];\n\n/**\n * Fence language → the on-demand chunk that draws it.\n *\n * - Both dialects are the agent's, not this package's: kai-agent's prompt tells the model to\n * write ```mermaid for structure and ```flint for quantitative data, so a chat that renders\n * one and not the other drops output the agent was instructed to produce.\n * - `flint-chart` is an alias — it is the fence tag flint's own docs use, so a model emits it\n * unprompted often enough to matter. `markdownComponents.tsx` in kbc-ui carries the same pair.\n * - Read through `Object.hasOwn`, never by plain index: a fence tagged ```constructor or\n * ```valueOf otherwise answers with an `Object.prototype` member, which is truthy, and calling\n * it as a loader throws — taking the whole message subtree down with it.\n */\nconst DIAGRAM_CHUNKS: Record<string, DiagramLoader | undefined> = {\n mermaid: loadMermaid,\n flint: loadFlint,\n 'flint-chart': loadFlint,\n};\n\n/**\n * The fence languages this renderer draws instead of printing.\n *\n * - For a caller that streams: a diagram mounts a lazily loaded chunk, so an answer arriving a\n * token at a time has to keep a fence that is still open an ordinary code block, or every\n * keystroke fetches the chunk. Sharing the list is what keeps that hold-back from missing a\n * dialect this map has and the caller does not.\n * - Frozen, because it is that shared contract: a consumer that pushed onto it would change how\n * every other app in the same bundle holds a fence back.\n */\nexport const DIAGRAM_LANGUAGES: readonly string[] = Object.freeze(Object.keys(DIAGRAM_CHUNKS));\n\n// react-markdown passes a hast `node` to every component; strip it before\n// spreading the rest onto a DOM element.\nconst baseComponents: Components = {\n // Handle mermaid at the `pre` level: react-markdown renders fenced blocks as\n // `<pre><code class=\"language-…\">`, so a diagram (a block `<div>`) must replace\n // the whole `<pre>` — returning it from the `code` override would nest a block\n // element inside `<pre><code>` (invalid HTML).\n pre({ children, ...props }: ComponentPropsWithoutRef<'pre'> & ExtraProps) {\n const child = Array.isArray(children) ? children[0] : children;\n const code = getText(child).replace(/\\n$/, '');\n const language = getLanguage(child);\n const load =\n language !== undefined && Object.hasOwn(DIAGRAM_CHUNKS, language)\n ? DIAGRAM_CHUNKS[language]\n : undefined;\n if (load) {\n if (!code.trim()) return null;\n return <DiagramBlock load={load} code={code} />;\n }\n const { node: _node, ...rest } = props;\n // Wrap so the copy button can reveal on hover/focus, anchored to the block.\n return (\n <div className=\"tw:group tw:relative\">\n <span className=\"tw:absolute tw:right-2 tw:top-2 tw:opacity-0 tw:transition-opacity tw:group-focus-within:opacity-100 tw:group-hover:opacity-100\">\n <ClipboardButton text={code} tooltip=\"Copy\" size=\"icon-xs\" variant=\"outline\" />\n </span>\n <pre {...rest}>{children}</pre>\n </div>\n );\n },\n // Open absolute http(s) links in a new tab with a safe `rel`; leave relative\n // and anchor links to default in-page navigation.\n a({ children, href, ...props }: ComponentPropsWithoutRef<'a'> & ExtraProps) {\n const { node: _node, ...rest } = props;\n const isExternal = !!href && /^https?:\\/\\//.test(href);\n return (\n <a\n href={href}\n {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : null)}\n {...rest}\n >\n {children}\n </a>\n );\n },\n // Route GFM tables through the design `Table` so they match the rest of the\n // system; `tw:not-prose` opts the table out of prose typography overrides.\n table({ className, ...props }: ComponentPropsWithoutRef<'table'> & ExtraProps) {\n const { node: _node, ...rest } = props;\n return (\n <div className=\"tw:not-prose tw:my-4\">\n <Table bordered className={cn('tw:!mb-0', className)} {...rest} />\n </div>\n );\n },\n thead(props: ComponentPropsWithoutRef<'thead'> & ExtraProps) {\n const { node: _node, ...rest } = props;\n return <Table.Header {...rest} />;\n },\n tbody(props: ComponentPropsWithoutRef<'tbody'> & ExtraProps) {\n const { node: _node, ...rest } = props;\n return <Table.Body {...rest} />;\n },\n tr(props: ComponentPropsWithoutRef<'tr'> & ExtraProps) {\n const { node: _node, ...rest } = props;\n return <Table.Row {...rest} />;\n },\n th(props: ComponentPropsWithoutRef<'th'> & ExtraProps) {\n const { node: _node, ...rest } = props;\n return <Table.Head {...rest} />;\n },\n td(props: ComponentPropsWithoutRef<'td'> & ExtraProps) {\n const { node: _node, ...rest } = props;\n return <Table.Cell {...rest} />;\n },\n};\n\ntype Props = {\n /** Markdown source (GFM: tables, task lists, strikethrough, autolinks). Tables\n * render through the design `Table`; fenced ```mermaid and ```flint blocks render\n * as diagrams; every other fenced block gets a hover copy button. */\n children: string;\n className?: string;\n /**\n * Remark plugins run after the built-in GFM one.\n *\n * - Appended to the built-ins, so GFM keeps working whatever a caller adds.\n * - The seam for an app's own inline syntax — an annotation the agent emits alongside a\n * link, say — which is app product knowledge and does not belong in this package.\n * - Hold it in a module constant. react-markdown re-parses on every render, so this\n * component is meant to be memoised by its caller, and a literal built during render\n * defeats that.\n */\n remarkPlugins?: NonNullable<Options['remarkPlugins']>;\n /**\n * Element renderers layered over the built-in ones.\n *\n * - Merged by key, and an override **replaces** that element's renderer rather than\n * wrapping it: a `table` override loses the design `Table`, an `a` override loses the\n * new-tab treatment for absolute links. Restate what you still want.\n * - Hold it in a module constant, for the same reason as `remarkPlugins`.\n */\n components?: Components;\n};\n\n/**\n * Read-only GFM Markdown renderer with design-token typography. Pair with\n * `MessageBubble` to render an assistant message body. Code blocks expose a\n * copy button, so mount a `TooltipProvider` once at the app root.\n */\nexport const Markdown = ({\n children,\n className,\n remarkPlugins,\n components: componentOverrides,\n}: Props) => {\n return (\n <div data-prose className={cn(proseClass, className)}>\n <ReactMarkdown\n remarkPlugins={\n remarkPlugins === undefined ? baseRemarkPlugins : [...baseRemarkPlugins, ...remarkPlugins]\n }\n components={\n componentOverrides === undefined\n ? baseComponents\n : { ...baseComponents, ...componentOverrides }\n }\n >\n {children}\n </ReactMarkdown>\n </div>\n );\n};\n","import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Maximize2 } from '../../icons';\nimport { cn } from '../../utils';\n\n/** How much wider than its column a table has to be before the column is the wrong surface. */\nconst EXPAND_RATIO = 1.5;\n\n/**\n * The token the host paints the table on, which is the colour the fade has to end in.\n *\n * - A gradient hides the cut-off cells by ending in the surface behind them. End it in any other\n * token and it draws a contrasting strip over the data instead of hiding it.\n * - Full class strings, not a composed `tw:from-${token}`: Tailwind reads literals.\n */\nconst FADE_SURFACE = {\n card: 'tw:from-card',\n background: 'tw:from-background',\n} as const;\n\ntype Surface = keyof typeof FADE_SURFACE;\n\ntype Props = {\n /**\n * The table itself — a `Table bordered`, whose own container is the scrolling element.\n *\n * - It has to be left at its intrinsic width (`tw:min-w-max`). `Table` is `w-full` with auto\n * layout, so on its own the grid shrinks to the column and wraps its cells instead:\n * `scrollWidth` never exceeds `clientWidth`, and neither affordance below can ever appear.\n */\n children: ReactNode;\n /**\n * What the host paints behind the table.\n *\n * - `card` for a table inside a panel or a card, `background` for one on the bare page.\n * - Only the fade reads it, and only to end in the same colour it covers.\n * - The fade is one strip down the whole right edge, so it can end in one colour only. A host\n * that leaves `Table`'s tinted header band in place gives it a second surface to cover and\n * the strip will contrast over the header row; paint the band `surface` too.\n */\n surface?: Surface;\n /**\n * Host controls in the rail, left of the expand action.\n *\n * - Quiet or revealed on hover is the host's call: its own `opacity-0 group-hover:opacity-100`\n * span, plus `tw:group` on `className`.\n */\n actions?: ReactNode;\n /**\n * Where a table too wide for its column goes — a panel to fullscreen, a modal.\n *\n * - Omitted where there is nowhere wider to go: the fade draws, the action does not.\n * - Whether the table is in fact cut off is measured here.\n */\n onExpand?: () => void;\n className?: string;\n};\n\n/**\n * A table in an answer, with the fact that it is cut off on the right said out loud.\n *\n * - `overflow-x: auto` scrolls silently, so nothing on screen says there is more to the right.\n * - The controls sit in a rail above the grid, never over the header row or the last row — the\n * data a reader reaches for them to get at. The rail holds its height, so revealing hover\n * controls or crossing the ratio cannot shift the table under the pointer.\n * - The fade marks the cut edge only while content remains, so it never reads as a border.\n * - A painted gradient rather than the `tw:scroll-fade-x` mask, which needs scroll-driven\n * animations: the build floor is `baseline-widely-available` (Safari 16, Firefox 104), and there\n * the utility either fades both edges of a table that fits or, behind the `supports-` guard\n * `PageLayout` uses, says nothing at all — which is the state this component exists to end. The\n * mask also has to sit on the scrolling element, and that is `Table`'s own container, not ours.\n * - Past `EXPAND_RATIO` the fade is joined by `onExpand`'s action, drawn without waiting for a\n * hover: it reports that content is cut off, which the reader needs before going looking.\n */\nexport const MarkdownTable = ({\n children,\n actions,\n onExpand,\n surface = 'card',\n className,\n}: Props) => {\n const frameRef = useRef<HTMLDivElement>(null);\n const [overflow, setOverflow] = useState({ scrollable: false, atEnd: true, ratio: 1 });\n\n // The scrolling element is the container `Table` renders around the grid — the frame's first\n // child. The frame stays `overflow-visible` so the fade can sit over the grid's edge.\n const measure = useCallback(() => {\n const box = frameRef.current?.firstElementChild;\n if (!box) return;\n\n const { scrollLeft, scrollWidth, clientWidth } = box;\n const hidden = scrollWidth - clientWidth;\n\n setOverflow({\n scrollable: hidden > 1,\n atEnd: scrollLeft >= hidden - 1,\n ratio: clientWidth > 0 ? scrollWidth / clientWidth : 1,\n });\n }, []);\n\n useEffect(() => {\n const box = frameRef.current?.firstElementChild;\n if (!box) return;\n\n measure();\n box.addEventListener('scroll', measure, { passive: true });\n\n // Two widths move independently, and either one changes the answer:\n //\n // 1. The box's, when the surface resizes without the viewport doing so — a panel going\n // fullscreen, a drag handle.\n // 2. The grid's, while an answer streams. A cell taking a longer value widens the table inside\n // a box whose own border box never moves, so watching only the box leaves the fade and the\n // expand action reading the width the table had a few tokens ago.\n const observer = new ResizeObserver(measure);\n observer.observe(box);\n if (box.firstElementChild) observer.observe(box.firstElementChild);\n\n return () => {\n box.removeEventListener('scroll', measure);\n observer.disconnect();\n };\n }, [measure]);\n\n const showExpand = !!onExpand && overflow.scrollable && overflow.ratio >= EXPAND_RATIO;\n\n return (\n <div className={className}>\n {/* No rail where the host has nothing to put in it — an empty band says nothing. */}\n {(actions || onExpand) && (\n // Hover controls sit left of the persistent one: a reveal span keeps its width while\n // hidden, so trailing them would park \"Open wider\" against an invisible gap.\n <div className=\"tw:flex tw:h-8 tw:items-center tw:justify-end tw:gap-1\">\n {actions}\n {showExpand && (\n // A positioned tooltip, not a native `title`: the native one renders under the\n // pointer, i.e. over the header row.\n <Tooltip\n tooltip=\"This table is wider than the space it has\"\n placement=\"top\"\n triggerAsChild\n >\n <Button size=\"small\" variant=\"invisible\" onClick={onExpand}>\n <Maximize2 className=\"tw:size-3.5\" />\n Open wider\n </Button>\n </Tooltip>\n )}\n </div>\n )}\n\n <div ref={frameRef} className=\"tw:relative\">\n {children}\n\n {overflow.scrollable && !overflow.atEnd && (\n <span\n aria-hidden\n data-testid=\"markdown-table-fade\"\n className={cn(\n 'tw:pointer-events-none tw:absolute tw:inset-y-px tw:right-px tw:w-12 tw:rounded-r-[10px] tw:bg-gradient-to-l tw:to-transparent',\n FADE_SURFACE[surface],\n )}\n />\n )}\n </div>\n </div>\n );\n};\n","import type { ComponentProps, PropsWithChildren, ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\n\nimport type { Avatar } from '../../components/Avatar';\n\n// No per-message avatar. In a narrow panel a 30px portrait beside every turn\n// spends width on identity the reader already has — there are two participants\n// — and pushes the bubble into an L-shape beside it. Alignment carries the turn.\nconst containerClasses = cva(['tw:flex', 'tw:max-w-full', 'tw:gap-3'], {\n variants: {\n variant: {\n user: ['tw:justify-end'],\n assistant: ['tw:justify-start', 'tw:w-full'],\n },\n },\n defaultVariants: {\n variant: 'assistant',\n },\n});\n\nconst stackClasses = cva(['tw:flex', 'tw:min-w-0', 'tw:flex-1', 'tw:flex-col', 'tw:gap-2'], {\n variants: {\n variant: {\n user: ['tw:items-end'],\n assistant: [],\n },\n },\n defaultVariants: {\n variant: 'assistant',\n },\n});\n\nconst contentClasses = cva(\n [\n 'tw:flex',\n 'tw:flex-col',\n // Prose supplies its own rhythm between blocks, so a large gap here stacks\n // on top of it and reads as slack rather than structure.\n 'tw:gap-3',\n 'tw:break-words',\n 'tw:leading-relaxed',\n 'tw:text-foreground',\n // Hooks on `data-prose`, not the `tw:prose` class — Tailwind scans raw file\n // bytes, so a `\\:` escape in a TS string reaches the generator doubled.\n 'tw:[&_[data-prose]]:text-foreground',\n ],\n {\n variants: {\n variant: {\n assistant: ['tw:flex-1', 'tw:w-full', 'tw:min-w-0', 'tw:[&>*]:min-w-0'],\n user: [\n // The cap is a share of the column, not a fixed width: it is what\n // leaves a gutter on the left, and that gutter is the whole reason\n // the bubble reads as one side of a conversation. A fixed 640px\n // never engages in a docked panel, and a left margin cannot stand in\n // for it — `w-fit` sizes to the space it has before the margin\n // applies, so the margin pushes the bubble past the column instead\n // of insetting it. The absolute term stops a fullscreen panel from\n // running a line of someone's own words 700px wide.\n 'tw:max-w-[min(85%,40rem)]',\n 'tw:w-fit',\n 'tw:bg-muted',\n // Tighter vertically than horizontally: a short message padded evenly\n // on all four sides reads as a block, not as something someone said.\n // The radius comes down with it — a 16px corner on a one-line bubble\n // is most of its height.\n 'tw:px-3',\n 'tw:py-2',\n 'tw:rounded-xl',\n 'tw:overflow-hidden',\n 'tw:break-anywhere',\n ],\n },\n },\n\n defaultVariants: {\n variant: 'assistant',\n },\n },\n);\n\ntype Props = {\n variant: 'user' | 'assistant';\n actions?: ReactNode;\n createdAt?: string;\n /** @deprecated No avatar is rendered; accepted so existing call sites keep compiling. */\n user?: ComponentProps<typeof Avatar>['user'];\n} & PropsWithChildren;\n\nexport const MessageBubble = ({ variant, children, actions, createdAt }: Props) => {\n return (\n <div className={containerClasses({ variant })} data-testid={`chat-message-${variant}`}>\n <div className={stackClasses({ variant })}>\n {/* The timestamp is reachable on the user's own bubble — where the avatar\n that used to carry it sat. Deliberately not on the assistant's: a\n native tooltip fires from anywhere in the body after a hover pause,\n and an answer's body is full of tables and code it would cover. */}\n <div\n className={contentClasses({ variant })}\n title={variant === 'user' ? createdAt : undefined}\n >\n {children}\n </div>\n {actions}\n </div>\n </div>\n );\n};\n","import { type FormEvent, type KeyboardEvent, type ReactNode, useState } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport {\n FullScreenModal,\n FullScreenModalBody,\n FullScreenModalHeader,\n} from '../../components/FullScreenModal';\nimport { Tooltip } from '../../components/Tooltip';\nimport { ChevronDown, Maximize2, Minimize2, Send, X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Textarea } from '../Textarea';\n\nimport { CollapsibleBody } from './CollapsibleBody';\nimport { hasMotion } from './hasMotion';\n\ntype PlanApprovalStatus = 'pending' | 'approved' | 'dismissed' | 'changes-requested';\n\ntype PlanApprovalProps = {\n status: PlanApprovalStatus;\n title: string;\n summary?: ReactNode;\n stepCount?: number;\n planBody?: ReactNode;\n\n defaultExpanded?: boolean;\n isExpanded?: boolean;\n onExpandToggle?: (next: boolean) => void;\n\n onApprove?: () => void;\n onRequestChanges?: (reason: string) => void;\n onClose?: () => void;\n isSubmitting?: boolean;\n approveTooltip?: ReactNode;\n\n pendingPillLabel?: string;\n approvedPillLabel?: string;\n dismissedPillLabel?: string;\n changesRequestedPillLabel?: string;\n approveLabel?: string;\n requestChangesLabel?: string;\n cancelLabel?: string;\n showMoreLabel?: string;\n showLessLabel?: string;\n closeLabel?: string;\n fullScreenLabel?: string;\n exitFullScreenLabel?: string;\n changeRequestPlaceholder?: string;\n changeRequestSubmitLabel?: string;\n stepCountLabel?: (count: number) => string;\n\n className?: string;\n};\n\nconst defaultStepCountLabel = (count: number) => `${count} step${count === 1 ? '' : 's'}`;\n\nconst StatusPill = ({\n status,\n pendingLabel,\n approvedLabel,\n dismissedLabel,\n changesRequestedLabel,\n}: {\n status: PlanApprovalStatus;\n pendingLabel: string;\n approvedLabel: string;\n dismissedLabel: string;\n changesRequestedLabel: string;\n}) => {\n if (status === 'approved') {\n return (\n <Badge color=\"green\" variant=\"pill\" className=\"tw:normal-case tw:tracking-normal\">\n {approvedLabel}\n </Badge>\n );\n }\n if (status === 'dismissed') {\n return (\n <Badge color=\"gray\" variant=\"pill\" className=\"tw:normal-case tw:tracking-normal\">\n {dismissedLabel}\n </Badge>\n );\n }\n if (status === 'changes-requested') {\n return (\n <Badge color=\"blue\" variant=\"pill\" className=\"tw:normal-case tw:tracking-normal\">\n {changesRequestedLabel}\n </Badge>\n );\n }\n return (\n <Badge color=\"green\" variant=\"pill\" className=\"tw:normal-case tw:tracking-normal\">\n {pendingLabel}\n </Badge>\n );\n};\n\nconst ExpandToggle = ({\n isExpanded,\n onToggle,\n showMoreLabel,\n showLessLabel,\n}: {\n isExpanded: boolean;\n onToggle: () => void;\n showMoreLabel: string;\n showLessLabel: string;\n}) => (\n <button\n type=\"button\"\n onClick={onToggle}\n aria-expanded={isExpanded}\n className=\"tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-transparent tw:p-0 tw:text-sm tw:font-medium tw:text-secondary-500 tw:hover:text-secondary-600 tw:focus-visible:outline tw:focus-visible:outline-2 tw:focus-visible:outline-offset-2 tw:focus-visible:outline-ring tailwindcss-preflight\"\n >\n <span>{isExpanded ? showLessLabel : showMoreLabel}</span>\n <ChevronDown\n className={cn('tw:size-5 tw:transition-transform', isExpanded && 'tw:rotate-180')}\n />\n </button>\n);\n\nconst ChangeRequestForm = ({\n value,\n onValueChange,\n onSubmit,\n onKeyDown,\n placeholder,\n submitLabel,\n formLabel,\n canSubmit,\n isSubmitting,\n}: {\n value: string;\n onValueChange: (value: string) => void;\n onSubmit: (event?: FormEvent) => void;\n onKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;\n placeholder: string;\n submitLabel: string;\n formLabel: string;\n canSubmit: boolean;\n isSubmitting: boolean;\n}) => (\n <form\n onSubmit={onSubmit}\n className=\"tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground tw:px-4 tw:py-3\"\n aria-label={formLabel}\n >\n <div className=\"tw:relative\">\n <Textarea\n value={value}\n onValueChange={onValueChange}\n placeholder={placeholder}\n maxRows={4}\n autoFocus\n onKeyDown={onKeyDown}\n containerClassName=\"tw:pr-12\"\n disabled={isSubmitting}\n aria-label={placeholder}\n data-testid=\"plan-change-request-input\"\n />\n <Button\n type=\"submit\"\n variant=\"invisible\"\n size=\"icon-sm\"\n aria-label={submitLabel}\n disabled={!canSubmit}\n className=\"tw:absolute tw:right-2 tw:top-1/2 tw:-translate-y-1/2 tw:[&_svg]:text-secondary-500 tw:not-disabled:hover:[&_svg]:text-secondary-600\"\n data-testid=\"plan-change-request-submit\"\n >\n <Send className=\"tw:size-4\" />\n </Button>\n </div>\n </form>\n);\n\nconst PlanActions = ({\n isRequestingChanges,\n isSubmitting,\n onApprove,\n onRequestChanges,\n onOpenRequestChanges,\n onCancelChangeRequest,\n approveLabel,\n requestChangesLabel,\n cancelLabel,\n approveTooltip,\n}: {\n isRequestingChanges: boolean;\n isSubmitting: boolean;\n onApprove?: () => void;\n onRequestChanges?: (reason: string) => void;\n onOpenRequestChanges: () => void;\n onCancelChangeRequest: () => void;\n approveLabel: string;\n requestChangesLabel: string;\n cancelLabel: string;\n approveTooltip?: ReactNode;\n}) => (\n <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">\n {isRequestingChanges ? (\n <Button\n variant=\"outline\"\n size=\"small\"\n onClick={onCancelChangeRequest}\n disabled={isSubmitting}\n data-testid=\"plan-cancel-button\"\n className=\"tw:shrink-0 tw:whitespace-nowrap\"\n >\n {cancelLabel}\n </Button>\n ) : (\n onRequestChanges && (\n <Button\n variant=\"outline\"\n size=\"small\"\n onClick={onOpenRequestChanges}\n disabled={isSubmitting}\n data-testid=\"plan-request-changes-button\"\n className=\"tw:shrink-0 tw:whitespace-nowrap\"\n >\n {requestChangesLabel}\n </Button>\n )\n )}\n {onApprove &&\n (approveTooltip ? (\n <Tooltip tooltip={approveTooltip} placement=\"top\" triggerAsChild>\n <Button\n variant=\"primary\"\n size=\"small\"\n onClick={onApprove}\n disabled={isSubmitting || isRequestingChanges}\n data-testid=\"plan-approve-button\"\n className=\"tw:shrink-0 tw:whitespace-nowrap\"\n >\n {approveLabel}\n </Button>\n </Tooltip>\n ) : (\n <Button\n variant=\"primary\"\n size=\"small\"\n onClick={onApprove}\n disabled={isSubmitting || isRequestingChanges}\n data-testid=\"plan-approve-button\"\n className=\"tw:shrink-0 tw:whitespace-nowrap\"\n >\n {approveLabel}\n </Button>\n ))}\n </div>\n);\n\nexport const PlanApproval = ({\n status,\n title,\n summary,\n stepCount,\n planBody,\n\n defaultExpanded = false,\n isExpanded: isExpandedProp,\n onExpandToggle,\n\n onApprove,\n onRequestChanges,\n onClose,\n isSubmitting = false,\n approveTooltip,\n\n pendingPillLabel = 'Ready for approval',\n approvedPillLabel = 'Approved',\n dismissedPillLabel = 'Dismissed',\n changesRequestedPillLabel = 'Changes Requested',\n approveLabel = 'Approve',\n requestChangesLabel = 'Request Changes',\n cancelLabel = 'Cancel',\n showMoreLabel = 'Show more',\n showLessLabel = 'Show less',\n closeLabel = 'Dismiss plan',\n fullScreenLabel = 'View full screen',\n exitFullScreenLabel = 'Exit full screen',\n changeRequestPlaceholder = 'What would you like to change in the plan?',\n changeRequestSubmitLabel = 'Send change request',\n stepCountLabel = defaultStepCountLabel,\n\n className,\n}: PlanApprovalProps) => {\n const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n const isExpanded = isExpandedProp ?? uncontrolledExpanded;\n const [isRequestingChanges, setIsRequestingChanges] = useState(false);\n const [changeRequest, setChangeRequest] = useState('');\n const [isFullScreen, setIsFullScreen] = useState(false);\n\n const isPending = status === 'pending';\n const showActions = isPending && (onApprove || onRequestChanges);\n const showClose = isPending && Boolean(onClose);\n const canShowPlanBody = planBody != null;\n const trimmedChangeRequest = changeRequest.trim();\n const canSubmitChangeRequest = trimmedChangeRequest.length > 0 && !isSubmitting;\n\n const [isClosing, setIsClosing] = useState(false);\n\n const toggleExpanded = () => {\n const next = !isExpanded;\n if (!next) setIsClosing(hasMotion());\n if (isExpandedProp === undefined) {\n setUncontrolledExpanded(next);\n }\n onExpandToggle?.(next);\n };\n\n const handleOpenRequestChanges = () => {\n setIsRequestingChanges(true);\n if (!isExpanded) {\n toggleExpanded();\n }\n };\n\n const handleCancelChangeRequest = () => {\n setIsRequestingChanges(false);\n setChangeRequest('');\n };\n\n const handleSubmitChangeRequest = (event?: FormEvent) => {\n event?.preventDefault();\n if (!canSubmitChangeRequest) return;\n onRequestChanges?.(trimmedChangeRequest);\n };\n\n const handleTextareaKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n if (event.key === 'Enter' && !event.shiftKey) {\n event.preventDefault();\n handleSubmitChangeRequest();\n }\n };\n\n const showChangeRequestForm = isRequestingChanges && isPending;\n\n const changeRequestForm = (\n <ChangeRequestForm\n value={changeRequest}\n onValueChange={setChangeRequest}\n onSubmit={handleSubmitChangeRequest}\n onKeyDown={handleTextareaKeyDown}\n placeholder={changeRequestPlaceholder}\n submitLabel={changeRequestSubmitLabel}\n formLabel={requestChangesLabel}\n canSubmit={canSubmitChangeRequest}\n isSubmitting={isSubmitting}\n />\n );\n\n const planActions = (\n <PlanActions\n isRequestingChanges={isRequestingChanges}\n isSubmitting={isSubmitting}\n onApprove={onApprove}\n onRequestChanges={onRequestChanges}\n onOpenRequestChanges={handleOpenRequestChanges}\n onCancelChangeRequest={handleCancelChangeRequest}\n approveLabel={approveLabel}\n requestChangesLabel={requestChangesLabel}\n cancelLabel={cancelLabel}\n approveTooltip={approveTooltip}\n />\n );\n\n return (\n <>\n {/* Two surface tiers, each painting its own ink.\n\n - The shell is `background`, carrying the header and the summary directly.\n - Plan body, change-request form and action bar lift off it on `card`.\n - Whether the shell reads as a recessed tray is the host's call, not this\n component's: against a white page it does, but kbc-ui paints the Kai\n panel `background` too, so there the 1px border alone delimits the card.\n - Each tier pins a foreground beside its background. One that sets only a\n background inherits ink from whatever rendered it, and reads same-on-same\n in one of the schemes. */}\n <section\n aria-label={title}\n className={cn(\n 'tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-background tw:text-foreground',\n className,\n )}\n data-testid=\"plan-approval-root\"\n data-plan-status={status}\n >\n <div className=\"tw:flex tw:items-start tw:gap-2 tw:pl-4 tw:pr-2 tw:pt-4\">\n <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pb-4\">\n <div className=\"tw:flex tw:items-center tw:gap-3\">\n <StatusPill\n status={status}\n pendingLabel={pendingPillLabel}\n approvedLabel={approvedPillLabel}\n dismissedLabel={dismissedPillLabel}\n changesRequestedLabel={changesRequestedPillLabel}\n />\n {/* 12px on `muted-foreground` — knowingly at the AA floor.\n\n - 4.55:1 against the shell's `background` in light; AA asks 4.5:1.\n - `muted-foreground` is the ink for secondary metadata, so darker\n ink here would break the hierarchy to buy the margin.\n - Headroom is a token question, not a call-site one. The ratio is\n pinned in `tokenBlocks.test.ts`, so a nudge to\n `--muted-foreground` fails there rather than passing silently. */}\n {stepCount != null && stepCount > 0 && (\n <span className=\"tw:text-xs tw:leading-4 tw:text-muted-foreground\">\n {stepCountLabel(stepCount)}\n </span>\n )}\n </div>\n <p className=\"tw:m-0 tw:text-base tw:font-semibold tw:leading-6\">{title}</p>\n </div>\n <div className=\"tw:flex tw:items-center tw:gap-2\">\n {canShowPlanBody && !isFullScreen && (\n <Tooltip tooltip={fullScreenLabel} placement=\"top\" triggerAsChild>\n <Button\n variant=\"outline\"\n size=\"icon-sm\"\n aria-label={fullScreenLabel}\n onClick={() => setIsFullScreen(true)}\n data-testid=\"plan-fullscreen-button\"\n >\n <Maximize2 className=\"tw:size-4\" />\n </Button>\n </Tooltip>\n )}\n {showClose && !isFullScreen && (\n <Button\n variant=\"outline\"\n size=\"icon-sm\"\n aria-label={closeLabel}\n onClick={onClose}\n disabled={isSubmitting}\n data-testid=\"plan-close-button\"\n >\n <X className=\"tw:size-4\" />\n </Button>\n )}\n </div>\n </div>\n\n {summary != null && (\n <div\n className={cn(\n 'tw:whitespace-pre-wrap tw:border-0 tw:border-t tw:border-solid tw:border-border tw:px-4 tw:pt-4 tw:text-sm',\n isExpanded && canShowPlanBody ? 'tw:pb-4' : 'tw:pb-2',\n )}\n >\n {summary}\n </div>\n )}\n\n {canShowPlanBody && (\n <CollapsibleBody\n isExpanded={isExpanded}\n isClosing={isClosing}\n onClosed={() => setIsClosing(false)}\n >\n <div className=\"tw:max-h-[400px] tw:overflow-y-auto tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:p-4 tw:text-sm tw:text-card-foreground\">\n {planBody}\n </div>\n </CollapsibleBody>\n )}\n\n {!isFullScreen && (\n <>\n {showChangeRequestForm && changeRequestForm}\n\n <div\n className={cn(\n 'tw:flex tw:items-center tw:gap-2 tw:overflow-x-auto tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:px-4 tw:py-3 tw:text-card-foreground',\n canShowPlanBody ? 'tw:justify-between' : 'tw:justify-end',\n )}\n >\n {canShowPlanBody && (\n <div className=\"tw:shrink-0\">\n <ExpandToggle\n isExpanded={isExpanded}\n onToggle={toggleExpanded}\n showMoreLabel={showMoreLabel}\n showLessLabel={showLessLabel}\n />\n </div>\n )}\n\n {showActions && planActions}\n </div>\n </>\n )}\n </section>\n\n {canShowPlanBody && isFullScreen && (\n <FullScreenModal onEscapeKeyDown={() => setIsFullScreen(false)}>\n <FullScreenModalHeader\n title={\n <div className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-3\">\n <StatusPill\n status={status}\n pendingLabel={pendingPillLabel}\n approvedLabel={approvedPillLabel}\n dismissedLabel={dismissedPillLabel}\n changesRequestedLabel={changesRequestedPillLabel}\n />\n <span className=\"tw:truncate\">{title}</span>\n </div>\n }\n onClose={() => setIsFullScreen(false)}\n showPreviousTitle={false}\n >\n <div className=\"tw:flex tw:items-center tw:gap-2\">\n {showClose && (\n <Tooltip tooltip={closeLabel} placement=\"bottom\" triggerAsChild>\n <Button\n variant=\"outline\"\n size=\"icon\"\n aria-label={closeLabel}\n onClick={onClose}\n disabled={isSubmitting}\n data-testid=\"plan-close-button\"\n >\n <X className=\"tw:size-4\" />\n </Button>\n </Tooltip>\n )}\n <Tooltip tooltip={exitFullScreenLabel} placement=\"bottom\" triggerAsChild>\n <Button\n variant=\"outline\"\n size=\"icon\"\n aria-label={exitFullScreenLabel}\n onClick={() => setIsFullScreen(false)}\n data-testid=\"plan-exit-fullscreen-button\"\n >\n <Minimize2 className=\"tw:size-4\" />\n </Button>\n </Tooltip>\n </div>\n </FullScreenModalHeader>\n {/* The modal is portalled to `document.body`, so it inherits nothing\n from the card above — body and footer each pin their own surface\n and ink, on top of the frame's own `background`/`foreground`. */}\n <FullScreenModalBody className=\"tw:bg-card tw:px-6 tw:py-4 tw:text-card-foreground\">\n <div className=\"tw:mx-auto tw:w-full tw:max-w-[800px] tw:text-sm\">{planBody}</div>\n </FullScreenModalBody>\n {(showChangeRequestForm || showActions) && (\n <div className=\"tw:shrink-0 tw:border-0 tw:border-t tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground\">\n <div className=\"tw:mx-auto tw:w-full tw:max-w-[800px]\">\n {showChangeRequestForm && changeRequestForm}\n {showActions && (\n <div className=\"tw:flex tw:justify-end tw:px-4 tw:py-3\">{planActions}</div>\n )}\n </div>\n </div>\n )}\n </FullScreenModal>\n )}\n </>\n );\n};\n\nexport type { PlanApprovalStatus, PlanApprovalProps };\n","import { Loader2 } from '../../icons';\n\ntype PlanRewritingIndicatorProps = {\n label?: string;\n};\n\nexport const PlanRewritingIndicator = ({\n label = 'Rewriting the plan...',\n}: PlanRewritingIndicatorProps) => (\n <div\n className=\"tw:flex tw:items-center tw:gap-2\"\n role=\"status\"\n data-testid=\"plan-rewriting-indicator\"\n >\n <Loader2 className=\"tw:size-4 tw:animate-spin tw:text-secondary-500\" />\n <span className=\"tw:text-sm tw:italic tw:text-secondary-500\">{label}</span>\n </div>\n);\n\nexport type { PlanRewritingIndicatorProps };\n","import type { ComponentProps, MouseEventHandler } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\ntype Props = ComponentProps<'button'>;\n\nexport const PromptInputAction = ({ ref, onMouseDown, ...rest }: Props) => {\n const handleOnMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n // Prevents focus stealing by PromptInput.\n event.stopPropagation();\n onMouseDown?.(event);\n };\n\n return <Slot {...rest} ref={ref} onMouseDown={handleOnMouseDown}></Slot>;\n};\n","import type { ReactNode } from 'react';\n\nimport { Truncated } from '../../components/Truncated';\nimport { cn } from '../../utils';\nimport { Command } from '../Command';\n\nexport type PromptCommand = {\n label: string;\n value: string;\n description?: string;\n icon?: ReactNode;\n group: string;\n};\n\ntype Props = {\n items: PromptCommand[];\n open: boolean;\n onSelect: (value: string) => void;\n filterValue: string;\n children: ReactNode;\n};\n\nexport const PromptInputCommands = ({ items, open, onSelect, filterValue, children }: Props) => {\n const filtered = filterValue\n ? items.filter(\n (item) =>\n item.label.toLowerCase().includes(filterValue.toLowerCase()) ||\n item.value.toLowerCase().includes(filterValue.toLowerCase()),\n )\n : items;\n\n const groups = filtered.reduce<Record<string, PromptCommand[]>>((acc, item) => {\n const group = acc[item.group] ?? [];\n group.push(item);\n acc[item.group] = group;\n return acc;\n }, {});\n\n return (\n <Command loop className=\"tw:relative\" shouldFilter={false}>\n {open && (\n <div\n className={cn(\n 'tw:absolute tw:bottom-full tw:left-0 tw:right-0 tw:z-50 tw:mb-1',\n 'tw:rounded-md tw:border tw:border-border tw:bg-popover tw:text-popover-foreground tw:shadow-lg',\n )}\n >\n {filtered.length === 0 ? (\n <div className=\"tw:px-4 tw:py-3 tw:text-center tw:text-sm tw:text-muted-foreground\">\n No commands found\n </div>\n ) : (\n <Command.List viewPortClassName=\"tw:max-h-80\">\n {Object.entries(groups).map(([groupName, groupItems]) => (\n <Command.Group key={groupName} heading={groupName}>\n {groupItems.map((item) => (\n <Command.Item\n key={item.value}\n value={item.value}\n icon={item.icon}\n onSelect={() => onSelect(item.value)}\n >\n <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col\">\n <span>{item.label}</span>\n {item.description && (\n <Truncated\n text={item.description}\n twoLines\n className=\"tw:text-xs tw:text-muted-foreground\"\n />\n )}\n </div>\n </Command.Item>\n ))}\n </Command.Group>\n ))}\n </Command.List>\n )}\n </div>\n )}\n\n {children}\n </Command>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Tooltip } from '../../components/Tooltip';\nimport { CirclePause, Play, Send } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PromptInputAction } from './PromptInputAction';\n\ntype SubmitStatus = 'submitted' | 'ready' | 'streaming' | 'interrupted';\n\ntype Props = Pick<ComponentProps<typeof Button>, 'disabled' | 'ref'> & {\n status?: SubmitStatus;\n};\n\n// Icon-only button: the tooltip is visual only, so the accessible name must be\n// set separately per status to match what the button actually does (see\n// PromptInput's handleSubmit: ready->onSend, streaming->onAbort, interrupted->onContinue).\nconst ARIA_LABEL_BY_STATUS: Record<SubmitStatus, string> = {\n ready: 'Send message',\n streaming: 'Stop',\n interrupted: 'Continue',\n submitted: 'Sending…',\n};\n\nexport const PromptInputSubmit = ({ ref, disabled, status = 'ready' }: Props) => {\n const icon: ReactNode = (() => {\n if (status === 'streaming') return <CirclePause className=\"tw:size-4\" />;\n if (status === 'interrupted') return <Play className=\"tw:size-4\" />;\n // Optical centring. The paper plane's ink sits up and to the right of the\n // glyph box — its centroid measures ~1.2px right and ~1.3px high at 16px —\n // so a box-centred Send reads as off-centre inside a circle. The nudge pulls\n // the mass back toward the middle; the symmetric pause/play icons need none.\n return <Send className=\"tw:size-4 tw:translate-x-[-1px] tw:translate-y-[1px]\" />;\n })();\n\n const getTooltipText = () => {\n if (status === 'streaming') return 'Stop';\n if (status === 'interrupted') return 'Continue';\n return undefined;\n };\n\n return (\n <Tooltip.Root>\n <Tooltip.Trigger asChild>\n <PromptInputAction>\n <Button\n ref={ref}\n type=\"submit\"\n disabled={disabled}\n aria-label={ARIA_LABEL_BY_STATUS[status]}\n size=\"icon-sm\"\n // The only filled control in the composer, so the one button that\n // submits stays distinct from the several beside it that do not.\n //\n // - Fill is Kai's gradient (`aigradient-600`) — the same sweep the\n // field's focus border paints, so focus and send read as one family.\n // - `variant=\"primary\"` still supplies the white foreground, focus ring\n // and disabled semantics; the gradient covers its background colour.\n // - Disabled until there is content, so the composer shows ready-or-not\n // without needing a label.\n variant=\"primary\"\n isLoading={status === 'submitted'}\n className={cn(\n 'tw:ml-auto tw:flex tw:items-center tw:rounded-full',\n 'tw:bg-gradient-to-br tw:from-[#61E4FF] tw:via-[#1F8FFF] tw:to-[#7C5CFF]',\n 'tw:hover:not-disabled:brightness-110',\n )}\n >\n {/* Suppress the child icon while isLoading — Button already renders\n the spinner; rendering both would double-stack glyphs. */}\n {status !== 'submitted' && icon}\n </Button>\n </PromptInputAction>\n </Tooltip.Trigger>\n\n {getTooltipText() && (\n <Tooltip.Content placement=\"top\" variant=\"action\">\n {getTooltipText()}\n </Tooltip.Content>\n )}\n </Tooltip.Root>\n );\n};\n","import {\n type ChangeEventHandler,\n type ComponentProps,\n type ComponentRef,\n type FormEventHandler,\n type KeyboardEvent,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactNode,\n type RefObject,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n} from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { TooltipProvider } from '../../components/Tooltip';\nimport { cn } from '../../utils';\n\nimport { PromptInputAction } from './PromptInputAction';\nimport type { PromptCommand } from './PromptInputCommands';\nimport { PromptInputCommands } from './PromptInputCommands';\nimport { PromptInputSubmit } from './PromptInputSubmit';\n\nconst CMDK_HIJACKED_KEYS = new Set(['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter']);\n\n// Whether cmdk would actually act on this keystroke, and so whether the guard\n// below still needs to hide it from the Command root.\n//\n// cmdk acts on every key in CMDK_HIJACKED_KEYS, modified or not — the arrows\n// branch on metaKey (jump to first/last) and altKey (jump to the adjacent\n// group), and Home/End preventDefault unconditionally. `Enter` is the sole\n// exception: its branch reads no modifier at all, so a modified Enter is the\n// only keystroke the Command root would ignore.\nconst isCmdkNavigation = (event: KeyboardEvent<HTMLTextAreaElement>) =>\n event.key !== 'Enter' || !(event.metaKey || event.ctrlKey || event.altKey);\n\nconst promptInputVariants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:relative',\n\n 'tw:flex',\n 'tw:gap-2',\n 'tw:justify-center',\n\n // Kai's gradient edge, always on: the composer is the one place the reader\n // addresses Kai, and the gradient is what marks it as Kai's rather than the\n // page's. Drawn by filling the interior over a gradient background so only\n // the 2px edge shows through — `bg-origin-border` puts the gradient under\n // the border box, and the inset shadow paints the card back over everything\n // inside it.\n 'tw:border',\n 'tw:border-2',\n 'tw:border-transparent',\n 'tw:rounded-[14px]',\n 'tw:bg-gradient-to-bl',\n 'tw:from-[#61E4FF]',\n 'tw:via-[#1F8FFF]',\n 'tw:to-[#7C5CFF]',\n 'tw:bg-origin-border',\n 'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n\n // Focus adds the ring alone. The edge is already the loudest thing the\n // control can be, so focus cannot say it louder — it says it wider, and the\n // border width never changes, so nothing shifts.\n 'tw:has-[textarea:focus]:ring-4',\n 'tw:has-[textarea:focus]:ring-ring/30',\n\n 'tw:cursor-text',\n 'tw:px-2',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: ['tw:flex-col', 'tw:pt-3', 'tw:pb-2'],\n inline: ['tw:flex-row', 'tw:py-3', 'tw:items-center'],\n },\n },\n },\n);\n\nconst wrapperVariants = cva(null, {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: 'tw:rounded-[14px]',\n inline: '',\n },\n },\n});\n\ntype Props = {\n /** The textarea, for a host that has to put the caret back. Not `ref`: that name is the textarea's own. */\n textareaRef?: RefObject<ComponentRef<'textarea'> | null>;\n onSend?: (value: string) => void;\n onAbort?: () => void;\n onContinue?: () => void;\n value?: string;\n onValueChange?: (value: string) => void;\n defaultValue?: string;\n prefix?: ReactNode;\n suffix?: ReactNode;\n variant?: 'default' | 'inline';\n disableSubmit?: boolean;\n commands?: PromptCommand[];\n} & VariantProps<typeof promptInputVariants> &\n Pick<\n ComponentProps<typeof TextareaAutosize>,\n 'placeholder' | 'minRows' | 'maxRows' | 'disabled' | 'defaultValue' | 'autoFocus'\n > &\n ComponentProps<typeof PromptInputSubmit>;\n\nexport const PromptInput = ({\n onSend,\n onAbort,\n onContinue,\n prefix,\n variant,\n suffix,\n disabled,\n disableSubmit,\n value = '',\n onValueChange,\n status = 'ready',\n maxRows = 6,\n minRows,\n commands,\n autoFocus,\n textareaRef: publishedRef,\n ...textareaProps\n}: Props) => {\n const defaultMinRows = variant === 'inline' ? 1 : 2;\n const isDisabled =\n (disabled || disableSubmit || !value.trim()) &&\n status !== 'streaming' &&\n status !== 'interrupted';\n\n const textareaId = useId();\n const textareaRef = useRef<ComponentRef<'textarea'>>(null);\n\n // From the ref callback, not an effect: a host restructure recreates the element while this stays mounted.\n const setTextareaNode = useCallback(\n (node: ComponentRef<'textarea'> | null) => {\n textareaRef.current = node;\n if (publishedRef) publishedRef.current = node;\n },\n [publishedRef],\n );\n const [dismissedValue, setDismissedValue] = useState<string | null>(null);\n\n // `autoFocus` is applied imperatively, never as the DOM attribute.\n // - The attribute focuses with ancestor scrolling: the browser scrolls every\n // scrollable ancestor to reveal the element.\n // - A composer can mount inside a panel that is still sliding in (kbc-ui's Kai\n // rail); scrolling toward its off-canvas box drags the whole page sideways.\n // - `preventScroll` grants the focus without the scroll. Mount-only, matching\n // the attribute's semantics.\n const autoFocusRef = useRef(autoFocus);\n useEffect(() => {\n if (autoFocusRef.current) textareaRef.current?.focus({ preventScroll: true });\n }, []);\n\n // Esc dismisses the menu for the value at that moment; once the value moves away\n // from it, clear the dismissal so the menu can reopen if it re-matches the slash\n // shape. Done during render rather than in an effect, and keyed off\n // `dismissedValue` so state only updates while a dismissal is active — no extra\n // render per keystroke.\n if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);\n\n const hasCommands = !!commands && commands.length > 0;\n const valueLooksLikeSlashCommand = value.startsWith('/') && !/\\s/.test(value);\n const commandsOpen = hasCommands && valueLooksLikeSlashCommand && value !== dismissedValue;\n const slashFilter = commandsOpen ? value.slice(1) : '';\n\n const handleSubmit = () => {\n if (isDisabled) return;\n if (status === 'streaming') onAbort?.();\n if (status === 'interrupted') onContinue?.();\n if (status === 'ready') onSend?.(value);\n };\n\n const handleOnSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n event.preventDefault();\n handleSubmit();\n };\n\n const handleOnChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n onValueChange?.(event.target.value);\n };\n\n const handleCommandSelect = (commandValue: string) => {\n onValueChange?.(commandValue + ' ');\n textareaRef.current?.focus();\n };\n\n const handleOnKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n if (commandsOpen) {\n if (event.key === 'Escape') {\n event.preventDefault();\n setDismissedValue(value);\n return;\n }\n // Don't preventDefault — let cmdk handle ArrowUp/Down/Enter via bubbling\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'Enter') {\n return;\n }\n } else if (hasCommands && CMDK_HIJACKED_KEYS.has(event.key) && isCmdkNavigation(event)) {\n // Keep these from bubbling to the always-mounted cmdk Command root, whose\n // keydown handler preventDefaults them and breaks multiline editing.\n // Keystrokes cmdk ignores (e.g. Cmd+Enter, Alt+Enter) must still reach\n // document-level app hotkeys, so they are deliberately not stopped here.\n event.stopPropagation();\n }\n\n if (event.key === 'Enter' && !event.shiftKey && !event.ctrlKey && !event.metaKey) {\n event.preventDefault();\n if (status !== 'streaming') handleSubmit();\n }\n };\n\n const handleOnMouseDown: MouseEventHandler<HTMLFormElement> = (event) => {\n // don't prevent default if the target is the textarea itself\n if (event.target === textareaRef.current) return;\n\n event.preventDefault();\n textareaRef.current?.focus();\n };\n\n const formEl = (\n <div className={wrapperVariants({ variant })}>\n {/*This is alright, just refocused into a textarea. */}\n {/* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n <form\n data-testid=\"prompt-input\"\n data-status={status}\n onMouseDown={handleOnMouseDown}\n onSubmit={handleOnSubmit}\n className={cn(\n promptInputVariants({ variant }),\n disabled &&\n 'tw:bg-none tw:border-border tw:shadow-[inset_0_100vw_rgb(var(--muted))] tw:cursor-default',\n )}\n >\n {prefix && <div className=\"tw:flex tw:items-center\">{prefix}</div>}\n\n <label htmlFor={textareaId} className=\"tw:sr-only\">\n Prompt Input\n </label>\n <TextareaAutosize\n {...textareaProps}\n disabled={disabled}\n minRows={minRows ?? defaultMinRows}\n maxRows={maxRows}\n id={textareaId}\n ref={setTextareaNode}\n value={value}\n onChange={handleOnChange}\n onKeyDown={handleOnKeyDown}\n className={cn(\n 'tw:resize-none',\n 'tw:outline-hidden',\n 'tw:w-full',\n 'tw:px-2',\n 'tw:bg-transparent',\n\n // font\n disabled ? 'tw:text-muted-foreground' : 'tw:text-foreground',\n 'tw:text-sm',\n 'tw:font-sans',\n\n 'tw:transition-[width]',\n 'tw:delay-75',\n 'tw:ease-linear',\n 'tw:overflow-auto',\n )}\n />\n\n <div\n className={cn(\n 'tw:flex tw:items-center tw:gap-4',\n variant === 'inline' ? 'tw:items-end' : 'tw:items-center',\n )}\n >\n {suffix}\n <PromptInputSubmit disabled={isDisabled} status={status} />\n </div>\n </form>\n </div>\n );\n\n return (\n <TooltipProvider>\n {hasCommands ? (\n <PromptInputCommands\n items={commands ?? []}\n open={commandsOpen}\n onSelect={handleCommandSelect}\n filterValue={slashFilter}\n >\n {formEl}\n </PromptInputCommands>\n ) : (\n formEl\n )}\n </TooltipProvider>\n );\n};\n\nPromptInput.Action = PromptInputAction;\n","import { type KeyboardEvent, type ReactNode, useState } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { Checkbox } from '../../components/Checkbox';\nimport { Progress } from '../../components/Progress';\nimport { Tooltip } from '../../components/Tooltip';\nimport { ChevronLeft, ChevronRight, X } from '../../icons';\nimport { cn } from '../../utils';\nimport { TextInput } from '../TextInput';\n\ntype QuestionOption = {\n id: string;\n label: string;\n description?: string;\n preview?: string;\n};\n\ntype Props = {\n question: string;\n header?: string;\n options: readonly QuestionOption[];\n multiSelect?: boolean;\n selectedOptionIds?: readonly string[];\n onSelectionChange?: (selectedIds: readonly string[]) => void;\n customAnswer?: string;\n onCustomAnswerChange?: (value: string) => void;\n onCustomAnswerConfirm?: () => void;\n showCustomAnswer?: boolean;\n customAnswerPlaceholder?: string;\n showSkip?: boolean;\n onSkip?: () => void;\n onClose?: () => void;\n onNext?: () => void;\n submitTooltip?: ReactNode;\n onPrevious?: () => void;\n currentStep?: number;\n totalSteps?: number;\n renderPreview?: (content: string) => ReactNode;\n className?: string;\n};\n\nconst handleKeyDown = (callback: () => void) => (e: KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n callback();\n }\n};\n\nexport const Question = ({\n question,\n header,\n options,\n multiSelect = true,\n selectedOptionIds = [],\n onSelectionChange,\n customAnswer = '',\n onCustomAnswerChange,\n onCustomAnswerConfirm,\n showCustomAnswer = true,\n customAnswerPlaceholder = 'Type your answer…',\n showSkip = true,\n onSkip,\n onClose,\n onNext,\n submitTooltip,\n onPrevious,\n currentStep,\n totalSteps,\n renderPreview,\n className,\n}: Props) => {\n const [isCustomExpanded, setIsCustomExpanded] = useState(false);\n const isCustomSelected = isCustomExpanded || customAnswer.length > 0;\n const hasSteps = currentStep != null && totalSteps != null;\n const progressValue = hasSteps ? (currentStep / totalSteps) * 100 : 0;\n const isFirstStep = currentStep === 1;\n const isLastStep = hasSteps && currentStep === totalSteps;\n\n const handleOptionToggle = (optionId: string) => {\n if (multiSelect) {\n const isSelected = selectedOptionIds.includes(optionId);\n const nextIds = isSelected\n ? selectedOptionIds.filter((id) => id !== optionId)\n : [...selectedOptionIds, optionId];\n onSelectionChange?.(nextIds);\n } else {\n // Single-select: picking a real option deselects \"Other\" and drops any\n // typed custom answer so it can't leak into the submitted answer.\n setIsCustomExpanded(false);\n onCustomAnswerChange?.('');\n onSelectionChange?.([optionId]);\n }\n };\n\n const handleCustomToggle = (checked: boolean) => {\n setIsCustomExpanded(checked);\n if (checked) {\n // Single-select: \"Other\" and a real option are mutually exclusive.\n if (!multiSelect) {\n onSelectionChange?.([]);\n }\n } else {\n onCustomAnswerChange?.('');\n }\n };\n\n // Typing into (or focusing) the custom input selects \"Other\" directly — no\n // need to click the row/checkbox first.\n const handleCustomFocus = () => {\n setIsCustomExpanded(true);\n if (!multiSelect) {\n onSelectionChange?.([]);\n }\n };\n\n const handleCustomRowClick = () => {\n // Multi-select: the row toggles the checkbox. Single-select: clicking only\n // selects (never deselects, so a second click can't wipe typed text) —\n // switch away by picking a real option instead.\n if (multiSelect) {\n handleCustomToggle(!isCustomSelected);\n } else {\n handleCustomFocus();\n }\n };\n\n return (\n <div\n className={cn(\n 'tw:flex tw:max-w-[800px] tw:flex-col tw:gap-4 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-card tw:text-card-foreground tw:shadow-lg',\n className,\n )}\n data-testid=\"question-root\"\n data-question-step={currentStep}\n data-question-total-steps={totalSteps}\n data-question-multi-select={multiSelect}\n >\n <div className=\"tw:flex tw:items-start tw:gap-2 tw:pl-4 tw:pr-2 tw:pt-4\">\n <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-1\">\n <p className=\"tw:m-0 tw:text-base tw:font-semibold tw:leading-6\">{question}</p>\n {header && (\n <p className=\"tw:m-0 tw:text-xs tw:leading-4 tw:text-muted-foreground\">{header}</p>\n )}\n </div>\n {onClose && (\n <Button\n variant=\"outline\"\n size=\"icon-sm\"\n aria-label=\"Close\"\n onClick={onClose}\n data-testid=\"question-close-button\"\n >\n <X className=\"tw:size-4\" />\n </Button>\n )}\n </div>\n\n <div className=\"tw:px-4\">\n <div className=\"tw:flex tw:flex-col tw:gap-4 tw:border-0 tw:border-l tw:border-solid tw:border-primary tw:px-4 tw:py-2\">\n {options.map((option) => (\n <div\n key={option.id}\n className=\"tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-accent\"\n onClick={() => handleOptionToggle(option.id)}\n onKeyDown={handleKeyDown(() => handleOptionToggle(option.id))}\n role=\"button\"\n tabIndex={0}\n data-testid={`question-option-${option.id}`}\n >\n {multiSelect && (\n <Checkbox\n checked={selectedOptionIds.includes(option.id)}\n onCheckedChange={() => handleOptionToggle(option.id)}\n onClick={(e) => e.stopPropagation()}\n className=\"tw:shrink-0\"\n />\n )}\n <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:items-start tw:gap-3\">\n <div className=\"tw:flex tw:flex-col tw:gap-1.5\">\n <span className=\"tw:text-sm tw:font-medium tw:leading-none\">{option.label}</span>\n {option.description && (\n <span className=\"tw:text-sm tw:font-normal tw:leading-5 tw:text-muted-foreground\">\n {option.description}\n </span>\n )}\n </div>\n {option.preview && (\n <div\n data-testid=\"question-option-preview\"\n className={cn(\n 'tw:ml-auto tw:flex tw:max-h-40 tw:min-w-0 tw:max-w-[50%] tw:flex-col tw:overflow-hidden tw:rounded-md',\n !renderPreview &&\n 'tw:overflow-auto tw:border tw:border-solid tw:border-border tw:bg-muted tw:p-2 tw:text-foreground',\n )}\n >\n {renderPreview ? (\n renderPreview(option.preview)\n ) : (\n // `text-foreground` restates the ink the box above already\n // sets, and is not redundant: consuming apps ship a global\n // `pre { color; background-color; border }` rule that beats\n // inheritance but loses to a utility — the same reason\n // `border-0` and `bg-transparent` are spelled out here.\n <pre className=\"tw:m-0 tw:overflow-visible tw:border-0 tw:bg-transparent tw:p-0 tw:font-mono tw:text-xs tw:leading-5 tw:text-foreground\">\n {option.preview}\n </pre>\n )}\n </div>\n )}\n </div>\n </div>\n ))}\n\n {showCustomAnswer && (\n <div className=\"tw:flex tw:flex-col tw:gap-2\">\n <div\n className=\"tw:-mx-2 tw:-my-1.5 tw:flex tw:cursor-pointer tw:items-start tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:hover:bg-accent\"\n onClick={handleCustomRowClick}\n onKeyDown={handleKeyDown(handleCustomRowClick)}\n role=\"button\"\n tabIndex={0}\n >\n {/* Multi-select shows a checkbox alongside the option checkboxes.\n Single-select options auto-advance and carry no indicator, so\n \"Other\" is a plain clickable row that reveals the input below. */}\n {multiSelect && (\n <Checkbox\n checked={isCustomSelected}\n onCheckedChange={handleCustomToggle}\n onClick={(e) => e.stopPropagation()}\n className=\"tw:shrink-0\"\n />\n )}\n <span\n className={cn(\n 'tw:text-sm tw:font-medium tw:leading-none',\n !multiSelect && isCustomSelected && 'tw:text-primary',\n )}\n >\n Other\n </span>\n </div>\n {/* Always rendered and editable: typing or focusing selects \"Other\"\n directly, and keeping it mounted avoids layout shift. */}\n <TextInput\n value={customAnswer}\n onValueChange={(value) => onCustomAnswerChange?.(value)}\n onFocus={handleCustomFocus}\n onKeyDown={\n onCustomAnswerConfirm\n ? (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !e.shiftKey && !(e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n onCustomAnswerConfirm();\n }\n }\n : undefined\n }\n placeholder={customAnswerPlaceholder}\n sizing=\"small\"\n testId=\"question-custom\"\n />\n </div>\n )}\n </div>\n </div>\n\n <div className=\"tw:flex tw:flex-col\">\n {hasSteps && <Progress size=\"sm\" value={progressValue} className=\"tw:rounded-none\" />}\n\n <div\n className={cn(\n 'tw:flex tw:items-center tw:justify-end tw:gap-4 tw:px-4 tw:py-3',\n !hasSteps && 'tw:border-0 tw:border-t tw:border-solid tw:border-border',\n )}\n >\n {hasSteps && (\n <div className=\"tw:flex tw:items-center tw:gap-2\">\n <button\n type=\"button\"\n disabled={isFirstStep}\n className=\"tw:flex tw:cursor-pointer tw:items-center tw:justify-center tw:bg-transparent tw:p-0 tw:disabled:cursor-default tailwindcss-preflight\"\n onClick={onPrevious}\n aria-label=\"Previous step\"\n >\n <ChevronLeft\n className={cn(\n 'tw:size-5',\n isFirstStep ? 'tw:text-primary/25' : 'tw:text-primary',\n )}\n />\n </button>\n <span className=\"tw:text-xs tw:leading-4 tw:text-muted-foreground\">\n {currentStep} of {totalSteps}\n </span>\n <button\n type=\"button\"\n disabled={currentStep === totalSteps}\n className=\"tw:flex tw:cursor-pointer tw:items-center tw:justify-center tw:bg-transparent tw:p-0 tw:disabled:cursor-default tailwindcss-preflight\"\n onClick={onNext}\n aria-label=\"Next step\"\n >\n <ChevronRight\n className={cn(\n 'tw:size-5',\n currentStep === totalSteps ? 'tw:text-primary/25' : 'tw:text-primary',\n )}\n />\n </button>\n </div>\n )}\n {showSkip && onSkip && (\n <Button\n variant=\"outline\"\n size=\"small\"\n onClick={onSkip}\n data-testid=\"question-skip-button\"\n >\n Skip\n </Button>\n )}\n {(multiSelect || isCustomSelected) &&\n (submitTooltip ? (\n <Tooltip tooltip={submitTooltip} placement=\"top\" triggerAsChild>\n <Button\n variant=\"primary\"\n size=\"small\"\n onClick={onNext}\n data-testid=\"question-next-button\"\n >\n {isLastStep ? 'Submit' : 'Next'}\n </Button>\n </Tooltip>\n ) : (\n <Button\n variant=\"primary\"\n size=\"small\"\n onClick={onNext}\n data-testid=\"question-next-button\"\n >\n {isLastStep ? 'Submit' : 'Next'}\n </Button>\n ))}\n </div>\n </div>\n </div>\n );\n};\n\nexport type { QuestionOption, Props as QuestionProps };\n","import { type ReactNode, useState } from 'react';\n\nimport type { QuestionOption } from './Question';\nimport { Question } from './Question';\n\ntype QuestionStep = {\n question: string;\n header?: string;\n options: readonly QuestionOption[];\n multiSelect?: boolean;\n showCustomAnswer?: boolean;\n customAnswerPlaceholder?: string;\n};\n\ntype QuestionAnswers = {\n selections: Record<number, readonly string[]>;\n customAnswers: Record<number, string>;\n};\n\ntype Props = {\n steps: readonly [QuestionStep, ...QuestionStep[]];\n showSkip?: boolean;\n onSubmit?: (answers: QuestionAnswers) => void;\n onClose?: () => void;\n renderPreview?: (content: string) => ReactNode;\n className?: string;\n};\n\nexport const QuestionBlock = ({\n steps,\n showSkip = true,\n onSubmit,\n onClose,\n renderPreview,\n className,\n}: Props) => {\n const [currentStep, setCurrentStep] = useState(1);\n const [selections, setSelections] = useState<Record<number, readonly string[]>>({});\n const [customAnswers, setCustomAnswers] = useState<Record<number, string>>({});\n const stepData = steps[currentStep - 1]!;\n const isLastStep = currentStep === steps.length;\n\n const advance = (updatedSelections?: Record<number, readonly string[]>) => {\n const finalSelections = updatedSelections ?? selections;\n if (isLastStep) {\n onSubmit?.({ selections: finalSelections, customAnswers });\n } else {\n setCurrentStep((s) => Math.min(s + 1, steps.length));\n }\n };\n\n const handleSelectionChange = (ids: readonly string[]) => {\n const updated = { ...selections, [currentStep]: ids };\n setSelections(updated);\n if (!stepData.multiSelect) {\n advance(updated);\n }\n };\n\n return (\n <Question\n key={currentStep}\n {...stepData}\n selectedOptionIds={selections[currentStep] ?? []}\n onSelectionChange={handleSelectionChange}\n customAnswer={customAnswers[currentStep] ?? ''}\n onCustomAnswerChange={(value) =>\n setCustomAnswers((prev) => ({ ...prev, [currentStep]: value }))\n }\n currentStep={currentStep}\n totalSteps={steps.length}\n showSkip={showSkip && !isLastStep}\n onNext={() => advance()}\n onPrevious={() => setCurrentStep((s) => Math.max(s - 1, 1))}\n onSkip={() => setCurrentStep((s) => Math.min(s + 1, steps.length))}\n onClose={onClose}\n renderPreview={renderPreview}\n className={className}\n />\n );\n};\n\nexport type { QuestionStep, QuestionAnswers, Props as QuestionBlockProps };\n","import type { ReactNode } from 'react';\n\nimport { Sparkles } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n label: string;\n disabled?: boolean;\n onClick: () => void;\n icon?: ReactNode;\n className?: string;\n};\n\nexport const SuggestedPrompt = ({ label, disabled, onClick, icon, className }: Props) => {\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={cn(\n 'tailwindcss-preflight tw:flex tw:items-center tw:justify-start tw:gap-2.5 tw:whitespace-nowrap',\n 'tw:rounded-lg tw:px-3 tw:py-2',\n 'tw:text-left tw:text-sm tw:font-medium tw:text-foreground',\n 'tw:transition-colors tw:not-disabled:hover:bg-accent',\n 'tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:focus-visible:ring-offset-1',\n 'tw:disabled:cursor-not-allowed tw:disabled:opacity-50',\n className,\n )}\n onClick={onClick}\n >\n {icon ?? (\n // Lucide icons are stroke-based — paint the visible line with the AI\n // gradient (no fill, so the glyph keeps its outline silhouette instead\n // of becoming a solid block). The `*` selector catches every shape\n // element (path, circle, polyline, …) so multi-part icons don't lose\n // sub-shapes the way `path`-only selectors do.\n <Sparkles className=\"tw:size-4 tw:shrink-0 tw:basis-4 tw:[&_*]:stroke-aigradient-600\" />\n )}\n <div className=\"tw:whitespace-normal tw:text-left\">{label}</div>\n </button>\n );\n};\n","import { Loader2 } from '../../icons';\n\ntype ThinkingIndicatorProps = {\n label?: string;\n};\n\n/**\n * The agent's turn is in flight and has nothing to show yet.\n *\n * - Quiet chrome, matching the step rows it precedes (muted ink, no italic), so the hand-off\n * from \"Thinking...\" to the first step is seamless.\n * - `role=\"status\"` because a spinner is silence to a screen reader, and for much of a turn\n * this is all a transcript shows. The label is the announcement, so it is never decorative.\n * - The icon is hidden from the tree: it says the same thing as the label beside it.\n */\nexport const ThinkingIndicator = ({ label = 'Thinking...' }: ThinkingIndicatorProps) => {\n return (\n <div\n className=\"tw:flex tw:items-center tw:gap-1.5\"\n role=\"status\"\n data-testid=\"chat-thinking-indicator\"\n >\n <Loader2 aria-hidden className=\"tw:size-3.5 tw:animate-spin tw:text-muted-foreground\" />\n <span className=\"tw:text-xs tw:font-medium tw:text-muted-foreground\">{label}</span>\n </div>\n );\n};\n\nexport type { ThinkingIndicatorProps };\n","import { type ReactNode, useEffect } from 'react';\n\nimport { Badge } from '../../../components/Badge';\nimport { Button } from '../../../components/Button';\nimport { cn } from '../../../utils';\n\ntype ToolCallApprovalStatus = 'pending' | 'approved' | 'rejected' | 'expired';\n\ntype ToolCallApprovalProps = {\n /** The tool being called (e.g. `run_sql`). Rendered as a monospace tag. */\n toolName: string;\n /** Human-readable summary of what the tool will do. */\n title?: ReactNode;\n status: ToolCallApprovalStatus;\n onApprove?: () => void;\n onReject?: () => void;\n /** App-rendered detail — a diff, a `ToolCallChip`, a chart, arguments. */\n children?: ReactNode;\n /**\n * Replaces the default Approve/Reject buttons in the pending state. Use when\n * the call needs bespoke controls (e.g. an inline reason field).\n */\n actions?: ReactNode;\n isSubmitting?: boolean;\n /**\n * Opt into `Enter` = approve / `Escape` = reject while pending. Off by\n * default so the shortcuts never fire unexpectedly in a busy chat.\n */\n enableShortcuts?: boolean;\n approveLabel?: string;\n rejectLabel?: string;\n className?: string;\n};\n\nconst STATUS_BADGE: Record<\n ToolCallApprovalStatus,\n { label: string; color: 'blue' | 'green' | 'red' | 'gray' }\n> = {\n pending: { label: 'Needs approval', color: 'blue' },\n approved: { label: 'Approved', color: 'green' },\n rejected: { label: 'Rejected', color: 'red' },\n expired: { label: 'Expired', color: 'gray' },\n};\n\n/**\n * Per-tool-call approve/reject frame — the granular sibling of `PlanApproval`\n * (which approves a whole plan). Chrome + status + actions only: the app\n * renders the call detail as `children` and owns the SDK/permission wiring.\n */\nexport const ToolCallApproval = ({\n toolName,\n title,\n status,\n onApprove,\n onReject,\n children,\n actions,\n isSubmitting = false,\n enableShortcuts = false,\n approveLabel = 'Approve',\n rejectLabel = 'Reject',\n className,\n}: ToolCallApprovalProps) => {\n const isPending = status === 'pending';\n const hasCustomActions = actions != null;\n const showDefaultActions = isPending && !hasCustomActions && Boolean(onApprove || onReject);\n // Custom actions, like the defaults, only make sense while a decision is\n // still pending — never leave controls visible in a terminal state.\n const showActions = isPending && (showDefaultActions || hasCustomActions);\n const badge = STATUS_BADGE[status];\n\n useEffect(() => {\n if (!enableShortcuts || !isPending || isSubmitting) return;\n\n const isEditableTarget = (target: EventTarget | null) => {\n if (!(target instanceof HTMLElement)) return false;\n return (\n target.isContentEditable ||\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA' ||\n target.tagName === 'SELECT'\n );\n };\n\n const handleKeyDown = (event: KeyboardEvent) => {\n // Ignore key-repeat and keystrokes typed into a field.\n if (event.repeat || event.defaultPrevented || isEditableTarget(event.target)) return;\n\n if (\n event.key === 'Enter' &&\n !event.shiftKey &&\n !event.ctrlKey &&\n !event.metaKey &&\n onApprove\n ) {\n event.preventDefault();\n onApprove();\n } else if (event.key === 'Escape' && onReject) {\n event.preventDefault();\n onReject();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [enableShortcuts, isPending, isSubmitting, onApprove, onReject]);\n\n return (\n <section\n data-testid=\"tool-call-approval\"\n data-status={status}\n aria-label={typeof title === 'string' ? title : toolName}\n className={cn(\n 'tw:flex tw:w-full tw:max-w-[800px] tw:flex-col tw:gap-3 tw:overflow-hidden tw:rounded-xl tw:border tw:border-solid tw:border-border tw:bg-muted tw:p-4',\n className,\n )}\n >\n <div className=\"tw:flex tw:items-center tw:gap-2\">\n <Badge color={badge.color} variant=\"pill\" className=\"tw:normal-case tw:tracking-normal\">\n {badge.label}\n </Badge>\n <code className=\"tw:rounded tw:bg-background tw:px-1.5 tw:py-0.5 tw:font-mono tw:text-xs tw:text-foreground\">\n {toolName}\n </code>\n </div>\n\n {title != null && (\n <p className=\"tw:m-0 tw:text-sm tw:font-medium tw:text-foreground\">{title}</p>\n )}\n\n {children}\n\n {showActions && (\n <div className=\"tw:flex tw:items-center tw:justify-end tw:gap-2 tw:overflow-x-auto\">\n {actions ?? (\n <>\n {onReject && (\n <Button\n variant=\"outline\"\n size=\"small\"\n onClick={onReject}\n disabled={isSubmitting}\n className=\"tw:shrink-0 tw:whitespace-nowrap\"\n >\n {rejectLabel}\n </Button>\n )}\n {onApprove && (\n <Button\n variant=\"primary\"\n size=\"small\"\n onClick={onApprove}\n disabled={isSubmitting}\n className=\"tw:shrink-0 tw:whitespace-nowrap\"\n >\n {approveLabel}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </section>\n );\n};\n\nexport type { ToolCallApprovalStatus, ToolCallApprovalProps };\n","import type { MouseEventHandler, ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\n\nimport { CircleCheck, CircleX, Loader2 } from '../../../icons';\nimport { cn } from '../../../utils';\n\ntype ToolCallState = 'processing' | 'done' | 'error';\n\ntype ToolCallChipProps = {\n label: ReactNode;\n state: ToolCallState;\n /** Leading icon; defaults to a state glyph (spinner / check / x). */\n icon?: ReactNode;\n /** Trailing node (e.g. a chevron or count). */\n trailing?: ReactNode;\n /** When set, the chip renders as a button and fires this on click. */\n onClick?: MouseEventHandler<HTMLButtonElement>;\n className?: string;\n};\n\nconst chipClasses = cva(\n [\n 'tw:inline-flex tw:items-center tw:gap-1.5 tw:rounded-md tw:border tw:border-solid',\n 'tw:border-border tw:bg-muted tw:px-2 tw:py-1 tw:text-xs tw:text-foreground',\n ],\n {\n variants: {\n interactive: {\n true: 'tw:cursor-pointer tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-ring tw:not-disabled:hover:bg-accent',\n false: '',\n },\n },\n defaultVariants: { interactive: false },\n },\n);\n\nconst StateIcon = ({ state }: { state: ToolCallState }) => {\n if (state === 'processing') {\n return <Loader2 className=\"tw:size-3.5 tw:shrink-0 tw:animate-spin tw:text-muted-foreground\" />;\n }\n if (state === 'error') {\n return <CircleX className=\"tw:size-3.5 tw:shrink-0 tw:text-error-500\" />;\n }\n return <CircleCheck className=\"tw:size-3.5 tw:shrink-0 tw:text-primary\" />;\n};\n\n/**\n * Presentational chip summarising a single tool call (icon + label + optional\n * trailing action). It has **no** URL/router knowledge — wrap it in a `Link`\n * or pass `onClick` for navigation; the app owns deep-linking.\n */\nexport const ToolCallChip = ({\n label,\n state,\n icon,\n trailing,\n onClick,\n className,\n}: ToolCallChipProps) => {\n const content = (\n <>\n {icon ?? <StateIcon state={state} />}\n <span className=\"tw:min-w-0 tw:truncate\">{label}</span>\n {trailing != null && (\n <span className=\"tw:ml-auto tw:inline-flex tw:shrink-0 tw:items-center\">{trailing}</span>\n )}\n </>\n );\n\n if (onClick) {\n return (\n <button\n type=\"button\"\n data-testid=\"tool-call-chip\"\n data-state={state}\n onClick={onClick}\n className={cn('tailwindcss-preflight', chipClasses({ interactive: true }), className)}\n >\n {content}\n </button>\n );\n }\n\n return (\n <span\n data-testid=\"tool-call-chip\"\n data-state={state}\n className={cn(chipClasses({ interactive: false }), className)}\n >\n {content}\n </span>\n );\n};\n\nexport type { ToolCallChipProps, ToolCallState };\n","import type { ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\n\nimport type { LucideIcon } from '../../icons';\nimport { ChevronDown, TriangleAlert } from '../../icons';\nimport { cn } from '../../utils';\n\ntype ToolCallStatus = 'processing' | 'warning' | 'success' | 'error';\n\ntype Props = {\n icon: LucideIcon;\n iconSpin?: boolean;\n status: ToolCallStatus;\n text: ReactNode;\n needsConfirmation?: boolean;\n isCollapsible?: boolean;\n isCollapsed?: boolean;\n onToggleCollapse?: () => void;\n};\n\n// The header stays a neutral band for routine states — a filled saturated bar\n// made every successful tool call shout. Status is carried by the icon and the\n// label tint; the two states that ask for the user's attention (a pending\n// confirmation, a failure) additionally get a soft tint of their status colour\n// so they catch peripheral vision without shouting.\nconst headerVariants = cva(\n 'tw:flex tw:items-center tw:justify-between tw:gap-2 tw:px-2.5 tw:py-1.5',\n {\n variants: {\n // One boundary cue per state, never two: a tinted header is already\n // bounded by where its wash stops, so it takes no rule — the hairline\n // belongs to the untinted states, which would otherwise have no edge.\n status: {\n processing: 'tw:border-b tw:border-border/60',\n warning: 'tw:bg-warning/10',\n success: 'tw:border-b tw:border-border/60',\n error: 'tw:bg-destructive/10',\n },\n },\n defaultVariants: {\n status: 'success',\n },\n },\n);\n\nconst statusInk: Record<ToolCallStatus, string> = {\n processing: 'tw:text-muted-foreground',\n warning: 'tw:text-warning',\n success: 'tw:text-muted-foreground',\n error: 'tw:text-destructive',\n};\n\nconst statusIconInk: Record<ToolCallStatus, string> = {\n processing: 'tw:text-muted-foreground',\n warning: 'tw:text-warning',\n success: 'tw:text-success/70',\n error: 'tw:text-destructive',\n};\n\nexport const ToolCallStatusHeader = ({\n icon: IconComponent,\n iconSpin,\n status,\n text,\n needsConfirmation,\n isCollapsible,\n isCollapsed,\n onToggleCollapse,\n}: Props) => {\n return (\n <div\n role={isCollapsible ? 'button' : undefined}\n tabIndex={isCollapsible ? 0 : undefined}\n aria-expanded={isCollapsible ? !isCollapsed : undefined}\n data-status={status}\n className={cn(headerVariants({ status }), isCollapsible && 'tw:cursor-pointer')}\n onClick={isCollapsible ? onToggleCollapse : undefined}\n onKeyDown={\n isCollapsible\n ? (e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onToggleCollapse?.();\n }\n }\n : undefined\n }\n >\n <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-1.5\">\n <IconComponent\n className={cn(\n 'tw:size-3.5 tw:shrink-0',\n statusIconInk[status],\n iconSpin && 'tw:animate-spin',\n )}\n />\n <span\n data-testid=\"tool-status-text\"\n className={cn('tw:truncate tw:pr-0.5 tw:text-xs tw:font-medium', statusInk[status])}\n >\n {text}\n </span>\n </div>\n {(needsConfirmation || isCollapsible) && (\n <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">\n {needsConfirmation && (\n <div className=\"tw:flex tw:items-center tw:gap-1\">\n <span\n data-testid=\"tool-confirmation-required\"\n className=\"tw:text-xs tw:font-medium tw:text-warning\"\n >\n Confirmation required\n </span>\n <TriangleAlert className=\"tw:size-3.5 tw:text-warning\" />\n </div>\n )}\n {isCollapsible && (\n <ChevronDown\n className={cn(\n 'tw:size-3.5 tw:shrink-0 tw:text-muted-foreground',\n 'tw:transition-transform tw:duration-300 tw:ease-out tw:motion-reduce:transition-none',\n !isCollapsed && 'tw:rotate-180',\n )}\n />\n )}\n </div>\n )}\n </div>\n );\n};\n\nexport type { Props as ToolCallStatusHeaderProps, ToolCallStatus };\n","/**\n * Clamp a percentage to 0–100 and normalize non-finite input to 0.\n *\n * - `Progress`'s indicator is unclamped, so a value over 100 slides the bar off-screen.\n * - `NaN` normalizes to 0 — `Math.min`/`Math.max` propagate it, and it renders as no bar at all.\n */\nexport const clampPercentage = (value: number) =>\n Number.isFinite(value) ? Math.min(100, Math.max(0, value)) : 0;\n\n/**\n * A percentage as text — `72%`, `0.2%`, `99%`.\n *\n * - Whole numbers from 1% up; a decimal only below 1%, where rounding would read as `0%`.\n * - A non-zero share never prints as `0.0%` — it floors at `0.1%`.\n * - Never `100%` for a value under 100: the text would disagree with the at-limit state computed\n * from the raw value, exactly at the boundary everything else turns on.\n */\nexport const formatPercentage = (value: number) => {\n const oneDecimal = Math.round(value * 10) / 10;\n if (value > 0 && oneDecimal < 1) {\n return `${Math.max(0.1, oneDecimal).toFixed(1)}%`;\n }\n const rounded = Math.round(value);\n return `${value < 100 ? Math.min(rounded, 99) : rounded}%`;\n};\n","import { cn } from '../../utils';\n\nimport { clampPercentage } from './usageStatsHelpers';\n\ntype Props = {\n value: number;\n size?: number;\n strokeWidth?: number;\n className?: string;\n};\n\nexport const UsageStatsRing = ({ value, size = 16, strokeWidth = 2.5, className }: Props) => {\n const radius = Math.max(0, (size - strokeWidth) / 2 - 1);\n const circumference = 2 * Math.PI * radius;\n const offset = circumference * (1 - clampPercentage(value) / 100);\n\n return (\n <svg\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n className={cn('tw:-rotate-90', className)}\n role=\"presentation\"\n >\n <circle\n cx={size / 2}\n cy={size / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n // The unfilled remainder of the gauge: a muted mark, not a surface.\n className=\"tw:stroke-muted-foreground tw:opacity-50\"\n />\n <circle\n cx={size / 2}\n cy={size / 2}\n r={radius}\n fill=\"none\"\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n className=\"tw:stroke-primary tw:transition-all\"\n />\n </svg>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { HoverCard } from '../../components/HoverCard';\nimport { AlertCircle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { clampPercentage } from './usageStatsHelpers';\nimport { UsageStatsRing } from './UsageStatsRing';\n\ntype Props = {\n value: number;\n /**\n * `true` (or `'error'`) renders the red corner badge; `'warning'` renders\n * it amber for an approaching-limit state that isn't at-limit yet.\n */\n alert?: boolean | 'warning' | 'error';\n children: ReactNode;\n className?: string;\n /**\n * Accessible name for the trigger. Defaults to a value-aware label so\n * screen-reader users get the same information the ring conveys visually.\n */\n ariaLabel?: string;\n align?: ComponentProps<typeof HoverCard.Content>['align'];\n side?: ComponentProps<typeof HoverCard.Content>['side'];\n sideOffset?: ComponentProps<typeof HoverCard.Content>['sideOffset'];\n /** Control the card yourself to hold it open past a pointer leave — e.g. while a popover it contains is up. */\n open?: ComponentProps<typeof HoverCard>['open'];\n onOpenChange?: ComponentProps<typeof HoverCard>['onOpenChange'];\n};\n\nexport const UsageStats = ({\n value,\n alert = false,\n children,\n className,\n ariaLabel,\n align = 'end',\n side = 'top',\n sideOffset = 8,\n open,\n onOpenChange,\n}: Props) => {\n const hasAlert = Boolean(alert);\n const isWarning = alert === 'warning';\n const defaultLabel = `Usage: ${Math.round(clampPercentage(value))}%${hasAlert ? ' (usage alert)' : ''}`;\n return (\n <HoverCard open={open} onOpenChange={onOpenChange}>\n <HoverCard.Trigger asChild>\n <span\n aria-label={ariaLabel ?? defaultLabel}\n className={cn(\n 'tw:relative tw:inline-flex tw:size-8 tw:items-center tw:justify-center',\n className,\n )}\n >\n <UsageStatsRing value={value} />\n {hasAlert && (\n <AlertCircle\n data-testid=\"usage-stats-alert\"\n className={cn(\n 'tw:absolute tw:-right-0.5 tw:-top-0.5 tw:size-3',\n isWarning ? 'tw:text-warning-500' : 'tw:text-error-500',\n )}\n />\n )}\n </span>\n </HoverCard.Trigger>\n\n <HoverCard.Content align={align} side={side} sideOffset={sideOffset}>\n {children}\n </HoverCard.Content>\n </HoverCard>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { Tooltip } from "./utils-
|
|
2
|
+
import { Tooltip } from "./utils-DnkrFYqY.js";
|
|
3
3
|
import { useArgoDesign } from "./context-D7X470dy.js";
|
|
4
4
|
import { AlertTriangle, ChevronDown, CircleCheck, Info } from "./icons-Cek151jC.js";
|
|
5
5
|
import { Collapsible } from "./Collapsible-BQXWEOBC.js";
|
|
@@ -130,4 +130,4 @@ const Alert = ({ title, variant = "info", children, hideIcon = false, icon, clas
|
|
|
130
130
|
//#endregion
|
|
131
131
|
export { Alert };
|
|
132
132
|
|
|
133
|
-
//# sourceMappingURL=Alert-
|
|
133
|
+
//# sourceMappingURL=Alert-C4Y9IwMI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert-Ba5b2YPq.js","names":[],"sources":["../src/components/Alert/AlertAction.tsx","../src/components/Alert/AlertCollapsibleIcon.tsx","../src/components/Alert/AlertDescription.tsx","../src/components/Alert/AlertIcon.tsx","../src/components/Alert/AlertRoot.tsx","../src/components/Alert/AlertTitle.tsx","../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport const AlertAction = ({ ref, className, asChild = false, ...props }: Props) => {\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp\n {...props}\n ref={ref}\n className={cn(\n 'tw:col-start-3',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:flex',\n 'tw:gap-2',\n className,\n )}\n />\n );\n};\n","import { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Tooltip } from '../Tooltip';\n\ntype Props = {\n open: boolean;\n};\n\nexport const AlertCollapsibleIcon = ({ open }: Props) => (\n <Tooltip placement=\"top\" tooltip={open ? 'Collapse alert' : 'Expand alert'} triggerAsChild>\n <ChevronDown\n className={cn(\n 'tw:mt-px',\n 'tw:size-5',\n 'tw:text-neutral-400',\n 'tw:group-data-[state=open]/alert:rotate-180',\n\n // Legacy uses the fixed categorical hover scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:group-hover:text-blue-600',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:group-hover:text-info',\n 'tw:group-data-[variant=warning]/alert:group-hover:text-warning-600',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:group-hover:text-warning',\n 'tw:group-data-[variant=error]/alert:group-hover:text-error-600',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:group-hover:text-destructive',\n 'tw:group-data-[variant=success]/alert:group-hover:text-green-600',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:group-hover:text-success',\n )}\n />\n </Tooltip>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertDescription = ({ ref, children, className, ...rest }: Props) => (\n <div\n {...rest}\n ref={ref}\n className={cn(\n 'tw:col-start-2',\n 'tw:group-has-[[data-slot=alert-title]]/alert:col-end-[-1]',\n\n // spacer before description when a title exists (pseudo-element so it animates with Collapsible)\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:block',\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:h-4',\n \"tw:group-has-[[data-slot=alert-title]]/alert:before:content-['']\",\n\n 'tw:break-anywhere',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n\n className,\n )}\n >\n {children}\n </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { Variant } from './AlertRoot';\n\nconst VARIANT_ICONS: Record<Variant, ReactNode> = {\n info: <Info />,\n warning: <AlertTriangle />,\n error: <AlertTriangle />,\n success: <CircleCheck />,\n};\n\ntype Props = {\n variant: Variant;\n icon?: ReactNode;\n} & Omit<ComponentProps<'span'>, 'children'>;\n\nexport const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (\n <span\n {...rest}\n data-slot=\"alert-icon\"\n className={cn(\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:self-start',\n 'tw:p-0.5',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n // Legacy uses the fixed categorical icon scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:text-blue-500',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:text-info',\n 'tw:group-data-[variant=warning]/alert:text-warning-500',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:text-warning',\n 'tw:group-data-[variant=error]/alert:text-error-500',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:text-destructive',\n 'tw:group-data-[variant=success]/alert:text-green-500',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:text-success',\n className,\n )}\n >\n {icon ?? VARIANT_ICONS[variant]}\n </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nexport type Variant = 'info' | 'warning' | 'error' | 'success';\n\ntype Props = {\n variant?: Variant;\n} & ComponentProps<'div'>;\n\nexport const AlertRoot = ({ ref, children, className, variant, ...rest }: Props) => {\n const renderArgo = useArgoDesign();\n return (\n <div\n {...rest}\n ref={ref}\n data-variant={variant}\n data-argo={renderArgo}\n className={cn(\n 'tw:group/alert',\n\n // layout\n 'tw:grid',\n 'tw:grid-cols-[0_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:grid-cols-[auto_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:gap-x-2',\n\n // fonts\n 'tw:text-sm',\n // Legacy keeps the fixed neutral text; argo uses the semantic foreground\n // so the alert flips with the brand's light/dark palette (the categorical\n // variant tint stays — only the text token becomes brand-aware).\n 'tw:text-neutral-800',\n 'tw:data-[argo=true]:text-foreground',\n 'tw:text-left',\n\n 'tw:p-4',\n\n // border — legacy keeps a fixed radius; argo follows the brand radius token.\n 'tw:rounded',\n 'tw:data-[argo=true]:rounded-[var(--radius-lg,0.25rem)]',\n 'tw:border',\n 'tw:border-solid',\n\n // Variant tint + border. Legacy keeps the fixed categorical scales (solid\n // pastel tint); argo uses the brand-overridable status tokens (bg at 10%,\n // border at 25%) so status re-skins with the brand. The argo tokens carry\n // AA-legible defaults, so the variant icon (AlertIcon, full-strength\n // `tw:text-<role>`) clears ≥4.5:1 on the tint in both light and dark.\n 'tw:data-[variant=info]:bg-blue-100',\n 'tw:data-[variant=info]:border-blue-200',\n 'tw:data-[variant=info]:data-[argo=true]:bg-info/10',\n 'tw:data-[variant=info]:data-[argo=true]:border-info/25',\n\n 'tw:data-[variant=warning]:bg-warning-100',\n 'tw:data-[variant=warning]:border-warning-300',\n 'tw:data-[variant=warning]:data-[argo=true]:bg-warning/10',\n 'tw:data-[variant=warning]:data-[argo=true]:border-warning/25',\n\n 'tw:data-[variant=error]:bg-error-100',\n 'tw:data-[variant=error]:border-error-200',\n 'tw:data-[variant=error]:data-[argo=true]:bg-destructive/10',\n 'tw:data-[variant=error]:data-[argo=true]:border-destructive/25',\n\n 'tw:data-[variant=success]:bg-green-100',\n 'tw:data-[variant=success]:border-green-200',\n 'tw:data-[variant=success]:data-[argo=true]:bg-success/10',\n 'tw:data-[variant=success]:data-[argo=true]:border-success/25',\n className,\n )}\n >\n {children}\n </div>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertTitle = ({ ref, className, ...props }: Props) => (\n <div\n {...props}\n ref={ref}\n data-slot=\"alert-title\"\n className={cn(\n 'tw:group/alert-title',\n 'tw:flex',\n 'tw:col-start-2',\n 'tw:font-medium',\n 'tw:items-center',\n className,\n )}\n />\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { Collapsible } from '../Collapsible';\n\nimport { AlertAction } from './AlertAction';\nimport { AlertCollapsibleIcon } from './AlertCollapsibleIcon';\nimport { AlertDescription } from './AlertDescription';\nimport { AlertIcon } from './AlertIcon';\nimport { AlertRoot } from './AlertRoot';\nimport { AlertTitle } from './AlertTitle';\n\ntype CommonProps = {\n hideIcon?: boolean;\n icon?: ReactNode;\n} & Pick<ComponentProps<typeof Collapsible>, 'open' | 'onOpenChange' | 'defaultOpen'> &\n Omit<ComponentProps<typeof AlertRoot>, 'children'>;\n\ntype CollapsibleProps = {\n mode: 'collapsible';\n title: ReactNode;\n children: ReactNode;\n actions?: never;\n};\n\ntype DefaultProps = {\n mode?: 'default';\n title?: ReactNode;\n children?: ReactNode;\n actions?: ReactNode;\n};\n\n/**\n * Props for `Alert`. Discriminated by `mode` — `\"default\"` renders `title` / `children` / `actions`,\n * `\"collapsible\"` requires `title` + `children` (no `actions`) and renders a collapsible disclosure.\n * `variant` (`info` | `success` | `warning` | `error`) is a categorical colour contract.\n */\ntype Props = CommonProps & (CollapsibleProps | DefaultProps);\n\n/**\n * Persistent inline banner for contextual messages tied to the page layout.\n *\n * **When to use:** a message that lives in the page (info banner, warning about a misconfiguration,\n * post-save validation summary). Use `variant` to encode meaning; pass `actions` for inline buttons.\n * `mode=\"collapsible\"` collapses long error details behind a toggle.\n * **When NOT to use:** for transient feedback (save succeeded, job started) use `toast()`; for\n * field-level validation errors use `FormGroup state=\"error\"`; for a confirmation popover use\n * `Popconfirm`.\n * **Composition:** typically rendered at the top of `PageLayout.Content` or above a form section.\n *\n * @see RECIPES.md#alert-with-action — for action-bearing alert composition\n */\nexport const Alert = ({\n title,\n variant = 'info',\n children,\n hideIcon = false,\n icon,\n className,\n actions,\n mode = 'default',\n\n // collapsible props\n defaultOpen = true,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n\n ...rest\n}: Props) => {\n const isControlled = openProp !== undefined;\n\n const [innerOpen, setInnerOpen] = useState(defaultOpen);\n const open = isControlled ? openProp : innerOpen;\n const handleOpenChange = (nextOpen: boolean) => {\n if (!isControlled) {\n setInnerOpen(nextOpen);\n }\n onOpenChangeProp?.(nextOpen);\n };\n\n const isCollapsible = mode === 'collapsible' && !!title && !!children && !actions;\n\n if (isCollapsible)\n return (\n <Collapsible open={open} onOpenChange={handleOpenChange} asChild>\n <AlertRoot {...rest} variant={variant} className={className}>\n <Collapsible.Trigger\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group',\n 'tw:col-span-full',\n 'tw:grid',\n 'tw:grid-cols-subgrid',\n 'tw:rounded-sm',\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-2',\n 'tw:focus-visible:outline-ring',\n )}\n >\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n <AlertTitle>{title}</AlertTitle>\n <AlertCollapsibleIcon open={open} />\n </Collapsible.Trigger>\n\n <Collapsible.Content asChild>\n <AlertDescription>{children}</AlertDescription>\n </Collapsible.Content>\n </AlertRoot>\n </Collapsible>\n );\n\n return (\n <AlertRoot {...rest} variant={variant} className={className}>\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n {title && <AlertTitle>{title}</AlertTitle>}\n {children && <AlertDescription>{children}</AlertDescription>}\n {actions && <AlertAction>{actions}</AlertAction>}\n </AlertRoot>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Alert-C4Y9IwMI.js","names":[],"sources":["../src/components/Alert/AlertAction.tsx","../src/components/Alert/AlertCollapsibleIcon.tsx","../src/components/Alert/AlertDescription.tsx","../src/components/Alert/AlertIcon.tsx","../src/components/Alert/AlertRoot.tsx","../src/components/Alert/AlertTitle.tsx","../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'> & {\n asChild?: boolean;\n};\n\nexport const AlertAction = ({ ref, className, asChild = false, ...props }: Props) => {\n const Comp = asChild ? Slot : 'div';\n return (\n <Comp\n {...props}\n ref={ref}\n className={cn(\n 'tw:col-start-3',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:flex',\n 'tw:gap-2',\n className,\n )}\n />\n );\n};\n","import { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Tooltip } from '../Tooltip';\n\ntype Props = {\n open: boolean;\n};\n\nexport const AlertCollapsibleIcon = ({ open }: Props) => (\n <Tooltip placement=\"top\" tooltip={open ? 'Collapse alert' : 'Expand alert'} triggerAsChild>\n <ChevronDown\n className={cn(\n 'tw:mt-px',\n 'tw:size-5',\n 'tw:text-neutral-400',\n 'tw:group-data-[state=open]/alert:rotate-180',\n\n // Legacy uses the fixed categorical hover scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:group-hover:text-blue-600',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:group-hover:text-info',\n 'tw:group-data-[variant=warning]/alert:group-hover:text-warning-600',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:group-hover:text-warning',\n 'tw:group-data-[variant=error]/alert:group-hover:text-error-600',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:group-hover:text-destructive',\n 'tw:group-data-[variant=success]/alert:group-hover:text-green-600',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:group-hover:text-success',\n )}\n />\n </Tooltip>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertDescription = ({ ref, children, className, ...rest }: Props) => (\n <div\n {...rest}\n ref={ref}\n className={cn(\n 'tw:col-start-2',\n 'tw:group-has-[[data-slot=alert-title]]/alert:col-end-[-1]',\n\n // spacer before description when a title exists (pseudo-element so it animates with Collapsible)\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:block',\n 'tw:group-has-[[data-slot=alert-title]]/alert:before:h-4',\n \"tw:group-has-[[data-slot=alert-title]]/alert:before:content-['']\",\n\n 'tw:break-anywhere',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n\n className,\n )}\n >\n {children}\n </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { AlertTriangle, CircleCheck, Info } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { Variant } from './AlertRoot';\n\nconst VARIANT_ICONS: Record<Variant, ReactNode> = {\n info: <Info />,\n warning: <AlertTriangle />,\n error: <AlertTriangle />,\n success: <CircleCheck />,\n};\n\ntype Props = {\n variant: Variant;\n icon?: ReactNode;\n} & Omit<ComponentProps<'span'>, 'children'>;\n\nexport const AlertIcon = ({ variant, icon, className, ...rest }: Props) => (\n <span\n {...rest}\n data-slot=\"alert-icon\"\n className={cn(\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:self-start',\n 'tw:p-0.5',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n // Legacy uses the fixed categorical icon scales; argo uses the themeable status tokens.\n 'tw:group-data-[variant=info]/alert:text-blue-500',\n 'tw:group-data-[variant=info]/alert:group-data-[argo=true]/alert:text-info',\n 'tw:group-data-[variant=warning]/alert:text-warning-500',\n 'tw:group-data-[variant=warning]/alert:group-data-[argo=true]/alert:text-warning',\n 'tw:group-data-[variant=error]/alert:text-error-500',\n 'tw:group-data-[variant=error]/alert:group-data-[argo=true]/alert:text-destructive',\n 'tw:group-data-[variant=success]/alert:text-green-500',\n 'tw:group-data-[variant=success]/alert:group-data-[argo=true]/alert:text-success',\n className,\n )}\n >\n {icon ?? VARIANT_ICONS[variant]}\n </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nexport type Variant = 'info' | 'warning' | 'error' | 'success';\n\ntype Props = {\n variant?: Variant;\n} & ComponentProps<'div'>;\n\nexport const AlertRoot = ({ ref, children, className, variant, ...rest }: Props) => {\n const renderArgo = useArgoDesign();\n return (\n <div\n {...rest}\n ref={ref}\n data-variant={variant}\n data-argo={renderArgo}\n className={cn(\n 'tw:group/alert',\n\n // layout\n 'tw:grid',\n 'tw:grid-cols-[0_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:grid-cols-[auto_1fr_auto]',\n 'tw:has-[[data-slot=alert-icon]]:gap-x-2',\n\n // fonts\n 'tw:text-sm',\n // Legacy keeps the fixed neutral text; argo uses the semantic foreground\n // so the alert flips with the brand's light/dark palette (the categorical\n // variant tint stays — only the text token becomes brand-aware).\n 'tw:text-neutral-800',\n 'tw:data-[argo=true]:text-foreground',\n 'tw:text-left',\n\n 'tw:p-4',\n\n // border — legacy keeps a fixed radius; argo follows the brand radius token.\n 'tw:rounded',\n 'tw:data-[argo=true]:rounded-[var(--radius-lg,0.25rem)]',\n 'tw:border',\n 'tw:border-solid',\n\n // Variant tint + border. Legacy keeps the fixed categorical scales (solid\n // pastel tint); argo uses the brand-overridable status tokens (bg at 10%,\n // border at 25%) so status re-skins with the brand. The argo tokens carry\n // AA-legible defaults, so the variant icon (AlertIcon, full-strength\n // `tw:text-<role>`) clears ≥4.5:1 on the tint in both light and dark.\n 'tw:data-[variant=info]:bg-blue-100',\n 'tw:data-[variant=info]:border-blue-200',\n 'tw:data-[variant=info]:data-[argo=true]:bg-info/10',\n 'tw:data-[variant=info]:data-[argo=true]:border-info/25',\n\n 'tw:data-[variant=warning]:bg-warning-100',\n 'tw:data-[variant=warning]:border-warning-300',\n 'tw:data-[variant=warning]:data-[argo=true]:bg-warning/10',\n 'tw:data-[variant=warning]:data-[argo=true]:border-warning/25',\n\n 'tw:data-[variant=error]:bg-error-100',\n 'tw:data-[variant=error]:border-error-200',\n 'tw:data-[variant=error]:data-[argo=true]:bg-destructive/10',\n 'tw:data-[variant=error]:data-[argo=true]:border-destructive/25',\n\n 'tw:data-[variant=success]:bg-green-100',\n 'tw:data-[variant=success]:border-green-200',\n 'tw:data-[variant=success]:data-[argo=true]:bg-success/10',\n 'tw:data-[variant=success]:data-[argo=true]:border-success/25',\n className,\n )}\n >\n {children}\n </div>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const AlertTitle = ({ ref, className, ...props }: Props) => (\n <div\n {...props}\n ref={ref}\n data-slot=\"alert-title\"\n className={cn(\n 'tw:group/alert-title',\n 'tw:flex',\n 'tw:col-start-2',\n 'tw:font-medium',\n 'tw:items-center',\n className,\n )}\n />\n);\n","import { useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\nimport { Collapsible } from '../Collapsible';\n\nimport { AlertAction } from './AlertAction';\nimport { AlertCollapsibleIcon } from './AlertCollapsibleIcon';\nimport { AlertDescription } from './AlertDescription';\nimport { AlertIcon } from './AlertIcon';\nimport { AlertRoot } from './AlertRoot';\nimport { AlertTitle } from './AlertTitle';\n\ntype CommonProps = {\n hideIcon?: boolean;\n icon?: ReactNode;\n} & Pick<ComponentProps<typeof Collapsible>, 'open' | 'onOpenChange' | 'defaultOpen'> &\n Omit<ComponentProps<typeof AlertRoot>, 'children'>;\n\ntype CollapsibleProps = {\n mode: 'collapsible';\n title: ReactNode;\n children: ReactNode;\n actions?: never;\n};\n\ntype DefaultProps = {\n mode?: 'default';\n title?: ReactNode;\n children?: ReactNode;\n actions?: ReactNode;\n};\n\n/**\n * Props for `Alert`. Discriminated by `mode` — `\"default\"` renders `title` / `children` / `actions`,\n * `\"collapsible\"` requires `title` + `children` (no `actions`) and renders a collapsible disclosure.\n * `variant` (`info` | `success` | `warning` | `error`) is a categorical colour contract.\n */\ntype Props = CommonProps & (CollapsibleProps | DefaultProps);\n\n/**\n * Persistent inline banner for contextual messages tied to the page layout.\n *\n * **When to use:** a message that lives in the page (info banner, warning about a misconfiguration,\n * post-save validation summary). Use `variant` to encode meaning; pass `actions` for inline buttons.\n * `mode=\"collapsible\"` collapses long error details behind a toggle.\n * **When NOT to use:** for transient feedback (save succeeded, job started) use `toast()`; for\n * field-level validation errors use `FormGroup state=\"error\"`; for a confirmation popover use\n * `Popconfirm`.\n * **Composition:** typically rendered at the top of `PageLayout.Content` or above a form section.\n *\n * @see RECIPES.md#alert-with-action — for action-bearing alert composition\n */\nexport const Alert = ({\n title,\n variant = 'info',\n children,\n hideIcon = false,\n icon,\n className,\n actions,\n mode = 'default',\n\n // collapsible props\n defaultOpen = true,\n open: openProp,\n onOpenChange: onOpenChangeProp,\n\n ...rest\n}: Props) => {\n const isControlled = openProp !== undefined;\n\n const [innerOpen, setInnerOpen] = useState(defaultOpen);\n const open = isControlled ? openProp : innerOpen;\n const handleOpenChange = (nextOpen: boolean) => {\n if (!isControlled) {\n setInnerOpen(nextOpen);\n }\n onOpenChangeProp?.(nextOpen);\n };\n\n const isCollapsible = mode === 'collapsible' && !!title && !!children && !actions;\n\n if (isCollapsible)\n return (\n <Collapsible open={open} onOpenChange={handleOpenChange} asChild>\n <AlertRoot {...rest} variant={variant} className={className}>\n <Collapsible.Trigger\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group',\n 'tw:col-span-full',\n 'tw:grid',\n 'tw:grid-cols-subgrid',\n 'tw:rounded-sm',\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-2',\n 'tw:focus-visible:outline-ring',\n )}\n >\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n <AlertTitle>{title}</AlertTitle>\n <AlertCollapsibleIcon open={open} />\n </Collapsible.Trigger>\n\n <Collapsible.Content asChild>\n <AlertDescription>{children}</AlertDescription>\n </Collapsible.Content>\n </AlertRoot>\n </Collapsible>\n );\n\n return (\n <AlertRoot {...rest} variant={variant} className={className}>\n {!hideIcon && <AlertIcon variant={variant} icon={icon} />}\n {title && <AlertTitle>{title}</AlertTitle>}\n {children && <AlertDescription>{children}</AlertDescription>}\n {actions && <AlertAction>{actions}</AlertAction>}\n </AlertRoot>\n );\n};\n"],"mappings":";;;;;;;;;AASA,MAAa,eAAe,EAAE,KAAK,WAAW,UAAU,OAAO,GAAG,YAAmB;CAEnF,OACE,oBAFW,UAAU,OAAO,OAE5B;EACE,GAAI;EACC;EACL,WAAW,GACT,kBACA,kBACA,iBACA,WACA,YACA,SACF;CACD,CAAA;AAEL;;;ACjBA,MAAa,wBAAwB,EAAE,WACrC,oBAAC,SAAD;CAAS,WAAU;CAAM,SAAS,OAAO,mBAAmB;CAAgB,gBAAA;CAC1E,UAAA,oBAAC,aAAD,EACE,WAAW,GACT,YACA,aACA,uBACA,+CAGA,gEACA,yFACA,sEACA,+FACA,kEACA,iGACA,oEACA,6FACF,EACD,CAAA;AACM,CAAA;;;ACtBX,MAAa,oBAAoB,EAAE,KAAK,UAAU,WAAW,GAAG,WAC9D,oBAAC,OAAD;CACE,GAAI;CACC;CACL,WAAW,GACT,kBACA,6DAGA,6DACA,2DACA,oEAEA,qBAGA,qDACA,uBAEA,SACF;CAEC;AACE,CAAA;;;ACtBP,MAAM,gBAA4C;CAChD,MAAM,oBAAC,MAAD,CAAO,CAAA;CACb,SAAS,oBAAC,eAAD,CAAgB,CAAA;CACzB,OAAO,oBAAC,eAAD,CAAgB,CAAA;CACvB,SAAS,oBAAC,aAAD,CAAc,CAAA;AACzB;AAOA,MAAa,aAAa,EAAE,SAAS,MAAM,WAAW,GAAG,WACvD,oBAAC,QAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GACT,kBACA,mBACA,qBACA,iBACA,YACA,gDAEA,oDACA,6EACA,0DACA,mFACA,sDACA,qFACA,wDACA,mFACA,SACF;CAEC,UAAA,QAAQ,cAAc;AACnB,CAAA;;;AChCR,MAAa,aAAa,EAAE,KAAK,UAAU,WAAW,SAAS,GAAG,WAAkB;CAClF,MAAM,aAAa,cAAc;CACjC,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,gBAAc;EACd,aAAW;EACX,WAAW,GACT,kBAGA,WACA,6BACA,6DACA,2CAGA,cAIA,uBACA,uCACA,gBAEA,UAGA,cACA,0DACA,aACA,mBAOA,sCACA,0CACA,sDACA,0DAEA,4CACA,gDACA,4DACA,gEAEA,wCACA,4CACA,8DACA,kEAEA,0CACA,8CACA,4DACA,gEACA,SACF;EAEC;CACE,CAAA;AAET;;;ACrEA,MAAa,cAAc,EAAE,KAAK,WAAW,GAAG,YAC9C,oBAAC,OAAD;CACE,GAAI;CACC;CACL,aAAU;CACV,WAAW,GACT,wBACA,WACA,kBACA,kBACA,mBACA,SACF;AACD,CAAA;;;;;;;;;;;;;;;;ACkCH,MAAa,SAAS,EACpB,OACA,UAAU,QACV,UACA,WAAW,OACX,MACA,WACA,SACA,OAAO,WAGP,cAAc,MACd,MAAM,UACN,cAAc,kBAEd,GAAG,WACQ;CACX,MAAM,eAAe,aAAa,KAAA;CAElC,MAAM,CAAC,WAAW,gBAAgB,SAAS,WAAW;CACtD,MAAM,OAAO,eAAe,WAAW;CACvC,MAAM,oBAAoB,aAAsB;EAC9C,IAAI,CAAC,cACH,aAAa,QAAQ;EAEvB,mBAAmB,QAAQ;CAC7B;CAIA,IAFsB,SAAS,iBAAiB,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,SAGxE,OACE,oBAAC,aAAD;EAAmB;EAAM,cAAc;EAAkB,SAAA;EACvD,UAAA,qBAAC,WAAD;GAAW,GAAI;GAAe;GAAoB;GAAlD,UAAA,CACE,qBAAC,YAAY,SAAb;IACE,WAAW,GACT,yBACA,YACA,oBACA,WACA,wBACA,iBACA,4BACA,8BACA,+BACF;IAXF,UAAA;KAaG,CAAC,YAAY,oBAAC,WAAD;MAAoB;MAAe;KAAO,CAAA;KACxD,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA;KAC/B,oBAAC,sBAAD,EAA4B,KAAO,CAAA;IAChB;GAErB,CAAA,GAAA,oBAAC,YAAY,SAAb;IAAqB,SAAA;IACnB,UAAA,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;GAC3B,CAAA,CACZ;;CACA,CAAA;CAGjB,OACE,qBAAC,WAAD;EAAW,GAAI;EAAe;EAAoB;EAAlD,UAAA;GACG,CAAC,YAAY,oBAAC,WAAD;IAAoB;IAAe;GAAO,CAAA;GACvD,SAAS,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA;GACxC,YAAY,oBAAC,kBAAD,EAAmB,SAA2B,CAAA;GAC1D,WAAW,oBAAC,aAAD,EAAA,UAAc,QAAqB,CAAA;EACtC;;AAEf"}
|
|
@@ -106,7 +106,7 @@ const badgeRootVariants = cva([
|
|
|
106
106
|
},
|
|
107
107
|
variants: {
|
|
108
108
|
variant: {
|
|
109
|
-
default: ["tw:rounded
|
|
109
|
+
default: ["tw:rounded", "tw:[[data-brand^=keboola-legacy]_&]:uppercase"],
|
|
110
110
|
tag: ["tw:rounded tw:normal-case"],
|
|
111
111
|
pill: ["tw:min-w-5 tw:rounded-full tw:normal-case tw:tracking-normal"]
|
|
112
112
|
},
|
|
@@ -192,4 +192,4 @@ const Badge = Object.assign(BadgeInner, {
|
|
|
192
192
|
//#endregion
|
|
193
193
|
export { Badge };
|
|
194
194
|
|
|
195
|
-
//# sourceMappingURL=Badge-
|
|
195
|
+
//# sourceMappingURL=Badge-o5jURtpB.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge-D0pXdekt.js","names":[],"sources":["../src/components/Badge/BadgeAddon.tsx","../src/components/Badge/BadgeButton.tsx","../src/components/Badge/BadgeLabel.tsx","../src/components/Badge/styles.ts","../src/components/Badge/BadgeRoot.tsx","../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst addonVariants = cva(\n [\n 'tw:flex',\n 'tw:items-center',\n 'tw:shrink-0',\n 'tw:bg-inherit',\n 'tw:self-stretch',\n 'tw:px-1',\n 'tw:has-[button]:px-0',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n ],\n {\n defaultVariants: {\n align: 'inline-end',\n variant: 'inline',\n },\n variants: {\n align: {\n 'inline-start': ['tw:order-first'],\n 'inline-end': ['tw:order-last'],\n },\n variant: {\n inline: [],\n floating: [\n 'tw:hidden',\n 'tw:group-hover/badge:flex',\n\n 'tw:absolute',\n 'tw:top-0',\n 'tw:bottom-0',\n 'tw:focus-within:flex',\n ],\n },\n },\n compoundVariants: [\n { variant: 'floating', align: 'inline-end', className: ['tw:right-0'] },\n { variant: 'floating', align: 'inline-start', className: ['tw:left-0'] },\n ],\n },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const BadgeAddon = ({\n ref,\n align = 'inline-end',\n variant = 'inline',\n className,\n ...rest\n}: Props) => (\n <div\n {...rest}\n ref={ref}\n data-align={align}\n data-variant={variant}\n className={cn(addonVariants({ align, variant, className }))}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const BadgeButton = ({ ref, className, type = 'button', children, ...rest }: Props) => (\n <button\n {...rest}\n ref={ref}\n type={type}\n className={cn(\n 'tailwindcss-preflight',\n\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:cursor-pointer',\n\n 'tw:bg-inherit',\n 'tw:text-inherit',\n\n 'tw:hover:brightness-95',\n 'tw:px-1',\n\n // The focus ring lives here rather than on `BadgeRoot`, whose own `focus-visible` block\n // sits on a `div` that never takes focus. Inset, because a badge root clips its overflow —\n // an outset ring on a nested button would be cut off.\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-inset',\n 'tw:focus-visible:ring-ring',\n // Default sizing for Lucide-icon children (which ship at 24×24); keeps\n // the visual baseline aligned with the previous FA-icon API and other\n // icon-wrapper components (ItemIcon, SidebarMenuIcon).\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n className,\n )}\n >\n {children}\n </button>\n);\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'> & {\n asChild?: boolean;\n};\n\nexport const BadgeLabel = ({ ref, className, asChild = false, ...rest }: Props) => {\n const Comp = asChild ? Slot : 'span';\n return (\n <Comp\n {...rest}\n ref={ref}\n data-slot=\"badge-label\"\n className={cn(\n 'tw:max-w-56',\n 'tw:truncate',\n 'tw:px-2',\n 'tw:py-0.5',\n\n // Drop side padding only when an *inline* addon is present —\n // floating addons overlay the label without taking layout space,\n // so the label still needs full padding behind them.\n 'tw:group-has-[[data-align=inline-start][data-variant=inline]:not(:empty)]/badge:pl-0',\n 'tw:group-has-[[data-align=inline-end][data-variant=inline]:not(:empty)]/badge:pr-0',\n className,\n )}\n />\n );\n};\n","import { cva } from 'class-variance-authority';\n\n/**\n * Badge's `color` variants: a fill class, a foreground class, and a matching\n * `decoration-*` so an underlined badge underlines in its own fill colour.\n *\n * - Tinted (`-inverse`) variants each carry a `[data-theme=dark]` override, so the\n * chip inverts with the page instead of staying a light slab on a dark surface.\n * - Solid fills are fixed across schemes.\n * - Exported for `scripts/contrast-audit.ts` and the contrast story tests, which\n * measure each pairing rather than restating this map.\n */\nexport const badgeColors = {\n gray: 'tw:bg-neutral-400 tw:text-white tw:decoration-neutral-400',\n 'gray-darker': 'tw:bg-neutral-500 tw:text-white tw:decoration-neutral-500',\n 'gray-inverse':\n 'tw:bg-neutral-100 tw:text-neutral-500 tw:decoration-neutral-100 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300 tw:[[data-theme=dark]_&]:decoration-neutral-700',\n green: 'tw:bg-green-500 tw:text-white tw:decoration-green-500',\n 'green-darker': 'tw:bg-green-600 tw:text-white tw:decoration-green-600',\n 'green-inverse':\n 'tw:bg-green-100 tw:text-green-900 tw:decoration-green-100 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200 tw:[[data-theme=dark]_&]:decoration-green-900',\n blue: 'tw:bg-blue-500 tw:text-white tw:decoration-blue-500',\n 'blue-inverse':\n 'tw:bg-blue-100 tw:text-blue-800 tw:decoration-blue-100 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200 tw:[[data-theme=dark]_&]:decoration-blue-900',\n red: 'tw:bg-error-500 tw:text-white tw:decoration-error-500',\n orange: 'tw:bg-warning-500 tw:text-white tw:decoration-warning-500',\n 'orange-inverse':\n 'tw:bg-warning-100 tw:text-warning-800 tw:decoration-warning-100 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-900',\n amber: 'tw:bg-warning-300 tw:text-warning-800 tw:decoration-warning-300',\n // One rung deeper than `orange-inverse` on both ends of the ramp, which is what\n // keeps caution and warning telling apart — the two share the `warning` hue.\n 'amber-inverse':\n 'tw:bg-warning-200 tw:text-warning-800 tw:decoration-warning-200 tw:[[data-theme=dark]_&]:bg-warning-800 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-800',\n teal: 'tw:bg-teal-500 tw:text-white tw:decoration-teal-500',\n 'teal-inverse':\n 'tw:bg-teal-100 tw:text-teal-800 tw:decoration-teal-100 tw:[[data-theme=dark]_&]:bg-teal-900 tw:[[data-theme=dark]_&]:text-teal-200 tw:[[data-theme=dark]_&]:decoration-teal-900',\n purple: 'tw:bg-purple-500 tw:text-white tw:decoration-purple-500',\n 'purple-inverse':\n 'tw:bg-purple-100 tw:text-purple-800 tw:decoration-purple-100 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200 tw:[[data-theme=dark]_&]:decoration-purple-900',\n cyan: 'tw:bg-cyan-500 tw:text-white tw:decoration-cyan-500',\n 'cyan-inverse':\n 'tw:bg-cyan-100 tw:text-cyan-800 tw:decoration-cyan-100 tw:[[data-theme=dark]_&]:bg-cyan-900 tw:[[data-theme=dark]_&]:text-cyan-200 tw:[[data-theme=dark]_&]:decoration-cyan-900',\n 'sidebar-primary': 'tw:bg-sidebar-primary tw:text-white tw:decoration-sidebar-primary',\n white: 'tw:bg-white/90 tw:text-neutral-600 tw:decoration-white/90',\n} as const;\n\n/** A `Badge` `color` value. */\nexport type BadgeColor = keyof typeof badgeColors;\n\n/**\n * Whether a variant paints text on its own tint rather than on a solid fill.\n *\n * - Tinted variants are the ones held to WCAG-AA per `AGENTS.md`; solid `-500`\n * fills are pinned across brands, so their contrast is recorded, not asserted.\n */\nexport const isTintedBadgeColor = (color: string): boolean => color.endsWith('-inverse');\n\nexport const badgeRootVariants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/badge',\n\n // display\n 'tw:relative',\n 'tw:inline-flex',\n 'tw:justify-center',\n 'tw:items-center',\n 'tw:min-h-5',\n 'tw:h-fit',\n 'tw:shrink-0',\n 'tw:overflow-hidden',\n\n // text — chrome weight/tracking are brand-overridable tokens\n // (`--font-weight-medium` / `--letter-spacing-chrome`); casing lives on the\n // `default` variant below via `tw:uppercase`.\n 'tw:whitespace-pre-wrap',\n 'tw:break-normal',\n 'tw:text-xs',\n 'tw:font-medium',\n 'tw:tracking-chrome',\n 'tw:text-center',\n 'tw:underline',\n\n // content\n 'tw:border-none',\n 'tw:[&>svg]:self-center',\n 'tw:[button&]:cursor-pointer',\n\n // focus\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-inset',\n 'tw:focus-visible:ring-ring',\n ],\n {\n defaultVariants: {\n color: 'gray',\n variant: 'default',\n },\n variants: {\n variant: {\n // Legacy chrome uppercases the default badge; the Keboola V2 brand\n // (`data-brand=\"keboola\"`) renders it in standard case instead.\n default: [\n 'tw:rounded tw:uppercase',\n 'tw:[[data-brand=keboola]_&]:normal-case tw:[[data-brand=keboola]_&]:tracking-normal',\n ],\n tag: ['tw:rounded tw:normal-case'],\n pill: ['tw:min-w-5 tw:rounded-full tw:normal-case tw:tracking-normal'],\n },\n color: badgeColors,\n },\n },\n);\n","import type { ComponentProps } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport { badgeRootVariants } from './styles';\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof badgeRootVariants>;\n\nexport const BadgeRoot = ({ ref, variant, color, className, children, ...rest }: Props) => (\n <div\n {...rest}\n ref={ref}\n data-slot=\"badge\"\n className={cn(badgeRootVariants({ variant, color, className }))}\n >\n {children}\n </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { BadgeAddon } from './BadgeAddon';\nimport { BadgeButton } from './BadgeButton';\nimport { BadgeLabel } from './BadgeLabel';\nimport { BadgeRoot } from './BadgeRoot';\n\ntype AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];\ntype BadgeRootProps = ComponentProps<typeof BadgeRoot>;\ntype BadgeLabelProps = ComponentProps<typeof BadgeLabel>;\n\n/**\n * Props for `Badge`. `color` is a categorical contract (`green` = success, `red` = error, `orange` = warning,\n * `amber` = caution, `purple/cyan/teal/blue/gray` for decorative tags) — colours stay fixed across brand themes.\n * Pass `prefix` / `suffix` for icon-style addons.\n */\ntype Props = Pick<BadgeRootProps, 'variant' | 'color'> &\n Omit<BadgeLabelProps, 'prefix'> & {\n prefix?: ReactNode;\n prefixVariant?: AddonVariant;\n suffix?: ReactNode;\n suffixVariant?: AddonVariant;\n labelClassName?: string;\n };\n\n/**\n * Compact status / category label rendered as an inline pill.\n *\n * **When to use:** encoding status (active, deprecated, beta), counts, or decorative tags next to a title\n * or in a table cell. The `color` prop is a semantic contract — `green` means success, `red` means error\n * etc., and colours are intentionally stable across customer brand themes.\n * **When NOT to use:** for an inline action use `Button` / `ButtonInline`; for a persistent contextual\n * banner use `Alert`; for a counter-only chip prefer `Badge` with just a numeric label.\n * **Composition:** drop into `PageHeader.Detail` `badges` slot, `Table.Cell`, or alongside titles in cards.\n * Use `Badge.Button` for an interactive (clickable) badge variant.\n */\nconst BadgeInner = ({\n ref,\n // root props\n variant,\n color,\n // custom props\n prefix,\n prefixVariant = 'inline',\n suffix,\n suffixVariant = 'inline',\n className,\n labelClassName,\n ...labelProps\n}: Props) => (\n <BadgeRoot className={className} variant={variant} color={color}>\n {prefix && (\n <BadgeAddon align=\"inline-start\" variant={prefixVariant}>\n {prefix}\n </BadgeAddon>\n )}\n <BadgeLabel {...labelProps} ref={ref} className={labelClassName} />\n {suffix && (\n <BadgeAddon align=\"inline-end\" variant={suffixVariant}>\n {suffix}\n </BadgeAddon>\n )}\n </BadgeRoot>\n);\n\nexport const Badge = Object.assign(BadgeInner, {\n Root: BadgeRoot,\n Button: BadgeButton,\n Label: BadgeLabel,\n Addon: BadgeAddon,\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Badge-o5jURtpB.js","names":[],"sources":["../src/components/Badge/BadgeAddon.tsx","../src/components/Badge/BadgeButton.tsx","../src/components/Badge/BadgeLabel.tsx","../src/components/Badge/styles.ts","../src/components/Badge/BadgeRoot.tsx","../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst addonVariants = cva(\n [\n 'tw:flex',\n 'tw:items-center',\n 'tw:shrink-0',\n 'tw:bg-inherit',\n 'tw:self-stretch',\n 'tw:px-1',\n 'tw:has-[button]:px-0',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n ],\n {\n defaultVariants: {\n align: 'inline-end',\n variant: 'inline',\n },\n variants: {\n align: {\n 'inline-start': ['tw:order-first'],\n 'inline-end': ['tw:order-last'],\n },\n variant: {\n inline: [],\n floating: [\n 'tw:hidden',\n 'tw:group-hover/badge:flex',\n\n 'tw:absolute',\n 'tw:top-0',\n 'tw:bottom-0',\n 'tw:focus-within:flex',\n ],\n },\n },\n compoundVariants: [\n { variant: 'floating', align: 'inline-end', className: ['tw:right-0'] },\n { variant: 'floating', align: 'inline-start', className: ['tw:left-0'] },\n ],\n },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const BadgeAddon = ({\n ref,\n align = 'inline-end',\n variant = 'inline',\n className,\n ...rest\n}: Props) => (\n <div\n {...rest}\n ref={ref}\n data-align={align}\n data-variant={variant}\n className={cn(addonVariants({ align, variant, className }))}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const BadgeButton = ({ ref, className, type = 'button', children, ...rest }: Props) => (\n <button\n {...rest}\n ref={ref}\n type={type}\n className={cn(\n 'tailwindcss-preflight',\n\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:cursor-pointer',\n\n 'tw:bg-inherit',\n 'tw:text-inherit',\n\n 'tw:hover:brightness-95',\n 'tw:px-1',\n\n // The focus ring lives here rather than on `BadgeRoot`, whose own `focus-visible` block\n // sits on a `div` that never takes focus. Inset, because a badge root clips its overflow —\n // an outset ring on a nested button would be cut off.\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-inset',\n 'tw:focus-visible:ring-ring',\n // Default sizing for Lucide-icon children (which ship at 24×24); keeps\n // the visual baseline aligned with the previous FA-icon API and other\n // icon-wrapper components (ItemIcon, SidebarMenuIcon).\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n className,\n )}\n >\n {children}\n </button>\n);\n","import type { ComponentProps } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'> & {\n asChild?: boolean;\n};\n\nexport const BadgeLabel = ({ ref, className, asChild = false, ...rest }: Props) => {\n const Comp = asChild ? Slot : 'span';\n return (\n <Comp\n {...rest}\n ref={ref}\n data-slot=\"badge-label\"\n className={cn(\n 'tw:max-w-56',\n 'tw:truncate',\n 'tw:px-2',\n 'tw:py-0.5',\n\n // Drop side padding only when an *inline* addon is present —\n // floating addons overlay the label without taking layout space,\n // so the label still needs full padding behind them.\n 'tw:group-has-[[data-align=inline-start][data-variant=inline]:not(:empty)]/badge:pl-0',\n 'tw:group-has-[[data-align=inline-end][data-variant=inline]:not(:empty)]/badge:pr-0',\n className,\n )}\n />\n );\n};\n","import { cva } from 'class-variance-authority';\n\n/**\n * Badge's `color` variants: a fill class, a foreground class, and a matching\n * `decoration-*` so an underlined badge underlines in its own fill colour.\n *\n * - Tinted (`-inverse`) variants each carry a `[data-theme=dark]` override, so the\n * chip inverts with the page instead of staying a light slab on a dark surface.\n * - Solid fills are fixed across schemes.\n * - Exported for `scripts/contrast-audit.ts` and the contrast story tests, which\n * measure each pairing rather than restating this map.\n */\nexport const badgeColors = {\n gray: 'tw:bg-neutral-400 tw:text-white tw:decoration-neutral-400',\n 'gray-darker': 'tw:bg-neutral-500 tw:text-white tw:decoration-neutral-500',\n 'gray-inverse':\n 'tw:bg-neutral-100 tw:text-neutral-500 tw:decoration-neutral-100 tw:[[data-theme=dark]_&]:bg-neutral-700 tw:[[data-theme=dark]_&]:text-neutral-300 tw:[[data-theme=dark]_&]:decoration-neutral-700',\n green: 'tw:bg-green-500 tw:text-white tw:decoration-green-500',\n 'green-darker': 'tw:bg-green-600 tw:text-white tw:decoration-green-600',\n 'green-inverse':\n 'tw:bg-green-100 tw:text-green-900 tw:decoration-green-100 tw:[[data-theme=dark]_&]:bg-green-900 tw:[[data-theme=dark]_&]:text-green-200 tw:[[data-theme=dark]_&]:decoration-green-900',\n blue: 'tw:bg-blue-500 tw:text-white tw:decoration-blue-500',\n 'blue-inverse':\n 'tw:bg-blue-100 tw:text-blue-800 tw:decoration-blue-100 tw:[[data-theme=dark]_&]:bg-blue-900 tw:[[data-theme=dark]_&]:text-blue-200 tw:[[data-theme=dark]_&]:decoration-blue-900',\n red: 'tw:bg-error-500 tw:text-white tw:decoration-error-500',\n orange: 'tw:bg-warning-500 tw:text-white tw:decoration-warning-500',\n 'orange-inverse':\n 'tw:bg-warning-100 tw:text-warning-800 tw:decoration-warning-100 tw:[[data-theme=dark]_&]:bg-warning-900 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-900',\n amber: 'tw:bg-warning-300 tw:text-warning-800 tw:decoration-warning-300',\n // One rung deeper than `orange-inverse` on both ends of the ramp, which is what\n // keeps caution and warning telling apart — the two share the `warning` hue.\n 'amber-inverse':\n 'tw:bg-warning-200 tw:text-warning-800 tw:decoration-warning-200 tw:[[data-theme=dark]_&]:bg-warning-800 tw:[[data-theme=dark]_&]:text-warning-200 tw:[[data-theme=dark]_&]:decoration-warning-800',\n teal: 'tw:bg-teal-500 tw:text-white tw:decoration-teal-500',\n 'teal-inverse':\n 'tw:bg-teal-100 tw:text-teal-800 tw:decoration-teal-100 tw:[[data-theme=dark]_&]:bg-teal-900 tw:[[data-theme=dark]_&]:text-teal-200 tw:[[data-theme=dark]_&]:decoration-teal-900',\n purple: 'tw:bg-purple-500 tw:text-white tw:decoration-purple-500',\n 'purple-inverse':\n 'tw:bg-purple-100 tw:text-purple-800 tw:decoration-purple-100 tw:[[data-theme=dark]_&]:bg-purple-900 tw:[[data-theme=dark]_&]:text-purple-200 tw:[[data-theme=dark]_&]:decoration-purple-900',\n cyan: 'tw:bg-cyan-500 tw:text-white tw:decoration-cyan-500',\n 'cyan-inverse':\n 'tw:bg-cyan-100 tw:text-cyan-800 tw:decoration-cyan-100 tw:[[data-theme=dark]_&]:bg-cyan-900 tw:[[data-theme=dark]_&]:text-cyan-200 tw:[[data-theme=dark]_&]:decoration-cyan-900',\n 'sidebar-primary': 'tw:bg-sidebar-primary tw:text-white tw:decoration-sidebar-primary',\n white: 'tw:bg-white/90 tw:text-neutral-600 tw:decoration-white/90',\n} as const;\n\n/** A `Badge` `color` value. */\nexport type BadgeColor = keyof typeof badgeColors;\n\n/**\n * Whether a variant paints text on its own tint rather than on a solid fill.\n *\n * - Tinted variants are the ones held to WCAG-AA per `AGENTS.md`; solid `-500`\n * fills are pinned across brands, so their contrast is recorded, not asserted.\n */\nexport const isTintedBadgeColor = (color: string): boolean => color.endsWith('-inverse');\n\nexport const badgeRootVariants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/badge',\n\n // display\n 'tw:relative',\n 'tw:inline-flex',\n 'tw:justify-center',\n 'tw:items-center',\n 'tw:min-h-5',\n 'tw:h-fit',\n 'tw:shrink-0',\n 'tw:overflow-hidden',\n\n // text — chrome weight/tracking are brand-overridable tokens\n // (`--font-weight-medium` / `--letter-spacing-chrome`); casing lives on the\n // `default` variant below via `tw:uppercase`.\n 'tw:whitespace-pre-wrap',\n 'tw:break-normal',\n 'tw:text-xs',\n 'tw:font-medium',\n 'tw:tracking-chrome',\n 'tw:text-center',\n 'tw:underline',\n\n // content\n 'tw:border-none',\n 'tw:[&>svg]:self-center',\n 'tw:[button&]:cursor-pointer',\n\n // focus\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-inset',\n 'tw:focus-visible:ring-ring',\n ],\n {\n defaultVariants: {\n color: 'gray',\n variant: 'default',\n },\n variants: {\n variant: {\n // Casing is the legacy brands' to ask for: `keboola-legacy-*` uppercases the default\n // badge, every other brand reads standard case. Same rule, same shape, as `Button` and\n // `Tooltip`.\n default: ['tw:rounded', 'tw:[[data-brand^=keboola-legacy]_&]:uppercase'],\n tag: ['tw:rounded tw:normal-case'],\n pill: ['tw:min-w-5 tw:rounded-full tw:normal-case tw:tracking-normal'],\n },\n color: badgeColors,\n },\n },\n);\n","import type { ComponentProps } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport { badgeRootVariants } from './styles';\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof badgeRootVariants>;\n\nexport const BadgeRoot = ({ ref, variant, color, className, children, ...rest }: Props) => (\n <div\n {...rest}\n ref={ref}\n data-slot=\"badge\"\n className={cn(badgeRootVariants({ variant, color, className }))}\n >\n {children}\n </div>\n);\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { BadgeAddon } from './BadgeAddon';\nimport { BadgeButton } from './BadgeButton';\nimport { BadgeLabel } from './BadgeLabel';\nimport { BadgeRoot } from './BadgeRoot';\n\ntype AddonVariant = ComponentProps<typeof BadgeAddon>['variant'];\ntype BadgeRootProps = ComponentProps<typeof BadgeRoot>;\ntype BadgeLabelProps = ComponentProps<typeof BadgeLabel>;\n\n/**\n * Props for `Badge`. `color` is a categorical contract (`green` = success, `red` = error, `orange` = warning,\n * `amber` = caution, `purple/cyan/teal/blue/gray` for decorative tags) — colours stay fixed across brand themes.\n * Pass `prefix` / `suffix` for icon-style addons.\n */\ntype Props = Pick<BadgeRootProps, 'variant' | 'color'> &\n Omit<BadgeLabelProps, 'prefix'> & {\n prefix?: ReactNode;\n prefixVariant?: AddonVariant;\n suffix?: ReactNode;\n suffixVariant?: AddonVariant;\n labelClassName?: string;\n };\n\n/**\n * Compact status / category label rendered as an inline pill.\n *\n * **When to use:** encoding status (active, deprecated, beta), counts, or decorative tags next to a title\n * or in a table cell. The `color` prop is a semantic contract — `green` means success, `red` means error\n * etc., and colours are intentionally stable across customer brand themes.\n * **When NOT to use:** for an inline action use `Button` / `ButtonInline`; for a persistent contextual\n * banner use `Alert`; for a counter-only chip prefer `Badge` with just a numeric label.\n * **Composition:** drop into `PageHeader.Detail` `badges` slot, `Table.Cell`, or alongside titles in cards.\n * Use `Badge.Button` for an interactive (clickable) badge variant.\n */\nconst BadgeInner = ({\n ref,\n // root props\n variant,\n color,\n // custom props\n prefix,\n prefixVariant = 'inline',\n suffix,\n suffixVariant = 'inline',\n className,\n labelClassName,\n ...labelProps\n}: Props) => (\n <BadgeRoot className={className} variant={variant} color={color}>\n {prefix && (\n <BadgeAddon align=\"inline-start\" variant={prefixVariant}>\n {prefix}\n </BadgeAddon>\n )}\n <BadgeLabel {...labelProps} ref={ref} className={labelClassName} />\n {suffix && (\n <BadgeAddon align=\"inline-end\" variant={suffixVariant}>\n {suffix}\n </BadgeAddon>\n )}\n </BadgeRoot>\n);\n\nexport const Badge = Object.assign(BadgeInner, {\n Root: BadgeRoot,\n Button: BadgeButton,\n Label: BadgeLabel,\n Addon: BadgeAddon,\n});\n"],"mappings":"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"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Button } from "./Button-DsRrU5F1.js";
|
|
2
2
|
import { ToggleGroup } from "./ToggleGroup-Cy_10Mvu.js";
|
|
3
3
|
import { Label } from "./internal/components/Label.js";
|
|
4
|
-
import { TextInput } from "./TextInput-
|
|
5
|
-
import { Slider } from "./Slider-
|
|
4
|
+
import { TextInput } from "./TextInput-DiEMxVF6.js";
|
|
5
|
+
import { Slider } from "./Slider-Bv0B6lI0.js";
|
|
6
6
|
import { Select } from "./Select-DV3Hak_l.js";
|
|
7
|
-
import { Badge } from "./Badge-
|
|
8
|
-
import { ColorInput } from "./ColorInput-
|
|
7
|
+
import { Badge } from "./Badge-o5jURtpB.js";
|
|
8
|
+
import { ColorInput } from "./ColorInput-Dg87lKcR.js";
|
|
9
9
|
import { Textarea } from "./internal/blocks/Textarea.js";
|
|
10
10
|
import { Collapsible } from "./Collapsible-BQXWEOBC.js";
|
|
11
11
|
import { useId, useMemo } from "react";
|
|
@@ -900,4 +900,4 @@ const BrandEditor = ({ value, onChange, colorScheme = "light", onColorSchemeChan
|
|
|
900
900
|
//#endregion
|
|
901
901
|
export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
|
|
902
902
|
|
|
903
|
-
//# sourceMappingURL=BrandEditor-
|
|
903
|
+
//# sourceMappingURL=BrandEditor-CS9P4r2p.js.map
|