@keboola/design 11.3.0 → 11.5.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 +208 -1
- package/CHANGELOG.md +528 -0
- package/COMPONENT-API.md +68 -46
- package/dist/{AIKit-DaFT7p92.js → AIKit-CNX6aiKm.js} +338 -113
- package/dist/AIKit-CNX6aiKm.js.map +1 -0
- package/dist/{Alert-CseY3yAj.js → Alert-Ba5b2YPq.js} +3 -3
- package/dist/{Alert-CseY3yAj.js.map → Alert-Ba5b2YPq.js.map} +1 -1
- package/dist/{AlertModal-DQAGpsEy.js → AlertModal-BGJdaRRj.js} +3 -3
- package/dist/{AlertModal-DQAGpsEy.js.map → AlertModal-BGJdaRRj.js.map} +1 -1
- package/dist/{AppShell-BUoxM3fv.js → AppShell-DRgJxpXW.js} +2 -2
- package/dist/{AppShell-BUoxM3fv.js.map → AppShell-DRgJxpXW.js.map} +1 -1
- package/dist/{Badge-Ch26CXoP.js → Badge-D0pXdekt.js} +2 -2
- package/dist/Badge-D0pXdekt.js.map +1 -0
- package/dist/{BrandEditor-BnTLMRMp.js → BrandEditor-CSANsxUz.js} +8 -8
- package/dist/{BrandEditor-BnTLMRMp.js.map → BrandEditor-CSANsxUz.js.map} +1 -1
- package/dist/{BrandLogo-V2pRUAeO.js → BrandLogo-CoKBk4MI.js} +5 -5
- package/dist/BrandLogo-CoKBk4MI.js.map +1 -0
- package/dist/{Breadcrumb-CQTPn_KB.js → Breadcrumb-g_xn_-Nf.js} +3 -3
- package/dist/{Breadcrumb-CQTPn_KB.js.map → Breadcrumb-g_xn_-Nf.js.map} +1 -1
- package/dist/{Button-CPsEQuTN.js → Button-DsRrU5F1.js} +6 -5
- package/dist/Button-DsRrU5F1.js.map +1 -0
- package/dist/{Card-Cd5HSBmv.js → Card-Dyo7055Q.js} +2 -2
- package/dist/{Card-Cd5HSBmv.js.map → Card-Dyo7055Q.js.map} +1 -1
- package/dist/{Checkbox-5VNCcV7E.js → Checkbox-CUIn2jap.js} +3 -3
- package/dist/{Checkbox-5VNCcV7E.js.map → Checkbox-CUIn2jap.js.map} +1 -1
- package/dist/{Clipboard-B7rckqV_.js → Clipboard-BTW6C-b_.js} +2 -2
- package/dist/{Clipboard-B7rckqV_.js.map → Clipboard-BTW6C-b_.js.map} +1 -1
- package/dist/{ClipboardButton-CQ6Aewpg.js → ClipboardButton-CwZJdRaz.js} +3 -3
- package/dist/{ClipboardButton-CQ6Aewpg.js.map → ClipboardButton-CwZJdRaz.js.map} +1 -1
- package/dist/{CodeEditor-CUse8znx.js → CodeEditor-C9zy7PxK.js} +16 -27
- package/dist/CodeEditor-C9zy7PxK.js.map +1 -0
- package/dist/{ColorInput-Q1D9Vcc_.js → ColorInput-BZV-u_94.js} +3 -3
- package/dist/{ColorInput-Q1D9Vcc_.js.map → ColorInput-BZV-u_94.js.map} +1 -1
- package/dist/{ColorModeSwitch-B5PXCVqB.js → ColorModeSwitch-CsWLiTBX.js} +3 -3
- package/dist/{ColorModeSwitch-B5PXCVqB.js.map → ColorModeSwitch-CsWLiTBX.js.map} +1 -1
- package/dist/{Combobox-CyoRA7oY.js → Combobox-BfIfaVMA.js} +285 -109
- package/dist/Combobox-BfIfaVMA.js.map +1 -0
- package/dist/{Command-Ds68v2rX.js → Command-Bfa1kpbt.js} +6 -6
- package/dist/{Command-Ds68v2rX.js.map → Command-Bfa1kpbt.js.map} +1 -1
- package/dist/{CopyField-DI66uY_g.js → CopyField-DpT0Ngz1.js} +2 -2
- package/dist/{CopyField-DI66uY_g.js.map → CopyField-DpT0Ngz1.js.map} +1 -1
- package/dist/{DateInput-BPj2pzsn.js → DateInput-DiEd5uCL.js} +4 -4
- package/dist/{DateInput-BPj2pzsn.js.map → DateInput-DiEd5uCL.js.map} +1 -1
- package/dist/{DatePicker-DyEGuW9m.js → DatePicker-nA8YdE84.js} +2 -2
- package/dist/{DatePicker-DyEGuW9m.js.map → DatePicker-nA8YdE84.js.map} +1 -1
- package/dist/{DateRangeInput-u9DxNbHW.js → DateRangeInput-DPfVYchl.js} +4 -4
- package/dist/{DateRangeInput-u9DxNbHW.js.map → DateRangeInput-DPfVYchl.js.map} +1 -1
- package/dist/{DateRangePicker-CYYhX6S7.js → DateRangePicker-DjSUFjh4.js} +5 -5
- package/dist/{DateRangePicker-CYYhX6S7.js.map → DateRangePicker-DjSUFjh4.js.map} +1 -1
- package/dist/{DropdownMenu-DpMEcyCq.js → DropdownMenu-CASr-jgl.js} +2 -2
- package/dist/{DropdownMenu-DpMEcyCq.js.map → DropdownMenu-CASr-jgl.js.map} +1 -1
- package/dist/{FieldItem-qQKGU9lF.js → FieldItem-B7XMmZSz.js} +3 -3
- package/dist/{FieldItem-qQKGU9lF.js.map → FieldItem-B7XMmZSz.js.map} +1 -1
- package/dist/{FileUpload-C336MVnU.js → FileUpload-ABThVZyg.js} +2 -2
- package/dist/{FileUpload-C336MVnU.js.map → FileUpload-ABThVZyg.js.map} +1 -1
- package/dist/{Form-CTygENDc.js → Form-CsttTHn4.js} +8 -8
- package/dist/Form-CsttTHn4.js.map +1 -0
- package/dist/{FormGroup-BnwP0jNu.js → FormGroup-DHvTFdno.js} +3 -3
- package/dist/{FormGroup-BnwP0jNu.js.map → FormGroup-DHvTFdno.js.map} +1 -1
- package/dist/{FullScreenModal-j-M4aPFd.js → FullScreenModal-BvPuYibe.js} +3 -3
- package/dist/{FullScreenModal-j-M4aPFd.js.map → FullScreenModal-BvPuYibe.js.map} +1 -1
- package/dist/{HoverCard-yQq-O49c.js → HoverCard-B9ZMJxjn.js} +2 -2
- package/dist/{HoverCard-yQq-O49c.js.map → HoverCard-B9ZMJxjn.js.map} +1 -1
- package/dist/{InputGroup-D7zlmqPB.js → InputGroup-DcZRlVnN.js} +24 -16
- package/dist/InputGroup-DcZRlVnN.js.map +1 -0
- package/dist/{Kbd-D6LpR7G2.js → Kbd-Cvvt91Q8.js} +14 -4
- package/dist/Kbd-Cvvt91Q8.js.map +1 -0
- package/dist/MarkedText-DNGEUVWc.js +67 -0
- package/dist/MarkedText-DNGEUVWc.js.map +1 -0
- package/dist/{MermaidDiagram-JlvuGcY-.js → MermaidDiagram-CXG5tC6J.js} +19 -18
- package/dist/MermaidDiagram-CXG5tC6J.js.map +1 -0
- package/dist/{Modal-o4ATIexE.js → Modal-Coj-H02o.js} +16 -4
- package/dist/Modal-Coj-H02o.js.map +1 -0
- package/dist/{MultiActionButtonGroup-GTeFk-L8.js → MultiActionButtonGroup-DokHbPgM.js} +3 -3
- package/dist/{MultiActionButtonGroup-GTeFk-L8.js.map → MultiActionButtonGroup-DokHbPgM.js.map} +1 -1
- package/dist/{Navbar-CAQs4BZz.js → Navbar-Liy1TPI7.js} +7 -7
- package/dist/{Navbar-CAQs4BZz.js.map → Navbar-Liy1TPI7.js.map} +1 -1
- package/dist/PageHeader-Q3IpCnQd.js.map +1 -1
- package/dist/{PageToolbar-bG2YtSa3.js → PageToolbar-DExqEYGl.js} +4 -4
- package/dist/{PageToolbar-bG2YtSa3.js.map → PageToolbar-DExqEYGl.js.map} +1 -1
- package/dist/{Pagination-BB3X7ooY.js → Pagination-C_b7Xhey.js} +2 -2
- package/dist/{Pagination-BB3X7ooY.js.map → Pagination-C_b7Xhey.js.map} +1 -1
- package/dist/{Popconfirm-C2Ky5hJO.js → Popconfirm-5pBzT_HQ.js} +12 -13
- package/dist/{Popconfirm-C2Ky5hJO.js.map → Popconfirm-5pBzT_HQ.js.map} +1 -1
- package/dist/{Popover-DsbI2HKu.js → Popover-BEbQrC_P.js} +22 -19
- package/dist/Popover-BEbQrC_P.js.map +1 -0
- package/dist/{RadioGroup-BMxuZEbT.js → RadioGroup-DXPbSj8P.js} +3 -3
- package/dist/{RadioGroup-BMxuZEbT.js.map → RadioGroup-DXPbSj8P.js.map} +1 -1
- package/dist/{Search-DFeECt5D.js → Search-5uQAiNIP.js} +2 -2
- package/dist/{Search-DFeECt5D.js.map → Search-5uQAiNIP.js.map} +1 -1
- package/dist/{SearchInput-CCpdUego.js → SearchInput-D4UgAXJK.js} +3 -3
- package/dist/{SearchInput-CCpdUego.js.map → SearchInput-D4UgAXJK.js.map} +1 -1
- package/dist/{SectionNav-Bw_MVL0_.js → SectionNav-OkKCjSA-.js} +5 -5
- package/dist/{SectionNav-Bw_MVL0_.js.map → SectionNav-OkKCjSA-.js.map} +1 -1
- package/dist/{Select-D6IZVvwL.js → Select-DV3Hak_l.js} +31 -21
- package/dist/Select-DV3Hak_l.js.map +1 -0
- package/dist/{Sheet-BIzs2K2H.js → Sheet-Chf0kX1E.js} +3 -3
- package/dist/{Sheet-BIzs2K2H.js.map → Sheet-Chf0kX1E.js.map} +1 -1
- package/dist/{Sidebar-r1TW4g_b.js → Sidebar-D3cY1kha.js} +48 -22
- package/dist/Sidebar-D3cY1kha.js.map +1 -0
- package/dist/{Slider-CjxyfEty.js → Slider-CRf-bB4y.js} +3 -3
- package/dist/{Slider-CjxyfEty.js.map → Slider-CRf-bB4y.js.map} +1 -1
- package/dist/{Switch-BueTV03C.js → Switch-B0WdGSjz.js} +8 -8
- package/dist/{Switch-BueTV03C.js.map → Switch-B0WdGSjz.js.map} +1 -1
- package/dist/{Tabs-l72-WuhK.js → Tabs-eB974xJf.js} +2 -2
- package/dist/{Tabs-l72-WuhK.js.map → Tabs-eB974xJf.js.map} +1 -1
- package/dist/{TextInput-DhdRk8qm.js → TextInput-DH5SkbsE.js} +3 -3
- package/dist/{TextInput-DhdRk8qm.js.map → TextInput-DH5SkbsE.js.map} +1 -1
- package/dist/{ThemeProvider-DZfGdf1v.js → ThemeProvider-2RMdVGxO.js} +95 -15
- package/dist/ThemeProvider-2RMdVGxO.js.map +1 -0
- package/dist/{TimePicker-B6d2rAbX.js → TimePicker-BGeqc-Ed.js} +2 -2
- package/dist/{TimePicker-B6d2rAbX.js.map → TimePicker-BGeqc-Ed.js.map} +1 -1
- package/dist/{Timeline-6btyJl4D.js → Timeline-BG5Xogxh.js} +11 -11
- package/dist/{Timeline-6btyJl4D.js.map → Timeline-BG5Xogxh.js.map} +1 -1
- package/dist/{Toast-CxXUulYN.js → Toast-Dr6Uw7ao.js} +2 -2
- package/dist/{Toast-CxXUulYN.js.map → Toast-Dr6Uw7ao.js.map} +1 -1
- package/dist/{Workbench-BzE-Vvd9.js → Workbench-UR2FBC7I.js} +3 -1
- package/dist/Workbench-UR2FBC7I.js.map +1 -0
- package/dist/{ZoomableSvg-CNIzRHKH.js → ZoomableSvg-pooPb1Cu.js} +4 -4
- package/dist/{ZoomableSvg-CNIzRHKH.js.map → ZoomableSvg-pooPb1Cu.js.map} +1 -1
- package/dist/{context-BrNtMc1H.js → context-D7X470dy.js} +4 -3
- package/dist/context-D7X470dy.js.map +1 -0
- package/dist/{defaults-CTfvj2KB.js → defaults-i_xG2F_1.js} +2 -4
- package/dist/defaults-i_xG2F_1.js.map +1 -0
- package/dist/editors.js +5 -5
- package/dist/findLiteralMatches-BGBw8Vbl.js +62 -0
- package/dist/findLiteralMatches-BGBw8Vbl.js.map +1 -0
- package/dist/flint.js +134 -8
- package/dist/flint.js.map +1 -1
- package/dist/index.d.ts +1118 -566
- package/dist/index.js +64 -62
- package/dist/internal/blocks/AIKit.js +2 -2
- package/dist/internal/blocks/AppShell.js +1 -1
- package/dist/internal/blocks/AuthLayout.js +118 -0
- package/dist/internal/blocks/AuthLayout.js.map +1 -0
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ChartPanel.js +1 -1
- package/dist/internal/blocks/ClipboardButton.js +1 -1
- package/dist/internal/blocks/ColorInput.js +1 -1
- package/dist/internal/blocks/ColorModeSwitch.js +1 -1
- package/dist/internal/blocks/Command.js +1 -1
- package/dist/internal/blocks/CopyField.js +1 -1
- package/dist/internal/blocks/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
- package/dist/internal/blocks/ErrorState.js +1 -1
- package/dist/internal/blocks/ExportMenu.js +5 -5
- package/dist/internal/blocks/ExportMenu.js.map +1 -1
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +1 -1
- package/dist/internal/blocks/Form.js +1 -1
- package/dist/internal/blocks/FormGroup.js +1 -1
- package/dist/internal/blocks/MultiActionButtonGroup.js +1 -1
- package/dist/internal/blocks/MultiCombobox.js +116 -54
- package/dist/internal/blocks/MultiCombobox.js.map +1 -1
- package/dist/internal/blocks/NumberInput.js +1 -1
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +2 -2
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +3 -3
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +2 -2
- package/dist/internal/blocks/StatCard.js +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +1 -1
- package/dist/internal/blocks/TimeInput.js +3 -3
- package/dist/internal/components/Alert.js +1 -1
- package/dist/internal/components/AlertModal.js +1 -1
- package/dist/internal/components/Avatar.js +1 -1
- package/dist/internal/components/Badge.js +1 -1
- package/dist/internal/components/BrandLogo.js +1 -1
- package/dist/internal/components/Breadcrumb.js +1 -1
- package/dist/internal/components/Button.js +1 -1
- package/dist/internal/components/Card.js +1 -1
- package/dist/internal/components/Checkbox.js +1 -1
- package/dist/internal/components/Clipboard.js +1 -1
- package/dist/internal/components/CollapsiblePanel.js +1 -1
- package/dist/internal/components/Combobox.js +2 -2
- package/dist/internal/components/DatePicker.js +1 -1
- package/dist/internal/components/DateRangePicker.js +1 -1
- package/dist/internal/components/DropdownMenu.js +1 -1
- package/dist/internal/components/FileUpload.js +1 -1
- package/dist/internal/components/FullScreenModal.js +1 -1
- package/dist/internal/components/HoverCard.js +1 -1
- package/dist/internal/components/InputGroup.js +1 -1
- package/dist/internal/components/Kbd.js +1 -1
- package/dist/internal/components/MarkedText.js +1 -1
- package/dist/internal/components/Modal.js +1 -1
- package/dist/internal/components/Navbar.js +1 -1
- package/dist/internal/components/Pagination.js +1 -1
- package/dist/internal/components/Popconfirm.js +1 -1
- package/dist/internal/components/Popover.js +1 -1
- package/dist/internal/components/RadioGroup.js +1 -1
- package/dist/internal/components/Search.js +1 -1
- package/dist/internal/components/Select.js +1 -1
- package/dist/internal/components/Sheet.js +1 -1
- package/dist/internal/components/Sidebar.js +1 -1
- package/dist/internal/components/Slider.js +1 -1
- package/dist/internal/components/Switch.js +1 -1
- package/dist/internal/components/Tabs.js +1 -1
- package/dist/internal/components/ThemeProvider.js +4 -4
- package/dist/internal/components/TimePicker.js +1 -1
- package/dist/internal/components/Timeline.js +1 -1
- package/dist/internal/components/Toast.js +2 -2
- package/dist/internal/components/Toggle.js +3 -3
- package/dist/internal/components/Toggle.js.map +1 -1
- package/dist/internal/components/Tooltip.js +1 -1
- package/dist/internal/components/Truncated.js +1 -1
- package/dist/internal/components/Workbench.js +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/utils.js +3 -3
- package/dist/markdown-editor.js +32 -26
- package/dist/markdown-editor.js.map +1 -1
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.js +24 -25
- package/dist/rjsf.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/testing.js +4 -4
- package/dist/testing.js.map +1 -1
- package/dist/{useColorSchemeState-BJEk6esG.js → themeScopeContext-D7fSyb06.js} +17 -4
- package/dist/themeScopeContext-D7fSyb06.js.map +1 -0
- package/dist/{themeTokens-7T1AFLhq.js → themeTokens-qP1-55O7.js} +38 -11
- package/dist/themeTokens-qP1-55O7.js.map +1 -0
- package/dist/{toast-BweSoKn3.js → toast-DIC0iNRf.js} +2 -2
- package/dist/{toast-BweSoKn3.js.map → toast-DIC0iNRf.js.map} +1 -1
- package/dist/{utils-B-g7d_Jb.js → utils-DSvrhU8E.js} +7 -3
- package/dist/{utils-B-g7d_Jb.js.map → utils-DSvrhU8E.js.map} +1 -1
- package/dist/vega.d.ts +1 -1
- package/dist/vega.js +3 -3
- package/dist/vega.js.map +1 -1
- package/dist/{vegaTheme-FBXgAdHK.js → vegaTheme-CSvFEMBl.js} +6 -6
- package/dist/vegaTheme-CSvFEMBl.js.map +1 -0
- package/package.json +12 -10
- package/src/styles.css +3 -0
- package/dist/AIKit-DaFT7p92.js.map +0 -1
- package/dist/Badge-Ch26CXoP.js.map +0 -1
- package/dist/BrandLogo-V2pRUAeO.js.map +0 -1
- package/dist/Button-CPsEQuTN.js.map +0 -1
- package/dist/CodeEditor-CUse8znx.js.map +0 -1
- package/dist/Combobox-CyoRA7oY.js.map +0 -1
- package/dist/Form-CTygENDc.js.map +0 -1
- package/dist/InputGroup-D7zlmqPB.js.map +0 -1
- package/dist/Kbd-D6LpR7G2.js.map +0 -1
- package/dist/MarkedText-Ckbft5mw.js +0 -44
- package/dist/MarkedText-Ckbft5mw.js.map +0 -1
- package/dist/MermaidDiagram-JlvuGcY-.js.map +0 -1
- package/dist/Modal-o4ATIexE.js.map +0 -1
- package/dist/Popover-DsbI2HKu.js.map +0 -1
- package/dist/Select-D6IZVvwL.js.map +0 -1
- package/dist/Sidebar-r1TW4g_b.js.map +0 -1
- package/dist/ThemeProvider-DZfGdf1v.js.map +0 -1
- package/dist/Workbench-BzE-Vvd9.js.map +0 -1
- package/dist/context-BrNtMc1H.js.map +0 -1
- package/dist/defaults-CTfvj2KB.js.map +0 -1
- package/dist/escapeStringRegexp-8MxP2knR.js +0 -6
- package/dist/escapeStringRegexp-8MxP2knR.js.map +0 -1
- package/dist/themeTokens-7T1AFLhq.js.map +0 -1
- package/dist/useColorSchemeState-BJEk6esG.js.map +0 -1
- package/dist/vegaTheme-FBXgAdHK.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
2
|
import { ChevronLeft, ChevronRight, Ellipsis } from "./icons-Cek151jC.js";
|
|
3
|
-
import { Button } from "./Button-
|
|
3
|
+
import { Button } from "./Button-DsRrU5F1.js";
|
|
4
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/Pagination/PaginationButton.tsx
|
|
6
6
|
const PaginationButton = ({ ref, active: isActive = false, className, children, size = "icon", ...props }) => /* @__PURE__ */ jsx(Button, {
|
|
@@ -67,4 +67,4 @@ Pagination.Ellipsis = PaginationEllipsis;
|
|
|
67
67
|
//#endregion
|
|
68
68
|
export { Pagination };
|
|
69
69
|
|
|
70
|
-
//# sourceMappingURL=Pagination-
|
|
70
|
+
//# sourceMappingURL=Pagination-C_b7Xhey.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination-
|
|
1
|
+
{"version":3,"file":"Pagination-C_b7Xhey.js","names":[],"sources":["../src/components/Pagination/PaginationButton.tsx","../src/components/Pagination/PaginationContent.tsx","../src/components/Pagination/PaginationEllipsis.tsx","../src/components/Pagination/PaginationItem.tsx","../src/components/Pagination/PaginationNext.tsx","../src/components/Pagination/PaginationPrevious.tsx","../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\n\ntype Props = {\n active?: boolean;\n} & Omit<ComponentProps<typeof Button>, 'variant'>;\n\nexport const PaginationButton = ({\n ref,\n active: isActive = false,\n className,\n children,\n size = 'icon',\n ...props\n}: Props) => (\n <Button\n {...props}\n ref={ref}\n variant=\"invisible\"\n size={size}\n data-slot=\"pagination-link\"\n aria-current={isActive ? 'page' : undefined}\n data-active={isActive}\n className={cn(\n 'tw:data-[active=true]:bg-accent',\n 'tw:data-[active=true]:text-accent-foreground',\n 'tw:data-[active=true]:border-accent',\n className,\n )}\n >\n {children}\n </Button>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'ul'>;\n\nexport const PaginationContent = ({ className, ...props }: Props) => (\n <ul\n {...props}\n className={cn('tw:flex', 'tw:flex-row', 'tw:items-center', 'tw:gap-1', className)}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { Ellipsis } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'span'>;\n\nexport const PaginationEllipsis = ({ className, ...props }: Props) => (\n <span\n aria-hidden=\"true\"\n className={cn(\n // layout\n 'tw:flex',\n 'tw:p-2.5',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:text-foreground',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-4',\n className,\n )}\n {...props}\n >\n <Ellipsis />\n </span>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'li'>;\n\nexport const PaginationItem = ({ className, ...props }: Props) => (\n <li className={cn('tw:list-none', className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronRight } from '../../icons';\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationNext = ({ children, className, ...props }: Props) => (\n <PaginationButton\n {...props}\n aria-label=\"Go to next page\"\n size=\"medium\"\n className={cn('tw:flex-row-reverse', className)}\n >\n <ChevronRight className=\"tw:size-5\" />\n {children ?? 'Next'}\n </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { ChevronLeft } from '../../icons';\n\nimport { PaginationButton } from './PaginationButton';\n\ntype Props = ComponentProps<typeof PaginationButton>;\n\nexport const PaginationPrevious = ({ children, ...props }: Props) => (\n <PaginationButton {...props} size=\"medium\" aria-label=\"Go to previous page\">\n <ChevronLeft className=\"tw:size-5\" />\n {children ?? 'Previous'}\n </PaginationButton>\n);\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\nimport { PaginationButton } from './PaginationButton';\nimport { PaginationContent } from './PaginationContent';\nimport { PaginationEllipsis } from './PaginationEllipsis';\nimport { PaginationItem } from './PaginationItem';\nimport { PaginationNext } from './PaginationNext';\nimport { PaginationPrevious } from './PaginationPrevious';\n\ntype Props = ComponentProps<'nav'>;\n\nexport const Pagination = ({ className, ...props }: Props) => (\n <nav\n {...props}\n aria-label=\"pagination\"\n className={cn(\n 'tailwindcss-preflight',\n 'tw:mx-auto',\n 'tw:flex',\n 'tw:w-full',\n 'tw:justify-center',\n className,\n )}\n />\n);\n\nPagination.Content = PaginationContent;\nPagination.Item = PaginationItem;\nPagination.Button = PaginationButton;\nPagination.Previous = PaginationPrevious;\nPagination.Next = PaginationNext;\nPagination.Ellipsis = PaginationEllipsis;\n"],"mappings":";;;;;AASA,MAAa,oBAAoB,EAC/B,KACA,QAAQ,WAAW,OACnB,WACA,UACA,OAAO,QACP,GAAG,YAEH,oBAAC,QAAD;CACE,GAAI;CACC;CACL,SAAQ;CACF;CACN,aAAU;CACV,gBAAc,WAAW,SAAS,KAAA;CAClC,eAAa;CACb,WAAW,GACT,mCACA,gDACA,uCACA,SACF;CAEC;AACK,CAAA;;;AC3BV,MAAa,qBAAqB,EAAE,WAAW,GAAG,YAChD,oBAAC,MAAD;CACE,GAAI;CACJ,WAAW,GAAG,WAAW,eAAe,mBAAmB,YAAY,SAAS;AACjF,CAAA;;;ACHH,MAAa,sBAAsB,EAAE,WAAW,GAAG,YACjD,oBAAC,QAAD;CACE,eAAY;CACZ,WAAW,GAET,WACA,YACA,mBACA,qBAEA,sBACA,gDACA,SACF;CACA,GAAI;CAEJ,UAAA,oBAAC,UAAD,CAAW,CAAA;AACP,CAAA;;;AClBR,MAAa,kBAAkB,EAAE,WAAW,GAAG,YAC7C,oBAAC,MAAD;CAAI,WAAW,GAAG,gBAAgB,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACE5D,MAAa,kBAAkB,EAAE,UAAU,WAAW,GAAG,YACvD,qBAAC,kBAAD;CACE,GAAI;CACJ,cAAW;CACX,MAAK;CACL,WAAW,GAAG,uBAAuB,SAAS;CAJhD,UAAA,CAME,oBAAC,cAAD,EAAc,WAAU,YAAa,CAAA,GACpC,YAAY,MACG;;;;ACVpB,MAAa,sBAAsB,EAAE,UAAU,GAAG,YAChD,qBAAC,kBAAD;CAAkB,GAAI;CAAO,MAAK;CAAS,cAAW;CAAtD,UAAA,CACE,oBAAC,aAAD,EAAa,WAAU,YAAa,CAAA,GACnC,YAAY,UACG;;;;ACCpB,MAAa,cAAc,EAAE,WAAW,GAAG,YACzC,oBAAC,OAAD;CACE,GAAI;CACJ,cAAW;CACX,WAAW,GACT,yBACA,cACA,WACA,aACA,qBACA,SACF;AACD,CAAA;AAGH,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,SAAS;AACpB,WAAW,WAAW;AACtB,WAAW,OAAO;AAClB,WAAW,WAAW"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { Button } from "./Button-
|
|
3
|
-
import {
|
|
2
|
+
import { Button } from "./Button-DsRrU5F1.js";
|
|
3
|
+
import { useStableCallback } from "./internal/hooks/useStableCallback.js";
|
|
4
|
+
import { Popover } from "./Popover-BEbQrC_P.js";
|
|
4
5
|
import { Slot } from "@radix-ui/react-slot";
|
|
5
|
-
import { createContext, use, useMemo,
|
|
6
|
+
import { createContext, use, useMemo, useState } from "react";
|
|
6
7
|
import { jsx } from "react/jsx-runtime";
|
|
7
8
|
//#region src/components/Popconfirm/context.ts
|
|
8
9
|
const PopconfirmContext = createContext(null);
|
|
@@ -117,10 +118,8 @@ const noop = () => void 0;
|
|
|
117
118
|
const Popconfirm = ({ children, onConfirm = noop, onCancel = noop, variant = "confirm", enabled = true, onOpenChange = noop, open, skipAsyncWait = false, ...rest }) => {
|
|
118
119
|
const [isLoading, setIsLoading] = useState(false);
|
|
119
120
|
const [isOpen, setIsOpen] = useState(false);
|
|
120
|
-
const
|
|
121
|
-
const
|
|
122
|
-
confirmRef.current = onConfirm;
|
|
123
|
-
cancelRef.current = onCancel;
|
|
121
|
+
const handleConfirm = useStableCallback(onConfirm);
|
|
122
|
+
const handleCancel = useStableCallback(onCancel);
|
|
124
123
|
const handleOnOpenChange = (open) => {
|
|
125
124
|
setIsOpen(open);
|
|
126
125
|
onOpenChange(open);
|
|
@@ -130,20 +129,20 @@ const Popconfirm = ({ children, onConfirm = noop, onCancel = noop, variant = "co
|
|
|
130
129
|
isLoading,
|
|
131
130
|
enabled,
|
|
132
131
|
onConfirm: (event) => {
|
|
133
|
-
const result =
|
|
132
|
+
const result = handleConfirm(event);
|
|
134
133
|
if (!(result instanceof Promise) || skipAsyncWait) return;
|
|
135
134
|
event.preventDefault();
|
|
136
135
|
setIsLoading(true);
|
|
137
136
|
result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));
|
|
138
137
|
},
|
|
139
|
-
onCancel:
|
|
140
|
-
cancelRef.current(event);
|
|
141
|
-
}
|
|
138
|
+
onCancel: handleCancel
|
|
142
139
|
}), [
|
|
143
140
|
variant,
|
|
144
141
|
isLoading,
|
|
145
142
|
enabled,
|
|
146
|
-
skipAsyncWait
|
|
143
|
+
skipAsyncWait,
|
|
144
|
+
handleConfirm,
|
|
145
|
+
handleCancel
|
|
147
146
|
]);
|
|
148
147
|
return /* @__PURE__ */ jsx(Popover, {
|
|
149
148
|
...rest,
|
|
@@ -164,4 +163,4 @@ Popconfirm.Trigger = PopconfirmTrigger;
|
|
|
164
163
|
//#endregion
|
|
165
164
|
export { Popconfirm };
|
|
166
165
|
|
|
167
|
-
//# sourceMappingURL=Popconfirm-
|
|
166
|
+
//# sourceMappingURL=Popconfirm-5pBzT_HQ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popconfirm-C2Ky5hJO.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n variant: 'confirm' | 'danger';\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n enabled: boolean;\n isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n const context = use(PopconfirmContext);\n if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n return context;\n};\n","import type { ComponentProps } from 'react';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmBody = (props: Props) => <div {...props} />;\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onCancel, isLoading } = usePopconfirmContext();\n\n const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onCancel(event);\n };\n\n return (\n <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n {children ?? 'Cancel'}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onConfirm(event);\n };\n\n const defaultLabel = (() => {\n if (children) return children;\n return variant === 'danger' ? 'Delete' : 'Confirm';\n })();\n\n return (\n <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button\n size=\"small\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n {...props}\n ref={ref}\n className={cn('tw:flex-1', className)}\n isLoading={isLoading}\n >\n {defaultLabel}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;\n\nexport const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {\n const { isLoading } = usePopconfirmContext();\n\n const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n if (isLoading) event.preventDefault();\n onInteractOutside?.(event);\n };\n\n return (\n <Popover.Content\n {...props}\n onInteractOutside={handleOnInteractOutside}\n className={cn('tw:flex', 'tw:flex-col', 'tw:gap-3', 'tw:px-4', 'tw:py-3', className)}\n />\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n <div {...props} className={cn('tw:flex tw:gap-2 tw:w-full', className)} />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n const { enabled, onConfirm } = usePopconfirmContext();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!enabled) {\n event.preventDefault();\n onConfirm(event);\n }\n\n onClick?.(event);\n };\n\n return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n children: ReactNode;\n skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n variant = 'confirm',\n enabled = true,\n onOpenChange = noop,\n open,\n skipAsyncWait = false,\n ...rest\n}: Props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const confirmRef = useRef(onConfirm);\n const cancelRef = useRef(onCancel);\n confirmRef.current = onConfirm;\n cancelRef.current = onCancel;\n\n const handleOnOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange(open);\n };\n\n const context = useMemo<PopconfirmContextType>(\n () => ({\n variant,\n isLoading,\n enabled,\n onConfirm: (event) => {\n const result = confirmRef.current(event);\n\n if (!(result instanceof Promise) || skipAsyncWait) return;\n\n // The async confirm's outcome drives the popover.\n // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n // - Resolved closes it; rejected leaves it up so the failure stays visible.\n // - The rejection is deliberately not caught — the host's global handler reports it.\n event.preventDefault();\n setIsLoading(true);\n result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n },\n onCancel: (event) => {\n cancelRef.current(event);\n },\n }),\n [variant, isLoading, enabled, skipAsyncWait],\n );\n\n return (\n <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n </Popover>\n );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popconfirm-5pBzT_HQ.js","names":[],"sources":["../src/components/Popconfirm/context.ts","../src/components/Popconfirm/PopconfirmBody.tsx","../src/components/Popconfirm/PopconfirmCancel.tsx","../src/components/Popconfirm/PopconfirmConfirm.tsx","../src/components/Popconfirm/PopconfirmContent.tsx","../src/components/Popconfirm/PopconfirmFooter.tsx","../src/components/Popconfirm/PopconfirmTrigger.tsx","../src/components/Popconfirm/Popconfirm.tsx"],"sourcesContent":["import { createContext, type MouseEvent, use } from 'react';\n\nexport type PopconfirmContextType = {\n variant: 'confirm' | 'danger';\n onConfirm: (event: MouseEvent<HTMLButtonElement>) => void | Promise<void>;\n onCancel: (event: MouseEvent<HTMLButtonElement>) => void;\n enabled: boolean;\n isLoading: boolean;\n};\n\nconst PopconfirmContext = createContext<PopconfirmContextType | null>(null);\n\nexport const PopconfirmContextProvider = PopconfirmContext;\n\nexport const usePopconfirmContext = () => {\n const context = use(PopconfirmContext);\n if (!context) throw new Error('usePopconfirmContext must be used within a Popconfirm');\n return context;\n};\n","import type { ComponentProps } from 'react';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmBody = (props: Props) => <div {...props} />;\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmCancel = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onCancel, isLoading } = usePopconfirmContext();\n\n const handleClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onCancel(event);\n };\n\n return (\n <Popover.Close asChild onClick={handleClick} disabled={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button variant=\"outline\" size=\"small\" {...props} ref={ref} className={cn(className)}>\n {children ?? 'Cancel'}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport { cn } from '../../utils';\nimport { Button } from '../Button/Button';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype SlotProps = { asChild: true } & ComponentProps<'button'>;\ntype ButtonProps = { asChild?: false; children?: ReactNode } & Omit<\n ComponentProps<typeof Button>,\n 'children' | 'isLoading'\n>;\ntype Props = SlotProps | ButtonProps;\n\nexport const PopconfirmConfirm = ({\n ref,\n onClick,\n children,\n asChild,\n className,\n ...props\n}: Props) => {\n const { onConfirm, variant, isLoading } = usePopconfirmContext();\n\n const handleOnClick: ComponentProps<'button'>['onClick'] = (event) => {\n onClick?.(event);\n onConfirm(event);\n };\n\n const defaultLabel = (() => {\n if (children) return children;\n return variant === 'danger' ? 'Delete' : 'Confirm';\n })();\n\n return (\n <Popover.Close asChild onClick={handleOnClick} disabled={isLoading} data-loading={isLoading}>\n {asChild ? (\n <Slot {...props} ref={ref} className={className}>\n {children}\n </Slot>\n ) : (\n <Button\n size=\"small\"\n variant={variant === 'danger' ? 'danger' : 'primary'}\n {...props}\n ref={ref}\n className={cn('tw:flex-1', className)}\n isLoading={isLoading}\n >\n {defaultLabel}\n </Button>\n )}\n </Popover.Close>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = Omit<ComponentProps<typeof Popover.Content>, 'showArrow'>;\n\nexport const PopconfirmContent = ({ className, onInteractOutside, ...props }: Props) => {\n const { isLoading } = usePopconfirmContext();\n\n const handleOnInteractOutside: Props['onInteractOutside'] = (event) => {\n if (isLoading) event.preventDefault();\n onInteractOutside?.(event);\n };\n\n return (\n <Popover.Content\n {...props}\n onInteractOutside={handleOnInteractOutside}\n className={cn('tw:flex', 'tw:flex-col', 'tw:gap-3', 'tw:px-4', 'tw:py-3', className)}\n />\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const PopconfirmFooter = ({ className, ...props }: Props) => (\n <div {...props} className={cn('tw:flex tw:gap-2 tw:w-full', className)} />\n);\n","import type { ComponentProps, MouseEventHandler } from 'react';\n\nimport { Popover } from '../Popover';\n\nimport { usePopconfirmContext } from './context';\n\ntype Props = ComponentProps<typeof Popover.Trigger>;\n\nexport const PopconfirmTrigger = ({ onClick, ...props }: Props) => {\n const { enabled, onConfirm } = usePopconfirmContext();\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!enabled) {\n event.preventDefault();\n onConfirm(event);\n }\n\n onClick?.(event);\n };\n\n return <Popover.Trigger {...props} onClick={handleClick} />;\n};\n","import { useMemo, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { Popover } from '../Popover';\n\nimport { PopconfirmContextProvider, type PopconfirmContextType } from './context';\nimport { PopconfirmBody } from './PopconfirmBody';\nimport { PopconfirmCancel } from './PopconfirmCancel';\nimport { PopconfirmConfirm } from './PopconfirmConfirm';\nimport { PopconfirmContent } from './PopconfirmContent';\nimport { PopconfirmFooter } from './PopconfirmFooter';\nimport { PopconfirmTrigger } from './PopconfirmTrigger';\n\nconst noop = () => void 0;\n\ntype Props = {\n children: ReactNode;\n skipAsyncWait?: boolean;\n} & ComponentProps<typeof Popover> &\n Omit<Partial<PopconfirmContextType>, 'isLoading'>;\n\nexport const Popconfirm = ({\n children,\n onConfirm = noop,\n onCancel = noop,\n variant = 'confirm',\n enabled = true,\n onOpenChange = noop,\n open,\n skipAsyncWait = false,\n ...rest\n}: Props) => {\n const [isLoading, setIsLoading] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n\n const handleConfirm = useStableCallback(onConfirm);\n const handleCancel = useStableCallback(onCancel);\n\n const handleOnOpenChange = (open: boolean) => {\n setIsOpen(open);\n onOpenChange(open);\n };\n\n const context = useMemo<PopconfirmContextType>(\n () => ({\n variant,\n isLoading,\n enabled,\n onConfirm: (event) => {\n const result = handleConfirm(event);\n\n if (!(result instanceof Promise) || skipAsyncWait) return;\n\n // The async confirm's outcome drives the popover.\n // - `preventDefault` stops the click closing it, so it stays up while the action runs.\n // - Resolved closes it; rejected leaves it up so the failure stays visible.\n // - The rejection is deliberately not caught — the host's global handler reports it.\n event.preventDefault();\n setIsLoading(true);\n result.then(() => setIsOpen(false)).finally(() => setIsLoading(false));\n },\n onCancel: handleCancel,\n }),\n [variant, isLoading, enabled, skipAsyncWait, handleConfirm, handleCancel],\n );\n\n return (\n <Popover {...rest} open={open || isOpen} onOpenChange={handleOnOpenChange}>\n <PopconfirmContextProvider value={context}>{children}</PopconfirmContextProvider>\n </Popover>\n );\n};\n\nPopconfirm.Confirm = PopconfirmConfirm;\nPopconfirm.Cancel = PopconfirmCancel;\nPopconfirm.Footer = PopconfirmFooter;\nPopconfirm.Content = PopconfirmContent;\nPopconfirm.Body = PopconfirmBody;\nPopconfirm.Trigger = PopconfirmTrigger;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { useArgoDesign } from "./context-
|
|
2
|
+
import { useArgoDesign } from "./context-D7X470dy.js";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { Close, Content, Portal, Root, Trigger } from "@radix-ui/react-popover";
|
|
@@ -51,24 +51,27 @@ const variants = cva([
|
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
|
-
const PopoverContent = ({ ref, className, align = "center", sideOffset = 4, matchTriggerWidth = false, children, onEscapeKeyDown, ...props }) => {
|
|
54
|
+
const PopoverContent = ({ ref, className, align = "center", sideOffset = 4, matchTriggerWidth = false, children, onEscapeKeyDown, container, ...props }) => {
|
|
55
55
|
const effectiveVariant = useArgoDesign() ? "argo" : "default";
|
|
56
|
-
return /* @__PURE__ */ jsx(Portal, {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
onEscapeKeyDown
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
56
|
+
return /* @__PURE__ */ jsx(Portal, {
|
|
57
|
+
container,
|
|
58
|
+
children: /* @__PURE__ */ jsx(Content, {
|
|
59
|
+
ref,
|
|
60
|
+
align: matchTriggerWidth ? "start" : align,
|
|
61
|
+
sideOffset,
|
|
62
|
+
className: cn(variants({
|
|
63
|
+
className,
|
|
64
|
+
matchTriggerWidth,
|
|
65
|
+
variant: effectiveVariant
|
|
66
|
+
})),
|
|
67
|
+
onEscapeKeyDown: (event) => {
|
|
68
|
+
event.stopPropagation();
|
|
69
|
+
onEscapeKeyDown?.(event);
|
|
70
|
+
},
|
|
71
|
+
...props,
|
|
72
|
+
children
|
|
73
|
+
})
|
|
74
|
+
});
|
|
72
75
|
};
|
|
73
76
|
//#endregion
|
|
74
77
|
//#region src/components/Popover/Popover.tsx
|
|
@@ -82,4 +85,4 @@ Popover.Close = Close;
|
|
|
82
85
|
//#endregion
|
|
83
86
|
export { Popover };
|
|
84
87
|
|
|
85
|
-
//# sourceMappingURL=Popover-
|
|
88
|
+
//# sourceMappingURL=Popover-BEbQrC_P.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover-BEbQrC_P.js","names":[],"sources":["../src/components/Popover/PopoverContent.tsx","../src/components/Popover/Popover.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst variants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/popover-content',\n 'tw:z-[1055]',\n 'tw:focus-visible:outline-hidden',\n\n // An open Radix Dialog locks `pointer-events: none` on <body>. Popover content\n // is portalled to <body> as a sibling of the dialog, so it inherits the lock\n // and clicks fall through — re-enable pointer events on the content itself\n // (dismiss-on-outside-click still works, it listens on document).\n 'tw:pointer-events-auto',\n\n // sizing\n 'tw:min-w-32',\n 'tw:max-h-[var(--radix-popover-content-available-height)]',\n 'tw:origin-(--radix-popover-content-transform-origin)',\n\n // layout\n 'tw:flex',\n 'tw:flex-col',\n 'tw:overflow-y-auto',\n\n // border\n 'tw:box-border',\n 'tw:border',\n 'tw:border-solid',\n 'tw:border-border',\n 'tw:shadow-lg',\n\n // surface — semantic tokens, so a portalled panel follows the brand and the scheme\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n\n // open animation\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=open]:zoom-in-95',\n\n // closed animation\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // position animation\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n ],\n {\n defaultVariants: {\n matchTriggerWidth: false,\n variant: 'default',\n },\n variants: {\n // Radius is the only thing the surface variants differ in — the panel's colours\n // live in the base array.\n variant: {\n default: ['tw:rounded-md'],\n argo: ['tw:rounded-2xl'],\n },\n matchTriggerWidth: {\n true: ['tw:w-[var(--radix-popover-trigger-width)]'],\n false: [],\n },\n },\n },\n);\n\ntype Props = ComponentProps<typeof Content> &\n Omit<VariantProps<typeof variants>, 'variant'> & {\n /**\n * Where the popover portals to. Defaults to `document.body`; a host that\n * scopes its own theme passes the element that carries it, so the panel is\n * styled by the scope it belongs to rather than the page behind it.\n */\n container?: ComponentProps<typeof Portal>['container'];\n };\n\nexport const PopoverContent = ({\n ref,\n className,\n align = 'center',\n sideOffset = 4,\n matchTriggerWidth = false,\n children,\n onEscapeKeyDown,\n container,\n ...props\n}: Props) => {\n const effectiveVariant: NonNullable<VariantProps<typeof variants>['variant']> = useArgoDesign()\n ? 'argo'\n : 'default';\n return (\n <Portal container={container}>\n <Content\n ref={ref}\n align={matchTriggerWidth ? 'start' : align}\n sideOffset={sideOffset}\n className={cn(variants({ className, matchTriggerWidth, variant: effectiveVariant }))}\n onEscapeKeyDown={(event) => {\n // Stop propagation to prevent parent modals (like FullScreenModal) from closing\n event.stopPropagation();\n onEscapeKeyDown?.(event);\n }}\n {...props}\n >\n {children}\n </Content>\n </Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-popover';\n\nimport { PopoverContent } from './PopoverContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Popover = (props: Props) => <Root {...props} />;\n\n/**\n * Main Layout\n */\nPopover.Content = PopoverContent;\nPopover.Trigger = Trigger;\nPopover.Close = Close;\n"],"mappings":";;;;;;AAQA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAMA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,mBAAmB;EACnB,SAAS;CACX;CACA,UAAU;EAGR,SAAS;GACP,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,gBAAgB;EACzB;EACA,mBAAmB;GACjB,MAAM,CAAC,2CAA2C;GAClD,OAAO,CAAC;EACV;CACF;AACF,CACF;AAYA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,WACA,GAAG,YACQ;CACX,MAAM,mBAA0E,cAAc,IAC1F,SACA;CACJ,OACE,oBAAC,QAAD;EAAmB;EACjB,UAAA,oBAAC,SAAD;GACO;GACL,OAAO,oBAAoB,UAAU;GACzB;GACZ,WAAW,GAAG,SAAS;IAAE;IAAW;IAAmB,SAAS;GAAiB,CAAC,CAAC;GACnF,kBAAkB,UAAU;IAE1B,MAAM,gBAAgB;IACtB,kBAAkB,KAAK;GACzB;GACA,GAAI;GAEH;EACM,CAAA;CACH,CAAA;AAEZ;;;ACrHA,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAClB,QAAQ,QAAQ"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { Tooltip } from "./utils-
|
|
3
|
-
import { useArgoDesign } from "./context-
|
|
2
|
+
import { Tooltip } from "./utils-DSvrhU8E.js";
|
|
3
|
+
import { useArgoDesign } from "./context-D7X470dy.js";
|
|
4
4
|
import { Circle } from "./icons-Cek151jC.js";
|
|
5
5
|
import { Separator } from "./internal/components/Separator.js";
|
|
6
6
|
import { FieldBox } from "./FieldBox-D7DYtX_m.js";
|
|
@@ -230,4 +230,4 @@ RadioGroup.Separator = RadioGroupSeparator;
|
|
|
230
230
|
//#endregion
|
|
231
231
|
export { RadioGroup };
|
|
232
232
|
|
|
233
|
-
//# sourceMappingURL=RadioGroup-
|
|
233
|
+
//# sourceMappingURL=RadioGroup-DXPbSj8P.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup-BMxuZEbT.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/styles.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n variant: Variant;\n orientation: Orientation;\n}>({\n variant: 'radio',\n orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import { cva } from 'class-variance-authority';\n\nexport const radioVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n 'tw:shrink-0',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n 'tw:size-4',\n\n // border\n 'tw:rounded-full',\n 'tw:border',\n 'tw:border-solid',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=unchecked]:border-neutral-200',\n 'tw:data-[state=unchecked]:hover:border-primary',\n 'tw:data-[state=unchecked]:disabled:hover:border-neutral-200',\n\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n\n 'tw:border-input',\n 'tw:transition-colors',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=checked]:not-disabled:hover:bg-primary',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport const radioIndicatorVariants = cva(['tw:size-2.5', 'tw:fill-current'], {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: ['tw:text-primary'],\n argo: ['tw:text-primary-foreground'],\n },\n },\n});\n\nexport const radioItemButtonVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n // layouts\n 'tw:w-full',\n 'tw:px-2',\n 'tw:py-1.5',\n\n // fonts\n 'tw:uppercase',\n 'tw:font-semibold',\n 'tw:font-sans',\n 'tw:text-[11px]',\n 'tw:whitespace-nowrap',\n 'tw:tracking-widest',\n 'tw:leading-[18px]',\n\n // border\n 'tw:border',\n 'tw:border-solid',\n 'tw:rounded',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n 'tw:text-secondary-600',\n 'tw:border-secondary-500',\n\n 'tw:data-[state=unchecked]:hover:bg-secondary-500',\n 'tw:data-[state=unchecked]:hover:text-white',\n\n 'tw:data-[state=unchecked]:disabled:hover:bg-white',\n 'tw:data-[state=unchecked]:disabled:hover:text-secondary-500',\n 'tw:data-[state=checked]:disabled:cursor-not-allowed',\n\n 'tw:data-[state=unchecked]:bg-white',\n 'tw:data-[state=checked]:bg-secondary-500',\n 'tw:data-[state=checked]:text-white',\n 'tw:data-[state=checked]:cursor-default',\n\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-ring',\n 'tw:focus-visible:ring-4',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n 'tw:text-foreground',\n 'tw:border-input',\n 'tw:transition-colors',\n\n // muted filled control surface — gray, distinct from white containers; not the app-background token\n 'tw:data-[state=unchecked]:bg-muted',\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=unchecked]:not-disabled:hover:text-accent-foreground',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=checked]:text-primary-foreground',\n 'tw:data-[state=checked]:not-disabled:cursor-default',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport type RadioStyleVariant = 'default' | 'argo';\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n <Item {...props} className={cn(radioVariants({ variant: styleVariant }), className)}>\n <Indicator className={cn('tw:flex', 'tw:items-center', 'tw:justify-center')}>\n {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)\n so the indicator reads as a solid dot. */}\n <Circle className={radioIndicatorVariants({ variant: styleVariant })} />\n </Indicator>\n </Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const RadioGroupItemButton = ({\n ref,\n className,\n children,\n styleVariant = 'default',\n ...props\n}: Props) => (\n <Item\n ref={ref}\n {...props}\n className={cn(radioItemButtonVariants({ variant: styleVariant }), className)}\n >\n {children}\n </Item>\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { useRadioGroupContext } from './context';\nimport { Radio } from './Radio';\nimport { RadioGroupItemButton } from './RadioGroupItemButton';\n\ntype ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;\n\ntype Props<T extends string = string> = ItemProps & {\n value: T;\n tooltip?: ReactNode;\n tooltipVariant?: TooltipProps['variant'];\n tooltipPlacement?: TooltipProps['placement'];\n description?: ReactNode;\n};\n\nexport const RadioGroupItem = <T extends string = string>({\n children,\n className,\n tooltip,\n tooltipVariant,\n tooltipPlacement,\n description,\n ...props\n}: Props<T>) => {\n const { variant } = useRadioGroupContext();\n const styleVariant = useArgoDesign() ? 'argo' : 'default';\n const id = useId();\n\n const item = (() => {\n if (variant === 'button')\n return (\n <RadioGroupItemButton styleVariant={styleVariant} {...props} className={className}>\n {children}\n </RadioGroupItemButton>\n );\n\n return (\n <FieldBox\n variant={variant === 'radio-block' ? 'boxed' : 'default'}\n htmlFor={id}\n control={<Radio styleVariant={styleVariant} {...props} id={id} />}\n className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n >\n <FieldBox.Title>{children}</FieldBox.Title>\n {description && <FieldBox.Description>{description}</FieldBox.Description>}\n </FieldBox>\n );\n })();\n\n if (!tooltip) {\n return item;\n }\n\n return (\n <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n {item}\n </Tooltip>\n );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n const { orientation } = useRadioGroupContext();\n const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n const size = orientation === 'horizontal' ? '1/2' : 'full';\n const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n variants: {\n orientation: {\n horizontal: ['tw:gap-2'],\n vertical: ['tw:flex-col', 'tw:gap-3'],\n },\n variant: {\n button: [],\n radio: [],\n 'radio-block': ['tw:w-full'],\n },\n },\n});\n\ntype Props<Value> = {\n variant?: Variant;\n orientation?: Orientation;\n onValueChange?: (value: Value) => void;\n value?: Value | null;\n defaultValue?: Value | null;\n} & Omit<\n ComponentProps<typeof RRadioGroup.Root>,\n 'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n variant = 'radio',\n className,\n disabled = false,\n orientation = 'horizontal',\n onValueChange,\n children,\n value,\n defaultValue,\n ...props\n}: Props<Value>) => (\n <RRadioGroup.Root\n {...props}\n onValueChange={onValueChange}\n orientation={orientation}\n className={cn(radioGroupVariants({ orientation, variant, className }))}\n disabled={disabled}\n value={value ?? void 0}\n defaultValue={defaultValue ?? void 0}\n >\n <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RadioGroup-DXPbSj8P.js","names":[],"sources":["../src/components/RadioGroup/context.ts","../src/components/RadioGroup/styles.ts","../src/components/RadioGroup/Radio.tsx","../src/components/RadioGroup/RadioGroupItemButton.tsx","../src/components/RadioGroup/RadioGroupItem.tsx","../src/components/RadioGroup/RadioGroupSeparator.tsx","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { createContext, use } from 'react';\n\nexport type Variant = 'radio' | 'button' | 'radio-block';\nexport type Orientation = 'vertical' | 'horizontal';\n\nconst RadioGroupContext = createContext<{\n variant: Variant;\n orientation: Orientation;\n}>({\n variant: 'radio',\n orientation: 'horizontal',\n});\n\nexport const RadioGroupProvider = RadioGroupContext;\n\nexport const useRadioGroupContext = () => use(RadioGroupContext);\n","import { cva } from 'class-variance-authority';\n\nexport const radioVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n 'tw:shrink-0',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n 'tw:size-4',\n\n // border\n 'tw:rounded-full',\n 'tw:border',\n 'tw:border-solid',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=unchecked]:border-neutral-200',\n 'tw:data-[state=unchecked]:hover:border-primary',\n 'tw:data-[state=unchecked]:disabled:hover:border-neutral-200',\n\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n\n 'tw:border-input',\n 'tw:transition-colors',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=checked]:not-disabled:hover:bg-primary',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport const radioIndicatorVariants = cva(['tw:size-2.5', 'tw:fill-current'], {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: ['tw:text-primary'],\n argo: ['tw:text-primary-foreground'],\n },\n },\n});\n\nexport const radioItemButtonVariants = cva(\n [\n // reset\n 'tw:bg-transparent',\n 'tw:p-0',\n 'tw:peer',\n 'tw:cursor-pointer',\n 'tw:whitespace-nowrap',\n\n // position\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n\n 'tw:disabled:cursor-not-allowed',\n\n // layouts\n 'tw:w-full',\n 'tw:px-2',\n 'tw:py-1.5',\n\n // fonts\n 'tw:uppercase',\n 'tw:font-semibold',\n 'tw:font-sans',\n 'tw:text-[11px]',\n 'tw:whitespace-nowrap',\n 'tw:tracking-widest',\n 'tw:leading-[18px]',\n\n // border\n 'tw:border',\n 'tw:border-solid',\n 'tw:rounded',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:disabled:opacity-40',\n 'tw:text-secondary-600',\n 'tw:border-secondary-500',\n\n 'tw:data-[state=unchecked]:hover:bg-secondary-500',\n 'tw:data-[state=unchecked]:hover:text-white',\n\n 'tw:data-[state=unchecked]:disabled:hover:bg-white',\n 'tw:data-[state=unchecked]:disabled:hover:text-secondary-500',\n 'tw:data-[state=checked]:disabled:cursor-not-allowed',\n\n 'tw:data-[state=unchecked]:bg-white',\n 'tw:data-[state=checked]:bg-secondary-500',\n 'tw:data-[state=checked]:text-white',\n 'tw:data-[state=checked]:cursor-default',\n\n 'tw:focus-visible:outline',\n 'tw:focus-visible:outline-ring',\n 'tw:focus-visible:ring-4',\n 'tw:focus-visible:ring-ring/30',\n ],\n argo: [\n 'tw:disabled:opacity-50',\n 'tw:text-foreground',\n 'tw:border-input',\n 'tw:transition-colors',\n\n // muted filled control surface — gray, distinct from white containers; not the app-background token\n 'tw:data-[state=unchecked]:bg-muted',\n 'tw:data-[state=unchecked]:not-disabled:hover:bg-accent',\n 'tw:data-[state=unchecked]:not-disabled:hover:text-accent-foreground',\n\n 'tw:data-[state=checked]:bg-primary',\n 'tw:data-[state=checked]:border-primary',\n 'tw:data-[state=checked]:text-primary-foreground',\n 'tw:data-[state=checked]:not-disabled:cursor-default',\n\n 'tw:focus-visible:outline-hidden',\n 'tw:focus-visible:border-primary',\n 'tw:focus-visible:ring-2',\n 'tw:focus-visible:ring-ring/50',\n ],\n },\n },\n },\n);\n\nexport type RadioStyleVariant = 'default' | 'argo';\n","import type { ComponentProps } from 'react';\nimport { Indicator, Item } from '@radix-ui/react-radio-group';\n\nimport { Circle } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioIndicatorVariants, radioVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const Radio = ({ className, styleVariant = 'default', ...props }: Props) => (\n <Item {...props} className={cn(radioVariants({ variant: styleVariant }), className)}>\n <Indicator className={cn('tw:flex', 'tw:items-center', 'tw:justify-center')}>\n {/* Lucide Circle is stroke-only — force fill to match the stroke (currentColor)\n so the indicator reads as a solid dot. */}\n <Circle className={radioIndicatorVariants({ variant: styleVariant })} />\n </Indicator>\n </Item>\n);\n","import type { ComponentProps } from 'react';\nimport { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\n\nimport type { RadioStyleVariant } from './styles';\nimport { radioItemButtonVariants } from './styles';\n\ntype Props = ComponentProps<typeof Item> & { styleVariant?: RadioStyleVariant };\n\nexport const RadioGroupItemButton = ({\n ref,\n className,\n children,\n styleVariant = 'default',\n ...props\n}: Props) => (\n <Item\n ref={ref}\n {...props}\n className={cn(radioItemButtonVariants({ variant: styleVariant }), className)}\n >\n {children}\n </Item>\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { Item } from '@radix-ui/react-radio-group';\n\nimport { cn } from '../../utils';\nimport { FieldBox } from '../FieldBox';\nimport { useArgoDesign } from '../ThemeProvider/context';\nimport type { Props as TooltipProps } from '../Tooltip';\nimport { Tooltip } from '../Tooltip';\n\nimport { useRadioGroupContext } from './context';\nimport { Radio } from './Radio';\nimport { RadioGroupItemButton } from './RadioGroupItemButton';\n\ntype ItemProps = Omit<ComponentProps<typeof Item>, 'asChild' | 'value'>;\n\ntype Props<T extends string = string> = ItemProps & {\n value: T;\n tooltip?: ReactNode;\n tooltipVariant?: TooltipProps['variant'];\n tooltipPlacement?: TooltipProps['placement'];\n description?: ReactNode;\n};\n\nexport const RadioGroupItem = <T extends string = string>({\n children,\n className,\n tooltip,\n tooltipVariant,\n tooltipPlacement,\n description,\n ...props\n}: Props<T>) => {\n const { variant } = useRadioGroupContext();\n const styleVariant = useArgoDesign() ? 'argo' : 'default';\n const id = useId();\n\n const item = (() => {\n if (variant === 'button')\n return (\n <RadioGroupItemButton styleVariant={styleVariant} {...props} className={className}>\n {children}\n </RadioGroupItemButton>\n );\n\n return (\n <FieldBox\n variant={variant === 'radio-block' ? 'boxed' : 'default'}\n htmlFor={id}\n control={<Radio styleVariant={styleVariant} {...props} id={id} />}\n className={cn(variant === 'radio-block' && 'tw:flex-1', className)}\n >\n <FieldBox.Title>{children}</FieldBox.Title>\n {description && <FieldBox.Description>{description}</FieldBox.Description>}\n </FieldBox>\n );\n })();\n\n if (!tooltip) {\n return item;\n }\n\n return (\n <Tooltip tooltip={tooltip} variant={tooltipVariant} placement={tooltipPlacement} triggerAsChild>\n {item}\n </Tooltip>\n );\n};\n","import { Separator } from '../Separator';\n\nimport { useRadioGroupContext } from './context';\n\nexport const RadioGroupSeparator = () => {\n const { orientation } = useRadioGroupContext();\n const invertedOrientation = orientation === 'horizontal' ? 'vertical' : 'horizontal';\n const size = orientation === 'horizontal' ? '1/2' : 'full';\n const className = orientation === 'horizontal' ? 'tw:mx-2' : 'tw:my-2';\n\n return <Separator orientation={invertedOrientation} size={size} className={className} />;\n};\n","import type { ComponentProps } from 'react';\nimport * as RRadioGroup from '@radix-ui/react-radio-group';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\n\nimport type { Orientation, Variant } from './context';\nimport { RadioGroupProvider } from './context';\nimport { RadioGroupItem } from './RadioGroupItem';\nimport { RadioGroupSeparator } from './RadioGroupSeparator';\n\nconst radioGroupVariants = cva(['tw:flex'], {\n variants: {\n orientation: {\n horizontal: ['tw:gap-2'],\n vertical: ['tw:flex-col', 'tw:gap-3'],\n },\n variant: {\n button: [],\n radio: [],\n 'radio-block': ['tw:w-full'],\n },\n },\n});\n\ntype Props<Value> = {\n variant?: Variant;\n orientation?: Orientation;\n onValueChange?: (value: Value) => void;\n value?: Value | null;\n defaultValue?: Value | null;\n} & Omit<\n ComponentProps<typeof RRadioGroup.Root>,\n 'asChild' | 'orientation' | 'onValueChange' | 'onChange' | 'value' | 'defaultValue'\n>;\n\nexport const RadioGroup = <Value extends string = string>({\n variant = 'radio',\n className,\n disabled = false,\n orientation = 'horizontal',\n onValueChange,\n children,\n value,\n defaultValue,\n ...props\n}: Props<Value>) => (\n <RRadioGroup.Root\n {...props}\n onValueChange={onValueChange}\n orientation={orientation}\n className={cn(radioGroupVariants({ orientation, variant, className }))}\n disabled={disabled}\n value={value ?? void 0}\n defaultValue={defaultValue ?? void 0}\n >\n <RadioGroupProvider value={{ variant, orientation }}>{children}</RadioGroupProvider>\n </RRadioGroup.Root>\n);\n\nRadioGroup.Item = RadioGroupItem;\nRadioGroup.Separator = RadioGroupSeparator;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { createPrefixedString, debounce, noop } from "./utils-
|
|
2
|
+
import { createPrefixedString, debounce, noop } from "./utils-DSvrhU8E.js";
|
|
3
3
|
import { Search as Search$1, Sparkles, X } from "./icons-Cek151jC.js";
|
|
4
4
|
import { useEffect, useMemo, useState } from "react";
|
|
5
5
|
import { cva } from "class-variance-authority";
|
|
@@ -181,4 +181,4 @@ const SearchForm = ({ ref, onSubmit, name = "search-field", ...props }) => {
|
|
|
181
181
|
//#endregion
|
|
182
182
|
export { Search, SearchForm };
|
|
183
183
|
|
|
184
|
-
//# sourceMappingURL=Search-
|
|
184
|
+
//# sourceMappingURL=Search-5uQAiNIP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search-DFeECt5D.js","names":["SearchIcon"],"sources":["../src/components/Search/ClearButton.tsx","../src/components/Search/styles.ts","../src/components/Search/utils.ts","../src/components/Search/Search.tsx","../src/components/Search/SearchForm.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n testId?: string;\n};\n\nexport const ClearButton = ({ onClick, testId }: Props) => {\n // Prevent default, as we do not want to lose input focus.\n const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n };\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n tabIndex={-1} // clear button should not be focusable\n onMouseDown={handleMouseDown}\n className={cn(\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:p-0',\n\n // positioning\n 'tw:flex',\n 'tw:items-center',\n\n 'tw:cursor-pointer',\n 'tw:text-muted-foreground',\n 'tw:hover:text-foreground',\n )}\n data-testid={testId}\n >\n <X className=\"tw:size-4\" />\n </button>\n );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const searchWrapperVariants = cva(\n [\n // positioning\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-2.5',\n\n // base\n 'tw:text-card-foreground',\n 'tw:transition-all',\n 'tw:font-sans',\n\n // readonly — `secondary` over `muted`, which is too close to the `card` fill to\n // read as non-editable in either scheme\n 'tw:has-[input[readonly]]:bg-secondary',\n 'tw:has-[input[readonly]]:focus-within:ring-0',\n 'tw:has-[input[readonly]]:outline-0',\n\n // disabled\n 'tw:disabled:opacity-40',\n\n // default input padding (was sizing.default)\n 'tw:[&>input]:py-[15px]',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:rounded-lg',\n 'tw:px-5',\n 'tw:bg-card',\n 'tw:shadow-raised',\n // outline\n 'tw:outline',\n 'tw:outline-1',\n 'tw:outline-transparent',\n // focus\n 'tw:has-[input:focus]:outline-1',\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:outline-ring',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n ai: [\n 'tailwindcss-preflight',\n 'tw:relative',\n 'tw:rounded-card',\n 'tw:px-4',\n 'tw:cursor-text',\n 'tw:border-2',\n 'tw:border-transparent',\n 'tw:bg-gradient-to-br',\n 'tw:from-secondary-600',\n 'tw:to-purple-600',\n 'tw:bg-origin-border',\n // Floods the interior so the gradient shows only in the 2px border box.\n 'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n // focus\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n },\n },\n },\n);\n\nexport const searchInputClassnames = [\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n 'tw:w-full',\n 'tw:p-0',\n\n // base\n 'tw:text-base',\n 'tw:leading-6',\n 'tw:font-normal',\n 'tw:font-sans',\n\n // placeholder\n 'tw:placeholder:text-muted-foreground',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n].join(' ');\n","import { createPrefixedString } from '../../utils';\n\nexport const genSearchTestId = (prefix: string = '') => {\n const ps = createPrefixedString(prefix);\n return {\n toString: () => prefix,\n wrapper: ps`search-wrapper`,\n input: ps`search-input`,\n clearButton: ps`search-clear-button`,\n };\n};\n","import { useEffect, useMemo, useState } from 'react';\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n ComponentProps,\n FocusEvent,\n FocusEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n} from 'react';\n\nimport { Search as SearchIcon, Sparkles } from '../../icons';\nimport { cn, debounce, noop } from '../../utils';\n\nimport { ClearButton } from './ClearButton';\nimport { searchInputClassnames, searchWrapperVariants } from './styles';\nimport { genSearchTestId } from './utils';\n\ntype SearchChangeEventHandler = (\n value: string,\n event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,\n) => void;\n\ntype SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;\n\ntype Props = {\n suffix?: ReactNode;\n disableDebounce?: boolean;\n debounceDelay?: number;\n onChange?: SearchChangeEventHandler;\n onBlur?: SearchBlurEventHandler;\n value?: string | null;\n defaultValue?: string | null;\n testId?: string;\n onClear?: () => void;\n variant?: 'default' | 'ai';\n} & Omit<\n ComponentProps<'input'>,\n 'type' | 'onBlur' | 'onChange' | 'value' | 'defaultValue' | 'prefix' | 'suffix'\n>;\n\n/**\n * @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.\n */\nexport const Search = ({\n ref,\n suffix,\n className,\n onBlur,\n onChange = noop,\n disabled = false,\n readOnly = false,\n disableDebounce = false,\n debounceDelay = 300,\n value: externalValue,\n defaultValue,\n testId: prefixTestId = '',\n placeholder = 'Search',\n onClear,\n variant = 'default',\n ...rest\n}: Props) => {\n const [internalValue, setInternalValue] = useState(() =>\n externalValue != null ? externalValue : defaultValue,\n );\n const hasValue = internalValue !== '';\n\n const isClearButtonVisible = hasValue && !disabled && !readOnly;\n const testId = genSearchTestId(prefixTestId);\n\n const debouncedOnChange = useMemo(\n () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),\n [disableDebounce, debounceDelay, onChange],\n );\n\n useEffect(() => {\n if (externalValue == null) return; // uncontrolled state\n // oxlint-disable-next-line react-x/set-state-in-effect\n setInternalValue(externalValue);\n }, [externalValue]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n debouncedOnChange(currentValue, event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n onBlur?.(currentValue, event);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {\n setInternalValue('');\n onChange?.('', event);\n onClear?.();\n };\n\n // Clicking anywhere in the field that isn't an interactive control (the leading icon,\n // the empty chrome) focuses the input — the whole pill acts as one click target.\n const handleWrapperMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n if (disabled || readOnly) return;\n if ((event.target as HTMLElement).closest('button, a, input, textarea, [role=\"button\"]')) {\n return;\n }\n event.preventDefault();\n event.currentTarget.querySelector('input')?.focus();\n };\n\n return (\n // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the\n // real interactive/focusable target, so no extra role or key handler is needed here.\n // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n className={cn(\n searchWrapperVariants({ variant }),\n {\n 'tw:cursor-not-allowed tw:opacity-40': disabled,\n },\n className,\n )}\n data-testid={testId.wrapper}\n onMouseDown={handleWrapperMouseDown}\n >\n {variant === 'ai' ? (\n <Sparkles className=\"tw:size-4 tw:shrink-0 tw:[&_*]:stroke-aigradient-600\" />\n ) : (\n <SearchIcon className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />\n )}\n\n <input\n {...rest}\n ref={ref}\n placeholder={placeholder}\n data-testid={testId.input}\n type=\"text\"\n value={internalValue ?? ''}\n onChange={handleChange}\n onBlur={handleBlur}\n className={searchInputClassnames}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}\n\n {suffix}\n </div>\n );\n};\n","import type { ComponentProps, FormEventHandler } from 'react';\n\nimport { Search } from './Search';\n\ntype Props = {\n onSubmit: (value: string) => void;\n} & Omit<ComponentProps<typeof Search>, 'onClear' | 'onBlur' | 'onSubmit'>;\n\nexport const SearchForm = ({ ref, onSubmit, name = 'search-field', ...props }: Props) => {\n const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n event.preventDefault();\n const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;\n onSubmit(searchEl.value);\n };\n\n const onClear = () => {\n onSubmit('');\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <Search\n {...props}\n ref={ref}\n onClear={onClear}\n name={name}\n // Debounce has no meaning when we use submit, which is triggered by pressing enter.\n disableDebounce\n />\n </form>\n );\n};\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Search-5uQAiNIP.js","names":["SearchIcon"],"sources":["../src/components/Search/ClearButton.tsx","../src/components/Search/styles.ts","../src/components/Search/utils.ts","../src/components/Search/Search.tsx","../src/components/Search/SearchForm.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n testId?: string;\n};\n\nexport const ClearButton = ({ onClick, testId }: Props) => {\n // Prevent default, as we do not want to lose input focus.\n const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n };\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n tabIndex={-1} // clear button should not be focusable\n onMouseDown={handleMouseDown}\n className={cn(\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:p-0',\n\n // positioning\n 'tw:flex',\n 'tw:items-center',\n\n 'tw:cursor-pointer',\n 'tw:text-muted-foreground',\n 'tw:hover:text-foreground',\n )}\n data-testid={testId}\n >\n <X className=\"tw:size-4\" />\n </button>\n );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const searchWrapperVariants = cva(\n [\n // positioning\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-2.5',\n\n // base\n 'tw:text-card-foreground',\n 'tw:transition-all',\n 'tw:font-sans',\n\n // readonly — `secondary` over `muted`, which is too close to the `card` fill to\n // read as non-editable in either scheme\n 'tw:has-[input[readonly]]:bg-secondary',\n 'tw:has-[input[readonly]]:focus-within:ring-0',\n 'tw:has-[input[readonly]]:outline-0',\n\n // disabled\n 'tw:disabled:opacity-40',\n\n // default input padding (was sizing.default)\n 'tw:[&>input]:py-[15px]',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:rounded-lg',\n 'tw:px-5',\n 'tw:bg-card',\n 'tw:shadow-raised',\n // outline\n 'tw:outline',\n 'tw:outline-1',\n 'tw:outline-transparent',\n // focus\n 'tw:has-[input:focus]:outline-1',\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:outline-ring',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n ai: [\n 'tailwindcss-preflight',\n 'tw:relative',\n 'tw:rounded-card',\n 'tw:px-4',\n 'tw:cursor-text',\n 'tw:border-2',\n 'tw:border-transparent',\n 'tw:bg-gradient-to-br',\n 'tw:from-secondary-600',\n 'tw:to-purple-600',\n 'tw:bg-origin-border',\n // Floods the interior so the gradient shows only in the 2px border box.\n 'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n // focus\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n },\n },\n },\n);\n\nexport const searchInputClassnames = [\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n 'tw:w-full',\n 'tw:p-0',\n\n // base\n 'tw:text-base',\n 'tw:leading-6',\n 'tw:font-normal',\n 'tw:font-sans',\n\n // placeholder\n 'tw:placeholder:text-muted-foreground',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n].join(' ');\n","import { createPrefixedString } from '../../utils';\n\nexport const genSearchTestId = (prefix: string = '') => {\n const ps = createPrefixedString(prefix);\n return {\n toString: () => prefix,\n wrapper: ps`search-wrapper`,\n input: ps`search-input`,\n clearButton: ps`search-clear-button`,\n };\n};\n","import { useEffect, useMemo, useState } from 'react';\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n ComponentProps,\n FocusEvent,\n FocusEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n} from 'react';\n\nimport { Search as SearchIcon, Sparkles } from '../../icons';\nimport { cn, debounce, noop } from '../../utils';\n\nimport { ClearButton } from './ClearButton';\nimport { searchInputClassnames, searchWrapperVariants } from './styles';\nimport { genSearchTestId } from './utils';\n\ntype SearchChangeEventHandler = (\n value: string,\n event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,\n) => void;\n\ntype SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;\n\ntype Props = {\n suffix?: ReactNode;\n disableDebounce?: boolean;\n debounceDelay?: number;\n onChange?: SearchChangeEventHandler;\n onBlur?: SearchBlurEventHandler;\n value?: string | null;\n defaultValue?: string | null;\n testId?: string;\n onClear?: () => void;\n variant?: 'default' | 'ai';\n} & Omit<\n ComponentProps<'input'>,\n 'type' | 'onBlur' | 'onChange' | 'value' | 'defaultValue' | 'prefix' | 'suffix'\n>;\n\n/**\n * @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.\n */\nexport const Search = ({\n ref,\n suffix,\n className,\n onBlur,\n onChange = noop,\n disabled = false,\n readOnly = false,\n disableDebounce = false,\n debounceDelay = 300,\n value: externalValue,\n defaultValue,\n testId: prefixTestId = '',\n placeholder = 'Search',\n onClear,\n variant = 'default',\n ...rest\n}: Props) => {\n const [internalValue, setInternalValue] = useState(() =>\n externalValue != null ? externalValue : defaultValue,\n );\n const hasValue = internalValue !== '';\n\n const isClearButtonVisible = hasValue && !disabled && !readOnly;\n const testId = genSearchTestId(prefixTestId);\n\n const debouncedOnChange = useMemo(\n () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),\n [disableDebounce, debounceDelay, onChange],\n );\n\n useEffect(() => {\n if (externalValue == null) return; // uncontrolled state\n // oxlint-disable-next-line react-x/set-state-in-effect\n setInternalValue(externalValue);\n }, [externalValue]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n debouncedOnChange(currentValue, event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n onBlur?.(currentValue, event);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {\n setInternalValue('');\n onChange?.('', event);\n onClear?.();\n };\n\n // Clicking anywhere in the field that isn't an interactive control (the leading icon,\n // the empty chrome) focuses the input — the whole pill acts as one click target.\n const handleWrapperMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n if (disabled || readOnly) return;\n if ((event.target as HTMLElement).closest('button, a, input, textarea, [role=\"button\"]')) {\n return;\n }\n event.preventDefault();\n event.currentTarget.querySelector('input')?.focus();\n };\n\n return (\n // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the\n // real interactive/focusable target, so no extra role or key handler is needed here.\n // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n className={cn(\n searchWrapperVariants({ variant }),\n {\n 'tw:cursor-not-allowed tw:opacity-40': disabled,\n },\n className,\n )}\n data-testid={testId.wrapper}\n onMouseDown={handleWrapperMouseDown}\n >\n {variant === 'ai' ? (\n <Sparkles className=\"tw:size-4 tw:shrink-0 tw:[&_*]:stroke-aigradient-600\" />\n ) : (\n <SearchIcon className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />\n )}\n\n <input\n {...rest}\n ref={ref}\n placeholder={placeholder}\n data-testid={testId.input}\n type=\"text\"\n value={internalValue ?? ''}\n onChange={handleChange}\n onBlur={handleBlur}\n className={searchInputClassnames}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}\n\n {suffix}\n </div>\n );\n};\n","import type { ComponentProps, FormEventHandler } from 'react';\n\nimport { Search } from './Search';\n\ntype Props = {\n onSubmit: (value: string) => void;\n} & Omit<ComponentProps<typeof Search>, 'onClear' | 'onBlur' | 'onSubmit'>;\n\nexport const SearchForm = ({ ref, onSubmit, name = 'search-field', ...props }: Props) => {\n const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n event.preventDefault();\n const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;\n onSubmit(searchEl.value);\n };\n\n const onClear = () => {\n onSubmit('');\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <Search\n {...props}\n ref={ref}\n onClear={onClear}\n name={name}\n // Debounce has no meaning when we use submit, which is triggered by pressing enter.\n disableDebounce\n />\n </form>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { debounce } from "./utils-
|
|
1
|
+
import { debounce } from "./utils-DSvrhU8E.js";
|
|
2
2
|
import { Search, X } from "./icons-Cek151jC.js";
|
|
3
|
-
import { InputGroup } from "./InputGroup-
|
|
3
|
+
import { InputGroup } from "./InputGroup-DcZRlVnN.js";
|
|
4
4
|
import { useEffect, useMemo, useRef, useState } from "react";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
//#region src/blocks/SearchInput/SearchInput.tsx
|
|
@@ -99,4 +99,4 @@ const SearchInput = ({ ref, state, variant, focusVariant, sizing, className, val
|
|
|
99
99
|
//#endregion
|
|
100
100
|
export { SearchInput };
|
|
101
101
|
|
|
102
|
-
//# sourceMappingURL=SearchInput-
|
|
102
|
+
//# sourceMappingURL=SearchInput-D4UgAXJK.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput-
|
|
1
|
+
{"version":3,"file":"SearchInput-D4UgAXJK.js","names":[],"sources":["../src/blocks/SearchInput/SearchInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { Search, X } from '../../icons';\nimport { debounce } from '../../utils';\n\ntype InputGroupProps = Pick<\n ComponentProps<typeof InputGroup>,\n 'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;\n\n/**\n * Props for `SearchInput`. `onValueChange` is debounced by default (300ms) so callers can wire it directly\n * to expensive filter / fetch operations without `useMemo` plumbing. `value={null}` / `value={undefined}`\n * is treated as \"not provided\" — the component falls back to `defaultValue` (or, if absent, internal\n * state initialized to empty). `value={\"\"}` is controlled-empty.\n */\ntype Props = InputGroupProps &\n InputGroupInputProps & {\n value?: string | null;\n defaultValue?: string | null;\n /** Called with the latest string value after the debounce window (default 300ms). Fires synchronously on clear and when `disableDebounce` is set. For sync echo of every keystroke use `onChange`. */\n onValueChange?: (value: string) => void;\n /** Called with the string value on blur. */\n onValueBlur?: (value: string) => void;\n /** Called when the user clicks the clear button. Receives no arguments — the value is reset to \"\". */\n onClear?: () => void;\n /** Render the trailing clear (x) button when there's a non-empty value. */\n allowClear?: boolean;\n /** Bypass the debounce — `onValueChange` fires synchronously on every keystroke. */\n disableDebounce?: boolean;\n /** Debounce window in ms. Default 300. Ignored when `disableDebounce` is set. */\n debounceDelay?: number;\n };\n\n/**\n * Debounced search input with a leading magnifying-glass icon and optional clear button.\n *\n * **When to use:** the search field inside `PageToolbar.Search`, list / table search, combobox-less\n * free-text filters. `onValueChange` is debounced so callers can wire it directly to fetches without\n * `useMemo` plumbing.\n * **When NOT to use:** for a plain string input use `TextInput`; for selecting from a known enumerated\n * list use `Combobox` (which has its own search built in).\n * **Composition:** typically rendered in `PageToolbar.Search` next to `MultiCombobox` filter pills. Use\n * `allowClear` for the canonical x-to-reset affordance.\n *\n * @see RECIPES.md#filter-toolbar — for the search + filter chips toolbar pattern\n */\nexport const SearchInput = ({\n ref,\n\n // group props\n state,\n variant,\n focusVariant,\n sizing,\n className,\n\n // own props\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueBlur,\n onChange,\n onBlur,\n onClear,\n allowClear = false,\n disableDebounce = false,\n debounceDelay = 300,\n\n // input props\n disabled,\n readOnly,\n ...restInputProps\n}: Props) => {\n const [internalValue, setInternalValue] = useState<string>(\n valueProp != null ? valueProp : (defaultValue ?? ''),\n );\n\n // Tracks whether a debounced call is pending so the controlled-value sync\n // effect doesn't overwrite characters the user typed during the debounce window.\n const debounceInFlightRef = useRef(false);\n const cancelRef = useRef<() => void>(() => {});\n\n const debouncedOnValueChange = useMemo(() => {\n if (!onValueChange || disableDebounce) {\n cancelRef.current = () => {};\n return onValueChange;\n }\n const d = debounce((val: string) => {\n debounceInFlightRef.current = false;\n onValueChange(val);\n }, debounceDelay);\n cancelRef.current = d.cancel;\n return d;\n }, [onValueChange, disableDebounce, debounceDelay]);\n\n // Cancel any pending debounced call when the debounced fn changes or on unmount.\n useEffect(() => {\n return () => cancelRef.current();\n }, [debouncedOnValueChange]);\n\n // Sync controlled value — but skip while a debounced call is in flight to\n // avoid snapping the input back to the old value mid-typing.\n useEffect(() => {\n if (valueProp == null) return;\n if (debounceInFlightRef.current) return;\n setInternalValue(valueProp);\n }, [valueProp]);\n\n const canClear = allowClear && !!internalValue && !disabled && !readOnly;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const val = event.target.value;\n setInternalValue(val);\n if (!disableDebounce && debouncedOnValueChange) debounceInFlightRef.current = true;\n debouncedOnValueChange?.(val);\n onChange?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n onValueBlur?.(event.target.value);\n onBlur?.(event);\n };\n\n const handleClear = () => {\n cancelRef.current();\n debounceInFlightRef.current = false;\n setInternalValue('');\n onValueChange?.('');\n onClear?.();\n };\n\n return (\n <InputGroup\n state={state}\n variant={variant}\n sizing={sizing}\n focusVariant={focusVariant}\n className={className}\n >\n <InputGroup.Addon align=\"inline-start\">\n <Search className=\"tw:size-4 tw:shrink-0 tw:text-muted-foreground\" />\n </InputGroup.Addon>\n\n <InputGroup.Input\n {...restInputProps}\n ref={ref}\n value={internalValue}\n onChange={handleChange}\n onBlur={handleBlur}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {canClear && (\n <InputGroup.Addon align=\"inline-end\">\n <InputGroup.Button\n aria-label=\"Clear search\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n >\n <X className=\"tw:size-4\" />\n </InputGroup.Button>\n </InputGroup.Addon>\n )}\n </InputGroup>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmDA,MAAa,eAAe,EAC1B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,SACA,aAAa,OACb,kBAAkB,OAClB,gBAAgB,KAGhB,UACA,UACA,GAAG,qBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SACxC,aAAa,OAAO,YAAa,gBAAgB,EACnD;CAIA,MAAM,sBAAsB,OAAO,KAAK;CACxC,MAAM,YAAY,aAAyB,CAAC,CAAC;CAE7C,MAAM,yBAAyB,cAAc;EAC3C,IAAI,CAAC,iBAAiB,iBAAiB;GACrC,UAAU,gBAAgB,CAAC;GAC3B,OAAO;EACT;EACA,MAAM,IAAI,UAAU,QAAgB;GAClC,oBAAoB,UAAU;GAC9B,cAAc,GAAG;EACnB,GAAG,aAAa;EAChB,UAAU,UAAU,EAAE;EACtB,OAAO;CACT,GAAG;EAAC;EAAe;EAAiB;CAAa,CAAC;CAGlD,gBAAgB;EACd,aAAa,UAAU,QAAQ;CACjC,GAAG,CAAC,sBAAsB,CAAC;CAI3B,gBAAgB;EACd,IAAI,aAAa,MAAM;EACvB,IAAI,oBAAoB,SAAS;EACjC,iBAAiB,SAAS;CAC5B,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,cAAc,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC;CAEhE,MAAM,gBAAsD,UAAU;EACpE,MAAM,MAAM,MAAM,OAAO;EACzB,iBAAiB,GAAG;EACpB,IAAI,CAAC,mBAAmB,wBAAwB,oBAAoB,UAAU;EAC9E,yBAAyB,GAAG;EAC5B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,MAAM,oBAAoB;EACxB,UAAU,QAAQ;EAClB,oBAAoB,UAAU;EAC9B,iBAAiB,EAAE;EACnB,gBAAgB,EAAE;EAClB,UAAU;CACZ;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA;GAOE,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,QAAD,EAAQ,WAAU,iDAAkD,CAAA;GACpD,CAAA;GAElB,oBAAC,WAAW,OAAZ;IACE,GAAI;IACC;IACL,OAAO;IACP,UAAU;IACV,QAAQ;IACE;IACA;GACX,CAAA;GAEA,YACC,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;GACH,CAAA;EAEV;;AAEhB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { noop } from "./utils-
|
|
2
|
+
import { noop } from "./utils-DSvrhU8E.js";
|
|
3
3
|
import { ChevronDown } from "./icons-Cek151jC.js";
|
|
4
|
-
import { Button } from "./Button-
|
|
5
|
-
import { DropdownMenu } from "./DropdownMenu-
|
|
6
|
-
import { Badge } from "./Badge-
|
|
4
|
+
import { Button } from "./Button-DsRrU5F1.js";
|
|
5
|
+
import { DropdownMenu } from "./DropdownMenu-CASr-jgl.js";
|
|
6
|
+
import { Badge } from "./Badge-D0pXdekt.js";
|
|
7
7
|
import { Collapsible } from "./Collapsible-BQXWEOBC.js";
|
|
8
8
|
import { useState } from "react";
|
|
9
9
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -273,4 +273,4 @@ const SectionNav = ({ groups, activeId, renderItem, showDescriptions = false, la
|
|
|
273
273
|
//#endregion
|
|
274
274
|
export { SectionNav };
|
|
275
275
|
|
|
276
|
-
//# sourceMappingURL=SectionNav-
|
|
276
|
+
//# sourceMappingURL=SectionNav-OkKCjSA-.js.map
|