@cloudflare/kumo 1.19.0 → 2.0.1
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/CHANGELOG.md +248 -0
- package/ai/component-registry.json +764 -131
- package/ai/component-registry.md +1161 -163
- package/ai/schemas.ts +42 -14
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +153 -21
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +1994 -1956
- package/dist/ai/schemas.js.map +1 -1
- package/dist/blocks-source/resource-list/resource-list.tsx +1 -1
- package/dist/chunks/Legend-ibjxhfm9pn2vrb6f.js +430 -0
- package/dist/chunks/Legend-ibjxhfm9pn2vrb6f.js.map +1 -0
- package/dist/chunks/autocomplete-48aq0d244bs2e8zv.js +174 -0
- package/dist/chunks/autocomplete-48aq0d244bs2e8zv.js.map +1 -0
- package/dist/chunks/{breadcrumbs-ge20hcb3o5spswrk.js → breadcrumbs-cxcwf2l1ki3ffg5d.js} +2 -2
- package/dist/chunks/{breadcrumbs-ge20hcb3o5spswrk.js.map → breadcrumbs-cxcwf2l1ki3ffg5d.js.map} +1 -1
- package/dist/chunks/{button-oaqi7ykdisyskoos.js → button-6by9ntsa3nj553mq.js} +23 -24
- package/dist/chunks/button-6by9ntsa3nj553mq.js.map +1 -0
- package/dist/chunks/checkbox-hvxfvhtx1qjo2mww.js +210 -0
- package/dist/chunks/checkbox-hvxfvhtx1qjo2mww.js.map +1 -0
- package/dist/chunks/{clipboard-text-dxczqon3d27xp6f0.js → clipboard-text-hswydzx3iql369sd.js} +45 -41
- package/dist/chunks/{clipboard-text-dxczqon3d27xp6f0.js.map → clipboard-text-hswydzx3iql369sd.js.map} +1 -1
- package/dist/chunks/{code-cz0w1y5z4h29a9eg.js → code-f9v1ikwhekqw274q.js} +4 -4
- package/dist/chunks/{code-cz0w1y5z4h29a9eg.js.map → code-f9v1ikwhekqw274q.js.map} +1 -1
- package/dist/chunks/collapsible-k8urhi16pg90jvxa.js +71 -0
- package/dist/chunks/collapsible-k8urhi16pg90jvxa.js.map +1 -0
- package/dist/chunks/{combobox-eaowwt1xr4d23gsn.js → combobox-fq36ye0hstote16x.js} +90 -78
- package/dist/chunks/combobox-fq36ye0hstote16x.js.map +1 -0
- package/dist/chunks/{command-palette-maqtbmpfev9mysqd.js → command-palette-md65owxt5hv4rt9r.js} +68 -68
- package/dist/chunks/command-palette-md65owxt5hv4rt9r.js.map +1 -0
- package/dist/chunks/{date-range-picker-j318zxjyqz4o3dak.js → date-range-picker-o8uyril1kogvhoei.js} +11 -11
- package/dist/chunks/{date-range-picker-j318zxjyqz4o3dak.js.map → date-range-picker-o8uyril1kogvhoei.js.map} +1 -1
- package/dist/chunks/{dialog-e3m5bhs7fds26p9y.js → dialog-k3f1fbam6nt96k8x.js} +3 -3
- package/dist/chunks/{dialog-e3m5bhs7fds26p9y.js.map → dialog-k3f1fbam6nt96k8x.js.map} +1 -1
- package/dist/chunks/{dropdown-ewte287db3vyt8t5.js → dropdown-zbax0zowy6m9zhmt.js} +87 -87
- package/dist/chunks/dropdown-zbax0zowy6m9zhmt.js.map +1 -0
- package/dist/chunks/{empty-dr1eckm2z40euns6.js → empty-b82oer7npkhtkx7k.js} +14 -14
- package/dist/chunks/{empty-dr1eckm2z40euns6.js.map → empty-b82oer7npkhtkx7k.js.map} +1 -1
- package/dist/chunks/{field-bo5gmna16odrrb1q.js → field-c0wf94plit2gci59.js} +7 -7
- package/dist/chunks/{field-bo5gmna16odrrb1q.js.map → field-c0wf94plit2gci59.js.map} +1 -1
- package/dist/chunks/{input-area-jkkkjej6luumrqpa.js → input-area-bkyzu6f7gsck479h.js} +4 -4
- package/dist/chunks/{input-area-jkkkjej6luumrqpa.js.map → input-area-bkyzu6f7gsck479h.js.map} +1 -1
- package/dist/chunks/input-group-bidweffa0zyg8gt0.js +505 -0
- package/dist/chunks/input-group-bidweffa0zyg8gt0.js.map +1 -0
- package/dist/chunks/{input-cw05pbqdburghkus.js → input-ncfowphv81yq7fyy.js} +44 -44
- package/dist/chunks/input-ncfowphv81yq7fyy.js.map +1 -0
- package/dist/chunks/{label-cvyvbqmt4mt757ff.js → label-c3h9i3y4wiccelt7.js} +22 -22
- package/dist/chunks/{label-cvyvbqmt4mt757ff.js.map → label-c3h9i3y4wiccelt7.js.map} +1 -1
- package/dist/chunks/{layer-card-ljqth3yxgnk04v2o.js → layer-card-ikm31xemd70w3lru.js} +5 -5
- package/dist/chunks/{layer-card-ljqth3yxgnk04v2o.js.map → layer-card-ikm31xemd70w3lru.js.map} +1 -1
- package/dist/chunks/{link-fjnhtxvfe5ieamjf.js → link-kt74pxkud4olmcer.js} +4 -4
- package/dist/chunks/{link-fjnhtxvfe5ieamjf.js.map → link-kt74pxkud4olmcer.js.map} +1 -1
- package/dist/chunks/menubar-hwev159bm4rw9ixk.js +96 -0
- package/dist/chunks/menubar-hwev159bm4rw9ixk.js.map +1 -0
- package/dist/chunks/{meter-duj3micor1lqj3y2.js → meter-n34a7yb8c3rim26i.js} +3 -3
- package/dist/chunks/{meter-duj3micor1lqj3y2.js.map → meter-n34a7yb8c3rim26i.js.map} +1 -1
- package/dist/chunks/{pagination-olaypvwr8swsmn8m.js → pagination-jb3mncivbwsoi1se.js} +56 -56
- package/dist/chunks/pagination-jb3mncivbwsoi1se.js.map +1 -0
- package/dist/chunks/{popover-nv9cmzbo7mf6bky0.js → popover-iayd9ya5yhujz6ve.js} +5 -5
- package/dist/chunks/{popover-nv9cmzbo7mf6bky0.js.map → popover-iayd9ya5yhujz6ve.js.map} +1 -1
- package/dist/chunks/{radio-ihxbe37us2jnqtzf.js → radio-datzh3pilz8ojak1.js} +86 -74
- package/dist/chunks/radio-datzh3pilz8ojak1.js.map +1 -0
- package/dist/chunks/{select-nx6ded5swra74iar.js → select-g261chvosodu22i8.js} +64 -62
- package/dist/chunks/select-g261chvosodu22i8.js.map +1 -0
- package/dist/chunks/{sensitive-input-00fujb510rrn61v9.js → sensitive-input-cijagk551mesdtk4.js} +42 -42
- package/dist/chunks/sensitive-input-cijagk551mesdtk4.js.map +1 -0
- package/dist/chunks/{sidebar-ltbfius1eolkl8tb.js → sidebar-kb9kykqfgy5yzqwr.js} +132 -129
- package/dist/chunks/sidebar-kb9kykqfgy5yzqwr.js.map +1 -0
- package/dist/chunks/{surface-dfgurg5eu3et4vw1.js → surface-k0e8mq1x00b7i8r6.js} +2 -2
- package/dist/chunks/{surface-dfgurg5eu3et4vw1.js.map → surface-k0e8mq1x00b7i8r6.js.map} +1 -1
- package/dist/chunks/{switch-fbv3iawqo3o3jgap.js → switch-jdfsr3j3oa1qxegw.js} +86 -78
- package/dist/chunks/switch-jdfsr3j3oa1qxegw.js.map +1 -0
- package/dist/chunks/{table-olwwulga2l3hdwlx.js → table-iudje0lva0z68jto.js} +89 -71
- package/dist/chunks/table-iudje0lva0z68jto.js.map +1 -0
- package/dist/chunks/table-of-contents-fzyv7uhnnyr13dqu.js +102 -0
- package/dist/chunks/table-of-contents-fzyv7uhnnyr13dqu.js.map +1 -0
- package/dist/chunks/{tabs-lohcglgppp6gj0hp.js → tabs-mkhf1uemgr3ij0ps.js} +20 -20
- package/dist/chunks/{tabs-lohcglgppp6gj0hp.js.map → tabs-mkhf1uemgr3ij0ps.js.map} +1 -1
- package/dist/chunks/{text-nmyi1rkwdj37f30f.js → text-f7t467waymhb30sx.js} +8 -8
- package/dist/chunks/text-f7t467waymhb30sx.js.map +1 -0
- package/dist/chunks/{toast-dg52x89yd231mxhe.js → toast-h573o0tc7tefivk2.js} +11 -11
- package/dist/chunks/toast-h573o0tc7tefivk2.js.map +1 -0
- package/dist/chunks/{tooltip-hikjvdbg3xghnq1x.js → tooltip-odudhkxe282wxinq.js} +5 -5
- package/dist/chunks/{tooltip-hikjvdbg3xghnq1x.js.map → tooltip-odudhkxe282wxinq.js.map} +1 -1
- package/dist/chunks/vendor-base-ui-ie71jahf0czyf58j.js +24638 -0
- package/dist/chunks/vendor-base-ui-ie71jahf0czyf58j.js.map +1 -0
- package/dist/chunks/vendor-floating-ui-dwag5e88viikh2zs.js +1311 -0
- package/dist/chunks/vendor-floating-ui-dwag5e88viikh2zs.js.map +1 -0
- package/dist/chunks/vendor-utils-ixnhxmehwihk5tr7.js +534 -0
- package/dist/chunks/vendor-utils-ixnhxmehwihk5tr7.js.map +1 -0
- package/dist/code.js +31 -31
- package/dist/code.js.map +1 -1
- package/dist/components/autocomplete.js +9 -0
- package/dist/components/autocomplete.js.map +1 -0
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/chart.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/code.js +1 -1
- package/dist/components/collapsible.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/command-palette.js +1 -1
- package/dist/components/date-range-picker.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/dropdown.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input-group.js +8 -0
- package/dist/components/input-group.js.map +1 -0
- package/dist/components/input.js +9 -7
- package/dist/components/label.js +1 -1
- package/dist/components/layer-card.js +1 -1
- package/dist/components/link.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/meter.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/popover.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/surface.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table-of-contents.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/text.js +1 -1
- package/dist/components/toast.js +2 -2
- package/dist/components/tooltip.js +1 -1
- package/dist/index.js +149 -144
- package/dist/index.js.map +1 -1
- package/dist/primitives/accordion.js +1 -1
- package/dist/primitives/alert-dialog.js +1 -1
- package/dist/primitives/autocomplete.js +1 -1
- package/dist/primitives/avatar.js +1 -1
- package/dist/primitives/button.js +1 -1
- package/dist/primitives/checkbox-group.js +1 -1
- package/dist/primitives/checkbox.js +1 -1
- package/dist/primitives/collapsible.js +1 -1
- package/dist/primitives/combobox.js +1 -1
- package/dist/primitives/context-menu.js +1 -1
- package/dist/primitives/csp-provider.js +1 -1
- package/dist/primitives/dialog.js +1 -1
- package/dist/primitives/direction-provider.js +1 -1
- package/dist/primitives/drawer.js +2 -2
- package/dist/primitives/field.js +1 -1
- package/dist/primitives/fieldset.js +1 -1
- package/dist/primitives/form.js +1 -1
- package/dist/primitives/input.js +1 -1
- package/dist/primitives/menu.js +1 -1
- package/dist/primitives/menubar.js +1 -1
- package/dist/primitives/meter.js +1 -1
- package/dist/primitives/navigation-menu.js +1 -1
- package/dist/primitives/number-field.js +1 -1
- package/dist/primitives/otp-field.js +6 -0
- package/dist/primitives/otp-field.js.map +1 -0
- package/dist/primitives/popover.js +1 -1
- package/dist/primitives/preview-card.js +2 -2
- package/dist/primitives/progress.js +1 -1
- package/dist/primitives/radio-group.js +1 -1
- package/dist/primitives/radio.js +1 -1
- package/dist/primitives/scroll-area.js +1 -1
- package/dist/primitives/select.js +1 -1
- package/dist/primitives/separator.js +1 -1
- package/dist/primitives/slider.js +1 -1
- package/dist/primitives/switch.js +1 -1
- package/dist/primitives/tabs.js +1 -1
- package/dist/primitives/toast.js +1 -1
- package/dist/primitives/toggle-group.js +1 -1
- package/dist/primitives/toggle.js +1 -1
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives/tooltip.js +1 -1
- package/dist/primitives.js +22 -21
- package/dist/scripts/theme-generator/config.d.ts.map +1 -1
- package/dist/scripts/theme-generator/config.js +21 -4
- package/dist/scripts/theme-generator/config.js.map +1 -1
- package/dist/src/components/autocomplete/autocomplete.d.ts +180 -0
- package/dist/src/components/autocomplete/autocomplete.d.ts.map +1 -0
- package/dist/src/components/autocomplete/index.d.ts +2 -0
- package/dist/src/components/autocomplete/index.d.ts.map +1 -0
- package/dist/src/components/button/button.d.ts +3 -3
- package/dist/src/components/button/button.d.ts.map +1 -1
- package/dist/src/components/chart/Color.d.ts +36 -52
- package/dist/src/components/chart/Color.d.ts.map +1 -1
- package/dist/src/components/checkbox/checkbox.d.ts +37 -14
- package/dist/src/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/src/components/checkbox/index.d.ts +1 -1
- package/dist/src/components/checkbox/index.d.ts.map +1 -1
- package/dist/src/components/clipboard-text/clipboard-text.d.ts.map +1 -1
- package/dist/src/components/code/code.d.ts +2 -2
- package/dist/src/components/collapsible/collapsible.d.ts +77 -40
- package/dist/src/components/collapsible/collapsible.d.ts.map +1 -1
- package/dist/src/components/collapsible/index.d.ts +1 -1
- package/dist/src/components/collapsible/index.d.ts.map +1 -1
- package/dist/src/components/combobox/combobox.d.ts +3 -1
- package/dist/src/components/combobox/combobox.d.ts.map +1 -1
- package/dist/src/components/command-palette/command-palette.d.ts +2 -11
- package/dist/src/components/command-palette/command-palette.d.ts.map +1 -1
- package/dist/src/components/command-palette/index.d.ts +1 -1
- package/dist/src/components/command-palette/index.d.ts.map +1 -1
- package/dist/src/components/command-palette/types.d.ts +13 -1
- package/dist/src/components/command-palette/types.d.ts.map +1 -1
- package/dist/src/components/input/index.d.ts +16 -1
- package/dist/src/components/input/index.d.ts.map +1 -1
- package/dist/src/components/input/input.d.ts +2 -2
- package/dist/src/components/input/input.d.ts.map +1 -1
- package/dist/src/components/input-group/context.d.ts +96 -0
- package/dist/src/components/input-group/context.d.ts.map +1 -0
- package/dist/src/components/input-group/index.d.ts +2 -0
- package/dist/src/components/input-group/index.d.ts.map +1 -0
- package/dist/src/components/input-group/input-group-addon.d.ts +15 -0
- package/dist/src/components/input-group/input-group-addon.d.ts.map +1 -0
- package/dist/src/components/input-group/input-group-button.d.ts +36 -0
- package/dist/src/components/input-group/input-group-button.d.ts.map +1 -0
- package/dist/src/components/input-group/input-group-input.d.ts +9 -0
- package/dist/src/components/input-group/input-group-input.d.ts.map +1 -0
- package/dist/src/components/input-group/input-group-suffix.d.ts +13 -0
- package/dist/src/components/input-group/input-group-suffix.d.ts.map +1 -0
- package/dist/src/components/input-group/input-group.d.ts +43 -0
- package/dist/src/components/input-group/input-group.d.ts.map +1 -0
- package/dist/src/components/menubar/menubar.d.ts.map +1 -1
- package/dist/src/components/radio/index.d.ts +1 -1
- package/dist/src/components/radio/index.d.ts.map +1 -1
- package/dist/src/components/radio/radio.d.ts +43 -7
- package/dist/src/components/radio/radio.d.ts.map +1 -1
- package/dist/src/components/select/select.d.ts +3 -3
- package/dist/src/components/select/select.d.ts.map +1 -1
- package/dist/src/components/sensitive-input/sensitive-input.d.ts +2 -2
- package/dist/src/components/sidebar/sidebar.d.ts.map +1 -1
- package/dist/src/components/switch/index.d.ts +1 -1
- package/dist/src/components/switch/index.d.ts.map +1 -1
- package/dist/src/components/switch/switch.d.ts +31 -3
- package/dist/src/components/switch/switch.d.ts.map +1 -1
- package/dist/src/components/table/table.d.ts +17 -2
- package/dist/src/components/table/table.d.ts.map +1 -1
- package/dist/src/components/table-of-contents/table-of-contents.d.ts +9 -7
- package/dist/src/components/table-of-contents/table-of-contents.d.ts.map +1 -1
- package/dist/src/components/text/text.d.ts +34 -6
- package/dist/src/components/text/text.d.ts.map +1 -1
- package/dist/src/components/text/text.type-spec.d.ts +44 -0
- package/dist/src/components/text/text.type-spec.d.ts.map +1 -0
- package/dist/src/components/toast/toast.d.ts +2 -2
- package/dist/src/components/toast/toast.d.ts.map +1 -1
- package/dist/src/index.d.ts +8 -6
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/primitives/index.d.ts +1 -0
- package/dist/src/primitives/index.d.ts.map +1 -1
- package/dist/src/primitives/otp-field.d.ts +13 -0
- package/dist/src/primitives/otp-field.d.ts.map +1 -0
- package/dist/styles/kumo-binding.css +18 -0
- package/dist/styles/kumo-standalone.css +1 -1
- package/dist/styles/kumo.css +2 -2
- package/dist/styles/theme-kumo.css +15 -8
- package/package.json +14 -2
- package/scripts/component-registry/discovery.ts +1 -0
- package/scripts/component-registry/index.test.ts +265 -0
- package/scripts/component-registry/index.ts +14 -0
- package/scripts/component-registry/metadata.ts +56 -8
- package/scripts/component-registry/sub-components.ts +81 -50
- package/scripts/component-registry/types.ts +2 -0
- package/scripts/theme-generator/config.ts +19 -9
- package/dist/chunks/Legend-ks7se6149vsa3tze.js +0 -430
- package/dist/chunks/Legend-ks7se6149vsa3tze.js.map +0 -1
- package/dist/chunks/button-oaqi7ykdisyskoos.js.map +0 -1
- package/dist/chunks/checkbox-mwgmohffm22ut13s.js +0 -211
- package/dist/chunks/checkbox-mwgmohffm22ut13s.js.map +0 -1
- package/dist/chunks/collapsible-jhzee3ks51d3xowb.js +0 -58
- package/dist/chunks/collapsible-jhzee3ks51d3xowb.js.map +0 -1
- package/dist/chunks/combobox-eaowwt1xr4d23gsn.js.map +0 -1
- package/dist/chunks/command-palette-maqtbmpfev9mysqd.js.map +0 -1
- package/dist/chunks/dropdown-ewte287db3vyt8t5.js.map +0 -1
- package/dist/chunks/input-cw05pbqdburghkus.js.map +0 -1
- package/dist/chunks/input-group-lfugneuz71g42n0w.js +0 -111
- package/dist/chunks/input-group-lfugneuz71g42n0w.js.map +0 -1
- package/dist/chunks/menubar-e5e4zwfagr0wx023.js +0 -96
- package/dist/chunks/menubar-e5e4zwfagr0wx023.js.map +0 -1
- package/dist/chunks/pagination-olaypvwr8swsmn8m.js.map +0 -1
- package/dist/chunks/radio-ihxbe37us2jnqtzf.js.map +0 -1
- package/dist/chunks/select-nx6ded5swra74iar.js.map +0 -1
- package/dist/chunks/sensitive-input-00fujb510rrn61v9.js.map +0 -1
- package/dist/chunks/sidebar-ltbfius1eolkl8tb.js.map +0 -1
- package/dist/chunks/switch-fbv3iawqo3o3jgap.js.map +0 -1
- package/dist/chunks/table-of-contents-f813ivi7ta23vqdm.js +0 -88
- package/dist/chunks/table-of-contents-f813ivi7ta23vqdm.js.map +0 -1
- package/dist/chunks/table-olwwulga2l3hdwlx.js.map +0 -1
- package/dist/chunks/text-nmyi1rkwdj37f30f.js.map +0 -1
- package/dist/chunks/toast-dg52x89yd231mxhe.js.map +0 -1
- package/dist/chunks/vendor-base-ui-m5pz3e8c4grg5qmj.js +0 -22813
- package/dist/chunks/vendor-base-ui-m5pz3e8c4grg5qmj.js.map +0 -1
- package/dist/chunks/vendor-floating-ui-gr9m6tsa1cpqwn99.js +0 -1286
- package/dist/chunks/vendor-floating-ui-gr9m6tsa1cpqwn99.js.map +0 -1
- package/dist/chunks/vendor-utils-fxk97j6xi1g42z2v.js +0 -740
- package/dist/chunks/vendor-utils-fxk97j6xi1g42z2v.js.map +0 -1
- package/dist/src/components/input/input-group.d.ts +0 -39
- package/dist/src/components/input/input-group.d.ts.map +0 -1
|
@@ -1,211 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as e, jsxs as C } from "react/jsx-runtime";
|
|
3
|
-
import { forwardRef as N, createContext as B, useContext as F } from "react";
|
|
4
|
-
import { MinusIcon as y, CheckIcon as w } from "@phosphor-icons/react";
|
|
5
|
-
import { c as b } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
import { L as K } from "./label-cvyvbqmt4mt757ff.js";
|
|
7
|
-
import { K as j, L, N as E, O as R, C as _, P as G, Q as M } from "./vendor-base-ui-m5pz3e8c4grg5qmj.js";
|
|
8
|
-
const Q = {
|
|
9
|
-
variant: {
|
|
10
|
-
default: {
|
|
11
|
-
classes: "[&:focus-within>span]:ring-kumo-hairline [&:hover>span]:ring-kumo-hairline",
|
|
12
|
-
description: "Default checkbox appearance"
|
|
13
|
-
},
|
|
14
|
-
error: {
|
|
15
|
-
classes: "[&>span]:ring-kumo-danger",
|
|
16
|
-
description: "Error state for validation failures"
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}, W = {
|
|
20
|
-
variant: "default"
|
|
21
|
-
}, O = B({
|
|
22
|
-
controlFirst: !0
|
|
23
|
-
}), A = N(
|
|
24
|
-
({
|
|
25
|
-
className: s,
|
|
26
|
-
checked: c,
|
|
27
|
-
indeterminate: o,
|
|
28
|
-
disabled: t,
|
|
29
|
-
variant: l = "default",
|
|
30
|
-
label: r,
|
|
31
|
-
labelTooltip: m,
|
|
32
|
-
controlFirst: u = !0,
|
|
33
|
-
onCheckedChange: d,
|
|
34
|
-
onValueChange: h,
|
|
35
|
-
onChange: i,
|
|
36
|
-
required: f,
|
|
37
|
-
name: x,
|
|
38
|
-
...a
|
|
39
|
-
}, g) => {
|
|
40
|
-
if (process.env.NODE_ENV !== "production") {
|
|
41
|
-
const n = !!r, k = !!a["aria-label"], p = !!a["aria-labelledby"];
|
|
42
|
-
!n && !k && !p && console.warn(
|
|
43
|
-
`[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:
|
|
44
|
-
- label prop: <Checkbox label='Accept terms' />
|
|
45
|
-
- aria-label: <Checkbox aria-label='Select item' />
|
|
46
|
-
- aria-labelledby for custom label association
|
|
47
|
-
Note: When used inside Checkbox.Group, label is optional`
|
|
48
|
-
);
|
|
49
|
-
}
|
|
50
|
-
const v = /* @__PURE__ */ e(
|
|
51
|
-
j,
|
|
52
|
-
{
|
|
53
|
-
ref: g,
|
|
54
|
-
name: x,
|
|
55
|
-
checked: c,
|
|
56
|
-
indeterminate: o,
|
|
57
|
-
disabled: t,
|
|
58
|
-
onCheckedChange: (n, k) => {
|
|
59
|
-
if (d?.(n), h?.(n), i) {
|
|
60
|
-
const p = Object.assign(k.event, {
|
|
61
|
-
target: { checked: n }
|
|
62
|
-
});
|
|
63
|
-
i(p);
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
className: b(
|
|
67
|
-
"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
|
|
68
|
-
l === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
|
|
69
|
-
!t && "hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
|
|
70
|
-
"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast",
|
|
71
|
-
t && "cursor-not-allowed opacity-50",
|
|
72
|
-
s
|
|
73
|
-
),
|
|
74
|
-
...a,
|
|
75
|
-
children: /* @__PURE__ */ e(
|
|
76
|
-
L,
|
|
77
|
-
{
|
|
78
|
-
keepMounted: !0,
|
|
79
|
-
className: "flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible",
|
|
80
|
-
render: (n, k) => /* @__PURE__ */ e("span", { ...n, children: k.indeterminate ? /* @__PURE__ */ e(y, { weight: "bold", size: 12 }) : /* @__PURE__ */ e(w, { weight: "bold", size: 12 }) })
|
|
81
|
-
}
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
);
|
|
85
|
-
return r ? /* @__PURE__ */ e(E, { className: "inline-flex", children: /* @__PURE__ */ C(
|
|
86
|
-
R,
|
|
87
|
-
{
|
|
88
|
-
className: b(
|
|
89
|
-
"!m-0 !min-h-0 !text-base inline-flex items-center gap-2",
|
|
90
|
-
u ? "flex-row" : "flex-row-reverse justify-end",
|
|
91
|
-
t ? "cursor-not-allowed" : "cursor-pointer"
|
|
92
|
-
),
|
|
93
|
-
children: [
|
|
94
|
-
v,
|
|
95
|
-
/* @__PURE__ */ e(
|
|
96
|
-
K,
|
|
97
|
-
{
|
|
98
|
-
showOptional: f === !1,
|
|
99
|
-
tooltip: m,
|
|
100
|
-
asContent: !0,
|
|
101
|
-
children: r
|
|
102
|
-
}
|
|
103
|
-
)
|
|
104
|
-
]
|
|
105
|
-
}
|
|
106
|
-
) }) : v;
|
|
107
|
-
}
|
|
108
|
-
);
|
|
109
|
-
A.displayName = "Checkbox";
|
|
110
|
-
const I = N(
|
|
111
|
-
({
|
|
112
|
-
className: s,
|
|
113
|
-
checked: c,
|
|
114
|
-
indeterminate: o,
|
|
115
|
-
disabled: t,
|
|
116
|
-
variant: l = "default",
|
|
117
|
-
label: r,
|
|
118
|
-
value: m,
|
|
119
|
-
onCheckedChange: u,
|
|
120
|
-
onValueChange: d,
|
|
121
|
-
name: h
|
|
122
|
-
}, i) => {
|
|
123
|
-
const { controlFirst: f } = F(O), x = (a) => {
|
|
124
|
-
u?.(a), d?.(a);
|
|
125
|
-
};
|
|
126
|
-
return /* @__PURE__ */ C(
|
|
127
|
-
"label",
|
|
128
|
-
{
|
|
129
|
-
className: b(
|
|
130
|
-
"m-0 relative inline-flex items-center gap-2",
|
|
131
|
-
// Control first (default): checkbox before label
|
|
132
|
-
// Label first: label before checkbox using flex-row-reverse
|
|
133
|
-
!f && "flex-row-reverse justify-end",
|
|
134
|
-
t ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
135
|
-
s
|
|
136
|
-
),
|
|
137
|
-
children: [
|
|
138
|
-
/* @__PURE__ */ e(
|
|
139
|
-
j,
|
|
140
|
-
{
|
|
141
|
-
ref: i,
|
|
142
|
-
value: m,
|
|
143
|
-
name: h,
|
|
144
|
-
checked: c,
|
|
145
|
-
indeterminate: o,
|
|
146
|
-
disabled: t,
|
|
147
|
-
onCheckedChange: x,
|
|
148
|
-
className: b(
|
|
149
|
-
"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2",
|
|
150
|
-
l === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
|
|
151
|
-
!t && "group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus-visible:ring-kumo-hairline",
|
|
152
|
-
"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast"
|
|
153
|
-
),
|
|
154
|
-
children: /* @__PURE__ */ e(
|
|
155
|
-
L,
|
|
156
|
-
{
|
|
157
|
-
keepMounted: !0,
|
|
158
|
-
className: "flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible",
|
|
159
|
-
render: (a, g) => /* @__PURE__ */ e("span", { ...a, children: g.indeterminate ? /* @__PURE__ */ e(y, { weight: "bold", size: 12 }) : /* @__PURE__ */ e(w, { weight: "bold", size: 12 }) })
|
|
160
|
-
}
|
|
161
|
-
)
|
|
162
|
-
}
|
|
163
|
-
),
|
|
164
|
-
/* @__PURE__ */ e("span", { className: "text-base text-kumo-default", children: r })
|
|
165
|
-
]
|
|
166
|
-
}
|
|
167
|
-
);
|
|
168
|
-
}
|
|
169
|
-
);
|
|
170
|
-
I.displayName = "Checkbox.Item";
|
|
171
|
-
function z({
|
|
172
|
-
legend: s,
|
|
173
|
-
children: c,
|
|
174
|
-
error: o,
|
|
175
|
-
description: t,
|
|
176
|
-
defaultValue: l,
|
|
177
|
-
value: r,
|
|
178
|
-
onValueChange: m,
|
|
179
|
-
allValues: u,
|
|
180
|
-
disabled: d,
|
|
181
|
-
controlFirst: h = !0,
|
|
182
|
-
className: i
|
|
183
|
-
}) {
|
|
184
|
-
return /* @__PURE__ */ e(O.Provider, { value: { controlFirst: h }, children: /* @__PURE__ */ e(
|
|
185
|
-
_,
|
|
186
|
-
{
|
|
187
|
-
defaultValue: l,
|
|
188
|
-
value: r,
|
|
189
|
-
onValueChange: m,
|
|
190
|
-
allValues: u,
|
|
191
|
-
disabled: d,
|
|
192
|
-
children: /* @__PURE__ */ C(G, { className: b("flex flex-col gap-4", i), children: [
|
|
193
|
-
/* @__PURE__ */ e(M, { className: "text-base font-medium text-kumo-default", children: s }),
|
|
194
|
-
/* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: c }),
|
|
195
|
-
o && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: o }),
|
|
196
|
-
t && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: t })
|
|
197
|
-
] })
|
|
198
|
-
}
|
|
199
|
-
) });
|
|
200
|
-
}
|
|
201
|
-
const D = Object.assign(A, {
|
|
202
|
-
Item: I,
|
|
203
|
-
Group: z
|
|
204
|
-
});
|
|
205
|
-
D.displayName = "Checkbox";
|
|
206
|
-
export {
|
|
207
|
-
D as C,
|
|
208
|
-
Q as K,
|
|
209
|
-
W as a
|
|
210
|
-
};
|
|
211
|
-
//# sourceMappingURL=checkbox-mwgmohffm22ut13s.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-mwgmohffm22ut13s.js","sources":["../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import { forwardRef, createContext, useContext, type ReactNode } from \"react\";\nimport { CheckIcon, MinusIcon } from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\nimport { Fieldset } from \"@base-ui/react/fieldset\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport {\n Checkbox as BaseCheckbox,\n type CheckboxRootChangeEventDetails,\n} from \"@base-ui/react/checkbox\";\n\n/** Checkbox variant definitions mapping variant names to their Tailwind classes. */\nexport const KUMO_CHECKBOX_VARIANTS = {\n variant: {\n default: {\n classes:\n \"[&:focus-within>span]:ring-kumo-hairline [&:hover>span]:ring-kumo-hairline\",\n description: \"Default checkbox appearance\",\n },\n error: {\n classes: \"[&>span]:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_CHECKBOX_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_CHECKBOX_VARIANTS\nexport type KumoCheckboxVariant = keyof typeof KUMO_CHECKBOX_VARIANTS.variant;\n\nexport interface KumoCheckboxVariantsProps {\n /**\n * Visual variant.\n * - `\"default\"` — Standard checkbox appearance\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoCheckboxVariant;\n}\n\nexport function checkboxVariants({\n variant = KUMO_CHECKBOX_DEFAULT_VARIANTS.variant,\n}: KumoCheckboxVariantsProps = {}) {\n return cn(KUMO_CHECKBOX_VARIANTS.variant[variant].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type CheckboxVariant = KumoCheckboxVariant;\n\n// Context for passing controlFirst from Group to Items\nconst CheckboxGroupContext = createContext<{ controlFirst: boolean }>({\n controlFirst: true,\n});\n\n/**\n * Single checkbox component props with accessibility guidance.\n *\n * **Accessible Name Required:** Checkbox should have one of:\n * 1. `label` prop (recommended) - built-in Field wrapper with horizontal layout\n * 2. `aria-label` - for checkboxes without visible label\n * 3. `aria-labelledby` - for custom label association\n *\n * **Note:** When used inside Checkbox.Group or Dropdown, label is optional (parent provides context).\n *\n * Missing accessible names will trigger console warnings in development (unless inside a group).\n *\n * @example\n * // Recommended: Built-in Field wrapper with label\n * <Checkbox label=\"Accept terms and conditions\" />\n *\n * @example\n * // Control-first layout (checkbox before label)\n * <Checkbox label=\"Remember me\" controlFirst={true} />\n *\n * @example\n * // Label-first layout (label before checkbox)\n * <Checkbox label=\"Enable notifications\" controlFirst={false} />\n *\n * @example\n * // Error variant (visual only, no error text for single checkboxes)\n * <Checkbox label=\"Required field\" variant=\"error\" />\n *\n * @example\n * // Without visible label (aria-label required)\n * <Checkbox aria-label=\"Select all items\" />\n *\n * @example\n * // Custom label association\n * <label id=\"terms-label\">I accept the terms</label>\n * <Checkbox aria-labelledby=\"terms-label\" />\n *\n * @example\n * // Inside Checkbox.Group (label optional)\n * <Checkbox.Group legend=\"Preferences\">\n * <Checkbox.Item value=\"email\" label=\"Email notifications\" />\n * <Checkbox.Item value=\"sms\" label=\"SMS notifications\" />\n * </Checkbox.Group>\n */\nexport type CheckboxProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures (visual only, no error text) */\n variant?: CheckboxVariant;\n /** Label content for the checkbox (enables built-in Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Whether the checkbox is checked (controlled) */\n checked?: boolean;\n /** Whether the checkbox is in indeterminate state */\n indeterminate?: boolean;\n /** Whether the checkbox is disabled */\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n /** Click handler */\n onClick?: (event: React.MouseEvent) => void;\n /** Name for form submission */\n name?: string;\n /** Whether the field is required */\n required?: boolean;\n /** Additional class name */\n className?: string;\n /** Accessible label when no visible label is provided */\n \"aria-label\"?: string;\n /** ID of element that labels this checkbox */\n \"aria-labelledby\"?: string;\n};\n\n/**\n * Checkbox group component props (with built-in Fieldset and CheckboxGroup)\n *\n * Usage:\n * ```tsx\n * <Checkbox.Group\n * legend=\"Choose preferences\"\n * defaultValue={['email']}\n * error=\"You must select at least one option\"\n * >\n * <Checkbox.Item label=\"Email notifications\" value=\"email\" />\n * <Checkbox.Item label=\"SMS notifications\" value=\"sms\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxGroupProps {\n /** Legend text for the group */\n legend: string;\n /** Child Checkbox.Item components */\n children: ReactNode;\n /** Error message for the group (only appears in groups, not single checkboxes) */\n error?: string;\n /** Helper text for the group */\n description?: ReactNode;\n /** Values of checkboxes that should be initially checked (uncontrolled) */\n defaultValue?: string[];\n /** Values of checkboxes that should be checked (controlled) */\n value?: string[];\n /** Event handler called when checkbox values change */\n onValueChange?: (value: string[]) => void;\n /** All possible checkbox values (required for parent checkbox pattern) */\n allValues?: string[];\n /** Whether all checkboxes in the group are disabled */\n disabled?: boolean;\n /** When true (default), checkbox appears before label. When false, label appears before checkbox. */\n controlFirst?: boolean;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Individual checkbox item within a group\n */\nexport type CheckboxItemProps = {\n /** Visual variant: \"default\" or \"error\" for validation failures */\n variant?: CheckboxVariant;\n /** Label text displayed next to checkbox */\n label: string;\n /** Value of the checkbox (required when used in Checkbox.Group) */\n value?: string;\n /** Additional CSS classes for the label wrapper */\n className?: string;\n checked?: boolean;\n indeterminate?: boolean;\n disabled?: boolean;\n /** Callback when the checked state changes */\n onCheckedChange?: (checked: boolean) => void;\n /** @deprecated Use onCheckedChange instead */\n onValueChange?: (checked: boolean) => void;\n name?: string;\n};\n\n// Single checkbox with built-in Field\nconst CheckboxBase = forwardRef<HTMLButtonElement, CheckboxProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n labelTooltip,\n controlFirst = true,\n onCheckedChange,\n onValueChange,\n onChange,\n required,\n name,\n ...props\n },\n ref,\n ) => {\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasAriaLabel = Boolean(props[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(props[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Checkbox label='Accept terms' />\\n\" +\n \" - aria-label: <Checkbox aria-label='Select item' />\\n\" +\n \" - aria-labelledby for custom label association\\n\" +\n \" Note: When used inside Checkbox.Group, label is optional\",\n );\n }\n }\n\n // Handle onCheckedChange (preferred) and deprecated onValueChange/onChange\n const handleCheckedChange = (\n newChecked: boolean,\n eventDetails: CheckboxRootChangeEventDetails,\n ) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n if (onChange) {\n // Backwards compatibility: extend native event with target.checked\n // so existing code using `e.target.checked` continues to work\n const event = Object.assign(eventDetails.event, {\n target: { checked: newChecked },\n });\n onChange(event as never);\n }\n };\n\n const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled && \"hover:ring-kumo-hairline focus-visible:ring-kumo-hairline\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n disabled && \"cursor-not-allowed opacity-50\",\n className,\n )}\n {...props}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n );\n\n // If no label provided, return bare checkbox (for use in other components like Dropdown)\n if (!label) {\n return checkboxControl;\n }\n\n // Use Field.Root + Field.Label enclosing pattern for proper a11y association\n // See: https://base-ui.com/react/components/field\n return (\n <FieldBase.Root className=\"inline-flex\">\n <FieldBase.Label\n className={cn(\n \"!m-0 !min-h-0 !text-base inline-flex items-center gap-2\",\n controlFirst ? \"flex-row\" : \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n )}\n >\n {checkboxControl}\n <Label\n showOptional={required === false}\n tooltip={labelTooltip}\n asContent\n >\n {label}\n </Label>\n </FieldBase.Label>\n </FieldBase.Root>\n );\n },\n);\n\nCheckboxBase.displayName = \"Checkbox\";\n\n// Checkbox.Item for use within Checkbox.Group\nconst CheckboxItem = forwardRef<HTMLButtonElement, CheckboxItemProps>(\n (\n {\n className,\n checked,\n indeterminate,\n disabled,\n variant = \"default\",\n label,\n value,\n onCheckedChange,\n onValueChange,\n name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\n\n // Handle onCheckedChange (preferred) and deprecated onValueChange\n const handleCheckedChange = (newChecked: boolean) => {\n onCheckedChange?.(newChecked);\n onValueChange?.(newChecked);\n };\n\n return (\n <label\n className={cn(\n \"m-0 relative inline-flex items-center gap-2\",\n // Control first (default): checkbox before label\n // Label first: label before checkbox using flex-row-reverse\n !controlFirst && \"flex-row-reverse justify-end\",\n disabled ? \"cursor-not-allowed opacity-50\" : \"cursor-pointer\",\n className,\n )}\n >\n <BaseCheckbox.Root\n ref={ref}\n value={value}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={handleCheckedChange}\n className={cn(\n \"peer relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus-visible:ring-kumo-hairline\",\n \"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast\",\n )}\n >\n <BaseCheckbox.Indicator\n keepMounted\n className=\"flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible\"\n render={(renderProps, state) => (\n <span {...renderProps}>\n {state.indeterminate ? (\n <MinusIcon weight=\"bold\" size={12} />\n ) : (\n <CheckIcon weight=\"bold\" size={12} />\n )}\n </span>\n )}\n />\n </BaseCheckbox.Root>\n <span className=\"text-base text-kumo-default\">{label}</span>\n </label>\n );\n },\n);\n\nCheckboxItem.displayName = \"Checkbox.Item\";\n\n// Checkbox.Group with built-in Fieldset and CheckboxGroup\nfunction CheckboxGroup({\n legend,\n children,\n error,\n description,\n defaultValue,\n value,\n onValueChange,\n allValues,\n disabled,\n controlFirst = true,\n className,\n}: CheckboxGroupProps) {\n return (\n <CheckboxGroupContext.Provider value={{ controlFirst }}>\n <BaseCheckboxGroup\n defaultValue={defaultValue}\n value={value}\n onValueChange={onValueChange}\n allValues={allValues}\n disabled={disabled}\n >\n <Fieldset.Root className={cn(\"flex flex-col gap-4\", className)}>\n <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n <div className=\"flex flex-col gap-2\">{children}</div>\n {error && <p className=\"text-sm text-kumo-danger\">{error}</p>}\n {description && (\n <p className=\"text-sm text-kumo-subtle\">{description}</p>\n )}\n </Fieldset.Root>\n </BaseCheckboxGroup>\n </CheckboxGroupContext.Provider>\n );\n}\n\n// Compound component\nexport const Checkbox = Object.assign(CheckboxBase, {\n Item: CheckboxItem,\n Group: CheckboxGroup,\n});\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["KUMO_CHECKBOX_VARIANTS","KUMO_CHECKBOX_DEFAULT_VARIANTS","CheckboxGroupContext","createContext","CheckboxBase","forwardRef","className","checked","indeterminate","disabled","variant","label","labelTooltip","controlFirst","onCheckedChange","onValueChange","onChange","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","newChecked","eventDetails","event","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","handleCheckedChange","CheckboxGroup","legend","children","error","description","defaultValue","allValues","BaseCheckboxGroup","Fieldset.Root","Fieldset.Legend","Checkbox"],"mappings":"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"}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsxs as a, jsx as n } from "react/jsx-runtime";
|
|
3
|
-
import { CaretDownIcon as d } from "@phosphor-icons/react";
|
|
4
|
-
import { forwardRef as p, useId as u, useCallback as b } from "react";
|
|
5
|
-
import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
function f(e = {}) {
|
|
7
|
-
return t(
|
|
8
|
-
// Defensive resets to prevent global button styles from polluting the trigger
|
|
9
|
-
"bg-transparent border-none shadow-none p-0 m-0",
|
|
10
|
-
// Base styles for the trigger
|
|
11
|
-
"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none"
|
|
12
|
-
);
|
|
13
|
-
}
|
|
14
|
-
const x = p(
|
|
15
|
-
({ label: e, open: r, onOpenChange: o, children: l, className: i }, c) => {
|
|
16
|
-
const s = u(), m = b(() => {
|
|
17
|
-
o?.(!r);
|
|
18
|
-
}, [r, o]);
|
|
19
|
-
return /* @__PURE__ */ a("div", { ref: c, children: [
|
|
20
|
-
/* @__PURE__ */ a(
|
|
21
|
-
"button",
|
|
22
|
-
{
|
|
23
|
-
type: "button",
|
|
24
|
-
"aria-expanded": r,
|
|
25
|
-
"aria-controls": s,
|
|
26
|
-
className: f(),
|
|
27
|
-
onClick: m,
|
|
28
|
-
children: [
|
|
29
|
-
e,
|
|
30
|
-
" ",
|
|
31
|
-
/* @__PURE__ */ n(
|
|
32
|
-
d,
|
|
33
|
-
{
|
|
34
|
-
className: t("h-4 w-4 transition-transform", r && "rotate-180")
|
|
35
|
-
}
|
|
36
|
-
)
|
|
37
|
-
]
|
|
38
|
-
}
|
|
39
|
-
),
|
|
40
|
-
r && /* @__PURE__ */ n(
|
|
41
|
-
"div",
|
|
42
|
-
{
|
|
43
|
-
id: s,
|
|
44
|
-
className: t(
|
|
45
|
-
"my-2 space-y-4 border-l-2 border-kumo-fill pl-4",
|
|
46
|
-
i
|
|
47
|
-
),
|
|
48
|
-
children: l
|
|
49
|
-
}
|
|
50
|
-
)
|
|
51
|
-
] });
|
|
52
|
-
}
|
|
53
|
-
);
|
|
54
|
-
x.displayName = "Collapsible";
|
|
55
|
-
export {
|
|
56
|
-
x as C
|
|
57
|
-
};
|
|
58
|
-
//# sourceMappingURL=collapsible-jhzee3ks51d3xowb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-jhzee3ks51d3xowb.js","sources":["../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react\";\nimport { type PropsWithChildren, forwardRef, useCallback, useId } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport const KUMO_COLLAPSIBLE_VARIANTS = {} as const;\n\nexport const KUMO_COLLAPSIBLE_DEFAULT_VARIANTS = {} as const;\n\nexport interface KumoCollapsibleVariantsProps {}\n\nexport function collapsibleVariants(_props: KumoCollapsibleVariantsProps = {}) {\n return cn(\n // Defensive resets to prevent global button styles from polluting the trigger\n \"bg-transparent border-none shadow-none p-0 m-0\",\n // Base styles for the trigger\n \"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none\",\n );\n}\n\n/**\n * Collapsible component props.\n *\n * @example\n * ```tsx\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n * <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n */\nexport type CollapsibleProps = PropsWithChildren<\n KumoCollapsibleVariantsProps & {\n /** Text label displayed in the trigger button */\n label: string;\n /** Whether the collapsible content is visible */\n open?: boolean;\n /** Callback fired when the open state changes */\n onOpenChange?: (open: boolean) => void;\n /** Additional CSS classes for the content panel */\n className?: string;\n }\n>;\n\n/**\n * Collapsible component for showing/hiding content.\n *\n * Features:\n * - Animated chevron indicator (rotates 180° when open)\n * - Accessible with aria-expanded and aria-controls\n * - Content panel with left border accent\n *\n * @example\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible label=\"Show details\" open={open} onOpenChange={setOpen}>\n * <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible>\n * ```\n *\n * @example Controlled accordion pattern\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n * <Collapsible\n * key={i}\n * label={item.title}\n * open={activeIndex === i}\n * onOpenChange={(open) => setActiveIndex(open ? i : null)}\n * >\n * {item.content}\n * </Collapsible>\n * ))}\n * ```\n */\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(\n ({ label, open, onOpenChange, children, className }, ref) => {\n const contentId = useId();\n\n const handleOpen = useCallback(() => {\n onOpenChange?.(!open);\n }, [open, onOpenChange]);\n\n return (\n <div ref={ref}>\n <button\n type=\"button\"\n aria-expanded={open}\n aria-controls={contentId}\n className={collapsibleVariants()}\n onClick={handleOpen}\n >\n {label}{\" \"}\n <CaretDownIcon\n className={cn(\"h-4 w-4 transition-transform\", open && \"rotate-180\")}\n />\n </button>\n {open && (\n <div\n id={contentId}\n className={cn(\n \"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\",\n className,\n )}\n >\n {children}\n </div>\n )}\n </div>\n );\n },\n);\n\nCollapsible.displayName = \"Collapsible\";\n"],"names":["collapsibleVariants","_props","cn","Collapsible","forwardRef","label","open","onOpenChange","children","className","ref","contentId","useId","handleOpen","useCallback","jsxs","jsx","CaretDownIcon"],"mappings":";;;;;AAUO,SAASA,EAAoBC,IAAuC,IAAI;AAC7E,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ;AA0DO,MAAMC,IAAcC;AAAA,EACzB,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,cAAAC,GAAc,UAAAC,GAAU,WAAAC,EAAA,GAAaC,MAAQ;AAC3D,UAAMC,IAAYC,EAAA,GAEZC,IAAaC,EAAY,MAAM;AACnC,MAAAP,IAAe,CAACD,CAAI;AAAA,IACtB,GAAG,CAACA,GAAMC,CAAY,CAAC;AAEvB,WACE,gBAAAQ,EAAC,SAAI,KAAAL,GACH,UAAA;AAAA,MAAA,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeT;AAAA,UACf,iBAAeK;AAAA,UACf,WAAWX,EAAA;AAAA,UACX,SAASa;AAAA,UAER,UAAA;AAAA,YAAAR;AAAA,YAAO;AAAA,YACR,gBAAAW;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,WAAWf,EAAG,gCAAgCI,KAAQ,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACpE;AAAA,QAAA;AAAA,MAAA;AAAA,MAEDA,KACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIL;AAAA,UACJ,WAAWT;AAAA,YACT;AAAA,YACAO;AAAA,UAAA;AAAA,UAGD,UAAAD;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAY,cAAc;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"combobox-eaowwt1xr4d23gsn.js","sources":["../../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxBase } from \"@base-ui/react/combobox\";\nimport { CaretDownIcon, CheckIcon, XIcon } from \"@phosphor-icons/react\";\nimport {\n Fragment,\n createContext,\n useContext,\n type PropsWithChildren,\n type ReactNode,\n} from \"react\";\nimport {\n inputVariants,\n KUMO_INPUT_VARIANTS,\n type KumoInputSize,\n} from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\n\n/** Combobox variant definitions. */\nexport const KUMO_COMBOBOX_VARIANTS = {\n size: KUMO_INPUT_VARIANTS.size,\n inputSide: {\n right: {\n classes: \"\",\n description: \"Input positioned inline to the right of chips\",\n },\n top: {\n classes: \"\",\n description: \"Input positioned above chips\",\n },\n },\n} as const;\n\nexport const KUMO_COMBOBOX_DEFAULT_VARIANTS = {\n size: \"base\",\n inputSide: \"right\",\n} as const;\n\n// Context to pass size down to sub-components\nconst ComboboxSizeContext = createContext<KumoInputSize>(\"base\");\n\n// Derived types from KUMO_COMBOBOX_VARIANTS\nexport type KumoComboboxSize = keyof typeof KUMO_COMBOBOX_VARIANTS.size;\nexport type KumoComboboxInputSide =\n keyof typeof KUMO_COMBOBOX_VARIANTS.inputSide;\n\nexport interface KumoComboboxVariantsProps {\n /**\n * Size of the combobox trigger. Matches Input component sizes.\n * - `\"xs\"` — Extra small for compact UIs (h-5 / 20px)\n * - `\"sm\"` — Small for secondary fields (h-6.5 / 26px)\n * - `\"base\"` — Default size (h-9 / 36px)\n * - `\"lg\"` — Large for prominent fields (h-10 / 40px)\n * @default \"base\"\n */\n size?: KumoComboboxSize;\n /**\n * Position of the text input relative to chips in multi-select mode.\n * - `\"right\"` — Input inline to the right of chips\n * - `\"top\"` — Input above chips\n * @default \"right\"\n */\n inputSide?: KumoComboboxInputSide;\n}\n\nexport function comboboxVariants({\n inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: KumoComboboxVariantsProps = {}) {\n return cn(KUMO_COMBOBOX_VARIANTS.inputSide[inputSide].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = KumoComboboxInputSide;\nexport type ComboboxSize = KumoComboboxSize;\n\nexport type ComboboxRootProps<\n Value = unknown,\n Multiple extends boolean | undefined = false,\n> = ComboboxBase.Root.Props<Value, Multiple>;\n\n/**\n * Combobox component props (simplified for documentation; the actual Root is generic).\n *\n * Combobox provides an autocomplete/typeahead input with a filterable dropdown.\n * Supports single-select, multi-select with chips, grouped items, and Field wrapper integration.\n *\n * @example\n * ```tsx\n * // Single-select with search input\n * <Combobox value={value} onValueChange={setValue} items={options}>\n * <Combobox.TriggerInput placeholder=\"Search…\" />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n * </Combobox.List>\n * <Combobox.Empty>No results</Combobox.Empty>\n * </Combobox.Content>\n * </Combobox>\n *\n * // Multi-select with chips\n * <Combobox multiple items={options} label=\"Tags\">\n * <Combobox.TriggerMultipleWithInput\n * placeholder=\"Add tag…\"\n * renderItem={(item) => <Combobox.Chip value={item}>{item.label}</Combobox.Chip>}\n * />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n * </Combobox.List>\n * </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport interface ComboboxProps extends KumoComboboxVariantsProps {\n /** Array of items to display in the dropdown */\n items: unknown[];\n /** Currently selected value(s) */\n value?: unknown;\n /** Callback when selection changes */\n onValueChange?: (value: unknown) => void;\n /** Enable multi-select mode */\n multiple?: boolean;\n /** Combobox content (trigger, content, items) */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n /** Label content for the combobox (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Whether the combobox is required */\n required?: boolean;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the combobox */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n label,\n required,\n labelTooltip,\n description,\n error,\n children,\n size = \"base\",\n ...props\n}: ComboboxBase.Root.Props<Value, Multiple> & {\n label?: ReactNode;\n required?: boolean;\n labelTooltip?: ReactNode;\n description?: ReactNode;\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n size?: KumoComboboxSize;\n}) {\n const comboboxControl = (\n <ComboboxSizeContext.Provider value={size}>\n <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n </ComboboxSizeContext.Provider>\n );\n\n // Render with Field wrapper if label, description, or error are provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {comboboxControl}\n </Field>\n );\n }\n\n // Render bare combobox without Field wrapper\n return comboboxControl;\n}\n\nfunction Content({\n children,\n className,\n align = \"start\",\n sideOffset = 4,\n alignOffset,\n side,\n container: containerProp,\n}: PropsWithChildren<{\n className?: string;\n align?: ComboboxBase.Positioner.Props[\"align\"];\n alignOffset?: ComboboxBase.Positioner.Props[\"alignOffset\"];\n side?: ComboboxBase.Positioner.Props[\"side\"];\n sideOffset?: ComboboxBase.Positioner.Props[\"sideOffset\"];\n /**\n * Container element for the portal. Use this to render the combobox inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n */\n container?: PortalContainer;\n}>) {\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n return (\n <ComboboxBase.Portal container={container}>\n <ComboboxBase.Positioner\n className=\"\"\n align={align}\n sideOffset={sideOffset}\n alignOffset={alignOffset}\n side={side}\n >\n <ComboboxBase.Popup\n className={cn(\n \"flex flex-col\", // flexbox layout for sticky input + scrollable list\n \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) py-1.5\",\n \"bg-kumo-base text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n className,\n )}\n >\n {children}\n </ComboboxBase.Popup>\n </ComboboxBase.Positioner>\n </ComboboxBase.Portal>\n );\n}\n\n// Size-dependent styles for TriggerValue icon\nconst triggerValueIconStyles: Record<\n KumoComboboxSize,\n { padding: string; iconSize: number; iconRight: string }\n> = {\n xs: { padding: \"pr-5\", iconSize: 12, iconRight: \"right-1\" },\n sm: { padding: \"pr-6\", iconSize: 14, iconRight: \"right-1.5\" },\n base: { padding: \"pr-8\", iconSize: 16, iconRight: \"right-2\" },\n lg: { padding: \"pr-10\", iconSize: 18, iconRight: \"right-3\" },\n};\n\nfunction TriggerValue({\n className,\n ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n const size = useContext(ComboboxSizeContext);\n const iconStyles = triggerValueIconStyles[size];\n\n return (\n <ComboboxBase.Trigger\n className={cn(\n inputVariants({ size }),\n \"relative flex items-center\",\n \"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n iconStyles.padding,\n className,\n )}\n >\n <ComboboxBase.Value>{props.children}</ComboboxBase.Value>\n <ComboboxBase.Icon\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center text-kumo-subtle\",\n iconStyles.iconRight,\n )}\n >\n <CaretDownIcon size={iconStyles.iconSize} className=\"fill-current\" />\n </ComboboxBase.Icon>\n </ComboboxBase.Trigger>\n );\n}\n\n// Size-dependent styles for TriggerInput icons\nconst triggerInputIconStyles: Record<\n KumoComboboxSize,\n { padding: string; iconSize: number; clearRight: string; caretRight: string }\n> = {\n xs: {\n padding: \"pr-7\",\n iconSize: 12,\n clearRight: \"right-5\",\n caretRight: \"right-1\",\n },\n sm: {\n padding: \"pr-9\",\n iconSize: 14,\n clearRight: \"right-6\",\n caretRight: \"right-1.5\",\n },\n base: {\n padding: \"pr-12\",\n iconSize: 16,\n clearRight: \"right-8\",\n caretRight: \"right-2\",\n },\n lg: {\n padding: \"pr-14\",\n iconSize: 18,\n clearRight: \"right-9\",\n caretRight: \"right-3\",\n },\n};\n\nfunction TriggerInput({\n clearLabel = \"Clear selection\",\n showOptionsLabel = \"Show options\",\n ...props\n}: ComboboxBase.Input.Props & {\n /** Accessible label for the clear button. Pass a translated string for i18n.\n * @default \"Clear selection\"\n */\n clearLabel?: string;\n /** Accessible label for the dropdown trigger. Pass a translated string for i18n.\n * @default \"Show options\"\n */\n showOptionsLabel?: string;\n}) {\n const size = useContext(ComboboxSizeContext);\n const iconStyles = triggerInputIconStyles[size];\n\n return (\n <div\n className={cn(\n \"relative inline-block w-full max-w-xs\",\n \"has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed\",\n props.className,\n )}\n >\n <ComboboxBase.Input\n {...props}\n className={cn(\n inputVariants({ size }),\n \"w-full\",\n iconStyles.padding,\n \"disabled:cursor-not-allowed\",\n )}\n />\n\n <ComboboxBase.Clear\n aria-label={clearLabel}\n className={cn(\n \"absolute top-1/2 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\",\n \"data-[disabled]:pointer-events-none data-[disabled]:opacity-0\",\n iconStyles.clearRight,\n )}\n >\n <XIcon size={iconStyles.iconSize} />\n </ComboboxBase.Clear>\n\n <ComboboxBase.Trigger\n aria-label={showOptionsLabel}\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center justify-center cursor-pointer text-kumo-subtle\",\n \"m-0 bg-transparent p-0\", // Reset Stratus global button styles\n iconStyles.caretRight,\n )}\n >\n <ComboboxBase.Icon>\n <CaretDownIcon size={iconStyles.iconSize} className=\"fill-current\" />\n </ComboboxBase.Icon>\n </ComboboxBase.Trigger>\n </div>\n );\n}\n\nfunction Item({ children, ...props }: ComboboxBase.Item.Props) {\n return (\n <ComboboxBase.Item\n {...props}\n className=\"group mx-1.5 grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-tint\"\n >\n <div className=\"col-start-1\">{children}</div>\n <ComboboxBase.ItemIndicator className=\"col-start-2 flex items-center\">\n <CheckIcon />\n </ComboboxBase.ItemIndicator>\n </ComboboxBase.Item>\n );\n}\n\nfunction Empty(props: ComboboxBase.Empty.Props) {\n return (\n <ComboboxBase.Empty\n {...props}\n className={cn(\n \"mx-1.5 shrink-0 px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0\",\n )}\n children={props.children ?? \"No labels found.\"}\n />\n );\n}\n\nfunction Input(props: ComboboxBase.Input.Props) {\n return (\n <ComboboxBase.Input\n {...props}\n className={cn(\n inputVariants(),\n \"mx-1.5 w-[calc(100%-0.75rem)] shrink-0 first:mb-2\",\n props.className,\n )}\n />\n );\n}\n\nfunction List({\n className,\n ...props\n}: ComboboxBase.List.Props & { className?: string }) {\n return (\n <ComboboxBase.List\n {...props}\n className={cn(\n \"min-h-0 flex-1 overflow-y-auto overscroll-contain scroll-pt-2 scroll-pb-2\",\n className,\n )}\n />\n );\n}\n\nfunction GroupLabel(props: ComboboxBase.GroupLabel.Props) {\n return (\n <ComboboxBase.GroupLabel\n {...props}\n className={cn(\n \"mx-1.5 px-2 py-1.5 text-sm text-kumo-strong\",\n props.className,\n )}\n />\n );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n return (\n <ComboboxBase.Group\n {...props}\n className=\"border-t border-kumo-hairline mt-2 pt-2 first:border-t-0 first:mt-0 first:pt-0\"\n />\n );\n}\n\nfunction Chip({\n removeLabel = \"Remove\",\n ...props\n}: ComboboxBase.Chip.Props & {\n /** Accessible label for the chip remove button. Pass a translated string for i18n.\n * @default \"Remove\"\n */\n removeLabel?: string;\n}) {\n return (\n <ComboboxBase.Chip\n {...props}\n className={cn(\n \"flex items-center gap-2.5\", // Layout\n \"h-6 pl-2 pr-[3px]\", // Dimensions\n \"rounded-sm ring-1 ring-kumo-hairline\", // Border\n \"bg-kumo-overlay\", // Background\n \"text-sm\", // Typography\n )}\n >\n {props.children}\n <ComboboxBase.ChipRemove\n aria-label={removeLabel}\n className={cn(\n \"cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover\",\n \"bg-transparent flex\",\n )}\n >\n <XIcon size={10} />\n </ComboboxBase.ChipRemove>\n </ComboboxBase.Chip>\n );\n}\n\n// Map size to min-height class for TriggerMultipleWithInput\nconst sizeToMinHeight: Record<KumoComboboxSize, string> = {\n xs: \"min-h-5\",\n sm: \"min-h-6.5\",\n base: \"min-h-9\",\n lg: \"min-h-10\",\n};\n\nfunction TriggerMultipleWithInput<ValueType>({\n placeholder,\n renderItem,\n className,\n inputSide = \"right\",\n value: controlledValue,\n}: {\n placeholder?: string;\n renderItem: (value: ValueType) => React.ReactNode;\n className?: string;\n inputSide?: \"right\" | \"top\";\n /** Optional controlled value for rendering chips (use when pre-selecting values) */\n value?: ValueType[];\n}) {\n const size = useContext(ComboboxSizeContext);\n // Determine which value to use for rendering chips\n const chipsToRender = controlledValue;\n\n return (\n <ComboboxBase.Chips\n className={cn(\n inputVariants({ size }),\n \"flex flex-col\",\n \"gap-1 py-1 px-1.5\",\n sizeToMinHeight[size],\n \"h-auto\",\n \"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n className,\n )}\n >\n {inputSide === \"top\" && (\n <ComboboxBase.Input\n placeholder={placeholder}\n className=\"w-full px-2 py-1 border-0 bg-inherit\"\n />\n )}\n {/* Chips container */}\n <div className=\"flex items-center flex-wrap gap-1.5 flex-1\">\n {/* Render chips from controlled value if provided */}\n {chipsToRender !== undefined &&\n chipsToRender.length > 0 &&\n chipsToRender.map((item) => renderItem(item))}\n {/* Also render from BaseUI's internal value for user selections */}\n <ComboboxBase.Value>\n {(internalValue: ValueType[]) => {\n // Skip rendering if using controlled value (to avoid duplicates)\n if (chipsToRender !== undefined) return null;\n return (\n <Fragment>\n {internalValue.map((item) => renderItem(item))}\n </Fragment>\n );\n }}\n </ComboboxBase.Value>\n {inputSide === \"right\" && (\n <ComboboxBase.Input\n placeholder={placeholder}\n className=\"min-w-[100px] flex-1 px-2 py-1 border-0 bg-inherit\"\n />\n )}\n </div>\n </ComboboxBase.Chips>\n );\n}\n\nRoot.displayName = \"Combobox.Root\";\nContent.displayName = \"Combobox.Content\";\nTriggerValue.displayName = \"Combobox.TriggerValue\";\nTriggerInput.displayName = \"Combobox.TriggerInput\";\nItem.displayName = \"Combobox.Item\";\nChip.displayName = \"Combobox.Chip\";\nTriggerMultipleWithInput.displayName = \"Combobox.TriggerMultipleWithInput\";\n\n/**\n * Combobox — autocomplete input with filterable dropdown list.\n *\n * Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`,\n * `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,\n * `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.\n *\n * @example\n * ```tsx\n * <Combobox items={fruits} label=\"Fruit\">\n * <Combobox.TriggerInput placeholder=\"Pick a fruit…\" />\n * <Combobox.Content>\n * <Combobox.List>\n * {(item) => <Combobox.Item value={item}>{item}</Combobox.Item>}\n * </Combobox.List>\n * </Combobox.Content>\n * </Combobox>\n * ```\n *\n * @see https://base-ui.com/react/components/combobox\n */\nexport const Combobox = Object.assign(Root, {\n // Helper components\n Content,\n TriggerValue,\n TriggerInput,\n TriggerMultipleWithInput,\n\n // Slightly modified BaseUI\n Chip,\n Item,\n\n // Styled BaseUI\n Input,\n Empty,\n GroupLabel,\n Group,\n\n // Styled BaseUI\n List,\n\n // BaseUI\n Collection: ComboboxBase.Collection,\n});\n"],"names":["KUMO_INPUT_VARIANTS","ComboboxSizeContext","createContext","Root","label","required","labelTooltip","description","error","children","size","props","comboboxControl","jsx","ComboboxBase.Root","Field","Content","className","align","sideOffset","alignOffset","side","containerProp","contextContainer","usePortalContainer","ComboboxBase.Portal","ComboboxBase.Positioner","ComboboxBase.Popup","cn","triggerValueIconStyles","TriggerValue","useContext","iconStyles","jsxs","ComboboxBase.Trigger","inputVariants","ComboboxBase.Value","ComboboxBase.Icon","CaretDownIcon","triggerInputIconStyles","TriggerInput","clearLabel","showOptionsLabel","ComboboxBase.Input","ComboboxBase.Clear","XIcon","Item","ComboboxBase.Item","ComboboxBase.ItemIndicator","CheckIcon","Empty","ComboboxBase.Empty","Input","List","ComboboxBase.List","GroupLabel","ComboboxBase.GroupLabel","Group","ComboboxBase.Group","Chip","removeLabel","ComboboxBase.Chip","ComboboxBase.ChipRemove","sizeToMinHeight","TriggerMultipleWithInput","placeholder","renderItem","inputSide","controlledValue","chipsToRender","ComboboxBase.Chips","item","internalValue","Fragment","Combobox","ComboboxBase.Collection"],"mappings":";;;;;;;;;AAuBQA,EAAoB;AAmB5B,MAAMC,IAAsBC,EAA6B,MAAM;AAmG/D,SAASC,EAA0D;AAAA,EACjE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAOG;AACD,QAAMC,IACJ,gBAAAC,EAACZ,EAAoB,UAApB,EAA6B,OAAOS,GACnC,UAAA,gBAAAG,EAACC,GAAA,EAAmB,GAAGH,GAAQ,UAAAF,GAAS,EAAA,CAC1C;AAIF,SAAIL,IAEA,gBAAAS;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAX;AAAA,MACA,UAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAI;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT;AAEA,SAASI,EAAQ;AAAA,EACf,UAAAP;AAAA,EACA,WAAAQ;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAWC;AACb,GAYI;AACF,QAAMC,IAAmBC,EAAA;AAGzB,SACE,gBAAAX,EAACY,GAAA,EAAoB,WAHLH,KAAiBC,KAAoB,QAInD,UAAA,gBAAAV;AAAA,IAACa;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAAR;AAAA,MACA,YAAAC;AAAA,MACA,aAAAC;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAAR;AAAA,QAACc;AAAAA,QAAA;AAAA,UACC,WAAWC;AAAA,YACT;AAAA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,YACA;AAAA;AAAA,YACAX;AAAA,UAAA;AAAA,UAGD,UAAAR;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA,GAEJ;AAEJ;AAGA,MAAMoB,IAGF;AAAA,EACF,IAAI,EAAE,SAAS,QAAQ,UAAU,IAAI,WAAW,UAAA;AAAA,EAChD,IAAI,EAAE,SAAS,QAAQ,UAAU,IAAI,WAAW,YAAA;AAAA,EAChD,MAAM,EAAE,SAAS,QAAQ,UAAU,IAAI,WAAW,UAAA;AAAA,EAClD,IAAI,EAAE,SAAS,SAAS,UAAU,IAAI,WAAW,UAAA;AACnD;AAEA,SAASC,EAAa;AAAA,EACpB,WAAAb;AAAA,EACA,GAAGN;AACL,GAAsD;AACpD,QAAMD,IAAOqB,EAAW9B,CAAmB,GACrC+B,IAAaH,EAAuBnB,CAAI;AAE9C,SACE,gBAAAuB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWN;AAAA,QACTO,EAAc,EAAE,MAAAzB,GAAM;AAAA,QACtB;AAAA,QACA;AAAA,QACAsB,EAAW;AAAA,QACXf;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAJ,EAACuB,GAAA,EAAoB,UAAAzB,EAAM,SAAA,CAAS;AAAA,QACpC,gBAAAE;AAAA,UAACwB;AAAAA,UAAA;AAAA,YACC,WAAWT;AAAA,cACT;AAAA,cACAI,EAAW;AAAA,YAAA;AAAA,YAGb,4BAACM,GAAA,EAAc,MAAMN,EAAW,UAAU,WAAU,eAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MACrE;AAAA,IAAA;AAAA,EAAA;AAGN;AAGA,MAAMO,IAGF;AAAA,EACF,IAAI;AAAA,IACF,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,IAAI;AAAA,IACF,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAAA,EAEd,IAAI;AAAA,IACF,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EAAA;AAEhB;AAEA,SAASC,EAAa;AAAA,EACpB,YAAAC,IAAa;AAAA,EACb,kBAAAC,IAAmB;AAAA,EACnB,GAAG/B;AACL,GASG;AACD,QAAMD,IAAOqB,EAAW9B,CAAmB,GACrC+B,IAAaO,EAAuB7B,CAAI;AAE9C,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWL;AAAA,QACT;AAAA,QACA;AAAA,QACAjB,EAAM;AAAA,MAAA;AAAA,MAGR,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAAC8B;AAAAA,UAAA;AAAA,YACE,GAAGhC;AAAA,YACJ,WAAWiB;AAAA,cACTO,EAAc,EAAE,MAAAzB,GAAM;AAAA,cACtB;AAAA,cACAsB,EAAW;AAAA,cACX;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAGF,gBAAAnB;AAAA,UAAC+B;AAAAA,UAAA;AAAA,YACC,cAAYH;AAAA,YACZ,WAAWb;AAAA,cACT;AAAA,cACA;AAAA,cACAI,EAAW;AAAA,YAAA;AAAA,YAGb,UAAA,gBAAAnB,EAACgC,GAAA,EAAM,MAAMb,EAAW,SAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGpC,gBAAAnB;AAAA,UAACqB;AAAAA,UAAA;AAAA,YACC,cAAYQ;AAAA,YACZ,WAAWd;AAAA,cACT;AAAA,cACA;AAAA;AAAA,cACAI,EAAW;AAAA,YAAA;AAAA,YAGb,UAAA,gBAAAnB,EAACwB,GAAA,EACC,UAAA,gBAAAxB,EAACyB,GAAA,EAAc,MAAMN,EAAW,UAAU,WAAU,eAAA,CAAe,EAAA,CACrE;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAASc,EAAK,EAAE,UAAArC,GAAU,GAAGE,KAAkC;AAC7D,SACE,gBAAAsB;AAAA,IAACc;AAAAA,IAAA;AAAA,MACE,GAAGpC;AAAA,MACJ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAJ,EAAA,CAAS;AAAA,QACvC,gBAAAI,EAACmC,GAAA,EAA2B,WAAU,iCACpC,UAAA,gBAAAnC,EAACoC,KAAU,EAAA,CACb;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAASC,EAAMvC,GAAiC;AAC9C,SACE,gBAAAE;AAAA,IAACsC;AAAAA,IAAA;AAAA,MACE,GAAGxC;AAAA,MACJ,WAAWiB;AAAA,QACT;AAAA,MAAA;AAAA,MAEF,UAAUjB,EAAM,YAAY;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,SAASyC,EAAMzC,GAAiC;AAC9C,SACE,gBAAAE;AAAA,IAAC8B;AAAAA,IAAA;AAAA,MACE,GAAGhC;AAAA,MACJ,WAAWiB;AAAA,QACTO,EAAA;AAAA,QACA;AAAA,QACAxB,EAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAEA,SAAS0C,EAAK;AAAA,EACZ,WAAApC;AAAA,EACA,GAAGN;AACL,GAAqD;AACnD,SACE,gBAAAE;AAAA,IAACyC;AAAAA,IAAA;AAAA,MACE,GAAG3C;AAAA,MACJ,WAAWiB;AAAA,QACT;AAAA,QACAX;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AAEA,SAASsC,GAAW5C,GAAsC;AACxD,SACE,gBAAAE;AAAA,IAAC2C;AAAAA,IAAA;AAAA,MACE,GAAG7C;AAAA,MACJ,WAAWiB;AAAA,QACT;AAAA,QACAjB,EAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAEA,SAAS8C,GAAM9C,GAAiC;AAC9C,SACE,gBAAAE;AAAA,IAAC6C;AAAAA,IAAA;AAAA,MACE,GAAG/C;AAAA,MACJ,WAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA,SAASgD,EAAK;AAAA,EACZ,aAAAC,IAAc;AAAA,EACd,GAAGjD;AACL,GAKG;AACD,SACE,gBAAAsB;AAAA,IAAC4B;AAAAA,IAAA;AAAA,MACE,GAAGlD;AAAA,MACJ,WAAWiB;AAAA,QACT;AAAA;AAAA,QACA;AAAA;AAAA,QACA;AAAA;AAAA,QACA;AAAA;AAAA,QACA;AAAA;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAjB,EAAM;AAAA,QACP,gBAAAE;AAAA,UAACiD;AAAAA,UAAA;AAAA,YACC,cAAYF;AAAA,YACZ,WAAWhC;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAf,EAACgC,GAAA,EAAM,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACnB;AAAA,IAAA;AAAA,EAAA;AAGN;AAGA,MAAMkB,KAAoD;AAAA,EACxD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AACN;AAEA,SAASC,EAAoC;AAAA,EAC3C,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAjD;AAAA,EACA,WAAAkD,IAAY;AAAA,EACZ,OAAOC;AACT,GAOG;AACD,QAAM1D,IAAOqB,EAAW9B,CAAmB,GAErCoE,IAAgBD;AAEtB,SACE,gBAAAnC;AAAA,IAACqC;AAAAA,IAAA;AAAA,MACC,WAAW1C;AAAA,QACTO,EAAc,EAAE,MAAAzB,GAAM;AAAA,QACtB;AAAA,QACA;AAAA,QACAqD,GAAgBrD,CAAI;AAAA,QACpB;AAAA,QACA;AAAA,QACAO;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAkD,MAAc,SACb,gBAAAtD;AAAA,UAAC8B;AAAAA,UAAA;AAAA,YACC,aAAAsB;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAId,gBAAAhC,EAAC,OAAA,EAAI,WAAU,8CAEZ,UAAA;AAAA,UAAAoC,MAAkB,UACjBA,EAAc,SAAS,KACvBA,EAAc,IAAI,CAACE,MAASL,EAAWK,CAAI,CAAC;AAAA,UAE9C,gBAAA1D,EAACuB,GAAA,EACE,WAACoC,MAEIH,MAAkB,SAAkB,OAEtC,gBAAAxD,EAAC4D,KACE,UAAAD,EAAc,IAAI,CAACD,MAASL,EAAWK,CAAI,CAAC,EAAA,CAC/C,GAGN;AAAA,UACCJ,MAAc,WACb,gBAAAtD;AAAA,YAAC8B;AAAAA,YAAA;AAAA,cACC,aAAAsB;AAAA,cACA,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA9D,EAAK,cAAc;AACnBa,EAAQ,cAAc;AACtBc,EAAa,cAAc;AAC3BU,EAAa,cAAc;AAC3BM,EAAK,cAAc;AACnBa,EAAK,cAAc;AACnBK,EAAyB,cAAc;AAuBhC,MAAMU,KAAW,OAAO,OAAOvE,GAAM;AAAA;AAAA,EAE1C,SAAAa;AAAA,EACA,cAAAc;AAAA,EACA,cAAAU;AAAA,EACA,0BAAAwB;AAAA;AAAA,EAGA,MAAAL;AAAA,EACA,MAAAb;AAAA;AAAA,EAGA,OAAAM;AAAA,EACA,OAAAF;AAAA,EACA,YAAAK;AAAA,EACA,OAAAE;AAAA;AAAA,EAGA,MAAAJ;AAAA;AAAA,EAGA,YAAYsB;AACd,CAAC;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"command-palette-maqtbmpfev9mysqd.js","sources":["../../src/components/command-palette/command-palette.tsx"],"sourcesContent":["import {\n useRef,\n useCallback,\n createContext,\n useContext,\n forwardRef,\n type CSSProperties,\n} from \"react\";\nimport { Autocomplete } from \"@base-ui/react/autocomplete\";\nimport { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport {\n MagnifyingGlassIcon,\n ArrowRightIcon,\n ArrowSquareOutIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\n\nimport { LayerCard } from \"../layer-card\";\nimport { Loader } from \"../loader\";\nimport { cn } from \"../../utils\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\nimport type {\n HighlightRange,\n CommandPaletteRootProps,\n CommandPaletteListProps,\n CommandPaletteGroupProps,\n CommandPaletteGroupLabelProps,\n CommandPaletteItemProps,\n CommandPaletteEmptyProps,\n CommandPaletteLoadingProps,\n CommandPaletteFooterProps,\n CommandPaletteResultItemProps,\n} from \"./types\";\n\n/**\n * CommandPalette - A composable command palette component for Kumo\n *\n * Uses @base-ui/react/autocomplete primitives for accessible command palette functionality.\n *\n * Keyboard navigation is built-in:\n * - Arrow keys (up/down) move highlight between items\n * - Enter selects the highlighted item (calls onSelect with newTab: false)\n * - Cmd+Enter (Mac) / Ctrl+Enter (Windows/Linux) selects with newTab: true\n * - First item is auto-highlighted when results change\n * - Escape closes the dialog\n *\n * Usage:\n * ```tsx\n * <CommandPalette.Root\n * open={open}\n * onOpenChange={setOpen}\n * items={results}\n * value={searchTerm}\n * onValueChange={setSearchTerm}\n * itemToStringValue={(group) => group.label}\n * onSelect={(item, { newTab }) => handleSelect(item, newTab)}\n * getSelectableItems={(groups) => groups.flatMap(g => g.items)}\n * >\n * <CommandPalette.Input placeholder=\"Search...\" />\n * <CommandPalette.List>\n * <Autocomplete.List>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <Autocomplete.Collection>\n * {(item) => (\n * <CommandPalette.Item value={item} onClick={(e) => handleSelect(item, e.metaKey || e.ctrlKey)}>\n * {item.title}\n * </CommandPalette.Item>\n * )}\n * </Autocomplete.Collection>\n * </CommandPalette.Group>\n * )}\n * </Autocomplete.List>\n * <CommandPalette.Empty>No results found</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer />\n * </CommandPalette.Root>\n * ```\n */\n\n/**\n * Dialog context for passing close handler to children\n */\ninterface DialogContextValue {\n onClose?: () => void;\n}\n\nconst DialogContext = createContext<DialogContextValue>({});\n\n/**\n * Props for the Dialog component\n */\ninterface DialogProps {\n /** Whether the dialog is open */\n open: boolean;\n /** Callback when the open state changes */\n onOpenChange: (open: boolean) => void;\n /**\n * Optional callback when backdrop is clicked.\n * Receives the mouse event for position tracking (e.g., for ripple effects).\n * If not provided, backdrop click calls onOpenChange(false).\n */\n onBackdropClick?: (e: React.MouseEvent) => void;\n /** Child content - typically one or more Panel components */\n children: React.ReactNode;\n /**\n * Container element for the portal. Use this to render the command palette inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n */\n container?: PortalContainer;\n}\n\n/**\n * Dialog component - Modal wrapper for command palette content.\n *\n * Use this when you need a dialog that can swap between different Panel contents\n * without re-mounting (e.g., drill-down navigation).\n *\n * @example\n * ```tsx\n * <CommandPalette.Dialog open={open} onOpenChange={setOpen}>\n * {showDrillDown ? (\n * <ZonePicker />\n * ) : (\n * <CommandPalette.Panel items={results} ...>\n * ...\n * </CommandPalette.Panel>\n * )}\n * </CommandPalette.Dialog>\n * ```\n */\nfunction Dialog({\n open,\n onOpenChange,\n onBackdropClick,\n children,\n container: containerProp,\n}: DialogProps) {\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n const handleBackdropClick = (e: React.MouseEvent) => {\n if (onBackdropClick) {\n onBackdropClick(e);\n } else {\n onOpenChange(false);\n }\n };\n\n const handleClose = useCallback(() => {\n onOpenChange(false);\n }, [onOpenChange]);\n\n return (\n <DialogBase.Root open={open} onOpenChange={onOpenChange} modal>\n <DialogBase.Portal container={container}>\n <DialogBase.Backdrop\n className=\"fixed inset-0 bg-kumo-overlay opacity-80 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\"\n onClick={handleBackdropClick}\n />\n <LayerCard\n render={<DialogBase.Popup />}\n className={cn(\n \"fixed top-[10vh] left-1/2 w-full max-w-2xl -translate-x-1/2\",\n \"overflow-hidden rounded-lg\",\n \"duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0\",\n )}\n style={\n {\n transitionProperty: \"scale, opacity\",\n transitionTimingFunction:\n \"var(--default-transition-timing-function)\",\n } as CSSProperties\n }\n >\n <DialogContext.Provider value={{ onClose: handleClose }}>\n {children}\n </DialogContext.Provider>\n </LayerCard>\n </DialogBase.Portal>\n </DialogBase.Root>\n );\n}\n\n/**\n * Root component - Dialog + Panel combined for simple use cases.\n *\n * For cases where you need to swap content inside the dialog without\n * re-mounting (e.g., drill-down navigation), use Dialog + Panel separately.\n *\n * Keyboard navigation is always enabled:\n * - Arrow keys (up/down) move highlight\n * - Enter selects highlighted item\n * - Cmd/Ctrl+Enter selects with newTab: true\n * - First item is auto-highlighted when results change\n */\nfunction Root<TGroup, TItem = TGroup>({\n open,\n onOpenChange,\n onBackdropClick,\n children,\n items,\n value,\n onValueChange,\n onItemHighlighted,\n itemToStringValue,\n filter,\n onSelect,\n getSelectableItems,\n container,\n}: CommandPaletteRootProps<TGroup, TItem>) {\n return (\n <Dialog\n open={open}\n onOpenChange={onOpenChange}\n onBackdropClick={onBackdropClick}\n container={container}\n >\n <Panel\n items={items}\n value={value}\n onValueChange={onValueChange}\n onItemHighlighted={onItemHighlighted}\n itemToStringValue={itemToStringValue}\n filter={filter}\n open={open}\n onSelect={onSelect}\n getSelectableItems={getSelectableItems}\n >\n {children}\n </Panel>\n </Dialog>\n );\n}\n\n/**\n * InputHeader component - Internal styled container for search input.\n */\nfunction InputHeader({\n children,\n leading,\n trailing,\n}: {\n children: React.ReactNode;\n leading?: React.ReactNode;\n trailing?: React.ReactNode;\n}) {\n return (\n <div className=\"flex items-center gap-3 bg-kumo-base px-4 py-3\">\n {leading ?? (\n <MagnifyingGlassIcon\n className=\"h-4 w-4 text-kumo-subtle\"\n weight=\"bold\"\n />\n )}\n {children}\n {trailing}\n </div>\n );\n}\n\n/**\n * List component - Scrollable results container\n *\n * Wrapper div with proper styling, contains Autocomplete.List internally.\n * Supports ref forwarding for scroll control.\n */\nconst List = forwardRef<\n HTMLDivElement,\n CommandPaletteListProps & { className?: string }\n>(function List({ children, className }, ref) {\n return (\n <div\n ref={ref}\n className={cn(\n \"min-h-0 flex-1 overflow-y-auto rounded-b-lg bg-kumo-base px-2 py-2 ring-1 ring-kumo-hairline\",\n className,\n )}\n >\n {children}\n </div>\n );\n});\n\nList.displayName = \"CommandPalette.List\";\n\n/**\n * Group component - Category grouping\n *\n * Re-export of Autocomplete.Group with default styling.\n */\nfunction Group({\n children,\n className,\n ...props\n}: CommandPaletteGroupProps & {\n className?: string;\n items?: unknown[];\n}) {\n return (\n <Autocomplete.Group className={cn(\"space-y-0.5\", className)} {...props}>\n {children}\n </Autocomplete.Group>\n );\n}\n\n/**\n * GroupLabel component - Section header text\n *\n * Re-export of Autocomplete.GroupLabel with styling matching SectionHeader.\n */\nfunction GroupLabel({\n children,\n className,\n}: CommandPaletteGroupLabelProps & { className?: string }) {\n return (\n <Autocomplete.GroupLabel\n className={cn(\n \"mb-2 px-2 pt-1 text-xs font-semibold text-kumo-strong\",\n className,\n )}\n >\n {children}\n </Autocomplete.GroupLabel>\n );\n}\n\n/**\n * Item component - Individual result item\n *\n * Re-export of Autocomplete.Item with styling matching SearchResultItem.\n * Note: Use onClick for selection handling, matching the existing CommandPalette pattern.\n */\nfunction Item<T>({\n value,\n disabled,\n children,\n className,\n onClick,\n}: CommandPaletteItemProps<T> & {\n className?: string;\n}) {\n return (\n <Autocomplete.Item\n value={value}\n disabled={disabled}\n onClick={onClick}\n className={cn(\n \"group flex w-full items-center gap-3 px-2 py-1.5 text-left text-base transition-colors\",\n \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n \"rounded-lg\",\n disabled && \"cursor-default opacity-50\",\n className,\n )}\n >\n {children}\n </Autocomplete.Item>\n );\n}\n\n/**\n * Empty component - Empty state when no results\n *\n * Re-export of Autocomplete.Empty with default styling.\n */\nfunction Empty({ children }: CommandPaletteEmptyProps) {\n return (\n <Autocomplete.Empty>\n <div className=\"p-8 text-center\">\n <p className=\"text-kumo-strong\">{children ?? \"No results found\"}</p>\n </div>\n </Autocomplete.Empty>\n );\n}\n\n/**\n * Loading component - Loading spinner state\n *\n * Centered loading spinner using Kumo Loader.\n */\nfunction Loading({ children }: CommandPaletteLoadingProps) {\n return (\n <div className=\"flex items-center justify-center p-8\">\n {children ?? <Loader size={24} />}\n </div>\n );\n}\n\n/**\n * Footer component - Styled container for keyboard hints or other footer content.\n *\n * Children are required - this is just a styled container.\n * Consumers should provide their own keyboard hints with proper i18n.\n */\nfunction Footer({ children }: CommandPaletteFooterProps) {\n return (\n <div className=\"flex items-center justify-between rounded-b-lg bg-kumo-elevated px-4 py-3 text-xs text-kumo-strong\">\n {children}\n </div>\n );\n}\n\n/**\n * HighlightedText - Renders text with highlighted portions based on match indices.\n * Highlighted text is shown with a background color to indicate matches.\n */\nfunction HighlightedText({\n text,\n highlights,\n className,\n}: {\n text: string;\n highlights?: HighlightRange[];\n className?: string;\n}) {\n if (!highlights || highlights.length === 0) {\n return <span className={className}>{text}</span>;\n }\n\n // Sort highlights by start index and merge overlapping ranges\n const sortedHighlights = [...highlights].sort((a, b) => a[0] - b[0]);\n const mergedHighlights: HighlightRange[] = [];\n\n for (const range of sortedHighlights) {\n const last = mergedHighlights[mergedHighlights.length - 1];\n if (last && range[0] <= last[1] + 1) {\n // Merge overlapping or adjacent ranges\n last[1] = Math.max(last[1], range[1]);\n } else {\n mergedHighlights.push([...range]);\n }\n }\n\n const parts: React.ReactNode[] = [];\n let lastIndex = 0;\n\n mergedHighlights.forEach((range, i) => {\n const [start, end] = range;\n\n // Add non-highlighted text before this match\n if (start > lastIndex) {\n parts.push(<span key={`text-${i}`}>{text.slice(lastIndex, start)}</span>);\n }\n\n // Add highlighted text (end index is inclusive)\n parts.push(\n <mark\n key={`highlight-${i}`}\n className=\"rounded-sm bg-kumo-warning/50 text-kumo-default\"\n >\n {text.slice(start, end + 1)}\n </mark>,\n );\n\n lastIndex = end + 1;\n });\n\n // Add remaining non-highlighted text\n if (lastIndex < text.length) {\n parts.push(<span key=\"text-end\">{text.slice(lastIndex)}</span>);\n }\n\n return <span className={className}>{parts}</span>;\n}\n\n/**\n * ResultItem - Rich item component with breadcrumbs, highlights, icons, and external indicators.\n *\n * Use this for search result items that need breadcrumb navigation, text highlighting,\n * or external link indicators. For simple items, use Item instead.\n */\nfunction ResultItem<T>({\n title,\n breadcrumbs,\n titleHighlights,\n breadcrumbHighlights,\n description,\n icon,\n value,\n onClick,\n showArrow = true,\n external = false,\n nonInteractive = false,\n}: CommandPaletteResultItemProps<T>) {\n return (\n <Autocomplete.Item\n value={value}\n onClick={nonInteractive ? undefined : (e: React.MouseEvent) => onClick(e)}\n className={cn(\n \"group flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors\",\n nonInteractive\n ? \"cursor-default\"\n : \"cursor-pointer data-[highlighted]:bg-kumo-overlay\",\n )}\n >\n {icon && (\n <div className=\"flex flex-shrink-0 items-center text-kumo-subtle\">\n {icon}\n </div>\n )}\n <div className=\"min-w-0 flex-1\">\n <div className=\"flex items-center gap-2 truncate\">\n {breadcrumbs?.map((crumb, index) => (\n <span key={index} className=\"flex items-center gap-2\">\n <HighlightedText\n text={crumb}\n highlights={breadcrumbHighlights?.[index]}\n className=\"text-base text-kumo-default\"\n />\n <CaretRightIcon\n className=\"h-3 w-3 flex-shrink-0 text-kumo-subtle\"\n weight=\"bold\"\n />\n </span>\n ))}\n <HighlightedText\n text={title}\n highlights={titleHighlights}\n className=\"text-base text-kumo-default\"\n />\n {external && (\n <ArrowSquareOutIcon className=\"h-3.5 w-3.5 flex-shrink-0 text-kumo-subtle\" />\n )}\n {description && (\n <>\n <span className=\"text-kumo-strong\">—</span>\n <span className=\"truncate text-sm text-kumo-strong\">\n {description}\n </span>\n </>\n )}\n </div>\n </div>\n {showArrow && !external && !nonInteractive && (\n <ArrowRightIcon className=\"h-4 w-4 flex-shrink-0 text-kumo-subtle opacity-0 transition-opacity group-data-[highlighted]:opacity-100\" />\n )}\n </Autocomplete.Item>\n );\n}\n\n/**\n * Container component - Internal styled wrapper.\n */\nfunction Container({\n children,\n className,\n}: {\n children: React.ReactNode;\n className?: string;\n}) {\n return (\n <div\n className={cn(\n \"flex max-h-[60vh] flex-col overflow-hidden rounded-lg bg-kumo-elevated\",\n className,\n )}\n >\n {children}\n </div>\n );\n}\n\n/**\n * Panel context for passing handlers from Panel to children\n */\ninterface PanelContextValue {\n onInputKeyDown?: (e: React.KeyboardEvent) => void;\n}\n\nconst PanelContext = createContext<PanelContextValue>({});\n\n/**\n * Props for the Panel component\n */\ninterface PanelProps<TGroup, TItem = TGroup> {\n /** Child components (Input, List, Footer, etc.) */\n children: React.ReactNode;\n /** Items for the autocomplete */\n items: TGroup[];\n /** Controlled input value */\n value?: string;\n /** Callback when input value changes */\n onValueChange?: (value: string) => void;\n /** Callback when an item is highlighted */\n onItemHighlighted?: (\n item: TGroup | undefined,\n details: { reason: string; event: Event; index: number },\n ) => void;\n /** Convert item to string for accessibility */\n itemToStringValue?: (item: TGroup) => string;\n /** Custom filter function */\n filter?: (item: TGroup, query: string) => boolean;\n /** Whether the panel is active/open (for autocomplete state) */\n open?: boolean;\n /** Optional className for the container */\n className?: string;\n /**\n * Callback when an item is selected via Cmd/Ctrl+Enter.\n * Requires getSelectableItems to be provided.\n */\n onSelect?: (item: TItem, options: { newTab: boolean }) => void;\n /**\n * Function to get flat list of selectable items from groups.\n * Required when items are grouped and onSelect is used.\n */\n getSelectableItems?: (items: TGroup[]) => TItem[];\n}\n\n/**\n * Panel component - Command palette without dialog wrapper.\n *\n * Use this when you need to render command palette content inside an existing dialog\n * (e.g., for drill-down navigation where the dialog stays open but content changes).\n *\n * Combines Container + Autocomplete functionality with a clean API.\n *\n * @example\n * ```tsx\n * <DialogRoot open={open} onOpenChange={setOpen}>\n * <Dialog>\n * <CommandPalette.Panel\n * items={results}\n * value={searchTerm}\n * onValueChange={setSearchTerm}\n * itemToStringValue={(group) => group.label}\n * >\n * <CommandPalette.Input placeholder=\"Search...\" />\n * <CommandPalette.List>\n * <CommandPalette.Results>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <CommandPalette.Items>\n * {(item) => <CommandPalette.ResultItem ... />}\n * </CommandPalette.Items>\n * </CommandPalette.Group>\n * )}\n * </CommandPalette.Results>\n * <CommandPalette.Empty>No results</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer>...</CommandPalette.Footer>\n * </CommandPalette.Panel>\n * </Dialog>\n * </DialogRoot>\n * ```\n */\nconst defaultFilter = () => true;\n\nfunction Panel<TGroup, TItem = TGroup>({\n children,\n items,\n value,\n onValueChange,\n onItemHighlighted,\n itemToStringValue,\n filter = defaultFilter,\n open = true,\n className,\n onSelect,\n getSelectableItems,\n}: PanelProps<TGroup, TItem>) {\n const highlightedIndexRef = useRef<number>(-1);\n\n const handleItemHighlighted = useCallback(\n (\n item: TGroup | undefined,\n details: { reason: string; event: Event; index: number },\n ) => {\n highlightedIndexRef.current = details.index;\n onItemHighlighted?.(item, details);\n },\n [onItemHighlighted],\n );\n\n // Handle Cmd/Ctrl+Enter for new tab selection\n const handleInputKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n const isEnter = e.key === \"Enter\";\n const withModifier = e.metaKey || e.ctrlKey;\n\n if (isEnter && withModifier && onSelect && getSelectableItems) {\n const selectableItems = getSelectableItems(items);\n const highlightedItem = selectableItems[highlightedIndexRef.current];\n\n if (highlightedItem !== undefined) {\n e.preventDefault();\n onSelect(highlightedItem, { newTab: true });\n }\n }\n },\n [items, onSelect, getSelectableItems],\n );\n\n return (\n <Container className={className}>\n <Autocomplete.Root\n items={items}\n value={value}\n onValueChange={onValueChange}\n onItemHighlighted={handleItemHighlighted}\n itemToStringValue={itemToStringValue}\n filter={filter}\n autoHighlight=\"always\"\n keepHighlight\n open={open}\n >\n <PanelContext.Provider value={{ onInputKeyDown: handleInputKeyDown }}>\n {children}\n </PanelContext.Provider>\n </Autocomplete.Root>\n </Container>\n );\n}\n\n/**\n * PanelInput component - Input that works inside Panel.\n *\n * Similar to Input but designed for use with Panel instead of Root.\n * Automatically wires up Cmd/Ctrl+Enter handling from Panel.\n */\nfunction PanelInput({\n autoFocus = true,\n placeholder,\n className,\n onKeyDown: onKeyDownProp,\n leading,\n trailing,\n ...props\n}: {\n autoFocus?: boolean;\n placeholder?: string;\n className?: string;\n onKeyDown?: (e: React.KeyboardEvent) => void;\n /** Optional leading content (e.g., back button) */\n leading?: React.ReactNode;\n /** Optional trailing content (e.g., Esc button) */\n trailing?: React.ReactNode;\n}) {\n const { onInputKeyDown } = useContext(PanelContext);\n const { onClose } = useContext(DialogContext);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n // Let consumer handle first (e.g., for custom Escape/Backspace behavior)\n onKeyDownProp?.(e);\n if (e.defaultPrevented) return;\n\n // Handle Escape to close the dialog\n if (e.key === \"Escape\" && onClose) {\n e.preventDefault();\n onClose();\n return;\n }\n onInputKeyDown?.(e);\n },\n [onInputKeyDown, onKeyDownProp, onClose],\n );\n\n return (\n <InputHeader leading={leading} trailing={trailing}>\n <Autocomplete.Input\n placeholder={placeholder}\n className={cn(\n \"flex-1 border-none bg-transparent text-base kumo-input-placeholder\",\n \"outline-none focus-visible:outline-none\",\n className,\n )}\n onKeyDown={handleKeyDown}\n // oxlint-disable-next-line no-autofocus -- Command palette input should autofocus for keyboard-driven UX\n autoFocus={autoFocus}\n {...props}\n />\n </InputHeader>\n );\n}\n\n/**\n * Render prop iterators - wrap base-ui primitives with cleaner names.\n */\n\n/**\n * Results component - Render prop iterator for groups.\n *\n * Wraps Autocomplete.List with default spacing between groups.\n */\nfunction Results({\n children,\n className,\n}: React.ComponentProps<typeof Autocomplete.List> & { className?: string }) {\n return (\n <Autocomplete.List className={cn(\"space-y-3\", className)}>\n {children}\n </Autocomplete.List>\n );\n}\n\nconst Items = Autocomplete.Collection;\n\n/** CommandPalette variant definitions (no user-facing variants; structure reserved for future use). */\nexport const KUMO_COMMAND_PALETTE_VARIANTS = {} as const;\n\nexport const KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS = {} as const;\n\n/**\n * CommandPalette — accessible command palette / spotlight search overlay.\n *\n * Compound component: `CommandPalette.Root` (or `.Dialog` + `.Panel`),\n * `.Input`, `.List`, `.Results`, `.Items`, `.Group`, `.GroupLabel`,\n * `.Item`, `.ResultItem`, `.HighlightedText`, `.Empty`, `.Loading`, `.Footer`.\n *\n * Built on `@base-ui/react/autocomplete` + `@base-ui/react/dialog`.\n *\n * @example\n * ```tsx\n * <CommandPalette.Root\n * open={open}\n * onOpenChange={setOpen}\n * items={results}\n * value={query}\n * onValueChange={setQuery}\n * itemToStringValue={(g) => g.label}\n * onSelect={(item, { newTab }) => navigate(item, newTab)}\n * getSelectableItems={(groups) => groups.flatMap((g) => g.items)}\n * >\n * <CommandPalette.Input placeholder=\"Search…\" />\n * <CommandPalette.List>\n * <CommandPalette.Results>\n * {(group) => (\n * <CommandPalette.Group items={group.items}>\n * <CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>\n * <CommandPalette.Items>\n * {(item) => (\n * <CommandPalette.ResultItem title={item.title} value={item} onClick={…} />\n * )}\n * </CommandPalette.Items>\n * </CommandPalette.Group>\n * )}\n * </CommandPalette.Results>\n * <CommandPalette.Empty>No results found</CommandPalette.Empty>\n * </CommandPalette.List>\n * <CommandPalette.Footer>…keyboard hints…</CommandPalette.Footer>\n * </CommandPalette.Root>\n * ```\n */\nexport const CommandPalette = {\n /** Modal dialog wrapper - use with Panel for content that can swap */\n Dialog,\n /** Dialog + Panel combined - for simple single-view command palettes */\n Root,\n /** Autocomplete panel without dialog - use inside Dialog for swappable content */\n Panel,\n /** Input for use inside Panel */\n Input: PanelInput,\n /** Scrollable results container */\n List,\n /** Category grouping */\n Group,\n /** Section header text */\n GroupLabel,\n /** Basic item */\n Item,\n /** Rich item with breadcrumbs, highlights, icons */\n ResultItem,\n /** Text with highlighted portions */\n HighlightedText,\n /** Empty state */\n Empty,\n /** Loading state */\n Loading,\n /** Footer for keyboard hints */\n Footer,\n /** Render prop iterator for groups */\n Results,\n /** Render prop iterator for items within a group */\n Items,\n};\n"],"names":["DialogContext","createContext","Dialog","open","onOpenChange","onBackdropClick","children","containerProp","contextContainer","usePortalContainer","container","handleBackdropClick","e","handleClose","useCallback","jsx","DialogBase.Root","jsxs","DialogBase.Portal","DialogBase.Backdrop","LayerCard","DialogBase.Popup","cn","Root","items","value","onValueChange","onItemHighlighted","itemToStringValue","filter","onSelect","getSelectableItems","Panel","InputHeader","leading","trailing","MagnifyingGlassIcon","List","forwardRef","className","ref","Group","props","Autocomplete.Group","GroupLabel","Autocomplete.GroupLabel","Item","disabled","onClick","Autocomplete.Item","Empty","Autocomplete.Empty","Loading","Loader","Footer","HighlightedText","text","highlights","sortedHighlights","a","b","mergedHighlights","range","last","parts","lastIndex","i","start","end","ResultItem","title","breadcrumbs","titleHighlights","breadcrumbHighlights","description","icon","showArrow","external","nonInteractive","crumb","index","CaretRightIcon","ArrowSquareOutIcon","Fragment","ArrowRightIcon","Container","PanelContext","defaultFilter","highlightedIndexRef","useRef","handleItemHighlighted","item","details","handleInputKeyDown","isEnter","withModifier","highlightedItem","Autocomplete.Root","PanelInput","autoFocus","placeholder","onKeyDownProp","onInputKeyDown","useContext","onClose","handleKeyDown","Autocomplete.Input","Results","Autocomplete.List","Items","Autocomplete.Collection","KUMO_COMMAND_PALETTE_VARIANTS","KUMO_COMMAND_PALETTE_DEFAULT_VARIANTS","CommandPalette"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-ewte287db3vyt8t5.js","sources":["../../src/components/dropdown/dropdown.tsx"],"sourcesContent":["import { Menu as DropdownMenuPrimitive } from \"@base-ui/react/menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useLinkComponent } from \"../../utils/link-provider\";\nimport {\n usePortalContainer,\n type PortalContainer,\n} from \"../../utils/portal-provider\";\nimport {\n CaretRightIcon as CaretRight,\n CheckIcon,\n CheckIcon as Check,\n type Icon,\n} from \"@phosphor-icons/react\";\n\n/** Dropdown item variant definitions (default and danger styles). */\nexport const KUMO_DROPDOWN_VARIANTS = {\n variant: {\n default: {\n classes: \"\",\n description: \"Default dropdown item appearance\",\n },\n danger: {\n classes:\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n description: \"Destructive action item\",\n },\n },\n} as const;\n\nexport const KUMO_DROPDOWN_DEFAULT_VARIANTS = {\n variant: \"default\",\n} as const;\n\n// Derived types from KUMO_DROPDOWN_VARIANTS\nexport type KumoDropdownVariant = keyof typeof KUMO_DROPDOWN_VARIANTS.variant;\n\nexport interface KumoDropdownVariantsProps {\n /**\n * Visual style of the dropdown item.\n * - `\"default\"` — Standard item appearance\n * - `\"danger\"` — Destructive action with red text\n * @default \"default\"\n */\n variant?: KumoDropdownVariant;\n}\n\nexport function dropdownVariants({\n variant = KUMO_DROPDOWN_DEFAULT_VARIANTS.variant,\n}: KumoDropdownVariantsProps = {}) {\n return cn(KUMO_DROPDOWN_VARIANTS.variant[variant].classes);\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.SubmenuTrigger>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.SubmenuTrigger\n > & {\n inset?: boolean;\n icon?: Icon;\n }\n>(({ className, inset, children, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.SubmenuTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default items-center rounded-sm text-base outline-hidden select-none\", // base styles\n \"px-2 py-1.5\", // spacing\n \"focus:bg-kumo-tint\", // focus state\n \"data-[state=open]:bg-kumo-tint\", // open state\n inset && \"pl-8\", // conditional inset\n className,\n )}\n {...props}\n >\n {IconComponent && <IconComponent className=\"mr-2 h-4 w-4\" />}\n {children}\n <CaretRight className=\"ml-auto h-4 w-4\" />\n </DropdownMenuPrimitive.SubmenuTrigger>\n));\n\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubmenuTrigger.displayName;\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Positioner>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Positioner> & {\n /**\n * Container element for the portal. Use this to render the dropdown inside\n * a Shadow DOM or custom container. Overrides `KumoPortalProvider` context.\n * @default document.body (or KumoPortalProvider container if set)\n */\n container?: PortalContainer;\n }\n>(\n (\n { className, sideOffset = 8, children, container: containerProp, ...props },\n ref,\n ) => {\n const contextContainer = usePortalContainer();\n const container = containerProp ?? contextContainer ?? undefined;\n\n return (\n <DropdownMenuPrimitive.Portal container={container}>\n <DropdownMenuPrimitive.Positioner\n ref={ref}\n sideOffset={sideOffset}\n {...props}\n >\n <DropdownMenuPrimitive.Popup\n className={cn(\n \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n \"min-w-36 p-1.5\", // spacing\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\", // open animation\n \"data-[side=bottom]:slide-in-from-top-2\", // bottom side animation\n \"data-[side=left]:slide-in-from-right-2\", // left side animation\n \"data-[side=right]:slide-in-from-left-2\", // right side animation\n \"data-[side=top]:slide-in-from-bottom-2\", // top side animation\n \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\", // close animation\n className,\n )}\n >\n {children}\n </DropdownMenuPrimitive.Popup>\n </DropdownMenuPrimitive.Positioner>\n </DropdownMenuPrimitive.Portal>\n );\n },\n);\n\nconst renderIconNode = (IconComponent?: Icon | React.ReactNode) => {\n if (!IconComponent) return null;\n if (React.isValidElement(IconComponent)) return IconComponent;\n const Comp = IconComponent as React.ComponentType<Record<string, unknown>>;\n return <Comp className=\"mr-2 h-4 w-4\" />;\n};\n\n/**\n * DropdownMenuItem — a single actionable item within a dropdown menu.\n *\n * For navigation links, use `DropdownMenu.LinkItem` instead.\n *\n * @example\n * ```tsx\n * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n * <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n * <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n * ```\n */\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n selected?: boolean;\n /**\n * @deprecated Use `DropdownMenu.LinkItem` instead for navigation links.\n * This prop will be removed in a future major version.\n */\n href?: string;\n variant?: \"default\" | \"danger\";\n }\n>(\n (\n {\n className,\n inset,\n icon: IconComponent,\n children,\n selected,\n render,\n href,\n variant = \"default\",\n ...props\n },\n ref,\n ) => {\n const LinkComponent = useLinkComponent();\n\n // Build the inner content with icon, children, and selected indicator\n const innerContent = React.useMemo(\n () => (\n <>\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n {selected && (\n <span className=\"inline-flex\">\n <Check />\n </span>\n )}\n </>\n ),\n [IconComponent, children, selected],\n );\n\n // Legacy href support (deprecated)\n const linkContent = React.useMemo(() => {\n if (!href) return undefined;\n\n // Matches http://, https://, or protocol-relative //\n const isExternal = /^(https?:)?\\/\\//.test(href);\n const styles = cn(\n \"flex items-center\",\n variant === \"danger\" &&\n \"text-kumo-danger data-highlighted:bg-kumo-danger/5 data-highlighted:text-kumo-danger\",\n );\n if (isExternal) {\n return (\n <a\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n target=\"_blank\"\n rel=\"noreferrer\"\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </a>\n );\n }\n return (\n <LinkComponent\n className={cn(styles, \"w-full text-inherit! no-underline!\")}\n href={href}\n to={href}\n onClick={(e) => e.stopPropagation()}\n >\n {innerContent}\n </LinkComponent>\n );\n }, [href, innerContent, variant, LinkComponent]);\n\n // When href is provided, use linkContent as render prop\n // When render prop is provided, caller controls children rendering\n const useRenderProp = href || render;\n\n return (\n <DropdownMenuPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n inset && \"pl-8\",\n dropdownVariants({ variant }),\n className,\n )}\n render={href ? linkContent : render}\n {...props}\n >\n {useRenderProp ? undefined : innerContent}\n </DropdownMenuPrimitive.Item>\n );\n },\n);\n\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;\n\n/**\n * DropdownMenuLinkItem — a menu item that navigates to a URL.\n *\n * Use this instead of `DropdownMenu.Item` with `href` for navigation links.\n * Provides full control over link attributes like `target` and `rel`.\n *\n * @example\n * ```tsx\n * // External link\n * <DropdownMenu.LinkItem href=\"https://example.com\" target=\"_blank\">\n * Documentation\n * </DropdownMenu.LinkItem>\n *\n * // Internal link\n * <DropdownMenu.LinkItem href=\"/settings\">\n * Settings\n * </DropdownMenu.LinkItem>\n *\n * // With icon\n * <DropdownMenu.LinkItem href=\"/profile\" icon={UserIcon}>\n * Profile\n * </DropdownMenu.LinkItem>\n * ```\n */\nconst DropdownMenuLinkItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.LinkItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.LinkItem> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n variant?: \"default\" | \"danger\";\n }\n>(\n (\n {\n className,\n inset,\n icon: IconComponent,\n children,\n variant = \"default\",\n ...props\n },\n ref,\n ) => {\n return (\n <DropdownMenuPrimitive.LinkItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n \"focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-overlay\",\n \"text-inherit no-underline\",\n inset && \"pl-8\",\n dropdownVariants({ variant }),\n className,\n )}\n {...props}\n >\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n </DropdownMenuPrimitive.LinkItem>\n );\n },\n);\n\nDropdownMenuLinkItem.displayName = \"DropdownMenuLinkItem\";\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <DropdownMenuPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-base outline-hidden transition-colors select-none focus:bg-kumo-tint focus:text-kumo-default data-disabled:pointer-events-none data-disabled:opacity-50\",\n className,\n )}\n checked={checked}\n {...props}\n >\n <DropdownMenuPrimitive.CheckboxItemIndicator className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-inherit\">\n <CheckIcon weight=\"bold\" size={12} />\n </DropdownMenuPrimitive.CheckboxItemIndicator>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n));\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName;\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.GroupLabel>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.GroupLabel> & {\n inset?: boolean;\n }\n>(({ className, inset, ...props }, ref) => (\n <DropdownMenuPrimitive.GroupLabel\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-base font-semibold\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n />\n));\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.GroupLabel.displayName;\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <DropdownMenuPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-kumo-hairline\", className)}\n {...props}\n />\n));\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n {...props}\n />\n );\n};\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\";\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {\n inset?: boolean;\n icon?: Icon | React.ReactNode;\n }\n>(({ className, children, inset, icon: IconComponent, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default items-center rounded-md px-2 py-1.5 text-base outline-hidden select-none\",\n \"data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-kumo-tint\",\n inset && \"pl-8\",\n className,\n )}\n {...props}\n >\n {IconComponent && renderIconNode(IconComponent)}\n {children}\n </DropdownMenuPrimitive.RadioItem>\n));\nDropdownMenuRadioItem.displayName = \"DropdownMenuRadioItem\";\n\nconst DropdownMenuRadioItemIndicator = React.forwardRef<\n React.ElementRef<typeof DropdownMenuPrimitive.RadioItemIndicator>,\n React.ComponentPropsWithoutRef<\n typeof DropdownMenuPrimitive.RadioItemIndicator\n >\n>(({ className, children, ...props }, ref) => (\n <DropdownMenuPrimitive.RadioItemIndicator\n ref={ref}\n className={cn(\"ml-auto\", className)}\n {...props}\n >\n {children ?? <Check className=\"h-4 w-4\" />}\n </DropdownMenuPrimitive.RadioItemIndicator>\n));\nDropdownMenuRadioItemIndicator.displayName = \"DropdownMenuRadioItemIndicator\";\n\n/**\n * Custom Trigger that converts a single child element to the `render` prop\n * to avoid nested button issues with base-ui's Menu.Trigger.\n *\n * When an explicit `render` prop is provided, children are passed through\n * to the rendered element.\n */\nconst DropdownMenuTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ children, render, ...props }, ref) => {\n // If render prop is explicitly provided, use it and pass children through\n if (render) {\n return (\n <DropdownMenuPrimitive.Trigger ref={ref} {...props} render={render}>\n {children}\n </DropdownMenuPrimitive.Trigger>\n );\n }\n\n // Otherwise, auto-promote single child element to render prop\n const childElement = React.isValidElement(children) ? children : null;\n\n return (\n <DropdownMenuPrimitive.Trigger\n ref={ref}\n {...props}\n {...(childElement && {\n render: childElement as React.ReactElement<Record<string, unknown>>,\n })}\n >\n {childElement ? undefined : children}\n </DropdownMenuPrimitive.Trigger>\n );\n});\nDropdownMenuTrigger.displayName = \"DropdownMenuTrigger\";\n\n/**\n * DropdownMenu — accessible dropdown menu anchored to a trigger.\n *\n * Compound component: `DropdownMenu` (Root), `.Trigger`, `.Content`, `.Item`,\n * `.LinkItem`, `.CheckboxItem`, `.RadioGroup`, `.RadioItem`, `.RadioItemIndicator`,\n * `.Sub`, `.SubTrigger`, `.SubContent`, `.Label`, `.Separator`, `.Shortcut`, `.Group`.\n *\n * Built on `@base-ui/react/menu`.\n *\n * @example\n * ```tsx\n * <DropdownMenu>\n * <DropdownMenu.Trigger>\n * <Button>Actions</Button>\n * </DropdownMenu.Trigger>\n * <DropdownMenu.Content>\n * <DropdownMenu.Item>Edit</DropdownMenu.Item>\n * <DropdownMenu.Item icon={CopyIcon}>Duplicate</DropdownMenu.Item>\n * <DropdownMenu.LinkItem href=\"/settings\" icon={GearIcon}>Settings</DropdownMenu.LinkItem>\n * <DropdownMenu.Separator />\n * <DropdownMenu.Item variant=\"danger\">Delete</DropdownMenu.Item>\n * </DropdownMenu.Content>\n * </DropdownMenu>\n * ```\n *\n * @see https://base-ui.com/react/components/menu\n */\nexport const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {\n Trigger: DropdownMenuTrigger,\n Portal: DropdownMenuPrimitive.Portal,\n Sub: DropdownMenuPrimitive.SubmenuRoot,\n SubTrigger: DropdownMenuSubTrigger,\n SubContent: DropdownMenuContent,\n Content: DropdownMenuContent,\n Item: DropdownMenuItem,\n LinkItem: DropdownMenuLinkItem,\n CheckboxItem: DropdownMenuCheckboxItem,\n RadioGroup: DropdownMenuPrimitive.RadioGroup,\n RadioItem: DropdownMenuRadioItem,\n RadioItemIndicator: DropdownMenuRadioItemIndicator,\n Label: DropdownMenuLabel,\n Separator: DropdownMenuSeparator,\n Shortcut: DropdownMenuShortcut,\n Group: DropdownMenuPrimitive.Group,\n});\n"],"names":["KUMO_DROPDOWN_VARIANTS","KUMO_DROPDOWN_DEFAULT_VARIANTS","dropdownVariants","variant","cn","DropdownMenuSubTrigger","React","className","inset","children","IconComponent","props","ref","jsxs","DropdownMenuPrimitive.SubmenuTrigger","jsx","CaretRight","DropdownMenuContent","sideOffset","containerProp","contextContainer","usePortalContainer","DropdownMenuPrimitive.Portal","DropdownMenuPrimitive.Positioner","DropdownMenuPrimitive.Popup","renderIconNode","DropdownMenuItem","selected","render","href","LinkComponent","useLinkComponent","innerContent","Fragment","Check","linkContent","isExternal","styles","e","useRenderProp","DropdownMenuPrimitive.Item","DropdownMenuLinkItem","DropdownMenuPrimitive.LinkItem","DropdownMenuCheckboxItem","checked","DropdownMenuPrimitive.CheckboxItem","DropdownMenuPrimitive.CheckboxItemIndicator","CheckIcon","DropdownMenuLabel","DropdownMenuPrimitive.GroupLabel","DropdownMenuSeparator","DropdownMenuPrimitive.Separator","DropdownMenuShortcut","DropdownMenuRadioItem","DropdownMenuPrimitive.RadioItem","DropdownMenuRadioItemIndicator","DropdownMenuPrimitive.RadioItemIndicator","DropdownMenuTrigger","DropdownMenuPrimitive.Trigger","childElement","DropdownMenu","DropdownMenuPrimitive.Root","DropdownMenuPrimitive.SubmenuRoot","DropdownMenuPrimitive.RadioGroup","DropdownMenuPrimitive.Group"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"input-cw05pbqdburghkus.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small input for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small input for secondary fields\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default input size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large input for prominent fields\",\n },\n },\n variant: {\n default: {\n classes: \"focus:ring-kumo-hairline\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n dimensions: {\n xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n base: {\n height: 36,\n paddingX: 12,\n fontSize: 16,\n borderRadius: 8,\n width: 280,\n },\n lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n },\n baseTokens: {\n background: \"color-secondary\",\n text: \"text-color-surface\",\n placeholder: \"text-color-muted\",\n ring: \"color-border\",\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n error: { ring: \"color-error\" },\n disabled: { opacity: 0.5, text: \"text-color-muted\" },\n },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n /**\n * Input size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard input\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n parentFocusIndicator?: boolean;\n focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n parentFocusIndicator = false,\n focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n return cn(\n // Base styles\n \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-hairline\",\n // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n \"kumo-input-placeholder disabled:text-kumo-subtle\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.size[size].classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.variant[variant].classes,\n // Focus state handling\n parentFocusIndicator && \"focus-within:ring-kumo-hairline\",\n focusIndicator && \"focus:ring-kumo-hairline\",\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant: variantProp,\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Deprecation warning for variant=\"error\"\n if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n console.warn(\n '[Kumo Input]: variant=\"error\" is deprecated. ' +\n \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n \"Simply remove the variant prop and pass an error message instead.\",\n );\n }\n\n // Auto-apply error styling when error prop is truthy\n // Explicit variant prop takes precedence for backwards compatibility\n const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - aria-label: <Input aria-label='Email address' />\\n\" +\n \" - aria-labelledby for custom label association\",\n );\n }\n }\n\n const input = (\n <BaseInput\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n className,\n )}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n * label=\"Password\"\n * description=\"Must be at least 8 characters\"\n * error=\"Password is too short\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n BaseInputProps & {\n /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAASS;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMV,IAAUU,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAE,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDf,EAAM,cAAc;"}
|