@keboola/design 15.1.0 → 16.1.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 +6 -5
- package/CHANGELOG.md +85 -0
- package/COMPONENT-API.md +62 -61
- package/dist/{AIKit-BR6jfsdI.js → AIKit-Cf5plya2.js} +328 -210
- package/dist/AIKit-Cf5plya2.js.map +1 -0
- package/dist/{Alert-Chz6KZ7e.js → Alert-DziS8n1H.js} +12 -19
- package/dist/{Alert-Chz6KZ7e.js.map → Alert-DziS8n1H.js.map} +1 -1
- package/dist/{AlertModal-DMsn62JJ.js → AlertModal-De04fFoy.js} +14 -24
- package/dist/{AlertModal-DMsn62JJ.js.map → AlertModal-De04fFoy.js.map} +1 -1
- package/dist/{AppShell-C8V1KRr_.js → AppShell-BUa3U7-e.js} +6 -9
- package/dist/{AppShell-C8V1KRr_.js.map → AppShell-BUa3U7-e.js.map} +1 -1
- package/dist/{AutoSaveTextarea-BbMhC5Aq.js → AutoSaveTextarea-CXHOQSun.js} +4 -5
- package/dist/{AutoSaveTextarea-BbMhC5Aq.js.map → AutoSaveTextarea-CXHOQSun.js.map} +1 -1
- package/dist/{Badge-CqlOE5A2.js → Badge-CFRhducL.js} +9 -14
- package/dist/{Badge-CqlOE5A2.js.map → Badge-CFRhducL.js.map} +1 -1
- package/dist/{BrandEditor-D61pzWRq.js → BrandEditor-hiLBX7az.js} +16 -23
- package/dist/{BrandEditor-D61pzWRq.js.map → BrandEditor-hiLBX7az.js.map} +1 -1
- package/dist/{BrandLogo-DkESE19K.js → BrandLogo-Dn7hhp2c.js} +4 -5
- package/dist/{BrandLogo-DkESE19K.js.map → BrandLogo-Dn7hhp2c.js.map} +1 -1
- package/dist/{Breadcrumb-DbqvDnYl.js → Breadcrumb-uGFEIjFF.js} +17 -28
- package/dist/{Breadcrumb-DbqvDnYl.js.map → Breadcrumb-uGFEIjFF.js.map} +1 -1
- package/dist/{Button-BNkyYU8u.js → Button-DbvGzEDb.js} +24 -20
- package/dist/Button-DbvGzEDb.js.map +1 -0
- package/dist/{Calendar-BnKi1kPu.js → Calendar-lJBTETbk.js} +752 -905
- package/dist/Calendar-lJBTETbk.js.map +1 -0
- package/dist/{Card-DxjGiqH8.js → Card-VIPfOVW5.js} +8 -14
- package/dist/{Card-DxjGiqH8.js.map → Card-VIPfOVW5.js.map} +1 -1
- package/dist/{Checkbox-CHDDJyAA.js → Checkbox-B2jLlyaO.js} +6 -8
- package/dist/{Checkbox-CHDDJyAA.js.map → Checkbox-B2jLlyaO.js.map} +1 -1
- package/dist/{Clipboard-DlwVZS1P.js → Clipboard-fAkDdpEu.js} +4 -5
- package/dist/{Clipboard-DlwVZS1P.js.map → Clipboard-fAkDdpEu.js.map} +1 -1
- package/dist/{ClipboardButton-B1Hr_n_Z.js → ClipboardButton-71Ugbl8c.js} +6 -8
- package/dist/{ClipboardButton-B1Hr_n_Z.js.map → ClipboardButton-71Ugbl8c.js.map} +1 -1
- package/dist/{CodeEditor-DVSPdfdo.js → CodeEditor-D_b-ZCng.js} +19 -31
- package/dist/{CodeEditor-DVSPdfdo.js.map → CodeEditor-D_b-ZCng.js.map} +1 -1
- package/dist/{Collapsible-DD4xTL75.js → Collapsible-zsXk4Vpp.js} +5 -8
- package/dist/{Collapsible-DD4xTL75.js.map → Collapsible-zsXk4Vpp.js.map} +1 -1
- package/dist/{ColorInput-B_eZIu39.js → ColorInput-Cjr1jkvy.js} +9 -12
- package/dist/{ColorInput-B_eZIu39.js.map → ColorInput-Cjr1jkvy.js.map} +1 -1
- package/dist/{ColorModeSwitch-BlrH8jAi.js → ColorModeSwitch-CuPYnJ2V.js} +5 -6
- package/dist/{ColorModeSwitch-BlrH8jAi.js.map → ColorModeSwitch-CuPYnJ2V.js.map} +1 -1
- package/dist/{Combobox-BLqX-Tdh.js → Combobox-DYjvYgl3.js} +37 -66
- package/dist/{Combobox-BLqX-Tdh.js.map → Combobox-DYjvYgl3.js.map} +1 -1
- package/dist/{Command-DhXmqFLT.js → Command-BcTb6GsR.js} +14 -24
- package/dist/{Command-DhXmqFLT.js.map → Command-BcTb6GsR.js.map} +1 -1
- package/dist/{CopyField-D0Pg4Z0R.js → CopyField-CnwAvQz9.js} +16 -28
- package/dist/{CopyField-D0Pg4Z0R.js.map → CopyField-CnwAvQz9.js.map} +1 -1
- package/dist/{DateInput-duinbI9_.js → DateInput-DJNX7Vdx.js} +8 -10
- package/dist/{DateInput-duinbI9_.js.map → DateInput-DJNX7Vdx.js.map} +1 -1
- package/dist/{DatePicker-Cg_aG_N4.js → DatePicker-CI59gF3S.js} +4 -5
- package/dist/{DatePicker-Cg_aG_N4.js.map → DatePicker-CI59gF3S.js.map} +1 -1
- package/dist/{DateRangeInput-BYVHf9zo.js → DateRangeInput-B3g8cyS0.js} +8 -10
- package/dist/{DateRangeInput-BYVHf9zo.js.map → DateRangeInput-B3g8cyS0.js.map} +1 -1
- package/dist/{DateRangePicker-m47cSV1r.js → DateRangePicker-48yOB2qV.js} +9 -10
- package/dist/{DateRangePicker-m47cSV1r.js.map → DateRangePicker-48yOB2qV.js.map} +1 -1
- package/dist/{DiffView-Dy4z-n-1.js → DiffView-DITZdVbh.js} +7 -12
- package/dist/{DiffView-Dy4z-n-1.js.map → DiffView-DITZdVbh.js.map} +1 -1
- package/dist/{DropdownMenu-Bum99mVf.js → DropdownMenu-Ba9atqDa.js} +20 -36
- package/dist/{DropdownMenu-Bum99mVf.js.map → DropdownMenu-Ba9atqDa.js.map} +1 -1
- package/dist/{FieldBox-BrxLkY9C.js → FieldBox-DdSdJ3ZN.js} +6 -10
- package/dist/{FieldBox-BrxLkY9C.js.map → FieldBox-DdSdJ3ZN.js.map} +1 -1
- package/dist/{FieldItem-BHUqgSO1.js → FieldItem-D7eCMfMB.js} +6 -8
- package/dist/{FieldItem-BHUqgSO1.js.map → FieldItem-D7eCMfMB.js.map} +1 -1
- package/dist/{FieldItem-CPN1xjN5.d.ts → FieldItem-fqm3CNR8.d.ts} +7 -6
- package/dist/{FileUpload-BYFONpEl.js → FileUpload-DskvxhAr.js} +25 -45
- package/dist/{FileUpload-BYFONpEl.js.map → FileUpload-DskvxhAr.js.map} +1 -1
- package/dist/{Form-Dqbt_tIs.js → Form-BUNW7nlt.js} +24 -38
- package/dist/{Form-Dqbt_tIs.js.map → Form-BUNW7nlt.js.map} +1 -1
- package/dist/{FormGroup-V5kIgQRN.js → FormGroup-QJB21LKp.js} +12 -20
- package/dist/{FormGroup-V5kIgQRN.js.map → FormGroup-QJB21LKp.js.map} +1 -1
- package/dist/{FullScreenModal-DAvvlGOz.js → FullScreenModal-RzY5XxiG.js} +8 -12
- package/dist/{FullScreenModal-DAvvlGOz.js.map → FullScreenModal-RzY5XxiG.js.map} +1 -1
- package/dist/{HoverCard-Cf9iYyaW.js → HoverCard-OGWKRXJ7.js} +4 -6
- package/dist/{HoverCard-Cf9iYyaW.js.map → HoverCard-OGWKRXJ7.js.map} +1 -1
- package/dist/{InlineEdit-D4P0SvCB.js → InlineEdit-CXL0ZslO.js} +7 -8
- package/dist/{InlineEdit-D4P0SvCB.js.map → InlineEdit-CXL0ZslO.js.map} +1 -1
- package/dist/{InputGroup-CZv_7QlM.js → InputGroup-BWeanEo7.js} +9 -15
- package/dist/{InputGroup-CZv_7QlM.js.map → InputGroup-BWeanEo7.js.map} +1 -1
- package/dist/{Kbd-CflKthfu.js → Kbd-BprYCICe.js} +8 -13
- package/dist/{Kbd-CflKthfu.js.map → Kbd-BprYCICe.js.map} +1 -1
- package/dist/{MarkedText-DlmlJO0u.js → MarkedText-BrganZ_V.js} +4 -6
- package/dist/{MarkedText-DlmlJO0u.js.map → MarkedText-BrganZ_V.js.map} +1 -1
- package/dist/{MermaidDiagram-2-EuNu1i.js → MermaidDiagram-E3azndPk.js} +9 -11
- package/dist/{MermaidDiagram-2-EuNu1i.js.map → MermaidDiagram-E3azndPk.js.map} +1 -1
- package/dist/{Modal-DwuvuiUx.js → Modal-Cf_kPEBW.js} +13 -21
- package/dist/{Modal-DwuvuiUx.js.map → Modal-Cf_kPEBW.js.map} +1 -1
- package/dist/{ModalTitle-RGWwIMU6.js → ModalTitle-7vgpfc6B.js} +5 -8
- package/dist/{ModalTitle-RGWwIMU6.js.map → ModalTitle-7vgpfc6B.js.map} +1 -1
- package/dist/{MultiActionButtonGroup-Dzig87s1.js → MultiActionButtonGroup-8WQwL4UQ.js} +6 -8
- package/dist/{MultiActionButtonGroup-Dzig87s1.js.map → MultiActionButtonGroup-8WQwL4UQ.js.map} +1 -1
- package/dist/{Navbar-DHUS7XiU.js → Navbar-CRjxVboE.js} +13 -22
- package/dist/{Navbar-DHUS7XiU.js.map → Navbar-CRjxVboE.js.map} +1 -1
- package/dist/{OtpInput-CY8yCaJk.js → OtpInput-C5plPzGU.js} +7 -11
- package/dist/{OtpInput-CY8yCaJk.js.map → OtpInput-C5plPzGU.js.map} +1 -1
- package/dist/{PageHeader-CL1A6jFM.js → PageHeader-DosMyar2.js} +6 -10
- package/dist/{PageHeader-CL1A6jFM.js.map → PageHeader-DosMyar2.js.map} +1 -1
- package/dist/{PageLayout-C9aXTpqV.js → PageLayout-LcvJccOW.js} +5 -8
- package/dist/{PageLayout-C9aXTpqV.js.map → PageLayout-LcvJccOW.js.map} +1 -1
- package/dist/{PageToolbar-LKP6PiP_.js → PageToolbar-By2HznxO.js} +8 -10
- package/dist/{PageToolbar-LKP6PiP_.js.map → PageToolbar-By2HznxO.js.map} +1 -1
- package/dist/{Pagination-D27x5KmH.js → Pagination-DrXTrvfD.js} +11 -18
- package/dist/{Pagination-D27x5KmH.js.map → Pagination-DrXTrvfD.js.map} +1 -1
- package/dist/{Popconfirm-p72DiagN.js → Popconfirm-BJuDOHdv.js} +46 -25
- package/dist/Popconfirm-BJuDOHdv.js.map +1 -0
- package/dist/{Popover-DnBw5Uay.js → Popover-DhOPlWgF.js} +4 -6
- package/dist/{Popover-DnBw5Uay.js.map → Popover-DhOPlWgF.js.map} +1 -1
- package/dist/{RadioGroup-B0TwHjBb.js → RadioGroup-B9oC8P15.js} +12 -18
- package/dist/{RadioGroup-B0TwHjBb.js.map → RadioGroup-B9oC8P15.js.map} +1 -1
- package/dist/{Resizable-D8zs0kcq.js → Resizable-Co-L3qg7.js} +4 -6
- package/dist/{Resizable-D8zs0kcq.js.map → Resizable-Co-L3qg7.js.map} +1 -1
- package/dist/{Search-vyZwGKMU.js → Search-OgaNjqQM.js} +26 -21
- package/dist/Search-OgaNjqQM.js.map +1 -0
- package/dist/{SearchInput-DyYXyw3u.js → SearchInput-eLS-uvOn.js} +18 -29
- package/dist/SearchInput-eLS-uvOn.js.map +1 -0
- package/dist/{SectionNav-6hcIpZLO.js → SectionNav-L81iJBo3.js} +11 -14
- package/dist/{SectionNav-6hcIpZLO.js.map → SectionNav-L81iJBo3.js.map} +1 -1
- package/dist/{Select-C6zKeip5.js → Select-DRdkdzBp.js} +28 -25
- package/dist/{Select-C6zKeip5.js.map → Select-DRdkdzBp.js.map} +1 -1
- package/dist/{Sheet-DKG20J7W.js → Sheet-DVb4XoJ5.js} +12 -19
- package/dist/{Sheet-DKG20J7W.js.map → Sheet-DVb4XoJ5.js.map} +1 -1
- package/dist/{Sidebar-BlYqasnX.js → Sidebar-DYvodJWN.js} +43 -75
- package/dist/{Sidebar-BlYqasnX.js.map → Sidebar-DYvodJWN.js.map} +1 -1
- package/dist/{Slider-DrcsM8_G.js → Slider-B9IskDxf.js} +8 -12
- package/dist/{Slider-DrcsM8_G.js.map → Slider-B9IskDxf.js.map} +1 -1
- package/dist/{Stepper-CQrUPVFL.js → Stepper-D7VspVEt.js} +11 -19
- package/dist/{Stepper-CQrUPVFL.js.map → Stepper-D7VspVEt.js.map} +1 -1
- package/dist/{Switch-DccpSpzC.js → Switch-DONWW7ju.js} +4 -6
- package/dist/{Switch-DccpSpzC.js.map → Switch-DONWW7ju.js.map} +1 -1
- package/dist/{Table-CilEvpMq.js → Table-BwgBm3hJ.js} +12 -21
- package/dist/{Table-CilEvpMq.js.map → Table-BwgBm3hJ.js.map} +1 -1
- package/dist/{Tabs-Ck4uWf8U.js → Tabs-DmJB4l_N.js} +9 -14
- package/dist/{Tabs-Ck4uWf8U.js.map → Tabs-DmJB4l_N.js.map} +1 -1
- package/dist/{TextInput-CR0_USaY.js → TextInput--1CfZybC.js} +8 -10
- package/dist/TextInput--1CfZybC.js.map +1 -0
- package/dist/{ThemeProvider-BTK7AL-T.js → ThemeProvider-BCHllN7d.js} +8 -13
- package/dist/{ThemeProvider-BTK7AL-T.js.map → ThemeProvider-BCHllN7d.js.map} +1 -1
- package/dist/{TimePicker-lk3NGqeK.js → TimePicker-CCV3SOw5.js} +4 -6
- package/dist/{TimePicker-lk3NGqeK.js.map → TimePicker-CCV3SOw5.js.map} +1 -1
- package/dist/{Timeline-DUXgByUE.js → Timeline-EMOpTLAT.js} +8 -13
- package/dist/{Timeline-DUXgByUE.js.map → Timeline-EMOpTLAT.js.map} +1 -1
- package/dist/{Toast-937n7n8i.js → Toast-BOTINeTX.js} +4 -6
- package/dist/{Toast-937n7n8i.js.map → Toast-BOTINeTX.js.map} +1 -1
- package/dist/{ToggleAllTooltip-DEjbWFoj.js → ToggleAllTooltip-BFmA6TXf.js} +4 -6
- package/dist/{ToggleAllTooltip-DEjbWFoj.js.map → ToggleAllTooltip-BFmA6TXf.js.map} +1 -1
- package/dist/{ToggleGroup-BOz1yyz6.js → ToggleGroup-DsDS7k70.js} +3 -4
- package/dist/{ToggleGroup-BOz1yyz6.js.map → ToggleGroup-DsDS7k70.js.map} +1 -1
- package/dist/{Workbench-CxgNCs3I.js → Workbench-4s0xP6XU.js} +18 -32
- package/dist/{Workbench-CxgNCs3I.js.map → Workbench-4s0xP6XU.js.map} +1 -1
- package/dist/{ZoomableSvg-CxXKanUR.js → ZoomableSvg-BRPGgaWJ.js} +8 -10
- package/dist/{ZoomableSvg-CxXKanUR.js.map → ZoomableSvg-BRPGgaWJ.js.map} +1 -1
- package/dist/charts.d.ts +0 -16
- package/dist/charts.js +10 -19
- package/dist/charts.js.map +1 -1
- package/dist/{classNames-DcGnTh2N.js → classNames-DkX30VJU.js} +2 -3
- package/dist/{classNames-DcGnTh2N.js.map → classNames-DkX30VJU.js.map} +1 -1
- package/dist/editors.d.ts +2 -16
- package/dist/editors.js +16 -26
- package/dist/editors.js.map +1 -1
- package/dist/{findLiteralMatches-DgGLzyG0.js → findLiteralMatches-BaLZTPtx.js} +2 -3
- package/dist/{findLiteralMatches-DgGLzyG0.js.map → findLiteralMatches-BaLZTPtx.js.map} +1 -1
- package/dist/flint.d.ts +0 -2
- package/dist/flint.js +10 -14
- package/dist/flint.js.map +1 -1
- package/dist/{highlightCode-D354tCXO.js → highlightCode-2spZP7ZA.js} +2 -3
- package/dist/{highlightCode-D354tCXO.js.map → highlightCode-2spZP7ZA.js.map} +1 -1
- package/dist/{icons-ZIeZXXS7.js → icons-DDR9dFSr.js} +21 -40
- package/dist/{icons-ZIeZXXS7.js.map → icons-DDR9dFSr.js.map} +1 -1
- package/dist/icons.d.ts +1 -1
- package/dist/icons.js +1 -2
- package/dist/{index-D-itZ3VP.d.ts → index-BljYaTWL.d.ts} +1 -39
- package/dist/index.d.ts +418 -1296
- package/dist/index.js +75 -74
- package/dist/internal/blocks/AIKit.js +1 -2
- package/dist/internal/blocks/AppShell.js +1 -2
- package/dist/internal/blocks/AuthLayout.js +3 -4
- package/dist/internal/blocks/AutoSaveTextarea.js +1 -2
- package/dist/internal/blocks/BrandEditor.js +1 -2
- package/dist/internal/blocks/ChartPanel.js +3 -4
- package/dist/internal/blocks/ChipEditor.js +6 -7
- package/dist/internal/blocks/ClipboardButton.js +1 -2
- package/dist/internal/blocks/ColorInput.js +1 -2
- package/dist/internal/blocks/ColorModeSwitch.js +1 -2
- package/dist/internal/blocks/Command.js +1 -2
- package/dist/internal/blocks/CopyField.js +1 -2
- package/dist/internal/blocks/DashboardHero.js +2 -3
- package/dist/internal/blocks/DateInput.js +1 -2
- package/dist/internal/blocks/DateRangeInput.js +1 -2
- package/dist/internal/blocks/DiagramShared/DiagramSkeleton.js +1 -2
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +2 -3
- package/dist/internal/blocks/EmptyState.js +1 -2
- package/dist/internal/blocks/ErrorState.js +1 -2
- package/dist/internal/blocks/ExportMenu.js +5 -6
- package/dist/internal/blocks/FacebookButton.js +3 -4
- package/dist/internal/blocks/Form/connectors/ComboboxField.js +3 -4
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +2 -3
- package/dist/internal/blocks/Form.js +3 -2
- package/dist/internal/blocks/FormGroup.js +1 -2
- package/dist/internal/blocks/GoogleButton.js +3 -4
- package/dist/internal/blocks/InlineEdit.js +1 -2
- package/dist/internal/blocks/MicrosoftButton.js +3 -4
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -2
- package/dist/internal/blocks/MultiCombobox.js +7 -8
- package/dist/internal/blocks/NumberInput.js +2 -3
- package/dist/internal/blocks/OtpInput.js +1 -2
- package/dist/internal/blocks/PageHeader.js +1 -2
- package/dist/internal/blocks/PageLayout.js +1 -2
- package/dist/internal/blocks/PageToolbar.js +1 -2
- package/dist/internal/blocks/PasswordInput.js +5 -6
- package/dist/internal/blocks/SearchInput.js +1 -2
- package/dist/internal/blocks/SearchInputWithNavigation.js +6 -7
- package/dist/internal/blocks/SectionNav.js +1 -2
- package/dist/internal/blocks/SplitButton.js +4 -5
- package/dist/internal/blocks/StatCard.js +4 -6
- package/dist/internal/blocks/StatCard.js.map +1 -1
- package/dist/internal/blocks/TextInput.js +1 -2
- package/dist/internal/blocks/Textarea.js +3 -4
- package/dist/internal/blocks/TimeInput.js +6 -7
- package/dist/internal/components/Alert.js +1 -2
- package/dist/internal/components/AlertModal.js +1 -2
- package/dist/internal/components/Avatar.js +3 -4
- package/dist/internal/components/Badge.js +1 -2
- package/dist/internal/components/BrandLogo.js +1 -2
- package/dist/internal/components/Breadcrumb.js +1 -2
- package/dist/internal/components/Button.js +1 -2
- package/dist/internal/components/ButtonGroup.js +2 -3
- package/dist/internal/components/Calendar.js +1 -2
- package/dist/internal/components/Card.js +1 -2
- package/dist/internal/components/Checkbox.js +1 -2
- package/dist/internal/components/Clipboard.js +1 -2
- package/dist/internal/components/Collapsible.js +1 -2
- package/dist/internal/components/CollapsiblePanel.js +5 -6
- package/dist/internal/components/Combobox.js +1 -2
- package/dist/internal/components/DatePicker.js +1 -2
- package/dist/internal/components/DateRangePicker.js +1 -2
- package/dist/internal/components/DiffView.js +1 -2
- package/dist/internal/components/DotsLoader.js +2 -3
- package/dist/internal/components/DropdownMenu.js +1 -2
- package/dist/internal/components/EmptySearchContent.js +1 -2
- package/dist/internal/components/FileUpload.js +1 -2
- package/dist/internal/components/FullScreenModal.js +1 -2
- package/dist/internal/components/HelpBlock.js +1 -2
- package/dist/internal/components/HoverCard.js +1 -2
- package/dist/internal/components/InputGroup.js +1 -2
- package/dist/internal/components/Kbd.js +1 -2
- package/dist/internal/components/Label.js +2 -3
- package/dist/internal/components/Link.js +2 -3
- package/dist/internal/components/MarkedText.js +1 -2
- package/dist/internal/components/MergeEditor/ConflictStatus/ConflictStatusIndicator.js +3 -4
- package/dist/internal/components/MergeEditor/PaneHeader.js +1 -2
- package/dist/internal/components/MergeEditor/constants.js +1 -2
- package/dist/internal/components/MergeEditor/useMergeDiff.js +1 -2
- package/dist/internal/components/Modal.js +1 -2
- package/dist/internal/components/Navbar.js +1 -2
- package/dist/internal/components/Pagination.js +1 -2
- package/dist/internal/components/PanelWithDetails.js +4 -5
- package/dist/internal/components/Popconfirm.js +1 -2
- package/dist/internal/components/Popover.js +1 -2
- package/dist/internal/components/Progress.js +2 -3
- package/dist/internal/components/RadioGroup.js +1 -2
- package/dist/internal/components/Resizable.js +1 -2
- package/dist/internal/components/ScrollArea.js +3 -5
- package/dist/internal/components/ScrollArea.js.map +1 -1
- package/dist/internal/components/Search.js +1 -2
- package/dist/internal/components/Select.js +1 -2
- package/dist/internal/components/Separator.js +2 -3
- package/dist/internal/components/Sheet.js +1 -2
- package/dist/internal/components/Sidebar.js +1 -2
- package/dist/internal/components/Skeleton/Skeleton.js +2 -3
- package/dist/internal/components/Skeleton/SkeletonList.js +2 -3
- package/dist/internal/components/Slider.js +1 -2
- package/dist/internal/components/SpotlightBackdrop.js +3 -5
- package/dist/internal/components/SpotlightBackdrop.js.map +1 -1
- package/dist/internal/components/Stepper.js +1 -2
- package/dist/internal/components/Switch.js +1 -2
- package/dist/internal/components/Table.js +1 -2
- package/dist/internal/components/Tabs.js +1 -2
- package/dist/internal/components/ThemeProvider.js +2 -2
- package/dist/internal/components/TimePicker.js +1 -2
- package/dist/internal/components/Timeline.js +1 -2
- package/dist/internal/components/Toast.js +2 -2
- package/dist/internal/components/Toggle.js +2 -3
- package/dist/internal/components/ToggleGroup.js +1 -2
- package/dist/internal/components/Tooltip.js +1 -2
- package/dist/internal/components/Truncated.js +3 -4
- package/dist/internal/components/Workbench.js +1 -2
- package/dist/internal/components/ZoomableSvg.js +1 -2
- package/dist/internal/hooks/useAltDigitHotkey.js +1 -2
- package/dist/internal/hooks/useAutosizeInput.js +1 -2
- package/dist/internal/hooks/useScrollbarPosition.js +2 -3
- package/dist/internal/hooks/useStableCallback.js +1 -2
- package/dist/internal/hooks/useTimeout.js +1 -2
- package/dist/internal/utils/accessibleName.js +1 -2
- package/dist/internal/utils/mergeRefs.js +1 -2
- package/dist/internal/utils.js +3 -3
- package/dist/markdown-editor.d.ts +0 -4
- package/dist/markdown-editor.js +30 -49
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.d.ts +0 -2
- package/dist/mermaid.js +1 -2
- package/dist/rjsf.d.ts +0 -8
- package/dist/rjsf.js +47 -78
- package/dist/rjsf.js.map +1 -1
- package/dist/{rolldown-runtime-Bdc48AWt.js → rolldown-runtime-BrwM56v-.js} +2 -3
- package/dist/{styles-T8xwr0sR.js → styles-BXXXosW_.js} +2 -3
- package/dist/{styles-T8xwr0sR.js.map → styles-BXXXosW_.js.map} +1 -1
- package/dist/{styles-DxazJ8Mz.js → styles-nwtCRF7y.js} +2 -3
- package/dist/{styles-DxazJ8Mz.js.map → styles-nwtCRF7y.js.map} +1 -1
- package/dist/styles.css +1 -1
- package/dist/{svgCache-Dhmbe-7i.js → svgCache-BzvN_fgr.js} +2 -3
- package/dist/{svgCache-Dhmbe-7i.js.map → svgCache-BzvN_fgr.js.map} +1 -1
- package/dist/{svgTransforms-Hnvev3Vs.js → svgTransforms-BBxxO9T6.js} +4 -6
- package/dist/{svgTransforms-Hnvev3Vs.js.map → svgTransforms-BBxxO9T6.js.map} +1 -1
- package/dist/testing.d.ts +0 -2
- package/dist/testing.js +2 -3
- package/dist/{themeScopeContext-CEVXbYvZ.js → themeScopeContext-BZGPdyG8.js} +6 -11
- package/dist/{themeScopeContext-CEVXbYvZ.js.map → themeScopeContext-BZGPdyG8.js.map} +1 -1
- package/dist/{themeTokens-DCeb62ap.js → themeTokens-B60cQtAY.js} +4 -6
- package/dist/{themeTokens-DCeb62ap.js.map → themeTokens-B60cQtAY.js.map} +1 -1
- package/dist/{toast-Y3cTMBW8.js → toast-Dzj1EFOb.js} +10 -17
- package/dist/{toast-Y3cTMBW8.js.map → toast-Dzj1EFOb.js.map} +1 -1
- package/dist/{types-BPcAjMG0.d.ts → types-CsZuwfxc.d.ts} +1 -3
- package/dist/{useControllableState-CUYXMsfz.js → useControllableState-BCvUOC6G.js} +2 -3
- package/dist/{useControllableState-CUYXMsfz.js.map → useControllableState-BCvUOC6G.js.map} +1 -1
- package/dist/{useElement-D-RjrGa4.js → useElement-Dcoo9Jlr.js} +2 -3
- package/dist/{useElement-D-RjrGa4.js.map → useElement-Dcoo9Jlr.js.map} +1 -1
- package/dist/{useMergeDiff-CvowEXJ1.js → useMergeDiff-DFIATaTw.js} +3 -5
- package/dist/{useMergeDiff-CvowEXJ1.js.map → useMergeDiff-DFIATaTw.js.map} +1 -1
- package/dist/{utils-DwC9u0tM.js → utils-DjFceY3H.js} +18 -34
- package/dist/{utils-DwC9u0tM.js.map → utils-DjFceY3H.js.map} +1 -1
- package/dist/vega.d.ts +1 -5
- package/dist/vega.js +3 -4
- package/dist/{vegaTheme-ISwGXvof.js → vegaTheme-BcTNRmVS.js} +3 -4
- package/dist/{vegaTheme-ISwGXvof.js.map → vegaTheme-BcTNRmVS.js.map} +1 -1
- package/dist/{vegaTokens-DCkvpIVE.js → vegaTokens-DnCcy7JY.js} +3 -4
- package/dist/{vegaTokens-DCkvpIVE.js.map → vegaTokens-DnCcy7JY.js.map} +1 -1
- package/package.json +40 -40
- package/src/styles.css +70 -4
- package/src/theme.css +113 -11
- package/dist/AIKit-BR6jfsdI.js.map +0 -1
- package/dist/Button-BNkyYU8u.js.map +0 -1
- package/dist/Calendar-BnKi1kPu.js.map +0 -1
- package/dist/Popconfirm-p72DiagN.js.map +0 -1
- package/dist/Search-vyZwGKMU.js.map +0 -1
- package/dist/SearchInput-DyYXyw3u.js.map +0 -1
- package/dist/TextInput-CR0_USaY.js.map +0 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { cn } from "./classNames-
|
|
2
|
-
import { Button } from "./Button-
|
|
3
|
-
import { TextInput } from "./TextInput
|
|
4
|
-
import { Switch } from "./Switch-
|
|
5
|
-
import { Select } from "./Select-
|
|
6
|
-
import { Checkbox } from "./Checkbox-
|
|
7
|
-
import { FieldItem, fieldContext, formContext, useFieldContext, useFormContext } from "./FieldItem-
|
|
1
|
+
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
|
+
import { Button } from "./Button-DbvGzEDb.js";
|
|
3
|
+
import { TextInput } from "./TextInput--1CfZybC.js";
|
|
4
|
+
import { Switch } from "./Switch-DONWW7ju.js";
|
|
5
|
+
import { Select } from "./Select-DRdkdzBp.js";
|
|
6
|
+
import { Checkbox } from "./Checkbox-B2jLlyaO.js";
|
|
7
|
+
import { FieldItem, fieldContext, formContext, useFieldContext, useFormContext } from "./FieldItem-D7eCMfMB.js";
|
|
8
8
|
import { NumberInput } from "./internal/blocks/NumberInput.js";
|
|
9
9
|
import { Textarea } from "./internal/blocks/Textarea.js";
|
|
10
10
|
import { PasswordInput } from "./internal/blocks/PasswordInput.js";
|
|
11
|
-
import { OtpInput } from "./OtpInput-
|
|
12
|
-
import { Alert } from "./Alert-
|
|
11
|
+
import { OtpInput } from "./OtpInput-C5plPzGU.js";
|
|
12
|
+
import { Alert } from "./Alert-DziS8n1H.js";
|
|
13
13
|
import { jsx } from "react/jsx-runtime";
|
|
14
14
|
import { createFormHook } from "@tanstack/react-form";
|
|
15
|
-
|
|
15
|
+
// src/blocks/Form/components/FormBody.tsx
|
|
16
16
|
const FormBody = ({ children, className, ...formProps }) => {
|
|
17
17
|
const form = useFormContext();
|
|
18
18
|
return /* @__PURE__ */ jsx("form", {
|
|
@@ -26,8 +26,7 @@ const FormBody = ({ children, className, ...formProps }) => {
|
|
|
26
26
|
children
|
|
27
27
|
});
|
|
28
28
|
};
|
|
29
|
-
|
|
30
|
-
//#region src/blocks/Form/components/SubmitButton.tsx
|
|
29
|
+
// src/blocks/Form/components/SubmitButton.tsx
|
|
31
30
|
const SubmitButton = ({ children = "Submit", ...buttonProps }) => {
|
|
32
31
|
const form = useFormContext();
|
|
33
32
|
return /* @__PURE__ */ jsx(form.Subscribe, {
|
|
@@ -44,8 +43,7 @@ const SubmitButton = ({ children = "Submit", ...buttonProps }) => {
|
|
|
44
43
|
})
|
|
45
44
|
});
|
|
46
45
|
};
|
|
47
|
-
|
|
48
|
-
//#region src/blocks/Form/components/SubmitErrorAlert.tsx
|
|
46
|
+
// src/blocks/Form/components/SubmitErrorAlert.tsx
|
|
49
47
|
/**
|
|
50
48
|
* Renders the form-level submit error (set via `setSubmitError` → `errorMap.onSubmit`) as an error
|
|
51
49
|
* `Alert`. Place inside `form.FormBody`, typically just above the submit button. Renders nothing when
|
|
@@ -61,8 +59,7 @@ const SubmitErrorAlert = () => {
|
|
|
61
59
|
}) : null
|
|
62
60
|
});
|
|
63
61
|
};
|
|
64
|
-
|
|
65
|
-
//#region src/blocks/Form/connectors/CheckboxField.tsx
|
|
62
|
+
// src/blocks/Form/connectors/CheckboxField.tsx
|
|
66
63
|
const CheckboxField = ({ className, children, ...checkboxProps }) => {
|
|
67
64
|
const field = useFieldContext();
|
|
68
65
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -77,8 +74,7 @@ const CheckboxField = ({ className, children, ...checkboxProps }) => {
|
|
|
77
74
|
})
|
|
78
75
|
});
|
|
79
76
|
};
|
|
80
|
-
|
|
81
|
-
//#region src/blocks/Form/connectors/NumberField.tsx
|
|
77
|
+
// src/blocks/Form/connectors/NumberField.tsx
|
|
82
78
|
const NumberField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
|
|
83
79
|
const field = useFieldContext();
|
|
84
80
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -99,8 +95,7 @@ const NumberField = ({ label, action, required, requiredMark, help, tooltip, cla
|
|
|
99
95
|
})
|
|
100
96
|
});
|
|
101
97
|
};
|
|
102
|
-
|
|
103
|
-
//#region src/blocks/Form/connectors/OtpInputField.tsx
|
|
98
|
+
// src/blocks/Form/connectors/OtpInputField.tsx
|
|
104
99
|
const OtpInputField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, maxLength, ...otpProps }) => {
|
|
105
100
|
const field = useFieldContext();
|
|
106
101
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -123,8 +118,7 @@ const OtpInputField = ({ label, action, required, requiredMark, help, tooltip, c
|
|
|
123
118
|
})
|
|
124
119
|
});
|
|
125
120
|
};
|
|
126
|
-
|
|
127
|
-
//#region src/blocks/Form/connectors/PasswordField.tsx
|
|
121
|
+
// src/blocks/Form/connectors/PasswordField.tsx
|
|
128
122
|
const PasswordField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
|
|
129
123
|
const field = useFieldContext();
|
|
130
124
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -145,8 +139,7 @@ const PasswordField = ({ label, action, required, requiredMark, help, tooltip, c
|
|
|
145
139
|
})
|
|
146
140
|
});
|
|
147
141
|
};
|
|
148
|
-
|
|
149
|
-
//#region src/blocks/Form/connectors/SelectField.tsx
|
|
142
|
+
// src/blocks/Form/connectors/SelectField.tsx
|
|
150
143
|
const SelectField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, triggerClassName, ...selectProps }) => {
|
|
151
144
|
const field = useFieldContext();
|
|
152
145
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -168,8 +161,7 @@ const SelectField = ({ label, action, required, requiredMark, help, tooltip, cla
|
|
|
168
161
|
})
|
|
169
162
|
});
|
|
170
163
|
};
|
|
171
|
-
|
|
172
|
-
//#region src/blocks/Form/connectors/SwitchField.tsx
|
|
164
|
+
// src/blocks/Form/connectors/SwitchField.tsx
|
|
173
165
|
const SwitchField = ({ className, children, ...switchProps }) => {
|
|
174
166
|
const field = useFieldContext();
|
|
175
167
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -184,8 +176,7 @@ const SwitchField = ({ className, children, ...switchProps }) => {
|
|
|
184
176
|
})
|
|
185
177
|
});
|
|
186
178
|
};
|
|
187
|
-
|
|
188
|
-
//#region src/blocks/Form/connectors/TextareaField.tsx
|
|
179
|
+
// src/blocks/Form/connectors/TextareaField.tsx
|
|
189
180
|
const TextareaField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
|
|
190
181
|
const field = useFieldContext();
|
|
191
182
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -206,8 +197,7 @@ const TextareaField = ({ label, action, required, requiredMark, help, tooltip, c
|
|
|
206
197
|
})
|
|
207
198
|
});
|
|
208
199
|
};
|
|
209
|
-
|
|
210
|
-
//#region src/blocks/Form/connectors/TextField.tsx
|
|
200
|
+
// src/blocks/Form/connectors/TextField.tsx
|
|
211
201
|
const TextField = ({ label, action, required, requiredMark, help, tooltip, className, "aria-describedby": ariaDescribedBy, ...inputProps }) => {
|
|
212
202
|
const field = useFieldContext();
|
|
213
203
|
return /* @__PURE__ */ jsx(FieldItem, {
|
|
@@ -228,8 +218,7 @@ const TextField = ({ label, action, required, requiredMark, help, tooltip, class
|
|
|
228
218
|
})
|
|
229
219
|
});
|
|
230
220
|
};
|
|
231
|
-
|
|
232
|
-
//#region src/blocks/Form/formHook.ts
|
|
221
|
+
// src/blocks/Form/formHook.ts
|
|
233
222
|
/**
|
|
234
223
|
* Typed form hook + `withForm` binding for forms with validation, server errors or a submit state.
|
|
235
224
|
*
|
|
@@ -259,8 +248,7 @@ const { useAppForm, withForm } = createFormHook({
|
|
|
259
248
|
SubmitErrorAlert
|
|
260
249
|
}
|
|
261
250
|
});
|
|
262
|
-
|
|
263
|
-
//#region src/blocks/Form/setServerFieldErrors.ts
|
|
251
|
+
// src/blocks/Form/setServerFieldErrors.ts
|
|
264
252
|
/**
|
|
265
253
|
* Map a list of server-returned field errors onto a TanStack form instance.
|
|
266
254
|
*
|
|
@@ -281,8 +269,7 @@ const setServerFieldErrors = (form, errors) => {
|
|
|
281
269
|
}
|
|
282
270
|
}));
|
|
283
271
|
};
|
|
284
|
-
|
|
285
|
-
//#region src/blocks/Form/setSubmitError.ts
|
|
272
|
+
// src/blocks/Form/setSubmitError.ts
|
|
286
273
|
/**
|
|
287
274
|
* Set a **form-level** submit error on a TanStack form instance — a failed submission that isn't tied
|
|
288
275
|
* to a single field (bad credentials, 5xx, network). Stored on `errorMap.onSubmit` and rendered by
|
|
@@ -297,7 +284,6 @@ const setSubmitError = (form, message) => {
|
|
|
297
284
|
fields: {}
|
|
298
285
|
} });
|
|
299
286
|
};
|
|
300
|
-
//#endregion
|
|
301
287
|
export { setServerFieldErrors, setSubmitError, useAppForm, withForm };
|
|
302
288
|
|
|
303
|
-
//# sourceMappingURL=Form-
|
|
289
|
+
//# sourceMappingURL=Form-BUNW7nlt.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form-Dqbt_tIs.js","names":[],"sources":["../src/blocks/Form/components/FormBody.tsx","../src/blocks/Form/components/SubmitButton.tsx","../src/blocks/Form/components/SubmitErrorAlert.tsx","../src/blocks/Form/connectors/CheckboxField.tsx","../src/blocks/Form/connectors/NumberField.tsx","../src/blocks/Form/connectors/OtpInputField.tsx","../src/blocks/Form/connectors/PasswordField.tsx","../src/blocks/Form/connectors/SelectField.tsx","../src/blocks/Form/connectors/SwitchField.tsx","../src/blocks/Form/connectors/TextareaField.tsx","../src/blocks/Form/connectors/TextField.tsx","../src/blocks/Form/formHook.ts","../src/blocks/Form/setServerFieldErrors.ts","../src/blocks/Form/setSubmitError.ts"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../../utils';\nimport { useFormContext } from '../contexts';\n\ntype Props = {\n children: ReactNode;\n} & Omit<ComponentProps<'form'>, 'onSubmit'>;\n\nexport const FormBody = ({ children, className, ...formProps }: Props) => {\n const form = useFormContext();\n\n return (\n <form\n {...formProps}\n className={cn('tw:flex tw:flex-col tw:gap-4', className)}\n onSubmit={(e) => {\n e.preventDefault();\n e.stopPropagation();\n void form.handleSubmit();\n }}\n >\n {children}\n </form>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../../components/Button';\nimport { useFormContext } from '../contexts';\n\ntype Props = {\n children?: ReactNode;\n} & Omit<ComponentProps<typeof Button>, 'type' | 'isLoading' | 'disabled'>;\n\nexport const SubmitButton = ({ children = 'Submit', ...buttonProps }: Props) => {\n const form = useFormContext();\n\n return (\n <form.Subscribe\n selector={(state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit })}\n >\n {({ isSubmitting, canSubmit }) => (\n <Button\n {...buttonProps}\n type=\"submit\"\n isLoading={isSubmitting}\n disabled={!canSubmit || isSubmitting}\n >\n {children}\n </Button>\n )}\n </form.Subscribe>\n );\n};\n","import { Alert } from '../../../components/Alert';\nimport { useFormContext } from '../contexts';\n\n/**\n * Renders the form-level submit error (set via `setSubmitError` → `errorMap.onSubmit`) as an error\n * `Alert`. Place inside `form.FormBody`, typically just above the submit button. Renders nothing when\n * there is no submit error.\n */\nexport const SubmitErrorAlert = () => {\n const form = useFormContext();\n\n return (\n <form.Subscribe selector={(state) => state.errorMap.onSubmit}>\n {(submitError) =>\n typeof submitError === 'string' ? <Alert variant=\"error\" title={submitError} /> : null\n }\n </form.Subscribe>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { Checkbox } from '../../../components/Checkbox';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\n// Checkbox owns its own label + description (via children), so only the wrapper className applies.\ntype Props = Pick<FieldItemProps, 'className'> &\n Omit<ComponentProps<typeof Checkbox>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;\n\nexport const CheckboxField = ({ className, children, ...checkboxProps }: Props) => {\n // Strictly boolean: coerce Radix's `'indeterminate'` to `false` so a non-boolean never leaks into\n // form state (submit payloads / validators). `'indeterminate'` stays a purely visual state.\n const field = useFieldContext<boolean>();\n\n return (\n <FieldItem className={className}>\n {(control) => (\n <Checkbox\n {...checkboxProps}\n {...control}\n checked={field.state.value ?? false}\n onCheckedChange={(checked) => field.handleChange(checked === true)}\n onBlur={field.handleBlur}\n >\n {children}\n </Checkbox>\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { NumberInput } from '../../NumberInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n ComponentProps<typeof FormGroup.NumberInput>,\n 'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'\n >;\n\nexport const NumberField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<number | null>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <NumberInput\n {...inputProps}\n {...control}\n value={field.state.value ?? null}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import { OtpInput, type OtpInputProps } from '../../OtpInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n OtpInputProps,\n | 'value'\n | 'onChange'\n | 'children'\n | 'id'\n | 'name'\n | 'aria-describedby'\n | 'aria-required'\n | 'aria-invalid'\n >;\n\nexport const OtpInputField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n maxLength,\n ...otpProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <OtpInput\n {...otpProps}\n {...control}\n maxLength={maxLength}\n value={field.state.value ?? ''}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n >\n <OtpInput.Group>\n {Array.from({ length: maxLength }, (_, index) => (\n <OtpInput.Slot key={index} index={index} />\n ))}\n </OtpInput.Group>\n </OtpInput>\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { PasswordInput } from '../../PasswordInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<ComponentProps<typeof PasswordInput>, 'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'>;\n\nexport const PasswordField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <PasswordInput\n {...inputProps}\n {...control}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import {\n Select,\n type SelectItem,\n type SelectItemGroup,\n type SelectProps,\n} from '../../../components/Select';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n SelectProps,\n // Owned by the field / `FieldItem` — see the connector rules in AGENTS.md. The naming props\n // are on that list too: `FieldItem` renders the label and hands the control its `id`, so a\n // name from the call site could only disagree with it.\n | 'id'\n | 'aria-label'\n | 'aria-labelledby'\n | 'name'\n | 'value'\n | 'defaultValue'\n | 'onValueChange'\n | 'onBlur'\n | 'aria-describedby'\n | 'aria-invalid'\n | 'aria-required'\n // `className` styles the field frame, so the trigger gets its own prop below.\n | 'className'\n | 'items'\n > & {\n items: readonly (SelectItem | SelectItemGroup)[];\n triggerClassName?: string;\n };\n\nexport const SelectField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n triggerClassName,\n ...selectProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n // `required` deliberately stays on `FieldItem` (which turns it into `aria-required` via\n // `control`) and is not forwarded to the Radix root: a required hidden native select would\n // fail browser constraint validation and swallow the submit event before the form sees it.\n <Select\n {...selectProps}\n {...control}\n className={triggerClassName ?? 'tw:w-full'}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { Switch } from '../../../components/Switch';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\n// Switch owns its own label + description (via children), so only the wrapper className applies.\ntype Props = Pick<FieldItemProps, 'className'> &\n Omit<ComponentProps<typeof Switch>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;\n\nexport const SwitchField = ({ className, children, ...switchProps }: Props) => {\n const field = useFieldContext<boolean>();\n\n return (\n <FieldItem className={className}>\n {(control) => (\n <Switch\n {...switchProps}\n {...control}\n checked={field.state.value ?? false}\n onCheckedChange={field.handleChange}\n onBlur={field.handleBlur}\n >\n {children}\n </Switch>\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { Textarea } from '../../Textarea';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n ComponentProps<typeof FormGroup.Textarea>,\n 'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'\n >;\n\nexport const TextareaField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <Textarea\n {...inputProps}\n {...control}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { TextInput } from '../../TextInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<ComponentProps<typeof FormGroup.TextInput>, 'id' | 'name' | 'value' | 'onChange' | 'onBlur'>;\n\nexport const TextField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <TextInput\n {...inputProps}\n {...control}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import { createFormHook } from '@tanstack/react-form';\n\nimport { FormBody } from './components/FormBody';\nimport { SubmitButton } from './components/SubmitButton';\nimport { SubmitErrorAlert } from './components/SubmitErrorAlert';\nimport { CheckboxField } from './connectors/CheckboxField';\nimport { NumberField } from './connectors/NumberField';\nimport { OtpInputField } from './connectors/OtpInputField';\nimport { PasswordField } from './connectors/PasswordField';\nimport { SelectField } from './connectors/SelectField';\nimport { SwitchField } from './connectors/SwitchField';\nimport { TextareaField } from './connectors/TextareaField';\nimport { TextField } from './connectors/TextField';\nimport { fieldContext, formContext } from './contexts';\n\n/**\n * Typed form hook + `withForm` binding for forms with validation, server errors or a submit state.\n *\n * - Render `field.*` inside `form.AppForm` → `form.FormBody`; submit via `form.SubmitButton`.\n * - `ComboboxField`, `MultiComboboxField`, `CodeEditorField` are imported by name: no tree-shaking.\n * - Not for a lone `<input>` (`TextInput`) or an unvalidated label + input (`FormGroup`).\n * - Takes any [Standard Schema](https://standardschema.dev/) validator.\n *\n * @see RECIPES.md#modal-form\n */\nexport const { useAppForm, withForm } = createFormHook({\n fieldContext,\n formContext,\n fieldComponents: {\n TextField,\n NumberField,\n PasswordField,\n TextareaField,\n SelectField,\n CheckboxField,\n SwitchField,\n OtpInputField,\n },\n formComponents: {\n FormBody,\n SubmitButton,\n SubmitErrorAlert,\n },\n});\n","import type { AnyFormApi } from '@tanstack/form-core';\n\nexport type ServerFieldError = {\n field: string;\n message: string;\n};\n\n/**\n * Map a list of server-returned field errors onto a TanStack form instance.\n *\n * - Marks each field blurred — that is what `FieldItem` gates the error reveal on.\n * - `isTouched` alongside it, for anything reading TanStack's own meta (`canSubmit`, dirty checks).\n * - Both are needed. Called from a mutation's `onError` there is no submit attempt to fall back on, so\n * without `isBlurred` the message would sit in `errorMap` and render nowhere.\n */\nexport const setServerFieldErrors = (form: AnyFormApi, errors: readonly ServerFieldError[]) => {\n for (const { field, message } of errors) {\n form.setFieldMeta(field, (meta) => ({\n ...meta,\n isBlurred: true,\n isTouched: true,\n errors: [message],\n errorMap: { ...meta.errorMap, onServer: message },\n }));\n }\n};\n","// `form-core`, not `react-form`: a declared dep, so `dist` imports it rather than inlining its own copy.\nimport type { AnyFormApi } from '@tanstack/form-core';\n\n/**\n * Set a **form-level** submit error on a TanStack form instance — a failed submission that isn't tied\n * to a single field (bad credentials, 5xx, network). Stored on `errorMap.onSubmit` and rendered by\n * `SubmitErrorAlert`. For field-specific server errors use `setServerFieldErrors` instead.\n *\n * Note: any error entry makes the form \"invalid\", so pair this with `canSubmitWhenInvalid: true` on\n * the form to keep the submit button retryable (a resubmit re-runs the validators and clears it).\n */\nexport const setSubmitError = (form: AnyFormApi, message: string) => {\n form.setErrorMap({ onSubmit: { form: message, fields: {} } });\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Form-BUNW7nlt.js","names":[],"sources":["../src/blocks/Form/components/FormBody.tsx","../src/blocks/Form/components/SubmitButton.tsx","../src/blocks/Form/components/SubmitErrorAlert.tsx","../src/blocks/Form/connectors/CheckboxField.tsx","../src/blocks/Form/connectors/NumberField.tsx","../src/blocks/Form/connectors/OtpInputField.tsx","../src/blocks/Form/connectors/PasswordField.tsx","../src/blocks/Form/connectors/SelectField.tsx","../src/blocks/Form/connectors/SwitchField.tsx","../src/blocks/Form/connectors/TextareaField.tsx","../src/blocks/Form/connectors/TextField.tsx","../src/blocks/Form/formHook.ts","../src/blocks/Form/setServerFieldErrors.ts","../src/blocks/Form/setSubmitError.ts"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cn } from '../../../utils';\nimport { useFormContext } from '../contexts';\n\ntype Props = {\n children: ReactNode;\n} & Omit<ComponentProps<'form'>, 'onSubmit'>;\n\nexport const FormBody = ({ children, className, ...formProps }: Props) => {\n const form = useFormContext();\n\n return (\n <form\n {...formProps}\n className={cn('tw:flex tw:flex-col tw:gap-4', className)}\n onSubmit={(e) => {\n e.preventDefault();\n e.stopPropagation();\n void form.handleSubmit();\n }}\n >\n {children}\n </form>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\n\nimport { Button } from '../../../components/Button';\nimport { useFormContext } from '../contexts';\n\ntype Props = {\n children?: ReactNode;\n} & Omit<ComponentProps<typeof Button>, 'type' | 'isLoading' | 'disabled'>;\n\nexport const SubmitButton = ({ children = 'Submit', ...buttonProps }: Props) => {\n const form = useFormContext();\n\n return (\n <form.Subscribe\n selector={(state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit })}\n >\n {({ isSubmitting, canSubmit }) => (\n <Button\n {...buttonProps}\n type=\"submit\"\n isLoading={isSubmitting}\n disabled={!canSubmit || isSubmitting}\n >\n {children}\n </Button>\n )}\n </form.Subscribe>\n );\n};\n","import { Alert } from '../../../components/Alert';\nimport { useFormContext } from '../contexts';\n\n/**\n * Renders the form-level submit error (set via `setSubmitError` → `errorMap.onSubmit`) as an error\n * `Alert`. Place inside `form.FormBody`, typically just above the submit button. Renders nothing when\n * there is no submit error.\n */\nexport const SubmitErrorAlert = () => {\n const form = useFormContext();\n\n return (\n <form.Subscribe selector={(state) => state.errorMap.onSubmit}>\n {(submitError) =>\n typeof submitError === 'string' ? <Alert variant=\"error\" title={submitError} /> : null\n }\n </form.Subscribe>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { Checkbox } from '../../../components/Checkbox';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\n// Checkbox owns its own label + description (via children), so only the wrapper className applies.\ntype Props = Pick<FieldItemProps, 'className'> &\n Omit<ComponentProps<typeof Checkbox>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;\n\nexport const CheckboxField = ({ className, children, ...checkboxProps }: Props) => {\n // Strictly boolean: coerce Radix's `'indeterminate'` to `false` so a non-boolean never leaks into\n // form state (submit payloads / validators). `'indeterminate'` stays a purely visual state.\n const field = useFieldContext<boolean>();\n\n return (\n <FieldItem className={className}>\n {(control) => (\n <Checkbox\n {...checkboxProps}\n {...control}\n checked={field.state.value ?? false}\n onCheckedChange={(checked) => field.handleChange(checked === true)}\n onBlur={field.handleBlur}\n >\n {children}\n </Checkbox>\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { NumberInput } from '../../NumberInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n ComponentProps<typeof FormGroup.NumberInput>,\n 'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'\n >;\n\nexport const NumberField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<number | null>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <NumberInput\n {...inputProps}\n {...control}\n value={field.state.value ?? null}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import { OtpInput, type OtpInputProps } from '../../OtpInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n OtpInputProps,\n | 'value'\n | 'onChange'\n | 'children'\n | 'id'\n | 'name'\n | 'aria-describedby'\n | 'aria-required'\n | 'aria-invalid'\n >;\n\nexport const OtpInputField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n maxLength,\n ...otpProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <OtpInput\n {...otpProps}\n {...control}\n maxLength={maxLength}\n value={field.state.value ?? ''}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n >\n <OtpInput.Group>\n {Array.from({ length: maxLength }, (_, index) => (\n <OtpInput.Slot key={index} index={index} />\n ))}\n </OtpInput.Group>\n </OtpInput>\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { PasswordInput } from '../../PasswordInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<ComponentProps<typeof PasswordInput>, 'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'>;\n\nexport const PasswordField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <PasswordInput\n {...inputProps}\n {...control}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import {\n Select,\n type SelectItem,\n type SelectItemGroup,\n type SelectProps,\n} from '../../../components/Select';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n SelectProps,\n // Owned by the field / `FieldItem` — see the connector rules in AGENTS.md. The naming props\n // are on that list too: `FieldItem` renders the label and hands the control its `id`, so a\n // name from the call site could only disagree with it.\n | 'id'\n | 'aria-label'\n | 'aria-labelledby'\n | 'name'\n | 'value'\n | 'defaultValue'\n | 'onValueChange'\n | 'onBlur'\n | 'aria-describedby'\n | 'aria-invalid'\n | 'aria-required'\n // `className` styles the field frame, so the trigger gets its own prop below.\n | 'className'\n | 'items'\n > & {\n items: readonly (SelectItem | SelectItemGroup)[];\n triggerClassName?: string;\n };\n\nexport const SelectField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n triggerClassName,\n ...selectProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n // `required` deliberately stays on `FieldItem` (which turns it into `aria-required` via\n // `control`) and is not forwarded to the Radix root: a required hidden native select would\n // fail browser constraint validation and swallow the submit event before the form sees it.\n <Select\n {...selectProps}\n {...control}\n className={triggerClassName ?? 'tw:w-full'}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { Switch } from '../../../components/Switch';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\n// Switch owns its own label + description (via children), so only the wrapper className applies.\ntype Props = Pick<FieldItemProps, 'className'> &\n Omit<ComponentProps<typeof Switch>, 'id' | 'name' | 'checked' | 'onCheckedChange'>;\n\nexport const SwitchField = ({ className, children, ...switchProps }: Props) => {\n const field = useFieldContext<boolean>();\n\n return (\n <FieldItem className={className}>\n {(control) => (\n <Switch\n {...switchProps}\n {...control}\n checked={field.state.value ?? false}\n onCheckedChange={field.handleChange}\n onBlur={field.handleBlur}\n >\n {children}\n </Switch>\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { Textarea } from '../../Textarea';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<\n ComponentProps<typeof FormGroup.Textarea>,\n 'id' | 'name' | 'value' | 'onValueChange' | 'onBlur'\n >;\n\nexport const TextareaField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <Textarea\n {...inputProps}\n {...control}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport type { FormGroup } from '../../FormGroup';\nimport { TextInput } from '../../TextInput';\nimport { useFieldContext } from '../contexts';\n\nimport { FieldItem, type FieldItemProps } from './FieldItem';\n\ntype Props = FieldItemProps &\n Omit<ComponentProps<typeof FormGroup.TextInput>, 'id' | 'name' | 'value' | 'onChange' | 'onBlur'>;\n\nexport const TextField = ({\n label,\n action,\n required,\n requiredMark,\n help,\n tooltip,\n className,\n 'aria-describedby': ariaDescribedBy,\n ...inputProps\n}: Props) => {\n const field = useFieldContext<string>();\n\n return (\n <FieldItem\n label={label}\n action={action}\n required={required}\n requiredMark={requiredMark}\n help={help}\n tooltip={tooltip}\n className={className}\n aria-describedby={ariaDescribedBy}\n >\n {(control) => (\n <TextInput\n {...inputProps}\n {...control}\n value={field.state.value ?? ''}\n onValueChange={field.handleChange}\n onBlur={field.handleBlur}\n />\n )}\n </FieldItem>\n );\n};\n","import { createFormHook } from '@tanstack/react-form';\n\nimport { FormBody } from './components/FormBody';\nimport { SubmitButton } from './components/SubmitButton';\nimport { SubmitErrorAlert } from './components/SubmitErrorAlert';\nimport { CheckboxField } from './connectors/CheckboxField';\nimport { NumberField } from './connectors/NumberField';\nimport { OtpInputField } from './connectors/OtpInputField';\nimport { PasswordField } from './connectors/PasswordField';\nimport { SelectField } from './connectors/SelectField';\nimport { SwitchField } from './connectors/SwitchField';\nimport { TextareaField } from './connectors/TextareaField';\nimport { TextField } from './connectors/TextField';\nimport { fieldContext, formContext } from './contexts';\n\n/**\n * Typed form hook + `withForm` binding for forms with validation, server errors or a submit state.\n *\n * - Render `field.*` inside `form.AppForm` → `form.FormBody`; submit via `form.SubmitButton`.\n * - `ComboboxField`, `MultiComboboxField`, `CodeEditorField` are imported by name: no tree-shaking.\n * - Not for a lone `<input>` (`TextInput`) or an unvalidated label + input (`FormGroup`).\n * - Takes any [Standard Schema](https://standardschema.dev/) validator.\n *\n * @see RECIPES.md#modal-form\n */\nexport const { useAppForm, withForm } = createFormHook({\n fieldContext,\n formContext,\n fieldComponents: {\n TextField,\n NumberField,\n PasswordField,\n TextareaField,\n SelectField,\n CheckboxField,\n SwitchField,\n OtpInputField,\n },\n formComponents: {\n FormBody,\n SubmitButton,\n SubmitErrorAlert,\n },\n});\n","import type { AnyFormApi } from '@tanstack/form-core';\n\nexport type ServerFieldError = {\n field: string;\n message: string;\n};\n\n/**\n * Map a list of server-returned field errors onto a TanStack form instance.\n *\n * - Marks each field blurred — that is what `FieldItem` gates the error reveal on.\n * - `isTouched` alongside it, for anything reading TanStack's own meta (`canSubmit`, dirty checks).\n * - Both are needed. Called from a mutation's `onError` there is no submit attempt to fall back on, so\n * without `isBlurred` the message would sit in `errorMap` and render nowhere.\n */\nexport const setServerFieldErrors = (form: AnyFormApi, errors: readonly ServerFieldError[]) => {\n for (const { field, message } of errors) {\n form.setFieldMeta(field, (meta) => ({\n ...meta,\n isBlurred: true,\n isTouched: true,\n errors: [message],\n errorMap: { ...meta.errorMap, onServer: message },\n }));\n }\n};\n","// `form-core`, not `react-form`: a declared dep, so `dist` imports it rather than inlining its own copy.\nimport type { AnyFormApi } from '@tanstack/form-core';\n\n/**\n * Set a **form-level** submit error on a TanStack form instance — a failed submission that isn't tied\n * to a single field (bad credentials, 5xx, network). Stored on `errorMap.onSubmit` and rendered by\n * `SubmitErrorAlert`. For field-specific server errors use `setServerFieldErrors` instead.\n *\n * Note: any error entry makes the form \"invalid\", so pair this with `canSubmitWhenInvalid: true` on\n * the form to keep the submit button retryable (a resubmit re-runs the validators and clears it).\n */\nexport const setSubmitError = (form: AnyFormApi, message: string) => {\n form.setErrorMap({ onSubmit: { form: message, fields: {} } });\n};\n"],"mappings":"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"}
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
import { cn } from "./classNames-
|
|
2
|
-
import { TextInput } from "./TextInput
|
|
3
|
-
import { ColorInput } from "./ColorInput-
|
|
1
|
+
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
|
+
import { TextInput } from "./TextInput--1CfZybC.js";
|
|
3
|
+
import { ColorInput } from "./ColorInput-Cjr1jkvy.js";
|
|
4
4
|
import { HelpBlock } from "./internal/components/HelpBlock.js";
|
|
5
5
|
import { NumberInput } from "./internal/blocks/NumberInput.js";
|
|
6
6
|
import { Textarea } from "./internal/blocks/Textarea.js";
|
|
7
7
|
import { createContext, use, useMemo } from "react";
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|
|
9
|
-
|
|
9
|
+
// src/blocks/FormGroup/context.ts
|
|
10
10
|
const FormGroupContext = createContext({ state: "default" });
|
|
11
11
|
const FormGroupProvider = FormGroupContext;
|
|
12
12
|
const useFormGroupContext = () => use(FormGroupContext);
|
|
13
|
-
|
|
14
|
-
//#region src/blocks/FormGroup/FormGroupColorInput.tsx
|
|
13
|
+
// src/blocks/FormGroup/FormGroupColorInput.tsx
|
|
15
14
|
const FormGroupColorInput = ({ ref, ...props }) => {
|
|
16
15
|
const { state } = useFormGroupContext();
|
|
17
16
|
return /* @__PURE__ */ jsx(ColorInput, {
|
|
@@ -20,8 +19,7 @@ const FormGroupColorInput = ({ ref, ...props }) => {
|
|
|
20
19
|
ref
|
|
21
20
|
});
|
|
22
21
|
};
|
|
23
|
-
|
|
24
|
-
//#region src/blocks/FormGroup/FormGroupError.tsx
|
|
22
|
+
// src/blocks/FormGroup/FormGroupError.tsx
|
|
25
23
|
const toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
|
|
26
24
|
/**
|
|
27
25
|
* Field validation error.
|
|
@@ -48,8 +46,7 @@ const FormGroupError = ({ children, className, errors, ...rest }) => {
|
|
|
48
46
|
children: content
|
|
49
47
|
});
|
|
50
48
|
};
|
|
51
|
-
|
|
52
|
-
//#region src/blocks/FormGroup/FormGroupHelp.tsx
|
|
49
|
+
// src/blocks/FormGroup/FormGroupHelp.tsx
|
|
53
50
|
const FormGroupHelp = ({ children, ...rest }) => {
|
|
54
51
|
const formGroupContext = useFormGroupContext();
|
|
55
52
|
return /* @__PURE__ */ jsx(HelpBlock, {
|
|
@@ -58,8 +55,7 @@ const FormGroupHelp = ({ children, ...rest }) => {
|
|
|
58
55
|
children
|
|
59
56
|
});
|
|
60
57
|
};
|
|
61
|
-
|
|
62
|
-
//#region src/blocks/FormGroup/FormGroupNumberInput.tsx
|
|
58
|
+
// src/blocks/FormGroup/FormGroupNumberInput.tsx
|
|
63
59
|
const FormGroupNumberInput = ({ ref, ...props }) => {
|
|
64
60
|
const { state } = useFormGroupContext();
|
|
65
61
|
return /* @__PURE__ */ jsx(NumberInput, {
|
|
@@ -68,8 +64,7 @@ const FormGroupNumberInput = ({ ref, ...props }) => {
|
|
|
68
64
|
state
|
|
69
65
|
});
|
|
70
66
|
};
|
|
71
|
-
|
|
72
|
-
//#region src/blocks/FormGroup/FormGroupTextarea.tsx
|
|
67
|
+
// src/blocks/FormGroup/FormGroupTextarea.tsx
|
|
73
68
|
const FormGroupTextarea = (props) => {
|
|
74
69
|
const { state } = useFormGroupContext();
|
|
75
70
|
return /* @__PURE__ */ jsx(Textarea, {
|
|
@@ -77,8 +72,7 @@ const FormGroupTextarea = (props) => {
|
|
|
77
72
|
...props
|
|
78
73
|
});
|
|
79
74
|
};
|
|
80
|
-
|
|
81
|
-
//#region src/blocks/FormGroup/FormGroupTextInput.tsx
|
|
75
|
+
// src/blocks/FormGroup/FormGroupTextInput.tsx
|
|
82
76
|
const FormGroupTextInput = ({ ref, ...props }) => {
|
|
83
77
|
const { state } = useFormGroupContext();
|
|
84
78
|
return /* @__PURE__ */ jsx(TextInput, {
|
|
@@ -87,8 +81,7 @@ const FormGroupTextInput = ({ ref, ...props }) => {
|
|
|
87
81
|
ref
|
|
88
82
|
});
|
|
89
83
|
};
|
|
90
|
-
|
|
91
|
-
//#region src/blocks/FormGroup/FormGroup.tsx
|
|
84
|
+
// src/blocks/FormGroup/FormGroup.tsx
|
|
92
85
|
/**
|
|
93
86
|
* Label + input + help/error text for one field, with shared validation state.
|
|
94
87
|
*
|
|
@@ -112,7 +105,6 @@ FormGroup.TextInput = FormGroupTextInput;
|
|
|
112
105
|
FormGroup.NumberInput = FormGroupNumberInput;
|
|
113
106
|
FormGroup.ColorInput = FormGroupColorInput;
|
|
114
107
|
FormGroup.Textarea = FormGroupTextarea;
|
|
115
|
-
//#endregion
|
|
116
108
|
export { FormGroup };
|
|
117
109
|
|
|
118
|
-
//# sourceMappingURL=FormGroup-
|
|
110
|
+
//# sourceMappingURL=FormGroup-QJB21LKp.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormGroup-
|
|
1
|
+
{"version":3,"file":"FormGroup-QJB21LKp.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 * TanStack Form errors: strings or `{ message }` objects; several render as a list.\n * Ignored when `children` is provided.\n */\n errors?: readonly (string | { message?: string } | undefined)[];\n};\n\nconst toMessage = (entry: string | { message?: string } | undefined): string | undefined =>\n typeof entry === 'string' ? entry : entry?.message;\n\n/**\n * Field validation error.\n *\n * - `role=\"alert\"` announces it even when focus is elsewhere (e.g. on submit).\n * - A `<div>`, not `<p>`, so several errors can render 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 schema on both `onChange` and `onBlur` yields the same message twice.\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 // Unique after the dedupe above.\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 * - `state` propagates via context to nested inputs.\n * - `FormGroup.Help` reacts only to \"warning\"; errors render through `FormGroup.Error`.\n */\ntype FormGroupProps = ComponentPropsWithRef<'div'> & FormGroupContext;\n\n/**\n * Label + input + help/error text for one field, with shared validation state.\n *\n * - **Use:** a single field outside `useAppForm`.\n * - **Don't use:** for a full form — `useAppForm` from `blocks/Form` composes `FormGroup` itself.\n * - **Composition:** `Label`, one `FormGroup.*Input` / `Textarea`, then optional `Help` or `Error`.\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;;ACEA,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;EAGrB,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,YAEb,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;;ACxCA,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;;;;;;;;;ACeA,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,19 +1,18 @@
|
|
|
1
|
-
import { cn } from "./classNames-
|
|
2
|
-
import { ChevronLeft } from "./icons-
|
|
3
|
-
import { Button } from "./Button-
|
|
1
|
+
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
|
+
import { ChevronLeft } from "./icons-DDR9dFSr.js";
|
|
3
|
+
import { Button } from "./Button-DbvGzEDb.js";
|
|
4
4
|
import { Truncated } from "./internal/components/Truncated.js";
|
|
5
5
|
import { useEffect, useMemo, useRef } from "react";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { createPortal } from "react-dom";
|
|
8
|
-
|
|
8
|
+
// src/components/FullScreenModal/FullScreenModalBody.tsx
|
|
9
9
|
const FullScreenModalBody = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
10
10
|
ref,
|
|
11
11
|
className: cn("tw:flex-1 tw:min-h-0 tw:overflow-auto", className),
|
|
12
12
|
...props,
|
|
13
13
|
children
|
|
14
14
|
});
|
|
15
|
-
|
|
16
|
-
//#region src/components/FullScreenModal/FullScreenModalHeader.tsx
|
|
15
|
+
// src/components/FullScreenModal/FullScreenModalHeader.tsx
|
|
17
16
|
const DEFAULT_TITLE_STYLES = "tw:text-2xl tw:leading-8 tw:font-normal tw:text-foreground tw:overflow-hidden";
|
|
18
17
|
const FullScreenModalHeader = ({ title, titleClassName, titleWrapperClassName, defaultTitleStyles = true, isTitleWithIcon = false, children, onClose, className, showPreviousTitle = true, ...props }) => {
|
|
19
18
|
const previousTitle = useMemo(() => {
|
|
@@ -53,8 +52,7 @@ const FullScreenModalHeader = ({ title, titleClassName, titleWrapperClassName, d
|
|
|
53
52
|
}), children]
|
|
54
53
|
});
|
|
55
54
|
};
|
|
56
|
-
|
|
57
|
-
//#region src/components/FullScreenModal/FullScreenModalRoot.tsx
|
|
55
|
+
// src/components/FullScreenModal/FullScreenModalRoot.tsx
|
|
58
56
|
const BODY_LOCK_CLASS = "full-screen-modal-open";
|
|
59
57
|
/** `<body>`'s own inline `overflow`, from before the first open modal locked it. */
|
|
60
58
|
let overflowBeforeLock = "";
|
|
@@ -129,13 +127,11 @@ const FullScreenModalRoot = ({ children, className, lockBodyScroll = true, onEsc
|
|
|
129
127
|
children
|
|
130
128
|
}), document.body);
|
|
131
129
|
};
|
|
132
|
-
|
|
133
|
-
//#region src/components/FullScreenModal/FullScreenModal.tsx
|
|
130
|
+
// src/components/FullScreenModal/FullScreenModal.tsx
|
|
134
131
|
const FullScreenModal = Object.assign(FullScreenModalRoot, {
|
|
135
132
|
Header: FullScreenModalHeader,
|
|
136
133
|
Body: FullScreenModalBody
|
|
137
134
|
});
|
|
138
|
-
//#endregion
|
|
139
135
|
export { FullScreenModal, FullScreenModalBody, FullScreenModalHeader };
|
|
140
136
|
|
|
141
|
-
//# sourceMappingURL=FullScreenModal-
|
|
137
|
+
//# sourceMappingURL=FullScreenModal-RzY5XxiG.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FullScreenModal-DAvvlGOz.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';\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\n/** `<body>`'s own inline `overflow`, from before the first open modal locked it. */\nlet overflowBeforeLock = '';\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\n /**\n * Locks the page's scroll while this modal is open with `lockBodyScroll`.\n *\n * - Stays locked until the last locking modal closes; `lockBodyScroll={false}` ones don't count.\n * - Hands `<body>` back the inline `overflow` it had before the first lock.\n */\n useEffect(() => {\n if (!lockBodyScroll) return;\n const modalElement = modalRef.current;\n\n if (!document.body.classList.contains(BODY_LOCK_CLASS)) {\n overflowBeforeLock = document.body.style.overflow;\n }\n document.body.classList.add(BODY_LOCK_CLASS);\n document.body.style.overflow = 'hidden';\n\n return () => {\n // Exclude this modal: it is still in the DOM when `lockBodyScroll` flips to false.\n const hasOtherLockingModals = Array.from(\n document.querySelectorAll('[data-fullscreen-modal-lock]'),\n ).some((el) => el !== modalElement);\n if (hasOtherLockingModals) return;\n\n document.body.classList.remove(BODY_LOCK_CLASS);\n document.body.style.overflow = overflowBeforeLock;\n };\n }, [lockBodyScroll]);\n\n /**\n * The element focused when this modal first rendered.\n *\n * - Read during render: a child's `autoFocus` lands at commit, before any effect (layout too).\n */\n const openerRef = useRef<Element | null>(null);\n openerRef.current ??= document.activeElement;\n\n /**\n * Moves focus into the modal on open and back to the opener on close.\n *\n * - Needed for Escape: `onEscapeKeyDown` only fires while focus is inside.\n * - Skipped when the content already autofocused its own field.\n * - Not a focus trap: trapping or `inert` would need this element to own the background.\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 only dismisses the modal it was pressed in.\n *\n * - React bubbles a nested (portalled) modal's Escape up to the outer one too.\n * - The DOM target check filters it: the inner modal is the outer's sibling, not a descendant.\n * - Not `stopPropagation`: it would also stop the native event at `document.body`, cutting off\n * `document`-level `keydown` handlers (kbc-ui's wrapper closes from one).\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-fullscreen-modal-lock={lockBodyScroll || undefined}\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 // `text-foreground` travels with the background: portalled to `document.body`,\n // the modal inherits no app-level foreground.\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
|
+
{"version":3,"file":"FullScreenModal-RzY5XxiG.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';\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\n/** `<body>`'s own inline `overflow`, from before the first open modal locked it. */\nlet overflowBeforeLock = '';\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\n /**\n * Locks the page's scroll while this modal is open with `lockBodyScroll`.\n *\n * - Stays locked until the last locking modal closes; `lockBodyScroll={false}` ones don't count.\n * - Hands `<body>` back the inline `overflow` it had before the first lock.\n */\n useEffect(() => {\n if (!lockBodyScroll) return;\n const modalElement = modalRef.current;\n\n if (!document.body.classList.contains(BODY_LOCK_CLASS)) {\n overflowBeforeLock = document.body.style.overflow;\n }\n document.body.classList.add(BODY_LOCK_CLASS);\n document.body.style.overflow = 'hidden';\n\n return () => {\n // Exclude this modal: it is still in the DOM when `lockBodyScroll` flips to false.\n const hasOtherLockingModals = Array.from(\n document.querySelectorAll('[data-fullscreen-modal-lock]'),\n ).some((el) => el !== modalElement);\n if (hasOtherLockingModals) return;\n\n document.body.classList.remove(BODY_LOCK_CLASS);\n document.body.style.overflow = overflowBeforeLock;\n };\n }, [lockBodyScroll]);\n\n /**\n * The element focused when this modal first rendered.\n *\n * - Read during render: a child's `autoFocus` lands at commit, before any effect (layout too).\n */\n const openerRef = useRef<Element | null>(null);\n openerRef.current ??= document.activeElement;\n\n /**\n * Moves focus into the modal on open and back to the opener on close.\n *\n * - Needed for Escape: `onEscapeKeyDown` only fires while focus is inside.\n * - Skipped when the content already autofocused its own field.\n * - Not a focus trap: trapping or `inert` would need this element to own the background.\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 only dismisses the modal it was pressed in.\n *\n * - React bubbles a nested (portalled) modal's Escape up to the outer one too.\n * - The DOM target check filters it: the inner modal is the outer's sibling, not a descendant.\n * - Not `stopPropagation`: it would also stop the native event at `document.body`, cutting off\n * `document`-level `keydown` handlers (kbc-ui's wrapper closes from one).\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-fullscreen-modal-lock={lockBodyScroll || undefined}\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 // `text-foreground` travels with the background: portalled to `document.body`,\n // the modal inherits no app-level foreground.\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,7 +1,7 @@
|
|
|
1
|
-
import { cn } from "./classNames-
|
|
1
|
+
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Content, Portal, Root, Trigger } from "@radix-ui/react-hover-card";
|
|
4
|
-
|
|
4
|
+
// src/components/HoverCard/HoverCardContent.tsx
|
|
5
5
|
const HoverCardContent = ({ ref, className, align = "center", sideOffset = 4, children, ...props }) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, {
|
|
6
6
|
ref,
|
|
7
7
|
align,
|
|
@@ -11,8 +11,7 @@ const HoverCardContent = ({ ref, className, align = "center", sideOffset = 4, ch
|
|
|
11
11
|
...props,
|
|
12
12
|
children
|
|
13
13
|
}) });
|
|
14
|
-
|
|
15
|
-
//#region src/components/HoverCard/HoverCard.tsx
|
|
14
|
+
// src/components/HoverCard/HoverCard.tsx
|
|
16
15
|
const HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE__ */ jsx(Root, {
|
|
17
16
|
...rest,
|
|
18
17
|
openDelay,
|
|
@@ -20,7 +19,6 @@ const HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE
|
|
|
20
19
|
});
|
|
21
20
|
HoverCard.Content = HoverCardContent;
|
|
22
21
|
HoverCard.Trigger = Trigger;
|
|
23
|
-
//#endregion
|
|
24
22
|
export { HoverCard };
|
|
25
23
|
|
|
26
|
-
//# sourceMappingURL=HoverCard-
|
|
24
|
+
//# sourceMappingURL=HoverCard-OGWKRXJ7.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard-
|
|
1
|
+
{"version":3,"file":"HoverCard-OGWKRXJ7.js","names":[],"sources":["../src/components/HoverCard/HoverCardContent.tsx","../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-hover-card';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Content>;\n\nexport const HoverCardContent = ({\n ref,\n className,\n align = 'center',\n sideOffset = 4,\n children,\n ...props\n}: Props) => (\n <Portal>\n <Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n data-slot=\"hover-card-content\"\n className={cn(\n 'tailwindcss-preflight',\n 'tw:z-overlay',\n\n // border\n 'tw:box-border',\n 'tw:border',\n 'tw:rounded-popover',\n\n // sizing\n 'tw:min-w-32',\n 'tw:origin-(--radix-hover-card-content-transform-origin)',\n 'tw:max-h-[var(--radix-hover-card-content-available-height)]',\n\n // padding + shared shadow\n 'tw:p-4',\n 'tw:shadow-md',\n\n // semantic floating-panel tokens\n 'tw:border-solid tw:border-border tw:bg-popover tw:text-popover-foreground',\n\n // directional animations\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\n\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 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n\n className,\n )}\n {...props}\n >\n {children}\n </Content>\n </Portal>\n);\n","import type { ComponentProps } from 'react';\nimport { Root, Trigger } from '@radix-ui/react-hover-card';\n\nimport { HoverCardContent } from './HoverCardContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }: Props) => (\n <Root {...rest} openDelay={openDelay} closeDelay={closeDelay} />\n);\n\nHoverCard.Content = HoverCardContent;\nHoverCard.Trigger = Trigger;\n"],"mappings":";;;;AAOA,MAAa,oBAAoB,EAC/B,KACA,WACA,QAAQ,UACR,aAAa,GACb,UACA,GAAG,YAEH,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;CACO;CACE;CACK;CACZ,aAAU;CACV,WAAW,GACT,yBACA,gBAGA,iBACA,aACA,sBAGA,eACA,2DACA,+DAGA,UACA,gBAGA,6EAGA,6CACA,6CACA,6CACA,6CAGA,mCACA,kCACA,mCACA,sCACA,qCACA,sCAGA,qDACA,uBAEA,SACF;CACA,GAAI;CAEH;AACM,CAAA,EACH,CAAA;;AC3DV,MAAa,aAAa,EAAE,YAAY,KAAK,aAAa,KAAK,GAAG,WAChE,oBAAC,MAAD;CAAM,GAAI;CAAiB;CAAuB;AAAa,CAAA;AAGjE,UAAU,UAAU;AACpB,UAAU,UAAU"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { cn } from "./classNames-
|
|
2
|
-
import { Tooltip } from "./utils-
|
|
3
|
-
import { Check, Loader2, X } from "./icons-
|
|
4
|
-
import { Button } from "./Button-
|
|
5
|
-
import { Kbd, keys } from "./Kbd-
|
|
1
|
+
import { cn } from "./classNames-DkX30VJU.js";
|
|
2
|
+
import { Tooltip } from "./utils-DjFceY3H.js";
|
|
3
|
+
import { Check, Loader2, X } from "./icons-DDR9dFSr.js";
|
|
4
|
+
import { Button } from "./Button-DbvGzEDb.js";
|
|
5
|
+
import { Kbd, keys } from "./Kbd-BprYCICe.js";
|
|
6
6
|
import { useAutosizeInput } from "./internal/hooks/useAutosizeInput.js";
|
|
7
7
|
import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
|
|
8
8
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
|
|
9
|
+
// src/blocks/InlineEdit/InlineEdit.tsx
|
|
10
10
|
/** A sized `fill` row at least this wide shows Save / Cancel as text; a narrower one as icons. */
|
|
11
11
|
const LABELLED_BUTTONS_MIN_WIDTH = 480;
|
|
12
12
|
/** Below this a `multiline` field keeps the row and Save / Cancel move under it. */
|
|
@@ -360,7 +360,6 @@ const InlineEdit = ({ value, onChange, onSubmit, onCancel, isEditing, onEditStar
|
|
|
360
360
|
]
|
|
361
361
|
});
|
|
362
362
|
};
|
|
363
|
-
//#endregion
|
|
364
363
|
export { InlineEdit };
|
|
365
364
|
|
|
366
|
-
//# sourceMappingURL=InlineEdit-
|
|
365
|
+
//# sourceMappingURL=InlineEdit-CXL0ZslO.js.map
|