@cloudflare/kumo 1.19.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +239 -0
- package/ai/component-registry.json +758 -118
- package/ai/component-registry.md +1151 -153
- 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/chunks/Legend-ibjxhfm9pn2vrb6f.js +430 -0
- package/dist/chunks/Legend-ibjxhfm9pn2vrb6f.js.map +1 -0
- package/dist/chunks/autocomplete-cs3fwy6lwzlyirpq.js +174 -0
- package/dist/chunks/autocomplete-cs3fwy6lwzlyirpq.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-eren6w2csum1xghg.js +210 -0
- package/dist/chunks/checkbox-eren6w2csum1xghg.js.map +1 -0
- package/dist/chunks/{clipboard-text-dxczqon3d27xp6f0.js → clipboard-text-f9q753udny1uyxr5.js} +45 -41
- package/dist/chunks/{clipboard-text-dxczqon3d27xp6f0.js.map → clipboard-text-f9q753udny1uyxr5.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-n9qht9h9ag6kh5sn.js} +86 -74
- package/dist/chunks/combobox-n9qht9h9ag6kh5sn.js.map +1 -0
- package/dist/chunks/{command-palette-maqtbmpfev9mysqd.js → command-palette-gk9m34ymp2b3hfc5.js} +126 -126
- package/dist/chunks/command-palette-gk9m34ymp2b3hfc5.js.map +1 -0
- package/dist/chunks/{date-range-picker-j318zxjyqz4o3dak.js → date-range-picker-c9wnx9tbwohai7jy.js} +26 -26
- package/dist/chunks/{date-range-picker-j318zxjyqz4o3dak.js.map → date-range-picker-c9wnx9tbwohai7jy.js.map} +1 -1
- package/dist/chunks/{dialog-e3m5bhs7fds26p9y.js → dialog-94v7wiz7j3in6528.js} +3 -3
- package/dist/chunks/{dialog-e3m5bhs7fds26p9y.js.map → dialog-94v7wiz7j3in6528.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-kpymw59thjf2ip8g.js} +9 -9
- package/dist/chunks/{empty-dr1eckm2z40euns6.js.map → empty-kpymw59thjf2ip8g.js.map} +1 -1
- package/dist/chunks/{field-bo5gmna16odrrb1q.js → field-lnj619xpe8zjd26r.js} +7 -7
- package/dist/chunks/{field-bo5gmna16odrrb1q.js.map → field-lnj619xpe8zjd26r.js.map} +1 -1
- package/dist/chunks/{input-area-jkkkjej6luumrqpa.js → input-area-h8xbqturegdfm1mi.js} +4 -4
- package/dist/chunks/{input-area-jkkkjej6luumrqpa.js.map → input-area-h8xbqturegdfm1mi.js.map} +1 -1
- package/dist/chunks/input-group-dh4pg8p20rh4mdi0.js +505 -0
- package/dist/chunks/input-group-dh4pg8p20rh4mdi0.js.map +1 -0
- package/dist/chunks/{input-cw05pbqdburghkus.js → input-lpa5fc75tgrraafv.js} +46 -46
- package/dist/chunks/input-lpa5fc75tgrraafv.js.map +1 -0
- package/dist/chunks/{label-cvyvbqmt4mt757ff.js → label-be8m7qzlakzig2sl.js} +3 -3
- package/dist/chunks/{label-cvyvbqmt4mt757ff.js.map → label-be8m7qzlakzig2sl.js.map} +1 -1
- package/dist/chunks/{layer-card-ljqth3yxgnk04v2o.js → layer-card-hvivdirwwnyq88wa.js} +5 -5
- package/dist/chunks/{layer-card-ljqth3yxgnk04v2o.js.map → layer-card-hvivdirwwnyq88wa.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-bqetlujwg8gm2u7m.js} +2 -2
- package/dist/chunks/{meter-duj3micor1lqj3y2.js.map → meter-bqetlujwg8gm2u7m.js.map} +1 -1
- package/dist/chunks/{pagination-olaypvwr8swsmn8m.js → pagination-ho8zesqfyp6ckmrl.js} +21 -21
- package/dist/chunks/pagination-ho8zesqfyp6ckmrl.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-kpfbib9l8xrrmzpz.js} +64 -62
- package/dist/chunks/select-kpfbib9l8xrrmzpz.js.map +1 -0
- package/dist/chunks/{sensitive-input-00fujb510rrn61v9.js → sensitive-input-i1upqytzaw2pus8v.js} +42 -42
- package/dist/chunks/sensitive-input-i1upqytzaw2pus8v.js.map +1 -0
- package/dist/chunks/{sidebar-ltbfius1eolkl8tb.js → sidebar-kh37grvfxto14ek6.js} +129 -126
- package/dist/chunks/sidebar-kh37grvfxto14ek6.js.map +1 -0
- package/dist/chunks/{surface-dfgurg5eu3et4vw1.js → surface-o63tktyrifcjejyb.js} +2 -2
- package/dist/chunks/{surface-dfgurg5eu3et4vw1.js.map → surface-o63tktyrifcjejyb.js.map} +1 -1
- package/dist/chunks/{switch-fbv3iawqo3o3jgap.js → switch-lclhiplr9zqf73tj.js} +86 -78
- package/dist/chunks/switch-lclhiplr9zqf73tj.js.map +1 -0
- package/dist/chunks/{table-olwwulga2l3hdwlx.js → table-fyy8gl875yyevqs3.js} +89 -71
- package/dist/chunks/table-fyy8gl875yyevqs3.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-jywwt8ebjqjkux75.js} +19 -19
- package/dist/chunks/{tabs-lohcglgppp6gj0hp.js.map → tabs-jywwt8ebjqjkux75.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-dg52x89yd231mxhe.js.map → toast-h573o0tc7tefivk2.js.map} +1 -1
- 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 +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/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 +148 -143
- 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 +10 -0
- 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/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 +1 -1
- 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 +7 -0
- 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 +55 -7
- package/scripts/component-registry/sub-components.ts +81 -50
- package/scripts/component-registry/types.ts +2 -0
- package/scripts/theme-generator/config.ts +10 -0
- 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/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
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as e, jsxs as x } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as p, createContext as B, useContext as F } from "react";
|
|
4
|
+
import { MinusIcon as C, CheckIcon as v } from "@phosphor-icons/react";
|
|
5
|
+
import { c as i } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
+
import { L as E } from "./label-be8m7qzlakzig2sl.js";
|
|
7
|
+
import { L as N, N as y, O as K, P as R, Q as w, C as _, U as G } from "./vendor-base-ui-ie71jahf0czyf58j.js";
|
|
8
|
+
const H = {
|
|
9
|
+
variant: {
|
|
10
|
+
default: {
|
|
11
|
+
classes: "[&:focus-within>span]:ring-kumo-focus [&: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
|
+
}, X = {
|
|
20
|
+
variant: "default"
|
|
21
|
+
}, L = B({
|
|
22
|
+
controlFirst: !0
|
|
23
|
+
}), j = p(
|
|
24
|
+
({
|
|
25
|
+
className: o,
|
|
26
|
+
checked: r,
|
|
27
|
+
indeterminate: n,
|
|
28
|
+
disabled: t,
|
|
29
|
+
variant: s = "default",
|
|
30
|
+
label: a,
|
|
31
|
+
labelTooltip: c,
|
|
32
|
+
controlFirst: l = !0,
|
|
33
|
+
onCheckedChange: u,
|
|
34
|
+
required: m,
|
|
35
|
+
name: d,
|
|
36
|
+
...h
|
|
37
|
+
}, f) => {
|
|
38
|
+
if (process.env.NODE_ENV !== "production") {
|
|
39
|
+
const b = !!a, k = !!h["aria-label"], O = !!h["aria-labelledby"];
|
|
40
|
+
!b && !k && !O && console.warn(
|
|
41
|
+
`[Kumo Checkbox]: Checkbox must have an accessible name. Provide either:
|
|
42
|
+
- label prop: <Checkbox label='Accept terms' />
|
|
43
|
+
- aria-label: <Checkbox aria-label='Select item' />
|
|
44
|
+
- aria-labelledby for custom label association
|
|
45
|
+
Note: When used inside Checkbox.Group, label is optional`
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
const g = /* @__PURE__ */ e(
|
|
49
|
+
N,
|
|
50
|
+
{
|
|
51
|
+
ref: f,
|
|
52
|
+
name: d,
|
|
53
|
+
checked: r,
|
|
54
|
+
indeterminate: n,
|
|
55
|
+
disabled: t,
|
|
56
|
+
onCheckedChange: u,
|
|
57
|
+
className: i(
|
|
58
|
+
"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2",
|
|
59
|
+
s === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
|
|
60
|
+
!t && "hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand",
|
|
61
|
+
"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast",
|
|
62
|
+
t && "cursor-not-allowed opacity-50",
|
|
63
|
+
o
|
|
64
|
+
),
|
|
65
|
+
...h,
|
|
66
|
+
children: /* @__PURE__ */ e(
|
|
67
|
+
y,
|
|
68
|
+
{
|
|
69
|
+
keepMounted: !0,
|
|
70
|
+
className: "flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible",
|
|
71
|
+
render: (b, k) => /* @__PURE__ */ e("span", { ...b, children: k.indeterminate ? /* @__PURE__ */ e(C, { weight: "bold", size: 12 }) : /* @__PURE__ */ e(v, { weight: "bold", size: 12 }) })
|
|
72
|
+
}
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
return a ? /* @__PURE__ */ e(K, { className: "inline-flex", children: /* @__PURE__ */ x(
|
|
77
|
+
R,
|
|
78
|
+
{
|
|
79
|
+
className: i(
|
|
80
|
+
"!m-0 !min-h-0 !text-base inline-flex items-center gap-2",
|
|
81
|
+
l ? "flex-row" : "flex-row-reverse justify-end",
|
|
82
|
+
t ? "cursor-not-allowed" : "cursor-pointer"
|
|
83
|
+
),
|
|
84
|
+
children: [
|
|
85
|
+
g,
|
|
86
|
+
/* @__PURE__ */ e(
|
|
87
|
+
E,
|
|
88
|
+
{
|
|
89
|
+
showOptional: m === !1,
|
|
90
|
+
tooltip: c,
|
|
91
|
+
asContent: !0,
|
|
92
|
+
children: a
|
|
93
|
+
}
|
|
94
|
+
)
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
) }) : g;
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
j.displayName = "Checkbox";
|
|
101
|
+
const A = p(
|
|
102
|
+
({
|
|
103
|
+
className: o,
|
|
104
|
+
checked: r,
|
|
105
|
+
indeterminate: n,
|
|
106
|
+
disabled: t,
|
|
107
|
+
variant: s = "default",
|
|
108
|
+
label: a,
|
|
109
|
+
value: c,
|
|
110
|
+
onCheckedChange: l,
|
|
111
|
+
name: u
|
|
112
|
+
}, m) => {
|
|
113
|
+
const { controlFirst: d } = F(L);
|
|
114
|
+
return /* @__PURE__ */ x(
|
|
115
|
+
"label",
|
|
116
|
+
{
|
|
117
|
+
className: i(
|
|
118
|
+
"m-0 relative inline-flex items-center gap-2",
|
|
119
|
+
// Control first (default): checkbox before label
|
|
120
|
+
// Label first: label before checkbox using flex-row-reverse
|
|
121
|
+
!d && "flex-row-reverse justify-end",
|
|
122
|
+
t ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
123
|
+
o
|
|
124
|
+
),
|
|
125
|
+
children: [
|
|
126
|
+
/* @__PURE__ */ e(
|
|
127
|
+
N,
|
|
128
|
+
{
|
|
129
|
+
ref: m,
|
|
130
|
+
value: c,
|
|
131
|
+
name: u,
|
|
132
|
+
checked: r,
|
|
133
|
+
indeterminate: n,
|
|
134
|
+
disabled: t,
|
|
135
|
+
onCheckedChange: l,
|
|
136
|
+
className: i(
|
|
137
|
+
"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",
|
|
138
|
+
s === "error" ? "ring-kumo-danger" : "ring-kumo-hairline",
|
|
139
|
+
!t && "group-hover:ring-kumo-hairline hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand",
|
|
140
|
+
"data-[checked]:bg-kumo-contrast data-[checked]:ring-kumo-contrast data-[indeterminate]:bg-kumo-contrast data-[indeterminate]:ring-kumo-contrast"
|
|
141
|
+
),
|
|
142
|
+
children: /* @__PURE__ */ e(
|
|
143
|
+
y,
|
|
144
|
+
{
|
|
145
|
+
keepMounted: !0,
|
|
146
|
+
className: "flex items-center justify-center text-kumo-inverse data-[unchecked]:invisible",
|
|
147
|
+
render: (h, f) => /* @__PURE__ */ e("span", { ...h, children: f.indeterminate ? /* @__PURE__ */ e(C, { weight: "bold", size: 12 }) : /* @__PURE__ */ e(v, { weight: "bold", size: 12 }) })
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
}
|
|
151
|
+
),
|
|
152
|
+
/* @__PURE__ */ e("span", { className: "text-base text-kumo-default", children: a })
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
A.displayName = "Checkbox.Item";
|
|
159
|
+
function I({ children: o, className: r }) {
|
|
160
|
+
return /* @__PURE__ */ e(
|
|
161
|
+
w,
|
|
162
|
+
{
|
|
163
|
+
className: i("text-base font-medium text-kumo-default", r),
|
|
164
|
+
children: o
|
|
165
|
+
}
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
I.displayName = "Checkbox.Legend";
|
|
169
|
+
function M({
|
|
170
|
+
legend: o,
|
|
171
|
+
children: r,
|
|
172
|
+
error: n,
|
|
173
|
+
description: t,
|
|
174
|
+
defaultValue: s,
|
|
175
|
+
value: a,
|
|
176
|
+
onValueChange: c,
|
|
177
|
+
allValues: l,
|
|
178
|
+
disabled: u,
|
|
179
|
+
controlFirst: m = !0,
|
|
180
|
+
className: d
|
|
181
|
+
}) {
|
|
182
|
+
return /* @__PURE__ */ e(L.Provider, { value: { controlFirst: m }, children: /* @__PURE__ */ e(
|
|
183
|
+
_,
|
|
184
|
+
{
|
|
185
|
+
defaultValue: s,
|
|
186
|
+
value: a,
|
|
187
|
+
onValueChange: c,
|
|
188
|
+
allValues: l,
|
|
189
|
+
disabled: u,
|
|
190
|
+
children: /* @__PURE__ */ x(G, { className: i("flex flex-col gap-4", d), children: [
|
|
191
|
+
o && /* @__PURE__ */ e(w, { className: "text-base font-medium text-kumo-default", children: o }),
|
|
192
|
+
/* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: r }),
|
|
193
|
+
n && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-danger", children: n }),
|
|
194
|
+
t && /* @__PURE__ */ e("p", { className: "text-sm text-kumo-subtle", children: t })
|
|
195
|
+
] })
|
|
196
|
+
}
|
|
197
|
+
) });
|
|
198
|
+
}
|
|
199
|
+
const z = Object.assign(j, {
|
|
200
|
+
Item: A,
|
|
201
|
+
Group: M,
|
|
202
|
+
Legend: I
|
|
203
|
+
});
|
|
204
|
+
z.displayName = "Checkbox";
|
|
205
|
+
export {
|
|
206
|
+
z as C,
|
|
207
|
+
H as K,
|
|
208
|
+
X as a
|
|
209
|
+
};
|
|
210
|
+
//# sourceMappingURL=checkbox-eren6w2csum1xghg.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox-eren6w2csum1xghg.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 { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\n\n/** Event details passed to onCheckedChange callback. Re-exported from Base UI. */\nexport type CheckboxChangeEventDetails = Parameters<\n NonNullable<BaseCheckbox.Root.Props[\"onCheckedChange\"]>\n>[1];\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-focus [&: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?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\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 */\n/**\n * Props for Checkbox.Legend — a composable sub-component for labeling a Checkbox.Group.\n *\n * Place as a direct child of `<Checkbox.Group>` to provide a styled, accessible legend.\n * Accepts `className` for full styling control (e.g. `className=\"sr-only\"` to visually hide).\n *\n * @example\n * ```tsx\n * <Checkbox.Group>\n * <Checkbox.Legend className=\"sr-only\">Preferences</Checkbox.Legend>\n * <Checkbox.Item label=\"Email\" value=\"email\" />\n * </Checkbox.Group>\n * ```\n */\nexport interface CheckboxLegendProps {\n /** Legend content */\n children: ReactNode;\n /** Additional CSS classes (e.g. \"sr-only\" to visually hide the legend) */\n className?: string;\n}\n\nexport interface CheckboxGroupProps {\n /**\n * Legend text for the group.\n * For more control over legend styling, omit this prop and use `<Checkbox.Legend>` as a child instead.\n */\n legend?: string;\n /** Child Checkbox.Item components (and optionally a Checkbox.Legend) */\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?: BaseCheckbox.Root.Props[\"onCheckedChange\"];\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 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 const checkboxControl = (\n <BaseCheckbox.Root\n ref={ref}\n name={name}\n checked={checked}\n indeterminate={indeterminate}\n disabled={disabled}\n onCheckedChange={onCheckedChange}\n className={cn(\n \"relative flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-kumo-base ring focus:outline-none after:absolute after:-inset-x-3 after:-inset-y-2\",\n variant === \"error\" ? \"ring-kumo-danger\" : \"ring-kumo-hairline\",\n !disabled &&\n \"hover:ring-kumo-hairline focus:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\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 name,\n },\n ref,\n ) => {\n const { controlFirst } = useContext(CheckboxGroupContext);\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={onCheckedChange}\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:ring-kumo-focus focus:ring-2 focus-visible:ring-2 focus-visible:ring-kumo-brand\",\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.Legend — composable legend sub-component for Checkbox.Group\nfunction CheckboxLegend({ children, className }: CheckboxLegendProps) {\n return (\n <Fieldset.Legend\n className={cn(\"text-base font-medium text-kumo-default\", className)}\n >\n {children}\n </Fieldset.Legend>\n );\n}\n\nCheckboxLegend.displayName = \"Checkbox.Legend\";\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 {legend && (\n <Fieldset.Legend className=\"text-base font-medium text-kumo-default\">\n {legend}\n </Fieldset.Legend>\n )}\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 Legend: CheckboxLegend,\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","required","name","props","ref","hasLabel","hasAriaLabel","hasAriaLabelledBy","checkboxControl","jsx","BaseCheckbox.Root","cn","BaseCheckbox.Indicator","renderProps","state","MinusIcon","CheckIcon","FieldBase.Root","jsxs","FieldBase.Label","Label","CheckboxItem","value","useContext","CheckboxLegend","children","Fieldset.Legend","CheckboxGroup","legend","error","description","defaultValue","onValueChange","allValues","BaseCheckboxGroup","Fieldset.Root","Checkbox"],"mappings":"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"}
|
package/dist/chunks/{clipboard-text-dxczqon3d27xp6f0.js → clipboard-text-f9q753udny1uyxr5.js}
RENAMED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
3
3
|
import { CheckIcon as R, CopyIcon as A } from "@phosphor-icons/react";
|
|
4
4
|
import { forwardRef as S, useState as P, useRef as _, useCallback as I } from "react";
|
|
5
|
-
import { B as O } from "./button-
|
|
6
|
-
import { i as M } from "./input-
|
|
5
|
+
import { B as O } from "./button-6by9ntsa3nj553mq.js";
|
|
6
|
+
import { i as M } from "./input-lpa5fc75tgrraafv.js";
|
|
7
7
|
import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
|
|
8
|
-
import {
|
|
8
|
+
import { V, W as j, X as B, Y as D, Z as E, _ as L, $ as U, a0 as X, a1 as K, a2 as W, a3 as F, a4 as Y, a5 as Z } from "./vendor-base-ui-ie71jahf0czyf58j.js";
|
|
9
9
|
const T = V(), y = {
|
|
10
10
|
size: {
|
|
11
11
|
sm: {
|
|
@@ -34,62 +34,62 @@ const T = V(), y = {
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
function $({
|
|
37
|
-
size:
|
|
37
|
+
size: o = v.size
|
|
38
38
|
} = {}) {
|
|
39
39
|
return s(
|
|
40
40
|
// Base styles
|
|
41
41
|
"flex items-center overflow-hidden bg-kumo-base px-0 font-mono",
|
|
42
42
|
// Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS
|
|
43
|
-
y.size[
|
|
43
|
+
y.size[o].classes
|
|
44
44
|
);
|
|
45
45
|
}
|
|
46
46
|
function q() {
|
|
47
|
-
const { toasts:
|
|
48
|
-
return /* @__PURE__ */ e(W, { className: "pointer-events-none fixed inset-0 isolate", children:
|
|
47
|
+
const { toasts: o } = K();
|
|
48
|
+
return /* @__PURE__ */ e(W, { className: "pointer-events-none fixed inset-0 isolate", children: o.map((a) => /* @__PURE__ */ e(F, { toast: a, className: "absolute", children: /* @__PURE__ */ e(
|
|
49
49
|
Y,
|
|
50
50
|
{
|
|
51
|
-
toast:
|
|
51
|
+
toast: a,
|
|
52
52
|
className: s(
|
|
53
53
|
"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans",
|
|
54
54
|
"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
|
|
55
55
|
),
|
|
56
56
|
children: /* @__PURE__ */ e(Z, {})
|
|
57
57
|
}
|
|
58
|
-
) },
|
|
58
|
+
) }, a.id)) });
|
|
59
59
|
}
|
|
60
|
-
function G({ children:
|
|
61
|
-
return /* @__PURE__ */ e(
|
|
60
|
+
function G({ children: o }) {
|
|
61
|
+
return /* @__PURE__ */ e(U, { children: /* @__PURE__ */ c(X, { toastManager: T, children: [
|
|
62
62
|
/* @__PURE__ */ e(q, {}),
|
|
63
|
-
|
|
63
|
+
o
|
|
64
64
|
] }) });
|
|
65
65
|
}
|
|
66
66
|
const H = S(
|
|
67
67
|
({
|
|
68
|
-
text:
|
|
69
|
-
textToCopy:
|
|
68
|
+
text: o,
|
|
69
|
+
textToCopy: a,
|
|
70
70
|
className: C,
|
|
71
71
|
size: m = v.size,
|
|
72
72
|
onCopy: f,
|
|
73
73
|
tooltip: n,
|
|
74
|
-
labels: { copyAction:
|
|
75
|
-
},
|
|
76
|
-
const [r, d] = P(!1), b = _(null),
|
|
77
|
-
text:
|
|
74
|
+
labels: { copyAction: k = "Copy to clipboard" } = {}
|
|
75
|
+
}, w) => {
|
|
76
|
+
const [r, d] = P(!1), b = _(null), g = y.size[m], {
|
|
77
|
+
text: z = "Copy",
|
|
78
78
|
copiedText: p = "Copied",
|
|
79
79
|
side: u = "top"
|
|
80
80
|
} = n ?? {}, N = I(async () => {
|
|
81
81
|
try {
|
|
82
82
|
if (typeof navigator < "u" && navigator.clipboard && typeof navigator.clipboard.writeText == "function")
|
|
83
|
-
await navigator.clipboard.writeText(
|
|
83
|
+
await navigator.clipboard.writeText(a ?? o);
|
|
84
84
|
else if (typeof document < "u") {
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
|
|
85
|
+
const t = document.createElement("textarea");
|
|
86
|
+
t.value = a ?? o, t.setAttribute("readonly", ""), t.style.position = "absolute", t.style.left = "-9999px", document.body.appendChild(t);
|
|
87
|
+
const i = document.getSelection(), h = i?.rangeCount ? i.getRangeAt(0) : null;
|
|
88
|
+
t.select();
|
|
89
89
|
try {
|
|
90
90
|
document.execCommand("copy");
|
|
91
91
|
} finally {
|
|
92
|
-
document.body.removeChild(
|
|
92
|
+
document.body.removeChild(t), h && (i?.removeAllRanges(), i?.addRange(h));
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
d(!0), n ? T.add({
|
|
@@ -104,18 +104,22 @@ const H = S(
|
|
|
104
104
|
d(!1);
|
|
105
105
|
}
|
|
106
106
|
}) : setTimeout(() => d(!1), 1500), f?.();
|
|
107
|
-
} catch (
|
|
108
|
-
console.warn("Clipboard copy failed",
|
|
107
|
+
} catch (t) {
|
|
108
|
+
console.warn("Clipboard copy failed", t);
|
|
109
109
|
}
|
|
110
|
-
}, [
|
|
110
|
+
}, [o, f, n, p, u]), x = /* @__PURE__ */ c(
|
|
111
111
|
O,
|
|
112
112
|
{
|
|
113
113
|
ref: b,
|
|
114
|
-
size:
|
|
114
|
+
size: g.buttonSize,
|
|
115
115
|
variant: "ghost",
|
|
116
|
-
className:
|
|
116
|
+
className: s(
|
|
117
|
+
"rounded-l-none rounded-r-[inherit] border-l! border-kumo-line! px-3 relative isolate overflow-hidden transition-all duration-200",
|
|
118
|
+
"focus:ring-inset focus:ring-kumo-focus/50",
|
|
119
|
+
"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand"
|
|
120
|
+
),
|
|
117
121
|
onClick: N,
|
|
118
|
-
"aria-label":
|
|
122
|
+
"aria-label": k,
|
|
119
123
|
children: [
|
|
120
124
|
/* @__PURE__ */ e(
|
|
121
125
|
"span",
|
|
@@ -143,36 +147,36 @@ const H = S(
|
|
|
143
147
|
return /* @__PURE__ */ c(
|
|
144
148
|
"div",
|
|
145
149
|
{
|
|
146
|
-
ref:
|
|
150
|
+
ref: w,
|
|
147
151
|
className: s(
|
|
148
|
-
M({ size:
|
|
152
|
+
M({ size: g.buttonSize }),
|
|
149
153
|
$({ size: m }),
|
|
150
154
|
C
|
|
151
155
|
),
|
|
152
156
|
children: [
|
|
153
|
-
/* @__PURE__ */ e("span", { className: "grow truncate ps-4 pe-2", children:
|
|
157
|
+
/* @__PURE__ */ e("span", { className: "grow truncate ps-4 pe-2", children: o }),
|
|
154
158
|
n ? /* @__PURE__ */ e(G, { children: /* @__PURE__ */ c(
|
|
155
159
|
j,
|
|
156
160
|
{
|
|
157
161
|
disabled: r,
|
|
158
|
-
onOpenChange: (
|
|
159
|
-
|
|
162
|
+
onOpenChange: (t, i) => {
|
|
163
|
+
i.reason === "trigger-press" && i.cancel();
|
|
160
164
|
},
|
|
161
165
|
children: [
|
|
162
|
-
/* @__PURE__ */ e(B, { render:
|
|
163
|
-
/* @__PURE__ */ e(
|
|
164
|
-
|
|
166
|
+
/* @__PURE__ */ e(B, { render: x }),
|
|
167
|
+
/* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(E, { side: u, sideOffset: 8, children: /* @__PURE__ */ e(
|
|
168
|
+
L,
|
|
165
169
|
{
|
|
166
170
|
className: s(
|
|
167
171
|
"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default",
|
|
168
172
|
"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill"
|
|
169
173
|
),
|
|
170
|
-
children:
|
|
174
|
+
children: z
|
|
171
175
|
}
|
|
172
176
|
) }) })
|
|
173
177
|
]
|
|
174
178
|
}
|
|
175
|
-
) }) :
|
|
179
|
+
) }) : x,
|
|
176
180
|
/* @__PURE__ */ e("span", { className: "sr-only", "aria-live": "polite", children: r ? p : "" })
|
|
177
181
|
]
|
|
178
182
|
}
|
|
@@ -183,4 +187,4 @@ H.displayName = "ClipboardText";
|
|
|
183
187
|
export {
|
|
184
188
|
H as C
|
|
185
189
|
};
|
|
186
|
-
//# sourceMappingURL=clipboard-text-
|
|
190
|
+
//# sourceMappingURL=clipboard-text-f9q753udny1uyxr5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clipboard-text-dxczqon3d27xp6f0.js","sources":["../../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n buttonSize: \"sm\" as const,\n description: \"Small clipboard text for compact UIs\",\n },\n base: {\n classes: \"text-sm\",\n buttonSize: \"base\" as const,\n description: \"Default clipboard text size\",\n },\n lg: {\n classes: \"text-sm\",\n buttonSize: \"lg\" as const,\n description: \"Large clipboard text for prominent display\",\n },\n },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n slide: {\n initial:\n \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n animate: \"translate-y-0 opacity-100\",\n end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n /**\n * Size of the clipboard text field.\n * - `\"sm\"` — Small clipboard text for compact UIs\n * - `\"base\"` — Default clipboard text size\n * - `\"lg\"` — Large clipboard text for prominent display\n * @default \"lg\"\n */\n size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n /** The text to display and copy to clipboard. */\n text: string;\n /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n textToCopy?: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Callback fired after text is copied to clipboard. */\n onCopy?: () => void;\n /**\n * Tooltip config. Shows tooltip on hover, anchored toast on click.\n * @example\n * ```tsx\n * <ClipboardText\n * text=\"abc123\"\n * tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n * />\n * ```\n */\n tooltip?: {\n /** Text shown in tooltip on hover. @default \"Copy\" */\n text?: string;\n /** Text shown in toast after copying. @default \"Copied\" */\n copiedText?: string;\n /** Tooltip/toast placement. @default \"top\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n };\n /** Accessible labels for i18n. */\n labels?: {\n /** @default \"Copy to clipboard\" */\n copyAction?: string;\n };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n const { toasts } = Toast.useToastManager();\n return (\n <Toast.Viewport className=\"pointer-events-none fixed inset-0 isolate\">\n {toasts.map((toast) => (\n <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n <Toast.Root\n toast={toast}\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n <Toast.Description />\n </Toast.Root>\n </Toast.Positioner>\n ))}\n </Toast.Viewport>\n );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n return (\n <Tooltip.Provider>\n <Toast.Provider toastManager={clipboardToastManager}>\n <AnchoredToasts />\n {children}\n </Toast.Provider>\n </Tooltip.Provider>\n );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n (\n {\n text,\n textToCopy,\n className,\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n onCopy,\n tooltip,\n labels: { copyAction = \"Copy to clipboard\" } = {},\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n // Destructure tooltip config with defaults\n const {\n text: tooltipText = \"Copy\",\n copiedText = \"Copied\",\n side: tooltipSide = \"top\",\n } = tooltip ?? {};\n\n const copyToClipboard = useCallback(async () => {\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(textToCopy ?? text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = textToCopy ?? text;\n textarea.setAttribute(\"readonly\", \"\");\n textarea.style.position = \"absolute\";\n textarea.style.left = \"-9999px\";\n document.body.appendChild(textarea);\n const selection = document.getSelection();\n const previousRange = selection?.rangeCount\n ? selection.getRangeAt(0)\n : null;\n textarea.select();\n try {\n document.execCommand(\"copy\");\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n\n setCopied(true);\n\n // Show anchored toast if tooltip mode is enabled\n if (tooltip) {\n clipboardToastManager.add({\n description: copiedText,\n positionerProps: {\n anchor: buttonRef.current,\n side: tooltipSide,\n sideOffset: 8,\n },\n timeout: 1500,\n onClose() {\n setCopied(false);\n },\n });\n } else {\n // Reset copied state after delay when no tooltip\n setTimeout(() => setCopied(false), 1500);\n }\n\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n }\n }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n const copyButton = (\n <Button\n ref={buttonRef}\n size={sizeConfig.buttonSize}\n variant=\"ghost\"\n className=\"rounded-none border-l! border-kumo-hairline! px-3 relative overflow-hidden transition-all duration-200\"\n onClick={copyToClipboard}\n aria-label={copyAction}\n >\n <span\n className={cn(\n \"flex items-center gap-1 transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.animate\n : clipboardTextAnimations.slide.initial,\n )}\n >\n <CheckIcon />\n </span>\n <span\n className={cn(\n \"flex items-center justify-center transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.end\n : clipboardTextAnimations.slide.animate,\n )}\n >\n <CopyIcon />\n </span>\n </Button>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n inputVariants({ size: sizeConfig.buttonSize }),\n clipboardTextVariants({ size }),\n className,\n )}\n >\n <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n {tooltip ? (\n <TooltipWrapper>\n <Tooltip.Root\n disabled={copied}\n onOpenChange={(open, eventDetails) => {\n // Prevent tooltip from closing when button is clicked\n if (eventDetails.reason === \"trigger-press\") {\n eventDetails.cancel();\n }\n }}\n >\n <Tooltip.Trigger render={copyButton} />\n <Tooltip.Portal>\n <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n <Tooltip.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n {tooltipText}\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </TooltipWrapper>\n ) : (\n copyButton\n )}\n <span className=\"sr-only\" aria-live=\"polite\">\n {copied ? copiedText : \"\"}\n </span>\n </div>\n );\n },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","textToCopy","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"clipboard-text-f9q753udny1uyxr5.js","sources":["../../src/components/clipboard-text/clipboard-text.tsx"],"sourcesContent":["import { CheckIcon, CopyIcon } from \"@phosphor-icons/react\";\nimport { forwardRef, useCallback, useRef, useState } from \"react\";\nimport { Toast } from \"@base-ui/react/toast\";\nimport { Tooltip } from \"@base-ui/react/tooltip\";\nimport { Button } from \"../button\";\nimport { inputVariants } from \"../input\";\nimport { cn } from \"../../utils/cn\";\n\n// Create a toast manager for anchored \"Copied\" toasts\nconst clipboardToastManager = Toast.createToastManager();\n\n/** ClipboardText size variant definitions mapping sizes to their Tailwind classes. */\nexport const KUMO_CLIPBOARD_TEXT_VARIANTS = {\n size: {\n sm: {\n classes: \"text-xs\",\n buttonSize: \"sm\" as const,\n description: \"Small clipboard text for compact UIs\",\n },\n base: {\n classes: \"text-sm\",\n buttonSize: \"base\" as const,\n description: \"Default clipboard text size\",\n },\n lg: {\n classes: \"text-sm\",\n buttonSize: \"lg\" as const,\n description: \"Large clipboard text for prominent display\",\n },\n },\n} as const;\n\nexport const KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS = {\n size: \"lg\",\n} as const;\n\nconst clipboardTextAnimations = {\n slide: {\n initial:\n \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 translate-y-full\",\n animate: \"translate-y-0 opacity-100\",\n end: \"pointer-events-none absolute inset-0 flex items-center justify-center opacity-0 -translate-y-full\",\n },\n} as const;\n\n// Derived types from KUMO_CLIPBOARD_TEXT_VARIANTS\nexport type KumoClipboardTextSize =\n keyof typeof KUMO_CLIPBOARD_TEXT_VARIANTS.size;\n\nexport interface KumoClipboardTextVariantsProps {\n /**\n * Size of the clipboard text field.\n * - `\"sm\"` — Small clipboard text for compact UIs\n * - `\"base\"` — Default clipboard text size\n * - `\"lg\"` — Large clipboard text for prominent display\n * @default \"lg\"\n */\n size?: KumoClipboardTextSize;\n}\n\nexport function clipboardTextVariants({\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n}: KumoClipboardTextVariantsProps = {}) {\n return cn(\n // Base styles\n \"flex items-center overflow-hidden bg-kumo-base px-0 font-mono\",\n // Apply size styles from KUMO_CLIPBOARD_TEXT_VARIANTS\n KUMO_CLIPBOARD_TEXT_VARIANTS.size[size].classes,\n );\n}\n\n// Legacy type alias for backwards compatibility\nexport type ClipboardTextSize = KumoClipboardTextSize;\n\n/**\n * ClipboardText component props.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"sk_live_abc123\" />\n * <ClipboardText text=\"npm install @cloudflare/kumo\" size=\"sm\" />\n * ```\n */\nexport interface ClipboardTextProps extends KumoClipboardTextVariantsProps {\n /** The text to display and copy to clipboard. */\n text: string;\n /** If provided, this text will be copied to clipboard instead of the `text` prop. */\n textToCopy?: string;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** Callback fired after text is copied to clipboard. */\n onCopy?: () => void;\n /**\n * Tooltip config. Shows tooltip on hover, anchored toast on click.\n * @example\n * ```tsx\n * <ClipboardText\n * text=\"abc123\"\n * tooltip={{ text: \"Copy\", copiedText: \"Copied!\", side: \"top\" }}\n * />\n * ```\n */\n tooltip?: {\n /** Text shown in tooltip on hover. @default \"Copy\" */\n text?: string;\n /** Text shown in toast after copying. @default \"Copied\" */\n copiedText?: string;\n /** Tooltip/toast placement. @default \"top\" */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n };\n /** Accessible labels for i18n. */\n labels?: {\n /** @default \"Copy to clipboard\" */\n copyAction?: string;\n };\n}\n\n/**\n * Anchored toasts viewport - renders \"Copied\" toasts anchored to buttons\n */\nfunction AnchoredToasts() {\n const { toasts } = Toast.useToastManager();\n return (\n <Toast.Viewport className=\"pointer-events-none fixed inset-0 isolate\">\n {toasts.map((toast) => (\n <Toast.Positioner key={toast.id} toast={toast} className=\"absolute\">\n <Toast.Root\n toast={toast}\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default font-sans\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n <Toast.Description />\n </Toast.Root>\n </Toast.Positioner>\n ))}\n </Toast.Viewport>\n );\n}\n\n/**\n * Internal wrapper that provides Toast context when tooltip is enabled.\n */\nfunction TooltipWrapper({ children }: { children: React.ReactNode }) {\n return (\n <Tooltip.Provider>\n <Toast.Provider toastManager={clipboardToastManager}>\n <AnchoredToasts />\n {children}\n </Toast.Provider>\n </Tooltip.Provider>\n );\n}\n\n/**\n * Read-only text field with a one-click copy-to-clipboard button.\n *\n * @example\n * ```tsx\n * <ClipboardText text=\"0c239dd2\" />\n * ```\n */\nexport const ClipboardText = forwardRef<HTMLDivElement, ClipboardTextProps>(\n (\n {\n text,\n textToCopy,\n className,\n size = KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size,\n onCopy,\n tooltip,\n labels: { copyAction = \"Copy to clipboard\" } = {},\n },\n ref,\n ) => {\n const [copied, setCopied] = useState(false);\n const buttonRef = useRef<HTMLButtonElement | null>(null);\n const sizeConfig = KUMO_CLIPBOARD_TEXT_VARIANTS.size[size];\n\n // Destructure tooltip config with defaults\n const {\n text: tooltipText = \"Copy\",\n copiedText = \"Copied\",\n side: tooltipSide = \"top\",\n } = tooltip ?? {};\n\n const copyToClipboard = useCallback(async () => {\n try {\n if (\n typeof navigator !== \"undefined\" &&\n navigator.clipboard &&\n typeof navigator.clipboard.writeText === \"function\"\n ) {\n await navigator.clipboard.writeText(textToCopy ?? text);\n } else if (typeof document !== \"undefined\") {\n // Fallback for older browsers\n const textarea = document.createElement(\"textarea\");\n textarea.value = textToCopy ?? text;\n textarea.setAttribute(\"readonly\", \"\");\n textarea.style.position = \"absolute\";\n textarea.style.left = \"-9999px\";\n document.body.appendChild(textarea);\n const selection = document.getSelection();\n const previousRange = selection?.rangeCount\n ? selection.getRangeAt(0)\n : null;\n textarea.select();\n try {\n document.execCommand(\"copy\");\n } finally {\n document.body.removeChild(textarea);\n if (previousRange) {\n selection?.removeAllRanges();\n selection?.addRange(previousRange);\n }\n }\n }\n\n setCopied(true);\n\n // Show anchored toast if tooltip mode is enabled\n if (tooltip) {\n clipboardToastManager.add({\n description: copiedText,\n positionerProps: {\n anchor: buttonRef.current,\n side: tooltipSide,\n sideOffset: 8,\n },\n timeout: 1500,\n onClose() {\n setCopied(false);\n },\n });\n } else {\n // Reset copied state after delay when no tooltip\n setTimeout(() => setCopied(false), 1500);\n }\n\n onCopy?.();\n } catch (error) {\n console.warn(\"Clipboard copy failed\", error);\n }\n }, [text, onCopy, tooltip, copiedText, tooltipSide]);\n\n const copyButton = (\n <Button\n ref={buttonRef}\n size={sizeConfig.buttonSize}\n variant=\"ghost\"\n className={cn(\n \"rounded-l-none rounded-r-[inherit] border-l! border-kumo-line! px-3 relative isolate overflow-hidden transition-all duration-200\",\n \"focus:ring-inset focus:ring-kumo-focus/50\",\n \"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-kumo-brand\",\n )}\n onClick={copyToClipboard}\n aria-label={copyAction}\n >\n <span\n className={cn(\n \"flex items-center gap-1 transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.animate\n : clipboardTextAnimations.slide.initial,\n )}\n >\n <CheckIcon />\n </span>\n <span\n className={cn(\n \"flex items-center justify-center transition-all duration-200\",\n copied\n ? clipboardTextAnimations.slide.end\n : clipboardTextAnimations.slide.animate,\n )}\n >\n <CopyIcon />\n </span>\n </Button>\n );\n\n return (\n <div\n ref={ref}\n className={cn(\n inputVariants({ size: sizeConfig.buttonSize }),\n clipboardTextVariants({ size }),\n className,\n )}\n >\n <span className=\"grow truncate ps-4 pe-2\">{text}</span>\n {tooltip ? (\n <TooltipWrapper>\n <Tooltip.Root\n disabled={copied}\n onOpenChange={(open, eventDetails) => {\n // Prevent tooltip from closing when button is clicked\n if (eventDetails.reason === \"trigger-press\") {\n eventDetails.cancel();\n }\n }}\n >\n <Tooltip.Trigger render={copyButton} />\n <Tooltip.Portal>\n <Tooltip.Positioner side={tooltipSide} sideOffset={8}>\n <Tooltip.Popup\n className={cn(\n \"flex origin-[var(--transform-origin)] flex-col rounded-md bg-kumo-base px-3 py-1.5 text-xs text-kumo-default\",\n \"shadow-lg shadow-kumo-tip-shadow outline outline-kumo-fill\",\n )}\n >\n {tooltipText}\n </Tooltip.Popup>\n </Tooltip.Positioner>\n </Tooltip.Portal>\n </Tooltip.Root>\n </TooltipWrapper>\n ) : (\n copyButton\n )}\n <span className=\"sr-only\" aria-live=\"polite\">\n {copied ? copiedText : \"\"}\n </span>\n </div>\n );\n },\n);\n\nClipboardText.displayName = \"ClipboardText\";\n"],"names":["clipboardToastManager","Toast.createToastManager","KUMO_CLIPBOARD_TEXT_VARIANTS","KUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS","clipboardTextAnimations","clipboardTextVariants","size","cn","AnchoredToasts","toasts","Toast.useToastManager","Toast.Viewport","toast","Toast.Positioner","jsx","Toast.Root","Toast.Description","TooltipWrapper","children","Tooltip.Provider","Toast.Provider","ClipboardText","forwardRef","text","textToCopy","className","onCopy","tooltip","copyAction","ref","copied","setCopied","useState","buttonRef","useRef","sizeConfig","tooltipText","copiedText","tooltipSide","copyToClipboard","useCallback","textarea","selection","previousRange","error","copyButton","jsxs","Button","CheckIcon","CopyIcon","inputVariants","Tooltip.Root","open","eventDetails","Tooltip.Trigger","Tooltip.Portal","Tooltip.Positioner","Tooltip.Popup"],"mappings":"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"}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as o, jsxs as f } from "react/jsx-runtime";
|
|
3
|
+
import { CaretDownIcon as g } from "@phosphor-icons/react";
|
|
4
|
+
import { forwardRef as r } from "react";
|
|
5
|
+
import { c as t } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
+
import { aO as u, aP as i, aQ as n } from "./vendor-base-ui-ie71jahf0czyf58j.js";
|
|
7
|
+
function s({ className: e, ...l }) {
|
|
8
|
+
return /* @__PURE__ */ o(u, { className: e, ...l });
|
|
9
|
+
}
|
|
10
|
+
s.displayName = "Collapsible.Root";
|
|
11
|
+
const p = r(
|
|
12
|
+
({ className: e, ...l }, a) => /* @__PURE__ */ o(
|
|
13
|
+
n,
|
|
14
|
+
{
|
|
15
|
+
ref: a,
|
|
16
|
+
className: t("cursor-pointer", e),
|
|
17
|
+
...l
|
|
18
|
+
}
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
p.displayName = "Collapsible.Trigger";
|
|
22
|
+
const m = r(
|
|
23
|
+
({ className: e, ...l }, a) => /* @__PURE__ */ o(
|
|
24
|
+
i,
|
|
25
|
+
{
|
|
26
|
+
ref: a,
|
|
27
|
+
className: e,
|
|
28
|
+
...l
|
|
29
|
+
}
|
|
30
|
+
)
|
|
31
|
+
);
|
|
32
|
+
m.displayName = "Collapsible.Panel";
|
|
33
|
+
const c = r(({ children: e, className: l }, a) => /* @__PURE__ */ f(
|
|
34
|
+
n,
|
|
35
|
+
{
|
|
36
|
+
ref: a,
|
|
37
|
+
className: t(
|
|
38
|
+
// Defensive resets to prevent global button styles from polluting the trigger
|
|
39
|
+
"bg-transparent border-none shadow-none p-0 m-0",
|
|
40
|
+
// Base styles for the trigger
|
|
41
|
+
"flex cursor-pointer items-center gap-1 text-sm text-kumo-link select-none",
|
|
42
|
+
l
|
|
43
|
+
),
|
|
44
|
+
children: [
|
|
45
|
+
e,
|
|
46
|
+
" ",
|
|
47
|
+
/* @__PURE__ */ o(g, { className: "h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180" })
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
));
|
|
51
|
+
c.displayName = "Collapsible.DefaultTrigger";
|
|
52
|
+
const b = r(({ children: e, className: l }, a) => /* @__PURE__ */ o(
|
|
53
|
+
i,
|
|
54
|
+
{
|
|
55
|
+
ref: a,
|
|
56
|
+
className: t("my-2 space-y-4 border-l-2 border-kumo-fill pl-4", l),
|
|
57
|
+
children: e
|
|
58
|
+
}
|
|
59
|
+
));
|
|
60
|
+
b.displayName = "Collapsible.DefaultPanel";
|
|
61
|
+
const D = Object.assign(s, {
|
|
62
|
+
Root: s,
|
|
63
|
+
Trigger: p,
|
|
64
|
+
Panel: m,
|
|
65
|
+
DefaultTrigger: c,
|
|
66
|
+
DefaultPanel: b
|
|
67
|
+
});
|
|
68
|
+
export {
|
|
69
|
+
D as C
|
|
70
|
+
};
|
|
71
|
+
//# sourceMappingURL=collapsible-k8urhi16pg90jvxa.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsible-k8urhi16pg90jvxa.js","sources":["../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["import { Collapsible as CollapsibleBase } from \"@base-ui/react/collapsible\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\n\n// =============================================================================\n// Variants\n// =============================================================================\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}\n\n// =============================================================================\n// Collapsible Root\n// =============================================================================\n\ntype BaseRootProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Root>;\n\nexport interface CollapsibleRootProps extends BaseRootProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Root component that manages collapsible state.\n *\n * @example\n * ```tsx\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n * <Collapsible.Trigger>Toggle</Collapsible.Trigger>\n * <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nfunction CollapsibleRoot({ className, ...props }: CollapsibleRootProps) {\n return <CollapsibleBase.Root className={className} {...props} />;\n}\n\nCollapsibleRoot.displayName = \"Collapsible.Root\";\n\n// =============================================================================\n// Collapsible Trigger\n// =============================================================================\n\ntype BaseTriggerProps = ComponentPropsWithoutRef<\n typeof CollapsibleBase.Trigger\n>;\n\nexport interface CollapsibleTriggerProps extends BaseTriggerProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Button that toggles the collapsible panel visibility.\n * Use the `render` prop to customize the trigger element.\n *\n * @example\n * ```tsx\n * // Default button\n * <Collapsible.Trigger>Show more</Collapsible.Trigger>\n *\n * // Custom trigger element\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n * Toggle details\n * </Collapsible.Trigger>\n * ```\n */\nconst CollapsibleTrigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(\n ({ className, ...props }, ref) => {\n return (\n <CollapsibleBase.Trigger\n ref={ref}\n className={cn(\"cursor-pointer\", className)}\n {...props}\n />\n );\n },\n);\n\nCollapsibleTrigger.displayName = \"Collapsible.Trigger\";\n\n// =============================================================================\n// Collapsible Panel\n// =============================================================================\n\ntype BasePanelProps = ComponentPropsWithoutRef<typeof CollapsibleBase.Panel>;\n\nexport interface CollapsiblePanelProps extends BasePanelProps {\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Container for collapsible content. Renders when the collapsible is open.\n *\n * @example\n * ```tsx\n * <Collapsible.Panel className=\"mt-2 space-y-4\">\n * <Text>Revealed content here</Text>\n * </Collapsible.Panel>\n * ```\n */\nconst CollapsiblePanel = forwardRef<HTMLDivElement, CollapsiblePanelProps>(\n ({ className, ...props }, ref) => {\n return (\n <CollapsibleBase.Panel\n ref={ref}\n className={className}\n {...props}\n />\n );\n },\n);\n\nCollapsiblePanel.displayName = \"Collapsible.Panel\";\n\n// =============================================================================\n// Default Trigger (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultTriggerProps {\n /** Label text displayed in the trigger */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Pre-styled trigger with text label and animated caret icon.\n * Provides the same visual style as the previous Collapsible API.\n *\n * Use this for quick migration or when you want the default Kumo style.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.Panel>Content</Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultTrigger = forwardRef<\n HTMLButtonElement,\n CollapsibleDefaultTriggerProps\n>(({ children, className }, ref) => {\n return (\n <CollapsibleBase.Trigger\n ref={ref}\n className={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 className,\n )}\n >\n {children}{\" \"}\n <CaretDownIcon className=\"h-4 w-4 transition-transform [[data-panel-open]_&]:rotate-180\" />\n </CollapsibleBase.Trigger>\n );\n});\n\nCollapsibleDefaultTrigger.displayName = \"Collapsible.DefaultTrigger\";\n\n// =============================================================================\n// Default Panel (Migration Affordance)\n// =============================================================================\n\nexport interface CollapsibleDefaultPanelProps {\n /** Panel content */\n children: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\n/**\n * Pre-styled panel with left border accent and standard spacing.\n * Provides the same visual style as the previous Collapsible API.\n *\n * @example\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>\n * <Text>Content with default styling</Text>\n * </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n */\nconst CollapsibleDefaultPanel = forwardRef<\n HTMLDivElement,\n CollapsibleDefaultPanelProps\n>(({ children, className }, ref) => {\n return (\n <CollapsibleBase.Panel\n ref={ref}\n className={cn(\"my-2 space-y-4 border-l-2 border-kumo-fill pl-4\", className)}\n >\n {children}\n </CollapsibleBase.Panel>\n );\n});\n\nCollapsibleDefaultPanel.displayName = \"Collapsible.DefaultPanel\";\n\n// =============================================================================\n// Compound Component Export\n// =============================================================================\n\n/**\n * Collapsible — a composable disclosure component for showing/hiding content.\n *\n * Built on Base UI's Collapsible with full composition support.\n *\n * ## Basic Usage\n *\n * ```tsx\n * const [open, setOpen] = useState(false);\n *\n * <Collapsible.Root open={open} onOpenChange={setOpen}>\n * <Collapsible.Trigger render={<Button variant=\"ghost\" />}>\n * Show details\n * </Collapsible.Trigger>\n * <Collapsible.Panel className=\"mt-2\">\n * <Text>Hidden content revealed when expanded.</Text>\n * </Collapsible.Panel>\n * </Collapsible.Root>\n * ```\n *\n * ## With Default Styling\n *\n * Use `DefaultTrigger` and `DefaultPanel` for the classic Kumo style:\n *\n * ```tsx\n * <Collapsible.Root>\n * <Collapsible.DefaultTrigger>Show details</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>\n * <Text>Content with border-left accent</Text>\n * </Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ```\n *\n * ## Controlled Accordion Pattern\n *\n * ```tsx\n * const [activeIndex, setActiveIndex] = useState<number | null>(null);\n *\n * {items.map((item, i) => (\n * <Collapsible.Root\n * key={i}\n * open={activeIndex === i}\n * onOpenChange={(open) => setActiveIndex(open ? i : null)}\n * >\n * <Collapsible.DefaultTrigger>{item.title}</Collapsible.DefaultTrigger>\n * <Collapsible.DefaultPanel>{item.content}</Collapsible.DefaultPanel>\n * </Collapsible.Root>\n * ))}\n * ```\n */\nexport const Collapsible = Object.assign(CollapsibleRoot, {\n Root: CollapsibleRoot,\n Trigger: CollapsibleTrigger,\n Panel: CollapsiblePanel,\n DefaultTrigger: CollapsibleDefaultTrigger,\n DefaultPanel: CollapsibleDefaultPanel,\n});\n\n// =============================================================================\n// Type Exports\n// =============================================================================\n\nexport type CollapsibleProps = CollapsibleRootProps;\n"],"names":["CollapsibleRoot","className","props","CollapsibleBase.Root","CollapsibleTrigger","forwardRef","ref","jsx","CollapsibleBase.Trigger","cn","CollapsiblePanel","CollapsibleBase.Panel","CollapsibleDefaultTrigger","children","jsxs","CaretDownIcon","CollapsibleDefaultPanel","Collapsible"],"mappings":";;;;;;AA6CA,SAASA,EAAgB,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACtE,2BAAQC,GAAA,EAAqB,WAAAF,GAAuB,GAAGC,EAAA,CAAO;AAChE;AAEAF,EAAgB,cAAc;AA8B9B,MAAMI,IAAqBC;AAAA,EACzB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,WAAWG,EAAG,kBAAkBR,CAAS;AAAA,MACxC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAE,EAAmB,cAAc;AAuBjC,MAAMM,IAAmBL;AAAA,EACvB,CAAC,EAAE,WAAAJ,GAAW,GAAGC,EAAA,GAASI,MAEtB,gBAAAC;AAAA,IAACI;AAAAA,IAAA;AAAA,MACC,KAAAL;AAAA,MACA,WAAAL;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAQ,EAAiB,cAAc;AA2B/B,MAAME,IAA4BP,EAGhC,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAQ;AAAA,EAACN;AAAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA;AAAA,MAET;AAAA;AAAA,MAEA;AAAA,MACAR;AAAA,IAAA;AAAA,IAGD,UAAA;AAAA,MAAAY;AAAA,MAAU;AAAA,MACX,gBAAAN,EAACQ,GAAA,EAAc,WAAU,gEAAA,CAAgE;AAAA,IAAA;AAAA,EAAA;AAAA,CAG9F;AAEDH,EAA0B,cAAc;AA2BxC,MAAMI,IAA0BX,EAG9B,CAAC,EAAE,UAAAQ,GAAU,WAAAZ,EAAA,GAAaK,MAExB,gBAAAC;AAAA,EAACI;AAAAA,EAAA;AAAA,IACC,KAAAL;AAAA,IACA,WAAWG,EAAG,mDAAmDR,CAAS;AAAA,IAEzE,UAAAY;AAAA,EAAA;AAAA,CAGN;AAEDG,EAAwB,cAAc;AAwD/B,MAAMC,IAAc,OAAO,OAAOjB,GAAiB;AAAA,EACxD,MAAMA;AAAA,EACN,SAASI;AAAA,EACT,OAAOM;AAAA,EACP,gBAAgBE;AAAA,EAChB,cAAcI;AAChB,CAAC;"}
|