@keboola/design 11.6.1 → 12.0.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 +50 -9
- package/CHANGELOG.md +241 -0
- package/COMPONENT-API.md +337 -288
- package/README.md +12 -2
- package/dist/{AIKit-CQxVwyAk.js → AIKit-BD4r7ff-.js} +807 -199
- package/dist/AIKit-BD4r7ff-.js.map +1 -0
- package/dist/{Alert-C4Y9IwMI.js → Alert-UI-CIs-1.js} +16 -16
- package/dist/Alert-UI-CIs-1.js.map +1 -0
- package/dist/{AlertModal-BGJdaRRj.js → AlertModal-Th2khjPi.js} +5 -5
- package/dist/AlertModal-Th2khjPi.js.map +1 -0
- package/dist/{AppShell-DRgJxpXW.js → AppShell-WSQabK8r.js} +15 -52
- package/dist/AppShell-WSQabK8r.js.map +1 -0
- package/dist/{AutoSaveTextarea-BeuWuszr.js → AutoSaveTextarea-C5iIr2Ts.js} +2 -2
- package/dist/{AutoSaveTextarea-BeuWuszr.js.map → AutoSaveTextarea-C5iIr2Ts.js.map} +1 -1
- package/dist/{Badge-o5jURtpB.js → Badge-DIjhwPvh.js} +4 -9
- package/dist/Badge-DIjhwPvh.js.map +1 -0
- package/dist/{BrandEditor-CS9P4r2p.js → BrandEditor-BU23Vl8V.js} +7 -7
- package/dist/{BrandEditor-CS9P4r2p.js.map → BrandEditor-BU23Vl8V.js.map} +1 -1
- package/dist/{BrandLogo-CoKBk4MI.js → BrandLogo-CKpVSZb6.js} +4 -4
- package/dist/BrandLogo-CKpVSZb6.js.map +1 -0
- package/dist/{Breadcrumb-D1id7YXd.js → Breadcrumb-p9HtMLCc.js} +8 -14
- package/dist/Breadcrumb-p9HtMLCc.js.map +1 -0
- package/dist/{Button-DsRrU5F1.js → Button-Ca4Q3VJU.js} +31 -13
- package/dist/Button-Ca4Q3VJU.js.map +1 -0
- package/dist/{Calendar-cG5NIJ4O.js → Calendar-DFtmZzbF.js} +99 -99
- package/dist/Calendar-DFtmZzbF.js.map +1 -0
- package/dist/{Card-Dyo7055Q.js → Card-Cr9MBNHu.js} +4 -4
- package/dist/Card-Cr9MBNHu.js.map +1 -0
- package/dist/{Checkbox-Bqr6zXcW.js → Checkbox-8yIIgY7g.js} +4 -4
- package/dist/Checkbox-8yIIgY7g.js.map +1 -0
- package/dist/{Clipboard-C2YBRfD8.js → Clipboard-_xf6hMDD.js} +2 -2
- package/dist/{Clipboard-C2YBRfD8.js.map → Clipboard-_xf6hMDD.js.map} +1 -1
- package/dist/{ClipboardButton-CrljClL1.js → ClipboardButton-DHa1trtI.js} +4 -4
- package/dist/{ClipboardButton-CrljClL1.js.map → ClipboardButton-DHa1trtI.js.map} +1 -1
- package/dist/{CodeEditor-C9AS8Ch0.js → CodeEditor-BSo-oLFG.js} +55 -165
- package/dist/CodeEditor-BSo-oLFG.js.map +1 -0
- package/dist/{ColorInput-Dg87lKcR.js → ColorInput-DSMqrs2-.js} +12 -27
- package/dist/ColorInput-DSMqrs2-.js.map +1 -0
- package/dist/{ColorModeSwitch-CsWLiTBX.js → ColorModeSwitch-D7EuWyJz.js} +7 -17
- package/dist/ColorModeSwitch-D7EuWyJz.js.map +1 -0
- package/dist/Combobox-CxRAYOBt.js +1069 -0
- package/dist/Combobox-CxRAYOBt.js.map +1 -0
- package/dist/{Command-CqxoI_De.js → Command-BU_cVurn.js} +4 -4
- package/dist/{Command-CqxoI_De.js.map → Command-BU_cVurn.js.map} +1 -1
- package/dist/{CopyField-Rx9HPTbJ.js → CopyField-6_c-NdLO.js} +17 -53
- package/dist/{CopyField-Rx9HPTbJ.js.map → CopyField-6_c-NdLO.js.map} +1 -1
- package/dist/{DateInput-DpifECUQ.js → DateInput-DyEErfJf.js} +6 -6
- package/dist/{DateInput-DpifECUQ.js.map → DateInput-DyEErfJf.js.map} +1 -1
- package/dist/{DatePicker-nA8YdE84.js → DatePicker-CtSa9b3V.js} +3 -3
- package/dist/{DatePicker-nA8YdE84.js.map → DatePicker-CtSa9b3V.js.map} +1 -1
- package/dist/{DateRangeInput-9MIw7P6L.js → DateRangeInput-Dg7-VUd9.js} +10 -14
- package/dist/DateRangeInput-Dg7-VUd9.js.map +1 -0
- package/dist/{DateRangePicker-DjSUFjh4.js → DateRangePicker-BoPnh4aH.js} +9 -13
- package/dist/DateRangePicker-BoPnh4aH.js.map +1 -0
- package/dist/DiffView-ppTIzh2h.js.map +1 -1
- package/dist/{DropdownMenu-CASr-jgl.js → DropdownMenu-gRM-A8qU.js} +11 -6
- package/dist/DropdownMenu-gRM-A8qU.js.map +1 -0
- package/dist/{FieldItem-DtPTzNef.js → FieldItem-2wMXQ0Qw.js} +12 -25
- package/dist/FieldItem-2wMXQ0Qw.js.map +1 -0
- package/dist/{FieldItem-vhIJW4pj.d.ts → FieldItem-CPN1xjN5.d.ts} +11 -25
- package/dist/{FileUpload-DYQCTGjU.js → FileUpload-C83tXuE2.js} +11 -16
- package/dist/{FileUpload-DYQCTGjU.js.map → FileUpload-C83tXuE2.js.map} +1 -1
- package/dist/{Form-DAaatlBk.js → Form-95rVLfX8.js} +15 -23
- package/dist/{Form-DAaatlBk.js.map → Form-95rVLfX8.js.map} +1 -1
- package/dist/{FormGroup-Bl8JmnzJ.js → FormGroup-CmNiAtU6.js} +11 -17
- package/dist/FormGroup-CmNiAtU6.js.map +1 -0
- package/dist/{FullScreenModal-CN9nAs72.js → FullScreenModal-CD7mYeTz.js} +15 -29
- package/dist/FullScreenModal-CD7mYeTz.js.map +1 -0
- package/dist/{HoverCard-B9ZMJxjn.js → HoverCard-B8OKu9XZ.js} +2 -2
- package/dist/{HoverCard-B9ZMJxjn.js.map → HoverCard-B8OKu9XZ.js.map} +1 -1
- package/dist/{InputGroup-DcZRlVnN.js → InputGroup-B4QOPxHl.js} +12 -13
- package/dist/InputGroup-B4QOPxHl.js.map +1 -0
- package/dist/{Kbd-D1Azcc4g.js → Kbd-J4n1J6i4.js} +23 -13
- package/dist/Kbd-J4n1J6i4.js.map +1 -0
- package/dist/{MarkedText-DNGEUVWc.js → MarkedText-DlmlJO0u.js} +2 -2
- package/dist/{MarkedText-DNGEUVWc.js.map → MarkedText-DlmlJO0u.js.map} +1 -1
- package/dist/{MermaidDiagram-CujFxVzk.js → MermaidDiagram-BQvz6bhv.js} +16 -34
- package/dist/MermaidDiagram-BQvz6bhv.js.map +1 -0
- package/dist/{Modal-Coj-H02o.js → Modal-Driyqs_N.js} +17 -34
- package/dist/Modal-Driyqs_N.js.map +1 -0
- package/dist/{ModalTitle-C76ke2eo.js → ModalTitle-BxopkIoQ.js} +3 -3
- package/dist/ModalTitle-BxopkIoQ.js.map +1 -0
- package/dist/{MultiActionButtonGroup-CNNoBQbv.js → MultiActionButtonGroup-BPnmzBtw.js} +3 -3
- package/dist/{MultiActionButtonGroup-CNNoBQbv.js.map → MultiActionButtonGroup-BPnmzBtw.js.map} +1 -1
- package/dist/{Navbar-Liy1TPI7.js → Navbar-B_DNpv5s.js} +9 -13
- package/dist/{Navbar-Liy1TPI7.js.map → Navbar-B_DNpv5s.js.map} +1 -1
- package/dist/{OtpInput-CbbymqYs.js → OtpInput-I8B8Vjdl.js} +2 -2
- package/dist/{OtpInput-CbbymqYs.js.map → OtpInput-I8B8Vjdl.js.map} +1 -1
- package/dist/{PageHeader-Q3IpCnQd.js → PageHeader-CgfyXpf1.js} +13 -26
- package/dist/PageHeader-CgfyXpf1.js.map +1 -0
- package/dist/{PageLayout-DSVM-ASz.js → PageLayout-DiAAILuS.js} +12 -20
- package/dist/PageLayout-DiAAILuS.js.map +1 -0
- package/dist/{PageToolbar-BKVJiDAL.js → PageToolbar-DOAtAnfL.js} +12 -42
- package/dist/PageToolbar-DOAtAnfL.js.map +1 -0
- package/dist/{Pagination-C_b7Xhey.js → Pagination-LaSg-5cl.js} +3 -3
- package/dist/{Pagination-C_b7Xhey.js.map → Pagination-LaSg-5cl.js.map} +1 -1
- package/dist/{Popconfirm-5pBzT_HQ.js → Popconfirm-SLz0zodk.js} +3 -3
- package/dist/{Popconfirm-5pBzT_HQ.js.map → Popconfirm-SLz0zodk.js.map} +1 -1
- package/dist/{Popover-BEbQrC_P.js → Popover-CEk915I1.js} +4 -3
- package/dist/Popover-CEk915I1.js.map +1 -0
- package/dist/{RadioGroup-CUBsuP7r.js → RadioGroup-CBPRLRN0.js} +4 -4
- package/dist/{RadioGroup-CUBsuP7r.js.map → RadioGroup-CBPRLRN0.js.map} +1 -1
- package/dist/{Search-DVpJuzr9.js → Search-DmkQo716.js} +3 -3
- package/dist/{Search-DVpJuzr9.js.map → Search-DmkQo716.js.map} +1 -1
- package/dist/{SearchInput-Q85p8Ews.js → SearchInput-CEfQDNl3.js} +8 -13
- package/dist/SearchInput-CEfQDNl3.js.map +1 -0
- package/dist/{SectionNav-mpmSM3OC.js → SectionNav-B_qf0AXi.js} +10 -42
- package/dist/SectionNav-B_qf0AXi.js.map +1 -0
- package/dist/{Select-DV3Hak_l.js → Select-ByRvkZ3D.js} +8 -11
- package/dist/{Select-DV3Hak_l.js.map → Select-ByRvkZ3D.js.map} +1 -1
- package/dist/{Sheet-Chf0kX1E.js → Sheet-C-yXk5Da.js} +5 -9
- package/dist/Sheet-C-yXk5Da.js.map +1 -0
- package/dist/{Sidebar-CTWsHZhF.js → Sidebar-Ds0E6PbR.js} +181 -33
- package/dist/Sidebar-Ds0E6PbR.js.map +1 -0
- package/dist/{Slider-Bv0B6lI0.js → Slider-DWdu9NuM.js} +3 -3
- package/dist/{Slider-Bv0B6lI0.js.map → Slider-DWdu9NuM.js.map} +1 -1
- package/dist/{Stepper-C8sm9ZFM.js → Stepper-BLkLhfnd.js} +6 -9
- package/dist/{Stepper-C8sm9ZFM.js.map → Stepper-BLkLhfnd.js.map} +1 -1
- package/dist/{Switch-B0WdGSjz.js → Switch-DZvNePOm.js} +2 -2
- package/dist/{Switch-B0WdGSjz.js.map → Switch-DZvNePOm.js.map} +1 -1
- package/dist/{Table-CvYuTuNU.js → Table-BaVT5Tkn.js} +6 -11
- package/dist/{Table-CvYuTuNU.js.map → Table-BaVT5Tkn.js.map} +1 -1
- package/dist/{Tabs-eB974xJf.js → Tabs-Dt9oLYHC.js} +3 -3
- package/dist/{Tabs-eB974xJf.js.map → Tabs-Dt9oLYHC.js.map} +1 -1
- package/dist/{TextInput-DiEMxVF6.js → TextInput-CDG2XpBl.js} +12 -15
- package/dist/TextInput-CDG2XpBl.js.map +1 -0
- package/dist/{ThemeProvider-BI6JWBdJ.js → ThemeProvider-DXsxFg1U.js} +13 -31
- package/dist/ThemeProvider-DXsxFg1U.js.map +1 -0
- package/dist/{TimePicker-BGeqc-Ed.js → TimePicker-CDGYrRxi.js} +2 -2
- package/dist/{TimePicker-BGeqc-Ed.js.map → TimePicker-CDGYrRxi.js.map} +1 -1
- package/dist/{Timeline-BG5Xogxh.js → Timeline-B-I6sb0M.js} +2 -2
- package/dist/{Timeline-BG5Xogxh.js.map → Timeline-B-I6sb0M.js.map} +1 -1
- package/dist/{Toast-Dr6Uw7ao.js → Toast-PfQf3vj-.js} +2 -2
- package/dist/{Toast-Dr6Uw7ao.js.map → Toast-PfQf3vj-.js.map} +1 -1
- package/dist/{Workbench-UR2FBC7I.js → Workbench-DmZzpkj7.js} +2 -2
- package/dist/{Workbench-UR2FBC7I.js.map → Workbench-DmZzpkj7.js.map} +1 -1
- package/dist/{ZoomableSvg-U_VH3QRO.js → ZoomableSvg-BzXVfgnI.js} +5 -19
- package/dist/ZoomableSvg-BzXVfgnI.js.map +1 -0
- package/dist/charts.d.ts +21 -52
- package/dist/charts.js +13 -39
- package/dist/charts.js.map +1 -1
- package/dist/{context-D7X470dy.js → context-U293r3v-.js} +5 -9
- package/dist/context-U293r3v-.js.map +1 -0
- package/dist/editors.d.ts +27 -124
- package/dist/editors.js +29 -71
- package/dist/editors.js.map +1 -1
- package/dist/{findLiteralMatches-BGBw8Vbl.js → findLiteralMatches-DgGLzyG0.js} +8 -20
- package/dist/findLiteralMatches-DgGLzyG0.js.map +1 -0
- package/dist/flint.d.ts +3 -6
- package/dist/flint.js +31 -80
- package/dist/flint.js.map +1 -1
- package/dist/{icons-Cek151jC.js → icons-wcA70iQx.js} +105 -2
- package/dist/icons-wcA70iQx.js.map +1 -0
- package/dist/icons.d.ts +2 -2
- package/dist/icons.js +2 -2
- package/dist/{index-m-kQEWiY.d.ts → index-B7k-09i1.d.ts} +14 -2
- package/dist/index.d.ts +1461 -1809
- package/dist/index.js +70 -67
- package/dist/internal/blocks/AIKit.js +2 -2
- package/dist/internal/blocks/AppShell.js +1 -1
- package/dist/internal/blocks/AuthLayout.js +7 -27
- package/dist/internal/blocks/AuthLayout.js.map +1 -1
- package/dist/internal/blocks/AutoSaveTextarea.js +1 -1
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ChartPanel.js +4 -8
- package/dist/internal/blocks/ChartPanel.js.map +1 -1
- package/dist/internal/blocks/ChipEditor.js +129 -0
- package/dist/internal/blocks/ChipEditor.js.map +1 -0
- 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/DashboardHero.js +4 -7
- package/dist/internal/blocks/DashboardHero.js.map +1 -1
- package/dist/internal/blocks/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
- package/dist/internal/blocks/EmptyState.js +5 -9
- package/dist/internal/blocks/EmptyState.js.map +1 -1
- package/dist/internal/blocks/ErrorState.js +5 -9
- package/dist/internal/blocks/ErrorState.js.map +1 -1
- package/dist/internal/blocks/ExportMenu.js +6 -10
- package/dist/internal/blocks/ExportMenu.js.map +1 -1
- package/dist/internal/blocks/Form/connectors/ComboboxField.js +40 -0
- package/dist/internal/blocks/Form/connectors/ComboboxField.js.map +1 -0
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +5 -22
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js.map +1 -1
- package/dist/internal/blocks/Form.js +1 -1
- package/dist/internal/blocks/FormGroup.js +1 -1
- package/dist/internal/blocks/GoogleButton.js +1 -1
- package/dist/internal/blocks/MicrosoftButton.js +1 -1
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
- package/dist/internal/blocks/MultiCombobox.js +162 -165
- package/dist/internal/blocks/MultiCombobox.js.map +1 -1
- package/dist/internal/blocks/NumberInput.js +1 -1
- package/dist/internal/blocks/OtpInput.js +1 -1
- package/dist/internal/blocks/PageHeader.js +1 -1
- package/dist/internal/blocks/PageLayout.js +1 -1
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +4 -4
- package/dist/internal/blocks/PasswordInput.js.map +1 -1
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +4 -4
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +3 -3
- package/dist/internal/blocks/StatCard.js +4 -8
- package/dist/internal/blocks/StatCard.js.map +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +2 -2
- package/dist/internal/blocks/TimeInput.js +5 -5
- package/dist/internal/blocks/TimeInput.js.map +1 -1
- 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/Badge.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/ButtonGroup.js.map +1 -1
- package/dist/internal/components/Calendar.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 +2 -2
- package/dist/internal/components/Combobox.js +2 -2
- 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/MergeEditor/ConflictStatus/ConflictStatusIndicator.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/PanelWithDetails.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/Separator.js.map +1 -1
- package/dist/internal/components/Sheet.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Skeleton/Skeleton.js +5 -9
- package/dist/internal/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/internal/components/Slider.js +1 -1
- package/dist/internal/components/SpotlightBackdrop.js +3 -8
- package/dist/internal/components/SpotlightBackdrop.js.map +1 -1
- package/dist/internal/components/StatusDot.js +60 -0
- package/dist/internal/components/StatusDot.js.map +1 -0
- package/dist/internal/components/Stepper.js +1 -1
- package/dist/internal/components/Switch.js +1 -1
- package/dist/internal/components/Table.js +1 -1
- package/dist/internal/components/Tabs.js +1 -1
- package/dist/internal/components/ThemeProvider.js +3 -3
- package/dist/internal/components/TimePicker.js +1 -1
- package/dist/internal/components/Timeline.js +1 -1
- package/dist/internal/components/Toast.js +2 -2
- package/dist/internal/components/Tooltip.js +2 -2
- package/dist/internal/components/Truncated.js +4 -8
- package/dist/internal/components/Truncated.js.map +1 -1
- package/dist/internal/components/Workbench.js +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/hooks/useScrollbarPosition.js +1 -1
- package/dist/internal/hooks/useStableCallback.js +4 -13
- package/dist/internal/hooks/useStableCallback.js.map +1 -1
- package/dist/internal/utils/mergeRefs.js +27 -9
- package/dist/internal/utils/mergeRefs.js.map +1 -1
- package/dist/internal/utils.js +3 -3
- package/dist/markdown-editor.d.ts +15 -37
- package/dist/markdown-editor.js +17 -23
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.d.ts +4 -6
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.d.ts +9 -19
- package/dist/rjsf.js +44 -84
- package/dist/rjsf.js.map +1 -1
- package/dist/{styles-BAFscjSV.js → styles-gzcjOyKv.js} +6 -6
- package/dist/styles-gzcjOyKv.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/svgTransforms-Dw2hRA-i.js +51 -0
- package/dist/svgTransforms-Dw2hRA-i.js.map +1 -0
- package/dist/testing.d.ts +3 -10
- package/dist/testing.js +5 -12
- package/dist/testing.js.map +1 -1
- package/dist/themeTokens-7DEab0kp.js +31 -0
- package/dist/themeTokens-7DEab0kp.js.map +1 -0
- package/dist/{toast-DIC0iNRf.js → toast-CyXEdaCZ.js} +3 -3
- package/dist/toast-CyXEdaCZ.js.map +1 -0
- package/dist/{themeScopeContext-D7fSyb06.js → useColorSchemeState-Cw4MCXUs.js} +14 -14
- package/dist/useColorSchemeState-Cw4MCXUs.js.map +1 -0
- package/dist/{useControllableState-M6494mCT.js → useControllableState-CUYXMsfz.js} +3 -7
- package/dist/useControllableState-CUYXMsfz.js.map +1 -0
- package/dist/useElement-D-RjrGa4.js +21 -0
- package/dist/useElement-D-RjrGa4.js.map +1 -0
- package/dist/useThemeAttributes-B199Regy.js +67 -0
- package/dist/useThemeAttributes-B199Regy.js.map +1 -0
- package/dist/{utils-DnkrFYqY.js → utils-Bd28bWgm.js} +53 -20
- package/dist/utils-Bd28bWgm.js.map +1 -0
- package/dist/vega.d.ts +8 -30
- package/dist/vega.js +5 -13
- package/dist/vega.js.map +1 -1
- package/dist/{vegaTheme-CSvFEMBl.js → vegaTheme-VQMWTlBw.js} +7 -21
- package/dist/vegaTheme-VQMWTlBw.js.map +1 -0
- package/package.json +11 -9
- package/src/styles.css +120 -14
- package/src/theme.css +126 -6
- package/dist/AIKit-CQxVwyAk.js.map +0 -1
- package/dist/Alert-C4Y9IwMI.js.map +0 -1
- package/dist/AlertModal-BGJdaRRj.js.map +0 -1
- package/dist/AppShell-DRgJxpXW.js.map +0 -1
- package/dist/Badge-o5jURtpB.js.map +0 -1
- package/dist/BrandLogo-CoKBk4MI.js.map +0 -1
- package/dist/Breadcrumb-D1id7YXd.js.map +0 -1
- package/dist/Button-DsRrU5F1.js.map +0 -1
- package/dist/Calendar-cG5NIJ4O.js.map +0 -1
- package/dist/Card-Dyo7055Q.js.map +0 -1
- package/dist/Checkbox-Bqr6zXcW.js.map +0 -1
- package/dist/CodeEditor-C9AS8Ch0.js.map +0 -1
- package/dist/ColorInput-Dg87lKcR.js.map +0 -1
- package/dist/ColorModeSwitch-CsWLiTBX.js.map +0 -1
- package/dist/Combobox-BfanUAqY.js +0 -619
- package/dist/Combobox-BfanUAqY.js.map +0 -1
- package/dist/DateRangeInput-9MIw7P6L.js.map +0 -1
- package/dist/DateRangePicker-DjSUFjh4.js.map +0 -1
- package/dist/DropdownMenu-CASr-jgl.js.map +0 -1
- package/dist/FieldItem-DtPTzNef.js.map +0 -1
- package/dist/FormGroup-Bl8JmnzJ.js.map +0 -1
- package/dist/FullScreenModal-CN9nAs72.js.map +0 -1
- package/dist/InputGroup-DcZRlVnN.js.map +0 -1
- package/dist/Kbd-D1Azcc4g.js.map +0 -1
- package/dist/MermaidDiagram-CujFxVzk.js.map +0 -1
- package/dist/Modal-Coj-H02o.js.map +0 -1
- package/dist/ModalTitle-C76ke2eo.js.map +0 -1
- package/dist/PageHeader-Q3IpCnQd.js.map +0 -1
- package/dist/PageLayout-DSVM-ASz.js.map +0 -1
- package/dist/PageToolbar-BKVJiDAL.js.map +0 -1
- package/dist/Popover-BEbQrC_P.js.map +0 -1
- package/dist/SearchInput-Q85p8Ews.js.map +0 -1
- package/dist/SectionNav-mpmSM3OC.js.map +0 -1
- package/dist/Sheet-Chf0kX1E.js.map +0 -1
- package/dist/Sidebar-CTWsHZhF.js.map +0 -1
- package/dist/TextInput-DiEMxVF6.js.map +0 -1
- package/dist/ThemeProvider-BI6JWBdJ.js.map +0 -1
- package/dist/ZoomableSvg-U_VH3QRO.js.map +0 -1
- package/dist/context-D7X470dy.js.map +0 -1
- package/dist/findLiteralMatches-BGBw8Vbl.js.map +0 -1
- package/dist/icons-Cek151jC.js.map +0 -1
- package/dist/styles-BAFscjSV.js.map +0 -1
- package/dist/svgTransforms-CJAYPk7o.js +0 -81
- package/dist/svgTransforms-CJAYPk7o.js.map +0 -1
- package/dist/themeScopeContext-D7fSyb06.js.map +0 -1
- package/dist/themeTokens-qP1-55O7.js +0 -119
- package/dist/themeTokens-qP1-55O7.js.map +0 -1
- package/dist/toast-DIC0iNRf.js.map +0 -1
- package/dist/useControllableState-M6494mCT.js.map +0 -1
- package/dist/useElement-DkF6esWL.js +0 -15
- package/dist/useElement-DkF6esWL.js.map +0 -1
- package/dist/utils-DnkrFYqY.js.map +0 -1
- package/dist/vegaTheme-CSvFEMBl.js.map +0 -1
|
@@ -7,16 +7,12 @@ const titleCompactClass = "tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:te
|
|
|
7
7
|
//#endregion
|
|
8
8
|
//#region src/blocks/PageHeader/PageHeaderDetail.tsx
|
|
9
9
|
/**
|
|
10
|
-
* Page header for
|
|
10
|
+
* Page header for one entity with a parent hierarchy worth breadcrumbing.
|
|
11
11
|
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* **When NOT to use:** for top-level list pages use `PageHeader.Index`. For pages without a parent
|
|
15
|
-
* hierarchy use `PageHeader.Index` even if they show one entity.
|
|
16
|
-
* **Composition:** nest inside `PageLayout.Header`. Pass `Button`s for actions. Anything beyond the
|
|
17
|
-
* 2-visible-actions cap belongs in `overflowActions` (a `DropdownMenu`), not in extra slots.
|
|
12
|
+
* - Nest inside `PageLayout.Header`.
|
|
13
|
+
* - A page with no parent hierarchy uses `PageHeader.Index`, even for one entity.
|
|
18
14
|
*
|
|
19
|
-
* @see RECIPES.md#list-detail
|
|
15
|
+
* @see RECIPES.md#list-detail
|
|
20
16
|
*/
|
|
21
17
|
const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact = false, primaryAction, secondaryAction, headerNav, fullWidthDescription = false, ...props }) => {
|
|
22
18
|
const titleRow = /* @__PURE__ */ jsxs("div", {
|
|
@@ -97,12 +93,8 @@ const PageHeaderDetail = ({ ref, className, breadcrumbs, overflowActions, title,
|
|
|
97
93
|
/**
|
|
98
94
|
* Page header for top-level list / collection pages.
|
|
99
95
|
*
|
|
100
|
-
*
|
|
101
|
-
*
|
|
102
|
-
* **When NOT to use:** for single-entity detail pages use `PageHeader.Detail`; for layouts that don't fit
|
|
103
|
-
* either pattern host custom JSX in `PageLayout.Header` directly.
|
|
104
|
-
* **Composition:** nest inside `PageLayout.Header`. Pass `Button`s into `action` and
|
|
105
|
-
* `documentation`. Search and filter chips belong in `PageToolbar`, not here.
|
|
96
|
+
* - No breadcrumbs, no overflow menu.
|
|
97
|
+
* - Search and filters belong in `PageToolbar`, not here.
|
|
106
98
|
*/
|
|
107
99
|
const PageHeaderIndex = ({ ref, className, title, description, metadata, documentation, action, headerNav, fullWidthDescription = false, ...props }) => {
|
|
108
100
|
const subtitle = metadata ?? description;
|
|
@@ -153,25 +145,20 @@ const PageHeaderIndex = ({ ref, className, title, description, metadata, documen
|
|
|
153
145
|
//#endregion
|
|
154
146
|
//#region src/blocks/PageHeader/PageHeader.tsx
|
|
155
147
|
/**
|
|
156
|
-
*
|
|
148
|
+
* Page header whose variant types enforce the page-header patterns.
|
|
157
149
|
*
|
|
158
|
-
*
|
|
159
|
-
*
|
|
160
|
-
* single-entity pages with breadcrumbs.
|
|
161
|
-
* **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside
|
|
162
|
-
* `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.
|
|
163
|
-
* **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots
|
|
164
|
-
* (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
|
|
150
|
+
* - Nest inside `PageLayout.Header`; pass `@keboola/design` `Button`s into the slots.
|
|
151
|
+
* - Other layouts: custom JSX in `PageLayout.Header`; routed tabs: `PageLayout.Tabs`.
|
|
165
152
|
*
|
|
166
|
-
* @see RECIPES.md#page-header-tabs
|
|
153
|
+
* @see RECIPES.md#page-header-tabs
|
|
167
154
|
*/
|
|
168
155
|
const PageHeader = {
|
|
169
|
-
/**
|
|
156
|
+
/** List / collection pages. No breadcrumbs; `metadata` wins over `description`. */
|
|
170
157
|
Index: PageHeaderIndex,
|
|
171
|
-
/**
|
|
158
|
+
/** Single-entity pages: required breadcrumbs, overflow menu, max 2 visible actions. */
|
|
172
159
|
Detail: PageHeaderDetail
|
|
173
160
|
};
|
|
174
161
|
//#endregion
|
|
175
162
|
export { PageHeader };
|
|
176
163
|
|
|
177
|
-
//# sourceMappingURL=PageHeader-
|
|
164
|
+
//# sourceMappingURL=PageHeader-CgfyXpf1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageHeader-CgfyXpf1.js","names":[],"sources":["../src/blocks/PageHeader/styles.ts","../src/blocks/PageHeader/PageHeaderDetail.tsx","../src/blocks/PageHeader/PageHeaderIndex.tsx","../src/blocks/PageHeader/PageHeader.tsx"],"sourcesContent":["export const titleRowClass = 'tw:flex tw:flex-wrap tw:items-center tw:gap-x-3 tw:gap-y-2';\nexport const titleClass =\n 'tw:m-0 tw:text-3xl tw:font-semibold tw:leading-9 tw:text-foreground tw:break-words';\nexport const titleCompactClass =\n 'tw:m-0 tw:text-xl tw:font-semibold tw:leading-7 tw:text-foreground tw:break-words';\n// Header badges always read as pills: force pill shape/case/tracking on any\n// Badge inside the slot via its `data-slot=\"badge\"` root (higher specificity\n// than the Badge's own variant classes, so it wins regardless of variant).\n// `tw:py-0` neutralises consumer-forced vertical padding (e.g. StatusLabel's\n// `tw:py-1.5`) so every header pill keeps the standard badge height.\nexport const badgesClass =\n 'tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:[&_[data-slot=badge]]:rounded-full tw:[&_[data-slot=badge]]:normal-case tw:[&_[data-slot=badge]]:tracking-normal tw:[&_[data-slot=badge]]:py-0';\nexport const descriptionClass =\n 'tw:m-0 tw:max-w-[800px] tw:break-words tw:text-sm tw:leading-5 tw:text-muted-foreground';\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport {\n badgesClass,\n descriptionClass,\n titleClass,\n titleCompactClass,\n titleRowClass,\n} from './styles';\n\n// Pattern: docs/patterns/page-header/detail/detail-page-header.md\ntype PageHeaderDetailProps = Omit<ComponentProps<'header'>, 'title'> & {\n /** Chain to the entity's parent. Don't end with the entity's own name — that's the `title`. */\n breadcrumbs: ReactNode;\n /** `DropdownMenu` for all other actions, on the breadcrumbs row. */\n overflowActions?: ReactNode;\n title: ReactNode;\n /** Entity / type icon left of the title. */\n titleIcon?: ReactNode;\n /** `Badge`s beside the title (status, environment, version). */\n badges?: ReactNode;\n description?: ReactNode;\n /** Smaller title for information-dense pages. */\n compact?: boolean;\n /** `Button` with the verb appropriate to the entity (Deploy / Run / Save). */\n primaryAction?: ReactNode;\n /** `Button variant=\"secondary\"`. Further actions go in `overflowActions`. */\n secondaryAction?: ReactNode;\n /** `Tabs` row below the title block. */\n headerNav?: ReactNode;\n /** Description on its own full-width row below title and actions, not in the title column. */\n fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for one entity with a parent hierarchy worth breadcrumbing.\n *\n * - Nest inside `PageLayout.Header`.\n * - A page with no parent hierarchy uses `PageHeader.Index`, even for one entity.\n *\n * @see RECIPES.md#list-detail\n */\nexport const PageHeaderDetail = ({\n ref,\n className,\n breadcrumbs,\n overflowActions,\n title,\n titleIcon,\n badges,\n description,\n compact = false,\n primaryAction,\n secondaryAction,\n headerNav,\n fullWidthDescription = false,\n ...props\n}: PageHeaderDetailProps) => {\n const titleRow = (\n <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n {titleIcon && <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>}\n <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n {badges && <div className={badgesClass}>{badges}</div>}\n </div>\n );\n const actions = (primaryAction || secondaryAction) && (\n <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\n {secondaryAction}\n {primaryAction}\n </div>\n );\n const descriptionNode = description && <p className={descriptionClass}>{description}</p>;\n return (\n <header\n ref={ref}\n className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n {...props}\n >\n <div className=\"tw:flex tw:w-full tw:items-center tw:justify-between tw:gap-4\">\n <div className=\"tw:min-w-0 tw:flex-1\">{breadcrumbs}</div>\n {overflowActions && (\n <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">{overflowActions}</div>\n )}\n </div>\n\n {fullWidthDescription ? (\n <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n {titleRow}\n {actions}\n </div>\n {descriptionNode}\n </div>\n ) : (\n <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n <div className=\"tw:flex tw:min-w-64 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n <div className={titleRowClass}>\n {titleIcon && (\n <span className=\"tw:flex tw:shrink-0 tw:items-center\">{titleIcon}</span>\n )}\n <h1 className={compact ? titleCompactClass : titleClass}>{title}</h1>\n {badges && <div className={badgesClass}>{badges}</div>}\n </div>\n {descriptionNode}\n </div>\n {actions}\n </div>\n )}\n\n {headerNav}\n </header>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { descriptionClass, titleClass, titleRowClass } from './styles';\n\n// Pattern: docs/patterns/page-header/index/index-page-header.md\ntype PageHeaderIndexProps = Omit<ComponentProps<'header'>, 'title'> & {\n title: ReactNode;\n /** Prose below the title; `metadata` wins when both are set. */\n description?: ReactNode;\n /** Count summary (\"3 buckets and 39 tables\"). Wins over `description`. */\n metadata?: ReactNode;\n /** Icon-only docs button (`Button variant=\"invisible\" icon={<BookOpen />}`). */\n documentation?: ReactNode;\n /** The one primary \"create X\" `Button`. */\n action?: ReactNode;\n /** `Tabs` row below the title block. */\n headerNav?: ReactNode;\n /** Description on its own full-width row; actions wrap below the title on narrow widths. */\n fullWidthDescription?: boolean;\n};\n\n/**\n * Page header for top-level list / collection pages.\n *\n * - No breadcrumbs, no overflow menu.\n * - Search and filters belong in `PageToolbar`, not here.\n */\nexport const PageHeaderIndex = ({\n ref,\n className,\n title,\n description,\n metadata,\n documentation,\n action,\n headerNav,\n fullWidthDescription = false,\n ...props\n}: PageHeaderIndexProps) => {\n const subtitle = metadata ?? description;\n const hasActions = Boolean(documentation || action);\n return (\n <header\n ref={ref}\n className={cn('tw:flex tw:w-full tw:flex-col tw:gap-4', className)}\n {...props}\n >\n {fullWidthDescription ? (\n <div className=\"tw:flex tw:w-full tw:flex-col tw:gap-2\">\n <div className=\"tw:flex tw:w-full tw:flex-wrap tw:items-start tw:justify-between tw:gap-x-4 tw:gap-y-3\">\n <div className={cn(titleRowClass, 'tw:min-w-64 tw:flex-1 tw:pr-2')}>\n <h1 className={titleClass}>{title}</h1>\n </div>\n {hasActions && (\n <div className=\"tw:ml-auto tw:flex tw:flex-wrap tw:items-center tw:justify-end tw:gap-2\">\n {documentation}\n {action}\n </div>\n )}\n </div>\n {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n </div>\n ) : (\n <div className=\"tw:flex tw:w-full tw:items-start tw:justify-between tw:gap-4\">\n <div className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-2 tw:pr-2\">\n <div className={titleRowClass}>\n <h1 className={titleClass}>{title}</h1>\n </div>\n {subtitle && <p className={descriptionClass}>{subtitle}</p>}\n </div>\n {hasActions && (\n <div className=\"tw:flex tw:shrink-0 tw:items-center tw:gap-2\">\n {documentation}\n {action}\n </div>\n )}\n </div>\n )}\n {headerNav}\n </header>\n );\n};\n","import { PageHeaderDetail } from './PageHeaderDetail';\nimport { PageHeaderIndex } from './PageHeaderIndex';\n\n/**\n * Page header whose variant types enforce the page-header patterns.\n *\n * - Nest inside `PageLayout.Header`; pass `@keboola/design` `Button`s into the slots.\n * - Other layouts: custom JSX in `PageLayout.Header`; routed tabs: `PageLayout.Tabs`.\n *\n * @see RECIPES.md#page-header-tabs\n */\nexport const PageHeader = {\n /** List / collection pages. No breadcrumbs; `metadata` wins over `description`. */\n Index: PageHeaderIndex,\n /** Single-entity pages: required breadcrumbs, overflow menu, max 2 visible actions. */\n Detail: PageHeaderDetail,\n};\n"],"mappings":";;;AAAA,MAAa,gBAAgB;AAC7B,MAAa,aACX;AACF,MAAa,oBACX;;;;;;;;;;;ACwCF,MAAa,oBAAoB,EAC/B,KACA,WACA,aACA,iBACA,OACA,WACA,QACA,aACA,UAAU,OACV,eACA,iBACA,WACA,uBAAuB,OACvB,GAAG,YACwB;CAC3B,MAAM,WACJ,qBAAC,OAAD;EAAK,WAAW,GAAG,eAAe,+BAA+B;EAAjE,UAAA;GACG,aAAa,oBAAC,QAAD;IAAM,WAAU;IAAuC,UAAA;GAAgB,CAAA;GACrF,oBAAC,MAAD;IAAI,WAAW,UAAU,oBAAoB;IAAa,UAAA;GAAU,CAAA;GACnE,UAAU,oBAAC,OAAD;IAAK,WAAA;IAAyB,UAAA;GAAY,CAAA;EAClD;;CAEP,MAAM,WAAW,iBAAiB,oBAChC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACG,iBACA,aACE;;CAEP,MAAM,kBAAkB,eAAe,oBAAC,KAAD;EAAG,WAAA;EAA8B,UAAA;CAAe,CAAA;CACvF,OACE,qBAAC,UAAD;EACO;EACL,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;EAHN,UAAA;GAKE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KAAK,WAAU;KAAwB,UAAA;IAAiB,CAAA,GACvD,mBACC,oBAAC,OAAD;KAAK,WAAU;KAAgD,UAAA;IAAqB,CAAA,CAEnF;;GAEJ,uBACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,UACA,OACE;IACJ,CAAA,GAAA,eACE;GAEL,CAAA,IAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,qBAAC,OAAD;MAAK,WAAW;MAAhB,UAAA;OACG,aACC,oBAAC,QAAD;QAAM,WAAU;QAAuC,UAAA;OAAgB,CAAA;OAEzE,oBAAC,MAAD;QAAI,WAAW,UAAU,oBAAoB;QAAa,UAAA;OAAU,CAAA;OACnE,UAAU,oBAAC,OAAD;QAAK,WAAA;QAAyB,UAAA;OAAY,CAAA;MAClD;KACJ,CAAA,GAAA,eACE;IACJ,CAAA,GAAA,OACE;;GAGN;EACK;;AAEZ;;;;;;;;;ACrFA,MAAa,mBAAmB,EAC9B,KACA,WACA,OACA,aACA,UACA,eACA,QACA,WACA,uBAAuB,OACvB,GAAG,YACuB;CAC1B,MAAM,WAAW,YAAY;CAC7B,MAAM,aAAa,QAAQ,iBAAiB,MAAM;CAClD,OACE,qBAAC,UAAD;EACO;EACL,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;EAHN,UAAA,CAKG,uBACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW,GAAG,eAAe,+BAA+B;KAC/D,UAAA,oBAAC,MAAD;MAAI,WAAW;MAAa,UAAA;KAAU,CAAA;IACnC,CAAA,GACJ,cACC,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,eACA,MACE;IAEJ,CAAA,CAAA;GACJ,CAAA,GAAA,YAAY,oBAAC,KAAD;IAAG,WAAA;IAA8B,UAAA;GAAY,CAAA,CACvD;EAEL,CAAA,IAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,OAAD;KAAK,WAAW;KACd,UAAA,oBAAC,MAAD;MAAI,WAAW;MAAa,UAAA;KAAU,CAAA;IACnC,CAAA,GACJ,YAAY,oBAAC,KAAD;KAAG,WAAA;KAA8B,UAAA;IAAY,CAAA,CACvD;GACJ,CAAA,GAAA,cACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,eACA,MACE;GAEJ,CAAA,CAAA;EAEN,CAAA,GAAA,SACK;;AAEZ;;;;;;;;;;;ACxEA,MAAa,aAAa;;CAExB,OAAO;;CAEP,QAAQ;AACV"}
|
|
@@ -141,36 +141,28 @@ const Footer = ({ ref, className, sticky = false, children, ...props }) => /* @_
|
|
|
141
141
|
children
|
|
142
142
|
});
|
|
143
143
|
/**
|
|
144
|
-
*
|
|
145
|
-
* max-width container + vertical rhythm + named slots. The gutter between content and the app
|
|
146
|
-
* frame (sidebar / navbar) is owned by the shell, not by `PageLayout` — so the `Root` adds no
|
|
147
|
-
* outer page padding of its own (`PageLayout.Footer` keeps its own action-bar padding).
|
|
144
|
+
* Page chrome for every new kbc-ui page: max-width column + vertical rhythm + named slots.
|
|
148
145
|
*
|
|
149
|
-
*
|
|
150
|
-
*
|
|
151
|
-
*
|
|
152
|
-
* **When NOT to use:** the left-rail `Sidebar` lives in the app shell outside `PageLayout`. For embedded
|
|
153
|
-
* widgets or modal bodies the layout chrome is the modal / card itself, not `PageLayout`.
|
|
154
|
-
* **Composition:** `PageLayout` is opinionated about chrome only — slots accept any `ReactNode`. Put
|
|
155
|
-
* search / filter pills in `PageToolbar`, never in the header. Form submit bars go in
|
|
156
|
-
* `PageLayout.Footer sticky`.
|
|
146
|
+
* - No outer padding: the shell owns the gutter to the app frame.
|
|
147
|
+
* - Not for modal bodies or embedded widgets; the `Sidebar` lives in the app shell.
|
|
148
|
+
* - Search / filter pills go in `PageToolbar`, never in the header.
|
|
157
149
|
*
|
|
158
|
-
* @see RECIPES.md#list-detail
|
|
159
|
-
* @see RECIPES.md#section-nav
|
|
150
|
+
* @see RECIPES.md#list-detail
|
|
151
|
+
* @see RECIPES.md#section-nav
|
|
160
152
|
*/
|
|
161
153
|
const PageLayout = Object.assign(Root, {
|
|
162
|
-
/**
|
|
154
|
+
/** Usually composed by `PageHeader.Detail`; for layouts that fit neither `PageHeader` variant. */
|
|
163
155
|
Breadcrumbs,
|
|
164
|
-
/**
|
|
156
|
+
/** `sticky` also publishes its height as `--page-header-height`, which `Content nav` pins to. */
|
|
165
157
|
Header,
|
|
166
|
-
/**
|
|
158
|
+
/** Routing-based tab rows; use `Tabs` / `TabsContent` inside, never a raw `<button>`. */
|
|
167
159
|
Tabs,
|
|
168
|
-
/**
|
|
160
|
+
/** `nav` (a `SectionNav`) makes it a two-column layout. */
|
|
169
161
|
Content,
|
|
170
|
-
/**
|
|
162
|
+
/** Form submit bar; `sticky` pins it to the viewport. */
|
|
171
163
|
Footer
|
|
172
164
|
});
|
|
173
165
|
//#endregion
|
|
174
166
|
export { PageLayout };
|
|
175
167
|
|
|
176
|
-
//# sourceMappingURL=PageLayout-
|
|
168
|
+
//# sourceMappingURL=PageLayout-DiAAILuS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageLayout-DiAAILuS.js","names":[],"sources":["../src/blocks/SectionNav/constants.ts","../src/blocks/PageLayout/context.ts","../src/blocks/PageLayout/PageLayout.tsx"],"sourcesContent":["/**\n * Names the container query `SectionNav` reads to pick the tree over the dropdown.\n *\n * It has to sit on an **ancestor**: a container query matches descendants only, so the element that\n * names the container can never read it — and it cannot be `SectionNav`'s own wrapper either, whose\n * width is what the switch changes (256px in a row, full width in a column), which would oscillate.\n * `PageLayout.Content nav={…}` puts it on the right element for you.\n */\nexport const SECTION_NAV_CONTAINER = 'tw:@container/section-nav';\n","import { createContext, use } from 'react';\nimport type { RefObject } from 'react';\n\n/**\n * The `PageLayout` root element, so `PageLayout.Header` can publish its measured height as a CSS\n * custom property the whole page can read — `PageLayout.Content nav={…}` pins the nav to it.\n *\n * A slot rendered outside a `PageLayout` reads `null` and skips publishing rather than throwing:\n * `PageLayout.Footer` is already documented as usable on its own.\n */\nexport const PageLayoutRootContext = createContext<RefObject<HTMLDivElement | null> | null>(null);\n\nexport const usePageLayoutRoot = () => use(PageLayoutRootContext);\n","import { useEffect, useRef } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { cn, mergeRefs } from '../../utils';\nimport { SECTION_NAV_CONTAINER } from '../SectionNav/constants';\n\nimport { PageLayoutRootContext, usePageLayoutRoot } from './context';\n\n/** `maxWidth`: `narrow` for forms, `default` for most pages, `wide` for dense detail views, `full` edge-to-edge. */\ntype RootProps = ComponentProps<'div'> & {\n maxWidth?: 'default' | 'narrow' | 'wide' | 'full';\n};\n\nconst maxWidthClass = {\n narrow: 'tw:max-w-[976px]',\n default: 'tw:max-w-[1280px]',\n wide: 'tw:max-w-[1600px]',\n full: 'tw:max-w-full',\n} as const;\n\nconst Root = ({ ref, className, maxWidth = 'full', children, ...props }: RootProps) => {\n const rootRef = useRef<HTMLDivElement>(null);\n\n return (\n <PageLayoutRootContext value={rootRef}>\n <div\n ref={mergeRefs(ref ?? null, rootRef)}\n className={cn(\n 'tw:flex tw:flex-col tw:gap-4 tw:w-full tw:mx-auto',\n maxWidthClass[maxWidth],\n className,\n )}\n {...props}\n >\n {children}\n </div>\n </PageLayoutRootContext>\n );\n};\n\nconst Breadcrumbs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n <div ref={ref} className={cn('tw:w-full', className)} {...props}>\n {children}\n </div>\n);\n\nconst STICKY_CHROME_BLEED =\n 'tw:before:absolute tw:before:inset-x-[-0.5rem] tw:before:inset-y-0 tw:before:-z-10 tw:before:bg-background';\n\ntype HeaderProps = ComponentProps<'header'> & {\n sticky?: boolean;\n};\n\nconst Header = ({ ref, className, sticky = false, children, ...props }: HeaderProps) => {\n const rootRef = usePageLayoutRoot();\n const headerRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const header = headerRef.current;\n const root = rootRef?.current;\n\n if (!sticky || !header || !root || typeof ResizeObserver === 'undefined') return;\n\n const publish = () => {\n root.style.setProperty(\n '--page-header-height',\n `${Math.round(header.getBoundingClientRect().height)}px`,\n );\n };\n\n const observer = new ResizeObserver(publish);\n\n observer.observe(header);\n publish();\n\n return () => {\n observer.disconnect();\n root.style.removeProperty('--page-header-height');\n };\n }, [sticky, rootRef]);\n\n return (\n <header\n ref={mergeRefs(ref ?? null, headerRef)}\n className={cn(\n 'tw:w-full',\n sticky && ['tw:sticky tw:top-0 tw:z-20 tw:bg-background', STICKY_CHROME_BLEED],\n className,\n )}\n {...props}\n >\n {children}\n {sticky && (\n <div\n aria-hidden\n className=\"tw:pointer-events-none tw:absolute tw:inset-x-0 tw:top-full tw:h-6 tw:bg-linear-to-b tw:from-background tw:to-[rgb(var(--background)/0)]\"\n />\n )}\n </header>\n );\n};\n\nconst Tabs = ({ ref, className, children, ...props }: ComponentProps<'div'>) => (\n <div\n ref={ref}\n className={cn('tw:flex tw:w-full tw:items-center tw:border-b tw:border-border', className)}\n {...props}\n >\n {children}\n </div>\n);\n\ntype ContentProps = ComponentProps<'div'> & {\n nav?: ReactNode;\n};\n\nconst scrollParent = (from: HTMLElement): HTMLElement | null => {\n for (let el = from.parentElement; el; el = el.parentElement) {\n if (/auto|scroll/.test(getComputedStyle(el).overflowY)) return el;\n }\n\n return null;\n};\n\nconst useAvailableHeight = () => {\n const rowRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const row = rowRef.current;\n\n if (!row || typeof ResizeObserver === 'undefined') return;\n\n const scroller = scrollParent(row);\n\n const publish = () => {\n const top = row.getBoundingClientRect().top + (scroller?.scrollTop ?? window.scrollY);\n const room = scroller\n ? scroller.clientHeight - (top - scroller.getBoundingClientRect().top)\n : window.innerHeight - top;\n\n row.style.setProperty('--section-nav-available', `${Math.max(0, Math.round(room))}px`);\n };\n\n const observer = new ResizeObserver(publish);\n\n observer.observe(row);\n if (scroller) observer.observe(scroller);\n publish();\n\n return () => observer.disconnect();\n }, []);\n\n return rowRef;\n};\n\nconst Content = ({ ref, className, nav, children, ...props }: ContentProps) => {\n const rowRef = useAvailableHeight();\n\n if (!nav) {\n return (\n <div\n ref={ref}\n className={cn('tw:flex tw:w-full tw:flex-1 tw:flex-col', className)}\n {...props}\n >\n {children}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={cn(\n 'tw:group/page-layout-content tw:flex tw:w-full tw:flex-1 tw:flex-col',\n SECTION_NAV_CONTAINER,\n className,\n )}\n {...props}\n >\n <div\n ref={rowRef}\n className=\"tw:flex tw:w-full tw:@[640px]/section-nav:flex-row tw:@[640px]/section-nav:gap-8 tw:@max-[640px]/section-nav:flex-col tw:@max-[640px]/section-nav:gap-4\"\n >\n <div\n data-slot=\"page-layout-nav\"\n className=\"tw:sticky tw:top-[calc(var(--page-header-height,0px)+1rem)] tw:z-10 tw:shrink-0 tw:self-start tw:@[640px]/section-nav:max-h-[var(--section-nav-available,100dvh)] tw:@[640px]/section-nav:w-64 tw:@[640px]/section-nav:overflow-y-auto tw:@[640px]/section-nav:supports-[animation-timeline:scroll()]:scroll-fade-y tw:@max-[640px]/section-nav:w-full tw:@max-[640px]/section-nav:bg-background tw:@max-[640px]/section-nav:before:absolute tw:@max-[640px]/section-nav:before:inset-x-[-0.5rem] tw:@max-[640px]/section-nav:before:top-[-1rem] tw:@max-[640px]/section-nav:before:bottom-0 tw:@max-[640px]/section-nav:before:-z-10 tw:@max-[640px]/section-nav:before:bg-background tw:@max-[640px]/section-nav:after:pointer-events-none tw:@max-[640px]/section-nav:after:absolute tw:@max-[640px]/section-nav:after:inset-x-0 tw:@max-[640px]/section-nav:after:top-full tw:@max-[640px]/section-nav:after:h-6 tw:@max-[640px]/section-nav:after:bg-linear-to-b tw:@max-[640px]/section-nav:after:from-background tw:@max-[640px]/section-nav:after:to-[rgb(var(--background)/0)]\"\n >\n {nav}\n </div>\n <div\n data-slot=\"page-layout-content-body\"\n className=\"tw:[--page-content-sticky-top:var(--page-header-height,0px)] tw:min-w-0 tw:flex-1\"\n >\n {children}\n </div>\n </div>\n </div>\n );\n};\n\ntype FooterProps = ComponentProps<'footer'> & {\n sticky?: boolean;\n};\n\nconst Footer = ({ ref, className, sticky = false, children, ...props }: FooterProps) => (\n <footer\n ref={ref}\n className={cn(\n 'tw:flex tw:w-full tw:items-center tw:justify-end tw:gap-3 tw:border-t tw:border-border tw:bg-background tw:px-6 tw:py-4',\n sticky && ['tw:sticky tw:bottom-0 tw:z-10', STICKY_CHROME_BLEED],\n className,\n )}\n {...props}\n >\n {children}\n </footer>\n);\n\n/**\n * Page chrome for every new kbc-ui page: max-width column + vertical rhythm + named slots.\n *\n * - No outer padding: the shell owns the gutter to the app frame.\n * - Not for modal bodies or embedded widgets; the `Sidebar` lives in the app shell.\n * - Search / filter pills go in `PageToolbar`, never in the header.\n *\n * @see RECIPES.md#list-detail\n * @see RECIPES.md#section-nav\n */\nexport const PageLayout = Object.assign(Root, {\n /** Usually composed by `PageHeader.Detail`; for layouts that fit neither `PageHeader` variant. */\n Breadcrumbs,\n /** `sticky` also publishes its height as `--page-header-height`, which `Content nav` pins to. */\n Header,\n /** Routing-based tab rows; use `Tabs` / `TabsContent` inside, never a raw `<button>`. */\n Tabs,\n /** `nav` (a `SectionNav`) makes it a two-column layout. */\n Content,\n /** Form submit bar; `sticky` pins it to the viewport. */\n Footer,\n});\n"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { ChevronDown, Plus, X } from "./icons-
|
|
3
|
-
import { Button } from "./Button-
|
|
4
|
-
import { Popover } from "./Popover-
|
|
5
|
-
import { Badge } from "./Badge-
|
|
2
|
+
import { ChevronDown, Plus, X } from "./icons-wcA70iQx.js";
|
|
3
|
+
import { Button } from "./Button-Ca4Q3VJU.js";
|
|
4
|
+
import { Popover } from "./Popover-CEk915I1.js";
|
|
5
|
+
import { Badge } from "./Badge-DIjhwPvh.js";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
//#region src/blocks/PageToolbar/PageToolbarToken.tsx
|
|
8
8
|
/**
|
|
@@ -93,61 +93,31 @@ const Clear = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Button,
|
|
|
93
93
|
children: children ?? "Clear all"
|
|
94
94
|
});
|
|
95
95
|
/**
|
|
96
|
-
*
|
|
97
|
-
* controls on the right, an optional Active Filters row below for filter chips or tokens.
|
|
96
|
+
* Search / filter toolbar for index pages, between `PageLayout.Header` and `PageLayout.Content`.
|
|
98
97
|
*
|
|
99
|
-
*
|
|
100
|
-
* `
|
|
101
|
-
* **When NOT to use:** detail pages, form pages, or anywhere there is no search / filter
|
|
102
|
-
* surface. For routing-based tab rows reach for `PageLayout.Tabs`.
|
|
103
|
-
*
|
|
104
|
-
* **Recommended composition (enforced at the call site):**
|
|
105
|
-
*
|
|
106
|
-
* - `Search` sits on the left; the right cluster auto-aligns via flex.
|
|
107
|
-
* - Right cluster order: `Filters` → `Sort` → `Actions` → `View`. View controls are always
|
|
108
|
-
* the final control group — do not render any control after `View`.
|
|
109
|
-
* - `ActiveFilters` is the second row. Render it only when one or more filters are active.
|
|
110
|
-
* - `Clear` self-aligns to the far right of `ActiveFilters`.
|
|
111
|
-
*
|
|
112
|
-
* The block is variant-agnostic: render filter chips (Standard variant, non-editable) or
|
|
113
|
-
* tokens (Query Builder variant, editable) into `ActiveFilters` as plain children — do not
|
|
114
|
-
* mix the two in one toolbar.
|
|
98
|
+
* - Right cluster order: `Filters` → `Sort` → `Actions` → `View`; nothing after `View`.
|
|
99
|
+
* - `ActiveFilters` only while a filter is active; chips or tokens, never both in one toolbar.
|
|
115
100
|
*
|
|
116
101
|
* @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md
|
|
117
102
|
*/
|
|
118
103
|
const PageToolbar = Object.assign(Root, {
|
|
119
|
-
/** Left slot — typically a `SearchInput`. */
|
|
120
104
|
Search,
|
|
121
|
-
/** Right cluster — host the four control groups below in the recommended order. */
|
|
122
105
|
Right,
|
|
123
|
-
/** Filter controls (`Combobox`, `Select`, `DatePicker`). */
|
|
124
106
|
Filters: ControlGroup,
|
|
125
|
-
/** Sort control. */
|
|
126
107
|
Sort: ControlGroup,
|
|
127
|
-
/** Utility actions (Export, Refresh, …). */
|
|
128
108
|
Actions: ControlGroup,
|
|
129
|
-
/**
|
|
109
|
+
/** Always last in the right cluster. */
|
|
130
110
|
View: ControlGroup,
|
|
131
|
-
/**
|
|
132
|
-
* Active filters row. Render only when one or more filters are active. Pass filter chips
|
|
133
|
-
* (Standard variant) or tokens (Query Builder variant) as children, optionally followed
|
|
134
|
-
* by `AddFilter` / `Clear`.
|
|
135
|
-
*/
|
|
111
|
+
/** Render only while a filter is active. */
|
|
136
112
|
ActiveFilters,
|
|
137
|
-
/** Non-editable filter chip
|
|
113
|
+
/** Non-editable filter chip. */
|
|
138
114
|
Chip,
|
|
139
|
-
/**
|
|
140
|
-
* Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
|
|
141
|
-
* popover trigger for editing values and an `×` dismiss button. The popover content
|
|
142
|
-
* is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
|
|
143
|
-
*/
|
|
115
|
+
/** Editable filter token; the caller supplies the edit popover via `popover`. */
|
|
144
116
|
Token: PageToolbarToken,
|
|
145
|
-
/** "+ Add filter" action — typically rendered after the chips/tokens in `ActiveFilters`. */
|
|
146
117
|
AddFilter,
|
|
147
|
-
/** "Clear all" action — self-aligns to the far right of `ActiveFilters`. */
|
|
148
118
|
Clear
|
|
149
119
|
});
|
|
150
120
|
//#endregion
|
|
151
121
|
export { PageToolbar };
|
|
152
122
|
|
|
153
|
-
//# sourceMappingURL=PageToolbar-
|
|
123
|
+
//# sourceMappingURL=PageToolbar-DOAtAnfL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PageToolbar-DOAtAnfL.js","names":[],"sources":["../src/blocks/PageToolbar/PageToolbarToken.tsx","../src/blocks/PageToolbar/PageToolbar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Popover } from '../../components/Popover';\nimport { ChevronDown, X } from '../../icons';\n\ntype PageToolbarTokenProps = Omit<\n ComponentPropsWithoutRef<typeof Badge>,\n 'variant' | 'color' | 'suffix' | 'children' | 'asChild' | 'popover'\n> & {\n children: ReactNode;\n /** Popover content rendered when the chevron-down trigger is clicked — typically a value editor. */\n popover: ReactNode;\n onRemove: () => void;\n removeAriaLabel: string;\n};\n\n/**\n * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`\n * popover trigger for editing values and an `×` dismiss button. The popover content\n * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).\n */\nexport const PageToolbarToken = ({\n children,\n popover,\n onRemove,\n removeAriaLabel,\n ...props\n}: PageToolbarTokenProps) => (\n <Popover>\n <Badge\n {...props}\n asChild\n variant=\"pill\"\n color=\"blue-inverse\"\n suffix={\n <Button\n type=\"button\"\n variant=\"inline\"\n size=\"icon-2xs\"\n aria-label={removeAriaLabel}\n onClick={onRemove}\n >\n <X className=\"tw:size-3\" />\n </Button>\n }\n >\n <Popover.Trigger\n type=\"button\"\n className=\"tw:inline-flex tw:cursor-pointer tw:items-center tw:gap-1 tw:bg-inherit tw:text-inherit tailwindcss-preflight\"\n >\n {children}\n <ChevronDown className=\"tw:size-3\" />\n </Popover.Trigger>\n </Badge>\n <Popover.Content align=\"start\">{popover}</Popover.Content>\n </Popover>\n);\n","import type { ComponentProps, ComponentPropsWithoutRef, ReactNode } from 'react';\n\nimport { Badge } from '../../components/Badge';\nimport { Button } from '../../components/Button';\nimport { Plus, X } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PageToolbarToken } from './PageToolbarToken';\n\ntype DivProps = ComponentProps<'div'>;\n\nconst Root = ({ ref, className, children, ...props }: DivProps) => (\n <div\n ref={ref}\n className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:w-full', className)}\n {...props}\n >\n {children}\n </div>\n);\n\nconst Search = ({ ref, className, children, ...props }: DivProps) => (\n <div\n ref={ref}\n className={cn(\n 'tw:mr-auto tw:flex tw:items-center tw:gap-2 tw:w-full tw:sm:w-auto tw:sm:min-w-64 tw:sm:max-w-md',\n // The search field fills the slot, else it stays content-width and truncates its placeholder.\n // - First child only: stretching the filter pills after it would size them like the input.\n // - `min-w-0` so a long value shrinks the input rather than overflowing the toolbar.\n 'tw:*:first:min-w-0 tw:*:first:flex-1',\n className,\n )}\n {...props}\n >\n {children}\n </div>\n);\n\nconst Right = ({ ref, className, children, ...props }: DivProps) => (\n <div\n ref={ref}\n className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2', className)}\n {...props}\n >\n {children}\n </div>\n);\n\nconst ControlGroup = ({ ref, className, children, ...props }: DivProps) => (\n <div ref={ref} className={cn('tw:flex tw:items-center tw:gap-2', className)} {...props}>\n {children}\n </div>\n);\n\nconst ActiveFilters = ({ ref, className, children, ...props }: DivProps) => (\n <div\n ref={ref}\n className={cn('tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:basis-full', className)}\n {...props}\n >\n {children}\n </div>\n);\n\ntype ChipProps = Omit<\n ComponentPropsWithoutRef<typeof Badge>,\n 'variant' | 'color' | 'suffix' | 'children'\n> & {\n children: ReactNode;\n onRemove: () => void;\n removeAriaLabel: string;\n};\n\nconst Chip = ({ children, onRemove, removeAriaLabel, ...props }: ChipProps) => (\n <Badge\n {...props}\n variant=\"pill\"\n color=\"blue-inverse\"\n suffix={\n <Button\n type=\"button\"\n variant=\"inline\"\n size=\"icon-2xs\"\n aria-label={removeAriaLabel}\n onClick={onRemove}\n >\n <X className=\"tw:size-3\" />\n </Button>\n }\n >\n {children}\n </Badge>\n);\n\ntype ActionProps = ComponentPropsWithoutRef<typeof Button>;\n\nconst AddFilter = ({ className, children, ...props }: ActionProps) => (\n <Button variant=\"invisible\" size=\"small\" className={cn('tw:gap-1.5', className)} {...props}>\n <Plus className=\"tw:size-4\" />\n {children ?? 'Add filter'}\n </Button>\n);\n\nconst Clear = ({ className, children, ...props }: ActionProps) => (\n <Button variant=\"invisible\" size=\"small\" className={cn('tw:ml-auto', className)} {...props}>\n {children ?? 'Clear all'}\n </Button>\n);\n\n/**\n * Search / filter toolbar for index pages, between `PageLayout.Header` and `PageLayout.Content`.\n *\n * - Right cluster order: `Filters` → `Sort` → `Actions` → `View`; nothing after `View`.\n * - `ActiveFilters` only while a filter is active; chips or tokens, never both in one toolbar.\n *\n * @see https://github.com/evviku/design-system-docs/blob/main/docs/patterns/toolbar/toolbar.md\n */\nexport const PageToolbar = Object.assign(Root, {\n Search,\n Right,\n Filters: ControlGroup,\n Sort: ControlGroup,\n Actions: ControlGroup,\n /** Always last in the right cluster. */\n View: ControlGroup,\n /** Render only while a filter is active. */\n ActiveFilters,\n /** Non-editable filter chip. */\n Chip,\n /** Editable filter token; the caller supplies the edit popover via `popover`. */\n Token: PageToolbarToken,\n AddFilter,\n Clear,\n});\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAa,oBAAoB,EAC/B,UACA,SACA,UACA,iBACA,GAAG,YAEH,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,OAAD;CACE,GAAI;CACJ,SAAA;CACA,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGV,UAAA,qBAAC,QAAQ,SAAT;EACE,MAAK;EACL,WAAU;EAFZ,UAAA,CAIG,UACD,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,CACrB;;AACZ,CAAA,GACP,oBAAC,QAAQ,SAAT;CAAiB,OAAM;CAAS,UAAA;AAAyB,CAAA,CAClD,EAAA,CAAA;;;AC9CX,MAAM,QAAQ,EAAE,KAAK,WAAW,UAAU,GAAG,YAC3C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,2DAA2D,SAAS;CAClF,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,UAAU,EAAE,KAAK,WAAW,UAAU,GAAG,YAC7C,oBAAC,OAAD;CACO;CACL,WAAW,GACT,oGAIA,wCACA,SACF;CACA,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,SAAS,EAAE,KAAK,WAAW,UAAU,GAAG,YAC5C,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;CAEH;AACE,CAAA;AAGP,MAAM,gBAAgB,EAAE,KAAK,WAAW,UAAU,GAAG,YACnD,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,oCAAoC,SAAS;CAAG,GAAI;CAC9E;AACE,CAAA;AAGP,MAAM,iBAAiB,EAAE,KAAK,WAAW,UAAU,GAAG,YACpD,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,+DAA+D,SAAS;CACtF,GAAI;CAEH;AACE,CAAA;AAYP,MAAM,QAAQ,EAAE,UAAU,UAAU,iBAAiB,GAAG,YACtD,oBAAC,OAAD;CACE,GAAI;CACJ,SAAQ;CACR,OAAM;CACN,QACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,cAAY;EACZ,SAAS;EAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;CAGT;AACI,CAAA;AAKT,MAAM,aAAa,EAAE,WAAW,UAAU,GAAG,YAC3C,qBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAArF,UAAA,CACE,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA,GAC5B,YAAY,YACP;;AAGV,MAAM,SAAS,EAAE,WAAW,UAAU,GAAG,YACvC,oBAAC,QAAD;CAAQ,SAAQ;CAAY,MAAK;CAAQ,WAAW,GAAG,cAAc,SAAS;CAAG,GAAI;CAClF,UAAA,YAAY;AACP,CAAA;;;;;;;;;AAWV,MAAa,cAAc,OAAO,OAAO,MAAM;CAC7C;CACA;CACA,SAAS;CACT,MAAM;CACN,SAAS;;CAET,MAAM;;CAEN;;CAEA;;CAEA,OAAO;CACP;CACA;AACF,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-
|
|
3
|
-
import { Button } from "./Button-
|
|
2
|
+
import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-wcA70iQx.js";
|
|
3
|
+
import { Button } from "./Button-Ca4Q3VJU.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/Pagination/PaginationButton.tsx
|
|
6
6
|
const PaginationButton = ({ ref, active: isActive = false, className, children, size = "icon", ...props }) => /* @__PURE__ */ jsx(Button, {
|
|
@@ -67,4 +67,4 @@ Pagination.Ellipsis = PaginationEllipsis;
|
|
|
67
67
|
//#endregion
|
|
68
68
|
export { Pagination };
|
|
69
69
|
|
|
70
|
-
//# sourceMappingURL=Pagination-
|
|
70
|
+
//# sourceMappingURL=Pagination-LaSg-5cl.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination-
|
|
1
|
+
{"version":3,"file":"Pagination-LaSg-5cl.js","names":[],"sources":["../src/components/Pagination/PaginationButton.tsx","../src/components/Pagination/PaginationContent.tsx","../src/components/Pagination/PaginationEllipsis.tsx","../src/components/Pagination/PaginationItem.tsx","../src/components/Pagination/PaginationNext.tsx","../src/components/Pagination/PaginationPrevious.tsx","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype Props = {\n active?: boolean;\n} & Omit<ComponentProps<typeof Button>, 'variant'>;\n\nexport const PaginationButton = ({\n ref,\n active: isActive = false,\n className,\n children,\n size = 'icon',\n ...props\n}: Props) => (\n <Button\n {...props}\n ref={ref}\n variant=\"invisible\"\n size={size}\n data-slot=\"pagination-link\"\n aria-current={isActive ? 'page' : undefined}\n data-active={isActive}\n className={cn(\n 'tw:data-[active=true]:bg-accent',\n 'tw:data-[active=true]:text-accent-foreground',\n 'tw:data-[active=true]:border-accent',\n className,\n )}\n >\n {children}\n </Button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'ul'>;\n\nexport const PaginationContent = ({ className, ...props }: Props) => (\n <ul\n {...props}\n className={cn('tw:flex', 'tw:flex-row', 'tw:items-center', 'tw:gap-1', className)}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { Ellipsis } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const PaginationEllipsis = ({ className, ...props }: Props) => (\n <span\n aria-hidden=\"true\"\n className={cn(\n // layout\n 'tw:flex',\n 'tw:p-2.5',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:text-foreground',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n className,\n )}\n {...props}\n >\n <Ellipsis />\n </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const PaginationItem = ({ className, ...props }: Props) => (\n <li className={cn('tw:list-none', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronRight } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationNext = ({ children, className, ...props }: Props) => (\n <PaginationButton\n {...props}\n aria-label=\"Go to next page\"\n size=\"medium\"\n className={cn('tw:flex-row-reverse', className)}\n >\n <ChevronRight className=\"tw:size-5\" />\n {children ?? 'Next'}\n </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronLeft } from '../../icons';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationPrevious = ({ children, ...props }: Props) => (\n <PaginationButton {...props} size=\"medium\" aria-label=\"Go to previous page\">\n <ChevronLeft className=\"tw:size-5\" />\n {children ?? 'Previous'}\n </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\nimport { PaginationContent } from './PaginationContent';\nimport { PaginationEllipsis } from './PaginationEllipsis';\nimport { PaginationItem } from './PaginationItem';\nimport { PaginationNext } from './PaginationNext';\nimport { PaginationPrevious } from './PaginationPrevious';\n\ntype Props = ComponentProps<'nav'>;\n\nexport const Pagination = ({ className, ...props }: Props) => (\n <nav\n {...props}\n aria-label=\"pagination\"\n className={cn(\n 'tailwindcss-preflight',\n 'tw:mx-auto',\n 'tw:flex',\n 'tw:w-full',\n 'tw:justify-center',\n className,\n )}\n />\n);\n\nPagination.Content = PaginationContent;\nPagination.Item = PaginationItem;\nPagination.Button = PaginationButton;\nPagination.Previous = PaginationPrevious;\nPagination.Next = PaginationNext;\nPagination.Ellipsis = PaginationEllipsis;\n"],"mappings":";;;;;AASA,MAAa,oBAAoB,EAC/B,KACA,QAAQ,WAAW,OACnB,WACA,UACA,OAAO,QACP,GAAG,YAEH,oBAAC,QAAD;CACE,GAAI;CACC;CACL,SAAQ;CACF;CACN,aAAU;CACV,gBAAc,WAAW,SAAS,KAAA;CAClC,eAAa;CACb,WAAW,GACT,mCACA,gDACA,uCACA,SACF;CAEC;AACK,CAAA;;;AC3BV,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAChD,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GAAG,WAAW,eAAe,mBAAmB,YAAY,SAAS;AACjF,CAAA;;;ACHH,MAAa,sBAAsB,EAAE,WAAW,GAAG,YACjD,oBAAC,QAAD;CACE,eAAY;CACZ,WAAW,GAET,WACA,YACA,mBACA,qBAEA,sBACA,gDACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,UAAD,CAAW,CAAA;AACP,CAAA;;;AClBR,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,MAAD;CAAI,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACE5D,MAAa,kBAAkB,EAAE,UAAU,WAAW,GAAG,YACvD,qBAAC,kBAAD;CACE,GAAI;CACJ,cAAW;CACX,MAAK;CACL,WAAW,GAAG,uBAAuB,SAAS;CAJhD,UAAA,CAME,oBAAC,cAAD,EAAc,WAAU,YAAa,CAAA,GACpC,YAAY,MACG;;;;ACVpB,MAAa,sBAAsB,EAAE,UAAU,GAAG,YAChD,qBAAC,kBAAD;CAAkB,GAAI;CAAO,MAAK;CAAS,cAAW;CAAtD,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,GACnC,YAAY,UACG;;;;ACCpB,MAAa,cAAc,EAAE,WAAW,GAAG,YACzC,oBAAC,OAAD;CACE,GAAI;CACJ,cAAW;CACX,WAAW,GACT,yBACA,cACA,WACA,aACA,qBACA,SACF;AACD,CAAA;AAGH,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,WAAW"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { Button } from "./Button-
|
|
2
|
+
import { Button } from "./Button-Ca4Q3VJU.js";
|
|
3
3
|
import { useStableCallback } from "./internal/hooks/useStableCallback.js";
|
|
4
|
-
import { Popover } from "./Popover-
|
|
4
|
+
import { Popover } from "./Popover-CEk915I1.js";
|
|
5
5
|
import { Slot } from "@radix-ui/react-slot";
|
|
6
6
|
import { createContext, use, useMemo, useState } from "react";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -163,4 +163,4 @@ Popconfirm.Trigger = PopconfirmTrigger;
|
|
|
163
163
|
//#endregion
|
|
164
164
|
export { Popconfirm };
|
|
165
165
|
|
|
166
|
-
//# sourceMappingURL=Popconfirm-
|
|
166
|
+
//# sourceMappingURL=Popconfirm-SLz0zodk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popconfirm-5pBzT_HQ.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n variant: 'confirm' | 'danger';\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n enabled: boolean;\n isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n const context = use(PopconfirmContext);\n if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n return context;\n};\n","import type { ComponentProps } from 'react';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmBody = (props: Props) => <div {...props} />;\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onCancel, isLoading } = usePopconfirmContext();\n\n const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onCancel(event);\n };\n\n return (\n <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n {children ?? 'Cancel'}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onConfirm(event);\n };\n\n const defaultLabel = (() => {\n if (children) return children;\n return variant === 'danger' ? 'Delete' : 'Confirm';\n })();\n\n return (\n <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button\n size=\"small\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n {...props}\n ref={ref}\n className={cn('tw:flex-1', className)}\n isLoading={isLoading}\n >\n {defaultLabel}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;\n\nexport const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {\n const { isLoading } = usePopconfirmContext();\n\n const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n if (isLoading) event.preventDefault();\n onInteractOutside?.(event);\n };\n\n return (\n <Popover.Content\n {...props}\n onInteractOutside={handleOnInteractOutside}\n className={cn('tw:flex', 'tw:flex-col', 'tw:gap-3', 'tw:px-4', 'tw:py-3', className)}\n />\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n <div {...props} className={cn('tw:flex tw:gap-2 tw:w-full', className)} />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n const { enabled, onConfirm } = usePopconfirmContext();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!enabled) {\n event.preventDefault();\n onConfirm(event);\n }\n\n onClick?.(event);\n };\n\n return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n children: ReactNode;\n skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n variant = 'confirm',\n enabled = true,\n onOpenChange = noop,\n open,\n skipAsyncWait = false,\n ...rest\n}: Props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const handleConfirm = useStableCallback(onConfirm);\n const handleCancel = useStableCallback(onCancel);\n\n const handleOnOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange(open);\n };\n\n const context = useMemo<PopconfirmContextType>(\n () => ({\n variant,\n isLoading,\n enabled,\n onConfirm: (event) => {\n const result = handleConfirm(event);\n\n if (!(result instanceof Promise) || skipAsyncWait) return;\n\n // The async confirm's outcome drives the popover.\n // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n // - Resolved closes it; rejected leaves it up so the failure stays visible.\n // - The rejection is deliberately not caught — the host's global handler reports it.\n event.preventDefault();\n setIsLoading(true);\n result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n },\n onCancel: handleCancel,\n }),\n [variant, isLoading, enabled, skipAsyncWait, handleConfirm, handleCancel],\n );\n\n return (\n <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n </Popover>\n );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":";;;;;;;;AAUA,MAAM,oBAAoB,cAA4C,IAAI;AAE1E,MAAa,4BAA4B;AAEzC,MAAa,6BAA6B;CACxC,MAAM,UAAU,IAAI,iBAAiB;CACrC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,uDAAuD;CACrF,OAAO;AACT;;;ACdA,MAAa,kBAAkB,UAAiB,oBAAC,OAAD,EAAK,GAAI,MAAQ,CAAA;;;ACYjE,MAAa,oBAAoB,EAC/B,KACA,SACA,UACA,SACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,UAAU,cAAc,qBAAqB;CAErD,MAAM,eAAoD,UAAU;EAClE,UAAU,KAAK;EACf,SAAS,KAAK;CAChB;CAEA,OACE,oBAAC,QAAQ,OAAT;EAAe,SAAA;EAAQ,SAAS;EAAa,UAAU;EACpD,UAAA,UACC,oBAAC,MAAD;GAAM,GAAI;GAAY;GAAgB;GACnC;EACG,CAAA,IAEN,oBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAAQ,GAAI;GAAY;GAAK,WAAW,GAAG,SAAS;GAChF,UAAA,YAAY;EACP,CAAA;CAEG,CAAA;AAEnB;;;AC5BA,MAAa,qBAAqB,EAChC,KACA,SACA,UACA,SACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,SAAS,cAAc,qBAAqB;CAE/D,MAAM,iBAAsD,UAAU;EACpE,UAAU,KAAK;EACf,UAAU,KAAK;CACjB;CAEA,MAAM,sBAAsB;EAC1B,IAAI,UAAU,OAAO;EACrB,OAAO,YAAY,WAAW,WAAW;CAC3C,EAAA,CAAG;CAEH,OACE,oBAAC,QAAQ,OAAT;EAAe,SAAA;EAAQ,SAAS;EAAe,UAAU;EAAW,gBAAc;EAC/E,UAAA,UACC,oBAAC,MAAD;GAAM,GAAI;GAAY;GAAgB;GACnC;EACG,CAAA,IAEN,oBAAC,QAAD;GACE,MAAK;GACL,SAAS,YAAY,WAAW,WAAW;GAC3C,GAAI;GACC;GACL,WAAW,GAAG,aAAa,SAAS;GACzB;GAEV,UAAA;EACK,CAAA;CAEG,CAAA;AAEnB;;;AC/CA,MAAa,qBAAqB,EAAE,WAAW,mBAAmB,GAAG,YAAmB;CACtF,MAAM,EAAE,cAAc,qBAAqB;CAE3C,MAAM,2BAAuD,UAAU;EACrE,IAAI,WAAW,MAAM,eAAe;EACpC,oBAAoB,KAAK;CAC3B;CAEA,OACE,oBAAC,QAAQ,SAAT;EACE,GAAI;EACJ,mBAAmB;EACnB,WAAW,GAAG,WAAW,eAAe,YAAY,WAAW,WAAW,SAAS;CACpF,CAAA;AAEL;;;AClBA,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,GAAG,8BAA8B,SAAS;AAAI,CAAA;;;ACC3E,MAAa,qBAAqB,EAAE,SAAS,GAAG,YAAmB;CACjE,MAAM,EAAE,SAAS,cAAc,qBAAqB;CAEpD,MAAM,eAAqD,UAAU;EACnE,IAAI,CAAC,SAAS;GACZ,MAAM,eAAe;GACrB,UAAU,KAAK;EACjB;EAEA,UAAU,KAAK;CACjB;CAEA,OAAO,oBAAC,QAAQ,SAAT;EAAiB,GAAI;EAAO,SAAS;CAAc,CAAA;AAC5D;;;ACPA,MAAM,aAAa,KAAK;AAQxB,MAAa,cAAc,EACzB,UACA,YAAY,MACZ,WAAW,MACX,UAAU,WACV,UAAU,MACV,eAAe,MACf,MACA,gBAAgB,OAChB,GAAG,WACQ;CACX,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,gBAAgB,kBAAkB,SAAS;CACjD,MAAM,eAAe,kBAAkB,QAAQ;CAE/C,MAAM,sBAAsB,SAAkB;EAC5C,UAAU,IAAI;EACd,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,YAAY,UAAU;GACpB,MAAM,SAAS,cAAc,KAAK;GAElC,IAAI,EAAE,kBAAkB,YAAY,eAAe;GAMnD,MAAM,eAAe;GACrB,aAAa,IAAI;GACjB,OAAO,WAAW,UAAU,KAAK,CAAC,CAAC,CAAC,cAAc,aAAa,KAAK,CAAC;EACvE;EACA,UAAU;CACZ,IACA;EAAC;EAAS;EAAW;EAAS;EAAe;EAAe;CAAY,CAC1E;CAEA,OACE,oBAAC,SAAD;EAAS,GAAI;EAAM,MAAM,QAAQ;EAAQ,cAAc;EACrD,UAAA,oBAAC,2BAAD;GAA2B,OAAO;GAAU;EAAoC,CAAA;CACzE,CAAA;AAEb;AAEA,WAAW,UAAU;AACrB,WAAW,SAAS;AACpB,WAAW,SAAS;AACpB,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,UAAU"}
|
|
1
|
+
{"version":3,"file":"Popconfirm-SLz0zodk.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n variant: 'confirm' | 'danger';\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n enabled: boolean;\n isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n const context = use(PopconfirmContext);\n if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n return context;\n};\n","import type { ComponentProps } from 'react';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmBody = (props: Props) => <div {...props} />;\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onCancel, isLoading } = usePopconfirmContext();\n\n const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onCancel(event);\n };\n\n return (\n <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n {children ?? 'Cancel'}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onConfirm(event);\n };\n\n const defaultLabel = (() => {\n if (children) return children;\n return variant === 'danger' ? 'Delete' : 'Confirm';\n })();\n\n return (\n <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button\n size=\"small\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n {...props}\n ref={ref}\n className={cn('tw:flex-1', className)}\n isLoading={isLoading}\n >\n {defaultLabel}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;\n\nexport const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {\n const { isLoading } = usePopconfirmContext();\n\n const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n if (isLoading) event.preventDefault();\n onInteractOutside?.(event);\n };\n\n return (\n <Popover.Content\n {...props}\n onInteractOutside={handleOnInteractOutside}\n className={cn('tw:flex', 'tw:flex-col', 'tw:gap-3', 'tw:px-4', 'tw:py-3', className)}\n />\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n <div {...props} className={cn('tw:flex tw:gap-2 tw:w-full', className)} />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n const { enabled, onConfirm } = usePopconfirmContext();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!enabled) {\n event.preventDefault();\n onConfirm(event);\n }\n\n onClick?.(event);\n };\n\n return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n children: ReactNode;\n skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n variant = 'confirm',\n enabled = true,\n onOpenChange = noop,\n open,\n skipAsyncWait = false,\n ...rest\n}: Props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const handleConfirm = useStableCallback(onConfirm);\n const handleCancel = useStableCallback(onCancel);\n\n const handleOnOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange(open);\n };\n\n const context = useMemo<PopconfirmContextType>(\n () => ({\n variant,\n isLoading,\n enabled,\n onConfirm: (event) => {\n const result = handleConfirm(event);\n\n if (!(result instanceof Promise) || skipAsyncWait) return;\n\n // The async confirm's outcome drives the popover.\n // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n // - Resolved closes it; rejected leaves it up so the failure stays visible.\n // - The rejection is deliberately not caught — the host's global handler reports it.\n event.preventDefault();\n setIsLoading(true);\n result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n },\n onCancel: handleCancel,\n }),\n [variant, isLoading, enabled, skipAsyncWait, handleConfirm, handleCancel],\n );\n\n return (\n <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n </Popover>\n );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { useArgoDesign } from "./context-
|
|
2
|
+
import { useArgoDesign } from "./context-U293r3v-.js";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
|
-
import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
|
|
5
|
+
import { Anchor, Close, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
|
|
6
6
|
//#region src/components/Popover/PopoverContent.tsx
|
|
7
7
|
const variants = cva([
|
|
8
8
|
"tailwindcss-preflight",
|
|
@@ -81,8 +81,9 @@ const Popover = (props) => /* @__PURE__ */ jsx(Root, { ...props });
|
|
|
81
81
|
*/
|
|
82
82
|
Popover.Content = PopoverContent;
|
|
83
83
|
Popover.Trigger = Trigger;
|
|
84
|
+
Popover.Anchor = Anchor;
|
|
84
85
|
Popover.Close = Close;
|
|
85
86
|
//#endregion
|
|
86
87
|
export { Popover };
|
|
87
88
|
|
|
88
|
-
//# sourceMappingURL=Popover-
|
|
89
|
+
//# sourceMappingURL=Popover-CEk915I1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover-CEk915I1.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 sets `pointer-events: none` on <body>, which this portalled panel\n // inherits; outside-click dismiss 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 // Only radius differs; colours 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> &\n Omit<VariantProps<typeof variants>, 'variant'> & {\n /**\n * Portal target, default `document.body`; pass a theme-scoped host so the panel takes its theme.\n */\n container?: ComponentProps<typeof Portal>['container'];\n };\n\nexport const PopoverContent = ({\n ref,\n className,\n align = 'center',\n sideOffset = 4,\n matchTriggerWidth = false,\n children,\n onEscapeKeyDown,\n container,\n ...props\n}: Props) => {\n const effectiveVariant: NonNullable<VariantProps<typeof variants>['variant']> = useArgoDesign()\n ? 'argo'\n : 'default';\n return (\n <Portal container={container}>\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 // Keeps parent modals (e.g. 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 { Anchor, 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;\n// Positions a controlled popover against an element other than its trigger.\nPopover.Anchor = Anchor;\nPopover.Close = Close;\n"],"mappings":";;;;;;AAQA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAIA;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;EAER,SAAS;GACP,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,gBAAgB;EACzB;EACA,mBAAmB;GACjB,MAAM,CAAC,2CAA2C;GAClD,OAAO,CAAC;EACV;CACF;AACF,CACF;AAUA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,WACA,GAAG,YACQ;CACX,MAAM,mBAA0E,cAAc,IAC1F,SACA;CACJ,OACE,oBAAC,QAAD;EAAmB;EACjB,UAAA,oBAAC,SAAD;GACO;GACL,OAAO,oBAAoB,UAAU;GACzB;GACZ,WAAW,GAAG,SAAS;IAAE;IAAW;IAAmB,SAAS;GAAiB,CAAC,CAAC;GACnF,kBAAkB,UAAU;IAE1B,MAAM,gBAAgB;IACtB,kBAAkB,KAAK;GACzB;GACA,GAAI;GAEH;EACM,CAAA;CACH,CAAA;AAEZ;;;AChHA,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAElB,QAAQ,SAAS;AACjB,QAAQ,QAAQ"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { Tooltip } from "./utils-
|
|
3
|
-
import { useArgoDesign } from "./context-
|
|
4
|
-
import { Circle } from "./icons-
|
|
2
|
+
import { Tooltip } from "./utils-Bd28bWgm.js";
|
|
3
|
+
import { useArgoDesign } from "./context-U293r3v-.js";
|
|
4
|
+
import { Circle } from "./icons-wcA70iQx.js";
|
|
5
5
|
import { Separator } from "./internal/components/Separator.js";
|
|
6
6
|
import { FieldBox } from "./FieldBox-D7DYtX_m.js";
|
|
7
7
|
import { createContext, use, useId } from "react";
|
|
@@ -230,4 +230,4 @@ RadioGroup.Separator = RadioGroupSeparator;
|
|
|
230
230
|
//#endregion
|
|
231
231
|
export { RadioGroup };
|
|
232
232
|
|
|
233
|
-
//# sourceMappingURL=RadioGroup-
|
|
233
|
+
//# sourceMappingURL=RadioGroup-CBPRLRN0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup-CUBsuP7r.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/styles.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n variant: Variant;\n orientation: Orientation;\n}>({\n variant: 'radio',\n orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import { cva } from 'class-variance-authority';\n\nexport const radioVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n 'tw:shrink-0',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n 'tw:size-4',\n\n // border\n 'tw:rounded-full',\n 'tw:border',\n 'tw:border-solid',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=unchecked]:border-neutral-200',\n 'tw:data-[state=unchecked]:hover:border-primary',\n 'tw:data-[state=unchecked]:disabled:hover:border-neutral-200',\n\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n\n 'tw:border-input',\n 'tw:transition-colors',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=checked]:not-disabled:hover:bg-primary',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport const radioIndicatorVariants = cva(['tw:size-2.5', 'tw:fill-current'], {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: ['tw:text-primary'],\n argo: ['tw:text-primary-foreground'],\n },\n },\n});\n\nexport const radioItemButtonVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n // layouts\n 'tw:w-full',\n 'tw:px-2',\n 'tw:py-1.5',\n\n // fonts\n 'tw:uppercase',\n 'tw:font-semibold',\n 'tw:font-sans',\n 'tw:text-[11px]',\n 'tw:whitespace-nowrap',\n 'tw:tracking-widest',\n 'tw:leading-[18px]',\n\n // border\n 'tw:border',\n 'tw:border-solid',\n 'tw:rounded',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n 'tw:text-secondary-600',\n 'tw:border-secondary-500',\n\n 'tw:data-[state=unchecked]:hover:bg-secondary-500',\n 'tw:data-[state=unchecked]:hover:text-white',\n\n 'tw:data-[state=unchecked]:disabled:hover:bg-white',\n 'tw:data-[state=unchecked]:disabled:hover:text-secondary-500',\n 'tw:data-[state=checked]:disabled:cursor-not-allowed',\n\n 'tw:data-[state=unchecked]:bg-white',\n 'tw:data-[state=checked]:bg-secondary-500',\n 'tw:data-[state=checked]:text-white',\n 'tw:data-[state=checked]:cursor-default',\n\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-ring',\n 'tw:focus-visible:ring-4',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n 'tw:text-foreground',\n 'tw:border-input',\n 'tw:transition-colors',\n\n // muted filled control surface — gray, distinct from white containers; not the app-background token\n 'tw:data-[state=unchecked]:bg-muted',\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=unchecked]:not-disabled:hover:text-accent-foreground',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=checked]:text-primary-foreground',\n 'tw:data-[state=checked]:not-disabled:cursor-default',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport type RadioStyleVariant = 'default' | 'argo';\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n <Item {...props} className={cn(radioVariants({ variant: styleVariant }), className)}>\n <Indicator className={cn('tw:flex', 'tw:items-center', 'tw:justify-center')}>\n {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)\n so the indicator reads as a solid dot. */}\n <Circle className={radioIndicatorVariants({ variant: styleVariant })} />\n </Indicator>\n </Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const RadioGroupItemButton = ({\n ref,\n className,\n children,\n styleVariant = 'default',\n ...props\n}: Props) => (\n <Item\n ref={ref}\n {...props}\n className={cn(radioItemButtonVariants({ variant: styleVariant }), className)}\n >\n {children}\n </Item>\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { useRadioGroupContext } from './context';\nimport { Radio } from './Radio';\nimport { RadioGroupItemButton } from './RadioGroupItemButton';\n\ntype ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;\n\ntype Props<T extends string = string> = ItemProps & {\n value: T;\n tooltip?: ReactNode;\n tooltipVariant?: TooltipProps['variant'];\n tooltipPlacement?: TooltipProps['placement'];\n description?: ReactNode;\n};\n\nexport const RadioGroupItem = <T extends string = string>({\n children,\n className,\n tooltip,\n tooltipVariant,\n tooltipPlacement,\n description,\n ...props\n}: Props<T>) => {\n const { variant } = useRadioGroupContext();\n const styleVariant = useArgoDesign() ? 'argo' : 'default';\n const id = useId();\n\n const item = (() => {\n if (variant === 'button')\n return (\n <RadioGroupItemButton styleVariant={styleVariant} {...props} className={className}>\n {children}\n </RadioGroupItemButton>\n );\n\n return (\n <FieldBox\n variant={variant === 'radio-block' ? 'boxed' : 'default'}\n htmlFor={id}\n control={<Radio styleVariant={styleVariant} {...props} id={id} />}\n className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n >\n <FieldBox.Title>{children}</FieldBox.Title>\n {description && <FieldBox.Description>{description}</FieldBox.Description>}\n </FieldBox>\n );\n })();\n\n if (!tooltip) {\n return item;\n }\n\n return (\n <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n {item}\n </Tooltip>\n );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n const { orientation } = useRadioGroupContext();\n const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n const size = orientation === 'horizontal' ? '1/2' : 'full';\n const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n variants: {\n orientation: {\n horizontal: ['tw:gap-2'],\n vertical: ['tw:flex-col', 'tw:gap-3'],\n },\n variant: {\n button: [],\n radio: [],\n 'radio-block': ['tw:w-full'],\n },\n },\n});\n\ntype Props<Value> = {\n variant?: Variant;\n orientation?: Orientation;\n onValueChange?: (value: Value) => void;\n value?: Value | null;\n defaultValue?: Value | null;\n} & Omit<\n ComponentProps<typeof RRadioGroup.Root>,\n 'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n variant = 'radio',\n className,\n disabled = false,\n orientation = 'horizontal',\n onValueChange,\n children,\n value,\n defaultValue,\n ...props\n}: Props<Value>) => (\n <RRadioGroup.Root\n {...props}\n onValueChange={onValueChange}\n orientation={orientation}\n className={cn(radioGroupVariants({ orientation, variant, className }))}\n disabled={disabled}\n value={value ?? void 0}\n defaultValue={defaultValue ?? void 0}\n >\n <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RadioGroup-CBPRLRN0.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/styles.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n variant: Variant;\n orientation: Orientation;\n}>({\n variant: 'radio',\n orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import { cva } from 'class-variance-authority';\n\nexport const radioVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n 'tw:shrink-0',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n 'tw:size-4',\n\n // border\n 'tw:rounded-full',\n 'tw:border',\n 'tw:border-solid',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=unchecked]:border-neutral-200',\n 'tw:data-[state=unchecked]:hover:border-primary',\n 'tw:data-[state=unchecked]:disabled:hover:border-neutral-200',\n\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n\n 'tw:border-input',\n 'tw:transition-colors',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=checked]:not-disabled:hover:bg-primary',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport const radioIndicatorVariants = cva(['tw:size-2.5', 'tw:fill-current'], {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: ['tw:text-primary'],\n argo: ['tw:text-primary-foreground'],\n },\n },\n});\n\nexport const radioItemButtonVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n // layouts\n 'tw:w-full',\n 'tw:px-2',\n 'tw:py-1.5',\n\n // fonts\n 'tw:uppercase',\n 'tw:font-semibold',\n 'tw:font-sans',\n 'tw:text-[11px]',\n 'tw:whitespace-nowrap',\n 'tw:tracking-widest',\n 'tw:leading-[18px]',\n\n // border\n 'tw:border',\n 'tw:border-solid',\n 'tw:rounded',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n 'tw:text-secondary-600',\n 'tw:border-secondary-500',\n\n 'tw:data-[state=unchecked]:hover:bg-secondary-500',\n 'tw:data-[state=unchecked]:hover:text-white',\n\n 'tw:data-[state=unchecked]:disabled:hover:bg-white',\n 'tw:data-[state=unchecked]:disabled:hover:text-secondary-500',\n 'tw:data-[state=checked]:disabled:cursor-not-allowed',\n\n 'tw:data-[state=unchecked]:bg-white',\n 'tw:data-[state=checked]:bg-secondary-500',\n 'tw:data-[state=checked]:text-white',\n 'tw:data-[state=checked]:cursor-default',\n\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-ring',\n 'tw:focus-visible:ring-4',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n 'tw:text-foreground',\n 'tw:border-input',\n 'tw:transition-colors',\n\n // muted filled control surface — gray, distinct from white containers; not the app-background token\n 'tw:data-[state=unchecked]:bg-muted',\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=unchecked]:not-disabled:hover:text-accent-foreground',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=checked]:text-primary-foreground',\n 'tw:data-[state=checked]:not-disabled:cursor-default',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport type RadioStyleVariant = 'default' | 'argo';\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n <Item {...props} className={cn(radioVariants({ variant: styleVariant }), className)}>\n <Indicator className={cn('tw:flex', 'tw:items-center', 'tw:justify-center')}>\n {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)\n so the indicator reads as a solid dot. */}\n <Circle className={radioIndicatorVariants({ variant: styleVariant })} />\n </Indicator>\n </Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const RadioGroupItemButton = ({\n ref,\n className,\n children,\n styleVariant = 'default',\n ...props\n}: Props) => (\n <Item\n ref={ref}\n {...props}\n className={cn(radioItemButtonVariants({ variant: styleVariant }), className)}\n >\n {children}\n </Item>\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { useRadioGroupContext } from './context';\nimport { Radio } from './Radio';\nimport { RadioGroupItemButton } from './RadioGroupItemButton';\n\ntype ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;\n\ntype Props<T extends string = string> = ItemProps & {\n value: T;\n tooltip?: ReactNode;\n tooltipVariant?: TooltipProps['variant'];\n tooltipPlacement?: TooltipProps['placement'];\n description?: ReactNode;\n};\n\nexport const RadioGroupItem = <T extends string = string>({\n children,\n className,\n tooltip,\n tooltipVariant,\n tooltipPlacement,\n description,\n ...props\n}: Props<T>) => {\n const { variant } = useRadioGroupContext();\n const styleVariant = useArgoDesign() ? 'argo' : 'default';\n const id = useId();\n\n const item = (() => {\n if (variant === 'button')\n return (\n <RadioGroupItemButton styleVariant={styleVariant} {...props} className={className}>\n {children}\n </RadioGroupItemButton>\n );\n\n return (\n <FieldBox\n variant={variant === 'radio-block' ? 'boxed' : 'default'}\n htmlFor={id}\n control={<Radio styleVariant={styleVariant} {...props} id={id} />}\n className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n >\n <FieldBox.Title>{children}</FieldBox.Title>\n {description && <FieldBox.Description>{description}</FieldBox.Description>}\n </FieldBox>\n );\n })();\n\n if (!tooltip) {\n return item;\n }\n\n return (\n <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n {item}\n </Tooltip>\n );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n const { orientation } = useRadioGroupContext();\n const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n const size = orientation === 'horizontal' ? '1/2' : 'full';\n const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n variants: {\n orientation: {\n horizontal: ['tw:gap-2'],\n vertical: ['tw:flex-col', 'tw:gap-3'],\n },\n variant: {\n button: [],\n radio: [],\n 'radio-block': ['tw:w-full'],\n },\n },\n});\n\ntype Props<Value> = {\n variant?: Variant;\n orientation?: Orientation;\n onValueChange?: (value: Value) => void;\n value?: Value | null;\n defaultValue?: Value | null;\n} & Omit<\n ComponentProps<typeof RRadioGroup.Root>,\n 'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n variant = 'radio',\n className,\n disabled = false,\n orientation = 'horizontal',\n onValueChange,\n children,\n value,\n defaultValue,\n ...props\n}: Props<Value>) => (\n <RRadioGroup.Root\n {...props}\n onValueChange={onValueChange}\n orientation={orientation}\n className={cn(radioGroupVariants({ orientation, variant, className }))}\n disabled={disabled}\n value={value ?? void 0}\n defaultValue={defaultValue ?? void 0}\n >\n <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { createPrefixedString, debounce, noop } from "./utils-
|
|
3
|
-
import { Search as Search$1, Sparkles, X } from "./icons-
|
|
2
|
+
import { createPrefixedString, debounce, noop } from "./utils-Bd28bWgm.js";
|
|
3
|
+
import { Search as Search$1, Sparkles, X } from "./icons-wcA70iQx.js";
|
|
4
4
|
import { useEffect, useMemo, useState } from "react";
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -181,4 +181,4 @@ const SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
|
|
|
181
181
|
//#endregion
|
|
182
182
|
export { Search, SearchForm };
|
|
183
183
|
|
|
184
|
-
//# sourceMappingURL=Search-
|
|
184
|
+
//# sourceMappingURL=Search-DmkQo716.js.map
|