@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
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox-BfanUAqY.js","names":["BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","BaseCombobox","Combobox","BaseCombobox"],"sources":["../src/components/Combobox/blankValues.ts","../src/components/Combobox/ComboboxChip.tsx","../src/components/Combobox/utils.ts","../src/components/Combobox/ComboboxChips.tsx","../src/components/Combobox/ComboboxContent.tsx","../src/components/Combobox/ComboboxEmpty.tsx","../src/components/Combobox/ComboboxInput.tsx","../src/components/Combobox/ComboboxInputGroup.tsx","../src/components/Combobox/ComboboxItemIndicator.tsx","../src/components/Combobox/ComboboxItem.tsx","../src/components/Combobox/ComboboxList.tsx","../src/components/Combobox/ComboboxRoot.tsx","../src/components/Combobox/ComboboxSeparator.tsx","../src/components/Combobox/Group/ComboboxGroup.tsx","../src/components/Combobox/Group/ComboboxGroupLabel.tsx","../src/components/Combobox/Group/ComboboxCollection.tsx","../src/components/Combobox/query.ts","../src/components/Combobox/Combobox.tsx","../src/components/Combobox/matchByWords.ts"],"sourcesContent":["/**\n * The two blank strings a Storage filter predicates on, in list order.\n *\n * - Reach for {@link withBlankValues} to offer them; this is the pair itself.\n */\nconst BLANK_VALUES = ['', ' '] as const;\n\nconst BLANK_LABELS: Record<string, string> = {\n '': '[empty string]',\n ' ': '[space character]',\n};\n\n/**\n * A string as a row or a chip shows it — named when its text is blank, itself otherwise.\n *\n * - Exported so an `itemToLabel` / `itemToChipLabel` / `itemToSelectedLabel` / `renderChips`\n * override can keep the default naming instead of retyping the labels.\n * - The two blank values get their own labels; any other whitespace-only string (a tab, a run of\n * spaces) falls back to a generic one, so two different ones read alike.\n * - Identity is unaffected — `toLabel` keys items off the raw string.\n */\nexport const namedLabel = (text: string): string =>\n text.trim() === '' ? (BLANK_LABELS[text] ?? '[whitespace]') : text;\n\n/**\n * `values` with both blank values offered ahead of them, and duplicates collapsed.\n *\n * - The dedupe matters where the list is the distinct values of a Storage column: it can already\n * hold a blank, and two `Object.is`-equal rows both report `aria-selected` and toggle each other.\n * - First occurrence wins, so the order of the values is otherwise preserved.\n * - String items only — the seven Storage filters this serves are all string-valued.\n */\nexport const withBlankValues = (values: readonly string[]): string[] => [\n ...new Set([...BLANK_VALUES, ...values]),\n];\n","import type { ComponentProps, KeyboardEvent, ReactNode } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { X } from '../../icons';\nimport { Badge } from '../Badge';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nexport type BadgeColor = ComponentProps<typeof Badge>['color'];\nexport type BadgeVariant = ComponentProps<typeof Badge>['variant'];\n\n/**\n * Keeps a chip's own keyboard handling off its content's.\n *\n * - Base UI's chip calls `preventDefault` on Enter and Space, which would cancel the activation of\n * a link or button rendered inside the chip.\n * - Capture phase, because React dispatches capture and bubble in one pass over the event path:\n * stopping here means the chip's own bubble handler never runs.\n * - Guarded on the target, so keys the chip itself receives while focused — Backspace, Delete, the\n * arrows — still reach that handler.\n */\nconst stopNestedKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n if (event.target !== event.currentTarget) event.stopPropagation();\n};\n\ntype Props = {\n children: ReactNode;\n color?: BadgeColor;\n variant?: BadgeVariant;\n};\n\n/**\n * One chip in a `MultiCombobox`'s chip area — Badge chrome plus the remove button.\n *\n * - Position is the identity: Base UI removes the chip at an index, so render one per entry of\n * `value`, in that order. There is no value prop to pass.\n * - `children` is the chip's content, so it can hold a link or an action of its own.\n * - Renders inside a `MultiCombobox`'s `renderChips` slot, or `Combobox.Chips`.\n * - A chip the user cannot remove is a plain `Badge`, not a chip — a chip would take a position\n * that a removal counts against.\n */\nexport const ComboboxChip = ({ children, color, variant }: Props) => {\n const renderArgo = useArgoDesign();\n\n return (\n <BaseCombobox.Chip\n render={\n <Badge.Root\n color={color}\n variant={variant ?? (renderArgo ? 'pill' : 'default')}\n className=\"tw:max-w-40\"\n />\n }\n onKeyDownCapture={stopNestedKeyDown}\n >\n <Badge.Label>{children}</Badge.Label>\n <Badge.Addon variant=\"inline\" align=\"inline-end\">\n <BaseCombobox.ChipRemove\n render={\n <Badge.Button aria-label=\"Remove value\">\n <X className=\"tw:size-3\" />\n </Badge.Button>\n }\n />\n </Badge.Addon>\n </BaseCombobox.Chip>\n );\n};\n","import { namedLabel } from './blankValues';\nimport type { CreatableItem, Group, InternalItems, LabeledItem, SelectAllItem } from './types';\n\nconst isPlainObject = (item: unknown): item is Record<string, unknown> =>\n item !== null && typeof item === 'object';\n\nconst isNumber = (item: unknown): item is number => typeof item === 'number';\nconst isString = (item: unknown): item is string => typeof item === 'string';\n\nconst isLabeledItem = (item: unknown): item is LabeledItem =>\n isPlainObject(item) && Reflect.has(item, 'label') && Reflect.has(item, 'value');\n\nexport const isInternalItem = (item: unknown): item is InternalItems =>\n isLabeledItem(item) && '__marker' in item;\n\nexport const isSelectAllItem = (item: unknown): item is SelectAllItem =>\n isInternalItem(item) && item.__marker === 'selectAll';\n\nexport const isCreatableItem = (item: unknown): item is CreatableItem => {\n return isInternalItem(item) && item.__marker === 'creatable';\n};\n\nexport const isGroupItem = <Item>(itemOrGroup: Item | Group<Item>): itemOrGroup is Group<Item> =>\n itemOrGroup !== null && typeof itemOrGroup === 'object' && Reflect.has(itemOrGroup, 'items');\n\nexport const isGroupItems = <Item, GroupShape extends Group<Item> = Group<Item>>(\n items: readonly (Item | GroupShape)[],\n): items is GroupShape[] => {\n if (!Array.isArray(items)) return false;\n if (items.length === 0) return false; // Base UI treats an empty items array as non-grouped, so we must too for consistency\n return isGroupItem(items[0]); // Base UI only checks the first item to determine if it's a group or not, so we do the same for consistency\n};\n\n/**\n * Node a list row and a chip show for an item.\n *\n * - Names a blank string, because a row or a chip rendering as nothing is indistinguishable from\n * an empty control. {@link toLabel} deliberately does not, so the input keeps the raw value.\n * - A non-string `label` (a JSX node) passes through untouched.\n */\nexport const defaultItemToLabel = <Item>(item: Item) => {\n if (isNumber(item)) return item;\n if (isString(item)) return namedLabel(item);\n if (!isLabeledItem(item))\n throw new Error(\n 'Combobox: Item does not have a `label` field. Pass `itemToLabel` for custom item shapes.',\n );\n\n return isString(item.label) ? namedLabel(item.label) : item.label;\n};\n\n/**\n * Display string for an item — mirrors base-ui's own default logic.\n *\n * - Also the default search text and the closed `Combobox`'s input value, so it is the item's\n * string identity rather than its decoration.\n * - Blank strings are deliberately **not** named here: a `''` reaching this is as likely to be an\n * owner's \"nothing selected\" as a real value.\n * - Naming one would paint text into an empty input and suppress the placeholder.\n * - Naming lives in {@link defaultItemToLabel}, which only rows and chips read.\n */\nexport const toLabel = (item: unknown): string => {\n if (isString(item)) return item;\n if (isLabeledItem(item)) {\n if (item.label) return item.label;\n if (item.value) return item.value;\n }\n return String(item);\n};\n\n/** Equality key for an item — prefers .value for stable identity. */\nconst toValueKey = (item: unknown): string => {\n if (isString(item)) return item;\n if (isLabeledItem(item)) {\n if (item.value) return item.value;\n if (item.label) return item.label;\n }\n return String(item);\n};\n\nexport const defaultItemToIcon = <Item>(item: Item) =>\n isLabeledItem(item) ? item.icon : undefined;\n\nexport const defaultItemToDisabled = <Item>(item: Item) =>\n isLabeledItem(item) ? (item.disabled ?? false) : false;\n\nexport const defaultGroupToLabel = () => undefined;\n\n// Internal markers ------------------------------------------------------------\n// Both `selectAll` and `creatable` are LabeledItem-shaped sentinels that we\n// inject into the items list passed to Base UI. They carry a `__marker`\n// discriminator so consumer code (and user-supplied callbacks) can't collide\n// with them by accident.\n\nexport const selectAllItem: SelectAllItem = {\n __marker: 'selectAll',\n value: '__select_all__',\n label: 'Select All',\n};\n\nexport const createCreatableItem = (query: string): CreatableItem => ({\n __marker: 'creatable',\n value: query,\n label: query,\n});\n\n/**\n * Item-equality predicate for a Base UI combobox root.\n *\n * - An injected sentinel row equals only a sentinel of the same marker with the same value key —\n * the create row is rebuilt on every keystroke, so reference equality would never match it.\n * - A sentinel never equals a real item, however the two keys read: that is what the marker is for.\n * - Real items fall through to the caller's predicate, then to Base UI's own `Object.is`.\n */\nexport const toItemEquality =\n <Value>(isItemEqualToValue?: (a: Value, b: Value) => boolean) =>\n (a: Value, b: Value) => {\n if (isInternalItem(a) || isInternalItem(b)) {\n return (\n isInternalItem(a) &&\n isInternalItem(b) &&\n a.__marker === b.__marker &&\n toValueKey(a) === toValueKey(b)\n );\n }\n return isItemEqualToValue?.(a, b) ?? Object.is(a, b);\n };\n\nexport const defaultToCreateValue = <Value>(\n query: string,\n value: Value | undefined,\n queryToCreateValue?: (query: string) => Value,\n): Value => {\n if (queryToCreateValue) return queryToCreateValue(query);\n if (value === undefined) return query as Value;\n if (isString(value)) return query as Value;\n if (isLabeledItem(value)) return { value: query, label: query } as Value;\n throw new Error(\n 'Combobox: Cannot infer item shape for `allowCreate`. Pass `queryToCreateValue` for custom item shapes.',\n );\n};\n\nexport const defaultQueryToCreateLabel = (query: string) => `Create \"${query}\"`;\n","import type { ReactNode } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { Badge } from '../Badge';\n\nimport { type BadgeColor, type BadgeVariant, ComboboxChip } from './ComboboxChip';\nimport { defaultItemToLabel, isInternalItem } from './utils';\n\ntype Props<Value> = {\n maxVisible?: number;\n itemToChipLabel?: (item: Value) => ReactNode;\n itemToChipColor?: (item: Value) => BadgeColor;\n /**\n * Labels for chips the control shows but the user does not own — a pinned set the caller keeps.\n *\n * - Each label gets a chip of its own, ahead of the values and outside the `maxVisible` slice.\n * - No remove button, and no entry in `value` — there is nothing for a removal to report.\n */\n pinnedChipLabels?: ReactNode[];\n variant?: BadgeVariant;\n /**\n * Renders the chip area from the selected values, in place of the default chips.\n *\n * - Every other prop here is then unused: the caller decides what each value becomes and how\n * many of them show.\n * - Build removable chips with `Combobox.Chip`; nothing requires one chip per value.\n */\n children?: (values: Value[]) => ReactNode;\n};\n\nexport const ComboboxChips = <Value,>({\n maxVisible = 3,\n itemToChipLabel = defaultItemToLabel,\n itemToChipColor,\n pinnedChipLabels,\n variant = 'pill',\n children,\n}: Props<Value>) => (\n <BaseCombobox.Value>\n {(rawValues: Value[]) => {\n // The Select All row is an item like any other to Base UI, so a complete selection carries\n // its marker in `value`. It is the control's own bookkeeping, not something the user picked:\n // it gets no chip, and it never reaches the caller's `itemToChipLabel` / `itemToChipColor`.\n const values = rawValues.filter((value) => !isInternalItem(value));\n\n if (children) return children(values);\n\n const visible = values.slice(0, maxVisible);\n const overflow = values.slice(maxVisible);\n\n return (\n <>\n {pinnedChipLabels?.map((label, index) => (\n // oxlint-disable-next-line react/no-array-index-key\n <Badge key={index} className=\"tw:max-w-40\" variant={variant}>\n {label}\n </Badge>\n ))}\n\n {visible.map((value: Value, index) => (\n <ComboboxChip\n // oxlint-disable-next-line react/no-array-index-key\n key={index}\n color={itemToChipColor?.(value)}\n variant={variant}\n >\n {itemToChipLabel(value)}\n </ComboboxChip>\n ))}\n\n {overflow.length > 0 && (\n <Badge.Root variant=\"pill\">\n <Badge.Label>+{overflow.length}</Badge.Label>\n </Badge.Root>\n )}\n </>\n );\n }}\n </BaseCombobox.Value>\n);\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype PortalProps = ComponentProps<typeof BaseCombobox.Portal>;\ntype PositionerProps = ComponentProps<typeof BaseCombobox.Positioner>;\ntype PopupProps = Omit<ComponentProps<typeof BaseCombobox.Popup>, 'className'> & {\n className?: string;\n};\n\ntype Variant = 'default' | 'argo';\n\ntype Props = PopupProps &\n Pick<PositionerProps, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> &\n Pick<PortalProps, 'container'>;\n\nexport const ComboboxContent = ({\n ref,\n align = 'start',\n side = 'bottom',\n sideOffset = 4,\n alignOffset,\n anchor,\n container,\n className,\n children,\n ...popupProps\n}: Props) => {\n const effectiveVariant: Variant = useArgoDesign() ? 'argo' : 'default';\n return (\n <BaseCombobox.Portal container={container}>\n {/*\n * Registers the popup in Radix's layer stack.\n *\n * - Base UI portals the popup out of the DOM, so a surrounding Radix `Modal` / `Sheet` /\n * `Popover` would otherwise still count itself as topmost and close on Escape. Radix reads\n * the key off a document capture listener, so being a higher layer is the only lever.\n * - No `onDismiss`: Base UI closes the popup itself, the layer only claims the keystroke.\n */}\n <DismissableLayer asChild>\n <BaseCombobox.Positioner\n align={align}\n side={side}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n anchor={anchor}\n className=\"tw:isolate tw:z-[1055] tailwindcss-preflight\"\n >\n <BaseCombobox.Popup\n ref={ref}\n data-chips={!!anchor}\n data-variant={effectiveVariant}\n className={cn(\n 'tw:!pointer-events-auto',\n 'tw:group/combobox-content',\n 'tw:relative',\n 'tw:flex tw:flex-col tw:overflow-hidden',\n\n // sizing\n 'tw:max-h-[var(--available-height)]',\n 'tw:w-[var(--anchor-width)]',\n 'tw:max-w-[var(--available-width)]',\n 'tw:origin-[var(--transform-origin)]',\n 'tw:data-[chips=true]:min-w-[var(--anchor-width)]',\n\n // appearance\n 'tw:rounded-lg',\n 'tw:data-[variant=default]:rounded',\n\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n 'tw:shadow-md',\n 'tw:ring-1',\n 'tw:ring-foreground/10',\n 'tw:duration-100',\n\n // open animation\n 'data-open:animate-in',\n 'data-open:fade-in-0',\n 'data-open:zoom-in-95',\n\n // closed animation\n 'data-closed:animate-out',\n 'data-closed:fade-out-0',\n 'data-closed:zoom-out-95',\n\n // position animations\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=top]:slide-in-from-bottom-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=inline-start]:slide-in-from-right-2',\n 'tw:data-[side=inline-end]:slide-in-from-left-2',\n className,\n )}\n {...popupProps}\n >\n {children}\n </BaseCombobox.Popup>\n </BaseCombobox.Positioner>\n </DismissableLayer>\n </BaseCombobox.Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { cn } from '../../utils';\n\ntype Props = Omit<ComponentProps<typeof BaseCombobox.Empty>, 'className'> & {\n className?: string;\n};\n\nexport const ComboboxEmpty = ({ ref, className, ...props }: Props) => (\n <BaseCombobox.Empty\n ref={ref}\n className={cn(\n 'tw:hidden',\n 'tw:group-data-[empty]/combobox-content:flex',\n 'tw:justify-center',\n 'tw:items-center',\n 'tw:text-center',\n 'tw:px-2',\n 'tw:text-muted-foreground',\n 'tw:py-6',\n className,\n )}\n {...props}\n />\n);\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { InputGroup } from '../InputGroup';\n\ntype Props = Omit<ComponentProps<typeof BaseCombobox.Input>, 'render'>;\n\nexport const ComboboxInput = ({ ref, ...props }: Props) => (\n <BaseCombobox.Input {...props} ref={ref} render={<InputGroup.Input />} />\n);\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { InputGroup } from '../InputGroup';\n\ntype InputGroupProps = Pick<\n ComponentProps<typeof InputGroup>,\n 'variant' | 'focusVariant' | 'sizing' | 'state'\n>;\n\ntype Props = InputGroupProps &\n Omit<ComponentProps<typeof BaseCombobox.InputGroup>, 'render' | 'className'> & {\n className?: string;\n };\n\nexport const ComboboxInputGroup = ({\n ref,\n state,\n variant,\n sizing,\n focusVariant,\n className,\n ...props\n}: Props) => (\n <BaseCombobox.InputGroup\n {...props}\n ref={ref}\n render={\n <InputGroup\n state={state}\n variant={variant}\n focusVariant={focusVariant}\n sizing={sizing}\n className={className}\n />\n }\n />\n);\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { Check } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Variant = 'check' | 'checkbox';\n\ntype Props = Omit<ComponentProps<typeof BaseCombobox.ItemIndicator>, 'className' | 'children'> & {\n className?: string;\n variant?: Variant;\n};\n\nexport const ComboboxItemIndicator = ({ ref, className, variant = 'check', ...props }: Props) => {\n if (variant === 'checkbox') {\n return (\n <BaseCombobox.ItemIndicator\n ref={ref}\n keepMounted\n className={cn(\n 'tw:group/combobox-item-indicator',\n\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:size-4',\n 'tw:shrink-0',\n\n 'tw:rounded',\n 'tw:border',\n 'tw:border-input',\n 'tw:bg-background',\n\n 'tw:data-[selected]:bg-primary',\n 'tw:data-[selected]:border-primary',\n className,\n )}\n {...props}\n >\n <Check\n className={cn(\n 'tw:hidden',\n 'tw:size-3',\n 'tw:stroke-[4px]',\n 'tw:!text-primary-foreground',\n 'tw:group-data-[selected]/combobox-item-indicator:block',\n )}\n />\n </BaseCombobox.ItemIndicator>\n );\n }\n\n return (\n <BaseCombobox.ItemIndicator\n {...props}\n ref={ref}\n className={cn(\n 'tw:pointer-events-none',\n 'tw:absolute',\n 'tw:right-2',\n\n 'tw:group-data-[variant=default]/combobox-content:right-4',\n // `render={<Check />}` makes the icon the indicator element itself (not a descendant), so a\n // `[&_svg]` rule never matches it — size it directly or Lucide renders at its 24px default.\n 'tw:size-4',\n 'tw:group-data-[highlighted]/combobox-item:text-accent-foreground',\n 'tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground',\n className,\n )}\n render={<Check />}\n />\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { cn } from '../../utils';\n\nimport { ComboboxItemIndicator } from './ComboboxItemIndicator';\n\ntype Props = Omit<ComponentProps<typeof BaseCombobox.Item>, 'className'> & {\n className?: string;\n icon?: ReactNode;\n indicator?: ComponentProps<typeof ComboboxItemIndicator>['variant'];\n};\n\nexport const ComboboxItem = ({\n ref,\n className,\n children,\n icon,\n indicator: variant = 'check',\n ...props\n}: Props) => (\n <BaseCombobox.Item\n {...props}\n ref={ref}\n data-slot=\"combobox-item\"\n className={cn(\n 'tw:group/combobox-item',\n // layout\n 'tw:relative',\n 'tw:flex',\n 'tw:flex-1',\n 'tw:items-center',\n 'tw:gap-2',\n\n // spacing\n 'tw:py-2',\n 'tw:px-2',\n 'tw:group-data-[variant=default]/combobox-content:px-4',\n 'tw:rounded-lg',\n 'tw:group-data-[variant=default]/combobox-content:rounded-none',\n\n // typography\n 'tw:text-sm',\n 'tw:select-none',\n 'tw:cursor-default',\n 'tw:outline-hidden',\n\n // highlighted (keyboard / hover)\n 'tw:data-[highlighted]:bg-accent',\n // The legacy highlight is a neutral step, not the argo accent.\n //\n // - `secondary` carries its own foreground, so fill and ink move together.\n // - `muted` is unusable: in dark it equals `popover`, so the band would disappear\n // into the listbox.\n 'tw:group-data-[variant=default]/combobox-content:data-[highlighted]:bg-secondary',\n 'tw:data-[highlighted]:text-accent-foreground',\n 'tw:group-data-[variant=default]/combobox-content:data-[highlighted]:text-secondary-foreground',\n\n // disabled\n 'tw:data-disabled:pointer-events-none',\n 'tw:data-disabled:opacity-50',\n\n // child svg defaults\n 'tw:[&_svg]:pointer-events-none',\n 'tw:[&_svg]:shrink-0',\n 'tw:[&_svg]:text-muted-foreground',\n \"tw:[&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n >\n {<ComboboxItemIndicator variant={variant} />}\n {icon}\n <span className=\"tw:truncate\">{children}</span>\n </BaseCombobox.Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { cn } from '../../utils';\n\ntype Props = Omit<ComponentProps<typeof BaseCombobox.List>, 'className'> & {\n className?: string;\n};\n\nexport const ComboboxList = ({ ref, className, ...props }: Props) => (\n <BaseCombobox.List\n ref={ref}\n className={cn(\n 'tw:no-scrollbar',\n 'tw:scroll-py-1',\n 'tw:overflow-y-auto',\n 'tw:overscroll-contain',\n 'tw:min-h-0',\n 'tw:flex-1',\n\n 'tw:p-2',\n 'tw:data-[empty]:p-0',\n 'tw:group-data-[variant=default]/combobox-content:p-0',\n className,\n )}\n {...props}\n />\n);\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nexport const ComboboxRoot = <Value, Multiple extends boolean | undefined = false>(\n props: BaseCombobox.Root.Props<Value, Multiple>,\n) => <BaseCombobox.Root {...props} />;\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { cn } from '../../utils';\n\ntype Props = Omit<ComponentProps<typeof BaseCombobox.Separator>, 'className'> & {\n className?: string;\n};\n\nexport const ComboboxSeparator = ({ ref, className, ...props }: Props) => (\n <BaseCombobox.Separator\n ref={ref}\n className={cn('tw:mx-2 tw:my-1 tw:h-px tw:bg-border', className)}\n {...props}\n />\n);\n","import type { ComponentProps } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { cn } from '../../../utils';\n\ntype Props = Omit<ComponentProps<typeof BaseCombobox.Group>, 'className'> & {\n className?: string;\n};\n\nexport const ComboboxGroup = ({ ref, className, children, ...props }: Props) => (\n <BaseCombobox.Group\n ref={ref}\n className={cn('tw:flex tw:flex-col tw:gap-0.5', className)}\n {...props}\n >\n {children}\n </BaseCombobox.Group>\n);\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\nimport { cn } from '../../../utils';\n\ntype Props = Omit<BaseCombobox.GroupLabel.Props, 'className'> & {\n className?: string;\n};\n\nexport const ComboboxGroupLabel = ({ ref, className, ...props }: Props) => (\n <BaseCombobox.GroupLabel\n {...props}\n ref={ref}\n className={cn(\n // Base (argo variant) — soft gray section label.\n 'tw:px-2',\n 'tw:py-1.5',\n 'tw:text-xs',\n 'tw:font-medium',\n 'tw:leading-none',\n 'tw:text-muted-foreground',\n\n 'tw:group-data-[variant=default]/combobox-content:uppercase',\n 'tw:group-data-[variant=default]/combobox-content:font-semibold',\n 'tw:group-data-[variant=default]/combobox-content:tracking-wider',\n 'tw:group-data-[variant=default]/combobox-content:text-[11px]',\n 'tw:group-data-[variant=default]/combobox-content:text-black',\n 'tw:group-data-[variant=default]/combobox-content:pt-2',\n 'tw:group-data-[variant=default]/combobox-content:px-4',\n\n className,\n )}\n />\n);\n","import { Combobox as BaseCombobox } from '@base-ui/react/combobox';\n\ntype Props = BaseCombobox.Collection.Props;\n\nexport const ComboboxCollection = ({ ...props }: Props) => (\n <BaseCombobox.Collection data-slot=\"combobox-collection\" {...props} />\n);\n","import { useEffect } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { noop } from '../../utils';\n\n/**\n * The text a combobox's input takes, with `inputValueSanitizer` applied to what the user typed.\n *\n * - `input-change` is the only reason carrying typed text. Every other one carries text the\n * control itself put there — an item's label, or the empty string a clear leaves — which a\n * sanitizer aimed at typed characters would mangle.\n * - A sanitizer sees the whole text on every keystroke, so it has to rewrite rather than drop:\n * one calling `trim()` swallows the space before the next word.\n */\nexport const sanitizeTypedInput = (\n next: string,\n reason: string,\n sanitizer: ((input: string) => string) | undefined,\n) => (reason === 'input-change' ? (sanitizer?.(next) ?? next) : next);\n\n/**\n * Reports the query the list filters by to the control's owner.\n *\n * - Fires from an effect rather than the input handler because `query` is derived: in `Combobox`\n * a selection showing its own label empties it without a keystroke, so the handler never sees\n * every value it takes.\n * - The mount render reports too, so an owner fetching on the query needs no first fetch of its\n * own.\n */\nexport const useQueryReporter = (query: string, onQueryChange?: (query: string) => void) => {\n const report = useStableCallback(onQueryChange ?? noop);\n\n useEffect(() => {\n report(query);\n }, [query, report]);\n};\n","import { type ComponentProps, type CSSProperties, type ReactNode, useMemo, useState } from 'react';\nimport { Combobox as BaseCombobox } from '@base-ui/react/combobox';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { ChevronDown, Plus, X } from '../../icons';\nimport { cn } from '../../utils';\nimport { InputGroup } from '../InputGroup';\n\nimport { ComboboxChip } from './ComboboxChip';\nimport { ComboboxChips } from './ComboboxChips';\nimport { ComboboxContent } from './ComboboxContent';\nimport { ComboboxEmpty } from './ComboboxEmpty';\nimport { ComboboxInput } from './ComboboxInput';\nimport { ComboboxInputGroup } from './ComboboxInputGroup';\nimport { ComboboxItem } from './ComboboxItem';\nimport { ComboboxList } from './ComboboxList';\nimport { ComboboxRoot } from './ComboboxRoot';\nimport { ComboboxSeparator } from './ComboboxSeparator';\nimport { ComboboxCollection, ComboboxGroup, ComboboxGroupLabel } from './Group';\nimport { useQueryReporter } from './query';\nimport type { Group } from './types';\nimport {\n createCreatableItem,\n defaultGroupToLabel,\n defaultItemToDisabled,\n defaultItemToIcon,\n defaultItemToLabel,\n defaultQueryToCreateLabel,\n defaultToCreateValue,\n isCreatableItem,\n isGroupItem,\n isGroupItems,\n toItemEquality,\n toLabel,\n} from './utils';\n\n// Above this many (ungrouped) items, the list is windowed with `@tanstack/react-virtual` so only\n// the visible rows hit the DOM. Base UI keeps keyboard nav + filtering working against the full\n// `items` set (via `virtualized`), so search is unaffected.\nconst VIRTUALIZE_THRESHOLD = 30;\nconst ESTIMATED_ROW_HEIGHT = 40;\nconst ESTIMATED_LIST_HEIGHT = 320;\n\ntype ComboboxProps<Value> = BaseCombobox.Root.Props<Value, false>;\ntype ComboboxInputProps = ComponentProps<typeof ComboboxInput>;\ntype ComboboxInputGroupProps = ComponentProps<typeof ComboboxInputGroup>;\ntype ComboboxItemProps = ComponentProps<typeof ComboboxItem>;\n\ntype Indicator = NonNullable<ComboboxItemProps['indicator']>;\n\ntype PublicComboboxInputProps = Pick<ComboboxInputProps, 'placeholder' | 'id'> &\n Pick<ComboboxInputGroupProps, 'variant' | 'focusVariant' | 'sizing' | 'state' | 'className'>;\n\ntype PublicComboboxProps<Value> = Pick<\n ComboboxProps<Value>,\n | 'disabled'\n | 'inputRef'\n | 'value'\n | 'defaultValue'\n | 'onValueChange'\n | 'itemToStringLabel'\n | 'itemToStringValue'\n | 'filter'\n | 'onOpenChangeComplete'\n | 'isItemEqualToValue'\n>;\n\ntype CreatableProps<Value> = {\n allowCreate?: boolean;\n queryToCreateLabel?: (query: string) => ReactNode;\n queryToCreateValue?: (query: string) => Value;\n /**\n * Gate on the typed query for `allowCreate`.\n *\n * - Returning `false` hides the create row, so the empty state shows instead.\n * - Only called for a non-empty query that matches no existing item.\n * - Reach for it when a free-form value has a format (an email address, a URL, an identifier).\n */\n canCreate?: (query: string) => boolean;\n};\n\ntype Props<Value, GroupShape extends Group<Value> = Group<Value>> = PublicComboboxInputProps &\n PublicComboboxProps<Value> &\n CreatableProps<Value> & {\n items?: readonly (Value | GroupShape)[];\n\n // root specific\n /**\n * Offer a clear button once a value is selected. Defaults to **`true`**.\n *\n * - `BaseCombobox.Clear` only mounts while there is something to clear, so an empty combobox\n * renders identically either way.\n * - Pass `false` where clearing must not be reachable — a required field, or a control whose\n * empty state the surrounding form cannot represent.\n */\n allowClear?: boolean;\n empty?: ReactNode;\n indicator?: Indicator;\n prefix?: ReactNode;\n /**\n * Window the list with a virtualizer so large option sets stay fast. Opt-in — defaults to\n * `false` to keep behavior unchanged for existing call sites (every option stays in the DOM).\n * Pass `'auto'` to virtualize only ungrouped lists longer than {@link VIRTUALIZE_THRESHOLD},\n * or `true` to force it. Grouped lists are never virtualized.\n */\n virtualized?: boolean | 'auto';\n\n // query specific\n /**\n * Rewrites what the user types before the control adopts it.\n *\n * - Runs on typing only. The selection's own label comes from the item, so normalising that\n * too would corrupt what the closed control displays.\n * - The query the list filters by is the rewritten text, and so is everything `allowCreate`\n * derives from it — a character the user cannot type is one they cannot create.\n * - Reach for it where a created value has a character set: a bucket or table identifier.\n * `canCreate` is the gate for a format the user must get right themselves.\n * - It has to rewrite rather than drop: it sees the whole text on every keystroke, so one\n * calling `trim()` swallows the space before the next word.\n */\n inputValueSanitizer?: (input: string) => string;\n /**\n * Reports the query the list filters by, `inputValueSanitizer` already applied.\n *\n * - For an owner that needs the query for itself: a server-side search, an option order, the\n * name a \"create\" form opens with.\n * - The query is empty while the input still shows the selection's label, so a list fetched\n * for a query cannot stay narrowed behind a selection the user has moved on from. The\n * mount render reports too, so a search driven by this needs no first fetch of its own.\n * - Notification only, and deliberately not Base UI's own `onInputValueChange`: the control\n * keeps ownership of the text — a selection snaps it back to that item's label, and\n * creating or clearing a value rewrites it — so there is no controlled `inputValue` to\n * hold in sync.\n */\n onQueryChange?: (query: string) => void;\n\n // item specific\n /** `query` is the current search text — pass it to `MarkedText` to highlight the match. */\n itemToLabel?: (item: Value, query: string) => ReactNode;\n itemToIcon?: (item: Value) => ReactNode;\n itemToDisabled?: (item: Value) => boolean;\n /**\n * How the selection renders once the popup is closed — an icon, a badge, a secondary line.\n *\n * - Shows ahead of the input, and the input's own text turns transparent behind it, so the\n * selection reads once. Typing dissolves it and hands the row back to the query.\n * - The input keeps `itemToStringLabel`'s text as its value, so this is decoration: a screen\n * reader still reports the selection. That is the reason to reach for it over drawing the\n * selection yourself in `prefix`, which costs the input its accessible value.\n * - Left unset, the selection is that text alone — `itemToLabel` styles the open list's rows,\n * not the selection, and the two are free to differ.\n * - The node owns its own overflow, as `itemToLabel` and `itemToChipLabel` do: the control caps\n * the area so the clear and open buttons stay reachable, and clips what does not fit.\n */\n itemToSelectedLabel?: (item: Value) => ReactNode;\n\n // group specific\n groupToLabel?: (group: GroupShape) => ReactNode;\n };\n\nexport const Combobox = <Value, GroupShape extends Group<Value> = Group<Value>>({\n // root props\n items: _itemsProp,\n value,\n defaultValue,\n onValueChange,\n itemToStringLabel: itemToStringLabelProp,\n itemToStringValue,\n disabled,\n filter,\n inputRef,\n onOpenChangeComplete,\n isItemEqualToValue: isItemEqualToValueProp,\n\n // input props\n variant,\n sizing,\n focusVariant,\n state,\n placeholder,\n allowClear = true,\n id,\n className,\n\n // own props\n empty = 'No items',\n indicator,\n prefix,\n virtualized = false,\n\n // query\n inputValueSanitizer,\n onQueryChange,\n\n // creatable\n allowCreate,\n queryToCreateValue,\n queryToCreateLabel = defaultQueryToCreateLabel,\n canCreate,\n\n // own item props\n itemToDisabled = defaultItemToDisabled,\n itemToLabel = defaultItemToLabel,\n itemToIcon = defaultItemToIcon,\n itemToSelectedLabel,\n groupToLabel = defaultGroupToLabel,\n}: Props<Value, GroupShape>) => {\n /** An item's string identity: the input's text, the default search subject, and the accessible value. */\n const labelOf = (item: Value) => itemToStringLabelProp?.(item) ?? toLabel(item);\n\n // What the user has typed, or `null` while the control is showing its selection instead.\n //\n // - The input's text and the search query are both derived from it, so neither can drift from\n // what the value says.\n // - Discarded when the popup closes, so a control the user has walked away from shows its value.\n // Base UI's own sync-back cannot carry that on its own: it skips the write whenever the text\n // already matches the label, which a query edited back to the label reaches.\n const [typedText, setTypedText] = useState<string | null>(null);\n\n // The item the control holds right now, controlled or not.\n //\n // - `value === undefined` hands ownership to Base UI, so an uncontrolled selection is mirrored\n // here as it happens; `defaultValue` seeds it.\n // - `null` is both \"nothing selected\" and the adder shape's pinned value.\n // - `BaseCombobox.Value` reports the same item, but only to its own render prop. Three things\n // outside one need it — the query gate below, the input's className, and the addon's — so the\n // selection is read here rather than in a slot.\n const [uncontrolledValue, setUncontrolledValue] = useState<Value | null>(defaultValue ?? null);\n const selectedItem = value !== undefined ? value : uncontrolledValue;\n\n const selectedLabel = selectedItem == null ? null : labelOf(selectedItem);\n\n // Whether the text on screen is the selection speaking rather than a query.\n //\n // - `typedText === null` is the usual way in, but editing a query back to the label reaches the\n // same screen and has to read the same, so the comparison is against the label, not `null`.\n // - Drives the query gate below, the rich selected node, and the filter override.\n const isShowingSelection =\n selectedLabel !== null && (typedText === null || typedText === selectedLabel);\n\n // The input's own text: the query while there is one, the selection's label otherwise. Keeping the\n // label here is what lets a screen reader report the selection.\n const inputValue = typedText ?? selectedLabel ?? '';\n // The rich selection stands in for the input's text only while that text still *is* the\n // selection's label — once there is a query the row belongs to it.\n const selectedNode =\n itemToSelectedLabel && selectedItem != null && isShowingSelection\n ? itemToSelectedLabel(selectedItem)\n : null;\n const query = (isShowingSelection ? '' : (typedText ?? '')).trim();\n const queryLower = query.toLowerCase();\n\n useQueryReporter(query, onQueryChange);\n\n const itemsProp = _itemsProp ?? [];\n const sampleItem = itemsProp.flatMap((item) => (isGroupItem(item) ? item.items : [item]))[0];\n\n const [createdItems, setCreatedItems] = useState<Value[]>([]);\n\n const allItems = (() => {\n if (createdItems.length === 0) return itemsProp as (Value | GroupShape)[];\n if (isGroupItems(itemsProp))\n return [...itemsProp, { items: createdItems } as unknown as GroupShape];\n return [...itemsProp, ...createdItems];\n })();\n\n const items = (() => {\n if (!allowCreate || disabled) return allItems;\n if (!query) return allItems;\n const exactMatch = allItems\n .flatMap((item) => (isGroupItem(item) ? item.items : [item]))\n .some((item) => labelOf(item).toLowerCase() === queryLower);\n if (exactMatch) return allItems;\n if (canCreate && !canCreate(query)) return allItems;\n\n const creatable = isGroupItems(itemsProp)\n ? [{ items: [createCreatableItem(query)] }]\n : [createCreatableItem(query)];\n\n return [...allItems, ...creatable];\n })();\n\n const itemToStringLabel: ComboboxProps<Value>['itemToStringLabel'] = (value) =>\n isCreatableItem(value) ? value.value : labelOf(value);\n\n // Behind a selection the whole list stays browsable; otherwise the list narrows to the selected\n // item and there is no way to reach a different, unrelated one without clearing first.\n //\n // - Base UI's own `shouldBypassFiltering` covers only a fresh open: its `queryChangedAfterOpen`\n // flips on the first keystroke and clears on close, never when the text returns to the label.\n // - The creatable row is not one of the caller's items, so a caller's `filter` never sees it.\n const wrappedFilter: ComboboxProps<Value>['filter'] = isShowingSelection\n ? () => true\n : !allowCreate || !filter\n ? filter\n : (item, ...args) => isCreatableItem(item) || filter(item, ...args);\n\n const wrappedItemToStringValue: ComboboxProps<Value>['itemToStringValue'] =\n !allowCreate || !itemToStringValue\n ? itemToStringValue\n : (item) => (isCreatableItem(item) ? item.value : itemToStringValue(item));\n\n // Base UI stores the comparer and lists it in an effect's deps, so a fresh identity per render\n // re-renders every option row and rescans the item list.\n const isItemEqualToValue = useMemo(\n () => toItemEquality(isItemEqualToValueProp),\n [isItemEqualToValueProp],\n );\n\n // Only the user's own typing becomes `typedText`, and it is the only text `inputValueSanitizer`\n // sees — the selection's own label is projected from the item, so a sanitizer cannot reach it.\n //\n // - Every other reason Base UI reports means \"show the selection\": an item press, a clear, and\n // the label it syncs back into the input when the popup unmounts.\n // - Its sync-back is a write to ignore rather than adopt: it stringifies Base UI's own selected\n // value, which for a created item is the internal sentinel and not the value the owner holds.\n const handleInputValueChange: NonNullable<ComboboxProps<Value>['onInputValueChange']> = (\n next,\n { reason },\n ) => {\n if (reason !== 'input-change') {\n setTypedText(null);\n return;\n }\n\n const typed = inputValueSanitizer?.(next) ?? next;\n // Whitespace alone is never adopted: Base UI gates opening the popup on `value.trim()`\n // (`ComboboxInput`), so a control that took it would sit closed showing text its value does not\n // say, with no close to discard it. An empty input is a different thing — it clears the\n // selection — so it is adopted.\n setTypedText(typed === '' || typed.trim() !== '' ? typed : null);\n };\n\n // Discard the query the moment the popup starts closing rather than once it has finished: the\n // input goes back to saying what the value says without waiting out a close transition, and the\n // reset no longer rides on Base UI's unmount sync.\n const handleOpenChange: NonNullable<ComboboxProps<Value>['onOpenChange']> = (open) => {\n if (!open) setTypedText(null);\n };\n\n const handleOnValueChange: ComboboxProps<Value>['onValueChange'] = (next, event) => {\n if (isCreatableItem(next)) {\n const newValue = defaultToCreateValue(next.value, sampleItem, queryToCreateValue) as Value;\n setCreatedItems((prev) => [...prev, newValue]);\n setUncontrolledValue(newValue);\n onValueChange?.(newValue, event);\n return;\n }\n\n setUncontrolledValue(next);\n onValueChange?.(next, event);\n };\n\n // State-backed (not a ref) so a re-render fires when the popup mounts/remounts — Base UI unmounts\n // the list on close, and the virtualizer must re-observe the fresh element on each reopen or it\n // measures a stale/detached node and paints nothing.\n const [listElement, setListElement] = useState<HTMLDivElement | null>(null);\n // Base the decision on `allItems` (the real options) rather than `items`, which also holds the\n // transient creatable row — otherwise virtualization could toggle on/off as the user types.\n const isGrouped = isGroupItems(allItems);\n const shouldVirtualize =\n !isGrouped &&\n (virtualized === true || (virtualized === 'auto' && allItems.length > VIRTUALIZE_THRESHOLD));\n\n // In virtualized mode we pre-filter here and disable Base UI's filter with `null` (see the Root\n // `filter` prop — `undefined` would keep Base UI's default `contains`, which re-filters our items\n // with a different predicate and wrongly drives the empty state + keyboard nav). The creatable\n // row is always kept.\n const matchesQuery = (item: Value) => {\n if (isCreatableItem(item)) return true;\n if (!query) return true;\n if (filter) return !!filter(item, query, (value) => itemToStringLabel(value) ?? toLabel(value));\n return (itemToStringLabel(item) ?? toLabel(item)).toLowerCase().includes(queryLower);\n };\n\n const virtualItems = shouldVirtualize ? (items as Value[]).filter(matchesQuery) : [];\n\n const virtualizer = useVirtualizer({\n count: virtualItems.length,\n getScrollElement: () => listElement,\n estimateSize: () => ESTIMATED_ROW_HEIGHT,\n overscan: 12,\n enabled: shouldVirtualize,\n // Seed a viewport height so rows paint on the first frame. Without it the list measures 0 until\n // the ResizeObserver fires (a frame later), which renders an empty popup on open.\n initialRect: { width: 0, height: ESTIMATED_LIST_HEIGHT },\n });\n\n const renderItem = (item: Value, index?: number) => {\n if (isCreatableItem(item)) {\n return (\n <Combobox.Item index={index} value={item} icon={<Plus />}>\n {queryToCreateLabel(item.value)}\n </Combobox.Item>\n );\n }\n\n return (\n <Combobox.Item\n index={index}\n value={item}\n indicator={indicator}\n icon={itemToIcon(item)}\n disabled={itemToDisabled(item)}\n >\n {itemToLabel(item, query)}\n </Combobox.Item>\n );\n };\n\n const rowStyle = (offset: number): CSSProperties => ({\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n transform: `translateY(${offset}px)`,\n });\n\n const comboboxInput = (\n <ComboboxInput\n id={id}\n placeholder={placeholder}\n disabled={disabled}\n // The input keeps the selection's text as its value — a screen reader reads it, and the\n // caret stays visible — while `selectedNode` (rendered as an overlay above it) is what the\n // eye gets.\n className={cn(\n selectedNode != null &&\n 'tw:text-transparent tw:caret-foreground tw:selection:bg-transparent',\n )}\n />\n );\n\n return (\n <BaseCombobox.Root<Value, false>\n items={shouldVirtualize ? virtualItems : items}\n // Base UI highlights nothing until ArrowDown, so Enter after typing would drop the query\n // silently — no selection, and the popup closes. Highlighting the first match makes Enter\n // commit it, including the creatable row when `allowCreate` is on.\n autoHighlight\n value={value}\n defaultValue={defaultValue}\n filter={shouldVirtualize ? null : wrappedFilter}\n onValueChange={handleOnValueChange}\n itemToStringLabel={itemToStringLabel}\n isItemEqualToValue={isItemEqualToValue}\n itemToStringValue={wrappedItemToStringValue}\n onOpenChange={handleOpenChange}\n onOpenChangeComplete={onOpenChangeComplete}\n disabled={disabled}\n inputRef={inputRef}\n inputValue={inputValue}\n onInputValueChange={handleInputValueChange}\n virtualized={shouldVirtualize}\n onItemHighlighted={(_, details) => {\n if (shouldVirtualize && details.reason === 'keyboard') {\n virtualizer.scrollToIndex(details.index);\n }\n }}\n >\n <ComboboxInputGroup\n variant={variant}\n sizing={sizing}\n state={state}\n focusVariant={focusVariant}\n className={className}\n >\n {itemToSelectedLabel != null ? (\n // `itemToSelectedLabel` paints the selection over the input's own content box instead of\n // beside it: a `relative` wrapper takes the input's flex slot, and the addon becomes an\n // absolutely positioned overlay inside it while there is a node to show. `pl-4` on the\n // addon (its normal inline-start padding) and `px-4` on the input (unreduced, since the\n // input is no longer `InputGroup`'s direct child) line up at the same origin.\n //\n // Branching on the prop rather than on `selectedNode` keeps this wrapper mounted for the\n // component's whole lifetime even while typing dissolves and restores the node — swapping\n // the tree structure there would remount the input and drop focus mid-keystroke.\n <div className=\"tw:relative tw:flex tw:min-w-0 tw:flex-1\">\n {(prefix != null || selectedNode != null) && (\n <InputGroup.Addon\n align=\"inline-start\"\n className={cn(\n selectedNode != null &&\n 'tw:pointer-events-none tw:absolute tw:inset-y-0 tw:left-0 tw:max-w-full tw:overflow-hidden',\n )}\n >\n {prefix}\n {selectedNode}\n </InputGroup.Addon>\n )}\n {comboboxInput}\n </div>\n ) : (\n <>\n {prefix != null && <InputGroup.Addon align=\"inline-start\">{prefix}</InputGroup.Addon>}\n {comboboxInput}\n </>\n )}\n <InputGroup.Addon align=\"inline-end\">\n {allowClear && (\n <InputGroup.Button asChild aria-label=\"Clear\" disabled={disabled}>\n <BaseCombobox.Clear>\n <X className=\"tw:size-4\" />\n </BaseCombobox.Clear>\n </InputGroup.Button>\n )}\n <InputGroup.Button disabled={disabled} asChild aria-label=\"Open combobox\">\n <BaseCombobox.Trigger>\n <ChevronDown className=\"tw:size-4\" />\n </BaseCombobox.Trigger>\n </InputGroup.Button>\n </InputGroup.Addon>\n </ComboboxInputGroup>\n <ComboboxContent>\n <ComboboxEmpty>{empty}</ComboboxEmpty>\n {shouldVirtualize ? (\n <ComboboxList ref={setListElement}>\n <div\n style={{\n position: 'relative',\n width: '100%',\n height: `${virtualizer.getTotalSize()}px`,\n }}\n >\n {virtualizer.getVirtualItems().map((row) => {\n const item = virtualItems[row.index];\n if (item === undefined) return null;\n return (\n <div\n key={row.key}\n data-index={row.index}\n ref={virtualizer.measureElement}\n style={rowStyle(row.start)}\n >\n {renderItem(item, row.index)}\n </div>\n );\n })}\n </div>\n </ComboboxList>\n ) : (\n <ComboboxList>\n {(itemOrGroup: Value | GroupShape) => {\n if (isCreatableItem(itemOrGroup))\n return (\n <Combobox.Item value={itemOrGroup} icon={<Plus />}>\n {queryToCreateLabel(itemOrGroup.value)}\n </Combobox.Item>\n );\n\n if (isGroupItem(itemOrGroup)) {\n const maybeCreatable = itemOrGroup.items[0];\n\n if (isCreatableItem(maybeCreatable)) {\n return (\n <Combobox.Item value={maybeCreatable} icon={<Plus />}>\n {queryToCreateLabel(maybeCreatable.value)}\n </Combobox.Item>\n );\n }\n\n const groupLabel = groupToLabel(itemOrGroup);\n\n return (\n <Combobox.Group items={itemOrGroup.items}>\n {groupLabel && <Combobox.GroupLabel>{groupLabel}</Combobox.GroupLabel>}\n {/* Don't forward `renderItem` by reference — the collection passes its\n group-local index, which ComboboxItem uses verbatim and breaks keyboard\n nav. Drop it so the item falls back to its own global list index. */}\n <Combobox.GroupList>{(item: Value) => renderItem(item)}</Combobox.GroupList>\n </Combobox.Group>\n );\n }\n\n return renderItem(itemOrGroup);\n }}\n </ComboboxList>\n )}\n </ComboboxContent>\n </BaseCombobox.Root>\n );\n};\n\n// Base\nCombobox.Root = ComboboxRoot;\nCombobox.InputGroup = ComboboxInputGroup;\nCombobox.Input = ComboboxInput;\nCombobox.Content = ComboboxContent;\nCombobox.List = ComboboxList;\nCombobox.Item = ComboboxItem;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Value = BaseCombobox.Value;\nCombobox.Separator = ComboboxSeparator;\n\n// Group\nCombobox.Group = ComboboxGroup;\nCombobox.GroupLabel = ComboboxGroupLabel;\nCombobox.GroupList = ComboboxCollection;\n\n// Chips\nCombobox.Chips = ComboboxChips;\nCombobox.Chip = ComboboxChip;\n","import { toLabel } from './utils';\n\n/** A single searchable text. `null` / `undefined` / `''` stand for \"this item has no such field\". */\ntype Text = string | number | null | undefined;\n\n// Lowercased words of a query.\n//\n// - Splitting on a whitespace run (not a single space) means a double space or a pasted tab adds\n// no empty word, which every text would trivially contain.\n// - Plain `toLowerCase`, not `findLiteralMatches`' `foldCase`: that fold trades correctness for a\n// length-preserving result, which only an offset needs, and nothing here reports an offset.\nconst toWords = (query: string) => query.toLowerCase().split(/\\s+/).filter(Boolean);\n\nconst isFilled = (text: Text): text is string | number =>\n text !== null && text !== undefined && text !== '';\n\nconst isTextList = (texts: Text | readonly Text[]): texts is readonly Text[] =>\n Array.isArray(texts);\n\n/**\n * Whether every word of `query` occurs in at least one of `texts`, ignoring case.\n *\n * - Words may match different texts and in any order: `prod eu` matches `['eu-central', 'production']`.\n * - A word matches by containment, not as a whole word: `prod` matches `production`.\n * - An empty or whitespace-only query matches every item.\n * - Empty and absent texts are skipped, so a missing field never matches.\n * - Comparison is a plain lowercased `includes`, not Base UI's `Intl.Collator` `contains`, so\n * `Muller` does not find `Müller`. The wrapper this replaces matched the same way.\n * - `apps/kbc-ui` has its own `matchByWords` of the same name over 68 mostly non-combobox call\n * sites. It splits on a single space and keeps empty texts, so the two are not interchangeable\n * until that one re-exports this.\n *\n * Reach for it as a `Combobox` / `MultiCombobox` `filter` when the searchable text is **not** the\n * label — a user's email behind their name, a table id behind its display name:\n *\n * ```tsx\n * <Combobox filter={(user, query) => matchByWords([user.name, user.email], query)} … />\n * ```\n *\n * When only the label is searchable, pass {@link filterByWords} instead of closing over this.\n */\nexport const matchByWords = (texts: Text | readonly Text[], query: string) => {\n const words = toWords(query);\n if (words.length === 0) return true;\n\n const haystacks = (isTextList(texts) ? texts : [texts])\n .filter(isFilled)\n .map((text) => String(text).toLowerCase());\n\n return words.every((word) => haystacks.some((haystack) => haystack.includes(word)));\n};\n\n/**\n * `filter` that matches the item's displayed label word by word.\n *\n * - Drop-in for the built-in match, which takes the query as one substring: `filter={filterByWords}`.\n * - Generic, so passing it leaves the combobox's own item type inference untouched.\n * - The label is what the combobox itself displays — `itemToStringLabel` where the call site passes\n * one, otherwise the item's own `label`, `value`, or string form.\n * - **Only the label is searched.** Nothing walks the rest of the item, so a field the label omits\n * stays unsearchable by design — a filter that quietly matched an id the user cannot see is\n * worse than one that does not match. Close over {@link matchByWords} to name those fields.\n */\nexport const filterByWords = <Item>(\n item: Item,\n query: string,\n itemToString?: (item: Item) => string,\n) => matchByWords(itemToString?.(item) ?? toLabel(item), query);\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangeInput-9MIw7P6L.js","names":["CalendarIcon"],"sources":["../src/blocks/DateRangeInput/helpers.ts","../src/blocks/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import type { DateRange } from 'react-day-picker';\n\nexport const formatDateRange = (\n range: DateRange | null | undefined,\n inputValue: string,\n): string => {\n if (!range) {\n return inputValue;\n }\n\n const { from, to } = range;\n const fromStr = from?.toLocaleDateString();\n const toStr = to?.toLocaleDateString();\n return `${fromStr} - ${toStr}`;\n};\n\nconst ISO_DATE_ONLY = /^\\d{4}-\\d{2}-\\d{2}$/;\n\n/**\n * `new Date('2024-01-15')` is spec'd as UTC midnight, so reading it back with the\n * local getters this component relies on (`getDate`, `toLocaleDateString`) yields\n * the previous day for users west of UTC. Appending a time makes the ISO form\n * parse as local time instead, while keeping `new Date`'s validation — an\n * out-of-range month or day is still `Invalid Date`, whereas building the parts\n * via `new Date(y, m - 1, d)` would silently roll '2024-13-45' over to 2025-02-14.\n *\n * Every other format accepted here ('01/15/2024', 'Jan 15, 2024', '2024/01/15')\n * is already parsed as local time, so only the date-only ISO form is rewritten.\n */\nconst parseLocalDate = (value: string): Date =>\n ISO_DATE_ONLY.test(value) ? new Date(`${value}T00:00:00`) : new Date(value);\n\nexport const parseDateRange = (value: string): DateRange | null => {\n const parts = value.split(' - ');\n if (parts.length !== 2) {\n return null;\n }\n\n const [fromPart, toPart] = parts;\n if (!fromPart || !toPart) {\n return null;\n }\n\n const from = parseLocalDate(fromPart.trim());\n const to = parseLocalDate(toPart.trim());\n\n if (isNaN(from.getTime()) || isNaN(to.getTime())) {\n return null;\n }\n\n return { from, to };\n};\n","import { useRef, useState } from 'react';\nimport type { ChangeEventHandler, ComponentProps, ComponentRef, FocusEventHandler } from 'react';\nimport type { DateRange } from 'react-day-picker';\n\nimport { DatePicker } from '../../components/DatePicker';\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { Calendar as CalendarIcon, X } from '../../icons';\nimport { createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { formatDateRange, parseDateRange } from './helpers';\n\ntype InputGroupProps = Pick<\n ComponentProps<typeof InputGroup>,\n 'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<\n ComponentProps<typeof InputGroup.Input>,\n 'value' | 'defaultValue' | 'type'\n>;\n\ntype Props = InputGroupProps &\n InputGroupInputProps & {\n value?: DateRange | null;\n defaultValue?: DateRange | null;\n onValueChange?: (value: DateRange | null) => void;\n onValueBlur?: (value: DateRange | null) => void;\n allowClear?: boolean;\n startMonth?: Date;\n endMonth?: Date;\n };\n\nexport const DateRangeInput = ({\n ref,\n\n // group props\n state,\n variant,\n focusVariant,\n sizing,\n className,\n\n // own props\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueBlur,\n onChange,\n onBlur,\n onFocus,\n allowClear = false,\n startMonth,\n endMonth,\n\n // input props\n disabled,\n readOnly,\n placeholder = 'Select a date range',\n ...restInputProps\n}: Props) => {\n const inputRef = useRef<ComponentRef<'input'>>(null);\n\n const [inputValue, setInputValue] = useState('');\n const [hasFocus, setHasFocus] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const [month, setMonth] = useState<Date>(new Date());\n\n // `onValueChange` is fired explicitly per-path below (not through the hook), because commits\n // happen on blur / picker-select rather than on every keystroke.\n const [currentValue, setCurrentValue] = useControllableState<DateRange | null>({\n prop: valueProp,\n defaultProp: defaultValue ?? null,\n });\n\n const canClear = allowClear && !!currentValue && !disabled && !readOnly;\n const showPicker = !disabled && !readOnly;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const newValue = event.target.value;\n setInputValue(newValue);\n onChange?.(event);\n\n const parsedRange = parseDateRange(newValue);\n if (parsedRange !== null || !newValue.trim()) {\n onValueChange?.(parsedRange);\n }\n };\n\n const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {\n setInputValue(formatDateRange(currentValue, ''));\n setHasFocus(true);\n onFocus?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n setHasFocus(false);\n onBlur?.(event);\n\n // If the field still shows the formatted current value (focused and blurred\n // without editing), keep it as-is. `formatDateRange` uses `toLocaleDateString`,\n // whose output is not reliably parseable by `new Date(...)` in every locale, so\n // round-tripping an untouched value through `parseDateRange` could wrongly null it.\n const text = event.target.value;\n const parsedRange =\n text === formatDateRange(currentValue, '') ? currentValue : parseDateRange(text);\n onValueBlur?.(parsedRange);\n\n setCurrentValue(parsedRange);\n };\n\n const handleDatePickerChange = (newValue: DateRange | undefined) => {\n const rangeValue = newValue ?? null;\n\n setCurrentValue(rangeValue);\n onValueChange?.(rangeValue);\n\n setHasFocus(false);\n };\n\n const handleClear = () => {\n if (!inputRef.current) return;\n inputRef.current.value = '';\n setInputValue('');\n setCurrentValue(null);\n onValueChange?.(null);\n onChange?.(createChangeInputEvent(inputRef.current));\n };\n\n const handleOpenChange = (open: boolean) => {\n if (open) {\n setMonth(currentValue?.from ?? new Date());\n }\n setIsOpen(open);\n };\n\n const displayValue = hasFocus ? inputValue : formatDateRange(currentValue, '');\n\n return (\n <InputGroup\n state={state}\n variant={variant}\n sizing={sizing}\n focusVariant={focusVariant}\n className={className}\n >\n <InputGroup.Input\n {...restInputProps}\n ref={mergeRefs(ref ?? null, inputRef)}\n type=\"text\"\n value={displayValue}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {(canClear || showPicker) && (\n <InputGroup.Addon align=\"inline-end\">\n {canClear && (\n <InputGroup.Button\n aria-label=\"Clear date range\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n >\n <X className=\"tw:size-4\" />\n </InputGroup.Button>\n )}\n {showPicker && (\n <DatePicker\n endMonth={endMonth}\n mode=\"range\"\n month={month}\n onMonthChange={setMonth}\n onOpenChange={handleOpenChange}\n onSelect={handleDatePickerChange}\n open={isOpen}\n startMonth={startMonth}\n selected={currentValue ?? undefined}\n >\n <InputGroup.Button aria-label=\"Select date range\">\n <CalendarIcon className=\"tw:size-4\" />\n </InputGroup.Button>\n </DatePicker>\n )}\n </InputGroup.Addon>\n )}\n </InputGroup>\n );\n};\n"],"mappings":";;;;;;;;;AAEA,MAAa,mBACX,OACA,eACW;CACX,IAAI,CAAC,OACH,OAAO;CAGT,MAAM,EAAE,MAAM,OAAO;CAGrB,OAAO,GAFS,MAAM,mBAAmB,EAEvB,KADJ,IAAI,mBAAmB;AAEvC;AAEA,MAAM,gBAAgB;;;;;;;;;;;;AAatB,MAAM,kBAAkB,UACtB,cAAc,KAAK,KAAK,oBAAI,IAAI,KAAK,GAAG,MAAM,UAAU,IAAI,IAAI,KAAK,KAAK;AAE5E,MAAa,kBAAkB,UAAoC;CACjE,MAAM,QAAQ,MAAM,MAAM,KAAK;CAC/B,IAAI,MAAM,WAAW,GACnB,OAAO;CAGT,MAAM,CAAC,UAAU,UAAU;CAC3B,IAAI,CAAC,YAAY,CAAC,QAChB,OAAO;CAGT,MAAM,OAAO,eAAe,SAAS,KAAK,CAAC;CAC3C,MAAM,KAAK,eAAe,OAAO,KAAK,CAAC;CAEvC,IAAI,MAAM,KAAK,QAAQ,CAAC,KAAK,MAAM,GAAG,QAAQ,CAAC,GAC7C,OAAO;CAGT,OAAO;EAAE;EAAM;CAAG;AACpB;;;AClBA,MAAa,kBAAkB,EAC7B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,SACA,aAAa,OACb,YACA,UAGA,UACA,UACA,cAAc,uBACd,GAAG,qBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,OAAO,YAAY,yBAAe,IAAI,KAAK,CAAC;CAInD,MAAM,CAAC,cAAc,mBAAmB,qBAAuC;EAC7E,MAAM;EACN,aAAa,gBAAgB;CAC/B,CAAC;CAED,MAAM,WAAW,cAAc,CAAC,CAAC,gBAAgB,CAAC,YAAY,CAAC;CAC/D,MAAM,aAAa,CAAC,YAAY,CAAC;CAEjC,MAAM,gBAAsD,UAAU;EACpE,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,WAAW,KAAK;EAEhB,MAAM,cAAc,eAAe,QAAQ;EAC3C,IAAI,gBAAgB,QAAQ,CAAC,SAAS,KAAK,GACzC,gBAAgB,WAAW;CAE/B;CAEA,MAAM,eAAoD,UAAU;EAClE,cAAc,gBAAgB,cAAc,EAAE,CAAC;EAC/C,YAAY,IAAI;EAChB,UAAU,KAAK;CACjB;CAEA,MAAM,cAAmD,UAAU;EACjE,YAAY,KAAK;EACjB,SAAS,KAAK;EAMd,MAAM,OAAO,MAAM,OAAO;EAC1B,MAAM,cACJ,SAAS,gBAAgB,cAAc,EAAE,IAAI,eAAe,eAAe,IAAI;EACjF,cAAc,WAAW;EAEzB,gBAAgB,WAAW;CAC7B;CAEA,MAAM,0BAA0B,aAAoC;EAClE,MAAM,aAAa,YAAY;EAE/B,gBAAgB,UAAU;EAC1B,gBAAgB,UAAU;EAE1B,YAAY,KAAK;CACnB;CAEA,MAAM,oBAAoB;EACxB,IAAI,CAAC,SAAS,SAAS;EACvB,SAAS,QAAQ,QAAQ;EACzB,cAAc,EAAE;EAChB,gBAAgB,IAAI;EACpB,gBAAgB,IAAI;EACpB,WAAW,uBAAuB,SAAS,OAAO,CAAC;CACrD;CAEA,MAAM,oBAAoB,SAAkB;EAC1C,IAAI,MACF,SAAS,cAAc,wBAAQ,IAAI,KAAK,CAAC;EAE3C,UAAU,IAAI;CAChB;CAEA,MAAM,eAAe,WAAW,aAAa,gBAAgB,cAAc,EAAE;CAE7E,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA,CAOE,oBAAC,WAAW,OAAZ;GACE,GAAI;GACJ,KAAK,UAAU,OAAO,MAAM,QAAQ;GACpC,MAAK;GACL,OAAO;GACM;GACb,UAAU;GACV,SAAS;GACT,QAAQ;GACE;GACA;EACX,CAAA,IAEC,YAAY,eACZ,qBAAC,WAAW,OAAZ;GAAkB,OAAM;GAAxB,UAAA,CACG,YACC,oBAAC,WAAW,QAAZ;IACE,cAAW;IACX,cAAc,UAAU,MAAM,eAAe;IAC7C,SAAS;IAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;GACT,CAAA,GAEpB,cACC,oBAAC,YAAD;IACY;IACV,MAAK;IACE;IACP,eAAe;IACf,cAAc;IACd,UAAU;IACV,MAAM;IACM;IACZ,UAAU,gBAAgB,KAAA;IAE1B,UAAA,oBAAC,WAAW,QAAZ;KAAmB,cAAW;KAC5B,UAAA,oBAACA,UAAD,EAAc,WAAU,YAAa,CAAA;IACpB,CAAA;GACT,CAAA,CAEE;EAEV,CAAA,CAAA;;AAEhB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DateRangePicker-DjSUFjh4.js","names":[],"sources":["../src/components/DateRangePicker/DateRangePicker.tsx"],"sourcesContent":["import { useState } from 'react';\nimport type { ReactNode } from 'react';\nimport type { DateRange as DayPickerDateRange, Matcher } from 'react-day-picker';\nimport type { PopoverContentProps, PopoverProps } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Calendar } from '../Calendar';\nimport { overlayTriggerVariants } from '../OverlayTrigger/styles';\nimport { Popover } from '../Popover';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport { TimePicker } from '../TimePicker';\nimport { formatTime, pad, parseTime } from '../TimePicker/utils';\n\nexport type DateRange = {\n from: Date;\n to?: Date;\n};\n\nexport type DateRangePreset = {\n label: string;\n /**\n * The range the preset stands for. A preset may omit it and carry `value` instead — or neither,\n * for a clear-the-range preset (\"All time\"): without `onPresetSelect`, picking one calls\n * `onChange(undefined)`.\n */\n range?: DateRange;\n /**\n * Echoed back through `onPresetSelect` instead of `range`. For consumers whose stored form of a\n * range is not two dates: a relative token the server resolves per request, such as `-7 days`.\n */\n value?: string;\n};\n\ntype DateRangePickerProps = {\n value: DateRange | undefined;\n onChange: (range: DateRange | undefined) => void;\n /**\n * Replaces the formatted range on the trigger entirely — the name of the active preset. For a\n * range in the app's own date style, prefer `formatDate`, which keeps the from → to join here.\n */\n label?: ReactNode;\n /**\n * Formats one end of the range on the trigger, replacing the built-in ISO format (which is\n * unambiguous but matches no app in particular, including the `withTime` time-of-day part).\n * The from → to join stays with the component.\n */\n formatDate?: (date: Date) => string;\n placeholder?: string;\n presets?: readonly DateRangePreset[];\n /** Called instead of `onChange` when a preset is picked, with the preset itself. */\n onPresetSelect?: (preset: DateRangePreset) => void;\n /** Adds a start/end time-of-day row; the emitted `from` / `to` then carry hours and minutes. */\n withTime?: boolean;\n /** Hold edits in a draft and emit only on Apply, so one range costs one `onChange`. */\n requireApply?: boolean;\n /** Days that cannot be picked, as a react-day-picker matcher — e.g. `{ after: new Date() }`. */\n disabledDays?: Matcher | Matcher[];\n variant?: Exclude<VariantProps<typeof overlayTriggerVariants>['variant'], 'argo'>;\n disabled?: boolean;\n className?: string;\n} & Pick<PopoverProps, 'open' | 'onOpenChange' | 'defaultOpen'> &\n Pick<PopoverContentProps, 'align' | 'alignOffset' | 'sideOffset'>;\n\nconst timeOf = (date: Date) => formatTime(date.getHours(), date.getMinutes());\n\nconst isoDate = (date: Date) =>\n `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;\n\nconst formatRange = (\n range: DateRange | undefined,\n format: (date: Date) => string,\n): string | null => {\n if (!range?.from) return null;\n return range.to ? `${format(range.from)} → ${format(range.to)}` : format(range.from);\n};\n\nconst withHoursMinutes = (target: Date, hour: number, minute: number) => {\n const next = new Date(target);\n next.setHours(hour, minute, 0, 0);\n return next;\n};\n\nconst withTimeOf = (target: Date, source: Date) =>\n withHoursMinutes(target, source.getHours(), source.getMinutes());\n\n/** Returns `target` at `time` (\"HH:mm\"); unparseable input leaves it alone. */\nconst atTime = (target: Date, time: string) => {\n const { hour, minute } = parseTime(time);\n return hour === null || minute === null ? target : withHoursMinutes(target, hour, minute);\n};\n\ntype TimeFieldProps = {\n label: string;\n date: Date | undefined;\n onChange: (time: string) => void;\n};\n\n/** Time-of-day for one end of the range, on the same `TimePicker` the rest of the app uses. */\nconst TimeField = ({ label, date, onChange }: TimeFieldProps) => (\n <div className=\"tw:flex tw:items-center tw:gap-2 tw:text-sm\">\n <span className=\"tw:text-muted-foreground\">{label}</span>\n <TimePicker selected={date ? timeOf(date) : null} onSelect={onChange}>\n <Button variant=\"outline\" size=\"small\" disabled={!date} aria-label={`${label} time`}>\n {date ? timeOf(date) : '--:--'}\n </Button>\n </TimePicker>\n </div>\n);\n\n/**\n * Range-mode date picker — `Popover` + `Calendar` in range mode, with an optional preset sidebar,\n * a time-of-day row (`withTime`) and an explicit Apply step (`requireApply`). Use for selecting a\n * `{ from, to }` pair; for a single date use `DatePicker`.\n */\nexport const DateRangePicker = ({\n align = 'start',\n alignOffset,\n className,\n defaultOpen,\n disabled = false,\n disabledDays,\n formatDate,\n label,\n onChange,\n onOpenChange,\n onPresetSelect,\n open,\n placeholder = 'Pick a date range',\n presets,\n requireApply = false,\n sideOffset,\n value,\n variant,\n withTime = false,\n}: DateRangePickerProps) => {\n const isArgoDesign = useArgoDesign();\n const [draft, setDraft] = useState<DateRange | undefined>(value);\n\n const handleOpenChange = (nextOpen: boolean) => {\n // Reopening restarts from the committed value, so a cancelled edit never leaks into the next visit.\n if (nextOpen) setDraft(value);\n onOpenChange?.(nextOpen);\n };\n\n const current = requireApply ? draft : value;\n\n const edit = (range: DateRange | undefined) => {\n if (requireApply) setDraft(range);\n else onChange(range);\n };\n\n const handleSelect = (range: DayPickerDateRange | undefined) => {\n if (!range?.from) {\n edit(undefined);\n return;\n }\n\n // Picking days keeps whatever time-of-day is already set — otherwise every day click would\n // silently reset the range back to midnight.\n edit({\n from: current?.from ? withTimeOf(range.from, current.from) : range.from,\n to: range.to && current?.to ? withTimeOf(range.to, current.to) : range.to,\n });\n };\n\n const format =\n formatDate ?? ((date: Date) => (withTime ? `${isoDate(date)} ${timeOf(date)}` : isoDate(date)));\n const triggerLabel = label ?? formatRange(value, format);\n\n return (\n <Popover open={open} defaultOpen={defaultOpen} onOpenChange={handleOpenChange}>\n <Popover.Trigger\n disabled={disabled}\n className={cn(\n overlayTriggerVariants({ variant: isArgoDesign ? 'argo' : variant, sizing: 'medium' }),\n className,\n )}\n >\n <span className={cn('tw:truncate', !triggerLabel && 'tw:text-muted-foreground')}>\n {triggerLabel ?? placeholder}\n </span>\n <ChevronDown className=\"tw:size-4 tw:text-muted-foreground\" />\n </Popover.Trigger>\n <Popover.Content\n align={align}\n alignOffset={alignOffset}\n sideOffset={sideOffset}\n className=\"tw:w-auto tw:p-0\"\n >\n <div className=\"tw:flex\">\n {presets && presets.length > 0 ? (\n <div className=\"tw:flex tw:flex-col tw:gap-1 tw:border-r tw:border-solid tw:border-border tw:p-2\">\n {presets.map((preset) => (\n <Popover.Close asChild key={preset.label}>\n <Button\n variant=\"invisible\"\n size=\"small\"\n className=\"tw:justify-start\"\n onClick={() =>\n onPresetSelect ? onPresetSelect(preset) : onChange(preset.range)\n }\n >\n {preset.label}\n </Button>\n </Popover.Close>\n ))}\n </div>\n ) : null}\n <Calendar\n mode=\"range\"\n selected={current}\n onSelect={handleSelect}\n numberOfMonths={2}\n defaultMonth={current?.from}\n disabled={disabledDays}\n />\n </div>\n {(withTime || requireApply) && (\n <div className=\"tw:flex tw:items-center tw:gap-3 tw:border-t tw:border-solid tw:border-border tw:p-3\">\n {withTime && (\n <>\n <TimeField\n label=\"From\"\n date={current?.from}\n onChange={(time) =>\n current?.from && edit({ ...current, from: atTime(current.from, time) })\n }\n />\n <TimeField\n label=\"To\"\n date={current?.to}\n onChange={(time) =>\n current?.to && edit({ ...current, to: atTime(current.to, time) })\n }\n />\n </>\n )}\n {requireApply && (\n <div className=\"tw:ml-auto tw:flex tw:gap-2\">\n <Popover.Close asChild>\n <Button variant=\"outline\" size=\"small\">\n Cancel\n </Button>\n </Popover.Close>\n <Popover.Close asChild>\n <Button size=\"small\" disabled={!draft?.from} onClick={() => onChange(draft)}>\n Apply\n </Button>\n </Popover.Close>\n </div>\n )}\n </div>\n )}\n </Popover.Content>\n </Popover>\n );\n};\n\nDateRangePicker.displayName = 'DateRangePicker';\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu-CASr-jgl.js","names":["Root"],"sources":["../src/components/DropdownMenu/DropdownMenuItemIndicator.tsx","../src/components/DropdownMenu/ItemIcon.tsx","../src/components/DropdownMenu/styles.ts","../src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx","../src/components/DropdownMenu/DropdownMenuContext.tsx","../src/components/DropdownMenu/DropdownMenuContent.tsx","../src/components/DropdownMenu/DropdownMenuItem.tsx","../src/components/DropdownMenu/DropdownMenuItemDescription.tsx","../src/components/DropdownMenu/DropdownMenuLabel.tsx","../src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioGroup.tsx","../src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx","../src/components/DropdownMenu/DropdownMenuSeparator.tsx","../src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSub.tsx","../src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubContent.tsx","../src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx","../src/components/DropdownMenu/DropdownMenuTrigger.tsx","../src/components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { Check, Circle, ToggleRight } from '../../icons';\n\nconst variants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:pointer-events-none',\n\n // sizing\n 'tw:size-4',\n 'tw:aspect-square',\n 'tw:shrink-0',\n\n // layout\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n ],\n {\n variants: {\n variant: {\n none: [],\n radio: [\n 'tw:border',\n 'tw:border-solid',\n 'tw:border-border',\n 'tw:rounded-full',\n 'tw:group-data-[variant=default]/dropdown-menu-content:bg-input-background',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:bg-background',\n\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-2',\n 'tw:data-[state=unchecked]:[&_svg]:hidden',\n // Lucide Circle is stroke-only — force fill to match the stroke\n // (currentColor) so the indicator reads as a solid dot.\n 'tw:[&_svg]:fill-current',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:[&_svg]:text-primary',\n 'tw:group-data-[variant=default]/dropdown-menu-content:[&_svg]:text-primary',\n ],\n check: ['tw:[&_svg:not([class*=\"tw:size-\"])]:size-3.5', 'tw:[&_svg]:text-primary'],\n checkbox: [\n 'tw:[&_svg]:text-primary-foreground',\n 'tw:border',\n 'tw:border-solid',\n 'tw:rounded',\n 'tw:group-data-[variant=default]/dropdown-menu-content:border-input',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:border-input',\n\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-3',\n 'tw:data-[state=unchecked]:[&_svg]:hidden',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:border-primary',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary',\n 'tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:border-primary',\n 'tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:bg-primary',\n ],\n switch: [\n 'tw:size-5',\n // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight\n // to the indicator slot so it doesn't overflow.\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n 'tw:text-muted-foreground',\n 'tw:data-[state=unchecked]:rotate-180',\n 'tw:group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:text-primary',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:text-primary',\n ],\n },\n },\n },\n);\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.ItemIndicator> &\n VariantProps<typeof variants>;\n\nexport const DropdownMenuItemIndicator = ({\n variant,\n className,\n forceMount: forceMountProp,\n ...rest\n}: Props) => {\n const IconComp = (() => {\n if (variant === 'switch') return ToggleRight;\n if (variant === 'radio') return Circle;\n return Check;\n })();\n\n const forceMount = (() => {\n if (forceMountProp) return true;\n // All variants, except for check, require rendering at all times.\n return variant === 'check' ? undefined : true;\n })();\n\n if (variant === 'none') return null;\n\n return (\n <DropdownMenuPrimitive.ItemIndicator\n {...rest}\n forceMount={forceMount}\n className={variants({ variant, className })}\n >\n <IconComp />\n </DropdownMenuPrimitive.ItemIndicator>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'> & {\n children: ReactNode;\n};\n\nexport const ItemIcon = ({ className, children, ...props }: Props) => (\n <span\n {...props}\n className={cn(\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:aspect-square',\n // 20px container fits the 16px Lucide glyph plus 2px breathing room\n // each side — the previous tw:size-4 + tw:p-0.5 clipped the 16px child.\n 'tw:size-5',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n 'tw:group-data-[variant=default]/dropdown-menu-content:text-muted-foreground',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:text-primary',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:text-muted-foreground',\n 'tw:group-data-[variant=default]/dropdown-menu-content:group-hover:text-primary',\n className,\n )}\n >\n {children}\n </span>\n);\n","import { cn } from '../../utils';\n\nexport const itemVariants = cn(\n // reset\n 'tailwindcss-preflight',\n 'tw:outline-hidden',\n 'tw:group',\n 'tw:peer',\n 'tw:relative',\n\n // positioning\n 'tw:flex',\n 'tw:flex-1',\n 'tw:items-center',\n 'tw:gap-2',\n\n // An icon passed as `children` rather than via the `icon` prop misses `ItemIcon`,\n // so without this it falls back to Lucide's 24px default and towers over the\n // siblings this row is laid out for. The `:not()` keeps a call-site size winning.\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n\n 'tw:cursor-pointer',\n 'tw:select-none',\n 'tw:transition-colors',\n\n // spacing\n 'tw:p-2',\n\n // typography\n 'tw:font-sans',\n 'tw:text-sm',\n\n 'tw:aria-disabled:pointer-events-none',\n 'tw:aria-disabled:opacity-50',\n\n 'tw:focus-visible:outline-hidden',\n\n 'tw:group-data-[variant=default]/dropdown-menu-content:rounded',\n 'tw:group-data-[variant=default]/dropdown-menu-content:focus:bg-muted',\n 'tw:group-data-[variant=default]/dropdown-menu-content:focus:text-foreground',\n 'tw:group-data-[variant=default]/dropdown-menu-content:hover:bg-muted',\n 'tw:group-data-[variant=default]/dropdown-menu-content:hover:text-foreground',\n\n 'tw:group-data-[variant=argo]/dropdown-menu-content:rounded-md',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:text-popover-foreground',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:focus:text-primary',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:focus:bg-primary/10',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:hover:text-primary',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:hover:bg-primary/10',\n);\n\nexport const contentVariants = cn(\n 'tailwindcss-preflight',\n 'tw:group/dropdown-menu-content',\n // Sit above Modal/Sheet (z-1051), matching the other floating overlays (Popover/Select z-1055)\n 'tw:z-[1055]',\n\n // positioning\n 'tw:flex',\n 'tw:flex-col',\n 'tw:origin-(--radix-dropdown-menu-content-transform-origin)',\n\n // sizing\n 'tw:max-h-[var(--radix-dropdown-menu-content-available-height)]',\n 'tw:min-w-32',\n\n // border\n 'tw:border',\n 'tw:border-border',\n 'tw:shadow-md',\n\n // surface — semantic tokens, so a portalled menu follows the brand and the scheme\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n\n // Radius is the only thing the surface variants differ in.\n 'tw:data-[variant=default]:rounded-md',\n 'tw:data-[variant=argo]:rounded-2xl',\n\n // animations\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 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\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","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { Loader2 } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { DropdownMenuItemIndicator } from './DropdownMenuItemIndicator';\nimport { ItemIcon } from './ItemIcon';\nimport { itemVariants } from './styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n closeOnSelect?: boolean;\n indicator?: 'switch' | 'checkbox' | 'check';\n indicatorAlign?: 'start' | 'end';\n isLoading?: boolean;\n};\n\nexport const DropdownMenuCheckboxItem = ({\n className,\n children,\n checked,\n closeOnSelect = false,\n onSelect,\n indicatorAlign = 'start',\n indicator = 'checkbox',\n isLoading = false,\n ...props\n}: Props) => {\n const isAtStart = indicatorAlign === 'start';\n const indicatorEle = isLoading ? (\n <ItemIcon className={isAtStart ? '' : 'tw:ml-auto'}>\n <Loader2 className=\"tw:animate-spin\" />\n </ItemIcon>\n ) : (\n <DropdownMenuItemIndicator variant={indicator} className={isAtStart ? '' : 'tw:ml-auto'} />\n );\n\n const handleSelect = (event: Event) => {\n if (!closeOnSelect) event.preventDefault();\n onSelect?.(event);\n };\n\n return (\n <DropdownMenuPrimitive.CheckboxItem\n className={cn(itemVariants, className)}\n checked={checked}\n onSelect={handleSelect}\n {...props}\n >\n {isAtStart && indicatorEle}\n {children}\n {!isAtStart && indicatorEle}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n};\n","import { createContext, use } from 'react';\n\nexport type DropdownMenuVariant = 'default' | 'argo';\n\ntype DropdownMenuContextType = {\n variant: DropdownMenuVariant;\n};\n\nexport const DropdownMenuContext = createContext<DropdownMenuContextType>({\n variant: 'default',\n});\n\nexport const useDropdownMenuContext = () => use(DropdownMenuContext);\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\nimport { ScrollArea } from '../ScrollArea';\n\nimport { useDropdownMenuContext } from './DropdownMenuContext';\nimport { contentVariants } from './styles';\n\ntype Props = Omit<\n ComponentProps<typeof DropdownMenuPrimitive.Content>,\n 'forceMount' | 'asChild'\n> & {\n forceMount?: boolean;\n viewPortClassName?: string;\n container?: HTMLElement | null;\n};\n\nexport const DropdownMenuContent = ({\n className,\n sideOffset = 4,\n forceMount,\n children,\n viewPortClassName,\n container,\n ...props\n}: Props) => {\n const { variant } = useDropdownMenuContext();\n\n return (\n <DropdownMenuPrimitive.Portal forceMount={forceMount || undefined} container={container}>\n <DropdownMenuPrimitive.Content\n {...props}\n data-variant={variant}\n sideOffset={sideOffset}\n className={contentVariants}\n >\n <ScrollArea\n className={className}\n viewPortClassName={cn(\n 'tw:p-2',\n 'tw:max-h-[var(--radix-dropdown-menu-content-available-height)]',\n viewPortClassName,\n )}\n scrollBarClassName=\"tw:w-1.5\"\n >\n {children}\n </ScrollArea>\n </DropdownMenuPrimitive.Content>\n </DropdownMenuPrimitive.Portal>\n );\n};\n","import type { ComponentProps, PointerEventHandler, ReactNode } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Root, Slottable } from '@radix-ui/react-slot';\n\nimport { Loader2 } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { ItemIcon } from './ItemIcon';\nimport { itemVariants } from './styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n /**\n * Fix for `autoFocus` on inputs not working correctly in modals.\n * While the DropdownMenuItem was animating out and the modal was animating in, the dying DropdownMenuItem was constantly trying to steal focus while the Dialog was trying to correctly set the new focus.\n * https://github.com/radix-ui/primitives/issues/2193#issuecomment-2758461323\n */\n asModalTrigger?: boolean;\n /** Pass a Lucide icon node as a leading adornment. */\n icon?: ReactNode;\n isLoading?: boolean;\n iconClassName?: string;\n};\n\nexport const DropdownMenuItem = ({\n ref,\n className,\n asModalTrigger = false,\n onSelect,\n onPointerLeave,\n onPointerMove,\n children,\n asChild,\n icon,\n iconClassName,\n isLoading = false,\n ...props\n}: Props) => {\n const Comp = asChild ? Root : 'div';\n const adornment = isLoading ? <Loader2 className=\"tw:animate-spin\" /> : icon;\n\n const handleOnSelect = (event: Event) => {\n // prevents dropdown menu from closing to prevent modal unmounting from dom\n if (asModalTrigger) event.preventDefault();\n onSelect?.(event);\n };\n\n const handlePointerLeave: PointerEventHandler<HTMLDivElement> = (event) => {\n // prevents focus stealing from modal\n if (asModalTrigger) event.preventDefault();\n onPointerLeave?.(event);\n };\n\n const handlePointerMove: PointerEventHandler<HTMLDivElement> = (event) => {\n // prevents focus stealing from modal\n if (asModalTrigger) event.preventDefault();\n onPointerMove?.(event);\n };\n\n return (\n <DropdownMenuPrimitive.Item\n {...props}\n ref={ref}\n onSelect={handleOnSelect}\n onPointerLeave={handlePointerLeave}\n onPointerMove={handlePointerMove}\n className={cn(itemVariants, asChild && 'tw:text-inherit', className)}\n asChild\n >\n <Comp>\n {adornment && <ItemIcon className={iconClassName}>{adornment}</ItemIcon>}\n <Slottable>{children}</Slottable>\n </Comp>\n </DropdownMenuPrimitive.Item>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nconst descriptionVariants = cva(\n [\n 'tw:box-border',\n 'tw:ml-auto',\n 'tw:font-sans',\n 'tw:tracking-normal',\n 'tw:font-normal',\n 'tw:text-xs',\n 'tw:text-muted-foreground',\n ],\n {\n variants: {\n hideOnHover: {\n true: ['tw:group-focus-within:hidden', 'tw:group-hover:hidden'],\n false: [],\n },\n },\n defaultVariants: {},\n },\n);\n\ntype Props = ComponentProps<'span'> & {\n hideOnHover?: boolean;\n};\n\nexport const DropdownMenuItemDescription = ({\n className,\n children,\n hideOnHover = false,\n ...props\n}: Props) => {\n return (\n <span {...props} className={cn(descriptionVariants({ hideOnHover }), className)}>\n {children}\n </span>\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.Label>;\n\nexport const DropdownMenuLabel = ({ className, ...props }: Props) => {\n return (\n <DropdownMenuPrimitive.Label\n className={cn(\n 'tw:p-2',\n 'tw:font-medium',\n 'tw:text-xs',\n 'tw:text-muted-foreground',\n className,\n )}\n {...props}\n />\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\ntype Props<Value> = Omit<\n ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,\n 'value' | 'onValueChange' | 'defaultValue'\n> & {\n value?: Value;\n defaultValue?: Value;\n onValueChange?: (value: Value) => void;\n};\n\nexport const DropdownMenuRadioGroup = <Value extends string = string>({\n value,\n defaultValue,\n onValueChange,\n ...props\n}: Props<Value>) => {\n const handleChange = (value: string) => {\n onValueChange?.(value as Value);\n };\n\n return (\n <DropdownMenuPrimitive.RadioGroup\n {...props}\n value={value}\n defaultValue={defaultValue}\n onValueChange={handleChange}\n />\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { Loader2 } from '../../../icons';\nimport { cn } from '../../../utils';\nimport { DropdownMenuItemIndicator } from '../DropdownMenuItemIndicator';\nimport { ItemIcon } from '../ItemIcon';\nimport { itemVariants } from '../styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n closeOnSelect?: boolean;\n indicatorAlign?: 'start' | 'end';\n indicator?: 'radio' | 'check' | 'none';\n icon?: ReactNode;\n iconClassName?: string;\n isLoading?: boolean;\n};\n\nexport const DropdownMenuRadioItem = ({\n className,\n children,\n closeOnSelect,\n onSelect,\n indicatorAlign = 'start',\n indicator = 'radio',\n icon,\n iconClassName,\n isLoading = false,\n ...props\n}: Props) => {\n const isAtStart = indicatorAlign === 'start';\n const indicatorEle = isLoading ? (\n <ItemIcon className={iconClassName}>\n <Loader2 className=\"tw:animate-spin\" />\n </ItemIcon>\n ) : (\n <DropdownMenuItemIndicator variant={indicator} />\n );\n\n const handleSelect = (event: Event) => {\n if (!closeOnSelect) event.preventDefault();\n onSelect?.(event);\n };\n\n return (\n <DropdownMenuPrimitive.RadioItem\n className={cn(\n itemVariants,\n 'tw:data-[state=checked]:cursor-default',\n {\n 'tw:data-[state=checked]:bg-neutral-100': indicator === 'none',\n // Semantic brand tint (flips under `[data-theme='dark']`) instead of a\n // hardcoded `tw:bg-sky-100`, which stayed light in dark mode and left the\n // checked item's text near-invisible.\n 'tw:group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:bg-primary/10':\n indicator === 'check',\n },\n className,\n )}\n onSelect={handleSelect}\n {...props}\n >\n {isAtStart && indicatorEle}\n {icon && <ItemIcon className={iconClassName}>{icon}</ItemIcon>}\n <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:items-center tw:gap-2\">{children}</span>\n {!isAtStart && indicatorEle}\n </DropdownMenuPrimitive.RadioItem>\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.Separator>;\n\nexport const DropdownMenuSeparator = ({ className, ...props }: Props) => (\n <DropdownMenuPrimitive.Separator\n className={cn(\n 'tw:relative',\n 'tw:z-10',\n\n // layout\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:w-full',\n\n // separator line\n 'tw:before:content-[\"\"]',\n 'tw:before:w-full',\n 'tw:before:h-px',\n\n 'tw:group-data-[variant=default]/dropdown-menu-content:py-2',\n 'tw:group-data-[variant=default]/dropdown-menu-content:before:bg-border',\n\n 'tw:group-data-[variant=argo]/dropdown-menu-content:py-1',\n 'tw:group-data-[variant=argo]/dropdown-menu-content:before:bg-border',\n\n className,\n )}\n {...props}\n />\n);\n","import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nexport const DropdownMenuSub = DropdownMenuPrimitive.Sub;\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../../utils';\nimport { useDropdownMenuContext } from '../DropdownMenuContext';\nimport { contentVariants } from '../styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.SubContent>;\n\nexport const DropdownMenuSubContent = ({ className, ...props }: Props) => {\n const { variant } = useDropdownMenuContext();\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.SubContent\n data-variant={variant}\n className={cn(contentVariants, 'tw:z-[1041]', 'tw:p-2', className)}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\n\nimport { ChevronRight } from '../../../icons';\nimport { cn } from '../../../utils';\nimport { itemVariants } from '../styles';\n\ntype Props = ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>;\n\nexport const DropdownMenuSubTrigger = ({ className, children, ...props }: Props) => {\n return (\n <DropdownMenuPrimitive.SubTrigger className={cn(itemVariants, className)} {...props}>\n {children}\n <ChevronRight className=\"tw:ml-auto tw:size-5\" />\n </DropdownMenuPrimitive.SubTrigger>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Trigger } from '@radix-ui/react-dropdown-menu';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Trigger>;\n\nexport const DropdownMenuTrigger = ({ ref, className, ...props }: Props) => (\n <Trigger\n {...props}\n ref={ref}\n data-slot=\"dropdown-menu-trigger\"\n className={cn('tw:group/dropdown-menu-trigger', className)}\n />\n);\n","import { useMemo } from 'react';\nimport type { ComponentProps } from 'react';\nimport { Group, Root } from '@radix-ui/react-dropdown-menu';\n\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem';\nimport { DropdownMenuContent } from './DropdownMenuContent';\nimport type { DropdownMenuVariant } from './DropdownMenuContext';\nimport { DropdownMenuContext } from './DropdownMenuContext';\nimport { DropdownMenuItem } from './DropdownMenuItem';\nimport { DropdownMenuItemDescription } from './DropdownMenuItemDescription';\nimport { DropdownMenuLabel } from './DropdownMenuLabel';\nimport { DropdownMenuRadioGroup, DropdownMenuRadioItem } from './DropdownMenuRadioGroup';\nimport { DropdownMenuSeparator } from './DropdownMenuSeparator';\nimport { DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from './DropdownMenuSub';\nimport { DropdownMenuTrigger } from './DropdownMenuTrigger';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const DropdownMenu = ({\n // change a default value to false, for modal property, as it is not used in most cases\n modal = false,\n ...props\n}: Props) => {\n const effectiveVariant: DropdownMenuVariant = useArgoDesign() ? 'argo' : 'default';\n const contextValue = useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);\n\n return (\n <DropdownMenuContext value={contextValue}>\n <Root {...props} modal={modal} />\n </DropdownMenuContext>\n );\n};\n\n/**\n * Main Layout\n */\nDropdownMenu.Trigger = DropdownMenuTrigger;\nDropdownMenu.Content = DropdownMenuContent;\nDropdownMenu.Group = Group;\n\n/**\n * Sub Layout\n */\nDropdownMenu.Sub = DropdownMenuSub;\nDropdownMenu.SubContent = DropdownMenuSubContent;\nDropdownMenu.SubTrigger = DropdownMenuSubTrigger;\n\n/**\n * Items can be used either Sub ar Main Layout\n */\nDropdownMenu.Separator = DropdownMenuSeparator;\nDropdownMenu.Label = DropdownMenuLabel;\nDropdownMenu.Item = DropdownMenuItem;\nDropdownMenu.CheckboxItem = DropdownMenuCheckboxItem;\nDropdownMenu.RadioGroup = DropdownMenuRadioGroup;\nDropdownMenu.RadioItem = DropdownMenuRadioItem;\n\n// item content\nDropdownMenu.ItemDescription = DropdownMenuItemDescription;\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FieldItem-DtPTzNef.js","names":[],"sources":["../src/blocks/Form/contexts.ts","../src/blocks/Form/connectors/FieldItem.tsx"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\n\nexport const { fieldContext, useFieldContext, formContext, useFormContext } =\n createFormHookContexts();\n","import { type ReactNode, useRef } from 'react';\nimport { useStore } from '@tanstack/react-form';\n\nimport { Label } from '../../../components/Label';\nimport { Tooltip } from '../../../components/Tooltip';\nimport { Info } from '../../../icons';\nimport { FormGroup } from '../../FormGroup';\nimport { useFieldContext, useFormContext } from '../contexts';\n\n/**\n * The a11y wiring `FieldItem` derives from the field and hands back to the control — spread it onto\n * whatever element the field renders. Callers never author these attributes themselves.\n */\ntype FieldControlProps = {\n id: string;\n name: string;\n 'aria-required'?: true;\n 'aria-invalid'?: true;\n 'aria-describedby'?: string;\n /** Present only under `labelling: 'aria-labelledby'` — see the prop. */\n 'aria-labelledby'?: string;\n};\n\n/** Which marker sits next to the label. Purely visual — `aria-required` is driven by `required`. */\ntype RequiredMark = 'required' | 'optional' | 'hidden';\n\n/**\n * How the control takes its accessible name from the label.\n *\n * - `'for'` (default) — `<label for>` points at the control's `id`. Correct for the *labelable*\n * elements: `input`, `textarea`, `select`, `button`, and anything rendering one.\n * - `'aria-labelledby'` — the label gets an id and it comes back in `control['aria-labelledby']`,\n * with no `for` emitted. For controls that are **not** labelable elements: a CodeMirror or Lexical\n * editable region, or a composite widget whose focusable node is a `div[role]`. `<label for>`\n * pointing at one of those is invalid HTML and silently names nothing.\n */\ntype Labelling = 'for' | 'aria-labelledby';\n\ntype Props = {\n label?: ReactNode;\n /**\n * Optional node rendered at the trailing edge of the label row (opposite the label) — e.g. a\n * \"Forgot password?\" link beside a Password label. Presentational placement only; it is a sibling\n * of the `<Label>`, not part of the field's accessible name. Provide an interactive element\n * (`ButtonInline` / `Link`).\n */\n action?: ReactNode;\n required?: boolean;\n /**\n * Which marker to show beside the label — gated by `required` so it never lies: `'required'`\n * renders `*` only when the field is `required`; `'optional'` renders `(optional)` only when it\n * is not; `'hidden'` renders neither. Defaults to `'required'`.\n */\n requiredMark?: RequiredMark;\n /** See {@link Labelling}. Defaults to `'for'`. */\n labelling?: Labelling;\n help?: ReactNode;\n tooltip?: ReactNode;\n className?: string;\n 'aria-describedby'?: string;\n children: (control: FieldControlProps) => ReactNode;\n};\n\n/**\n * The frame props a connector re-exposes to its own callers.\n *\n * - `labelling` is not among them: which mechanism names the control follows from what the control\n * *is*, so the connector picks it, not the call site.\n * - Leaving it in would type-check and do nothing — no connector forwards it — and land in the rest\n * spread instead, which for `TextField` / `TextareaField` reaches the DOM `<input>`.\n */\nexport type FieldItemProps = Omit<Props, 'children' | 'labelling'>;\n\n/**\n * Shared frame for a form field: label (+ required marker + tooltip), the control, and help/error\n * text. It reads the field from context and owns everything derivable — validity, the error/help\n * ids, and the control's `aria-*` wiring — so a connector only picks a control and binds its value.\n */\nexport const FieldItem = ({\n label,\n action,\n required,\n requiredMark = 'required',\n labelling = 'for',\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n children,\n}: Props) => {\n const field = useFieldContext();\n const form = useFormContext();\n const { errors, isBlurred } = field.state.meta;\n const submissionAttempts = useStore(form.store, (state) => state.submissionAttempts);\n\n /**\n * The submit count as of this field's first render.\n *\n * - `submissionAttempts` never goes down, so a bare `> 0` would reveal errors on a field that mounted\n * *after* a failed submit — switch a type on a form that already failed Save and every freshly\n * revealed control says \"Required\" before the user reaches it.\n * - Comparing against the mount value asks the question that matters: has a submit happened while this\n * field was on screen?\n * - `form.reset()` puts the counter back to 0 without unmounting anything, so the baseline has to\n * follow it down. Left alone it outruns the counter and the next submit compares `1 > 1` — the\n * error stays hidden until a second one.\n */\n const attemptsAtMountRef = useRef(submissionAttempts);\n if (submissionAttempts < attemptsAtMountRef.current)\n attemptsAtMountRef.current = submissionAttempts;\n\n /**\n * ⚠️ **Blurred, not touched.**\n *\n * `isTouched` looks like the right gate and is not: `FormApi.setFieldValue` sets it, so filling a field\n * *for* the user — an id derived from a name, a default written when a type is picked — reads as the\n * user having been there (`validateField` and `validateAllFields` set it too). The visible result is\n * \"Required\" under a control the user has never been near.\n *\n * `isBlurred` is per-field and only a real blur sets it: the user was in this control and left it.\n * A submit attempt reveals everything that was on screen for it, because a field nobody visited still\n * has to explain itself once the button is pressed. `setServerFieldErrors` marks `isBlurred` for the\n * same reason — a mutation that fails outside a submit has neither signal otherwise.\n */\n const isInvalid =\n (isBlurred || submissionAttempts > attemptsAtMountRef.current) && errors.length > 0;\n\n const errorId = `${field.name}-error`;\n const descriptionId = `${field.name}-description`;\n const labelId = `${field.name}-label`;\n const namesByAria = labelling === 'aria-labelledby';\n // Help and error are not exclusive — link the control to whichever are present. Space-delimited\n // ARIA idref list; falsy entries dropped, and `undefined` when empty so the attr is omitted.\n const describedBy =\n [ariaDescribedBy, !!help && descriptionId, isInvalid && errorId].filter(Boolean).join(' ') ||\n undefined;\n\n return (\n <FormGroup className={className}>\n {(label || action) && (\n <div className=\"tw:flex tw:items-center tw:justify-between tw:gap-2\">\n <div className=\"tw:flex tw:items-center tw:gap-1\">\n {/* Marker binds to the label text; the interactive tooltip button is a sibling. */}\n {label && (\n // `htmlFor` only when the control is a labelable element. Under `aria-labelledby` the\n // label carries an id instead and the control points back at it — a `for` aimed at a\n // `div[role=textbox]` is invalid HTML and names nothing.\n <Label\n htmlFor={namesByAria ? undefined : field.name}\n id={namesByAria ? labelId : undefined}\n >\n {label}\n {/* Marker follows both flags: `*` only when actually required, `(optional)` only\n when not — a mismatched marker would lie. `hidden` shows neither. */}\n {requiredMark === 'required' && required && <Label.Required />}\n {requiredMark === 'optional' && !required && <Label.Optional />}\n </Label>\n )}\n\n {tooltip && (\n <Tooltip tooltip={tooltip} placement=\"top\" triggerAsChild>\n <button\n type=\"button\"\n aria-label={\n typeof label === 'string'\n ? `More information about ${label}`\n : 'More information'\n }\n className=\"tw:text-muted-foreground tw:focus:outline-hidden tw:focus-visible:text-primary tailwindcss-preflight\"\n >\n <Info className=\"tw:size-3\" />\n </button>\n </Tooltip>\n )}\n </div>\n\n {action}\n </div>\n )}\n\n {children({\n id: field.name,\n name: field.name,\n 'aria-required': required || undefined,\n 'aria-invalid': isInvalid || undefined,\n 'aria-describedby': describedBy,\n 'aria-labelledby': namesByAria && label ? labelId : undefined,\n })}\n\n {(help || isInvalid) && (\n <div>\n {help && <FormGroup.Help id={descriptionId}>{help}</FormGroup.Help>}\n {isInvalid && <FormGroup.Error id={errorId} errors={errors} />}\n </div>\n )}\n </FormGroup>\n );\n};\n"],"mappings":";;;;;;;;AAEA,MAAa,EAAE,cAAc,iBAAiB,aAAa,mBACzD,uBAAuB;;;;;;;;AC2EzB,MAAa,aAAa,EACxB,OACA,QACA,UACA,eAAe,YACf,YAAY,OACZ,MACA,SACA,WACA,oBAAoB,iBACpB,eACW;CACX,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,OAAO,eAAe;CAC5B,MAAM,EAAE,QAAQ,cAAc,MAAM,MAAM;CAC1C,MAAM,qBAAqB,SAAS,KAAK,QAAQ,UAAU,MAAM,kBAAkB;;;;;;;;;;;;;CAcnF,MAAM,qBAAqB,OAAO,kBAAkB;CACpD,IAAI,qBAAqB,mBAAmB,SAC1C,mBAAmB,UAAU;;;;;;;;;;;;;;CAe/B,MAAM,aACH,aAAa,qBAAqB,mBAAmB,YAAY,OAAO,SAAS;CAEpF,MAAM,UAAU,GAAG,MAAM,KAAK;CAC9B,MAAM,gBAAgB,GAAG,MAAM,KAAK;CACpC,MAAM,UAAU,GAAG,MAAM,KAAK;CAC9B,MAAM,cAAc,cAAc;CAGlC,MAAM,cACJ;EAAC;EAAiB,CAAC,CAAC,QAAQ;EAAe,aAAa;CAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACzF,KAAA;CAEF,OACE,qBAAC,WAAD;EAAsB;EAAtB,UAAA;IACI,SAAS,WACT,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CAEG,SAIC,qBAAC,OAAD;MACE,SAAS,cAAc,KAAA,IAAY,MAAM;MACzC,IAAI,cAAc,UAAU,KAAA;MAF9B,UAAA;OAIG;OAGA,iBAAiB,cAAc,YAAY,oBAAC,MAAM,UAAP,CAAiB,CAAA;OAC5D,iBAAiB,cAAc,CAAC,YAAY,oBAAC,MAAM,UAAP,CAAiB,CAAA;MACzD;KAGR,CAAA,GAAA,WACC,oBAAC,SAAD;MAAkB;MAAS,WAAU;MAAM,gBAAA;MACzC,UAAA,oBAAC,UAAD;OACE,MAAK;OACL,cACE,OAAO,UAAU,WACb,0BAA0B,UAC1B;OAEN,WAAU;OAEV,UAAA,oBAAC,MAAD,EAAM,WAAU,YAAa,CAAA;MACvB,CAAA;KACD,CAAA,CAER;IAEJ,CAAA,GAAA,MACE;;GAGN,SAAS;IACR,IAAI,MAAM;IACV,MAAM,MAAM;IACZ,iBAAiB,YAAY,KAAA;IAC7B,gBAAgB,aAAa,KAAA;IAC7B,oBAAoB;IACpB,mBAAmB,eAAe,QAAQ,UAAU,KAAA;GACtD,CAAC;IAEC,QAAQ,cACR,qBAAC,OAAD,EAAA,UAAA,CACG,QAAQ,oBAAC,UAAU,MAAX;IAAgB,IAAI;IAAgB,UAAA;GAAqB,CAAA,GACjE,aAAa,oBAAC,UAAU,OAAX;IAAiB,IAAI;IAAiB;GAAS,CAAA,CAC1D,EAAA,CAAA;EAEE;;AAEf"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FormGroup-Bl8JmnzJ.js","names":[],"sources":["../src/blocks/FormGroup/context.ts","../src/blocks/FormGroup/FormGroupColorInput.tsx","../src/blocks/FormGroup/FormGroupError.tsx","../src/blocks/FormGroup/FormGroupHelp.tsx","../src/blocks/FormGroup/FormGroupNumberInput.tsx","../src/blocks/FormGroup/FormGroupTextarea.tsx","../src/blocks/FormGroup/FormGroupTextInput.tsx","../src/blocks/FormGroup/FormGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nimport type { FormGroupContext } from './types';\n\nconst FormGroupContext = createContext<FormGroupContext>({\n state: 'default',\n});\n\nexport const FormGroupProvider = FormGroupContext;\n\nexport const useFormGroupContext = () => use(FormGroupContext);\n","import type { ComponentProps } from 'react';\n\nimport { ColorInput } from '../ColorInput';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof ColorInput>, 'state'>;\n\nexport const FormGroupColorInput = ({ ref, ...props }: Props) => {\n const { state } = useFormGroupContext();\n return <ColorInput state={state} {...props} ref={ref} />;\n};\n","import { useMemo } from 'react';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentPropsWithRef<'div'> & {\n /**\n * Field validation errors. TanStack Form errors are strings (function validators) or\n * `{ message }` objects (Standard Schema / zod). A single message renders inline; several\n * render as a list. Ignored when `children` is provided.\n */\n errors?: readonly (string | { message?: string } | undefined)[];\n};\n\n// Normalize a TanStack error entry (string or `{ message }`) to a display string.\nconst toMessage = (entry: string | { message?: string } | undefined): string | undefined =>\n typeof entry === 'string' ? entry : entry?.message;\n\n/**\n * Field error message. Unlike `FormGroup.Help` (advisory description), this is a validation\n * error, so it carries `role=\"alert\"` — announced when it appears, even if focus isn't on the\n * field (e.g. surfaced on submit). Renders a `<div>` (not `<p>`) so multiple errors can render\n * as a `<ul>`.\n */\nexport const FormGroupError = ({ children, className, errors, ...rest }: Props) => {\n const content = useMemo<ReactNode>(() => {\n if (children) return children;\n\n // Deduplicated: a field validated on more than one event (`onChange` **and** `onBlur` carrying the\n // same schema) accumulates one entry per validator that ran, so after a blur the identical message\n // is present twice and renders as \"RequiredRequired\". Two validators agreeing is still one thing to\n // tell the reader. That pairing is not the setup to reach for — `Form/AGENTS.md` says to register\n // the schema on `onChange` and nothing else — but this component renders whatever it is handed.\n const messages = [...new Set((errors ?? []).map(toMessage).filter((message) => !!message))];\n if (messages.length === 0) return null;\n if (messages.length === 1) return messages[0];\n\n return (\n <ul className=\"tw:m-0 tw:flex tw:list-disc tw:flex-col tw:gap-0 tw:pl-4\">\n {messages.map((message) => (\n // The message is the key: they are unique after the dedupe above, which also retires the\n // array-index key this list used to need.\n <li key={message}>{message}</li>\n ))}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) return null;\n\n return (\n <div {...rest} role=\"alert\" className={cn('tw:m-0 tw:text-xs tw:text-destructive', className)}>\n {content}\n </div>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { HelpBlock } from '../../components/HelpBlock';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof HelpBlock>, 'state'>;\n\nexport const FormGroupHelp = ({ children, ...rest }: Props) => {\n const formGroupContext = useFormGroupContext();\n\n // Help stays advisory; a group's error state surfaces via FormGroup.Error, not here.\n return (\n <HelpBlock state={formGroupContext.state === 'warning' ? 'warning' : 'default'} {...rest}>\n {children}\n </HelpBlock>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { NumberInput } from '../NumberInput';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof NumberInput>, 'state'>;\n\nexport const FormGroupNumberInput = ({ ref, ...props }: Props) => {\n const { state } = useFormGroupContext();\n return <NumberInput {...props} ref={ref} state={state} />;\n};\n","import type { ComponentProps } from 'react';\n\nimport { Textarea } from '../Textarea';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Textarea>, 'state'>;\n\nexport const FormGroupTextarea = (props: Props) => {\n const { state } = useFormGroupContext();\n return <Textarea state={state} {...props} />;\n};\n","import type { ComponentProps } from 'react';\n\nimport { TextInput } from '../TextInput';\n\nimport { useFormGroupContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof TextInput>, 'state'>;\n\nexport const FormGroupTextInput = ({ ref, ...props }: Props) => {\n const { state } = useFormGroupContext();\n return <TextInput state={state} {...props} ref={ref} />;\n};\n","import type { ComponentPropsWithRef } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { FormGroupProvider } from './context';\nimport { FormGroupColorInput } from './FormGroupColorInput';\nimport { FormGroupError } from './FormGroupError';\nimport { FormGroupHelp } from './FormGroupHelp';\nimport { FormGroupNumberInput } from './FormGroupNumberInput';\nimport { FormGroupTextarea } from './FormGroupTextarea';\nimport { FormGroupTextInput } from './FormGroupTextInput';\nimport type { FormGroupContext } from './types';\n\n/**\n * Props for `FormGroup`. `state` from `FormGroupContext` (\"default\" | \"error\" | \"warning\") propagates via\n * context to nested inputs. `FormGroup.Help` stays advisory (it reacts only to \"warning\"); validation errors\n * render through `FormGroup.Error`, not the input `state`.\n */\ntype FormGroupProps = ComponentPropsWithRef<'div'> & FormGroupContext;\n\n/**\n * Label + input + help-text grouping with shared validation state. Provides the chrome for a single field.\n *\n * **When to use:** rendering a label + bare input + help/error text outside `useAppForm` (e.g. one-off\n * filter fields, settings panes). `state=\"error\"` flips `FormGroup.TextInput` chrome without per-component\n * wiring; the error message itself renders via `FormGroup.Error` (`role=\"alert\"`), while `FormGroup.Help`\n * stays advisory.\n * **When NOT to use:** for a full form with validation and submit state, use `useAppForm` from `blocks/Form` —\n * it composes `FormGroup` internally via the typed field connectors.\n * **Composition:** nest a `Label`, then one of `FormGroup.TextInput` / `FormGroup.NumberInput` /\n * `FormGroup.ColorInput` / `FormGroup.Textarea`, optionally followed by `FormGroup.Help`\n * (advisory description) or `FormGroup.Error` (validation error, announced via `role=\"alert\"`).\n */\nexport const FormGroup = ({ className, children, state, ...rest }: FormGroupProps) => {\n return (\n <FormGroupProvider value={{ state }}>\n <div {...rest} className={cn('tw:flex tw:flex-col tw:gap-1', className)}>\n {children}\n </div>\n </FormGroupProvider>\n );\n};\n\nFormGroup.Help = FormGroupHelp;\nFormGroup.Error = FormGroupError;\nFormGroup.TextInput = FormGroupTextInput;\nFormGroup.NumberInput = FormGroupNumberInput;\nFormGroup.ColorInput = FormGroupColorInput;\nFormGroup.Textarea = FormGroupTextarea;\n"],"mappings":";;;;;;;;;AAIA,MAAM,mBAAmB,cAAgC,EACvD,OAAO,UACT,CAAC;AAED,MAAa,oBAAoB;AAEjC,MAAa,4BAA4B,IAAI,gBAAgB;;;ACF7D,MAAa,uBAAuB,EAAE,KAAK,GAAG,YAAmB;CAC/D,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,YAAD;EAAmB;EAAO,GAAI;EAAY;CAAM,CAAA;AACzD;;;ACIA,MAAM,aAAa,UACjB,OAAO,UAAU,WAAW,QAAQ,OAAO;;;;;;;AAQ7C,MAAa,kBAAkB,EAAE,UAAU,WAAW,QAAQ,GAAG,WAAkB;CACjF,MAAM,UAAU,cAAyB;EACvC,IAAI,UAAU,OAAO;EAOrB,MAAM,WAAW,CAAC,GAAG,IAAI,KAAK,UAAU,CAAC,EAAA,CAAG,IAAI,SAAS,CAAC,CAAC,QAAQ,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC;EAC1F,IAAI,SAAS,WAAW,GAAG,OAAO;EAClC,IAAI,SAAS,WAAW,GAAG,OAAO,SAAS;EAE3C,OACE,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,SAAS,KAAK,YAGb,oBAAC,MAAD,EAAA,UAAmB,QAAY,GAAtB,OAAsB,CAChC;EACC,CAAA;CAER,GAAG,CAAC,UAAU,MAAM,CAAC;CAErB,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,OAAD;EAAK,GAAI;EAAM,MAAK;EAAQ,WAAW,GAAG,yCAAyC,SAAS;EACzF,UAAA;CACE,CAAA;AAET;;;AC/CA,MAAa,iBAAiB,EAAE,UAAU,GAAG,WAAkB;CAC7D,MAAM,mBAAmB,oBAAoB;CAG7C,OACE,oBAAC,WAAD;EAAW,OAAO,iBAAiB,UAAU,YAAY,YAAY;EAAW,GAAI;EACjF;CACQ,CAAA;AAEf;;;ACTA,MAAa,wBAAwB,EAAE,KAAK,GAAG,YAAmB;CAChE,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,aAAD;EAAa,GAAI;EAAY;EAAY;CAAQ,CAAA;AAC1D;;;ACHA,MAAa,qBAAqB,UAAiB;CACjD,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,UAAD;EAAiB;EAAO,GAAI;CAAQ,CAAA;AAC7C;;;ACHA,MAAa,sBAAsB,EAAE,KAAK,GAAG,YAAmB;CAC9D,MAAM,EAAE,UAAU,oBAAoB;CACtC,OAAO,oBAAC,WAAD;EAAkB;EAAO,GAAI;EAAY;CAAM,CAAA;AACxD;;;;;;;;;;;;;;;;ACsBA,MAAa,aAAa,EAAE,WAAW,UAAU,OAAO,GAAG,WAA2B;CACpF,OACE,oBAAC,mBAAD;EAAmB,OAAO,EAAE,MAAM;EAChC,UAAA,oBAAC,OAAD;GAAK,GAAI;GAAM,WAAW,GAAG,gCAAgC,SAAS;GACnE;EACE,CAAA;CACY,CAAA;AAEvB;AAEA,UAAU,OAAO;AACjB,UAAU,QAAQ;AAClB,UAAU,YAAY;AACtB,UAAU,cAAc;AACxB,UAAU,aAAa;AACvB,UAAU,WAAW"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FullScreenModal-CN9nAs72.js","names":[],"sources":["../src/components/FullScreenModal/FullScreenModalBody.tsx","../src/components/FullScreenModal/FullScreenModalHeader.tsx","../src/components/FullScreenModal/FullScreenModalRoot.tsx","../src/components/FullScreenModal/FullScreenModal.tsx"],"sourcesContent":["import type { HTMLAttributes, Ref } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = HTMLAttributes<HTMLDivElement>;\n\nexport const FullScreenModalBody = ({\n ref,\n className,\n children,\n ...props\n}: Props & { ref?: Ref<HTMLDivElement> }) => (\n <div ref={ref} className={cn('tw:flex-1 tw:min-h-0 tw:overflow-auto', className)} {...props}>\n {children}\n </div>\n);\n","import { useMemo } from 'react';\nimport type { HTMLAttributes, PropsWithChildren, ReactNode } from 'react';\n\nimport { ChevronLeft } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Truncated } from '../Truncated';\n\nconst DEFAULT_TITLE_STYLES =\n 'tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden';\n\ntype Props = PropsWithChildren<\n Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n title: ReactNode;\n titleClassName?: string;\n titleWrapperClassName?: string;\n defaultTitleStyles?: boolean;\n isTitleWithIcon?: boolean;\n onClose?: () => void;\n showPreviousTitle?: boolean;\n }\n>;\n\nexport const FullScreenModalHeader = ({\n title,\n titleClassName,\n titleWrapperClassName,\n defaultTitleStyles = true,\n isTitleWithIcon = false,\n children,\n onClose,\n className,\n showPreviousTitle = true,\n ...props\n}: Props) => {\n const previousTitle = useMemo(() => {\n const modals = Array.from(document.querySelectorAll('[data-fullscreen-modal]'));\n return (\n showPreviousTitle &&\n modals?.length > 0 &&\n modals.at(-1)?.querySelector('[data-modal-title]')?.textContent\n );\n }, [showPreviousTitle]);\n\n return (\n <div\n className={cn('tw:p-4 tw:flex tw:shrink-0 tw:items-center tw:justify-between', className)}\n {...props}\n >\n <div className={cn('tw:flex tw:flex-1 tw:items-center', titleWrapperClassName)}>\n {previousTitle && onClose && (\n <Button onClick={onClose} size=\"icon\" className=\"tw:mr-6\">\n <ChevronLeft className=\"tw:size-4\" />\n </Button>\n )}\n\n <div className=\"tw:w-full\">\n <div\n className={cn('tw:m-0', defaultTitleStyles && DEFAULT_TITLE_STYLES, titleClassName)}\n data-modal-title\n >\n {previousTitle && onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n className=\"tailwindcss-preflight\"\n aria-label={`Go back to ${previousTitle}`}\n >\n <Truncated\n text={previousTitle}\n className={cn(\n 'tw:relative tw:top-0 tw:cursor-pointer tw:text-base tw:font-normal tw:text-muted-foreground tw:underline',\n 'tw:hover:text-foreground tw:hover:no-underline',\n isTitleWithIcon && 'tw:ml-14',\n )}\n />\n </button>\n )}\n <div\n className={cn('tw:flex tw:items-center', {\n 'tw:[&>img]:-mt-6': previousTitle,\n })}\n >\n {title}\n </div>\n </div>\n </div>\n </div>\n {children}\n </div>\n );\n};\n","import { useEffect, useRef } from 'react';\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype Props = HTMLAttributes<HTMLDivElement> & {\n children: ReactNode;\n /** Lock body scroll when modal is open. Default: true */\n lockBodyScroll?: boolean;\n /** Callback when ESC key is pressed */\n onEscapeKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n};\n\nconst BODY_LOCK_CLASS = 'full-screen-modal-open';\n\nexport const FullScreenModalRoot = ({\n children,\n className,\n lockBodyScroll = true,\n onEscapeKeyDown,\n onKeyDown,\n ...props\n}: Props) => {\n const modalRef = useRef<HTMLDivElement>(null);\n const renderArgo = useArgoDesign();\n\n // Body scroll lock\n useEffect(() => {\n const modalElement = modalRef.current;\n\n if (lockBodyScroll) {\n document.body.classList.add(BODY_LOCK_CLASS);\n }\n\n return () => {\n // Filter out the current modal because it may still be in the DOM\n // when lockBodyScroll toggles from true to false (e.g. switching\n // from full-screen to half-screen mode).\n const hasOtherModals = Array.from(document.querySelectorAll('[data-fullscreen-modal]')).some(\n (el) => el !== modalElement,\n );\n\n if (!hasOtherModals) {\n document.body.classList.remove(BODY_LOCK_CLASS);\n }\n };\n }, [lockBodyScroll]);\n\n /**\n * Whatever had focus when this modal mounted — read during render, and only the first one.\n *\n * - React focuses an `autoFocus` descendant while committing this tree, before any effect here\n * runs. Read in the effect instead, the opener is already gone: `document.activeElement` is\n * the modal's own field, and close hands focus to an element that is being unmounted.\n * - Render is the last moment the opener is readable, so the read sits here rather than in a\n * layout effect — a child's `autoFocus` lands in the same phase as one of those, ahead of it.\n */\n const openerRef = useRef<Element | null>(null);\n openerRef.current ??= document.activeElement;\n\n /**\n * Focus moves into the modal on open and back to the opener on close.\n *\n * - `onEscapeKeyDown` is a React `keydown` on this element, so it only ever fires while focus is\n * inside. Left where it was, focus stays on whatever opened the modal — behind it — and Escape\n * reaches nothing.\n * - Only when focus is still outside: a modal whose content autofocuses its own field (an editor,\n * a search box) has already put focus where it wants it, and taking it back would undo that.\n * That is why the move reads focus now and the restore reads the opener.\n * - This is not a focus trap. Tab still walks out into the obscured page behind; trapping and\n * `inert` need this element to own the background, which it does not.\n */\n useEffect(() => {\n const modal = modalRef.current;\n if (!modal) return;\n\n if (!modal.contains(document.activeElement)) modal.focus();\n\n return () => {\n const opener = openerRef.current;\n if (opener instanceof HTMLElement && opener.isConnected) opener.focus();\n };\n }, []);\n\n /**\n * Escape belongs to the modal it was pressed in.\n *\n * - A nested modal is portalled *beside* the one it is rendered inside, but React routes a\n * portal's events up the *logical* tree — so the inner modal's Escape arrives at the outer\n * one's handler too, and one keypress would dismiss both.\n * - Which modal the key belongs to is read off the DOM, where the nesting is not a lie: the\n * inner modal's element is a sibling of the outer's, not a descendant, so the outer sees a\n * target it does not contain and leaves the key alone.\n * - Not `stopPropagation`. A synthetic `stopPropagation` also stops the native event, and React\n * mounts a portal's listeners on `document.body` — so it would cut off every `document`-level\n * `keydown` handler on the page, including the one kbc-ui's own wrapper closes from.\n */\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n onKeyDown?.(event);\n if (event.key !== 'Escape' || event.defaultPrevented) return;\n\n const target = event.target;\n if (!(target instanceof Node) || !modalRef.current?.contains(target)) return;\n\n onEscapeKeyDown?.(event);\n };\n\n return createPortal(\n <div\n {...props}\n ref={modalRef}\n role=\"dialog\"\n aria-modal=\"true\"\n tabIndex={-1}\n data-fullscreen-modal\n data-argo={renderArgo}\n onKeyDown={handleKeyDown}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:fixed',\n 'tw:inset-0',\n 'tw:z-[1039]',\n 'tw:flex',\n 'tw:flex-col',\n // One scheme-following surface for both chromes. The legacy branch used\n // to pin `neutral-50`, which the dark scheme cannot reach — and its\n // light value is within a shade of `background` anyway. `text-foreground`\n // has to travel with it: the modal is portalled to `document.body`, so it\n // inherits no app-level foreground and content would sit dark-on-dark.\n 'tw:bg-background',\n 'tw:text-foreground',\n 'tw:focus-visible:outline-hidden',\n className,\n )}\n >\n {children}\n </div>,\n document.body,\n );\n};\n","import { FullScreenModalBody } from './FullScreenModalBody';\nimport { FullScreenModalHeader } from './FullScreenModalHeader';\nimport { FullScreenModalRoot } from './FullScreenModalRoot';\n\nexport const FullScreenModal = Object.assign(FullScreenModalRoot, {\n Header: FullScreenModalHeader,\n Body: FullScreenModalBody,\n});\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InputGroup-DcZRlVnN.js","names":[],"sources":["../src/components/InputGroup/InputGroupAddon.tsx","../src/components/InputGroup/InputGroupButton.tsx","../src/components/InputGroup/InputGroupInput.tsx","../src/components/InputGroup/InputGroupText.tsx","../src/components/InputGroup/InputGroupTextArea.tsx","../src/components/InputGroup/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\n// Padding only fires when the addon actually has content — keeps an empty\n// `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.\nconst addonVariants = cva(\n [\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-1',\n\n // Default size for nested Lucide icons in prefix/suffix slots; 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 align: 'inline-start',\n },\n variants: {\n align: {\n 'inline-start': ['tw:order-first', 'tw:shrink-0', 'tw:[&:not(:empty)]:pl-4'],\n 'inline-end': ['tw:order-last', 'tw:shrink-0', 'tw:[&:not(:empty)]:pr-4'],\n 'block-start': [\n 'tw:order-first',\n // `tw:w-full` needs to be empty-conditional too — when the addon\n // has no content the root stays in flex-row, and a 100%-wide\n // empty addon would claim half of the input row beside the input.\n 'tw:[&:not(:empty)]:w-full',\n 'tw:[&:not(:empty)]:px-4',\n 'tw:[&:not(:empty)]:py-1.5',\n ],\n 'block-end': [\n 'tw:order-last',\n 'tw:[&:not(:empty)]:w-full',\n 'tw:[&:not(:empty)]:px-4',\n 'tw:[&:not(:empty)]:py-1.5',\n ],\n },\n },\n },\n);\n\ntype Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;\n\nexport const InputGroupAddon = ({\n children,\n align = 'inline-start',\n className,\n ...props\n}: Props) => (\n <div {...props} data-align={align} className={cn(addonVariants({ align, className }))}>\n {children}\n </div>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype ButtonProps = ComponentProps<typeof Button>;\n\ntype Props = Omit<ButtonProps, 'size' | 'block' | 'variant'>;\n\nexport const InputGroupButton = ({ ref, className, tabIndex = -1, ...props }: Props) => (\n <Button\n {...props}\n tabIndex={tabIndex}\n ref={ref}\n variant=\"invisible\"\n size=\"icon-sm\"\n className={cn('tw:size-5', 'tw:[&_svg]:text-muted-foreground', className)}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'input'>;\n\nexport const InputGroupInput = ({ ref, className, ...inputProps }: Props) => (\n <input\n {...inputProps}\n ref={ref}\n className={cn(\n 'tw:flex-1',\n 'tw:min-w-0',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n\n // font\n 'tw:font-sans',\n 'tw:text-sm',\n\n // placeholder\n 'tw:placeholder:text-neutral-400',\n 'tw:placeholder:font-normal',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n\n className,\n )}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const InputGroupText = ({ className, ...props }: Props) => (\n <span\n className={cn(\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-2',\n 'tw:text-sm',\n 'tw:text-muted-foreground',\n 'tw:[&_svg]:pointer-events-none',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n className,\n )}\n {...props}\n />\n);\n","import type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nimport { cn } from '../../utils';\n\ntype TextareaNativeProps = Omit<\n ComponentProps<typeof TextareaAutosize>,\n 'value' | 'defaultValue' | 'rows' | 'maxRows'\n>;\n\ntype Props = TextareaNativeProps & {\n value?: string | null;\n defaultValue?: string | null;\n onValueChange?: (value: string) => void;\n onValueBlur?: (value: string) => void;\n maxRows?: number | 'unlimited';\n disableResize?: boolean;\n};\n\nexport const InputGroupTextArea = ({\n ref,\n className,\n onChange,\n onValueChange,\n value,\n defaultValue,\n onBlur,\n onValueBlur,\n disableResize = false,\n minRows = 1,\n maxRows = 4,\n ...props\n}: Props) => {\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (event) => {\n onValueChange?.(event.target.value);\n onChange?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLTextAreaElement> = (event) => {\n onValueBlur?.(event.target.value);\n onBlur?.(event);\n };\n\n return (\n <TextareaAutosize\n {...props}\n ref={ref}\n value={value ?? undefined}\n defaultValue={defaultValue ?? undefined}\n onChange={handleChange}\n onBlur={handleBlur}\n minRows={minRows}\n maxRows={maxRows === 'unlimited' ? undefined : maxRows}\n className={cn(\n 'tw:w-full',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n 'tw:px-4',\n\n // font\n 'tw:font-sans',\n 'tw:text-sm',\n\n // placeholder\n 'tw:placeholder:text-neutral-400',\n 'tw:placeholder:font-normal',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n {\n 'tw:resize-none': disableResize,\n },\n\n className,\n )}\n />\n );\n};\n","import type { ComponentPropsWithRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { InputGroupAddon } from './InputGroupAddon';\nimport { InputGroupButton } from './InputGroupButton';\nimport { InputGroupInput } from './InputGroupInput';\nimport { InputGroupText } from './InputGroupText';\nimport { InputGroupTextArea } from './InputGroupTextArea';\n\nconst inputGroupVariants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group',\n\n 'tw:overflow-hidden',\n 'tw:box-border',\n\n // positioning\n 'tw:flex',\n 'tw:items-center',\n\n // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with\n // the brand radius token in the `argo` variant below.\n 'tw:rounded',\n 'tw:border',\n 'tw:border-solid',\n // `border-input` rather than the fixed `neutral-200` — same light-scheme\n // grey, but it follows the dark scheme too. The base text stays pinned:\n // `secondary` and the readonly state below both fill with a fixed light\n // grey, so a scheme-following text colour would go light-on-light there.\n // `primary` opts into the token itself (and re-pins its readonly fill).\n 'tw:border-input',\n 'tw:text-neutral-800',\n 'tw:transition',\n\n // focus\n 'tw:has-[:is(input,textarea):focus]:ring-4',\n\n // readonly\n 'tw:has-[:is(input,textarea)[readonly]]:bg-neutral-150',\n 'tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0',\n 'tw:has-[:is(input,textarea)[readonly]]:border-neutral-150',\n\n // disabled cursor (opacity owned by variant)\n 'tw:has-[:is(input,textarea):disabled]:cursor-not-allowed',\n\n // textarea: top-align addons, allow vertical expansion, own its y-padding\n 'tw:has-[textarea]:items-start',\n\n 'tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap',\n 'tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap',\n 'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto',\n 'tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1',\n 'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto',\n 'tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1',\n\n 'tw:[&_input]:px-4',\n 'tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2',\n 'tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2',\n ],\n {\n defaultVariants: {\n variant: 'primary',\n state: 'default',\n sizing: 'medium',\n focusVariant: 'default',\n },\n compoundVariants: [\n {\n variant: 'secondary',\n state: 'error',\n className: ['tw:bg-error-100'],\n },\n {\n variant: 'secondary',\n state: 'warning',\n className: ['tw:bg-warning-100'],\n },\n {\n variant: 'primary',\n state: 'default',\n focusVariant: 'off',\n className: ['tw:has-[:is(input,textarea):focus]:border-neutral-200'],\n },\n {\n variant: 'secondary',\n state: 'default',\n focusVariant: 'off',\n className: ['tw:has-[:is(input,textarea):focus]:border-neutral-100'],\n },\n {\n variant: ['primary', 'secondary'],\n state: 'error',\n focusVariant: 'on',\n className: ['tw:!border-error-500', 'tw:!ring-error-200'],\n },\n {\n variant: ['primary', 'secondary'],\n state: 'warning',\n focusVariant: 'on',\n className: ['tw:!border-warning-500', 'tw:!ring-warning-200'],\n },\n // --- argo ---\n {\n variant: 'argo',\n state: 'default',\n className: [\n 'tw:has-[:is(input,textarea):focus]:border-primary',\n 'tw:has-[:is(input,textarea):focus]:ring-ring/50',\n ],\n },\n {\n variant: 'argo',\n state: 'error',\n className: [\n 'tw:border-destructive',\n 'tw:has-[:is(input,textarea):focus]:border-destructive',\n 'tw:has-[:is(input,textarea):focus]:ring-destructive/20',\n ],\n },\n {\n variant: 'argo',\n focusVariant: 'on',\n className: ['tw:!border-primary', 'tw:!ring-ring/50'],\n },\n {\n variant: 'argo',\n state: 'error',\n focusVariant: 'on',\n className: ['tw:!border-destructive', 'tw:!ring-destructive/20'],\n },\n {\n variant: 'argo',\n state: 'default',\n focusVariant: 'off',\n className: ['tw:has-[:is(input,textarea):focus]:border-input'],\n },\n ],\n variants: {\n focusVariant: {\n default: [],\n on: ['tw:!border-ring', 'tw:!ring-ring/30', 'tw:!ring-4'],\n off: ['tw:has-[:is(input,textarea):focus]:!ring-0'],\n },\n variant: {\n primary: [\n // The field-surface token — white in the light scheme, so this is a\n // no-op there; the dark scheme gets a field fill, not a white slab.\n 'tw:bg-input-background',\n 'tw:text-foreground',\n // The base readonly fill is a fixed light grey, which the scheme-following\n // text above would sit on invisibly in dark. Re-pin to the same\n // `muted`/`input` pair argo uses for exactly this reason.\n 'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n 'tw:has-[:is(input,textarea)[readonly]]:border-input',\n 'tw:has-[:is(input,textarea):disabled]:opacity-40',\n // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n // accessible path (mirrors the `state=\"error\"` legacy tokens). Higher specificity than\n // the default focus selector, so it wins without `!important`.\n 'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n ],\n secondary: [\n 'tw:bg-neutral-100',\n 'tw:border-neutral-100',\n 'tw:has-[:is(input,textarea):disabled]:opacity-40',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200',\n ],\n argo: [\n // argo follows the brand radius token (overrides the static base)\n 'tw:rounded-[var(--radius-lg,0.25rem)]',\n // muted filled input surface — gray, distinct from white containers; not the app-background token.\n // Deliberately `muted`, not the `input-background` field token legacy uses: argo's field is a\n // grey inset by design. Converging the two is a brand-value decision, not a component one.\n 'tw:bg-muted',\n 'tw:border-input',\n 'tw:text-foreground',\n 'tw:has-[:is(input,textarea):disabled]:opacity-50',\n // readonly: keep the themed input surface/border. The base layer's fixed\n // `neutral-150` (a light grey) is correct for the legacy light chrome but\n // collides with argo's themed `foreground` text — light-on-light, invisible\n // in dark mode. Re-pin to the same `muted`/`input` tokens the editable argo\n // input uses (validated AA), so readonly stays legible in every scheme.\n 'tw:has-[:is(input,textarea)[readonly]]:bg-muted',\n 'tw:has-[:is(input,textarea)[readonly]]:border-input',\n // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly\n 'tw:has-[:is(input,textarea)[readonly]:focus]:border-input',\n // aria-invalid on the control surfaces the error chrome without a `state` prop — the\n // accessible path (uses the themeable `destructive` status token).\n 'tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive',\n 'tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20',\n ],\n },\n sizing: {\n default: [\n 'tw:[&_:is(input,textarea)]:py-2.5',\n 'tw:[&_:is(input,textarea)]:leading-[18px]',\n 'tw:[&_textarea]:!min-h-[calc(2.5rem-2px)]',\n ],\n small: [\n 'tw:[&_:is(input,textarea)]:py-2',\n 'tw:[&_:is(input,textarea)]:leading-[16px]',\n 'tw:[&_textarea]:!min-h-[calc(2rem-2px)]',\n ],\n medium: [\n 'tw:[&_:is(input,textarea)]:py-2',\n 'tw:[&_:is(input,textarea)]:leading-[18px]',\n 'tw:[&_textarea]:!min-h-[calc(2.25rem-2px)]',\n ],\n },\n state: {\n default: [\n 'tw:has-[:is(input,textarea):focus]:border-ring',\n 'tw:has-[:is(input,textarea):focus]:ring-ring/30',\n ],\n error: [\n 'tw:border-error-500',\n 'tw:has-[:is(input,textarea):focus]:border-error-500',\n 'tw:has-[:is(input,textarea):focus]:ring-error-200',\n ],\n warning: [\n 'tw:border-warning-500',\n 'tw:has-[:is(input,textarea):focus]:border-warning-500',\n 'tw:has-[:is(input,textarea):focus]:ring-warning-200',\n ],\n },\n },\n },\n);\n\ntype Props = ComponentPropsWithRef<'div'> &\n Omit<VariantProps<typeof inputGroupVariants>, 'variant'> & {\n variant?: Exclude<VariantProps<typeof inputGroupVariants>['variant'], 'argo'>;\n };\n\nconst InputGroupRoot = ({\n ref,\n children,\n state,\n variant,\n sizing,\n focusVariant,\n className,\n ...props\n}: Props) => {\n const isArgo = useArgoDesign();\n const effectiveVariant = isArgo ? 'argo' : variant;\n const effectiveSizing = effectiveVariant === 'argo' ? 'medium' : sizing;\n return (\n <div\n {...props}\n ref={ref}\n className={cn(\n inputGroupVariants({\n state,\n variant: effectiveVariant,\n sizing: effectiveSizing,\n focusVariant,\n className,\n }),\n )}\n >\n {children}\n </div>\n );\n};\n\nexport const InputGroup = InputGroupRoot as typeof InputGroupRoot & {\n Input: typeof InputGroupInput;\n Addon: typeof InputGroupAddon;\n Button: typeof InputGroupButton;\n TextArea: typeof InputGroupTextArea;\n Text: typeof InputGroupText;\n};\n\nInputGroup.Input = InputGroupInput;\nInputGroup.Addon = InputGroupAddon;\nInputGroup.Button = InputGroupButton;\nInputGroup.TextArea = InputGroupTextArea;\nInputGroup.Text = InputGroupText;\n"],"mappings":"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D;EACA,SAAS;GACP,SAAS;IAGP;IACA;IAIA;IACA;IACA;IAIA;IACA;IACA;GACF;GACA,WAAW;IACT;IACA;IACA;IACA;IACA;IACA;GACF;GACA,MAAM;IAEJ;IAIA;IACA;IACA;IACA;IAMA;IACA;IAEA;IAGA;IACA;IACA;GACF;EACF;EACA,QAAQ;GACN,SAAS;IACP;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,SAAS,CACP,kDACA,iDACF;GACA,OAAO;IACL;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AAOA,MAAM,kBAAkB,EACtB,KACA,UACA,OACA,SACA,QACA,cACA,WACA,GAAG,YACQ;CAEX,MAAM,mBADS,cACe,IAAI,SAAS;CAC3C,MAAM,kBAAkB,qBAAqB,SAAS,WAAW;CACjE,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GACT,mBAAmB;GACjB;GACA,SAAS;GACT,QAAQ;GACR;GACA;EACF,CAAC,CACH;EAEC;CACE,CAAA;AAET;AAEA,MAAa,aAAa;AAQ1B,WAAW,QAAQ;AACnB,WAAW,QAAQ;AACnB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO"}
|
package/dist/Kbd-D1Azcc4g.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Kbd-D1Azcc4g.js","names":[],"sources":["../src/components/Kbd/KbdSeparator.tsx","../src/components/Kbd/KbdGroup.tsx","../src/components/Kbd/styles.ts","../src/components/Kbd/Kbd.tsx","../src/components/Kbd/keyboardKeys.ts"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\n/**\n * The `+` / `then` glue between two `Kbd` keys.\n *\n * - Follows the muted chrome token by default.\n * - Turns white inside the legacy dark tooltip, which sets `data-tooltip-content`.\n */\nexport const KbdSeparator = ({ className, ...props }: Props) => (\n <span\n {...props}\n className={cn(\n 'tw:text-xs tw:text-muted-foreground',\n 'tw:[[data-tooltip-content=true]_&]:text-white/70',\n className,\n )}\n />\n);\n","import { Children, Fragment } from 'react';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { KbdSeparator } from './KbdSeparator';\n\ntype Props = { separator?: string } & ComponentProps<'kbd'>;\n\nexport const KbdGroup = ({ ref, className, children, separator, ...props }: Props) => {\n return (\n <kbd\n {...props}\n ref={ref}\n className={cn('tw:inline-flex', 'tw:items-center', 'tw:gap-1', className)}\n >\n {separator\n ? // oxlint-disable-next-line react-x/no-children-to-array\n Children.toArray(children).map((child, index) => (\n // oxlint-disable-next-line\n <Fragment key={index}>\n {index > 0 && <KbdSeparator>{separator}</KbdSeparator>}\n {child}\n </Fragment>\n ))\n : children}\n </kbd>\n );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const kbdVariants = cva(\n [\n 'tailwindcss-preflight',\n // style\n 'tw:pointer-events-none',\n 'tw:w-fit',\n 'tw:h-5',\n 'tw:min-w-5',\n\n // layout\n 'tw:inline-flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:gap-1',\n 'tw:shrink-0',\n\n // spacing\n 'tw:px-1',\n 'tw:[&_svg:not([class*=\"size-\"])]:size-2.5',\n\n 'tw:text-xs',\n 'tw:font-medium',\n\n 'tw:rounded',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: 'tw:bg-muted tw:text-muted-foreground',\n // The shortcut-hint key inside a tooltip.\n //\n // - Matches `default` everywhere by default.\n // - Inverts to white on the legacy dark tooltip, which marks itself\n // with `data-tooltip-content`.\n // - Argo's tooltip is a light popover and sets no such attribute, so\n // white-on-white would otherwise render the key invisible.\n primary: [\n 'tw:bg-muted tw:text-muted-foreground',\n 'tw:[[data-tooltip-content=true]_&]:bg-white/20',\n 'tw:[[data-tooltip-content=true]_&]:text-white',\n ],\n },\n },\n },\n);\n","import type { ComponentProps } from 'react';\nimport type { VariantProps } from 'class-variance-authority';\n\nimport { KbdGroup } from './KbdGroup';\nimport { KbdSeparator } from './KbdSeparator';\nimport { kbdVariants } from './styles';\n\ntype Props = ComponentProps<'kbd'> & VariantProps<typeof kbdVariants>;\n\nexport const Kbd = ({ children, className, variant, ...rest }: Props) => (\n <kbd {...rest} className={kbdVariants({ className, variant })}>\n {children}\n </kbd>\n);\n\nKbd.Group = KbdGroup;\nKbd.Separator = KbdSeparator;\n","import { isMac } from '../../utils';\n\ntype KeyName = 'mod' | 'option' | 'shift' | 'enter';\ntype KeyRepresentation = { symbol: string; text: string };\n\ntype KeyDefinition = {\n mac: KeyRepresentation;\n windows: KeyRepresentation;\n};\n\nconst KEY_DEFINITIONS: Record<KeyName, KeyDefinition> = {\n mod: {\n mac: { symbol: '⌘', text: 'Command' },\n windows: { symbol: 'Ctrl', text: 'Ctrl' },\n },\n option: {\n mac: { symbol: '⌥', text: 'Option' },\n windows: { symbol: 'Alt', text: 'Alt' },\n },\n shift: {\n mac: { symbol: '⇧', text: 'Shift' },\n windows: { symbol: '⇧', text: 'Shift' },\n },\n enter: {\n mac: { symbol: '⏎', text: 'Enter' },\n windows: { symbol: '⏎', text: 'Enter' },\n },\n};\n\nconst createKeyboardKeys = () => {\n const keysObj: Record<KeyName, KeyRepresentation> = {} as Record<KeyName, KeyRepresentation>;\n\n for (const keyName of Object.keys(KEY_DEFINITIONS) as KeyName[]) {\n keysObj[keyName] = KEY_DEFINITIONS[keyName][isMac ? 'mac' : 'windows'];\n }\n\n return keysObj;\n};\n\nexport const keys = createKeyboardKeys();\n"],"mappings":";;;;;;;;;;;;AAYA,MAAa,gBAAgB,EAAE,WAAW,GAAG,YAC3C,oBAAC,QAAD;CACE,GAAI;CACJ,WAAW,GACT,uCACA,oDACA,SACF;AACD,CAAA;;;ACXH,MAAa,YAAY,EAAE,KAAK,WAAW,UAAU,WAAW,GAAG,YAAmB;CACpF,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,WAAW,GAAG,kBAAkB,mBAAmB,YAAY,SAAS;EAEvE,UAAA,YAEG,SAAS,QAAQ,QAAQ,CAAC,CAAC,KAAK,OAAO,UAErC,qBAAC,UAAD,EAAA,UAAA,CACG,QAAQ,KAAK,oBAAC,cAAD,EAAA,UAAe,UAAwB,CAAA,GACpD,KACO,EAAA,GAHK,KAGL,CACX,IACD;CACD,CAAA;AAET;;;AC1BA,MAAa,cAAc,IACzB;CACE;CAEA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAEA;CACA;CAEA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;EAQT,SAAS;GACP;GACA;GACA;EACF;CACF,EACF;AACF,CACF;;;ACxCA,MAAa,OAAO,EAAE,UAAU,WAAW,SAAS,GAAG,WACrD,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,YAAY;EAAE;EAAW;CAAQ,CAAC;CACzD;AACE,CAAA;AAGP,IAAI,QAAQ;AACZ,IAAI,YAAY;;;ACNhB,MAAM,kBAAkD;CACtD,KAAK;EACH,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAU;EACpC,SAAS;GAAE,QAAQ;GAAQ,MAAM;EAAO;CAC1C;CACA,QAAQ;EACN,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAS;EACnC,SAAS;GAAE,QAAQ;GAAO,MAAM;EAAM;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;CACA,OAAO;EACL,KAAK;GAAE,QAAQ;GAAK,MAAM;EAAQ;EAClC,SAAS;GAAE,QAAQ;GAAK,MAAM;EAAQ;CACxC;AACF;AAEA,MAAM,2BAA2B;CAC/B,MAAM,UAA8C,CAAC;CAErD,KAAK,MAAM,WAAW,OAAO,KAAK,eAAe,GAC/C,QAAQ,WAAW,gBAAgB,QAAQ,CAAC,QAAQ,QAAQ;CAG9D,OAAO;AACT;AAEA,MAAa,OAAO,mBAAmB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"MermaidDiagram-CujFxVzk.js","names":[],"sources":["../src/blocks/MermaidDiagram/mermaidTheme.ts","../src/blocks/MermaidDiagram/MermaidDiagram.tsx"],"sourcesContent":["import type { RenderOptions } from 'beautiful-mermaid';\nimport type { MermaidConfig } from 'mermaid';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { createTokenResolver } from '../../utils/themeTokens';\n\nconst DIAGRAM_FONT = 'Inter, system-ui, sans-serif';\n\n/**\n * Fallback channels for the tokens the diagram palette reads, mirroring the\n * `:root` / `[data-theme='dark']` blocks of `styles.css`.\n *\n * `resolveToken` only reaches these when the live custom property is missing —\n * SSR, or a unit test that loads no CSS. In the browser the computed value wins,\n * which is what makes a customer brand re-skin the diagram for free.\n */\nconst FALLBACK_CHANNELS = {\n card: { light: '255 255 255', dark: '34 34 40' },\n 'card-foreground': { light: '30 41 59', dark: '229 230 236' },\n foreground: { light: '30 41 59', dark: '229 230 236' },\n muted: { light: '241 245 249', dark: '38 38 45' },\n 'muted-foreground': { light: '100 116 139', dark: '141 144 153' },\n border: { light: '229 231 235', dark: '52 53 62' },\n primary: { light: '37 99 235', dark: '31 143 255' },\n accent: { light: '224 242 254', dark: '30 58 95' },\n 'accent-foreground': { light: '13 65 127', dark: '147 197 253' },\n warning: { light: '138 82 16', dark: '255 190 92' },\n success: { light: '24 122 76', dark: '62 207 127' },\n destructive: { light: '220 38 38', dark: '229 72 77' },\n} as const;\n\ntype TokenName = keyof typeof FALLBACK_CHANNELS;\n\n/**\n * Binds a token lookup to one `getComputedStyle` snapshot for the whole palette.\n * Built per call, never hoisted: the values move with the scheme and the brand.\n */\nconst tokenReader = (scheme: ResolvedColorScheme, from?: Element | null) => {\n const resolve = createTokenResolver(from);\n return (name: TokenName, alpha?: number): string =>\n resolve(name, FALLBACK_CHANNELS[name][scheme], alpha);\n};\n\n/**\n * Palette for `beautiful-mermaid`'s synchronous renderer. It sets these as CSS\n * variables on the `<svg>` and derives everything else it needs from `bg` + `fg`\n * with `color-mix()` — which is why leaving them at the library defaults painted\n * a near-white node fill (#f8f8f8, mixed from a white `bg`) on a dark page.\n *\n * `transparent` keeps the page background showing through, so `bg` only feeds\n * those derivations; the node fill is pinned explicitly via `surface`.\n */\nexport const fastRenderOptions = (\n scheme: ResolvedColorScheme,\n from?: Element | null,\n): RenderOptions => {\n const token = tokenReader(scheme, from);\n\n return {\n bg: token('card'),\n fg: token('foreground'),\n line: token('border'),\n accent: token('primary'),\n muted: token('muted-foreground'),\n surface: token('muted'),\n border: token('border'),\n transparent: true,\n font: DIAGRAM_FONT,\n };\n};\n\n/**\n * Config for the async `mermaid` renderer (the fallback for dialects the fast\n * renderer can't parse, and for icon-pack diagrams).\n *\n * Built on the `base` theme so every colour comes from `themeVariables` rather\n * than mermaid's own light/dark palettes. Node chrome maps to the `accent` pair\n * (a tinted surface with a legible foreground in both schemes), containers to\n * `card`, and the gantt/note states to the status tokens — consumed as a low\n * alpha tint plus a solid mark, per the brand-neutrality contract, since the\n * status tokens themselves are text-legible colours rather than fills.\n */\nexport const mermaidConfig = (\n scheme: ResolvedColorScheme,\n from?: Element | null,\n): MermaidConfig => {\n const token = tokenReader(scheme, from);\n\n const surface = token('accent');\n const onSurface = token('accent-foreground');\n const container = token('card');\n const onContainer = token('card-foreground');\n const line = token('border');\n const stroke = token('primary');\n const text = token('foreground');\n\n return {\n startOnLoad: false,\n securityLevel: 'strict',\n theme: 'base',\n themeVariables: {\n darkMode: scheme === 'dark',\n background: container,\n primaryColor: surface,\n primaryTextColor: onSurface,\n primaryBorderColor: stroke,\n secondaryColor: container,\n secondaryTextColor: onContainer,\n secondaryBorderColor: line,\n tertiaryColor: token('warning', 0.15),\n tertiaryTextColor: token('warning'),\n tertiaryBorderColor: token('warning'),\n lineColor: line,\n textColor: text,\n mainBkg: surface,\n nodeBorder: stroke,\n clusterBkg: container,\n clusterBorder: line,\n titleColor: text,\n edgeLabelBackground: container,\n nodeTextColor: onSurface,\n actorBorder: stroke,\n actorBkg: surface,\n actorTextColor: onSurface,\n actorLineColor: line,\n signalColor: text,\n signalTextColor: text,\n labelBoxBkgColor: surface,\n labelBoxBorderColor: stroke,\n labelTextColor: onSurface,\n loopTextColor: text,\n noteBorderColor: token('warning'),\n noteBkgColor: token('warning', 0.15),\n noteTextColor: text,\n sectionBkgColor: surface,\n altSectionBkgColor: container,\n sectionBkgColor2: token('muted'),\n taskBorderColor: stroke,\n taskBkgColor: surface,\n taskTextColor: onSurface,\n taskTextDarkColor: text,\n taskTextLightColor: text,\n activeTaskBorderColor: stroke,\n activeTaskBkgColor: token('primary', 0.25),\n doneTaskBorderColor: token('success'),\n doneTaskBkgColor: token('success', 0.15),\n critBorderColor: token('destructive'),\n critBkgColor: token('destructive', 0.15),\n fontFamily: DIAGRAM_FONT,\n fontSize: '14px',\n },\n };\n};\n","import { useEffect, useId, useRef, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { renderMermaidSVG } from 'beautiful-mermaid';\nimport type mermaid from 'mermaid';\n\nimport type { ResolvedColorScheme } from '../../components/ThemeProvider/types';\nimport { useThemeAttributes } from '../../components/ThemeProvider/useThemeAttributes';\nimport { ZoomableSvg } from '../../components/ZoomableSvg';\nimport { DiagramSkeleton } from '../DiagramShared/DiagramSkeleton';\nimport { DiagramSource } from '../DiagramShared/DiagramSource';\nimport {\n flattenForeignObjectLabels,\n hasDrawnContent,\n makeResponsive,\n} from '../DiagramShared/svgTransforms';\n\nimport { fastRenderOptions, mermaidConfig } from './mermaidTheme';\n\ntype MermaidModule = { default: typeof mermaid };\n\nlet mermaidPromise: Promise<MermaidModule> | null = null;\n\n// Iconify icon pack registered with mermaid so `@{ icon: \"lucide:name\" }` node\n// shapes and `architecture-beta service <id>(lucide:name)` render — keeping\n// diagram glyphs consistent with the Lucide icons used across the rest of the UI.\n// The pack JSON resolves from a workspace dependency (no CDN fetch) via a dynamic\n// import, so it lands in its own lazy chunk and icons render offline / under a\n// strict CSP without weighing down the initial bundle.\nconst registerLucideIconPack = (m: typeof mermaid): void => {\n m.registerIconPacks([\n {\n name: 'lucide',\n loader: () => import('@iconify-json/lucide/icons.json').then((mod) => mod.default),\n },\n ]);\n};\n\nconst getMermaid = (): Promise<MermaidModule> => {\n if (!mermaidPromise) {\n mermaidPromise = import('mermaid')\n .then((m) => {\n registerLucideIconPack(m.default);\n return m;\n })\n .catch((err) => {\n mermaidPromise = null;\n throw err;\n });\n }\n return mermaidPromise;\n};\n\nconst stripFontImports = (svg: string): string =>\n svg.replace(/@import\\s+url\\([^)]*fonts\\.googleapis\\.com[^)]*\\);?\\s*/g, '');\n\n// beautiful-mermaid's synchronous renderer has no icon-pack support, so a diagram\n// using icon syntax must skip the fast path and take the async mermaid render\n// (which registers the pack). Matches:\n// - the flowchart / treeView icon shape `@{ icon: \"pack:name\" }`\n// - `architecture-beta` / `treeView` refs `icon|service|group <id>(pack:name)`\n// (the id between keyword and `(` is optional)\n// - legacy FontAwesome refs `fa:fa-*` / `fab:` embedded in node text\nconst hasIconSyntax = (code: string): boolean =>\n /@\\{[^}]*\\bicon\\s*:/.test(code) ||\n /\\b(?:icon|service|group)\\b[^\\n(]*\\(\\s*[\\w-]+:/.test(code) ||\n /\\bfa[bslr]?:fa-/.test(code);\n\nconst tryFastRender = (\n code: string,\n scheme: ResolvedColorScheme,\n from: Element | null,\n): string | null => {\n if (hasIconSyntax(code)) return null;\n try {\n const svg = stripFontImports(renderMermaidSVG(code, fastRenderOptions(scheme, from)));\n // A zero-sized result is a silent layout failure, not a diagram — take the\n // async fallback rather than caching an empty box. See `hasDrawnContent`.\n return hasDrawnContent(svg) ? svg : null;\n } catch (err) {\n // beautiful-mermaid can't parse every mermaid dialect; the async mermaid\n // renderer is the fallback. Log at debug so regressions are diagnosable\n // without noising up the console on the expected unsupported-syntax path.\n console.debug('[MermaidDiagram] fast render unavailable, using async fallback:', err);\n return null;\n }\n};\n\n/**\n * Whether a mermaid parse error means \"ran out of input\" rather than \"bad syntax\".\n *\n * - Mermaid's jison parsers report the end of input as token `1`, so a source\n * truncated mid-diagram — every intermediate frame of a streaming answer —\n * fails with `hash.token === 1`.\n * - Genuinely invalid syntax fails on a real token (`'ONLY_ONE'`, …) instead.\n * - Only a lower bound: some truncations do land on a real token and read as\n * invalid. Those fall through to the `<pre>` fallback for one frame and clear\n * when the next chunk arrives, which is the pre-existing behaviour.\n */\nconst isTruncatedDiagram = (err: unknown): boolean =>\n typeof err === 'object' && err !== null && 'hash' in err\n ? (err as { hash?: { token?: unknown } }).hash?.token === 1\n : false;\n\nconst RENDER_DEBOUNCE_MS = 300;\n\n// How long a truncated diagram is held as \"still arriving\" before it is shown as\n// source. Comfortably longer than the gap between streamed chunks, short enough\n// that an abandoned stream resolves while the reader is still looking at it.\nconst TRUNCATION_GRACE_MS = 2_000;\n\n// Module-level SVG cache — persists across component remounts (e.g. tab switches\n// that cause React to remount the tree). The colours are baked into the markup,\n// so the key is the code *plus* the theme key (scheme + brand): the same diagram\n// is a different SVG under a different colour scheme or brand.\nconst svgCache = new Map<string, string>();\n\nconst diagramCacheKey = (code: string, themeKey: string): string => `${themeKey}\\n${code}`;\n\n// Resolve an SVG synchronously: cache hit first, otherwise a fast synchronous\n// render. Caches the result and returns it, or null when neither is available\n// (the caller then falls back to the async mermaid render).\nconst resolveSyncSvg = (\n code: string,\n cacheKey: string,\n scheme: ResolvedColorScheme,\n from: Element | null,\n): string | null => {\n const cached = svgCache.get(cacheKey);\n if (cached) return cached;\n const fast = tryFastRender(code, scheme, from);\n if (fast) svgCache.set(cacheKey, fast);\n return fast;\n};\n\ntype Props = {\n /** Mermaid diagram source code. Supports flowchart, sequence, class, state, ER,\n * pie, gantt, and mindmap. Gantt `dateFormat HH:mm` (time-only) is not supported\n * by mermaid's dayjs parser — use `dateFormat YYYY-MM-DD HH:mm` with `axisFormat %H:%M` instead. */\n code: string;\n /** Extra toolbar controls (e.g. an `ExportMenu`), forwarded to `ZoomableSvg`.\n * Receives the sanitized SVG. Omit to keep the default toolbar. */\n renderActions?: (safeSvg: string) => ReactNode;\n};\n\nexport const MermaidDiagram = ({ code, renderActions }: Props) => {\n const id = useId();\n // Re-renders whenever the active colour scheme or brand changes, so the\n // diagram is re-rendered in the new palette instead of staying a light island\n // on a dark page. The scheme comes out of the same read as the key, so the\n // palette can never be resolved under one scheme and cached under the other —\n // see `useThemeAttributes` for why the theme context is a step ahead of the\n // CSS variables it stands for.\n // `scope` is the element the live tokens are read off — the enclosing `ThemeScope`'s own,\n // or `null` for `<html>`. It is part of `themeKey`, so a palette built before the scope\n // answered is never served afterwards.\n const { scheme, cacheKey: themeKey, scope } = useThemeAttributes();\n const cacheKey = diagramCacheKey(code, themeKey);\n\n const [svg, setSvg] = useState<string | null>(() =>\n resolveSyncSvg(code, cacheKey, scheme, scope),\n );\n const [renderFailed, setRenderFailed] = useState(false);\n const [truncated, setTruncated] = useState(false);\n const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const renderIdRef = useRef(0);\n\n // Synchronously reset stale state when the code or the theme changes, to avoid\n // a one-frame flash of the previous diagram.\n const [prevKey, setPrevKey] = useState(cacheKey);\n if (cacheKey !== prevKey) {\n setPrevKey(cacheKey);\n setSvg(resolveSyncSvg(code, cacheKey, scheme, scope));\n setRenderFailed(false);\n setTruncated(false);\n }\n\n useEffect(() => {\n // Synchronous results (cache hit / fast render) are already applied and\n // cached by the useState initializer (mount) and the render-phase reset\n // (code / theme change). Only the async fallback needs an effect.\n if (svgCache.has(cacheKey)) return;\n\n const currentRenderId = ++renderIdRef.current;\n\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n\n debounceRef.current = setTimeout(() => {\n getMermaid()\n .then(async (mermaidModule) => {\n if (renderIdRef.current !== currentRenderId) return;\n const rendererId = `mermaid-${id.replaceAll(':', '')}`;\n const container = document.createElement('div');\n container.style.visibility = 'hidden';\n container.style.position = 'absolute';\n container.style.top = '-9999px';\n container.style.width = '900px';\n document.body.appendChild(container);\n // Re-applied per render rather than once at import: `initialize` is the\n // only way to change mermaid's palette, and the palette follows the\n // active scheme/brand.\n mermaidModule.default.initialize(mermaidConfig(scheme, scope));\n try {\n const result = await mermaidModule.default.render(rendererId, code, container);\n if (renderIdRef.current === currentRenderId && result) {\n const svgOutput = flattenForeignObjectLabels(result.svg);\n svgCache.set(cacheKey, svgOutput);\n setSvg(svgOutput);\n setRenderFailed(false);\n setTruncated(false);\n }\n } finally {\n container.remove();\n }\n })\n .catch((err: unknown) => {\n if (renderIdRef.current !== currentRenderId) return;\n setSvg(null);\n // A diagram arriving a chunk at a time is invalid at almost every\n // intermediate length, so a truncation is treated as \"not ready\" and\n // holds the skeleton instead of the raw-code `<pre>`. It is held for a\n // bounded wait, not indefinitely: a stream that dies mid-entity — or a\n // diagram a user simply left unterminated — never gets a next chunk, and\n // a skeleton that stays forever is worse than showing the source. The\n // timer is cleared by the effect teardown, so any further chunk cancels\n // it and re-renders.\n if (isTruncatedDiagram(err)) {\n console.debug('[MermaidDiagram] incomplete diagram, awaiting more input:', err);\n setTruncated(true);\n return;\n }\n console.error('[MermaidDiagram] fallback failed:', err);\n setRenderFailed(true);\n });\n }, RENDER_DEBOUNCE_MS);\n\n const timer = debounceRef.current;\n const renderId = renderIdRef;\n return () => {\n renderId.current++;\n if (timer) {\n clearTimeout(timer);\n }\n };\n }, [cacheKey, code, id, scheme, scope]);\n\n // A truncated diagram is held as \"still arriving\" for a bounded wait, not\n // indefinitely: a stream that dies mid-entity — or a diagram a user left\n // unterminated — never sends another chunk, and a skeleton that stays forever\n // is worse than showing the source. Any further chunk changes `code`, which\n // resets `truncated` and tears this timer down.\n useEffect(() => {\n if (!truncated) return;\n const timer = setTimeout(() => setRenderFailed(true), TRUNCATION_GRACE_MS);\n return () => clearTimeout(timer);\n }, [truncated, cacheKey]);\n\n const processedSvg = svg ? makeResponsive(svg) : null;\n\n if (renderFailed) {\n return <DiagramSource code={code} />;\n }\n\n if (processedSvg) {\n return (\n <ZoomableSvg\n key={code}\n html={processedSvg}\n copyText={`\\`\\`\\`mermaid\\n${code}\\n\\`\\`\\``}\n className=\"tw:my-3\"\n allowForeignObject\n renderActions={renderActions}\n />\n );\n }\n\n return <DiagramSkeleton />;\n};\n"],"mappings":";;;;;;;;;;AAMA,MAAM,eAAe;;;;;;;;;AAUrB,MAAM,oBAAoB;CACxB,MAAM;EAAE,OAAO;EAAe,MAAM;CAAW;CAC/C,mBAAmB;EAAE,OAAO;EAAY,MAAM;CAAc;CAC5D,YAAY;EAAE,OAAO;EAAY,MAAM;CAAc;CACrD,OAAO;EAAE,OAAO;EAAe,MAAM;CAAW;CAChD,oBAAoB;EAAE,OAAO;EAAe,MAAM;CAAc;CAChE,QAAQ;EAAE,OAAO;EAAe,MAAM;CAAW;CACjD,SAAS;EAAE,OAAO;EAAa,MAAM;CAAa;CAClD,QAAQ;EAAE,OAAO;EAAe,MAAM;CAAW;CACjD,qBAAqB;EAAE,OAAO;EAAa,MAAM;CAAc;CAC/D,SAAS;EAAE,OAAO;EAAa,MAAM;CAAa;CAClD,SAAS;EAAE,OAAO;EAAa,MAAM;CAAa;CAClD,aAAa;EAAE,OAAO;EAAa,MAAM;CAAY;AACvD;;;;;AAQA,MAAM,eAAe,QAA6B,SAA0B;CAC1E,MAAM,UAAU,oBAAoB,IAAI;CACxC,QAAQ,MAAiB,UACvB,QAAQ,MAAM,kBAAkB,KAAK,CAAC,SAAS,KAAK;AACxD;;;;;;;;;;AAWA,MAAa,qBACX,QACA,SACkB;CAClB,MAAM,QAAQ,YAAY,QAAQ,IAAI;CAEtC,OAAO;EACL,IAAI,MAAM,MAAM;EAChB,IAAI,MAAM,YAAY;EACtB,MAAM,MAAM,QAAQ;EACpB,QAAQ,MAAM,SAAS;EACvB,OAAO,MAAM,kBAAkB;EAC/B,SAAS,MAAM,OAAO;EACtB,QAAQ,MAAM,QAAQ;EACtB,aAAa;EACb,MAAM;CACR;AACF;;;;;;;;;;;;AAaA,MAAa,iBACX,QACA,SACkB;CAClB,MAAM,QAAQ,YAAY,QAAQ,IAAI;CAEtC,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,YAAY,MAAM,mBAAmB;CAC3C,MAAM,YAAY,MAAM,MAAM;CAC9B,MAAM,cAAc,MAAM,iBAAiB;CAC3C,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,MAAM,SAAS;CAC9B,MAAM,OAAO,MAAM,YAAY;CAE/B,OAAO;EACL,aAAa;EACb,eAAe;EACf,OAAO;EACP,gBAAgB;GACd,UAAU,WAAW;GACrB,YAAY;GACZ,cAAc;GACd,kBAAkB;GAClB,oBAAoB;GACpB,gBAAgB;GAChB,oBAAoB;GACpB,sBAAsB;GACtB,eAAe,MAAM,WAAW,GAAI;GACpC,mBAAmB,MAAM,SAAS;GAClC,qBAAqB,MAAM,SAAS;GACpC,WAAW;GACX,WAAW;GACX,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,eAAe;GACf,YAAY;GACZ,qBAAqB;GACrB,eAAe;GACf,aAAa;GACb,UAAU;GACV,gBAAgB;GAChB,gBAAgB;GAChB,aAAa;GACb,iBAAiB;GACjB,kBAAkB;GAClB,qBAAqB;GACrB,gBAAgB;GAChB,eAAe;GACf,iBAAiB,MAAM,SAAS;GAChC,cAAc,MAAM,WAAW,GAAI;GACnC,eAAe;GACf,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB,MAAM,OAAO;GAC/B,iBAAiB;GACjB,cAAc;GACd,eAAe;GACf,mBAAmB;GACnB,oBAAoB;GACpB,uBAAuB;GACvB,oBAAoB,MAAM,WAAW,GAAI;GACzC,qBAAqB,MAAM,SAAS;GACpC,kBAAkB,MAAM,WAAW,GAAI;GACvC,iBAAiB,MAAM,aAAa;GACpC,cAAc,MAAM,eAAe,GAAI;GACvC,YAAY;GACZ,UAAU;EACZ;CACF;AACF;;;;ACpIA,IAAI,iBAAgD;AAQpD,MAAM,0BAA0B,MAA4B;CAC1D,EAAE,kBAAkB,CAClB;EACE,MAAM;EACN,cAAc,OAAO,kCAAkC,CAAC,MAAM,QAAQ,IAAI,OAAO;CACnF,CACF,CAAC;AACH;AAEA,MAAM,mBAA2C;CAC/C,IAAI,CAAC,gBACH,iBAAiB,OAAO,UAAU,CAC/B,MAAM,MAAM;EACX,uBAAuB,EAAE,OAAO;EAChC,OAAO;CACT,CAAC,CAAC,CACD,OAAO,QAAQ;EACd,iBAAiB;EACjB,MAAM;CACR,CAAC;CAEL,OAAO;AACT;AAEA,MAAM,oBAAoB,QACxB,IAAI,QAAQ,2DAA2D,EAAE;AAS3E,MAAM,iBAAiB,SACrB,qBAAqB,KAAK,IAAI,KAC9B,gDAAgD,KAAK,IAAI,KACzD,kBAAkB,KAAK,IAAI;AAE7B,MAAM,iBACJ,MACA,QACA,SACkB;CAClB,IAAI,cAAc,IAAI,GAAG,OAAO;CAChC,IAAI;EACF,MAAM,MAAM,iBAAiB,iBAAiB,MAAM,kBAAkB,QAAQ,IAAI,CAAC,CAAC;EAGpF,OAAO,gBAAgB,GAAG,IAAI,MAAM;CACtC,SAAS,KAAK;EAIZ,QAAQ,MAAM,mEAAmE,GAAG;EACpF,OAAO;CACT;AACF;;;;;;;;;;;;AAaA,MAAM,sBAAsB,QAC1B,OAAO,QAAQ,YAAY,QAAQ,QAAQ,UAAU,MAChD,IAAuC,MAAM,UAAU,IACxD;AAEN,MAAM,qBAAqB;AAK3B,MAAM,sBAAsB;AAM5B,MAAM,2BAAW,IAAI,IAAoB;AAEzC,MAAM,mBAAmB,MAAc,aAA6B,GAAG,SAAS,IAAI;AAKpF,MAAM,kBACJ,MACA,UACA,QACA,SACkB;CAClB,MAAM,SAAS,SAAS,IAAI,QAAQ;CACpC,IAAI,QAAQ,OAAO;CACnB,MAAM,OAAO,cAAc,MAAM,QAAQ,IAAI;CAC7C,IAAI,MAAM,SAAS,IAAI,UAAU,IAAI;CACrC,OAAO;AACT;AAYA,MAAa,kBAAkB,EAAE,MAAM,oBAA2B;CAChE,MAAM,KAAK,MAAM;CAUjB,MAAM,EAAE,QAAQ,UAAU,UAAU,UAAU,mBAAmB;CACjE,MAAM,WAAW,gBAAgB,MAAM,QAAQ;CAE/C,MAAM,CAAC,KAAK,UAAU,eACpB,eAAe,MAAM,UAAU,QAAQ,KAAK,CAC9C;CACA,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,cAAc,OAA6C,IAAI;CACrE,MAAM,cAAc,OAAO,CAAC;CAI5B,MAAM,CAAC,SAAS,cAAc,SAAS,QAAQ;CAC/C,IAAI,aAAa,SAAS;EACxB,WAAW,QAAQ;EACnB,OAAO,eAAe,MAAM,UAAU,QAAQ,KAAK,CAAC;EACpD,gBAAgB,KAAK;EACrB,aAAa,KAAK;CACpB;CAEA,gBAAgB;EAId,IAAI,SAAS,IAAI,QAAQ,GAAG;EAE5B,MAAM,kBAAkB,EAAE,YAAY;EAEtC,IAAI,YAAY,SACd,aAAa,YAAY,OAAO;EAGlC,YAAY,UAAU,iBAAiB;GACrC,WAAW,CAAC,CACT,KAAK,OAAO,kBAAkB;IAC7B,IAAI,YAAY,YAAY,iBAAiB;IAC7C,MAAM,aAAa,WAAW,GAAG,WAAW,KAAK,EAAE;IACnD,MAAM,YAAY,SAAS,cAAc,KAAK;IAC9C,UAAU,MAAM,aAAa;IAC7B,UAAU,MAAM,WAAW;IAC3B,UAAU,MAAM,MAAM;IACtB,UAAU,MAAM,QAAQ;IACxB,SAAS,KAAK,YAAY,SAAS;IAInC,cAAc,QAAQ,WAAW,cAAc,QAAQ,KAAK,CAAC;IAC7D,IAAI;KACF,MAAM,SAAS,MAAM,cAAc,QAAQ,OAAO,YAAY,MAAM,SAAS;KAC7E,IAAI,YAAY,YAAY,mBAAmB,QAAQ;MACrD,MAAM,YAAY,2BAA2B,OAAO,GAAG;MACvD,SAAS,IAAI,UAAU,SAAS;MAChC,OAAO,SAAS;MAChB,gBAAgB,KAAK;MACrB,aAAa,KAAK;KACpB;IACF,UAAU;KACR,UAAU,OAAO;IACnB;GACF,CAAC,CAAC,CACD,OAAO,QAAiB;IACvB,IAAI,YAAY,YAAY,iBAAiB;IAC7C,OAAO,IAAI;IASX,IAAI,mBAAmB,GAAG,GAAG;KAC3B,QAAQ,MAAM,6DAA6D,GAAG;KAC9E,aAAa,IAAI;KACjB;IACF;IACA,QAAQ,MAAM,qCAAqC,GAAG;IACtD,gBAAgB,IAAI;GACtB,CAAC;EACL,GAAG,kBAAkB;EAErB,MAAM,QAAQ,YAAY;EAC1B,MAAM,WAAW;EACjB,aAAa;GACX,SAAS;GACT,IAAI,OACF,aAAa,KAAK;EAEtB;CACF,GAAG;EAAC;EAAU;EAAM;EAAI;EAAQ;CAAK,CAAC;CAOtC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAChB,MAAM,QAAQ,iBAAiB,gBAAgB,IAAI,GAAG,mBAAmB;EACzE,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,WAAW,QAAQ,CAAC;CAExB,MAAM,eAAe,MAAM,eAAe,GAAG,IAAI;CAEjD,IAAI,cACF,OAAO,oBAAC,eAAD,EAAqB,KAAO,CAAA;CAGrC,IAAI,cACF,OACE,oBAAC,aAAD;EAEE,MAAM;EACN,UAAU,kBAAkB,KAAK;EACjC,WAAU;EACV,oBAAA;EACe;CAChB,GANM,IAMN;CAIL,OAAO,oBAAC,iBAAD,CAAkB,CAAA;AAC3B"}
|