@keboola/design 11.2.0 → 11.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +42 -14
- package/CHANGELOG.md +424 -0
- package/COMPONENT-API.md +33 -32
- package/dist/{AIKit-DiS0CVOW.js → AIKit-DDg5DBCG.js} +156 -76
- package/dist/AIKit-DDg5DBCG.js.map +1 -0
- package/dist/{Alert-DfZq9kGe.js → Alert-DHJFrWnS.js} +3 -3
- package/dist/{Alert-DfZq9kGe.js.map → Alert-DHJFrWnS.js.map} +1 -1
- package/dist/{AlertModal-Dp_XuJBW.js → AlertModal-BGJdaRRj.js} +3 -3
- package/dist/{AlertModal-Dp_XuJBW.js.map → AlertModal-BGJdaRRj.js.map} +1 -1
- package/dist/{AppShell-B5GQN6Zs.js → AppShell-DRgJxpXW.js} +29 -10
- package/dist/AppShell-DRgJxpXW.js.map +1 -0
- package/dist/{BrandEditor-DyzgfVkl.js → BrandEditor-Go7w8Zj2.js} +7 -7
- package/dist/{BrandEditor-DyzgfVkl.js.map → BrandEditor-Go7w8Zj2.js.map} +1 -1
- package/dist/{BrandLogo-CJkRd0F8.js → BrandLogo-Dmi7jo21.js} +2 -2
- package/dist/{BrandLogo-CJkRd0F8.js.map → BrandLogo-Dmi7jo21.js.map} +1 -1
- package/dist/{Breadcrumb-Frst8MTA.js → Breadcrumb-uEkM6adI.js} +3 -3
- package/dist/{Breadcrumb-Frst8MTA.js.map → Breadcrumb-uEkM6adI.js.map} +1 -1
- package/dist/{Button-6xBX0nNl.js → Button-DsRrU5F1.js} +6 -5
- package/dist/Button-DsRrU5F1.js.map +1 -0
- package/dist/{Card-BAoZ35CV.js → Card-Dyo7055Q.js} +2 -2
- package/dist/{Card-BAoZ35CV.js.map → Card-Dyo7055Q.js.map} +1 -1
- package/dist/{Checkbox-GJ8-srt4.js → Checkbox-fC0BuO2B.js} +3 -3
- package/dist/{Checkbox-GJ8-srt4.js.map → Checkbox-fC0BuO2B.js.map} +1 -1
- package/dist/{Clipboard-CBJZiviP.js → Clipboard-ChPdiUy3.js} +2 -2
- package/dist/{Clipboard-CBJZiviP.js.map → Clipboard-ChPdiUy3.js.map} +1 -1
- package/dist/{ClipboardButton-ClcluT0C.js → ClipboardButton-D9pDjgkB.js} +3 -3
- package/dist/{ClipboardButton-ClcluT0C.js.map → ClipboardButton-D9pDjgkB.js.map} +1 -1
- package/dist/{CodeEditor-DyaN-Ij2.js → CodeEditor-Cxy3HnKH.js} +244 -113
- package/dist/CodeEditor-Cxy3HnKH.js.map +1 -0
- package/dist/{ColorInput-B8z4j4Y_.js → ColorInput-Bxj-1eLT.js} +3 -3
- package/dist/{ColorInput-B8z4j4Y_.js.map → ColorInput-Bxj-1eLT.js.map} +1 -1
- package/dist/{ColorModeSwitch-dZFZyqy1.js → ColorModeSwitch-CsWLiTBX.js} +3 -3
- package/dist/{ColorModeSwitch-dZFZyqy1.js.map → ColorModeSwitch-CsWLiTBX.js.map} +1 -1
- package/dist/{Combobox-Dgm6Z4ib.js → Combobox-Cs_1pj2q.js} +31 -24
- package/dist/Combobox-Cs_1pj2q.js.map +1 -0
- package/dist/{Command-C0aZfVTq.js → Command-B7ML9YMv.js} +6 -6
- package/dist/{Command-C0aZfVTq.js.map → Command-B7ML9YMv.js.map} +1 -1
- package/dist/{CopyField-BJ96zvXs.js → CopyField-BO_sh-HO.js} +2 -2
- package/dist/{CopyField-BJ96zvXs.js.map → CopyField-BO_sh-HO.js.map} +1 -1
- package/dist/{DateInput-B3UdzRfW.js → DateInput-ZdaMQo5i.js} +4 -4
- package/dist/{DateInput-B3UdzRfW.js.map → DateInput-ZdaMQo5i.js.map} +1 -1
- package/dist/{DatePicker-Dw3DpbUh.js → DatePicker-nA8YdE84.js} +2 -2
- package/dist/{DatePicker-Dw3DpbUh.js.map → DatePicker-nA8YdE84.js.map} +1 -1
- package/dist/{DateRangeInput-DTuySEiq.js → DateRangeInput-DkvNh_sT.js} +4 -4
- package/dist/{DateRangeInput-DTuySEiq.js.map → DateRangeInput-DkvNh_sT.js.map} +1 -1
- package/dist/{DateRangePicker-DCmMHg4s.js → DateRangePicker-DjSUFjh4.js} +6 -6
- package/dist/{DateRangePicker-DCmMHg4s.js.map → DateRangePicker-DjSUFjh4.js.map} +1 -1
- package/dist/{DropdownMenu-t90tVw6l.js → DropdownMenu-CASr-jgl.js} +2 -2
- package/dist/{DropdownMenu-t90tVw6l.js.map → DropdownMenu-CASr-jgl.js.map} +1 -1
- package/dist/{FieldItem-D-h1NeBo.js → FieldItem-CCd9-xnp.js} +3 -3
- package/dist/{FieldItem-D-h1NeBo.js.map → FieldItem-CCd9-xnp.js.map} +1 -1
- package/dist/{FieldItem-CAPj9lj3.d.ts → FieldItem-vhIJW4pj.d.ts} +2 -10
- package/dist/{FileUpload-BRv0TaZk.js → FileUpload-ABThVZyg.js} +2 -2
- package/dist/{FileUpload-BRv0TaZk.js.map → FileUpload-ABThVZyg.js.map} +1 -1
- package/dist/{Form-DHvcFoEi.js → Form-k6PH-em3.js} +8 -8
- package/dist/{Form-DHvcFoEi.js.map → Form-k6PH-em3.js.map} +1 -1
- package/dist/{FormGroup-C41n65cE.js → FormGroup-DbcDtrgU.js} +3 -3
- package/dist/{FormGroup-C41n65cE.js.map → FormGroup-DbcDtrgU.js.map} +1 -1
- package/dist/{FullScreenModal-Cb3PGgh4.js → FullScreenModal-BvPuYibe.js} +3 -3
- package/dist/{FullScreenModal-Cb3PGgh4.js.map → FullScreenModal-BvPuYibe.js.map} +1 -1
- package/dist/{HoverCard-WfDkLK1s.js → HoverCard-B9ZMJxjn.js} +2 -2
- package/dist/{HoverCard-WfDkLK1s.js.map → HoverCard-B9ZMJxjn.js.map} +1 -1
- package/dist/{InputGroup-CdTq8H7c.js → InputGroup-BnLHY0eq.js} +3 -3
- package/dist/{InputGroup-CdTq8H7c.js.map → InputGroup-BnLHY0eq.js.map} +1 -1
- package/dist/{Kbd-CxHAo1oo.js → Kbd-CvSM3D3-.js} +2 -2
- package/dist/{Kbd-CxHAo1oo.js.map → Kbd-CvSM3D3-.js.map} +1 -1
- package/dist/MarkedText-DNGEUVWc.js +67 -0
- package/dist/MarkedText-DNGEUVWc.js.map +1 -0
- package/dist/{MermaidDiagram-ChL3WIQT.js → MermaidDiagram-WkonYErO.js} +6 -87
- package/dist/MermaidDiagram-WkonYErO.js.map +1 -0
- package/dist/{Modal-wqG8nJiK.js → Modal-Coj-H02o.js} +16 -4
- package/dist/Modal-Coj-H02o.js.map +1 -0
- package/dist/{MultiActionButtonGroup-BiIIubiL.js → MultiActionButtonGroup-CxWH7yWK.js} +3 -3
- package/dist/{MultiActionButtonGroup-BiIIubiL.js.map → MultiActionButtonGroup-CxWH7yWK.js.map} +1 -1
- package/dist/{Navbar-BfaPeLUL.js → Navbar-B2UsolVU.js} +3 -3
- package/dist/{Navbar-BfaPeLUL.js.map → Navbar-B2UsolVU.js.map} +1 -1
- package/dist/{PageToolbar-OQg3mPF-.js → PageToolbar-DnbFt14Q.js} +3 -3
- package/dist/{PageToolbar-OQg3mPF-.js.map → PageToolbar-DnbFt14Q.js.map} +1 -1
- package/dist/{Pagination-Cjfda8KG.js → Pagination-C_b7Xhey.js} +2 -2
- package/dist/{Pagination-Cjfda8KG.js.map → Pagination-C_b7Xhey.js.map} +1 -1
- package/dist/{Popconfirm-D7_vfxFd.js → Popconfirm-CILjmzKI.js} +3 -3
- package/dist/{Popconfirm-D7_vfxFd.js.map → Popconfirm-CILjmzKI.js.map} +1 -1
- package/dist/{Popover-CzeHjvrB.js → Popover-BEbQrC_P.js} +22 -19
- package/dist/Popover-BEbQrC_P.js.map +1 -0
- package/dist/{RadioGroup-sIveSsNa.js → RadioGroup-XFzFd1ti.js} +3 -3
- package/dist/{RadioGroup-sIveSsNa.js.map → RadioGroup-XFzFd1ti.js.map} +1 -1
- package/dist/{Search-3UiqNZRj.js → Search-4Bxtt8hS.js} +2 -2
- package/dist/{Search-3UiqNZRj.js.map → Search-4Bxtt8hS.js.map} +1 -1
- package/dist/{SearchInput-C7dF_Ir-.js → SearchInput-f_oY9T4Z.js} +3 -3
- package/dist/{SearchInput-C7dF_Ir-.js.map → SearchInput-f_oY9T4Z.js.map} +1 -1
- package/dist/{SectionNav-8NoTOKO8.js → SectionNav-BpJlisbT.js} +4 -4
- package/dist/{SectionNav-8NoTOKO8.js.map → SectionNav-BpJlisbT.js.map} +1 -1
- package/dist/{Select-Is0VkePH.js → Select-DpcgKqKB.js} +32 -21
- package/dist/Select-DpcgKqKB.js.map +1 -0
- package/dist/{Sheet-Dw9BDvjI.js → Sheet-Chf0kX1E.js} +3 -3
- package/dist/{Sheet-Dw9BDvjI.js.map → Sheet-Chf0kX1E.js.map} +1 -1
- package/dist/{Sidebar-Dcb4rinA.js → Sidebar-Cm6I4dE1.js} +9 -7
- package/dist/{Sidebar-Dcb4rinA.js.map → Sidebar-Cm6I4dE1.js.map} +1 -1
- package/dist/{Slider-BOPfMOMm.js → Slider-pPC_3gz9.js} +3 -3
- package/dist/{Slider-BOPfMOMm.js.map → Slider-pPC_3gz9.js.map} +1 -1
- package/dist/{Switch-CX2A0v50.js → Switch-ChfPKcTE.js} +2 -2
- package/dist/{Switch-CX2A0v50.js.map → Switch-ChfPKcTE.js.map} +1 -1
- package/dist/{Tabs-UMQuDoW8.js → Tabs-eB974xJf.js} +2 -2
- package/dist/{Tabs-UMQuDoW8.js.map → Tabs-eB974xJf.js.map} +1 -1
- package/dist/{TextInput-CMuN1WfY.js → TextInput-DHM6dHmn.js} +3 -3
- package/dist/{TextInput-CMuN1WfY.js.map → TextInput-DHM6dHmn.js.map} +1 -1
- package/dist/{ThemeProvider-QncUrfJn.js → ThemeProvider-DrQJtzpd.js} +90 -14
- package/dist/ThemeProvider-DrQJtzpd.js.map +1 -0
- package/dist/{TimePicker-D9zktB8A.js → TimePicker-BGeqc-Ed.js} +2 -2
- package/dist/{TimePicker-D9zktB8A.js.map → TimePicker-BGeqc-Ed.js.map} +1 -1
- package/dist/{Toast-DQSbs3oA.js → Toast-Dr6Uw7ao.js} +2 -2
- package/dist/{Toast-DQSbs3oA.js.map → Toast-Dr6Uw7ao.js.map} +1 -1
- package/dist/{ZoomableSvg-CZEu6sAq.js → ZoomableSvg-BWnDkR61.js} +4 -4
- package/dist/{ZoomableSvg-CZEu6sAq.js.map → ZoomableSvg-BWnDkR61.js.map} +1 -1
- package/dist/{context-KxxeMHbR.js → context-D7X470dy.js} +5 -34
- package/dist/context-D7X470dy.js.map +1 -0
- package/dist/defaults-i_xG2F_1.js +32 -0
- package/dist/defaults-i_xG2F_1.js.map +1 -0
- package/dist/editors.d.ts +12 -2
- package/dist/editors.js +20 -12
- package/dist/editors.js.map +1 -1
- package/dist/findLiteralMatches-BGBw8Vbl.js +62 -0
- package/dist/findLiteralMatches-BGBw8Vbl.js.map +1 -0
- package/dist/flint.d.ts +15 -0
- package/dist/flint.js +212 -0
- package/dist/flint.js.map +1 -0
- package/dist/index.d.ts +725 -533
- package/dist/index.js +60 -57
- package/dist/internal/blocks/AIKit.js +2 -2
- package/dist/internal/blocks/AppShell.js +2 -2
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ChartPanel.js +1 -1
- package/dist/internal/blocks/ClipboardButton.js +1 -1
- package/dist/internal/blocks/ColorInput.js +1 -1
- package/dist/internal/blocks/ColorModeSwitch.js +1 -1
- package/dist/internal/blocks/Command.js +1 -1
- package/dist/internal/blocks/CopyField.js +1 -1
- package/dist/internal/blocks/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/{DiagramSkeleton-lwBS2YBa.js → internal/blocks/DiagramShared/DiagramSkeleton.js} +3 -3
- package/dist/internal/blocks/DiagramShared/DiagramSkeleton.js.map +1 -0
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
- package/dist/internal/blocks/ErrorState.js +1 -1
- package/dist/internal/blocks/ExportMenu.js +5 -5
- package/dist/internal/blocks/ExportMenu.js.map +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 +15 -11
- package/dist/internal/blocks/MultiCombobox.js.map +1 -1
- package/dist/internal/blocks/NumberInput.js +1 -1
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +2 -2
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +3 -3
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +2 -2
- package/dist/internal/blocks/StatCard.js +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +1 -1
- package/dist/internal/blocks/TimeInput.js +3 -3
- package/dist/internal/components/Alert.js +1 -1
- package/dist/internal/components/AlertModal.js +1 -1
- package/dist/internal/components/Avatar.js +1 -1
- package/dist/internal/components/BrandLogo.js +1 -1
- package/dist/internal/components/Breadcrumb.js +1 -1
- package/dist/internal/components/Button.js +1 -1
- package/dist/internal/components/Card.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/DatePicker.js +1 -1
- package/dist/internal/components/DateRangePicker.js +1 -1
- package/dist/internal/components/DropdownMenu.js +1 -1
- package/dist/internal/components/FileUpload.js +1 -1
- package/dist/internal/components/FullScreenModal.js +1 -1
- package/dist/internal/components/HoverCard.js +1 -1
- package/dist/internal/components/InputGroup.js +1 -1
- package/dist/internal/components/Kbd.js +1 -1
- package/dist/internal/components/MarkedText.js +1 -1
- package/dist/internal/components/Modal.js +1 -1
- package/dist/internal/components/Navbar.js +1 -1
- package/dist/internal/components/Pagination.js +1 -1
- package/dist/internal/components/Popconfirm.js +1 -1
- package/dist/internal/components/Popover.js +1 -1
- package/dist/internal/components/RadioGroup.js +1 -1
- package/dist/internal/components/Search.js +1 -1
- package/dist/internal/components/Select.js +1 -1
- package/dist/internal/components/Sheet.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Slider.js +1 -1
- package/dist/internal/components/Switch.js +1 -1
- package/dist/internal/components/Tabs.js +1 -1
- package/dist/internal/components/ThemeProvider.js +4 -3
- package/dist/internal/components/TimePicker.js +1 -1
- package/dist/internal/components/Toast.js +2 -2
- package/dist/internal/components/Toggle.js +3 -3
- package/dist/internal/components/Toggle.js.map +1 -1
- package/dist/internal/components/Tooltip.js +1 -1
- package/dist/internal/components/Truncated.js +16 -8
- package/dist/internal/components/Truncated.js.map +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/utils.js +3 -3
- package/dist/markdown-editor.js +7 -7
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.js +11 -11
- package/dist/{styles-DSUP_-9Z.js → styles-BAFscjSV.js} +4 -3
- package/dist/styles-BAFscjSV.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/svgTransforms-C9njt92h.js +89 -0
- package/dist/svgTransforms-C9njt92h.js.map +1 -0
- package/dist/testing.js +4 -3
- package/dist/testing.js.map +1 -1
- package/dist/{themeTokens-BNg98Mu9.js → themeTokens-D70HeNVF.js} +13 -6
- package/dist/{themeTokens-BNg98Mu9.js.map → themeTokens-D70HeNVF.js.map} +1 -1
- package/dist/{toast-CjkURw0M.js → toast-DIC0iNRf.js} +3 -3
- package/dist/toast-DIC0iNRf.js.map +1 -0
- package/dist/types-BPcAjMG0.d.ts +10 -0
- package/dist/{useColorSchemeState-CYqcUfSH.js → useColorSchemeState-klihG9-i.js} +2 -2
- package/dist/{useColorSchemeState-CYqcUfSH.js.map → useColorSchemeState-klihG9-i.js.map} +1 -1
- package/dist/{utils-D0c5VAyF.js → utils-B5Z52hYs.js} +2 -2
- package/dist/{utils-D0c5VAyF.js.map → utils-B5Z52hYs.js.map} +1 -1
- package/dist/vega.d.ts +46 -0
- package/dist/vega.js +26 -0
- package/dist/vega.js.map +1 -0
- package/dist/vegaTheme-DfoEQhOy.js +146 -0
- package/dist/vegaTheme-DfoEQhOy.js.map +1 -0
- package/package.json +28 -9
- package/src/styles.css +27 -4
- package/dist/AIKit-DiS0CVOW.js.map +0 -1
- package/dist/AppShell-B5GQN6Zs.js.map +0 -1
- package/dist/Button-6xBX0nNl.js.map +0 -1
- package/dist/CodeEditor-DyaN-Ij2.js.map +0 -1
- package/dist/Combobox-Dgm6Z4ib.js.map +0 -1
- package/dist/DiagramSkeleton-lwBS2YBa.js.map +0 -1
- package/dist/MarkedText-Ckbft5mw.js +0 -44
- package/dist/MarkedText-Ckbft5mw.js.map +0 -1
- package/dist/MermaidDiagram-ChL3WIQT.js.map +0 -1
- package/dist/Modal-wqG8nJiK.js.map +0 -1
- package/dist/Popover-CzeHjvrB.js.map +0 -1
- package/dist/Select-Is0VkePH.js.map +0 -1
- package/dist/ThemeProvider-QncUrfJn.js.map +0 -1
- package/dist/context-KxxeMHbR.js.map +0 -1
- package/dist/escapeStringRegexp-8MxP2knR.js +0 -6
- package/dist/escapeStringRegexp-8MxP2knR.js.map +0 -1
- package/dist/styles-DSUP_-9Z.js.map +0 -1
- package/dist/toast-CjkURw0M.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Modal-wqG8nJiK.js","names":[],"sources":["../src/components/Modal/ModalBody.tsx","../src/components/Modal/ModalContent.tsx","../src/components/Modal/ModalFooter.tsx","../src/components/Modal/ModalActions.tsx","../src/components/Modal/ModalHeader.tsx","../src/components/Modal/ModalIcon.tsx","../src/components/Modal/ModalImage.tsx","../src/components/Modal/Modal.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\n/** Props for `Modal.Body`. Accepts all `<div>` attributes; `as=\"form\"` is reserved for future use. */\ntype Props = ComponentProps<'div'> & {\n as?: 'form';\n};\n\n/**\n * Scrollable body slot for `Modal`. Place form fields, content blocks, or detail panels here.\n * Takes available height inside `Modal.Content` and scrolls when content overflows.\n */\nexport const ModalBody = ({ className, ...props }: Props) => (\n <div\n data-slot=\"modal-body\"\n className={cn(\n // scrollable body - takes available space and scrolls when content overflows\n 'tw:flex-1',\n 'tw:overflow-y-auto',\n\n // argo: soft top/bottom edge fade in place of header/footer separators (pure-CSS utility)\n 'tw:group-data-[argo=true]/modal:scroll-fade-y',\n\n // Own horizontal padding, matching Header/Footer so content edges align (ModalContent adds none)\n 'tw:group-data-[argo=false]/modal:px-7',\n 'tw:group-data-[argo=true]/modal:px-4',\n 'tw:py-1',\n\n // normalize nested Lucide icon sizing, matching Popover/HoverCard/Alert content surfaces\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Content> & {\n size?: 'small' | 'medium' | 'large';\n};\n\nexport const ModalContent = ({\n size = 'medium',\n className,\n children,\n onEscapeKeyDown,\n ...props\n}: Props) => {\n const renderArgo = useArgoDesign();\n\n const handleEscapeKeyDown: typeof onEscapeKeyDown = (event) => {\n // Stop propagation to prevent parent modals (like FullScreenModal) from closing\n event.stopPropagation();\n onEscapeKeyDown?.(event);\n };\n\n return (\n <Portal>\n <ModalOverlay>\n <Content\n // props first so callers can't override the computed data-argo / data-size\n {...props}\n data-argo={renderArgo}\n data-size={size}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group/modal',\n\n // positioning - horizontally centered; vertical anchor depends on the design language\n 'tw:fixed',\n 'tw:left-1/2',\n 'tw:-translate-x-1/2',\n 'tw:z-[1051]',\n\n // legacy: anchored near the top; argo: centered in the viewport (like AlertModal)\n 'tw:data-[argo=false]:top-20',\n 'tw:data-[argo=true]:top-1/2',\n 'tw:data-[argo=true]:-translate-y-1/2',\n\n // sizing - responsive max dimensions\n 'tw:w-full',\n 'tw:max-w-2xl',\n 'tw:max-h-[calc(100vh-2*theme(spacing.20))]',\n\n // layout\n 'tw:flex',\n 'tw:flex-col',\n 'tw:gap-4',\n 'tw:data-[argo=false]:rounded-lg',\n 'tw:data-[argo=true]:rounded-3xl',\n 'tw:bg-card',\n 'tw:text-card-foreground',\n\n // Vertical (edge) padding lives here so it survives an omitted Header or Footer.\n // Horizontal padding is owned by Header / Body / Footer, so the Body runs full-bleed and\n // its scrollbar sits at the modal edge (see ModalBody).\n 'tw:data-[argo=false]:py-8',\n 'tw:data-[argo=true]:py-4',\n\n // animation — shared\n 'tw:duration-200',\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n\n // NOTE: no `slide-*-left-1/2` (both) or argo `slide-*-top-1/2`. Those re-pinned the\n // -50%/-50% centring during the animation under v3, where centring and the animation\n // shared the `transform` property (the animation overrode it). Under v4 the centring\n // uses the `translate` PROPERTY while tw-animate-css animates `transform` — they compose\n // instead of overriding, so a -50% enter-translate stacks on the -50% centring (= -100%)\n // and the modal flies in from the top-left. Centring now persists on its own, so we\n // animate transform-only (zoom + fade) and the modal stays put.\n\n // legacy: slide-down + zoom (top-anchored via `top-20`, so no `translate-y` to double)\n 'tw:data-[argo=false]:data-[state=open]:zoom-in-80',\n 'tw:data-[argo=false]:data-[state=open]:slide-in-from-top-[48%]',\n 'tw:data-[argo=false]:data-[state=closed]:zoom-out-80',\n 'tw:data-[argo=false]:data-[state=closed]:slide-out-to-top-[48%]',\n\n // argo: pop from the centre — zoom only\n 'tw:data-[argo=true]:data-[state=open]:zoom-in-95',\n 'tw:data-[argo=true]:data-[state=closed]:zoom-out-95',\n\n {\n 'tw:max-w-[480px]': size === 'small',\n 'tw:max-w-4xl': size === 'large',\n },\n\n className,\n )}\n onEscapeKeyDown={handleEscapeKeyDown}\n >\n {children}\n </Content>\n </ModalOverlay>\n </Portal>\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'>;\n\nexport const ModalFooter = ({ className, ...props }: Props) => (\n <div\n {...props}\n className={cn(\n // Own horizontal padding (ModalContent owns the vertical edge padding)\n 'tw:group-data-[argo=false]/modal:px-7',\n 'tw:group-data-[argo=true]/modal:px-4',\n className,\n )}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\n/**\n * Container for the header's top-right controls — any `actions` passed to `Modal.Header` plus the\n * close icon. Sits in the header grid's last column, top-aligned. Mirrors `Alert`'s action slot.\n */\nexport const ModalActions = ({ className, ...props }: Props) => (\n <div\n className={cn(\n 'tw:col-start-3',\n 'tw:row-start-1',\n 'tw:self-start',\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-1',\n // argo: gutter separating the actions/close from the title (carried here so the grid needs no\n // column gap — see ModalHeader)\n 'tw:group-data-[argo=true]/modal:ml-3',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Separator } from '../Separator';\n\nimport { ModalActions } from './ModalActions';\nimport { ModalDescription } from './ModalDescription';\nimport { ModalTitle } from './ModalTitle';\n\ntype Props = {\n /** Status icon slot — `<Modal.Icon />` or `<Modal.Image />`. */\n icon?: ReactNode;\n /** Visible subtitle below the title (also fills `aria-describedby`). */\n description?: ReactNode;\n /** Screen-reader-only description; fills `aria-describedby` without rendering visibly. */\n 'aria-description'?: string;\n /** Controls rendered top-right, before the close icon. */\n actions?: ReactNode;\n /** Hide the top-right close icon. */\n hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\n/** Modal header: `[icon] | title (children) | actions + close` on row 1, `description` on row 2. */\nexport const ModalHeader = ({\n className,\n icon,\n description,\n 'aria-description': ariaDescription,\n actions,\n hideCloseIcon = false,\n children,\n ...props\n}: Props) => (\n <div\n {...props}\n data-slot=\"modal-header\"\n className={cn(\n 'tw:grid',\n 'tw:grid-cols-[auto_1fr_auto]',\n 'tw:items-center',\n 'tw:group-data-[argo=false]/modal:px-7',\n 'tw:group-data-[argo=true]/modal:px-4',\n className,\n )}\n >\n {icon}\n\n {children && <ModalTitle className=\"tw:col-start-2 tw:row-start-1\">{children}</ModalTitle>}\n {(actions || !hideCloseIcon) && (\n <ModalActions>\n {actions}\n {!hideCloseIcon && (\n <Close asChild>\n <Button variant=\"invisible\" size=\"icon-sm\">\n <X />\n <span className=\"tw:sr-only\">Close</span>\n </Button>\n </Close>\n )}\n </ModalActions>\n )}\n {(description || ariaDescription) && (\n <ModalDescription\n className={cn(\n 'tw:col-start-1',\n 'tw:col-end-4',\n 'tw:row-start-2',\n description ? 'tw:mt-1' : 'tw:sr-only',\n )}\n >\n {description ?? ariaDescription}\n </ModalDescription>\n )}\n\n {/* Legacy-only separator; shown when a Body follows, hidden when that body hosts Tabs. */}\n <div\n className={cn(\n 'tw:col-start-1',\n 'tw:col-end-4',\n 'tw:mt-5',\n 'tw:hidden',\n 'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body])_&]:block',\n 'tw:group-data-[argo=false]/modal:[[data-slot=modal-header]:has(~[data-slot=modal-body]_[data-slot=tabs-root])_&]:!hidden',\n )}\n >\n <Separator orientation=\"horizontal\" />\n </div>\n </div>\n);\n","import type { ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype NamedColor = 'orange' | 'blue' | 'red' | 'green' | 'gray' | 'violet';\n\ntype Props = {\n color: NamedColor | (string & {});\n icon: ReactNode;\n};\n\nconst NAMED_COLORS = new Set<string>(['orange', 'blue', 'red', 'green', 'gray', 'violet']);\n\n/**\n * Status-coloured icon for `Modal`. Authored inside `Modal.Header`. For a remote image badge (a\n * component or backend logo fetched by URL) use `Modal.Image` instead.\n *\n * - **Legacy anatomy:** a solid-filled circular badge docked to the top-left of `Modal.Content`\n * (absolutely positioned, so it renders identically wherever it is authored).\n * - **Argo anatomy** (`data-argo` on `Modal.Content`): a small soft-tinted inline badge in the\n * header grid, next to the title.\n *\n * Both variants are rendered and toggled purely via CSS (`group-data-[argo=true]/modal:`) — no\n * context. Use the categorical `color` (`red` destructive, `orange` warning, `green` success,\n * `blue` info, `gray` neutral, `violet` agent) to encode meaning; the palette stays fixed across\n * brand themes.\n */\nexport const ModalIcon = ({ color, icon }: Props) => {\n const customColor = color && !NAMED_COLORS.has(color) ? color : undefined;\n\n return (\n <span\n data-slot=\"modal-icon\"\n className={cn(\n 'tw:flex',\n 'tw:shrink-0',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:[&_svg]:aspect-square',\n\n // legacy: solid-filled circular badge floating at the modal's top-left\n 'tw:group-data-[argo=false]/modal:absolute',\n 'tw:group-data-[argo=false]/modal:top-0',\n 'tw:group-data-[argo=false]/modal:left-8',\n 'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n 'tw:group-data-[argo=false]/modal:size-12',\n 'tw:group-data-[argo=false]/modal:rounded-full',\n 'tw:group-data-[argo=false]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-6',\n\n // argo: soft-tinted inline badge in the header grid's first column\n 'tw:group-data-[argo=true]/modal:col-start-1',\n 'tw:group-data-[argo=true]/modal:row-start-1',\n 'tw:group-data-[argo=true]/modal:self-start',\n 'tw:group-data-[argo=true]/modal:mr-3',\n 'tw:group-data-[argo=true]/modal:size-8',\n 'tw:group-data-[argo=true]/modal:rounded',\n 'tw:group-data-[argo=true]/modal:overflow-hidden',\n 'tw:group-data-[argo=true]/modal:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n\n // legacy palette: solid fill + white glyph (violet is the exception — tinted)\n {\n 'tw:group-data-[argo=false]/modal:bg-warning-500': color === 'orange',\n 'tw:group-data-[argo=false]/modal:bg-blue-500': color === 'blue',\n 'tw:group-data-[argo=false]/modal:bg-green-500': color === 'green',\n 'tw:group-data-[argo=false]/modal:bg-error-500': color === 'red',\n 'tw:group-data-[argo=false]/modal:bg-neutral-150': color === 'gray',\n 'tw:group-data-[argo=false]/modal:bg-purple-100': color === 'violet',\n 'tw:group-data-[argo=false]/modal:text-white': color !== 'violet',\n 'tw:group-data-[argo=false]/modal:text-purple-500': color === 'violet',\n },\n\n // argo palette: soft tint + matching glyph colour\n {\n 'tw:group-data-[argo=true]/modal:bg-warning-100 tw:group-data-[argo=true]/modal:text-warning-500':\n color === 'orange',\n 'tw:group-data-[argo=true]/modal:bg-blue-100 tw:group-data-[argo=true]/modal:text-blue-600':\n color === 'blue',\n 'tw:group-data-[argo=true]/modal:bg-green-100 tw:group-data-[argo=true]/modal:text-green-900':\n color === 'green',\n 'tw:group-data-[argo=true]/modal:bg-error-100 tw:group-data-[argo=true]/modal:text-error-500':\n color === 'red',\n 'tw:group-data-[argo=true]/modal:bg-neutral-100 tw:group-data-[argo=true]/modal:text-neutral-500':\n color === 'gray',\n 'tw:group-data-[argo=true]/modal:bg-purple-100 tw:group-data-[argo=true]/modal:text-purple-500':\n color === 'violet',\n },\n\n // custom (non-named) colour: caller-provided fill + white glyph\n { 'tw:text-white': !!customColor },\n )}\n style={customColor ? { backgroundColor: customColor } : undefined}\n >\n {icon}\n </span>\n );\n};\n","import { useEffect, useState } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = {\n src: string;\n /** Accessible alt text. Defaults to `\"\"` (decorative) — provide it when the image carries meaning. */\n alt?: string;\n};\n\nexport const ModalImage = ({ src, alt = '' }: Props) => {\n const [hasImageError, setHasImageError] = useState(false);\n\n // Reset the error state when the source changes, so a reused badge (new logo, or a retry after a\n // transient failure) isn't permanently hidden by an earlier onError.\n useEffect(() => setHasImageError(false), [src]);\n\n if (hasImageError) return null;\n\n return (\n <span\n data-slot=\"modal-image\"\n className={cn(\n 'tw:shrink-0',\n 'tw:overflow-hidden',\n\n // legacy: circular badge floating at the top-left of the modal\n 'tw:group-data-[argo=false]/modal:absolute',\n 'tw:group-data-[argo=false]/modal:top-0',\n 'tw:group-data-[argo=false]/modal:left-8',\n 'tw:group-data-[argo=false]/modal:-translate-y-1/2',\n 'tw:group-data-[argo=false]/modal:size-12',\n 'tw:group-data-[argo=false]/modal:rounded-full',\n\n // argo: inline badge in the header grid's first column\n 'tw:group-data-[argo=true]/modal:flex',\n 'tw:group-data-[argo=true]/modal:col-start-1',\n 'tw:group-data-[argo=true]/modal:row-start-1',\n 'tw:group-data-[argo=true]/modal:self-start',\n 'tw:group-data-[argo=true]/modal:mr-3',\n 'tw:group-data-[argo=true]/modal:items-center',\n 'tw:group-data-[argo=true]/modal:justify-center',\n 'tw:group-data-[argo=true]/modal:rounded',\n 'tw:group-data-[argo=true]/modal:size-8',\n )}\n >\n <img\n src={src}\n alt={alt}\n className=\"tw:size-full tw:object-contain\"\n onError={() => setHasImageError(true)}\n />\n </span>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { ModalBody } from './ModalBody';\nimport { ModalContent } from './ModalContent';\nimport { ModalFooter } from './ModalFooter';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalIcon } from './ModalIcon';\nimport { ModalImage } from './ModalImage';\nimport { ModalOverlay } from './ModalOverlay';\n\ntype Props = ComponentProps<typeof Root>;\n\n/**\n * Blocking dialog for confirmations, forms, and detail views. Built on Radix Dialog.\n *\n * **When to use:** the user must act before continuing (confirm a destructive action, fill a short form,\n * view a focused detail panel). Use the compound parts `Modal.Trigger`, `Modal.Content`, `Modal.Header`,\n * `Modal.Body`, `Modal.Footer`, and optionally `Modal.Icon` for a status-coloured header glyph.\n * **When NOT to use:** for slide-in side editing use `Sheet`; for an inline destructive confirmation anchored\n * to its trigger use `Popconfirm`; for hover previews use `HoverCard`.\n * **Composition:** wrap `Modal.Content` around `Modal.Header` + `Modal.Body` + `Modal.Footer`. Put `useAppForm`\n * `FormBody` inside `Modal.Body` and the submit / cancel buttons inside `Modal.Footer`.\n *\n * @see RECIPES.md#modal-form — for the canonical form-in-modal composition\n * @see RECIPES.md#confirm-dialog — for destructive-confirm dialogs\n */\nexport const Modal = (props: Props) => <Root {...props} />;\n\nModal.Close = Close;\nModal.Trigger = Trigger;\n\nModal.Content = ModalContent;\nModal.Body = ModalBody;\nModal.Icon = ModalIcon;\nModal.Image = ModalImage;\nModal.Footer = ModalFooter;\nModal.Header = ModalHeader;\nModal.Overlay = ModalOverlay;\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAa,aAAa,EAAE,WAAW,GAAG,YACxC,oBAAC,OAAD;CACE,aAAU;CACV,WAAW,GAET,aACA,sBAGA,iDAGA,yCACA,wCACA,WAGA,qDACA,uBACA,SACF;CACA,GAAI;AACL,CAAA;;;ACvBH,MAAa,gBAAgB,EAC3B,OAAO,UACP,WACA,UACA,iBACA,GAAG,YACQ;CACX,MAAM,aAAa,cAAc;CAEjC,MAAM,uBAA+C,UAAU;EAE7D,MAAM,gBAAgB;EACtB,kBAAkB,KAAK;CACzB;CAEA,OACE,oBAAC,QAAD,EAAA,UACE,oBAAC,cAAD,EAAA,UACE,oBAAC,SAAD;EAEE,GAAI;EACJ,aAAW;EACX,aAAW;EACX,WAAW,GACT,yBACA,kBAGA,YACA,eACA,uBACA,eAGA,+BACA,+BACA,wCAGA,aACA,gBACA,8CAGA,WACA,eACA,YACA,mCACA,mCACA,cACA,2BAKA,6BACA,4BAGA,mBACA,mCACA,kCACA,sCACA,qCAWA,qDACA,kEACA,wDACA,mEAGA,oDACA,uDAEA;GACE,oBAAoB,SAAS;GAC7B,gBAAgB,SAAS;EAC3B,GAEA,SACF;EACA,iBAAiB;EAEhB;CACM,CAAA,EACG,CAAA,EACR,CAAA;AAEZ;;;ACvGA,MAAa,eAAe,EAAE,WAAW,GAAG,YAC1C,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GAET,yCACA,wCACA,SACF;AACD,CAAA;;;;;;;ACLH,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAAC,OAAD;CACE,WAAW,GACT,kBACA,kBACA,iBACA,WACA,mBACA,YAGA,wCACA,SACF;CACA,GAAI;AACL,CAAA;;;;ACCH,MAAa,eAAe,EAC1B,WACA,MACA,aACA,oBAAoB,iBACpB,SACA,gBAAgB,OAChB,UACA,GAAG,YAEH,qBAAC,OAAD;CACE,GAAI;CACJ,aAAU;CACV,WAAW,GACT,WACA,gCACA,mBACA,yCACA,wCACA,SACF;CAVF,UAAA;EAYG;EAEA,YAAY,oBAAC,YAAD;GAAY,WAAU;GAAiC;EAAqB,CAAA;GACvF,WAAW,CAAC,kBACZ,qBAAC,cAAD,EAAA,UAAA,CACG,SACA,CAAC,iBACA,oBAAC,OAAD;GAAO,SAAA;GACL,UAAA,qBAAC,QAAD;IAAQ,SAAQ;IAAY,MAAK;IAAjC,UAAA,CACE,oBAAC,GAAD,CAAI,CAAA,GACJ,oBAAC,QAAD;KAAM,WAAU;KAAa,UAAA;IAAW,CAAA,CAClC;;EACH,CAAA,CAEG,EAAA,CAAA;GAEd,eAAe,oBACf,oBAAC,kBAAD;GACE,WAAW,GACT,kBACA,gBACA,kBACA,cAAc,YAAY,YAC5B;GAEC,UAAA,eAAe;EACA,CAAA;EAIpB,oBAAC,OAAD;GACE,WAAW,GACT,kBACA,gBACA,WACA,aACA,oGACA,0HACF;GAEA,UAAA,oBAAC,WAAD,EAAW,aAAY,aAAc,CAAA;EAClC,CAAA;CACF;;;;AC/EP,MAAM,+BAAe,IAAI,IAAY;CAAC;CAAU;CAAQ;CAAO;CAAS;CAAQ;AAAQ,CAAC;;;;;;;;;;;;;;;AAgBzF,MAAa,aAAa,EAAE,OAAO,WAAkB;CACnD,MAAM,cAAc,SAAS,CAAC,aAAa,IAAI,KAAK,IAAI,QAAQ,KAAA;CAEhE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,WACA,eACA,mBACA,qBACA,4BAGA,6CACA,0CACA,2CACA,qDACA,4CACA,iDACA,8EAGA,+CACA,+CACA,8CACA,wCACA,0CACA,2CACA,mDACA,6EAGA;GACE,mDAAmD,UAAU;GAC7D,gDAAgD,UAAU;GAC1D,iDAAiD,UAAU;GAC3D,iDAAiD,UAAU;GAC3D,mDAAmD,UAAU;GAC7D,kDAAkD,UAAU;GAC5D,+CAA+C,UAAU;GACzD,oDAAoD,UAAU;EAChE,GAGA;GACE,mGACE,UAAU;GACZ,6FACE,UAAU;GACZ,+FACE,UAAU;GACZ,+FACE,UAAU;GACZ,mGACE,UAAU;GACZ,iGACE,UAAU;EACd,GAGA,EAAE,iBAAiB,CAAC,CAAC,YAAY,CACnC;EACA,OAAO,cAAc,EAAE,iBAAiB,YAAY,IAAI,KAAA;EAEvD,UAAA;CACG,CAAA;AAEV;;;ACrFA,MAAa,cAAc,EAAE,KAAK,MAAM,SAAgB;CACtD,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB,iBAAiB,KAAK,GAAG,CAAC,GAAG,CAAC;CAE9C,IAAI,eAAe,OAAO;CAE1B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,eACA,sBAGA,6CACA,0CACA,2CACA,qDACA,4CACA,iDAGA,wCACA,+CACA,+CACA,8CACA,wCACA,gDACA,kDACA,2CACA,wCACF;EAEA,UAAA,oBAAC,OAAD;GACO;GACA;GACL,WAAU;GACV,eAAe,iBAAiB,IAAI;EACrC,CAAA;CACG,CAAA;AAEV;;;;;;;;;;;;;;;;;AC3BA,MAAa,SAAS,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAEzD,MAAM,QAAQ;AACd,MAAM,UAAU;AAEhB,MAAM,UAAU;AAChB,MAAM,OAAO;AACb,MAAM,OAAO;AACb,MAAM,QAAQ;AACd,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,UAAU"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Popover-CzeHjvrB.js","names":[],"sources":["../src/components/Popover/PopoverContent.tsx","../src/components/Popover/Popover.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst variants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/popover-content',\n 'tw:z-[1055]',\n 'tw:focus-visible:outline-hidden',\n\n // An open Radix Dialog locks `pointer-events: none` on <body>. Popover content\n // is portalled to <body> as a sibling of the dialog, so it inherits the lock\n // and clicks fall through — re-enable pointer events on the content itself\n // (dismiss-on-outside-click still works, it listens on document).\n 'tw:pointer-events-auto',\n\n // sizing\n 'tw:min-w-32',\n 'tw:max-h-[var(--radix-popover-content-available-height)]',\n 'tw:origin-(--radix-popover-content-transform-origin)',\n\n // layout\n 'tw:flex',\n 'tw:flex-col',\n 'tw:overflow-y-auto',\n\n // border\n 'tw:box-border',\n 'tw:border',\n 'tw:border-solid',\n 'tw:border-border',\n 'tw:shadow-lg',\n\n // surface — semantic tokens, so a portalled panel follows the brand and the scheme\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n\n // open animation\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=open]:zoom-in-95',\n\n // closed animation\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // position animation\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\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 {\n defaultVariants: {\n matchTriggerWidth: false,\n variant: 'default',\n },\n variants: {\n // Radius is the only thing the surface variants differ in — the panel's colours\n // live in the base array.\n variant: {\n default: ['tw:rounded-md'],\n argo: ['tw:rounded-2xl'],\n },\n matchTriggerWidth: {\n true: ['tw:w-[var(--radix-popover-trigger-width)]'],\n false: [],\n },\n },\n },\n);\n\ntype Props = ComponentProps<typeof Content> & Omit<VariantProps<typeof variants>, 'variant'>;\n\nexport const PopoverContent = ({\n ref,\n className,\n align = 'center',\n sideOffset = 4,\n matchTriggerWidth = false,\n children,\n onEscapeKeyDown,\n ...props\n}: Props) => {\n const effectiveVariant: NonNullable<VariantProps<typeof variants>['variant']> = useArgoDesign()\n ? 'argo'\n : 'default';\n return (\n <Portal>\n <Content\n ref={ref}\n align={matchTriggerWidth ? 'start' : align}\n sideOffset={sideOffset}\n className={cn(variants({ className, matchTriggerWidth, variant: effectiveVariant }))}\n onEscapeKeyDown={(event) => {\n // Stop propagation to prevent parent modals (like FullScreenModal) from closing\n event.stopPropagation();\n onEscapeKeyDown?.(event);\n }}\n {...props}\n >\n {children}\n </Content>\n </Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-popover';\n\nimport { PopoverContent } from './PopoverContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Popover = (props: Props) => <Root {...props} />;\n\n/**\n * Main Layout\n */\nPopover.Content = PopoverContent;\nPopover.Trigger = Trigger;\nPopover.Close = Close;\n"],"mappings":";;;;;;AAQA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAMA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,mBAAmB;EACnB,SAAS;CACX;CACA,UAAU;EAGR,SAAS;GACP,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,gBAAgB;EACzB;EACA,mBAAmB;GACjB,MAAM,CAAC,2CAA2C;GAClD,OAAO,CAAC;EACV;CACF;AACF,CACF;AAIA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,GAAG,YACQ;CACX,MAAM,mBAA0E,cAAc,IAC1F,SACA;CACJ,OACE,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;EACO;EACL,OAAO,oBAAoB,UAAU;EACzB;EACZ,WAAW,GAAG,SAAS;GAAE;GAAW;GAAmB,SAAS;EAAiB,CAAC,CAAC;EACnF,kBAAkB,UAAU;GAE1B,MAAM,gBAAgB;GACtB,kBAAkB,KAAK;EACzB;EACA,GAAI;EAEH;CACM,CAAA,EACH,CAAA;AAEZ;;;AC5GA,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAClB,QAAQ,QAAQ"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Select-Is0VkePH.js","names":["SelectItemComponent"],"sources":["../src/components/Select/SelectContent.tsx","../src/components/Select/SelectGroup.tsx","../src/components/Select/SelectItem.tsx","../src/components/Select/SelectLabel.tsx","../src/components/Select/SelectRoot.tsx","../src/components/Select/SelectSeparator.tsx","../src/components/Select/SelectTrigger.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { ChevronDown, ChevronUp } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst scrollButtonStyles = cn(\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:rounded-sm',\n 'tw:p-1',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n);\n\ntype Variant = 'default' | 'argo';\n\n/**\n * Props for `Select.Content`. `container` portals the listbox into a custom element (useful inside modals).\n */\ntype Props = ComponentProps<typeof SelectPrimitive.Content> & {\n container?: HTMLElement | null;\n};\n\n/**\n * Listbox container for `Select`. Portals items into a popover sized to the trigger.\n * Normally rendered implicitly by `Select`; use directly only when composing custom item layouts via\n * the `Select.Root` / `Select.Trigger` / `Select.Content` compound parts.\n */\nexport const SelectContent = ({\n ref,\n className,\n children,\n container,\n position = 'popper',\n sideOffset = 4,\n ...props\n}: Props) => {\n const effectiveVariant: Variant = useArgoDesign() ? 'argo' : 'default';\n return (\n <SelectPrimitive.Portal container={container}>\n <SelectPrimitive.Content\n {...props}\n ref={ref}\n position={position}\n sideOffset={sideOffset}\n data-variant={effectiveVariant}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group/select-content',\n // Floating tier above Modal (1051): Tooltip 1060 / Combobox·Popover·Select 1055 / Modal 1051 / DropdownMenu.SubContent 1041 / FullScreenModal 1039\n 'tw:z-[1055]',\n\n // layout\n 'tw:flex tw:flex-col',\n 'tw:p-1',\n 'tw:data-[variant=default]:p-0',\n 'tw:overflow-hidden',\n 'tw:origin-(--radix-select-content-transform-origin)',\n\n // sizing\n 'tw:max-h-[var(--radix-select-content-available-height)]',\n 'tw:min-w-[var(--radix-select-trigger-width)]',\n\n // appearance\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n 'tw:shadow-md',\n 'tw:ring-1',\n 'tw:ring-foreground/10',\n 'tw:rounded-lg',\n 'tw:data-[variant=default]:rounded',\n\n // open animation\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=open]:zoom-in-95',\n\n // closed animation\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // position animations\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\n className,\n )}\n >\n <SelectPrimitive.ScrollUpButton className={scrollButtonStyles}>\n <ChevronUp />\n </SelectPrimitive.ScrollUpButton>\n\n <SelectPrimitive.Viewport\n className={cn({\n 'tw:h-[var(--radix-select-trigger-height)] tw:w-full tw:min-w-[var(--radix-select-trigger-width)]':\n position === 'popper',\n })}\n >\n {children}\n </SelectPrimitive.Viewport>\n\n <SelectPrimitive.ScrollDownButton className={scrollButtonStyles}>\n <ChevronDown />\n </SelectPrimitive.ScrollDownButton>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Group>;\n\nexport const SelectGroup = ({ className, ...props }: Props) => (\n <SelectPrimitive.Group {...props} className={cn('tw:flex tw:flex-col tw:gap-0.5', className)} />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { Check } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Item> & {\n icon?: ReactNode;\n};\n\nexport const SelectItem = ({ ref, className, children, icon, ...props }: Props) => (\n <SelectPrimitive.Item\n {...props}\n ref={ref}\n className={cn(\n 'tw:group/select-item',\n\n // layout\n 'tw:relative',\n 'tw:flex',\n 'tw:flex-1',\n 'tw:items-center',\n 'tw:gap-2',\n\n // spacing — default variant uses tighter radius and wider horizontal padding\n 'tw:py-2',\n 'tw:px-2',\n 'tw:group-data-[variant=default]/select-content:px-4',\n 'tw:rounded-lg',\n 'tw:group-data-[variant=default]/select-content:rounded-none',\n\n // typography\n 'tw:text-sm',\n 'tw:select-none',\n 'tw:cursor-default',\n 'tw:outline-hidden',\n\n // highlighted (keyboard / hover)\n 'tw:focus:outline-hidden',\n 'tw:data-[highlighted]:bg-accent',\n 'tw:group-data-[variant=default]/select-content:data-[highlighted]:bg-neutral-100',\n 'tw:data-[highlighted]:text-accent-foreground',\n 'tw:group-data-[variant=default]/select-content:data-[highlighted]:text-foreground',\n\n // disabled\n 'tw:data-[disabled]:pointer-events-none',\n 'tw:data-[disabled]:opacity-50',\n\n // child svg defaults\n 'tw:[&_svg]:pointer-events-none',\n 'tw:[&_svg]:shrink-0',\n 'tw:[&_svg]:text-muted-foreground',\n \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n className,\n )}\n >\n {icon}\n <span className=\"tw:flex-1 tw:truncate\">\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </span>\n <SelectPrimitive.ItemIndicator className=\"tw:pointer-events-none\">\n <Check className=\"tw:size-4\" />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n);\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Label>;\n\nexport const SelectLabel = ({ className, ...props }: Props) => (\n <SelectPrimitive.Label\n {...props}\n className={cn(\n // Base (argo variant) — soft gray section label\n 'tw:px-2',\n 'tw:py-1.5',\n 'tw:text-xs',\n 'tw:font-medium',\n 'tw:leading-none',\n 'tw:text-muted-foreground',\n\n // Default variant — uppercase tracked label, matches Combobox default\n 'tw:group-data-[variant=default]/select-content:uppercase',\n 'tw:group-data-[variant=default]/select-content:font-semibold',\n 'tw:group-data-[variant=default]/select-content:tracking-wider',\n 'tw:group-data-[variant=default]/select-content:text-[11px]',\n 'tw:group-data-[variant=default]/select-content:text-black',\n 'tw:group-data-[variant=default]/select-content:pt-2',\n 'tw:group-data-[variant=default]/select-content:px-4',\n\n className,\n )}\n />\n);\n","import type { ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-select';\n\n// Mirror Radix's `SelectProps` as an explicit list. We can't infer via\n// `ComponentProps<typeof Root>` or reuse Radix's `SelectProps` directly: both\n// transitively reference the un-exported `SelectSharedProps` interface, and\n// TS4023 fires when DTS emits anything that consumes it (e.g. `useAppForm`).\n// Keep this in sync with `@radix-ui/react-select`'s `SelectProps` shape.\nexport type SelectRootProps = {\n // SelectSharedProps\n children?: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n dir?: 'ltr' | 'rtl';\n name?: string;\n autoComplete?: string;\n disabled?: boolean;\n required?: boolean;\n form?: string;\n // SelectProps\n value?: string;\n defaultValue?: string;\n onValueChange?(value: string): void;\n};\n\nexport const SelectRoot = (props: SelectRootProps) => <Root {...props} />;\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Separator>;\n\nexport const SelectSeparator = ({ className, ...props }: Props) => (\n <SelectPrimitive.Separator\n {...props}\n className={cn('tw:mx-2 tw:my-1 tw:h-px tw:bg-border', className)}\n />\n);\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { overlayTriggerVariants } from '../OverlayTrigger/styles';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Trigger> &\n Omit<VariantProps<typeof overlayTriggerVariants>, 'variant'> & {\n variant?: Exclude<VariantProps<typeof overlayTriggerVariants>['variant'], 'argo'> | 'inline';\n } & Pick<ComponentProps<typeof SelectPrimitive.Value>, 'placeholder'>;\n\nexport const SelectTrigger = ({\n ref,\n className,\n variant,\n state,\n sizing,\n placeholder,\n ...props\n}: Props) => {\n const isArgoDesign = useArgoDesign();\n const effectiveVariant = (() => {\n if (variant === 'inline') return 'inline';\n if (isArgoDesign) return 'argo';\n return variant;\n })();\n const isInlineVariant = effectiveVariant === 'inline';\n\n if (isInlineVariant)\n return (\n <SelectPrimitive.Trigger {...props} ref={ref} className={cn(className)} asChild>\n <Button variant=\"inline\">\n <SelectPrimitive.Value placeholder={placeholder} />\n <SelectPrimitive.Icon asChild>\n <ChevronDown />\n </SelectPrimitive.Icon>\n </Button>\n </SelectPrimitive.Trigger>\n );\n\n return (\n <SelectPrimitive.Trigger\n {...props}\n ref={ref}\n className={cn(\n overlayTriggerVariants({ variant: effectiveVariant, state, sizing }),\n className,\n )}\n >\n <SelectPrimitive.Value placeholder={placeholder} />\n <SelectPrimitive.Icon asChild>\n <ChevronDown className=\"tw:size-4 tw:text-muted-foreground\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n );\n};\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { SelectContent } from './SelectContent';\nimport { SelectGroup } from './SelectGroup';\nimport { SelectItem as SelectItemComponent } from './SelectItem';\nimport { SelectLabel } from './SelectLabel';\nimport { SelectRoot, type SelectRootProps } from './SelectRoot';\nimport { SelectSeparator } from './SelectSeparator';\nimport { SelectTrigger } from './SelectTrigger';\n\nexport type SelectItem = {\n value: string;\n label: ReactNode;\n icon?: ReactNode;\n disabled?: boolean;\n};\n\nexport type SelectItemGroup = {\n label?: ReactNode;\n items: readonly SelectItem[];\n};\n\nconst isGroup = (itemOrGroup: SelectItem | SelectItemGroup): itemOrGroup is SelectItemGroup =>\n 'items' in itemOrGroup;\n\ntype TriggerProps = ComponentProps<typeof SelectTrigger>;\n\ntype Props = Pick<\n SelectRootProps,\n | 'value'\n | 'defaultValue'\n | 'onValueChange'\n | 'disabled'\n | 'name'\n | 'required'\n | 'open'\n | 'defaultOpen'\n | 'onOpenChange'\n | 'dir'\n | 'autoComplete'\n | 'form'\n> &\n Pick<\n TriggerProps,\n | 'variant'\n | 'state'\n | 'sizing'\n | 'placeholder'\n | 'id'\n | 'className'\n | 'onBlur'\n | 'aria-describedby'\n | 'aria-invalid'\n | 'aria-required'\n > & {\n items?: readonly (SelectItem | SelectItemGroup)[];\n };\n\n/**\n * Single selection from a short enumerated list. Built on Radix Select.\n *\n * **When to use:** picking one value from ~10 or fewer options where search adds no value (status,\n * region, role). Pass a flat `items` array or grouped arrays with optional labels for headings.\n * **When NOT to use:** for longer lists with search use `Combobox`; for multi-select use `MultiCombobox`.\n * **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` + `field.SelectField`\n * for forms with validation. Use the compound parts (`Select.Root`, `Select.Trigger`, `Select.Content`,\n * `Select.Item`) for custom item layouts; the top-level `Select` covers the common cases.\n */\nexport const Select = ({\n // root\n value,\n defaultValue,\n onValueChange,\n disabled,\n name,\n required,\n open,\n defaultOpen,\n onOpenChange,\n dir,\n autoComplete,\n form,\n // trigger\n variant,\n state,\n sizing,\n placeholder,\n id,\n className,\n onBlur,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n // items\n items = [],\n}: Props) => {\n const groupKeyId = useId();\n\n const renderItem = (item: SelectItem) => (\n <SelectItemComponent\n key={item.value}\n value={item.value}\n icon={item.icon}\n disabled={item.disabled}\n >\n {item.label}\n </SelectItemComponent>\n );\n\n return (\n <SelectRoot\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n disabled={disabled}\n name={name}\n required={required}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n dir={dir}\n autoComplete={autoComplete}\n form={form}\n >\n <SelectTrigger\n variant={variant}\n state={state}\n sizing={sizing}\n placeholder={placeholder}\n id={id}\n className={className}\n onBlur={onBlur}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n aria-required={ariaRequired}\n />\n <SelectContent>\n {items.map((itemOrGroup, index) => {\n if (isGroup(itemOrGroup)) {\n return (\n <SelectGroup key={`${groupKeyId}-group-${index}`}>\n {itemOrGroup.label && <SelectLabel>{itemOrGroup.label}</SelectLabel>}\n {itemOrGroup.items.map(renderItem)}\n </SelectGroup>\n );\n }\n\n return renderItem(itemOrGroup);\n })}\n </SelectContent>\n </SelectRoot>\n );\n};\n\nSelect.Root = SelectRoot;\nSelect.Trigger = SelectTrigger;\nSelect.Content = SelectContent;\nSelect.Item = SelectItemComponent;\nSelect.Group = SelectGroup;\nSelect.Label = SelectLabel;\nSelect.Separator = SelectSeparator;\n"],"mappings":";;;;;;;;;;AAOA,MAAM,qBAAqB,GACzB,WACA,mBACA,qBACA,iBACA,UACA,8CACF;;;;;;AAgBA,MAAa,iBAAiB,EAC5B,KACA,WACA,UACA,WACA,WAAW,UACX,aAAa,GACb,GAAG,YACQ;CACX,MAAM,mBAA4B,cAAc,IAAI,SAAS;CAC7D,OACE,oBAAC,gBAAgB,QAAjB;EAAmC;EACjC,UAAA,qBAAC,gBAAgB,SAAjB;GACE,GAAI;GACC;GACK;GACE;GACZ,gBAAc;GACd,WAAW,GACT,yBACA,2BAEA,eAGA,uBACA,UACA,iCACA,sBACA,uDAGA,2DACA,gDAGA,iBACA,8BACA,gBACA,aACA,yBACA,iBACA,qCAGA,mCACA,kCACA,mCAGA,sCACA,qCACA,sCAGA,6CACA,6CACA,6CACA,6CACA,SACF;GAhDF,UAAA;IAkDE,oBAAC,gBAAgB,gBAAjB;KAAgC,WAAW;KACzC,UAAA,oBAAC,WAAD,CAAY,CAAA;IACkB,CAAA;IAEhC,oBAAC,gBAAgB,UAAjB;KACE,WAAW,GAAG,EACZ,oGACE,aAAa,SACjB,CAAC;KAEA;IACuB,CAAA;IAE1B,oBAAC,gBAAgB,kBAAjB;KAAkC,WAAW;KAC3C,UAAA,oBAAC,aAAD,CAAc,CAAA;IACkB,CAAA;GACX;;CACH,CAAA;AAE5B;;;ACxGA,MAAa,eAAe,EAAE,WAAW,GAAG,YAC1C,oBAAC,gBAAgB,OAAjB;CAAuB,GAAI;CAAO,WAAW,GAAG,kCAAkC,SAAS;AAAI,CAAA;;;ACEjG,MAAa,cAAc,EAAE,KAAK,WAAW,UAAU,MAAM,GAAG,YAC9D,qBAAC,gBAAgB,MAAjB;CACE,GAAI;CACC;CACL,WAAW,GACT,wBAGA,eACA,WACA,aACA,mBACA,YAGA,WACA,WACA,uDACA,iBACA,+DAGA,cACA,kBACA,qBACA,qBAGA,2BACA,mCACA,oFACA,gDACA,qFAGA,0CACA,iCAGA,kCACA,uBACA,oCACA,8CACA,SACF;CA3CF,UAAA;EA6CG;EACD,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,gBAAgB,UAAjB,EAA2B,SAAmC,CAAA;EAC1D,CAAA;EACN,oBAAC,gBAAgB,eAAjB;GAA+B,WAAU;GACvC,UAAA,oBAAC,OAAD,EAAO,WAAU,YAAa,CAAA;EACD,CAAA;CACX;;;;ACxDxB,MAAa,eAAe,EAAE,WAAW,GAAG,YAC1C,oBAAC,gBAAgB,OAAjB;CACE,GAAI;CACJ,WAAW,GAET,WACA,aACA,cACA,kBACA,mBACA,4BAGA,4DACA,gEACA,iEACA,8DACA,6DACA,uDACA,uDAEA,SACF;AACD,CAAA;;;ACJH,MAAa,cAAc,UAA2B,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;ACnBxE,MAAa,mBAAmB,EAAE,WAAW,GAAG,YAC9C,oBAAC,gBAAgB,WAAjB;CACE,GAAI;CACJ,WAAW,GAAG,wCAAwC,SAAS;AAChE,CAAA;;;ACIH,MAAa,iBAAiB,EAC5B,KACA,WACA,SACA,OACA,QACA,aACA,GAAG,YACQ;CACX,MAAM,eAAe,cAAc;CACnC,MAAM,0BAA0B;EAC9B,IAAI,YAAY,UAAU,OAAO;EACjC,IAAI,cAAc,OAAO;EACzB,OAAO;CACT,EAAA,CAAG;CAGH,IAFwB,qBAAqB,UAG3C,OACE,oBAAC,gBAAgB,SAAjB;EAAyB,GAAI;EAAY;EAAK,WAAW,GAAG,SAAS;EAAG,SAAA;EACtE,UAAA,qBAAC,QAAD;GAAQ,SAAQ;GAAhB,UAAA,CACE,oBAAC,gBAAgB,OAAjB,EAAoC,YAAc,CAAA,GAClD,oBAAC,gBAAgB,MAAjB;IAAsB,SAAA;IACpB,UAAA,oBAAC,aAAD,CAAc,CAAA;GACM,CAAA,CAChB;;CACe,CAAA;CAG7B,OACE,qBAAC,gBAAgB,SAAjB;EACE,GAAI;EACC;EACL,WAAW,GACT,uBAAuB;GAAE,SAAS;GAAkB;GAAO;EAAO,CAAC,GACnE,SACF;EANF,UAAA,CAQE,oBAAC,gBAAgB,OAAjB,EAAoC,YAAc,CAAA,GAClD,oBAAC,gBAAgB,MAAjB;GAAsB,SAAA;GACpB,UAAA,oBAAC,aAAD,EAAa,WAAU,qCAAsC,CAAA;EACzC,CAAA,CACC;;AAE7B;;;ACpCA,MAAM,WAAW,gBACf,WAAW;;;;;;;;;;;AA6Cb,MAAa,UAAU,EAErB,OACA,cACA,eACA,UACA,MACA,UACA,MACA,aACA,cACA,KACA,cACA,MAEA,SACA,OACA,QACA,aACA,IACA,WACA,QACA,oBAAoB,iBACpB,gBAAgB,aAChB,iBAAiB,cAEjB,QAAQ,CAAC,QACE;CACX,MAAM,aAAa,MAAM;CAEzB,MAAM,cAAc,SAClB,oBAACA,YAAD;EAEE,OAAO,KAAK;EACZ,MAAM,KAAK;EACX,UAAU,KAAK;EAEd,UAAA,KAAK;CACa,GANd,KAAK,KAMS;CAGvB,OACE,qBAAC,YAAD;EACS;EACO;EACC;EACL;EACJ;EACI;EACJ;EACO;EACC;EACT;EACS;EACR;EAZR,UAAA,CAcE,oBAAC,eAAD;GACW;GACF;GACC;GACK;GACT;GACO;GACH;GACR,oBAAkB;GAClB,gBAAc;GACd,iBAAe;EAChB,CAAA,GACD,oBAAC,eAAD,EAAA,UACG,MAAM,KAAK,aAAa,UAAU;GACjC,IAAI,QAAQ,WAAW,GACrB,OACE,qBAAC,aAAD,EAAA,UAAA,CACG,YAAY,SAAS,oBAAC,aAAD,EAAA,UAAc,YAAY,MAAmB,CAAA,GAClE,YAAY,MAAM,IAAI,UAAU,CACtB,EAAA,GAHK,GAAG,WAAW,SAAS,OAG5B;GAIjB,OAAO,WAAW,WAAW;EAC/B,CAAC,EACY,CAAA,CACL;;AAEhB;AAEA,OAAO,OAAO;AACd,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,OAAOA;AACd,OAAO,QAAQ;AACf,OAAO,QAAQ;AACf,OAAO,YAAY"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider-QncUrfJn.js","names":[],"sources":["../src/components/ThemeProvider/AIGradientSvg.tsx","../src/components/ThemeProvider/useThemeTokens.ts","../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["export const AIGradientsSvg = () => (\n <svg width=\"0\" height=\"0\" style={{ position: 'absolute', visibility: 'hidden' }}>\n <defs>\n {/*aigradient-600*/}\n <linearGradient id=\"aigradient-600\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"#61E4FF\" />\n <stop offset=\"50%\" stopColor=\"#1F8FFF\" />\n <stop offset=\"100%\" stopColor=\"#7C5CFF\" />\n </linearGradient>\n\n {/*aigradient-700*/}\n <linearGradient id=\"aigradient-700\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" stopColor=\"#075fb8\" />\n <stop offset=\"100%\" stopColor=\"#5b2cb8\" />\n </linearGradient>\n </defs>\n </svg>\n);\n","import { useInsertionEffect } from 'react';\n\nimport type {\n BrandTheme,\n Colors,\n Gradient,\n Motion,\n Radii,\n Shadows,\n Spacing,\n Typography,\n} from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createCssVars } from './utils';\n\nexport type ThemeTokens = {\n colors?: Colors;\n typography?: Typography;\n radii?: Radii;\n shadows?: Shadows;\n spacing?: Spacing;\n motion?: Motion;\n gradient?: Gradient;\n};\n\nexport const brandThemeToTokens = (\n theme: BrandTheme,\n scheme: ResolvedColorScheme,\n): ThemeTokens => ({\n colors: scheme === 'dark' ? theme.colorsDark : theme.colors,\n typography: theme.typography,\n radii: theme.radii,\n // Scheme-independent — the same values apply in light and dark.\n shadows: theme.shadows,\n spacing: theme.spacing,\n motion: theme.motion,\n gradient: theme.gradient,\n});\n\nexport const tokensToCssVars = ({\n colors,\n typography,\n radii,\n shadows,\n spacing,\n motion,\n gradient,\n}: ThemeTokens): Record<string, string> => {\n const vars = createCssVars();\n\n vars.set('--background', colors?.background);\n vars.set('--foreground', colors?.foreground);\n vars.set('--muted', colors?.muted);\n vars.set('--muted-foreground', colors?.mutedForeground);\n vars.set('--border', colors?.border);\n vars.set('--input', colors?.input);\n vars.set('--input-background', colors?.inputBackground);\n vars.set('--ring', colors?.ring);\n vars.set('--ring-offset', colors?.ringOffset);\n vars.set('--primary', colors?.primary);\n vars.set('--primary-foreground', colors?.primaryForeground);\n vars.set('--secondary', colors?.secondary);\n vars.set('--secondary-foreground', colors?.secondaryForeground);\n vars.set('--accent', colors?.accent);\n vars.set('--accent-foreground', colors?.accentForeground);\n vars.set('--card', colors?.card);\n vars.set('--card-foreground', colors?.cardForeground);\n vars.set('--popover', colors?.popover);\n vars.set('--popover-foreground', colors?.popoverForeground);\n vars.set('--destructive', colors?.destructive);\n vars.set('--destructive-foreground', colors?.destructiveForeground);\n vars.set('--success', colors?.success);\n vars.set('--success-foreground', colors?.successForeground);\n vars.set('--warning', colors?.warning);\n vars.set('--warning-foreground', colors?.warningForeground);\n vars.set('--info', colors?.info);\n vars.set('--info-foreground', colors?.infoForeground);\n\n vars.set('--chart-1', colors?.chart?.chart1);\n vars.set('--chart-2', colors?.chart?.chart2);\n vars.set('--chart-3', colors?.chart?.chart3);\n vars.set('--chart-4', colors?.chart?.chart4);\n vars.set('--chart-5', colors?.chart?.chart5);\n\n vars.set('--sidebar', colors?.sidebar?.sidebar);\n vars.set('--sidebar-foreground', colors?.sidebar?.sidebarForeground);\n vars.set('--sidebar-primary', colors?.sidebar?.sidebarPrimary);\n vars.set('--sidebar-primary-foreground', colors?.sidebar?.sidebarPrimaryForeground);\n vars.set('--sidebar-accent', colors?.sidebar?.sidebarAccent);\n vars.set('--sidebar-accent-foreground', colors?.sidebar?.sidebarAccentForeground);\n vars.set('--sidebar-border', colors?.sidebar?.sidebarBorder);\n vars.set('--sidebar-ring', colors?.sidebar?.sidebarRing);\n\n /**\n * TYPOGRAPHY\n */\n vars.set('--font-sans', typography?.fontFamily?.trim() || undefined);\n vars.set('--font-display', typography?.fontDisplay?.trim() || undefined);\n vars.set('--font-mono', typography?.fontMono?.trim() || undefined);\n\n // Chrome font-weight slots — read by Tailwind's `fontWeight` scale.\n vars.set('--font-weight-normal', typography?.weight?.normal);\n vars.set('--font-weight-medium', typography?.weight?.medium);\n vars.set('--font-weight-semibold', typography?.weight?.semibold);\n vars.set('--font-weight-bold', typography?.weight?.bold);\n\n // Chrome tracking — behind Button/Badge `tracking-chrome`.\n vars.set('--letter-spacing-chrome', typography?.letterSpacing?.chrome);\n\n // Type scale — display/heading/body steps read by `text-display/heading/body`.\n vars.set('--type-display-size', typography?.typeScale?.display?.size);\n vars.set('--type-display-weight', typography?.typeScale?.display?.weight);\n vars.set('--type-display-leading', typography?.typeScale?.display?.leading);\n vars.set('--type-display-tracking', typography?.typeScale?.display?.tracking);\n vars.set('--type-heading-size', typography?.typeScale?.heading?.size);\n vars.set('--type-heading-weight', typography?.typeScale?.heading?.weight);\n vars.set('--type-heading-leading', typography?.typeScale?.heading?.leading);\n vars.set('--type-heading-tracking', typography?.typeScale?.heading?.tracking);\n vars.set('--type-body-size', typography?.typeScale?.body?.size);\n vars.set('--type-body-weight', typography?.typeScale?.body?.weight);\n vars.set('--type-body-leading', typography?.typeScale?.body?.leading);\n vars.set('--type-body-tracking', typography?.typeScale?.body?.tracking);\n\n vars.set('--radius-sm', radii?.sm);\n vars.set('--radius-md', radii?.md);\n vars.set('--radius-lg', radii?.lg);\n\n /**\n * ELEVATION / DENSITY / MOTION / GRADIENT\n */\n vars.set('--shadow-sm', shadows?.sm);\n vars.set('--shadow-md', shadows?.md);\n vars.set('--shadow-lg', shadows?.lg);\n vars.set('--shadow-lift', shadows?.lift);\n\n vars.set('--space-gutter', spacing?.gutter);\n vars.set('--space-inset', spacing?.inset);\n\n vars.set('--motion-duration', motion?.duration);\n vars.set('--motion-easing', motion?.easing);\n\n vars.set('--gradient-brand', gradient?.brand);\n\n return vars.expose();\n};\n\nconst setTokens = (node: HTMLElement, vars: Record<string, string>) => {\n for (const [name, value] of Object.entries(vars)) {\n node.style.setProperty(name, value);\n }\n};\n\nconst removeTokens = (node: HTMLElement, vars: Record<string, string>) => {\n for (const name of Object.keys(vars)) {\n node.style.removeProperty(name);\n }\n};\n\nexport const useThemeTokens = (tokens: ThemeTokens) => {\n // Insertion effect: runs before the DOM mutates and before any (descendant)\n // layout effect measures token-dependent geometry. Write-only, so it fits the\n // hook's constraints. Only the brand's overrides are set; unset slots fall\n // through to the stylesheet's `:root` / `[data-theme='dark']` defaults.\n useInsertionEffect(() => {\n if (typeof document === 'undefined') return;\n const root = document.documentElement;\n const vars = tokensToCssVars(tokens);\n\n setTokens(root, vars);\n\n return () => removeTokens(root, vars);\n }, [tokens]);\n};\n","import { type ReactNode, useMemo } from 'react';\n\nimport type { Brand } from '@keboola/brand-registry';\n\nimport { TooltipProvider } from '../Tooltip';\n\nimport { AIGradientsSvg } from './AIGradientSvg';\nimport { ThemeContext, type ThemeContextValue } from './context';\nimport { DEFAULT_BRANDS, defaultBrand } from './defaults';\nimport { type UseBrandOptions, useBrandState } from './useBrandState';\nimport { type UseColorSchemeOptions, useColorSchemeState } from './useColorSchemeState';\nimport { brandThemeToTokens, useThemeTokens } from './useThemeTokens';\nimport { createTheme } from './utils';\n\ntype Props = UseColorSchemeOptions &\n UseBrandOptions & {\n /** Brands this provider knows about; the active brand id resolves against these. */\n brands?: readonly Brand[];\n children: ReactNode;\n };\n\nexport const ThemeProvider = ({\n defaultScheme,\n scheme,\n onSchemeChange,\n defaultBrandId,\n brandId,\n onBrandIdChange,\n brands = DEFAULT_BRANDS,\n children,\n}: Props) => {\n const colorSchemeState = useColorSchemeState({\n defaultScheme,\n scheme,\n onSchemeChange,\n });\n\n const brandState = useBrandState({\n defaultBrandId,\n brandId,\n onBrandIdChange,\n });\n\n // Resolve the active brand; an unknown id (incl. the default sentinel) falls\n // back to `defaultBrand`, whose empty theme injects nothing so the stylesheet\n // defaults apply.\n const brand = useMemo(\n () => brands.find((item) => item.id === brandState.brandId) ?? defaultBrand,\n [brands, brandState.brandId],\n );\n const themes = useMemo(() => brands.map(createTheme), [brands]);\n const currentTheme = useMemo(() => createTheme(brand), [brand]);\n\n // Only the brand's overrides for the resolved scheme are injected; every slot\n // it omits (including a missing dark palette) falls through to the stylesheet's\n // `:root` / `[data-theme='dark']` defaults — so dark mode works for any brand.\n const themeTokens = useMemo(\n () => brandThemeToTokens(brand.theme, colorSchemeState.resolvedScheme),\n [brand, colorSchemeState.resolvedScheme],\n );\n\n useThemeTokens(themeTokens);\n\n const { scheme: activeScheme, resolvedScheme, setScheme } = colorSchemeState;\n const { brandId: activeBrandId, setBrand } = brandState;\n const context = useMemo<ThemeContextValue>(\n () => ({\n scheme: activeScheme,\n resolvedScheme,\n setScheme,\n brandId: activeBrandId,\n setBrand,\n themes,\n currentTheme,\n }),\n [activeScheme, resolvedScheme, setScheme, activeBrandId, setBrand, themes, currentTheme],\n );\n\n return (\n <ThemeContext value={context}>\n <AIGradientsSvg />\n <TooltipProvider>{children}</TooltipProvider>\n </ThemeContext>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context-KxxeMHbR.js","names":[],"sources":["../src/components/ThemeProvider/utils.ts","../src/components/ThemeProvider/defaults.ts","../src/components/ThemeProvider/context.tsx"],"sourcesContent":["import type { Brand } from '@keboola/brand-registry';\n\nimport type { Theme } from './types';\n\nexport const createTheme = (brand: Brand): Theme => ({\n id: brand.id,\n name: brand.name,\n shell: brand.shell,\n logo: brand.logo,\n});\n\nexport type CssVars = {\n set: (name: string, value: string | undefined) => void;\n expose: () => Record<string, string>;\n};\n\nexport const createCssVars = (): CssVars => {\n const vars: Record<string, string> = {};\n return {\n set: (name, value) => {\n if (value !== undefined) vars[name] = value;\n },\n expose: () => ({ ...vars }),\n };\n};\n","import type { Brand } from '@keboola/brand-registry';\nimport { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';\n\nimport type { ResolvedColorScheme } from './types';\nimport { createTheme } from './utils';\n\nexport const keboolaLegacyIds = [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];\nexport const DEFAULT_COLOR_SCHEME: ResolvedColorScheme = 'light';\n\n// Sentinel active-brand id that maps to no registry brand. It resolves to\n// `defaultBrand` below, whose empty theme injects nothing — so the design-system\n// stylesheet defaults (`:root` / `[data-theme='dark']`) provide every token.\nexport const DEFAULT_BRAND_ID = 'design-system';\n\n// The \"no brand\" fallback: an empty theme → no CSS vars injected → the\n// stylesheet defaults win. Its shell/name still drive AppShell + switcher label.\nexport const defaultBrand: Brand = {\n id: DEFAULT_BRAND_ID,\n name: 'Design System',\n shell: 'sidebar',\n theme: {},\n};\nexport const defaultTheme = createTheme(defaultBrand);\n\nexport const DEFAULT_BRANDS: Brand[] = [];\n","import { createContext, use } from 'react';\n\nimport { DEFAULT_COLOR_SCHEME, defaultTheme } from './defaults';\nimport type { Theme } from './types';\nimport type { useBrandState } from './useBrandState';\nimport type { useColorSchemeState } from './useColorSchemeState';\n\nexport type ThemeContextValue = ReturnType<typeof useColorSchemeState> &\n ReturnType<typeof useBrandState> & {\n themes: Theme[];\n currentTheme: Theme;\n };\n\nconst noop = () => void 0;\n\nconst defaultContext: ThemeContextValue = {\n scheme: DEFAULT_COLOR_SCHEME,\n resolvedScheme: DEFAULT_COLOR_SCHEME,\n setScheme: noop,\n brandId: defaultTheme.id,\n setBrand: noop,\n\n themes: [defaultTheme],\n currentTheme: defaultTheme,\n};\n\nexport const ThemeContext = createContext(defaultContext);\n\nexport const useTheme = () => use(ThemeContext);\n\n/**\n * TEMPORARY — kbc-ui-internal only.\n *\n * Flags whether the subtree renders the argo design language. Defaults to argo\n * (`true`) — the modern default; legacy chrome is the exception. It exists\n * solely to bridge kbc-ui while its chrome is migrated off the legacy design\n * language: kbc-ui provides `false` for legacy brands/surfaces (see its\n * `AppThemeProvider`) and reads it via `useArgoDesign`. `ThemeProvider` does\n * not set it — argo is decoupled from the brand. Once every kbc-ui surface has\n * been migrated, this context and its hook can be deleted.\n */\nexport const ArgoDesignContext = createContext<boolean>(true);\n\nexport const useArgoDesign = () => use(ArgoDesignContext);\n"],"mappings":";;;AAIA,MAAa,eAAe,WAAyB;CACnD,IAAI,MAAM;CACV,MAAM,MAAM;CACZ,OAAO,MAAM;CACb,MAAM,MAAM;AACd;AAOA,MAAa,sBAA+B;CAC1C,MAAM,OAA+B,CAAC;CACtC,OAAO;EACL,MAAM,MAAM,UAAU;GACpB,IAAI,UAAU,KAAA,GAAW,KAAK,QAAQ;EACxC;EACA,eAAe,EAAE,GAAG,KAAK;CAC3B;AACF;;;AClBA,MAAa,mBAAmB,CAAC,qBAAqB,IAAI,oBAAoB,EAAE;AAChF,MAAa,uBAA4C;AAKzD,MAAa,mBAAmB;AAIhC,MAAa,eAAsB;CACjC,IAAI;CACJ,MAAM;CACN,OAAO;CACP,OAAO,CAAC;AACV;AACA,MAAa,eAAe,YAAY,YAAY;AAEpD,MAAa,iBAA0B,CAAC;;;ACXxC,MAAM,aAAa,KAAK;AAExB,MAAM,iBAAoC;CACxC,QAAQ;CACR,gBAAgB;CAChB,WAAW;CACX,SAAS,aAAa;CACtB,UAAU;CAEV,QAAQ,CAAC,YAAY;CACrB,cAAc;AAChB;AAEA,MAAa,eAAe,cAAc,cAAc;AAExD,MAAa,iBAAiB,IAAI,YAAY;;;;;;;;;;;;AAa9C,MAAa,oBAAoB,cAAuB,IAAI;AAE5D,MAAa,sBAAsB,IAAI,iBAAiB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"escapeStringRegexp-8MxP2knR.js","names":[],"sources":["../src/utils/escapeStringRegexp.ts"],"sourcesContent":["// Escape characters with special meaning either inside or outside character sets.\n// Use a simple backslash escape when it's always valid, and a `\\xnn` escape when the simpler form would be disallowed by Unicode patterns' stricter grammar.\nexport const escapeStringRegexp = (string: string) =>\n string.replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&').replace(/-/g, '\\\\x2d');\n"],"mappings":";AAEA,MAAa,sBAAsB,WACjC,OAAO,QAAQ,uBAAuB,MAAM,CAAC,CAAC,QAAQ,MAAM,OAAO"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles-DSUP_-9Z.js","names":[],"sources":["../src/components/OverlayTrigger/styles.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\n/**\n * Chrome for a control that looks like an input but opens an overlay on click. Shared by\n * `SelectTrigger` and `DateRangePicker`'s trigger so both sit at the same height and colour when\n * they stand next to each other in a filter row.\n */\nexport const overlayTriggerVariants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group',\n 'tw:box-border',\n\n // layout\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-between',\n 'tw:gap-2',\n 'tw:w-full',\n 'tw:text-left',\n\n // base appearance\n 'tw:rounded',\n 'tw:border',\n 'tw:border-solid',\n 'tw:border-neutral-200',\n 'tw:text-neutral-800',\n // Scoped transition (no `outline`) — prevents the UA focus-outline color\n // from interpolating through its dark default during state changes.\n 'tw:transition-[color,background-color,border-color,box-shadow]',\n\n // focus base — ring width here, color comes from state variant\n 'tw:!outline-hidden',\n 'tw:focus:ring-4',\n 'tw:data-[state=open]:ring-4',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n 'tw:aria-disabled:cursor-not-allowed',\n\n // placeholder (Radix sets data-placeholder on the trigger when no value)\n 'tw:data-[placeholder]:text-muted-foreground',\n\n // child svg defaults\n 'tw:[&_svg]:shrink-0',\n 'tw:[&_svg]:pointer-events-none',\n ],\n {\n defaultVariants: {\n variant: 'primary',\n state: 'default',\n sizing: 'medium',\n },\n compoundVariants: [\n {\n variant: 'secondary',\n state: 'error',\n className: ['tw:bg-error-100'],\n },\n {\n variant: 'secondary',\n state: 'warning',\n className: ['tw:bg-warning-100'],\n },\n // --- argo ---\n {\n variant: 'argo',\n state: 'default',\n className: [\n 'tw:focus:border-primary',\n 'tw:focus:ring-ring/50',\n 'tw:data-[state=open]:border-primary',\n 'tw:data-[state=open]:ring-ring/50',\n ],\n },\n {\n variant: 'argo',\n state: 'error',\n className: [\n 'tw:border-destructive',\n 'tw:focus:border-destructive',\n 'tw:focus:ring-destructive/20',\n 'tw:data-[state=open]:border-destructive',\n 'tw:data-[state=open]:ring-destructive/20',\n ],\n },\n ],\n variants: {\n variant: {\n primary: [\n 'tw:bg-white',\n 'tw:disabled:opacity-40',\n 'tw:aria-disabled:opacity-40',\n // aria-invalid on the trigger surfaces the error chrome without a `state` prop — the\n // accessible path (mirrors the `state=\"error\"` legacy tokens). The extra attribute\n // selector outranks the default focus/open state, so it wins without `!important`.\n 'tw:aria-[invalid=true]:border-error-500',\n 'tw:aria-[invalid=true]:focus:border-error-500',\n 'tw:aria-[invalid=true]:focus:ring-error-200',\n 'tw:aria-[invalid=true]:data-[state=open]:border-error-500',\n 'tw:aria-[invalid=true]:data-[state=open]:ring-error-200',\n ],\n secondary: [\n 'tw:bg-neutral-100',\n 'tw:border-neutral-100',\n 'tw:disabled:opacity-40',\n 'tw:aria-disabled:opacity-40',\n 'tw:aria-[invalid=true]:border-error-500',\n 'tw:aria-[invalid=true]:focus:border-error-500',\n 'tw:aria-[invalid=true]:focus:ring-error-200',\n 'tw:aria-[invalid=true]:data-[state=open]:border-error-500',\n 'tw:aria-[invalid=true]:data-[state=open]:ring-error-200',\n ],\n argo: [\n // muted filled input surface — gray, distinct from white containers; not the app-background token\n 'tw:bg-muted',\n 'tw:border-input',\n // token-driven radius so the trigger tracks --radius-lg like sibling inputs (InputGroup/Combobox/Button)\n 'tw:rounded-[var(--radius-lg,0.25rem)]',\n 'tw:text-foreground',\n 'tw:disabled:opacity-50',\n 'tw:aria-disabled:opacity-50',\n // aria-invalid on the trigger surfaces the error chrome without a `state` prop — the\n // accessible path (uses the themeable `destructive` status token).\n 'tw:aria-[invalid=true]:border-destructive',\n 'tw:aria-[invalid=true]:focus:border-destructive',\n 'tw:aria-[invalid=true]:focus:ring-destructive/20',\n 'tw:aria-[invalid=true]:data-[state=open]:border-destructive',\n 'tw:aria-[invalid=true]:data-[state=open]:ring-destructive/20',\n ],\n },\n sizing: {\n // border-inclusive heights: 40 / 36 / 32 px (small matches Button small)\n default: ['tw:px-4', 'tw:py-2.5', 'tw:text-sm/[18px]', 'tw:h-10', 'tw:min-h-10'],\n medium: ['tw:px-4', 'tw:py-2', 'tw:text-sm/[18px]', 'tw:h-9', 'tw:min-h-9'],\n small: ['tw:px-4', 'tw:py-2', 'tw:text-sm/[16px]', 'tw:h-8', 'tw:min-h-8'],\n },\n state: {\n default: [\n 'tw:focus:border-ring',\n 'tw:focus:ring-ring/30',\n 'tw:data-[state=open]:border-ring',\n 'tw:data-[state=open]:ring-ring/30',\n ],\n error: [\n 'tw:border-error-500',\n 'tw:focus:border-error-500',\n 'tw:focus:ring-error-200',\n 'tw:data-[state=open]:border-error-500',\n 'tw:data-[state=open]:ring-error-200',\n ],\n warning: [\n 'tw:border-warning-500',\n 'tw:focus:border-warning-500',\n 'tw:focus:ring-warning-200',\n 'tw:data-[state=open]:border-warning-500',\n 'tw:data-[state=open]:ring-warning-200',\n ],\n },\n },\n },\n);\n"],"mappings":";;;;;;;AAOA,MAAa,yBAAyB,IACpC;CACE;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CAGA;CACA;CACA;CAGA;CACA;CAGA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,SAAS;EACT,OAAO;EACP,QAAQ;CACV;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,OAAO;GACP,WAAW,CAAC,iBAAiB;EAC/B;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW,CAAC,mBAAmB;EACjC;EAEA;GACE,SAAS;GACT,OAAO;GACP,WAAW;IACT;IACA;IACA;IACA;GACF;EACF;EACA;GACE,SAAS;GACT,OAAO;GACP,WAAW;IACT;IACA;IACA;IACA;IACA;GACF;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IAEJ;IACA;IAEA;IACA;IACA;IACA;IAGA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,QAAQ;GAEN,SAAS;IAAC;IAAW;IAAa;IAAqB;IAAW;GAAa;GAC/E,QAAQ;IAAC;IAAW;IAAW;IAAqB;IAAU;GAAY;GAC1E,OAAO;IAAC;IAAW;IAAW;IAAqB;IAAU;GAAY;EAC3E;EACA,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CACF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"toast-CjkURw0M.js","names":["sonnerToast","toast","sonnerToast"],"sources":["../src/components/Toast/ToastAction.tsx","../src/components/Toast/ToastDescription.tsx","../src/components/Toast/ToastDismiss.tsx","../src/components/Toast/ToastDuration.tsx","../src/components/Toast/ToastTitle.tsx","../src/components/Toast/ToastRoot.tsx","../src/components/Toast/toast.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const ToastAction = ({ ref, className, ...rest }: Props) => (\n <button\n {...rest}\n ref={ref}\n data-slot=\"toast-action\"\n type=\"button\"\n className={cn(\n // layout\n 'tw:col-start-3',\n 'tw:row-start-1',\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n // font\n 'tw:text-xs',\n 'tw:font-medium',\n 'tw:text-primary',\n\n // sizing\n 'tw:px-2',\n 'tw:h-6',\n\n // styles\n 'tw:bg-primary-foreground',\n 'tw:rounded',\n className,\n )}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const ToastDescription = ({ ref, className, children, ...rest }: Props) => (\n <div\n ref={ref}\n data-slot=\"toast-description\"\n className={cn(\n 'tw:col-start-2',\n 'tw:font-normal',\n 'tw:break-words',\n 'tw:text-white',\n 'tw:group-data-[variant=default]/toast:text-muted-foreground',\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'button'>;\n\nexport const ToastDismiss = ({ ref, className, ...rest }: Props) => (\n <button\n ref={ref}\n data-slot=\"toast-dismiss\"\n className={cn(\n 'tw:flex',\n 'tw:justify-center',\n 'tw:col-start-4',\n 'tw:row-start-1',\n 'tailwindcss-preflight',\n 'tw:[&_svg]:aspect-square',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n 'tw:[&_svg]:m-1',\n\n 'tw:text-white',\n 'tw:group-data-[variant=default]/toast:[&_svg]:text-popover-foreground',\n 'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:[&_svg]:text-foreground',\n className,\n )}\n type=\"button\"\n {...rest}\n >\n <X />\n <span className=\"tw:sr-only\">Dismiss</span>\n </button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype ToastDurationProps = ComponentProps<'span'> & {\n duration: number;\n};\n\nexport const ToastDuration = ({ ref, duration, className, style, ...rest }: ToastDurationProps) => (\n <span\n {...rest}\n ref={ref}\n className={cn(\n 'tw:bg-white/30',\n 'tw:group-data-[variant=default]/toast:bg-popover-foreground/20',\n 'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:bg-foreground/20',\n 'tw:rounded-bl-lg',\n 'tw:mx-px',\n\n // positioning\n 'tw:absolute',\n 'tw:bottom-0',\n 'tw:left-0',\n\n // sizing\n 'tw:h-1',\n\n // animation\n 'tw:animate-toast-progress',\n 'tw:group-hover/toast:[animation-play-state:paused]',\n className,\n )}\n style={{\n animationDuration: `${duration}ms`,\n ...style,\n }}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const ToastTitle = ({ ref, className, children, ...rest }: Props) => (\n <div\n ref={ref}\n data-slot=\"toast-title\"\n className={cn(\n 'tw:col-start-2',\n 'tw:text-sm',\n 'tw:leading-6',\n 'tw:min-h-6',\n 'tw:self-center',\n 'tw:text-white',\n 'tw:group-data-[variant=default]/toast:text-popover-foreground',\n 'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground',\n\n 'tw:break-words',\n 'tw:font-medium',\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n);\n","import type { MouseEventHandler, ReactNode } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\nimport { type Action, toast as sonnerToast } from 'sonner';\n\nimport { AlertCircle, AlertTriangle, CircleCheck, Info, Loader2 } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { ToastAction } from './ToastAction';\nimport { ToastDescription } from './ToastDescription';\nimport { ToastDismiss } from './ToastDismiss';\nimport { ToastDuration } from './ToastDuration';\nimport { ToastTitle } from './ToastTitle';\n\nconst variants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/toast',\n 'tw:relative',\n\n // layout\n 'tw:grid',\n 'tw:grid-cols-[0_1fr_auto_auto]',\n 'tw:items-start',\n 'tw:has-[[data-slot=toast-description]]:grid-rows-[auto_auto]',\n 'tw:has-[[data-slot=toast-icon]]:grid-cols-[auto_1fr_auto_auto]',\n 'tw:[&_[data-slot=toast-icon]]:mr-2',\n 'tw:[&_[data-slot=toast-title]]:mr-2.5',\n 'tw:[&_[data-slot=toast-description]]:mr-2.5',\n 'tw:[&_[data-slot=toast-action]]:mr-2',\n 'tw:[&_[data-slot=toast-description]]:col-end-3',\n 'tw:gap-y-0',\n\n // styles\n 'tw:p-4',\n 'tw:rounded-lg',\n 'tw:shadow-md',\n ],\n {\n defaultVariants: {\n variant: 'info',\n },\n variants: {\n variant: {\n default: 'tw:border tw:border-border tw:bg-popover',\n error: 'tw:bg-error-550',\n info: 'tw:bg-blue-600',\n success: 'tw:bg-green-700',\n warning: 'tw:bg-warning-550',\n },\n },\n },\n);\n\ntype Variants = VariantProps<typeof variants>;\ntype Variant = NonNullable<Variants['variant']>;\ntype VariantIcon = Exclude<Variant, 'default'>;\n\ntype Props = {\n id: string | number;\n title: ReactNode;\n icon?: ReactNode;\n description?: ReactNode;\n action?: Action;\n loading?: boolean;\n duration?: number;\n // offset?: number;\n} & Variants;\n\nconst DEFAULT_VARIANT_ICON: Record<VariantIcon, ReactNode> = {\n error: <AlertTriangle />,\n info: <Info />,\n success: <CircleCheck />,\n warning: <AlertCircle />,\n};\n\nexport const ToastRoot = ({\n id,\n title,\n description,\n action,\n duration = Infinity,\n variant = 'info',\n loading = false,\n icon: iconProp,\n}: Props) => {\n const renderArgo = useArgoDesign();\n\n const icon: ReactNode = (() => {\n if (loading) return <Loader2 className=\"tw:animate-spin\" />;\n if (iconProp) return iconProp;\n if (variant === 'default' || variant === null) return null;\n return DEFAULT_VARIANT_ICON[variant];\n })();\n\n const handleActionClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n sonnerToast.dismiss(id);\n action?.onClick(event);\n };\n\n return (\n <div\n data-variant={variant}\n data-argo={renderArgo}\n className={cn(\n variants({ variant }),\n 'tw:data-[variant=default]:data-[argo=true]:bg-background',\n )}\n >\n {icon && (\n <span\n data-slot=\"toast-icon\"\n className={cn(\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:self-center',\n 'tw:aspect-square',\n 'tw:size-5',\n 'tw:shrink-0',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n 'tw:text-white',\n 'tw:group-data-[variant=default]/toast:text-popover-foreground',\n 'tw:group-data-[variant=default]/toast:group-data-[argo=true]/toast:text-foreground',\n )}\n >\n {icon}\n </span>\n )}\n\n <ToastTitle>{title}</ToastTitle>\n {description && <ToastDescription>{description}</ToastDescription>}\n {action && (\n <ToastAction style={action?.actionButtonStyle} onClick={handleActionClick}>\n {action.label}\n </ToastAction>\n )}\n <ToastDismiss onClick={() => sonnerToast.dismiss(id)} />\n {duration !== Infinity && <ToastDuration duration={duration} />}\n </div>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { type ExternalToast, toast as sonnerToast } from 'sonner';\n\nimport { cn } from '../../utils';\n\nimport { ToastRoot } from './ToastRoot';\n\ntype ToastProps = ComponentProps<typeof ToastRoot>;\ntype Title = ToastProps['title'] | ((opts: { dismiss: () => void }) => ReactNode);\n\nexport type ToastOptions = { id?: string | number; title: Title } & Omit<\n ToastProps,\n 'id' | 'title'\n> &\n Pick<\n ExternalToast,\n 'onAutoClose' | 'onDismiss' | 'testId' | 'toasterId' | 'dismissible' | 'position'\n >;\ntype DerivedToastOptions = Omit<ToastOptions, 'title' | 'variant'>;\n\nexport const toast = ({\n onAutoClose,\n onDismiss,\n testId,\n toasterId,\n dismissible = true,\n position,\n title: titleProp,\n ...toast\n}: ToastOptions) => {\n const duration = (() => {\n if (typeof toast.duration === 'number') return toast.duration;\n if (toast.variant === 'error' || toast.variant === 'warning') return Infinity;\n return toast.duration ?? 5000;\n })();\n\n const renderCustomToast: Parameters<typeof sonnerToast.custom>[0] = (id) => {\n const title =\n typeof titleProp === 'function'\n ? titleProp({ dismiss: () => sonnerToast.dismiss(id) })\n : titleProp;\n\n return <ToastRoot {...toast} id={id} title={title} duration={duration} />;\n };\n\n return sonnerToast.custom(renderCustomToast, {\n // toast generated by sonner will always have an id, but we want to allow users to specify their own id if they want to\n // can not pass undefined, as it will break dismiss\n ...(toast.id != null ? { id: toast.id } : {}),\n unstyled: true,\n position,\n onAutoClose,\n onDismiss,\n testId,\n toasterId,\n dismissible,\n duration,\n // override default focus-visible styles to match our design\n className: cn('tw:rounded-lg', 'tw:focus-visible:!ring-4', 'tw:focus-visible:!ring-ring/50'),\n });\n};\n\ntoast.success = (title: Title, options?: DerivedToastOptions) =>\n toast({\n ...options,\n title,\n variant: 'success',\n });\n\ntoast.error = (title: Title, options?: DerivedToastOptions) =>\n toast({\n ...options,\n title,\n variant: 'error',\n duration: options?.duration ?? Infinity,\n });\n\ntoast.warning = (title: Title, options?: DerivedToastOptions) =>\n toast({\n ...options,\n title,\n variant: 'warning',\n duration: options?.duration ?? Infinity,\n });\n\ntoast.info = (title: Title, options?: DerivedToastOptions) =>\n toast({\n ...options,\n title,\n variant: 'info',\n });\n\ntoast.dismiss = (toastId?: ToastOptions['id']) => sonnerToast.dismiss(toastId);\ntoast.dismissAll = () => sonnerToast.dismiss();\n"],"mappings":"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"}
|