@keboola/design 11.0.1 → 11.3.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 +41 -15
- package/CHANGELOG.md +2392 -0
- package/COMPONENT-API.md +41 -2
- package/dist/{AIKit-Dre37SJr.js → AIKit-DaFT7p92.js} +23 -22
- package/dist/AIKit-DaFT7p92.js.map +1 -0
- package/dist/{Alert-DfZq9kGe.js → Alert-CseY3yAj.js} +3 -3
- package/dist/{Alert-DfZq9kGe.js.map → Alert-CseY3yAj.js.map} +1 -1
- package/dist/{AlertModal-BUC4Es8o.js → AlertModal-DQAGpsEy.js} +4 -7
- package/dist/{AlertModal-BUC4Es8o.js.map → AlertModal-DQAGpsEy.js.map} +1 -1
- package/dist/{AppShell-B5GQN6Zs.js → AppShell-BUoxM3fv.js} +29 -10
- package/dist/AppShell-BUoxM3fv.js.map +1 -0
- package/dist/{BrandEditor-B8o9zdZO.js → BrandEditor-BnTLMRMp.js} +6 -6
- package/dist/{BrandEditor-B8o9zdZO.js.map → BrandEditor-BnTLMRMp.js.map} +1 -1
- package/dist/{BrandLogo-CJkRd0F8.js → BrandLogo-V2pRUAeO.js} +2 -2
- package/dist/{BrandLogo-CJkRd0F8.js.map → BrandLogo-V2pRUAeO.js.map} +1 -1
- package/dist/{Breadcrumb-DJp7WwSv.js → Breadcrumb-CQTPn_KB.js} +3 -3
- package/dist/{Breadcrumb-DJp7WwSv.js.map → Breadcrumb-CQTPn_KB.js.map} +1 -1
- package/dist/{Button-nzmDNS2q.js → Button-CPsEQuTN.js} +16 -16
- package/dist/Button-CPsEQuTN.js.map +1 -0
- package/dist/{Card-BAoZ35CV.js → Card-Cd5HSBmv.js} +2 -2
- package/dist/{Card-BAoZ35CV.js.map → Card-Cd5HSBmv.js.map} +1 -1
- package/dist/{Checkbox-GJ8-srt4.js → Checkbox-5VNCcV7E.js} +3 -3
- package/dist/{Checkbox-GJ8-srt4.js.map → Checkbox-5VNCcV7E.js.map} +1 -1
- package/dist/{Clipboard-CBJZiviP.js → Clipboard-B7rckqV_.js} +2 -2
- package/dist/{Clipboard-CBJZiviP.js.map → Clipboard-B7rckqV_.js.map} +1 -1
- package/dist/{ClipboardButton-ez5V3fkk.js → ClipboardButton-CQ6Aewpg.js} +3 -3
- package/dist/{ClipboardButton-ez5V3fkk.js.map → ClipboardButton-CQ6Aewpg.js.map} +1 -1
- package/dist/{CodeEditor-BfQJfbhL.js → CodeEditor-CUse8znx.js} +290 -100
- package/dist/CodeEditor-CUse8znx.js.map +1 -0
- package/dist/{ColorInput-Dx8Dsv7Y.js → ColorInput-Q1D9Vcc_.js} +3 -3
- package/dist/{ColorInput-Dx8Dsv7Y.js.map → ColorInput-Q1D9Vcc_.js.map} +1 -1
- package/dist/{ColorModeSwitch-CCqj7tjE.js → ColorModeSwitch-B5PXCVqB.js} +3 -3
- package/dist/{ColorModeSwitch-CCqj7tjE.js.map → ColorModeSwitch-B5PXCVqB.js.map} +1 -1
- package/dist/{Combobox-c_xBjf0P.js → Combobox-CyoRA7oY.js} +12 -8
- package/dist/Combobox-CyoRA7oY.js.map +1 -0
- package/dist/{Command-CQ_bQsJp.js → Command-Ds68v2rX.js} +3 -3
- package/dist/{Command-CQ_bQsJp.js.map → Command-Ds68v2rX.js.map} +1 -1
- package/dist/{CopyField-BJ96zvXs.js → CopyField-DI66uY_g.js} +2 -2
- package/dist/{CopyField-BJ96zvXs.js.map → CopyField-DI66uY_g.js.map} +1 -1
- package/dist/{DateInput-CMD3dY-T.js → DateInput-BPj2pzsn.js} +4 -4
- package/dist/{DateInput-CMD3dY-T.js.map → DateInput-BPj2pzsn.js.map} +1 -1
- package/dist/{DatePicker-BbFbmsGl.js → DatePicker-DyEGuW9m.js} +2 -2
- package/dist/{DatePicker-BbFbmsGl.js.map → DatePicker-DyEGuW9m.js.map} +1 -1
- package/dist/{DateRangeInput-D3BhiKyk.js → DateRangeInput-u9DxNbHW.js} +4 -4
- package/dist/{DateRangeInput-D3BhiKyk.js.map → DateRangeInput-u9DxNbHW.js.map} +1 -1
- package/dist/{DateRangePicker-BiUgtt_M.js → DateRangePicker-CYYhX6S7.js} +6 -6
- package/dist/{DateRangePicker-BiUgtt_M.js.map → DateRangePicker-CYYhX6S7.js.map} +1 -1
- package/dist/{DropdownMenu-B6ZbYvaM.js → DropdownMenu-DpMEcyCq.js} +9 -9
- package/dist/DropdownMenu-DpMEcyCq.js.map +1 -0
- package/dist/FieldItem-qQKGU9lF.js +108 -0
- package/dist/FieldItem-qQKGU9lF.js.map +1 -0
- package/dist/FieldItem-vhIJW4pj.d.ts +103 -0
- package/dist/{FileUpload-sXRv7JiY.js → FileUpload-C336MVnU.js} +2 -2
- package/dist/{FileUpload-sXRv7JiY.js.map → FileUpload-C336MVnU.js.map} +1 -1
- package/dist/{Form-BDCef6O9.js → Form-CTygENDc.js} +21 -81
- package/dist/{Form-BDCef6O9.js.map → Form-CTygENDc.js.map} +1 -1
- package/dist/{FormGroup-S9mPNHKH.js → FormGroup-BnwP0jNu.js} +7 -7
- package/dist/FormGroup-BnwP0jNu.js.map +1 -0
- package/dist/{FullScreenModal-CJa2VkJ2.js → FullScreenModal-j-M4aPFd.js} +3 -3
- package/dist/{FullScreenModal-CJa2VkJ2.js.map → FullScreenModal-j-M4aPFd.js.map} +1 -1
- package/dist/{HoverCard-WfDkLK1s.js → HoverCard-yQq-O49c.js} +2 -2
- package/dist/{HoverCard-WfDkLK1s.js.map → HoverCard-yQq-O49c.js.map} +1 -1
- package/dist/{InputGroup-BJWsI35s.js → InputGroup-D7zlmqPB.js} +3 -3
- package/dist/{InputGroup-BJWsI35s.js.map → InputGroup-D7zlmqPB.js.map} +1 -1
- package/dist/{Kbd-CxHAo1oo.js → Kbd-D6LpR7G2.js} +2 -2
- package/dist/{Kbd-CxHAo1oo.js.map → Kbd-D6LpR7G2.js.map} +1 -1
- package/dist/{MermaidDiagram-BB06gymm.js → MermaidDiagram-JlvuGcY-.js} +6 -87
- package/dist/MermaidDiagram-JlvuGcY-.js.map +1 -0
- package/dist/{Modal-BA5Wc3sx.js → Modal-o4ATIexE.js} +3 -3
- package/dist/{Modal-BA5Wc3sx.js.map → Modal-o4ATIexE.js.map} +1 -1
- package/dist/{MultiActionButtonGroup-CiBHxsSk.js → MultiActionButtonGroup-GTeFk-L8.js} +3 -3
- package/dist/{MultiActionButtonGroup-CiBHxsSk.js.map → MultiActionButtonGroup-GTeFk-L8.js.map} +1 -1
- package/dist/{Navbar-t16usFZQ.js → Navbar-CAQs4BZz.js} +6 -3
- package/dist/Navbar-CAQs4BZz.js.map +1 -0
- package/dist/{PageToolbar-0_1OBzaZ.js → PageToolbar-bG2YtSa3.js} +4 -4
- package/dist/PageToolbar-bG2YtSa3.js.map +1 -0
- package/dist/{Pagination-CM_Rszz-.js → Pagination-BB3X7ooY.js} +2 -2
- package/dist/{Pagination-CM_Rszz-.js.map → Pagination-BB3X7ooY.js.map} +1 -1
- package/dist/{Popconfirm-BGe1jLov.js → Popconfirm-C2Ky5hJO.js} +4 -7
- package/dist/{Popconfirm-BGe1jLov.js.map → Popconfirm-C2Ky5hJO.js.map} +1 -1
- package/dist/{Popover-Ca0V6AD1.js → Popover-DsbI2HKu.js} +7 -14
- package/dist/Popover-DsbI2HKu.js.map +1 -0
- package/dist/{RadioGroup-sIveSsNa.js → RadioGroup-BMxuZEbT.js} +3 -3
- package/dist/{RadioGroup-sIveSsNa.js.map → RadioGroup-BMxuZEbT.js.map} +1 -1
- package/dist/{Search-3UiqNZRj.js → Search-DFeECt5D.js} +2 -2
- package/dist/{Search-3UiqNZRj.js.map → Search-DFeECt5D.js.map} +1 -1
- package/dist/{SearchInput-D2fcOv7E.js → SearchInput-CCpdUego.js} +3 -3
- package/dist/{SearchInput-D2fcOv7E.js.map → SearchInput-CCpdUego.js.map} +1 -1
- package/dist/{SectionNav--7bw2b6u.js → SectionNav-Bw_MVL0_.js} +4 -4
- package/dist/{SectionNav--7bw2b6u.js.map → SectionNav-Bw_MVL0_.js.map} +1 -1
- package/dist/{Select-4YX38G5h.js → Select-D6IZVvwL.js} +5 -5
- package/dist/Select-D6IZVvwL.js.map +1 -0
- package/dist/{Sheet-BQrX8-h5.js → Sheet-BIzs2K2H.js} +3 -3
- package/dist/{Sheet-BQrX8-h5.js.map → Sheet-BIzs2K2H.js.map} +1 -1
- package/dist/{Sidebar-ROaR_AqC.js → Sidebar-r1TW4g_b.js} +5 -5
- package/dist/{Sidebar-ROaR_AqC.js.map → Sidebar-r1TW4g_b.js.map} +1 -1
- package/dist/{Slider-Da_3mS5v.js → Slider-CjxyfEty.js} +3 -3
- package/dist/{Slider-Da_3mS5v.js.map → Slider-CjxyfEty.js.map} +1 -1
- package/dist/{Switch-CX2A0v50.js → Switch-BueTV03C.js} +2 -2
- package/dist/{Switch-CX2A0v50.js.map → Switch-BueTV03C.js.map} +1 -1
- package/dist/{Tabs-EAihyqCt.js → Tabs-l72-WuhK.js} +2 -2
- package/dist/{Tabs-EAihyqCt.js.map → Tabs-l72-WuhK.js.map} +1 -1
- package/dist/{TextInput-BGed-V13.js → TextInput-DhdRk8qm.js} +3 -3
- package/dist/{TextInput-BGed-V13.js.map → TextInput-DhdRk8qm.js.map} +1 -1
- package/dist/{ThemeProvider-QncUrfJn.js → ThemeProvider-DZfGdf1v.js} +5 -4
- package/dist/{ThemeProvider-QncUrfJn.js.map → ThemeProvider-DZfGdf1v.js.map} +1 -1
- package/dist/{TimePicker-B_NegL-7.js → TimePicker-B6d2rAbX.js} +2 -2
- package/dist/{TimePicker-B_NegL-7.js.map → TimePicker-B6d2rAbX.js.map} +1 -1
- package/dist/{Toast-DQSbs3oA.js → Toast-CxXUulYN.js} +2 -2
- package/dist/{Toast-DQSbs3oA.js.map → Toast-CxXUulYN.js.map} +1 -1
- package/dist/{ZoomableSvg-DG9PnAm8.js → ZoomableSvg-CNIzRHKH.js} +4 -4
- package/dist/{ZoomableSvg-DG9PnAm8.js.map → ZoomableSvg-CNIzRHKH.js.map} +1 -1
- package/dist/{context-KxxeMHbR.js → context-BrNtMc1H.js} +3 -33
- package/dist/context-BrNtMc1H.js.map +1 -0
- package/dist/defaults-CTfvj2KB.js +34 -0
- package/dist/defaults-CTfvj2KB.js.map +1 -0
- package/dist/editors.d.ts +81 -9
- package/dist/editors.js +75 -12
- package/dist/editors.js.map +1 -1
- package/dist/flint.d.ts +15 -0
- package/dist/flint.js +212 -0
- package/dist/flint.js.map +1 -0
- package/dist/index.d.ts +361 -317
- package/dist/index.js +60 -57
- package/dist/internal/blocks/AIKit.js +1 -1
- package/dist/internal/blocks/AppShell.js +2 -2
- package/dist/internal/blocks/BrandEditor.js +1 -1
- package/dist/internal/blocks/ChartPanel.js +1 -1
- package/dist/internal/blocks/ClipboardButton.js +1 -1
- package/dist/internal/blocks/ColorInput.js +1 -1
- package/dist/internal/blocks/ColorModeSwitch.js +1 -1
- package/dist/internal/blocks/Command.js +1 -1
- package/dist/internal/blocks/CopyField.js +1 -1
- package/dist/internal/blocks/DateInput.js +1 -1
- package/dist/internal/blocks/DateRangeInput.js +1 -1
- package/dist/{DiagramSkeleton-lwBS2YBa.js → internal/blocks/DiagramShared/DiagramSkeleton.js} +3 -3
- package/dist/internal/blocks/DiagramShared/DiagramSkeleton.js.map +1 -0
- package/dist/internal/blocks/EmptyConfigurationActionCard.js +1 -1
- package/dist/internal/blocks/ErrorState.js +1 -1
- package/dist/internal/blocks/ExportMenu.js +3 -3
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js +56 -0
- package/dist/internal/blocks/Form/connectors/MultiComboboxField.js.map +1 -0
- 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 +10 -4
- package/dist/internal/blocks/MultiCombobox.js.map +1 -1
- package/dist/internal/blocks/NumberInput.js +1 -1
- package/dist/internal/blocks/PageToolbar.js +1 -1
- package/dist/internal/blocks/PasswordInput.js +2 -2
- package/dist/internal/blocks/SearchInput.js +1 -1
- package/dist/internal/blocks/SearchInputWithNavigation.js +3 -3
- package/dist/internal/blocks/SectionNav.js +1 -1
- package/dist/internal/blocks/SplitButton.js +2 -2
- package/dist/internal/blocks/StatCard.js +1 -1
- package/dist/internal/blocks/TextInput.js +1 -1
- package/dist/internal/blocks/Textarea.js +1 -1
- package/dist/internal/blocks/TimeInput.js +3 -3
- package/dist/internal/components/Alert.js +1 -1
- package/dist/internal/components/AlertModal.js +1 -1
- package/dist/internal/components/Avatar.js +1 -1
- package/dist/internal/components/BrandLogo.js +1 -1
- package/dist/internal/components/Breadcrumb.js +1 -1
- package/dist/internal/components/Button.js +1 -1
- package/dist/internal/components/Card.js +1 -1
- package/dist/internal/components/Checkbox.js +1 -1
- package/dist/internal/components/Clipboard.js +1 -1
- package/dist/internal/components/CollapsiblePanel.js +1 -1
- package/dist/internal/components/Combobox.js +1 -1
- package/dist/internal/components/DatePicker.js +1 -1
- package/dist/internal/components/DateRangePicker.js +1 -1
- package/dist/internal/components/DropdownMenu.js +1 -1
- package/dist/internal/components/FileUpload.js +1 -1
- package/dist/internal/components/FullScreenModal.js +1 -1
- package/dist/internal/components/HoverCard.js +1 -1
- package/dist/internal/components/InputGroup.js +1 -1
- package/dist/internal/components/Kbd.js +1 -1
- package/dist/internal/components/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 +3 -2
- package/dist/internal/components/TimePicker.js +1 -1
- package/dist/internal/components/Toast.js +2 -2
- package/dist/internal/components/Tooltip.js +1 -1
- package/dist/internal/components/Truncated.js +16 -8
- package/dist/internal/components/Truncated.js.map +1 -1
- package/dist/internal/components/ZoomableSvg.js +1 -1
- package/dist/internal/utils.js +1 -1
- package/dist/markdown-editor.js +7 -7
- package/dist/mermaid.js +1 -1
- package/dist/rjsf.d.ts +13 -1
- package/dist/rjsf.js +237 -177
- package/dist/rjsf.js.map +1 -1
- package/dist/{styles-DSUP_-9Z.js → styles-BAFscjSV.js} +4 -3
- package/dist/styles-BAFscjSV.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/svgTransforms-C9njt92h.js +89 -0
- package/dist/svgTransforms-C9njt92h.js.map +1 -0
- package/dist/testing.js +3 -2
- package/dist/testing.js.map +1 -1
- package/dist/{themeTokens-BNg98Mu9.js → themeTokens-7T1AFLhq.js} +13 -6
- package/dist/{themeTokens-BNg98Mu9.js.map → themeTokens-7T1AFLhq.js.map} +1 -1
- package/dist/{toast-CjkURw0M.js → toast-BweSoKn3.js} +3 -3
- package/dist/toast-BweSoKn3.js.map +1 -0
- package/dist/types-BPcAjMG0.d.ts +10 -0
- package/dist/{useColorSchemeState-CYqcUfSH.js → useColorSchemeState-BJEk6esG.js} +2 -2
- package/dist/{useColorSchemeState-CYqcUfSH.js.map → useColorSchemeState-BJEk6esG.js.map} +1 -1
- package/dist/{utils-D0c5VAyF.js → utils-B-g7d_Jb.js} +2 -2
- package/dist/{utils-D0c5VAyF.js.map → utils-B-g7d_Jb.js.map} +1 -1
- package/dist/vega.d.ts +46 -0
- package/dist/vega.js +26 -0
- package/dist/vega.js.map +1 -0
- package/dist/vegaTheme-FBXgAdHK.js +146 -0
- package/dist/vegaTheme-FBXgAdHK.js.map +1 -0
- package/package.json +29 -9
- package/src/styles.css +27 -4
- package/dist/AIKit-Dre37SJr.js.map +0 -1
- package/dist/AppShell-B5GQN6Zs.js.map +0 -1
- package/dist/Button-nzmDNS2q.js.map +0 -1
- package/dist/CodeEditor-BfQJfbhL.js.map +0 -1
- package/dist/Combobox-c_xBjf0P.js.map +0 -1
- package/dist/DiagramSkeleton-lwBS2YBa.js.map +0 -1
- package/dist/DropdownMenu-B6ZbYvaM.js.map +0 -1
- package/dist/FormGroup-S9mPNHKH.js.map +0 -1
- package/dist/MermaidDiagram-BB06gymm.js.map +0 -1
- package/dist/Navbar-t16usFZQ.js.map +0 -1
- package/dist/PageToolbar-0_1OBzaZ.js.map +0 -1
- package/dist/Popover-Ca0V6AD1.js.map +0 -1
- package/dist/Select-4YX38G5h.js.map +0 -1
- package/dist/constants-D6JcsD4_.d.ts +0 -41
- package/dist/context-KxxeMHbR.js.map +0 -1
- package/dist/styles-DSUP_-9Z.js.map +0 -1
- package/dist/toast-CjkURw0M.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popconfirm-BGe1jLov.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 event.preventDefault();\n setIsLoading(true);\n result.finally(() => {\n setIsLoading(false);\n setIsOpen(false);\n });\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-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":";;;;;;;AAUA,MAAM,oBAAoB,cAA4C,IAAI;AAE1E,MAAa,4BAA4B;AAEzC,MAAa,6BAA6B;CACxC,MAAM,UAAU,IAAI,iBAAiB;CACrC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,uDAAuD;CACrF,OAAO;AACT;;;ACdA,MAAa,kBAAkB,UAAiB,oBAAC,OAAD,EAAK,GAAI,MAAQ,CAAA;;;ACYjE,MAAa,oBAAoB,EAC/B,KACA,SACA,UACA,SACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,UAAU,cAAc,qBAAqB;CAErD,MAAM,eAAoD,UAAU;EAClE,UAAU,KAAK;EACf,SAAS,KAAK;CAChB;CAEA,OACE,oBAAC,QAAQ,OAAT;EAAe,SAAA;EAAQ,SAAS;EAAa,UAAU;EACpD,UAAA,UACC,oBAAC,MAAD;GAAM,GAAI;GAAY;GAAgB;GACnC;EACG,CAAA,IAEN,oBAAC,QAAD;GAAQ,SAAQ;GAAU,MAAK;GAAQ,GAAI;GAAY;GAAK,WAAW,GAAG,SAAS;GAChF,UAAA,YAAY;EACP,CAAA;CAEG,CAAA;AAEnB;;;AC5BA,MAAa,qBAAqB,EAChC,KACA,SACA,UACA,SACA,WACA,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,SAAS,cAAc,qBAAqB;CAE/D,MAAM,iBAAsD,UAAU;EACpE,UAAU,KAAK;EACf,UAAU,KAAK;CACjB;CAEA,MAAM,sBAAsB;EAC1B,IAAI,UAAU,OAAO;EACrB,OAAO,YAAY,WAAW,WAAW;CAC3C,EAAA,CAAG;CAEH,OACE,oBAAC,QAAQ,OAAT;EAAe,SAAA;EAAQ,SAAS;EAAe,UAAU;EAAW,gBAAc;EAC/E,UAAA,UACC,oBAAC,MAAD;GAAM,GAAI;GAAY;GAAgB;GACnC;EACG,CAAA,IAEN,oBAAC,QAAD;GACE,MAAK;GACL,SAAS,YAAY,WAAW,WAAW;GAC3C,GAAI;GACC;GACL,WAAW,GAAG,aAAa,SAAS;GACzB;GAEV,UAAA;EACK,CAAA;CAEG,CAAA;AAEnB;;;AC/CA,MAAa,qBAAqB,EAAE,WAAW,mBAAmB,GAAG,YAAmB;CACtF,MAAM,EAAE,cAAc,qBAAqB;CAE3C,MAAM,2BAAuD,UAAU;EACrE,IAAI,WAAW,MAAM,eAAe;EACpC,oBAAoB,KAAK;CAC3B;CAEA,OACE,oBAAC,QAAQ,SAAT;EACE,GAAI;EACJ,mBAAmB;EACnB,WAAW,GAAG,WAAW,eAAe,YAAY,WAAW,WAAW,SAAS;CACpF,CAAA;AAEL;;;AClBA,MAAa,oBAAoB,EAAE,WAAW,GAAG,YAC/C,oBAAC,OAAD;CAAK,GAAI;CAAO,WAAW,GAAG,8BAA8B,SAAS;AAAI,CAAA;;;ACC3E,MAAa,qBAAqB,EAAE,SAAS,GAAG,YAAmB;CACjE,MAAM,EAAE,SAAS,cAAc,qBAAqB;CAEpD,MAAM,eAAqD,UAAU;EACnE,IAAI,CAAC,SAAS;GACZ,MAAM,eAAe;GACrB,UAAU,KAAK;EACjB;EAEA,UAAU,KAAK;CACjB;CAEA,OAAO,oBAAC,QAAQ,SAAT;EAAiB,GAAI;EAAO,SAAS;CAAc,CAAA;AAC5D;;;ACRA,MAAM,aAAa,KAAK;AAQxB,MAAa,cAAc,EACzB,UACA,YAAY,MACZ,WAAW,MACX,UAAU,WACV,UAAU,MACV,eAAe,MACf,MACA,gBAAgB,OAChB,GAAG,WACQ;CACX,MAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;CAChD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,MAAM,aAAa,OAAO,SAAS;CACnC,MAAM,YAAY,OAAO,QAAQ;CACjC,WAAW,UAAU;CACrB,UAAU,UAAU;CAEpB,MAAM,sBAAsB,SAAkB;EAC5C,UAAU,IAAI;EACd,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA,YAAY,UAAU;GACpB,MAAM,SAAS,WAAW,QAAQ,KAAK;GAEvC,IAAI,EAAE,kBAAkB,YAAY,eAAe;GAMnD,MAAM,eAAe;GACrB,aAAa,IAAI;GACjB,OAAO,WAAW,UAAU,KAAK,CAAC,CAAC,CAAC,cAAc,aAAa,KAAK,CAAC;EACvE;EACA,WAAW,UAAU;GACnB,UAAU,QAAQ,KAAK;EACzB;CACF,IACA;EAAC;EAAS;EAAW;EAAS;CAAa,CAC7C;CAEA,OACE,oBAAC,SAAD;EAAS,GAAI;EAAM,MAAM,QAAQ;EAAQ,cAAc;EACrD,UAAA,oBAAC,2BAAD;GAA2B,OAAO;GAAU;EAAoC,CAAA;CACzE,CAAA;AAEb;AAEA,WAAW,UAAU;AACrB,WAAW,SAAS;AACpB,WAAW,SAAS;AACpB,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,UAAU"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { useArgoDesign } from "./context-
|
|
2
|
+
import { useArgoDesign } from "./context-BrNtMc1H.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";
|
|
@@ -19,7 +19,10 @@ const variants = cva([
|
|
|
19
19
|
"tw:box-border",
|
|
20
20
|
"tw:border",
|
|
21
21
|
"tw:border-solid",
|
|
22
|
+
"tw:border-border",
|
|
22
23
|
"tw:shadow-lg",
|
|
24
|
+
"tw:bg-popover",
|
|
25
|
+
"tw:text-popover-foreground",
|
|
23
26
|
"tw:data-[state=open]:animate-in",
|
|
24
27
|
"tw:data-[state=open]:fade-in-0",
|
|
25
28
|
"tw:data-[state=open]:zoom-in-95",
|
|
@@ -39,18 +42,8 @@ const variants = cva([
|
|
|
39
42
|
},
|
|
40
43
|
variants: {
|
|
41
44
|
variant: {
|
|
42
|
-
default: [
|
|
43
|
-
|
|
44
|
-
"tw:border-neutral-100",
|
|
45
|
-
"tw:bg-white",
|
|
46
|
-
"tw:text-neutral-800"
|
|
47
|
-
],
|
|
48
|
-
argo: [
|
|
49
|
-
"tw:rounded-2xl",
|
|
50
|
-
"tw:border-border",
|
|
51
|
-
"tw:bg-popover",
|
|
52
|
-
"tw:text-popover-foreground"
|
|
53
|
-
]
|
|
45
|
+
default: ["tw:rounded-md"],
|
|
46
|
+
argo: ["tw:rounded-2xl"]
|
|
54
47
|
},
|
|
55
48
|
matchTriggerWidth: {
|
|
56
49
|
true: ["tw:w-[var(--radix-popover-trigger-width)]"],
|
|
@@ -89,4 +82,4 @@ Popover.Close = Close;
|
|
|
89
82
|
//#endregion
|
|
90
83
|
export { Popover };
|
|
91
84
|
|
|
92
|
-
//# sourceMappingURL=Popover-
|
|
85
|
+
//# sourceMappingURL=Popover-DsbI2HKu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Popover-DsbI2HKu.js","names":[],"sources":["../src/components/Popover/PopoverContent.tsx","../src/components/Popover/Popover.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-popover';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst variants = cva(\n [\n 'tailwindcss-preflight',\n 'tw:group/popover-content',\n 'tw:z-[1055]',\n 'tw:focus-visible:outline-hidden',\n\n // An open Radix Dialog locks `pointer-events: none` on <body>. Popover content\n // is portalled to <body> as a sibling of the dialog, so it inherits the lock\n // and clicks fall through — re-enable pointer events on the content itself\n // (dismiss-on-outside-click still works, it listens on document).\n 'tw:pointer-events-auto',\n\n // sizing\n 'tw:min-w-32',\n 'tw:max-h-[var(--radix-popover-content-available-height)]',\n 'tw:origin-(--radix-popover-content-transform-origin)',\n\n // layout\n 'tw:flex',\n 'tw:flex-col',\n 'tw:overflow-y-auto',\n\n // border\n 'tw:box-border',\n 'tw:border',\n 'tw:border-solid',\n 'tw:border-border',\n 'tw:shadow-lg',\n\n // surface — semantic tokens, so a portalled panel follows the brand and the scheme\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n\n // open animation\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=open]:zoom-in-95',\n\n // closed animation\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // position animation\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\n\n // Default size for nested Lucide icons; callers can override on the icon.\n \"tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4\",\n 'tw:[&_svg]:shrink-0',\n ],\n {\n defaultVariants: {\n matchTriggerWidth: false,\n variant: 'default',\n },\n variants: {\n // Radius is the only thing the surface variants differ in — the panel's colours\n // live in the base array.\n variant: {\n default: ['tw:rounded-md'],\n argo: ['tw:rounded-2xl'],\n },\n matchTriggerWidth: {\n true: ['tw:w-[var(--radix-popover-trigger-width)]'],\n false: [],\n },\n },\n },\n);\n\ntype Props = ComponentProps<typeof Content> & Omit<VariantProps<typeof variants>, 'variant'>;\n\nexport const PopoverContent = ({\n ref,\n className,\n align = 'center',\n sideOffset = 4,\n matchTriggerWidth = false,\n children,\n onEscapeKeyDown,\n ...props\n}: Props) => {\n const effectiveVariant: NonNullable<VariantProps<typeof variants>['variant']> = useArgoDesign()\n ? 'argo'\n : 'default';\n return (\n <Portal>\n <Content\n ref={ref}\n align={matchTriggerWidth ? 'start' : align}\n sideOffset={sideOffset}\n className={cn(variants({ className, matchTriggerWidth, variant: effectiveVariant }))}\n onEscapeKeyDown={(event) => {\n // Stop propagation to prevent parent modals (like FullScreenModal) from closing\n event.stopPropagation();\n onEscapeKeyDown?.(event);\n }}\n {...props}\n >\n {children}\n </Content>\n </Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-popover';\n\nimport { PopoverContent } from './PopoverContent';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Popover = (props: Props) => <Root {...props} />;\n\n/**\n * Main Layout\n */\nPopover.Content = PopoverContent;\nPopover.Trigger = Trigger;\nPopover.Close = Close;\n"],"mappings":";;;;;;AAQA,MAAM,WAAW,IACf;CACE;CACA;CACA;CACA;CAMA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CACA;CAGA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,iBAAiB;EACf,mBAAmB;EACnB,SAAS;CACX;CACA,UAAU;EAGR,SAAS;GACP,SAAS,CAAC,eAAe;GACzB,MAAM,CAAC,gBAAgB;EACzB;EACA,mBAAmB;GACjB,MAAM,CAAC,2CAA2C;GAClD,OAAO,CAAC;EACV;CACF;AACF,CACF;AAIA,MAAa,kBAAkB,EAC7B,KACA,WACA,QAAQ,UACR,aAAa,GACb,oBAAoB,OACpB,UACA,iBACA,GAAG,YACQ;CACX,MAAM,mBAA0E,cAAc,IAC1F,SACA;CACJ,OACE,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAD;EACO;EACL,OAAO,oBAAoB,UAAU;EACzB;EACZ,WAAW,GAAG,SAAS;GAAE;GAAW;GAAmB,SAAS;EAAiB,CAAC,CAAC;EACnF,kBAAkB,UAAU;GAE1B,MAAM,gBAAgB;GACtB,kBAAkB,KAAK;EACzB;EACA,GAAI;EAEH;CACM,CAAA,EACH,CAAA;AAEZ;;;AC5GA,MAAa,WAAW,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;;;;AAK3D,QAAQ,UAAU;AAClB,QAAQ,UAAU;AAClB,QAAQ,QAAQ"}
|
|
@@ -1,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-B-g7d_Jb.js";
|
|
3
|
+
import { useArgoDesign } from "./context-BrNtMc1H.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-BMxuZEbT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup-sIveSsNa.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-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,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-B-g7d_Jb.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-DFeECt5D.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search-3UiqNZRj.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-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,6 +1,6 @@
|
|
|
1
|
-
import { debounce } from "./utils-
|
|
1
|
+
import { debounce } from "./utils-B-g7d_Jb.js";
|
|
2
2
|
import { Search, X } from "./icons-Cek151jC.js";
|
|
3
|
-
import { InputGroup } from "./InputGroup-
|
|
3
|
+
import { InputGroup } from "./InputGroup-D7zlmqPB.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-CCpdUego.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput-
|
|
1
|
+
{"version":3,"file":"SearchInput-CCpdUego.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,8 +1,8 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { noop } from "./utils-
|
|
2
|
+
import { noop } from "./utils-B-g7d_Jb.js";
|
|
3
3
|
import { ChevronDown } from "./icons-Cek151jC.js";
|
|
4
|
-
import { Button } from "./Button-
|
|
5
|
-
import { DropdownMenu } from "./DropdownMenu-
|
|
4
|
+
import { Button } from "./Button-CPsEQuTN.js";
|
|
5
|
+
import { DropdownMenu } from "./DropdownMenu-DpMEcyCq.js";
|
|
6
6
|
import { Badge } from "./Badge-Ch26CXoP.js";
|
|
7
7
|
import { Collapsible } from "./Collapsible-BQXWEOBC.js";
|
|
8
8
|
import { useState } from "react";
|
|
@@ -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-Bw_MVL0_.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SectionNav--7bw2b6u.js","names":[],"sources":["../src/blocks/SectionNav/SectionNavItemContent.tsx","../src/blocks/SectionNav/SectionNavGroupRow.tsx","../src/blocks/SectionNav/SectionNav.tsx"],"sourcesContent":["import { Badge } from '../../components/Badge';\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { SectionNavItem } from './types';\n\ntype Props = {\n item: SectionNavItem;\n /** Tints the title. */\n active: boolean;\n showDescription?: boolean;\n /** Group rows only — renders the chevron, pointing the way the list is about to move. */\n expanded?: boolean;\n /**\n * Sub-section rows pass `false`. A group's icon stands for the group, and repeating a glyph on\n * each indented child turns a short list into a column of competing marks: the indent and the\n * rule already say these belong to the row above. An item may still carry an `icon` for surfaces\n * that flatten the tree, such as a tab row, where every destination is top level.\n */\n showIcon?: boolean;\n};\n\n/**\n * One row's body, rendered identically in the tree and in the collapsed dropdown — same title, same\n * badge, same description. Shared rather than written twice so the two cannot drift.\n */\nexport const SectionNavItemContent = ({\n item,\n active,\n showDescription = false,\n expanded,\n showIcon = true,\n}: Props) => {\n const Icon = item.icon;\n\n return (\n <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-0.5\">\n <span className=\"tw:flex tw:items-center tw:gap-2\">\n {showIcon && Icon && <Icon className=\"tw:size-4 tw:shrink-0\" />}\n <span\n className={cn(\n 'tw:flex-1 tw:truncate tw:text-sm',\n active ? 'tw:font-medium tw:text-accent-foreground' : 'tw:text-foreground',\n )}\n >\n {item.title}\n </span>\n {item.isNew && (\n <Badge\n color=\"blue-inverse\"\n className=\"tw:min-h-0 tw:text-[10px]\"\n labelClassName=\"tw:px-1.5 tw:py-0\"\n >\n New\n </Badge>\n )}\n {expanded !== undefined && (\n <ChevronDown\n className={cn(\n 'tw:size-4 tw:shrink-0 tw:text-muted-foreground tw:transition-transform tw:duration-200',\n expanded && 'tw:rotate-180',\n )}\n />\n )}\n </span>\n {/* Descriptions wrap rather than truncate — they are the second line, not the label. A token\n with no break opportunity would still paint straight out of the 256px column, so break it. */}\n {showDescription && item.description && (\n <span className=\"tw:text-xs tw:break-words tw:text-muted-foreground\">\n {item.description}\n </span>\n )}\n </span>\n );\n};\n","import { useState } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { Collapsible } from '../../components/Collapsible';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n group: SectionNavGroup;\n activeId: string | undefined;\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n showDescriptions: boolean;\n};\n\n/**\n * The ring is **inset**, not an outline. A row is exactly as wide as the nav column, and\n * `PageLayout.Content nav` makes that column a scroll container (`overflow-y-auto`, which forces\n * `overflow-x` to `auto` too) — so there is 0px of slack for anything painted outside the border\n * box, and the browser's default `outline-offset: 1px` ring gets clipped on both edges. Painting\n * inside the box cannot be clipped, at any column width, by any ancestor.\n */\nconst FOCUS_RING =\n 'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring';\n\nconst rowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active\n ? 'tw:bg-accent tw:font-medium tw:text-accent-foreground'\n : 'tw:bg-transparent tw:text-foreground tw:hover:bg-muted',\n );\n\nconst childRowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active ? 'tw:bg-accent' : 'tw:bg-transparent tw:hover:bg-muted',\n );\n\n/**\n * One group row and its sub-sections. The row is a single control: it opens the group **and** goes to\n * its first section, and only collapses once you are already there — so the chevron never becomes a\n * separate thing to aim at, and one click always makes progress.\n */\nexport const SectionNavGroupRow = ({ group, activeId, renderItem, showDescriptions }: Props) => {\n // Open on arrival: the nav is short enough that hiding any of it costs more than it saves.\n const [open, setOpen] = useState(true);\n\n const hasChildren = group.children.length > 0;\n const targetId = group.children[0]?.id ?? group.id;\n const isCurrent = group.id === activeId;\n const holdsCurrent = isCurrent || group.children.some((child) => child.id === activeId);\n\n const onClick = (event: MouseEvent<HTMLElement>) => {\n if (!hasChildren) return;\n\n // Already on the row's target, so navigating would be a no-op and the only thing left for the\n // click to do is toggle. `preventDefault` is what tells the caller's link not to navigate.\n if (activeId === targetId) {\n event.preventDefault();\n setOpen((isOpen) => !isOpen);\n\n return;\n }\n\n setOpen(true);\n };\n\n return (\n <Collapsible open={open} onOpenChange={setOpen} className=\"tw:flex tw:flex-col tw:gap-0.5\">\n {renderItem({\n targetId,\n isActive: isCurrent,\n children: (\n <SectionNavItemContent\n item={group}\n active={holdsCurrent}\n expanded={hasChildren ? open : undefined}\n />\n ),\n itemProps: {\n className: rowClass(holdsCurrent),\n 'aria-current': isCurrent ? 'page' : undefined,\n 'aria-expanded': hasChildren ? open : undefined,\n 'data-active': holdsCurrent && !isCurrent ? true : undefined,\n onClick,\n },\n })}\n\n {hasChildren && (\n <Collapsible.Content>\n {/* `pl-1` keeps each row's background box off the group's rule — without it an active\n row's `bg-accent` sits flush against the line. 4px is also what lines the child titles\n (20 + 1 + 4 + 12 = 37px) up with the parent's, which its icon puts at 12 + 16 + 8 = 36px. */}\n {/* `my-0 mr-0` and not `m-0`: a host app emits its own `.tw\\:m-0` from its own source, and\n its stylesheet is the later one — shorthand and longhand at equal specificity means the\n app's `m-0` would land after this `ml-5` and flatten the indent. Longhands only, so\n nothing here can be overridden by a copy of a class this block also uses. */}\n <ul className=\"tw:my-0 tw:mr-0 tw:ml-5 tw:flex tw:list-none tw:flex-col tw:gap-0.5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => {\n const active = child.id === activeId;\n\n return (\n <li key={child.id}>\n {renderItem({\n targetId: child.id,\n isActive: active,\n children: (\n <SectionNavItemContent\n item={child}\n active={active}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: childRowClass(active),\n 'aria-current': active ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </li>\n );\n })}\n {group.note && (\n <li className=\"tw:py-1 tw:pl-3 tw:text-xs tw:text-muted-foreground\">{group.note}</li>\n )}\n </ul>\n </Collapsible.Content>\n )}\n </Collapsible>\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport { ChevronDown } from '../../icons';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavGroupRow } from './SectionNavGroupRow';\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n /**\n * The sections to show, already filtered. Visibility, permissions and feature flags stay in the\n * app — this block renders exactly what it is handed, in order.\n */\n groups: SectionNavGroup[];\n /** `id` of the current section: a child's, or a childless group's. */\n activeId?: string;\n /**\n * Renders the clickable element for one row, so routing never enters the design system. Return a\n * `NavLink` / TanStack `Link` / `<a>` pointing at `targetId` and spread `itemProps` onto it.\n */\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n /** Print each section's `description` under its title. Off — the tree stays scannable without it. */\n showDescriptions?: boolean;\n /** Accessible name for the tree's `<nav>`, and the collapsed label with nothing active. */\n label?: string;\n /** Applied to the tree's `<nav>`. The column's own geometry belongs to `PageLayout.Content nav`. */\n className?: string;\n};\n\n/**\n * In-page grouped navigation for one page's sections: a tree above the container's breakpoint, a\n * single dropdown below it. Both are rendered and CSS picks one, and both draw their rows through\n * the same renderer, so the two can never drift apart.\n *\n * **This is not `Sidebar`.** `Sidebar` is the app-level left rail — `SidebarProvider`, icon-collapse,\n * one per app shell, outside `PageLayout`. `SectionNav` is scoped to a single page's sections, lives\n * inside `PageLayout.Content`, and owns no global state. See `AGENTS.md`.\n *\n * **Router-agnostic:** `renderItem` is the seam. Pass it whatever your router calls a link.\n *\n * ```tsx\n * <PageLayout.Content nav={\n * <SectionNav\n * groups={groups}\n * activeId={activeId}\n * renderItem={({ targetId, children, itemProps }) => (\n * <Link to={targetId} {...itemProps}>{children}</Link>\n * )}\n * />\n * }>\n * {page}\n * </PageLayout.Content>\n * ```\n *\n * The tree↔dropdown switch is a **container** query on the content area's width, never the viewport\n * — a product sidebar or a chat panel narrows the page without the window resizing.\n * `PageLayout.Content nav={…}` names that container; standalone, put `tw:@container/section-nav` on\n * an ancestor yourself.\n *\n * @see RECIPES.md#section-nav\n */\nexport const SectionNav = ({\n groups,\n activeId,\n renderItem,\n showDescriptions = false,\n label = 'Sections',\n className,\n}: Props) => {\n /**\n * What the collapsed trigger names. A sub-section carries its group with it — \"Developer settings /\n * CLI agents\" — so the trigger says where you are, not just what page this is.\n */\n const activeChild = groups\n .flatMap((group) => group.children.map((child) => ({ group, child })))\n .find(({ child }) => child.id === activeId);\n const activeGroup = groups.find((group) => group.id === activeId);\n const current = activeChild\n ? {\n icon: activeChild.group.icon,\n title: activeChild.child.title,\n parent: activeChild.group.title,\n }\n : { icon: activeGroup?.icon, title: activeGroup?.title ?? label, parent: undefined };\n const CurrentIcon = current.icon;\n /** A group whose subtree holds the active section: tinted like the tree's row, but not `aria-current`. */\n const holdsActive = (group: SectionNavGroup) =>\n group.id === activeId || group.children.some((child) => child.id === activeId);\n\n return (\n <>\n {/* The reset is scoped (`.tailwindcss-preflight`, see `styles.css`), and the rows are\n caller-owned elements — `renderItem` returns the app's own `<a>`, which never inherits a\n scope this block does not open. Without it those rows are `content-box`, so the `w-full`\n + `px-3` in `rowClass` measures 24px wider than the 256px column and every row bleeds out\n of it. Opening the scope here covers the whole tree, rows included. */}\n {/* `display` is set by TWO container variants and never by a plain utility. A host app that\n emits `tw:flex` or `tw:hidden` from its own source ships an identical `.tw\\:flex` /\n `.tw\\:hidden` rule — same specificity, same layer, and its stylesheet is the later one, so\n whichever of the two this block wrote plainly would lose to the app's copy and the tree\n would be stuck visible or stuck hidden. Both variants are selectors only this block emits,\n and their queries are mutually exclusive, so nothing outside can outrank them. */}\n <nav\n aria-label={label}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:w-full tw:flex-col tw:gap-0.5 tw:@[640px]/section-nav:flex tw:@max-[640px]/section-nav:hidden',\n className,\n )}\n >\n {groups.map((group) => (\n <SectionNavGroupRow\n key={group.id}\n group={group}\n activeId={activeId}\n renderItem={renderItem}\n showDescriptions={showDescriptions}\n />\n ))}\n </nav>\n\n <div className=\"tw:w-full tw:bg-background tw:@[640px]/section-nav:hidden tw:@max-[640px]/section-nav:block\">\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n <Button variant=\"outline\" className=\"tw:w-full tw:justify-between\">\n <span className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-2\">\n {CurrentIcon && <CurrentIcon className=\"tw:size-4 tw:shrink-0\" />}\n {current.parent && (\n <>\n <span className=\"tw:truncate tw:font-normal tw:text-muted-foreground\">\n {current.parent}\n </span>\n <span className=\"tw:text-border\">/</span>\n </>\n )}\n <span className=\"tw:truncate tw:font-medium tw:text-foreground\">\n {current.title}\n </span>\n </span>\n <ChevronDown className=\"tw:size-4 tw:shrink-0\" />\n </Button>\n </DropdownMenu.Trigger>\n\n <DropdownMenu.Content\n align=\"start\"\n className=\"tw:w-(--radix-dropdown-menu-trigger-width)\"\n >\n {groups.map((group) =>\n group.children.length > 0 ? (\n <DropdownMenu.Group key={group.id}>\n {/* A real item, not a label: it is a destination in the tree (it goes to the\n group's first section), so a menu that made it unclickable would be a different\n navigation, not a smaller one. Same row treatment as every other item. */}\n <DropdownMenu.Item asChild>\n {renderItem({\n targetId: group.children[0]?.id ?? group.id,\n isActive: false,\n children: <SectionNavItemContent item={group} active={holdsActive(group)} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': undefined,\n 'aria-expanded': undefined,\n 'data-active': holdsActive(group) ? true : undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n <div className=\"tw:ml-5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => (\n <DropdownMenu.Item key={child.id} asChild>\n {renderItem({\n targetId: child.id,\n isActive: child.id === activeId,\n children: (\n <SectionNavItemContent\n item={child}\n active={child.id === activeId}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': child.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ))}\n </div>\n </DropdownMenu.Group>\n ) : (\n <DropdownMenu.Item key={group.id} asChild>\n {renderItem({\n targetId: group.id,\n isActive: group.id === activeId,\n children: <SectionNavItemContent item={group} active={group.id === activeId} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': group.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ),\n )}\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n </>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AA0BA,MAAa,yBAAyB,EACpC,MACA,QACA,kBAAkB,OAClB,UACA,WAAW,WACA;CACX,MAAM,OAAO,KAAK;CAElB,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA;IACG,YAAY,QAAQ,oBAAC,MAAD,EAAM,WAAU,wBAAyB,CAAA;IAC9D,oBAAC,QAAD;KACE,WAAW,GACT,oCACA,SAAS,6CAA6C,oBACxD;KAEC,UAAA,KAAK;IACF,CAAA;IACL,KAAK,SACJ,oBAAC,OAAD;KACE,OAAM;KACN,WAAU;KACV,gBAAe;KAChB,UAAA;IAEM,CAAA;IAER,aAAa,KAAA,KACZ,oBAAC,aAAD,EACE,WAAW,GACT,0FACA,YAAY,eACd,EACD,CAAA;GAEC;EAGL,CAAA,GAAA,mBAAmB,KAAK,eACvB,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,KAAK;EACF,CAAA,CAEJ;;AAEV;;;;;;;;;;ACnDA,MAAM,aACJ;AAEF,MAAM,YAAY,WAChB,GACE,0KACA,YACA,SACI,0DACA,wDACN;AAEF,MAAM,iBAAiB,WACrB,GACE,wIACA,YACA,SAAS,iBAAiB,qCAC5B;;;;;;AAOF,MAAa,sBAAsB,EAAE,OAAO,UAAU,YAAY,uBAA8B;CAE9F,MAAM,CAAC,MAAM,WAAW,SAAS,IAAI;CAErC,MAAM,cAAc,MAAM,SAAS,SAAS;CAC5C,MAAM,WAAW,MAAM,SAAS,EAAE,EAAE,MAAM,MAAM;CAChD,MAAM,YAAY,MAAM,OAAO;CAC/B,MAAM,eAAe,aAAa,MAAM,SAAS,MAAM,UAAU,MAAM,OAAO,QAAQ;CAEtF,MAAM,WAAW,UAAmC;EAClD,IAAI,CAAC,aAAa;EAIlB,IAAI,aAAa,UAAU;GACzB,MAAM,eAAe;GACrB,SAAS,WAAW,CAAC,MAAM;GAE3B;EACF;EAEA,QAAQ,IAAI;CACd;CAEA,OACE,qBAAC,aAAD;EAAmB;EAAM,cAAc;EAAS,WAAU;EAA1D,UAAA,CACG,WAAW;GACV;GACA,UAAU;GACV,UACE,oBAAC,uBAAD;IACE,MAAM;IACN,QAAQ;IACR,UAAU,cAAc,OAAO,KAAA;GAChC,CAAA;GAEH,WAAW;IACT,WAAW,SAAS,YAAY;IAChC,gBAAgB,YAAY,SAAS,KAAA;IACrC,iBAAiB,cAAc,OAAO,KAAA;IACtC,eAAe,gBAAgB,CAAC,YAAY,OAAO,KAAA;IACnD;GACF;EACF,CAAC,GAEA,eACC,oBAAC,YAAY,SAAb,EAAA,UAQE,qBAAC,MAAD;GAAI,WAAU;GAAd,UAAA,CACG,MAAM,SAAS,KAAK,UAAU;IAC7B,MAAM,SAAS,MAAM,OAAO;IAE5B,OACE,oBAAC,MAAD,EAAA,UACG,WAAW;KACV,UAAU,MAAM;KAChB,UAAU;KACV,UACE,oBAAC,uBAAD;MACE,MAAM;MACE;MACR,iBAAiB;MACjB,UAAU;KACX,CAAA;KAEH,WAAW;MACT,WAAW,cAAc,MAAM;MAC/B,gBAAgB,SAAS,SAAS,KAAA;MAClC,iBAAiB,KAAA;MACjB,eAAe,KAAA;MACf,SAAS;KACX;IACF,CAAC,EACC,GApBK,MAAM,EAoBX;GAER,CAAC,GACA,MAAM,QACL,oBAAC,MAAD;IAAI,WAAU;IAAuD,UAAA,MAAM;GAAS,CAAA,CAEpF;EACe,CAAA,EAAA,CAAA,CAEZ;;AAEjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACzEA,MAAa,cAAc,EACzB,QACA,UACA,YACA,mBAAmB,OACnB,QAAQ,YACR,gBACW;;;;;CAKX,MAAM,cAAc,OACjB,SAAS,UAAU,MAAM,SAAS,KAAK,WAAW;EAAE;EAAO;CAAM,EAAE,CAAC,CAAC,CACrE,MAAM,EAAE,YAAY,MAAM,OAAO,QAAQ;CAC5C,MAAM,cAAc,OAAO,MAAM,UAAU,MAAM,OAAO,QAAQ;CAChE,MAAM,UAAU,cACZ;EACE,MAAM,YAAY,MAAM;EACxB,OAAO,YAAY,MAAM;EACzB,QAAQ,YAAY,MAAM;CAC5B,IACA;EAAE,MAAM,aAAa;EAAM,OAAO,aAAa,SAAS;EAAO,QAAQ,KAAA;CAAU;CACrF,MAAM,cAAc,QAAQ;;CAE5B,MAAM,eAAe,UACnB,MAAM,OAAO,YAAY,MAAM,SAAS,MAAM,UAAU,MAAM,OAAO,QAAQ;CAE/E,OACE,qBAAA,YAAA,EAAA,UAAA,CAYE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAW,GACT,yBACA,oGACA,SACF;EAEC,UAAA,OAAO,KAAK,UACX,oBAAC,oBAAD;GAES;GACG;GACE;GACM;EACnB,GALM,MAAM,EAKZ,CACF;CACE,CAAA,GAEL,oBAAC,OAAD;EAAK,WAAU;EACb,UAAA,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAa,SAAd;GAAsB,SAAA;GACpB,UAAA,qBAAC,QAAD;IAAQ,SAAQ;IAAU,WAAU;IAApC,UAAA,CACE,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACG,eAAe,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA;MAC/D,QAAQ,UACP,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,QAAQ;MACL,CAAA,GACN,oBAAC,QAAD;OAAM,WAAU;OAAiB,UAAA;MAAO,CAAA,CACxC,EAAA,CAAA;MAEJ,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,QAAQ;MACL,CAAA;KACF;IACN,CAAA,GAAA,oBAAC,aAAD,EAAa,WAAU,wBAAyB,CAAA,CAC1C;;EACY,CAAA,GAEtB,oBAAC,aAAa,SAAd;GACE,OAAM;GACN,WAAU;GAET,UAAA,OAAO,KAAK,UACX,MAAM,SAAS,SAAS,IACtB,qBAAC,aAAa,OAAd,EAAA,UAAA,CAIE,oBAAC,aAAa,MAAd;IAAmB,SAAA;IAChB,UAAA,WAAW;KACV,UAAU,MAAM,SAAS,EAAE,EAAE,MAAM,MAAM;KACzC,UAAU;KACV,UAAU,oBAAC,uBAAD;MAAuB,MAAM;MAAO,QAAQ,YAAY,KAAK;KAAI,CAAA;KAC3E,WAAW;MACT,WAAW;MACX,gBAAgB,KAAA;MAChB,iBAAiB,KAAA;MACjB,eAAe,YAAY,KAAK,IAAI,OAAO,KAAA;MAC3C,SAAS;KACX;IACF,CAAC;GACgB,CAAA,GACnB,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,MAAM,SAAS,KAAK,UACnB,oBAAC,aAAa,MAAd;KAAkC,SAAA;KAC/B,UAAA,WAAW;MACV,UAAU,MAAM;MAChB,UAAU,MAAM,OAAO;MACvB,UACE,oBAAC,uBAAD;OACE,MAAM;OACN,QAAQ,MAAM,OAAO;OACrB,iBAAiB;OACjB,UAAU;MACX,CAAA;MAEH,WAAW;OACT,WAAW;OACX,gBAAgB,MAAM,OAAO,WAAW,SAAS,KAAA;OACjD,iBAAiB,KAAA;OACjB,eAAe,KAAA;OACf,SAAS;MACX;KACF,CAAC;IACgB,GApBK,MAAM,EAoBX,CACpB;GACE,CAAA,CACa,EAAA,GA3CK,MAAM,EA2CX,IAEpB,oBAAC,aAAa,MAAd;IAAkC,SAAA;IAC/B,UAAA,WAAW;KACV,UAAU,MAAM;KAChB,UAAU,MAAM,OAAO;KACvB,UAAU,oBAAC,uBAAD;MAAuB,MAAM;MAAO,QAAQ,MAAM,OAAO;KAAW,CAAA;KAC9E,WAAW;MACT,WAAW;MACX,gBAAgB,MAAM,OAAO,WAAW,SAAS,KAAA;MACjD,iBAAiB,KAAA;MACjB,eAAe,KAAA;MACf,SAAS;KACX;IACF,CAAC;GACgB,GAbK,MAAM,EAaX,CAEvB;EACoB,CAAA,CACV,EAAA,CAAA;CACX,CAAA,CACL,EAAA,CAAA;AAEN"}
|
|
1
|
+
{"version":3,"file":"SectionNav-Bw_MVL0_.js","names":[],"sources":["../src/blocks/SectionNav/SectionNavItemContent.tsx","../src/blocks/SectionNav/SectionNavGroupRow.tsx","../src/blocks/SectionNav/SectionNav.tsx"],"sourcesContent":["import { Badge } from '../../components/Badge';\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { SectionNavItem } from './types';\n\ntype Props = {\n item: SectionNavItem;\n /** Tints the title. */\n active: boolean;\n showDescription?: boolean;\n /** Group rows only — renders the chevron, pointing the way the list is about to move. */\n expanded?: boolean;\n /**\n * Sub-section rows pass `false`. A group's icon stands for the group, and repeating a glyph on\n * each indented child turns a short list into a column of competing marks: the indent and the\n * rule already say these belong to the row above. An item may still carry an `icon` for surfaces\n * that flatten the tree, such as a tab row, where every destination is top level.\n */\n showIcon?: boolean;\n};\n\n/**\n * One row's body, rendered identically in the tree and in the collapsed dropdown — same title, same\n * badge, same description. Shared rather than written twice so the two cannot drift.\n */\nexport const SectionNavItemContent = ({\n item,\n active,\n showDescription = false,\n expanded,\n showIcon = true,\n}: Props) => {\n const Icon = item.icon;\n\n return (\n <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-0.5\">\n <span className=\"tw:flex tw:items-center tw:gap-2\">\n {showIcon && Icon && <Icon className=\"tw:size-4 tw:shrink-0\" />}\n <span\n className={cn(\n 'tw:flex-1 tw:truncate tw:text-sm',\n active ? 'tw:font-medium tw:text-accent-foreground' : 'tw:text-foreground',\n )}\n >\n {item.title}\n </span>\n {item.isNew && (\n <Badge\n color=\"blue-inverse\"\n className=\"tw:min-h-0 tw:text-[10px]\"\n labelClassName=\"tw:px-1.5 tw:py-0\"\n >\n New\n </Badge>\n )}\n {expanded !== undefined && (\n <ChevronDown\n className={cn(\n 'tw:size-4 tw:shrink-0 tw:text-muted-foreground tw:transition-transform tw:duration-200',\n expanded && 'tw:rotate-180',\n )}\n />\n )}\n </span>\n {/* Descriptions wrap rather than truncate — they are the second line, not the label. A token\n with no break opportunity would still paint straight out of the 256px column, so break it. */}\n {showDescription && item.description && (\n <span className=\"tw:text-xs tw:break-words tw:text-muted-foreground\">\n {item.description}\n </span>\n )}\n </span>\n );\n};\n","import { useState } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { Collapsible } from '../../components/Collapsible';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n group: SectionNavGroup;\n activeId: string | undefined;\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n showDescriptions: boolean;\n};\n\n/**\n * The ring is **inset**, not an outline. A row is exactly as wide as the nav column, and\n * `PageLayout.Content nav` makes that column a scroll container (`overflow-y-auto`, which forces\n * `overflow-x` to `auto` too) — so there is 0px of slack for anything painted outside the border\n * box, and the browser's default `outline-offset: 1px` ring gets clipped on both edges. Painting\n * inside the box cannot be clipped, at any column width, by any ancestor.\n */\nconst FOCUS_RING =\n 'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring';\n\nconst rowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active\n ? 'tw:bg-accent tw:font-medium tw:text-accent-foreground'\n : 'tw:bg-transparent tw:text-foreground tw:hover:bg-muted',\n );\n\nconst childRowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active ? 'tw:bg-accent' : 'tw:bg-transparent tw:hover:bg-muted',\n );\n\n/**\n * One group row and its sub-sections. The row is a single control: it opens the group **and** goes to\n * its first section, and only collapses once you are already there — so the chevron never becomes a\n * separate thing to aim at, and one click always makes progress.\n */\nexport const SectionNavGroupRow = ({ group, activeId, renderItem, showDescriptions }: Props) => {\n // Open on arrival: the nav is short enough that hiding any of it costs more than it saves.\n const [open, setOpen] = useState(true);\n\n const hasChildren = group.children.length > 0;\n const targetId = group.children[0]?.id ?? group.id;\n const isCurrent = group.id === activeId;\n const holdsCurrent = isCurrent || group.children.some((child) => child.id === activeId);\n\n const onClick = (event: MouseEvent<HTMLElement>) => {\n if (!hasChildren) return;\n\n // Already on the row's target, so navigating would be a no-op and the only thing left for the\n // click to do is toggle. `preventDefault` is what tells the caller's link not to navigate.\n if (activeId === targetId) {\n event.preventDefault();\n setOpen((isOpen) => !isOpen);\n\n return;\n }\n\n setOpen(true);\n };\n\n return (\n <Collapsible open={open} onOpenChange={setOpen} className=\"tw:flex tw:flex-col tw:gap-0.5\">\n {renderItem({\n targetId,\n isActive: isCurrent,\n children: (\n <SectionNavItemContent\n item={group}\n active={holdsCurrent}\n expanded={hasChildren ? open : undefined}\n />\n ),\n itemProps: {\n className: rowClass(holdsCurrent),\n 'aria-current': isCurrent ? 'page' : undefined,\n 'aria-expanded': hasChildren ? open : undefined,\n 'data-active': holdsCurrent && !isCurrent ? true : undefined,\n onClick,\n },\n })}\n\n {hasChildren && (\n <Collapsible.Content>\n {/* `pl-1` keeps each row's background box off the group's rule — without it an active\n row's `bg-accent` sits flush against the line. 4px is also what lines the child titles\n (20 + 1 + 4 + 12 = 37px) up with the parent's, which its icon puts at 12 + 16 + 8 = 36px. */}\n {/* `my-0 mr-0` and not `m-0`: a host app emits its own `.tw\\:m-0` from its own source, and\n its stylesheet is the later one — shorthand and longhand at equal specificity means the\n app's `m-0` would land after this `ml-5` and flatten the indent. Longhands only, so\n nothing here can be overridden by a copy of a class this block also uses. */}\n <ul className=\"tw:my-0 tw:mr-0 tw:ml-5 tw:flex tw:list-none tw:flex-col tw:gap-0.5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => {\n const active = child.id === activeId;\n\n return (\n <li key={child.id}>\n {renderItem({\n targetId: child.id,\n isActive: active,\n children: (\n <SectionNavItemContent\n item={child}\n active={active}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: childRowClass(active),\n 'aria-current': active ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </li>\n );\n })}\n {group.note && (\n <li className=\"tw:py-1 tw:pl-3 tw:text-xs tw:text-muted-foreground\">{group.note}</li>\n )}\n </ul>\n </Collapsible.Content>\n )}\n </Collapsible>\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport { ChevronDown } from '../../icons';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavGroupRow } from './SectionNavGroupRow';\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n /**\n * The sections to show, already filtered. Visibility, permissions and feature flags stay in the\n * app — this block renders exactly what it is handed, in order.\n */\n groups: SectionNavGroup[];\n /** `id` of the current section: a child's, or a childless group's. */\n activeId?: string;\n /**\n * Renders the clickable element for one row, so routing never enters the design system. Return a\n * `NavLink` / TanStack `Link` / `<a>` pointing at `targetId` and spread `itemProps` onto it.\n */\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n /** Print each section's `description` under its title. Off — the tree stays scannable without it. */\n showDescriptions?: boolean;\n /** Accessible name for the tree's `<nav>`, and the collapsed label with nothing active. */\n label?: string;\n /** Applied to the tree's `<nav>`. The column's own geometry belongs to `PageLayout.Content nav`. */\n className?: string;\n};\n\n/**\n * In-page grouped navigation for one page's sections: a tree above the container's breakpoint, a\n * single dropdown below it. Both are rendered and CSS picks one, and both draw their rows through\n * the same renderer, so the two can never drift apart.\n *\n * **This is not `Sidebar`.** `Sidebar` is the app-level left rail — `SidebarProvider`, icon-collapse,\n * one per app shell, outside `PageLayout`. `SectionNav` is scoped to a single page's sections, lives\n * inside `PageLayout.Content`, and owns no global state. See `AGENTS.md`.\n *\n * **Router-agnostic:** `renderItem` is the seam. Pass it whatever your router calls a link.\n *\n * ```tsx\n * <PageLayout.Content nav={\n * <SectionNav\n * groups={groups}\n * activeId={activeId}\n * renderItem={({ targetId, children, itemProps }) => (\n * <Link to={targetId} {...itemProps}>{children}</Link>\n * )}\n * />\n * }>\n * {page}\n * </PageLayout.Content>\n * ```\n *\n * The tree↔dropdown switch is a **container** query on the content area's width, never the viewport\n * — a product sidebar or a chat panel narrows the page without the window resizing.\n * `PageLayout.Content nav={…}` names that container; standalone, put `tw:@container/section-nav` on\n * an ancestor yourself.\n *\n * @see RECIPES.md#section-nav\n */\nexport const SectionNav = ({\n groups,\n activeId,\n renderItem,\n showDescriptions = false,\n label = 'Sections',\n className,\n}: Props) => {\n /**\n * What the collapsed trigger names. A sub-section carries its group with it — \"Developer settings /\n * CLI agents\" — so the trigger says where you are, not just what page this is.\n */\n const activeChild = groups\n .flatMap((group) => group.children.map((child) => ({ group, child })))\n .find(({ child }) => child.id === activeId);\n const activeGroup = groups.find((group) => group.id === activeId);\n const current = activeChild\n ? {\n icon: activeChild.group.icon,\n title: activeChild.child.title,\n parent: activeChild.group.title,\n }\n : { icon: activeGroup?.icon, title: activeGroup?.title ?? label, parent: undefined };\n const CurrentIcon = current.icon;\n /** A group whose subtree holds the active section: tinted like the tree's row, but not `aria-current`. */\n const holdsActive = (group: SectionNavGroup) =>\n group.id === activeId || group.children.some((child) => child.id === activeId);\n\n return (\n <>\n {/* The reset is scoped (`.tailwindcss-preflight`, see `styles.css`), and the rows are\n caller-owned elements — `renderItem` returns the app's own `<a>`, which never inherits a\n scope this block does not open. Without it those rows are `content-box`, so the `w-full`\n + `px-3` in `rowClass` measures 24px wider than the 256px column and every row bleeds out\n of it. Opening the scope here covers the whole tree, rows included. */}\n {/* `display` is set by TWO container variants and never by a plain utility. A host app that\n emits `tw:flex` or `tw:hidden` from its own source ships an identical `.tw\\:flex` /\n `.tw\\:hidden` rule — same specificity, same layer, and its stylesheet is the later one, so\n whichever of the two this block wrote plainly would lose to the app's copy and the tree\n would be stuck visible or stuck hidden. Both variants are selectors only this block emits,\n and their queries are mutually exclusive, so nothing outside can outrank them. */}\n <nav\n aria-label={label}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:w-full tw:flex-col tw:gap-0.5 tw:@[640px]/section-nav:flex tw:@max-[640px]/section-nav:hidden',\n className,\n )}\n >\n {groups.map((group) => (\n <SectionNavGroupRow\n key={group.id}\n group={group}\n activeId={activeId}\n renderItem={renderItem}\n showDescriptions={showDescriptions}\n />\n ))}\n </nav>\n\n <div className=\"tw:w-full tw:bg-background tw:@[640px]/section-nav:hidden tw:@max-[640px]/section-nav:block\">\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n <Button variant=\"outline\" className=\"tw:w-full tw:justify-between\">\n <span className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-2\">\n {CurrentIcon && <CurrentIcon className=\"tw:size-4 tw:shrink-0\" />}\n {current.parent && (\n <>\n <span className=\"tw:truncate tw:font-normal tw:text-muted-foreground\">\n {current.parent}\n </span>\n <span className=\"tw:text-border\">/</span>\n </>\n )}\n <span className=\"tw:truncate tw:font-medium tw:text-foreground\">\n {current.title}\n </span>\n </span>\n <ChevronDown className=\"tw:size-4 tw:shrink-0\" />\n </Button>\n </DropdownMenu.Trigger>\n\n <DropdownMenu.Content\n align=\"start\"\n className=\"tw:w-(--radix-dropdown-menu-trigger-width)\"\n >\n {groups.map((group) =>\n group.children.length > 0 ? (\n <DropdownMenu.Group key={group.id}>\n {/* A real item, not a label: it is a destination in the tree (it goes to the\n group's first section), so a menu that made it unclickable would be a different\n navigation, not a smaller one. Same row treatment as every other item. */}\n <DropdownMenu.Item asChild>\n {renderItem({\n targetId: group.children[0]?.id ?? group.id,\n isActive: false,\n children: <SectionNavItemContent item={group} active={holdsActive(group)} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': undefined,\n 'aria-expanded': undefined,\n 'data-active': holdsActive(group) ? true : undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n <div className=\"tw:ml-5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => (\n <DropdownMenu.Item key={child.id} asChild>\n {renderItem({\n targetId: child.id,\n isActive: child.id === activeId,\n children: (\n <SectionNavItemContent\n item={child}\n active={child.id === activeId}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': child.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ))}\n </div>\n </DropdownMenu.Group>\n ) : (\n <DropdownMenu.Item key={group.id} asChild>\n {renderItem({\n targetId: group.id,\n isActive: group.id === activeId,\n children: <SectionNavItemContent item={group} active={group.id === activeId} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': group.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ),\n )}\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n </>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { useArgoDesign } from "./context-
|
|
2
|
+
import { useArgoDesign } from "./context-BrNtMc1H.js";
|
|
3
3
|
import { Check, ChevronDown, ChevronUp } from "./icons-Cek151jC.js";
|
|
4
|
-
import { Button } from "./Button-
|
|
5
|
-
import { overlayTriggerVariants } from "./styles-
|
|
4
|
+
import { Button } from "./Button-CPsEQuTN.js";
|
|
5
|
+
import { overlayTriggerVariants } from "./styles-BAFscjSV.js";
|
|
6
6
|
import { useId } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
@@ -53,7 +53,7 @@ const SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimi
|
|
|
53
53
|
const SelectItem = ({ ref, className, children, icon, ...props }) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
|
|
54
54
|
...props,
|
|
55
55
|
ref,
|
|
56
|
-
className: cn("tw:group/select-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/select-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/select-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:focus:outline-hidden", "tw:data-[highlighted]:bg-accent", "tw:group-data-[variant=default]/select-content:data-[highlighted]:bg-
|
|
56
|
+
className: cn("tw:group/select-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/select-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/select-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:focus:outline-hidden", "tw:data-[highlighted]:bg-accent", "tw:group-data-[variant=default]/select-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-accent-foreground", "tw:group-data-[variant=default]/select-content:data-[highlighted]:text-secondary-foreground", "tw:data-[disabled]:pointer-events-none", "tw:data-[disabled]:opacity-50", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='tw:size-'])]:size-4", className),
|
|
57
57
|
children: [
|
|
58
58
|
icon,
|
|
59
59
|
/* @__PURE__ */ jsx("span", {
|
|
@@ -178,4 +178,4 @@ Select.Separator = SelectSeparator;
|
|
|
178
178
|
//#endregion
|
|
179
179
|
export { Select };
|
|
180
180
|
|
|
181
|
-
//# sourceMappingURL=Select-
|
|
181
|
+
//# sourceMappingURL=Select-D6IZVvwL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select-D6IZVvwL.js","names":["SelectItemComponent"],"sources":["../src/components/Select/SelectContent.tsx","../src/components/Select/SelectGroup.tsx","../src/components/Select/SelectItem.tsx","../src/components/Select/SelectLabel.tsx","../src/components/Select/SelectRoot.tsx","../src/components/Select/SelectSeparator.tsx","../src/components/Select/SelectTrigger.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { ChevronDown, ChevronUp } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst scrollButtonStyles = cn(\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:rounded-sm',\n 'tw:p-1',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n);\n\ntype Variant = 'default' | 'argo';\n\n/**\n * Props for `Select.Content`. `container` portals the listbox into a custom element (useful inside modals).\n */\ntype Props = ComponentProps<typeof SelectPrimitive.Content> & {\n container?: HTMLElement | null;\n};\n\n/**\n * Listbox container for `Select`. Portals items into a popover sized to the trigger.\n * Normally rendered implicitly by `Select`; use directly only when composing custom item layouts via\n * the `Select.Root` / `Select.Trigger` / `Select.Content` compound parts.\n */\nexport const SelectContent = ({\n ref,\n className,\n children,\n container,\n position = 'popper',\n sideOffset = 4,\n ...props\n}: Props) => {\n const effectiveVariant: Variant = useArgoDesign() ? 'argo' : 'default';\n return (\n <SelectPrimitive.Portal container={container}>\n <SelectPrimitive.Content\n {...props}\n ref={ref}\n position={position}\n sideOffset={sideOffset}\n data-variant={effectiveVariant}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group/select-content',\n // Floating tier above Modal (1051): Tooltip 1060 / Combobox·Popover·Select 1055 / Modal 1051 / DropdownMenu.SubContent 1041 / FullScreenModal 1039\n 'tw:z-[1055]',\n\n // layout\n 'tw:flex tw:flex-col',\n 'tw:p-1',\n 'tw:data-[variant=default]:p-0',\n 'tw:overflow-hidden',\n 'tw:origin-(--radix-select-content-transform-origin)',\n\n // sizing\n 'tw:max-h-[var(--radix-select-content-available-height)]',\n 'tw:min-w-[var(--radix-select-trigger-width)]',\n\n // appearance\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n 'tw:shadow-md',\n 'tw:ring-1',\n 'tw:ring-foreground/10',\n 'tw:rounded-lg',\n 'tw:data-[variant=default]:rounded',\n\n // open animation\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=open]:zoom-in-95',\n\n // closed animation\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // position animations\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\n className,\n )}\n >\n <SelectPrimitive.ScrollUpButton className={scrollButtonStyles}>\n <ChevronUp />\n </SelectPrimitive.ScrollUpButton>\n\n <SelectPrimitive.Viewport\n className={cn({\n 'tw:h-[var(--radix-select-trigger-height)] tw:w-full tw:min-w-[var(--radix-select-trigger-width)]':\n position === 'popper',\n })}\n >\n {children}\n </SelectPrimitive.Viewport>\n\n <SelectPrimitive.ScrollDownButton className={scrollButtonStyles}>\n <ChevronDown />\n </SelectPrimitive.ScrollDownButton>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Group>;\n\nexport const SelectGroup = ({ className, ...props }: Props) => (\n <SelectPrimitive.Group {...props} className={cn('tw:flex tw:flex-col tw:gap-0.5', className)} />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { Check } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Item> & {\n icon?: ReactNode;\n};\n\nexport const SelectItem = ({ ref, className, children, icon, ...props }: Props) => (\n <SelectPrimitive.Item\n {...props}\n ref={ref}\n className={cn(\n 'tw:group/select-item',\n\n // layout\n 'tw:relative',\n 'tw:flex',\n 'tw:flex-1',\n 'tw:items-center',\n 'tw:gap-2',\n\n // spacing — default variant uses tighter radius and wider horizontal padding\n 'tw:py-2',\n 'tw:px-2',\n 'tw:group-data-[variant=default]/select-content:px-4',\n 'tw:rounded-lg',\n 'tw:group-data-[variant=default]/select-content:rounded-none',\n\n // typography\n 'tw:text-sm',\n 'tw:select-none',\n 'tw:cursor-default',\n 'tw:outline-hidden',\n\n // highlighted (keyboard / hover)\n 'tw:focus:outline-hidden',\n 'tw:data-[highlighted]:bg-accent',\n // The legacy highlight is a neutral step, not the argo accent.\n //\n // - `secondary` carries its own foreground, so fill and ink move together.\n // - `muted` is unusable: in dark it equals `popover`, so the band would disappear\n // into the listbox.\n 'tw:group-data-[variant=default]/select-content:data-[highlighted]:bg-secondary',\n 'tw:data-[highlighted]:text-accent-foreground',\n 'tw:group-data-[variant=default]/select-content:data-[highlighted]:text-secondary-foreground',\n\n // disabled\n 'tw:data-[disabled]:pointer-events-none',\n 'tw:data-[disabled]:opacity-50',\n\n // child svg defaults\n 'tw:[&_svg]:pointer-events-none',\n 'tw:[&_svg]:shrink-0',\n 'tw:[&_svg]:text-muted-foreground',\n \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n className,\n )}\n >\n {icon}\n <span className=\"tw:flex-1 tw:truncate\">\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </span>\n <SelectPrimitive.ItemIndicator className=\"tw:pointer-events-none\">\n <Check className=\"tw:size-4\" />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n);\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Label>;\n\nexport const SelectLabel = ({ className, ...props }: Props) => (\n <SelectPrimitive.Label\n {...props}\n className={cn(\n // Base (argo variant) — soft gray section label\n 'tw:px-2',\n 'tw:py-1.5',\n 'tw:text-xs',\n 'tw:font-medium',\n 'tw:leading-none',\n 'tw:text-muted-foreground',\n\n // Default variant — uppercase tracked label, matches Combobox default\n 'tw:group-data-[variant=default]/select-content:uppercase',\n 'tw:group-data-[variant=default]/select-content:font-semibold',\n 'tw:group-data-[variant=default]/select-content:tracking-wider',\n 'tw:group-data-[variant=default]/select-content:text-[11px]',\n 'tw:group-data-[variant=default]/select-content:text-black',\n 'tw:group-data-[variant=default]/select-content:pt-2',\n 'tw:group-data-[variant=default]/select-content:px-4',\n\n className,\n )}\n />\n);\n","import type { ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-select';\n\n// Mirror Radix's `SelectProps` as an explicit list. We can't infer via\n// `ComponentProps<typeof Root>` or reuse Radix's `SelectProps` directly: both\n// transitively reference the un-exported `SelectSharedProps` interface, and\n// TS4023 fires when DTS emits anything that consumes it (e.g. `useAppForm`).\n// Keep this in sync with `@radix-ui/react-select`'s `SelectProps` shape.\nexport type SelectRootProps = {\n // SelectSharedProps\n children?: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n dir?: 'ltr' | 'rtl';\n name?: string;\n autoComplete?: string;\n disabled?: boolean;\n required?: boolean;\n form?: string;\n // SelectProps\n value?: string;\n defaultValue?: string;\n onValueChange?(value: string): void;\n};\n\nexport const SelectRoot = (props: SelectRootProps) => <Root {...props} />;\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Separator>;\n\nexport const SelectSeparator = ({ className, ...props }: Props) => (\n <SelectPrimitive.Separator\n {...props}\n className={cn('tw:mx-2 tw:my-1 tw:h-px tw:bg-border', className)}\n />\n);\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { overlayTriggerVariants } from '../OverlayTrigger/styles';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Trigger> &\n Omit<VariantProps<typeof overlayTriggerVariants>, 'variant'> & {\n variant?: Exclude<VariantProps<typeof overlayTriggerVariants>['variant'], 'argo'> | 'inline';\n } & Pick<ComponentProps<typeof SelectPrimitive.Value>, 'placeholder'>;\n\nexport const SelectTrigger = ({\n ref,\n className,\n variant,\n state,\n sizing,\n placeholder,\n ...props\n}: Props) => {\n const isArgoDesign = useArgoDesign();\n const effectiveVariant = (() => {\n if (variant === 'inline') return 'inline';\n if (isArgoDesign) return 'argo';\n return variant;\n })();\n const isInlineVariant = effectiveVariant === 'inline';\n\n if (isInlineVariant)\n return (\n <SelectPrimitive.Trigger {...props} ref={ref} className={cn(className)} asChild>\n <Button variant=\"inline\">\n <SelectPrimitive.Value placeholder={placeholder} />\n <SelectPrimitive.Icon asChild>\n <ChevronDown />\n </SelectPrimitive.Icon>\n </Button>\n </SelectPrimitive.Trigger>\n );\n\n return (\n <SelectPrimitive.Trigger\n {...props}\n ref={ref}\n className={cn(\n overlayTriggerVariants({ variant: effectiveVariant, state, sizing }),\n className,\n )}\n >\n <SelectPrimitive.Value placeholder={placeholder} />\n <SelectPrimitive.Icon asChild>\n <ChevronDown className=\"tw:size-4 tw:text-muted-foreground\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n );\n};\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { SelectContent } from './SelectContent';\nimport { SelectGroup } from './SelectGroup';\nimport { SelectItem as SelectItemComponent } from './SelectItem';\nimport { SelectLabel } from './SelectLabel';\nimport { SelectRoot, type SelectRootProps } from './SelectRoot';\nimport { SelectSeparator } from './SelectSeparator';\nimport { SelectTrigger } from './SelectTrigger';\n\nexport type SelectItem = {\n value: string;\n label: ReactNode;\n icon?: ReactNode;\n disabled?: boolean;\n};\n\nexport type SelectItemGroup = {\n label?: ReactNode;\n items: readonly SelectItem[];\n};\n\nconst isGroup = (itemOrGroup: SelectItem | SelectItemGroup): itemOrGroup is SelectItemGroup =>\n 'items' in itemOrGroup;\n\ntype TriggerProps = ComponentProps<typeof SelectTrigger>;\n\ntype Props = Pick<\n SelectRootProps,\n | 'value'\n | 'defaultValue'\n | 'onValueChange'\n | 'disabled'\n | 'name'\n | 'required'\n | 'open'\n | 'defaultOpen'\n | 'onOpenChange'\n | 'dir'\n | 'autoComplete'\n | 'form'\n> &\n Pick<\n TriggerProps,\n | 'variant'\n | 'state'\n | 'sizing'\n | 'placeholder'\n | 'id'\n | 'className'\n | 'onBlur'\n | 'aria-describedby'\n | 'aria-invalid'\n | 'aria-required'\n > & {\n items?: readonly (SelectItem | SelectItemGroup)[];\n };\n\n/**\n * Single selection from a short enumerated list. Built on Radix Select.\n *\n * **When to use:** picking one value from ~10 or fewer options where search adds no value (status,\n * region, role). Pass a flat `items` array or grouped arrays with optional labels for headings.\n * **When NOT to use:** for longer lists with search use `Combobox`; for multi-select use `MultiCombobox`.\n * **Composition:** wrap in `FormGroup` for label + help text, or use `useAppForm` + `field.SelectField`\n * for forms with validation. Use the compound parts (`Select.Root`, `Select.Trigger`, `Select.Content`,\n * `Select.Item`) for custom item layouts; the top-level `Select` covers the common cases.\n */\nexport const Select = ({\n // root\n value,\n defaultValue,\n onValueChange,\n disabled,\n name,\n required,\n open,\n defaultOpen,\n onOpenChange,\n dir,\n autoComplete,\n form,\n // trigger\n variant,\n state,\n sizing,\n placeholder,\n id,\n className,\n onBlur,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n // items\n items = [],\n}: Props) => {\n const groupKeyId = useId();\n\n const renderItem = (item: SelectItem) => (\n <SelectItemComponent\n key={item.value}\n value={item.value}\n icon={item.icon}\n disabled={item.disabled}\n >\n {item.label}\n </SelectItemComponent>\n );\n\n return (\n <SelectRoot\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n disabled={disabled}\n name={name}\n required={required}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n dir={dir}\n autoComplete={autoComplete}\n form={form}\n >\n <SelectTrigger\n variant={variant}\n state={state}\n sizing={sizing}\n placeholder={placeholder}\n id={id}\n className={className}\n onBlur={onBlur}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n aria-required={ariaRequired}\n />\n <SelectContent>\n {items.map((itemOrGroup, index) => {\n if (isGroup(itemOrGroup)) {\n return (\n <SelectGroup key={`${groupKeyId}-group-${index}`}>\n {itemOrGroup.label && <SelectLabel>{itemOrGroup.label}</SelectLabel>}\n {itemOrGroup.items.map(renderItem)}\n </SelectGroup>\n );\n }\n\n return renderItem(itemOrGroup);\n })}\n </SelectContent>\n </SelectRoot>\n );\n};\n\nSelect.Root = SelectRoot;\nSelect.Trigger = SelectTrigger;\nSelect.Content = SelectContent;\nSelect.Item = SelectItemComponent;\nSelect.Group = SelectGroup;\nSelect.Label = SelectLabel;\nSelect.Separator = SelectSeparator;\n"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { cn } from "./classNames-BzrkDnOD.js";
|
|
2
|
-
import { useArgoDesign } from "./context-
|
|
2
|
+
import { useArgoDesign } from "./context-BrNtMc1H.js";
|
|
3
3
|
import { X } from "./icons-Cek151jC.js";
|
|
4
|
-
import { Button } from "./Button-
|
|
4
|
+
import { Button } from "./Button-CPsEQuTN.js";
|
|
5
5
|
import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-C76ke2eo.js";
|
|
6
6
|
import { cva } from "class-variance-authority";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -166,4 +166,4 @@ Sheet.Body = SheetBody;
|
|
|
166
166
|
//#endregion
|
|
167
167
|
export { Sheet };
|
|
168
168
|
|
|
169
|
-
//# sourceMappingURL=Sheet-
|
|
169
|
+
//# sourceMappingURL=Sheet-BIzs2K2H.js.map
|