@accelint/design-system 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-4CPMP3H7.js +418 -0
- package/dist/chunk-4CPMP3H7.js.map +1 -0
- package/dist/{styles.css → index.css} +885 -779
- package/dist/index.css.map +1 -0
- package/dist/index.d.ts +871 -8
- package/dist/index.js +5278 -66
- package/dist/index.js.map +1 -1
- package/dist/vanilla-DUNpoS8t.d.ts +2514 -0
- package/dist/vanilla.d.ts +9 -30
- package/dist/vanilla.js +3 -27
- package/dist/vanilla.js.map +1 -0
- package/package.json +13 -19
- package/dist/assets/components/button/button.css +0 -55
- package/dist/assets/components/checkbox/checkbox.css +0 -73
- package/dist/assets/components/chip/chip.css +0 -62
- package/dist/assets/components/combo-box/combo-box.css +0 -66
- package/dist/assets/components/dialog/dialog.css +0 -51
- package/dist/assets/components/drawer/drawer.css +0 -135
- package/dist/assets/components/group/group.css +0 -33
- package/dist/assets/components/icon/icon.css +0 -19
- package/dist/assets/components/input/input.css +0 -29
- package/dist/assets/components/menu/menu.css +0 -85
- package/dist/assets/components/options/options.css +0 -82
- package/dist/assets/components/picker/picker.css +0 -47
- package/dist/assets/components/popover/popover.css +0 -26
- package/dist/assets/components/query-builder/query-builder.css +0 -129
- package/dist/assets/components/radio/radio.css +0 -67
- package/dist/assets/components/search-field/search-field.css +0 -62
- package/dist/assets/components/select/select.css +0 -33
- package/dist/assets/components/switch/switch.css +0 -62
- package/dist/assets/components/tabs/tabs.css +0 -144
- package/dist/assets/components/textarea/textarea.css +0 -32
- package/dist/assets/components/tooltip/tooltip.css +0 -54
- package/dist/assets/components/tree/tree.css +0 -157
- package/dist/assets/hooks/use-theme/use-theme.css +0 -6
- package/dist/assets/src/components/button/button.css.ts.vanilla-9uttMYGm.css +0 -55
- package/dist/assets/src/components/checkbox/checkbox.css.ts.vanilla-Bewmypyn.css +0 -73
- package/dist/assets/src/components/chip/chip.css.ts.vanilla-CsGhxrlu.css +0 -62
- package/dist/assets/src/components/combo-box/combo-box.css.ts.vanilla-BNEPKjPm.css +0 -66
- package/dist/assets/src/components/dialog/dialog.css.ts.vanilla-CG0m-NJD.css +0 -51
- package/dist/assets/src/components/drawer/drawer.css.ts.vanilla-DEfHnoNS.css +0 -135
- package/dist/assets/src/components/group/group.css.ts.vanilla-DR69xgQy.css +0 -33
- package/dist/assets/src/components/icon/icon.css.ts.vanilla-CoUAfp2F.css +0 -19
- package/dist/assets/src/components/input/input.css.ts.vanilla-DoK5h9SX.css +0 -29
- package/dist/assets/src/components/menu/menu.css.ts.vanilla-LoWLg-jE.css +0 -85
- package/dist/assets/src/components/options/options.css.ts.vanilla-CWWFBTou.css +0 -82
- package/dist/assets/src/components/picker/picker.css.ts.vanilla-Fe0YXv-c.css +0 -47
- package/dist/assets/src/components/popover/popover.css.ts.vanilla-C5YGwwVD.css +0 -26
- package/dist/assets/src/components/query-builder/query-builder.css.ts.vanilla-B3P9cbCv.css +0 -129
- package/dist/assets/src/components/radio/radio.css.ts.vanilla-gi-KedQc.css +0 -67
- package/dist/assets/src/components/search-field/search-field.css.ts.vanilla-B_JL53f8.css +0 -62
- package/dist/assets/src/components/select/select.css.ts.vanilla-C94A60jf.css +0 -33
- package/dist/assets/src/components/switch/switch.css.ts.vanilla-DkQwtRa6.css +0 -62
- package/dist/assets/src/components/tabs/tabs.css.ts.vanilla-BygIflpl.css +0 -144
- package/dist/assets/src/components/textarea/textarea.css.ts.vanilla-Ba6E5HFc.css +0 -32
- package/dist/assets/src/components/tooltip/tooltip.css.ts.vanilla-BntxAlwN.css +0 -54
- package/dist/assets/src/components/tree/tree.css.ts.vanilla-SLmhk0zZ.css +0 -157
- package/dist/assets/src/hooks/use-theme/use-theme.css.ts.vanilla-zkVHnGkP.css +0 -6
- package/dist/assets/src/styles/layers.css.ts.vanilla-B2GUgnOF.css +0 -21
- package/dist/assets/src/styles/reset.css.ts.vanilla-C8PShXm0.css +0 -31
- package/dist/assets/src/styles/space.css.ts.vanilla-Md6Whc4G.css +0 -18
- package/dist/assets/src/styles/surfaces.css.ts.vanilla-Ckztx7VT.css +0 -24
- package/dist/assets/src/styles/theme.css.ts.vanilla-aDPSIzBK.css +0 -208
- package/dist/assets/src/styles/typography.css.ts.vanilla-DRT9H7rd.css +0 -150
- package/dist/assets/styles/layers.css +0 -21
- package/dist/assets/styles/reset.css +0 -31
- package/dist/assets/styles/space.css +0 -18
- package/dist/assets/styles/surfaces.css +0 -24
- package/dist/assets/styles/theme.css +0 -208
- package/dist/assets/styles/typography.css +0 -150
- package/dist/components/aria/aria.d.ts +0 -19
- package/dist/components/aria/aria.js +0 -36
- package/dist/components/aria/aria.js.map +0 -1
- package/dist/components/aria/index.d.ts +0 -1
- package/dist/components/button/button.css.d.ts +0 -33
- package/dist/components/button/button.d.ts +0 -39
- package/dist/components/button/button.js +0 -71
- package/dist/components/button/button.js.map +0 -1
- package/dist/components/button/button.vanilla.js +0 -8
- package/dist/components/button/button.vanilla.js.map +0 -1
- package/dist/components/button/index.d.ts +0 -3
- package/dist/components/button/types.d.ts +0 -28
- package/dist/components/checkbox/checkbox.css.d.ts +0 -35
- package/dist/components/checkbox/checkbox.d.ts +0 -21
- package/dist/components/checkbox/checkbox.js +0 -68
- package/dist/components/checkbox/checkbox.js.map +0 -1
- package/dist/components/checkbox/checkbox.vanilla.js +0 -9
- package/dist/components/checkbox/checkbox.vanilla.js.map +0 -1
- package/dist/components/checkbox/index.d.ts +0 -3
- package/dist/components/checkbox/types.d.ts +0 -38
- package/dist/components/chip/chip.css.d.ts +0 -31
- package/dist/components/chip/chip.d.ts +0 -30
- package/dist/components/chip/chip.js +0 -106
- package/dist/components/chip/chip.js.map +0 -1
- package/dist/components/chip/chip.vanilla.js +0 -8
- package/dist/components/chip/chip.vanilla.js.map +0 -1
- package/dist/components/chip/index.d.ts +0 -3
- package/dist/components/chip/types.d.ts +0 -31
- package/dist/components/collection/collection.d.ts +0 -13
- package/dist/components/collection/collection.js +0 -15
- package/dist/components/collection/collection.js.map +0 -1
- package/dist/components/collection/index.d.ts +0 -1
- package/dist/components/combo-box/combo-box.css.d.ts +0 -22
- package/dist/components/combo-box/combo-box.d.ts +0 -8
- package/dist/components/combo-box/combo-box.js +0 -87
- package/dist/components/combo-box/combo-box.js.map +0 -1
- package/dist/components/combo-box/combo-box.vanilla.js +0 -8
- package/dist/components/combo-box/combo-box.vanilla.js.map +0 -1
- package/dist/components/combo-box/index.d.ts +0 -3
- package/dist/components/combo-box/types.d.ts +0 -32
- package/dist/components/dialog/dialog.css.d.ts +0 -34
- package/dist/components/dialog/dialog.d.ts +0 -18
- package/dist/components/dialog/dialog.js +0 -146
- package/dist/components/dialog/dialog.js.map +0 -1
- package/dist/components/dialog/dialog.vanilla.js +0 -8
- package/dist/components/dialog/dialog.vanilla.js.map +0 -1
- package/dist/components/dialog/index.d.ts +0 -3
- package/dist/components/dialog/types.d.ts +0 -48
- package/dist/components/drawer/drawer.css.d.ts +0 -33
- package/dist/components/drawer/drawer.d.ts +0 -13
- package/dist/components/drawer/drawer.js +0 -199
- package/dist/components/drawer/drawer.js.map +0 -1
- package/dist/components/drawer/drawer.vanilla.js +0 -10
- package/dist/components/drawer/drawer.vanilla.js.map +0 -1
- package/dist/components/drawer/index.d.ts +0 -3
- package/dist/components/drawer/types.d.ts +0 -71
- package/dist/components/element/element.d.ts +0 -11
- package/dist/components/element/element.js +0 -21
- package/dist/components/element/element.js.map +0 -1
- package/dist/components/element/index.d.ts +0 -2
- package/dist/components/element/types.d.ts +0 -21
- package/dist/components/group/group.css.d.ts +0 -14
- package/dist/components/group/group.d.ts +0 -10
- package/dist/components/group/group.js +0 -44
- package/dist/components/group/group.js.map +0 -1
- package/dist/components/group/group.vanilla.js +0 -7
- package/dist/components/group/group.vanilla.js.map +0 -1
- package/dist/components/group/index.d.ts +0 -3
- package/dist/components/group/types.d.ts +0 -35
- package/dist/components/icon/icon.css.d.ts +0 -18
- package/dist/components/icon/icon.d.ts +0 -12
- package/dist/components/icon/icon.js +0 -26
- package/dist/components/icon/icon.js.map +0 -1
- package/dist/components/icon/icon.vanilla.js +0 -8
- package/dist/components/icon/icon.vanilla.js.map +0 -1
- package/dist/components/icon/index.d.ts +0 -3
- package/dist/components/icon/types.d.ts +0 -13
- package/dist/components/index.d.ts +0 -26
- package/dist/components/input/index.d.ts +0 -3
- package/dist/components/input/input.css.d.ts +0 -29
- package/dist/components/input/input.d.ts +0 -8
- package/dist/components/input/input.js +0 -93
- package/dist/components/input/input.js.map +0 -1
- package/dist/components/input/input.vanilla.js +0 -8
- package/dist/components/input/input.vanilla.js.map +0 -1
- package/dist/components/input/types.d.ts +0 -44
- package/dist/components/menu/index.d.ts +0 -3
- package/dist/components/menu/menu.css.d.ts +0 -75
- package/dist/components/menu/menu.d.ts +0 -24
- package/dist/components/menu/menu.js +0 -155
- package/dist/components/menu/menu.js.map +0 -1
- package/dist/components/menu/menu.vanilla.js +0 -8
- package/dist/components/menu/menu.vanilla.js.map +0 -1
- package/dist/components/menu/types.d.ts +0 -48
- package/dist/components/merge-provider/index.d.ts +0 -2
- package/dist/components/merge-provider/merge-provider.d.ts +0 -14
- package/dist/components/merge-provider/merge-provider.js +0 -40
- package/dist/components/merge-provider/merge-provider.js.map +0 -1
- package/dist/components/merge-provider/types.d.ts +0 -5
- package/dist/components/options/index.d.ts +0 -3
- package/dist/components/options/options.css.d.ts +0 -79
- package/dist/components/options/options.d.ts +0 -20
- package/dist/components/options/options.js +0 -152
- package/dist/components/options/options.js.map +0 -1
- package/dist/components/options/options.vanilla.js +0 -10
- package/dist/components/options/options.vanilla.js.map +0 -1
- package/dist/components/options/types.d.ts +0 -49
- package/dist/components/picker/index.d.ts +0 -3
- package/dist/components/picker/picker.css.d.ts +0 -32
- package/dist/components/picker/picker.d.ts +0 -18
- package/dist/components/picker/picker.js +0 -46
- package/dist/components/picker/picker.js.map +0 -1
- package/dist/components/picker/picker.stories.css.d.ts +0 -3
- package/dist/components/picker/picker.vanilla.js +0 -9
- package/dist/components/picker/picker.vanilla.js.map +0 -1
- package/dist/components/picker/types.d.ts +0 -28
- package/dist/components/popover/index.d.ts +0 -3
- package/dist/components/popover/popover.css.d.ts +0 -31
- package/dist/components/popover/popover.d.ts +0 -8
- package/dist/components/popover/popover.js +0 -110
- package/dist/components/popover/popover.js.map +0 -1
- package/dist/components/popover/popover.vanilla.js +0 -7
- package/dist/components/popover/popover.vanilla.js.map +0 -1
- package/dist/components/popover/types.d.ts +0 -32
- package/dist/components/query-builder/action-element.d.ts +0 -2
- package/dist/components/query-builder/action-element.js +0 -12
- package/dist/components/query-builder/action-element.js.map +0 -1
- package/dist/components/query-builder/constants.d.ts +0 -4
- package/dist/components/query-builder/constants.js +0 -20
- package/dist/components/query-builder/constants.js.map +0 -1
- package/dist/components/query-builder/dataset-sample.d.ts +0 -91
- package/dist/components/query-builder/group.d.ts +0 -5
- package/dist/components/query-builder/group.js +0 -87
- package/dist/components/query-builder/group.js.map +0 -1
- package/dist/components/query-builder/index.d.ts +0 -5
- package/dist/components/query-builder/query-builder.css.d.ts +0 -91
- package/dist/components/query-builder/query-builder.d.ts +0 -2
- package/dist/components/query-builder/query-builder.js +0 -129
- package/dist/components/query-builder/query-builder.js.map +0 -1
- package/dist/components/query-builder/query-builder.vanilla.js +0 -10
- package/dist/components/query-builder/query-builder.vanilla.js.map +0 -1
- package/dist/components/query-builder/rule.d.ts +0 -3
- package/dist/components/query-builder/rule.js +0 -112
- package/dist/components/query-builder/rule.js.map +0 -1
- package/dist/components/query-builder/types.d.ts +0 -128
- package/dist/components/query-builder/utils.d.ts +0 -29
- package/dist/components/query-builder/utils.js +0 -22
- package/dist/components/query-builder/utils.js.map +0 -1
- package/dist/components/query-builder/value-editor.d.ts +0 -4
- package/dist/components/query-builder/value-editor.js +0 -74
- package/dist/components/query-builder/value-editor.js.map +0 -1
- package/dist/components/query-builder/value-selector.d.ts +0 -2
- package/dist/components/query-builder/value-selector.js +0 -28
- package/dist/components/query-builder/value-selector.js.map +0 -1
- package/dist/components/radio/index.d.ts +0 -3
- package/dist/components/radio/radio.css.d.ts +0 -34
- package/dist/components/radio/radio.d.ts +0 -16
- package/dist/components/radio/radio.js +0 -63
- package/dist/components/radio/radio.js.map +0 -1
- package/dist/components/radio/radio.vanilla.js +0 -8
- package/dist/components/radio/radio.vanilla.js.map +0 -1
- package/dist/components/radio/types.d.ts +0 -29
- package/dist/components/search-field/index.d.ts +0 -3
- package/dist/components/search-field/search-field.css.d.ts +0 -16
- package/dist/components/search-field/search-field.d.ts +0 -9
- package/dist/components/search-field/search-field.js +0 -60
- package/dist/components/search-field/search-field.js.map +0 -1
- package/dist/components/search-field/search-field.vanilla.js +0 -7
- package/dist/components/search-field/search-field.vanilla.js.map +0 -1
- package/dist/components/search-field/types.d.ts +0 -29
- package/dist/components/select/index.d.ts +0 -3
- package/dist/components/select/select.css.d.ts +0 -25
- package/dist/components/select/select.d.ts +0 -8
- package/dist/components/select/select.js +0 -80
- package/dist/components/select/select.js.map +0 -1
- package/dist/components/select/select.vanilla.js +0 -8
- package/dist/components/select/select.vanilla.js.map +0 -1
- package/dist/components/select/types.d.ts +0 -30
- package/dist/components/switch/index.d.ts +0 -3
- package/dist/components/switch/switch.css.d.ts +0 -25
- package/dist/components/switch/switch.d.ts +0 -4
- package/dist/components/switch/switch.js +0 -34
- package/dist/components/switch/switch.js.map +0 -1
- package/dist/components/switch/switch.vanilla.js +0 -8
- package/dist/components/switch/switch.vanilla.js.map +0 -1
- package/dist/components/switch/types.d.ts +0 -17
- package/dist/components/tabs/index.d.ts +0 -3
- package/dist/components/tabs/tabs.css.d.ts +0 -49
- package/dist/components/tabs/tabs.d.ts +0 -68
- package/dist/components/tabs/tabs.js +0 -108
- package/dist/components/tabs/tabs.js.map +0 -1
- package/dist/components/tabs/tabs.vanilla.js +0 -11
- package/dist/components/tabs/tabs.vanilla.js.map +0 -1
- package/dist/components/tabs/types.d.ts +0 -82
- package/dist/components/textarea/index.d.ts +0 -3
- package/dist/components/textarea/textarea.css.d.ts +0 -31
- package/dist/components/textarea/textarea.d.ts +0 -14
- package/dist/components/textarea/textarea.js +0 -86
- package/dist/components/textarea/textarea.js.map +0 -1
- package/dist/components/textarea/textarea.vanilla.js +0 -8
- package/dist/components/textarea/textarea.vanilla.js.map +0 -1
- package/dist/components/textarea/types.d.ts +0 -39
- package/dist/components/tooltip/index.d.ts +0 -3
- package/dist/components/tooltip/tooltip.css.d.ts +0 -23
- package/dist/components/tooltip/tooltip.d.ts +0 -23
- package/dist/components/tooltip/tooltip.js +0 -69
- package/dist/components/tooltip/tooltip.js.map +0 -1
- package/dist/components/tooltip/tooltip.vanilla.js +0 -8
- package/dist/components/tooltip/tooltip.vanilla.js.map +0 -1
- package/dist/components/tooltip/types.d.ts +0 -39
- package/dist/components/tree/index.d.ts +0 -3
- package/dist/components/tree/tree.css.d.ts +0 -73
- package/dist/components/tree/tree.d.ts +0 -5
- package/dist/components/tree/tree.js +0 -337
- package/dist/components/tree/tree.js.map +0 -1
- package/dist/components/tree/tree.vanilla.js +0 -11
- package/dist/components/tree/tree.vanilla.js.map +0 -1
- package/dist/components/tree/types.d.ts +0 -114
- package/dist/components/tree/utils.d.ts +0 -8
- package/dist/components/tree/utils.js +0 -75
- package/dist/components/tree/utils.js.map +0 -1
- package/dist/hooks/index.d.ts +0 -8
- package/dist/hooks/use-collection-render/index.d.ts +0 -1
- package/dist/hooks/use-collection-render/use-collection-render.d.ts +0 -9
- package/dist/hooks/use-collection-render/use-collection-render.js +0 -20
- package/dist/hooks/use-collection-render/use-collection-render.js.map +0 -1
- package/dist/hooks/use-context-props/index.d.ts +0 -1
- package/dist/hooks/use-context-props/use-context-props.d.ts +0 -7
- package/dist/hooks/use-context-props/use-context-props.js +0 -15
- package/dist/hooks/use-context-props/use-context-props.js.map +0 -1
- package/dist/hooks/use-defaults/index.d.ts +0 -2
- package/dist/hooks/use-defaults/types.d.ts +0 -67
- package/dist/hooks/use-defaults/use-defaults.d.ts +0 -56
- package/dist/hooks/use-defaults/use-defaults.js +0 -21
- package/dist/hooks/use-defaults/use-defaults.js.map +0 -1
- package/dist/hooks/use-propagating-press/index.d.ts +0 -1
- package/dist/hooks/use-propagating-press/use-propagating-press.d.ts +0 -9
- package/dist/hooks/use-propagating-press/use-propagating-press.js +0 -14
- package/dist/hooks/use-propagating-press/use-propagating-press.js.map +0 -1
- package/dist/hooks/use-slot/index.d.ts +0 -1
- package/dist/hooks/use-slot/use-slot.d.ts +0 -13
- package/dist/hooks/use-slot/use-slot.js +0 -18
- package/dist/hooks/use-slot/use-slot.js.map +0 -1
- package/dist/hooks/use-theme/index.d.ts +0 -2
- package/dist/hooks/use-theme/types.d.ts +0 -86
- package/dist/hooks/use-theme/use-theme.css.d.ts +0 -1
- package/dist/hooks/use-theme/use-theme.d.ts +0 -13
- package/dist/hooks/use-theme/use-theme.js +0 -64
- package/dist/hooks/use-theme/use-theme.js.map +0 -1
- package/dist/hooks/use-theme/use-theme.vanilla.js +0 -4
- package/dist/hooks/use-theme/use-theme.vanilla.js.map +0 -1
- package/dist/hooks/use-tree/index.d.ts +0 -1
- package/dist/hooks/use-tree/use-tree.d.ts +0 -2
- package/dist/hooks/use-tree/use-tree.js +0 -217
- package/dist/hooks/use-tree/use-tree.js.map +0 -1
- package/dist/hooks/use-tree/utils.d.ts +0 -6
- package/dist/hooks/use-tree/utils.js +0 -77
- package/dist/hooks/use-tree/utils.js.map +0 -1
- package/dist/hooks/use-update-effect/index.d.ts +0 -1
- package/dist/hooks/use-update-effect/use-update-effect.d.ts +0 -1
- package/dist/hooks/use-update-effect/use-update-effect.js +0 -20
- package/dist/hooks/use-update-effect/use-update-effect.js.map +0 -1
- package/dist/ladle/actions.d.ts +0 -1
- package/dist/ladle/index.d.ts +0 -1
- package/dist/styles/index.d.ts +0 -6
- package/dist/styles/layers.css.d.ts +0 -16
- package/dist/styles/layers.vanilla.js +0 -4
- package/dist/styles/layers.vanilla.js.map +0 -1
- package/dist/styles/reset.css.d.ts +0 -1
- package/dist/styles/space.css.d.ts +0 -1
- package/dist/styles/surfaces.css.d.ts +0 -4
- package/dist/styles/surfaces.vanilla.js +0 -4
- package/dist/styles/surfaces.vanilla.js.map +0 -1
- package/dist/styles/theme.css.d.ts +0 -334
- package/dist/styles/theme.vanilla.js +0 -31
- package/dist/styles/theme.vanilla.js.map +0 -1
- package/dist/styles/typography.css.d.ts +0 -17
- package/dist/styles/typography.vanilla.js +0 -8
- package/dist/styles/typography.vanilla.js.map +0 -1
- package/dist/test/setup.d.ts +0 -1
- package/dist/types/deckgl.d.ts +0 -1
- package/dist/types/generic.d.ts +0 -3
- package/dist/types/index.d.ts +0 -6
- package/dist/types/props.d.ts +0 -4
- package/dist/types/react-aria.d.ts +0 -91
- package/dist/types/use-tree.d.ts +0 -52
- package/dist/types/vanilla-extract.d.ts +0 -15
- package/dist/utils/css.d.ts +0 -139
- package/dist/utils/css.js +0 -145
- package/dist/utils/css.js.map +0 -1
- package/dist/utils/events.d.ts +0 -10
- package/dist/utils/events.js +0 -5
- package/dist/utils/events.js.map +0 -1
- package/dist/utils/index.d.ts +0 -4
- package/dist/utils/props.d.ts +0 -29
- package/dist/utils/props.js +0 -108
- package/dist/utils/props.js.map +0 -1
- package/dist/utils/validators.d.ts +0 -49
- package/dist/utils/validators.js +0 -37
- package/dist/utils/validators.js.map +0 -1
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import type { CheckboxClassNames } from './types';
|
|
2
|
-
export declare const checkboxContainer: string;
|
|
3
|
-
export declare const checkboxGroupContainer: string;
|
|
4
|
-
export declare const checkboxColorVars: {
|
|
5
|
-
border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
6
|
-
background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
7
|
-
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
8
|
-
indicator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
9
|
-
};
|
|
10
|
-
export declare const checkboxSpaceVars: {
|
|
11
|
-
dimension: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
12
|
-
gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
13
|
-
elementGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
14
|
-
};
|
|
15
|
-
export declare const checkboxStateVars: {
|
|
16
|
-
alignInput: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
17
|
-
isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
18
|
-
isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
19
|
-
isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
20
|
-
isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
21
|
-
isIndeterminate: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
22
|
-
isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
23
|
-
isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
24
|
-
isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
25
|
-
isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
26
|
-
isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
27
|
-
};
|
|
28
|
-
export declare const checkboxGroupStateVars: {
|
|
29
|
-
orientation: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
30
|
-
isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
31
|
-
isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
32
|
-
isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
33
|
-
isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
34
|
-
};
|
|
35
|
-
export declare const checkboxClassNames: CheckboxClassNames;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { type ContextValue } from 'react-aria-components';
|
|
2
|
-
import type { CheckboxGroupProps, CheckboxGroupRenderProps, CheckboxProps, CheckboxRenderProps } from './types';
|
|
3
|
-
export declare const CheckboxContext: import("react").Context<ContextValue<CheckboxProps, HTMLLabelElement>>;
|
|
4
|
-
export declare const Checkbox: (props: Omit<import("react-aria-components").CheckboxProps, "children" | "className" | "style"> & {
|
|
5
|
-
children?: import("../..").RenderPropsChildren<CheckboxRenderProps>;
|
|
6
|
-
label?: string;
|
|
7
|
-
classNames?: import("./types").CheckboxClassNames;
|
|
8
|
-
alignInput?: import("./types").CheckboxAlignment;
|
|
9
|
-
} & import("react").RefAttributes<HTMLLabelElement>) => import("react").ReactElement | null;
|
|
10
|
-
export declare const CheckboxGroupContext: import("react").Context<ContextValue<CheckboxGroupProps, HTMLDivElement>>;
|
|
11
|
-
export declare const CheckboxGroup: (props: Omit<import("react-aria-components").CheckboxGroupProps, "children" | "className" | "style"> & {
|
|
12
|
-
children?: import("../..").RenderPropsChildren<CheckboxGroupRenderProps>;
|
|
13
|
-
classNames?: import("./types").CheckboxClassNames;
|
|
14
|
-
label?: string;
|
|
15
|
-
orientation?: import("react-aria").Orientation;
|
|
16
|
-
} & Pick<{
|
|
17
|
-
children?: import("../..").RenderPropsChildren<CheckboxRenderProps>;
|
|
18
|
-
label?: string;
|
|
19
|
-
classNames?: import("./types").CheckboxClassNames;
|
|
20
|
-
alignInput?: import("./types").CheckboxAlignment;
|
|
21
|
-
}, "alignInput"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, forwardRef, useMemo, useCallback } from 'react';
|
|
3
|
-
import { TextContext, Provider, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1 } from 'react-aria-components';
|
|
4
|
-
import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
|
|
5
|
-
import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
|
|
6
|
-
import { inlineVars } from '../../utils/css.js';
|
|
7
|
-
import { mergeClassNames, callRenderProps } from '../../utils/props.js';
|
|
8
|
-
import { useSlot } from '../../hooks/use-slot/use-slot.js';
|
|
9
|
-
import { useTheme } from '../../hooks/use-theme/use-theme.js';
|
|
10
|
-
import { AriaTextContext, AriaLabelContext } from '../aria/aria.js';
|
|
11
|
-
import { IconContext } from '../icon/icon.js';
|
|
12
|
-
import { checkboxClassNames, checkboxStateVars, checkboxGroupStateVars } from './checkbox.vanilla.js';
|
|
13
|
-
|
|
14
|
-
const CheckboxContext = createContext(null);
|
|
15
|
-
const Checkbox = forwardRef(function Checkbox2(props, ref) {
|
|
16
|
-
[props, ref] = useContextProps(props, ref, CheckboxContext);
|
|
17
|
-
props = useDefaultProps(props, "Checkbox");
|
|
18
|
-
const { children: childrenProp, classNames: classNamesProp, alignInput = "end", ...rest } = props;
|
|
19
|
-
const [iconRef, hasIcon] = useSlot();
|
|
20
|
-
const theme = useTheme();
|
|
21
|
-
const classNames = useMemo(() => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp), [theme.Checkbox, classNamesProp]);
|
|
22
|
-
const style = useCallback(({ ...renderProps }) => inlineVars(checkboxStateVars, {
|
|
23
|
-
...renderProps,
|
|
24
|
-
alignInput
|
|
25
|
-
}), [alignInput]);
|
|
26
|
-
const values = useMemo(() => [
|
|
27
|
-
[AriaTextContext, { className: classNames?.checkbox?.label }],
|
|
28
|
-
[
|
|
29
|
-
IconContext,
|
|
30
|
-
{
|
|
31
|
-
ref: iconRef,
|
|
32
|
-
classNames: classNames?.checkbox?.icon
|
|
33
|
-
}
|
|
34
|
-
],
|
|
35
|
-
[TextContext, null]
|
|
36
|
-
], [classNames?.checkbox?.label, classNames?.checkbox?.icon, iconRef]);
|
|
37
|
-
const children = useCallback((renderProps) => jsx(Provider, { values, children: jsxs("div", { className: classNames?.checkbox?.checkbox, children: [!hasIcon && jsx("span", { className: classNames?.checkbox?.icon?.container }), callRenderProps(childrenProp, renderProps)] }) }), [childrenProp, classNames?.checkbox, hasIcon, values]);
|
|
38
|
-
return jsx(Checkbox$1, { ...rest, ref, className: classNames?.checkbox?.container, style, children });
|
|
39
|
-
});
|
|
40
|
-
const CheckboxGroupContext = createContext(null);
|
|
41
|
-
const CheckboxGroup = forwardRef(function CheckboxGroup2(props, ref) {
|
|
42
|
-
[props, ref] = useContextProps(props, ref, CheckboxGroupContext);
|
|
43
|
-
props = useDefaultProps(props, "CheckboxGroup");
|
|
44
|
-
const { children: childrenProp, classNames: classNamesProp, alignInput = "end", orientation = "vertical", ...rest } = props;
|
|
45
|
-
const theme = useTheme();
|
|
46
|
-
const classNames = useMemo(() => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp), [classNamesProp, theme.Checkbox]);
|
|
47
|
-
const style = useCallback((renderProps) => inlineVars(checkboxGroupStateVars, {
|
|
48
|
-
...renderProps,
|
|
49
|
-
orientation
|
|
50
|
-
}), [orientation]);
|
|
51
|
-
const values = useMemo(() => [
|
|
52
|
-
[AriaLabelContext, { className: classNames?.group?.label }],
|
|
53
|
-
[
|
|
54
|
-
CheckboxContext,
|
|
55
|
-
{
|
|
56
|
-
classNames,
|
|
57
|
-
alignInput
|
|
58
|
-
}
|
|
59
|
-
]
|
|
60
|
-
], [alignInput, classNames]);
|
|
61
|
-
const children = useCallback((renderProps) => jsx(Provider, { values, children: jsx("div", { className: classNames?.group?.group, children: callRenderProps(childrenProp, {
|
|
62
|
-
...renderProps,
|
|
63
|
-
defaultChildren: null
|
|
64
|
-
}) }) }), [childrenProp, classNames?.group, values]);
|
|
65
|
-
return jsx(CheckboxGroup$1, { ...rest, ref, className: classNames?.group?.container, style, children });
|
|
66
|
-
});
|
|
67
|
-
|
|
68
|
-
export { Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useMemo,\n type ForwardedRef,\n} from 'react';\nimport {\n Provider,\n Checkbox as RACCheckbox,\n CheckboxGroup as RACCheckboxGroup,\n TextContext,\n type ContextValue,\n type LabelProps,\n type TextProps,\n} from 'react-aria-components';\nimport {\n useContextProps,\n useDefaultProps,\n useSlot,\n useTheme,\n} from '../../hooks';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport { AriaLabelContext, AriaTextContext } from '../aria';\nimport { IconContext, type IconProps } from '../icon';\nimport {\n checkboxClassNames,\n checkboxGroupStateVars,\n checkboxStateVars,\n} from './checkbox.css';\nimport type {\n CheckboxGroupProps,\n CheckboxGroupRenderProps,\n CheckboxProps,\n CheckboxRenderProps,\n} from './types';\n\nexport const CheckboxContext =\n createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);\n\nexport const Checkbox = forwardRef(function Checkbox(\n props: CheckboxProps,\n ref: ForwardedRef<HTMLLabelElement>,\n) {\n [props, ref] = useContextProps(props, ref, CheckboxContext);\n\n props = useDefaultProps(props, 'Checkbox');\n\n const {\n children: childrenProp,\n classNames: classNamesProp,\n alignInput = 'end',\n ...rest\n } = props;\n\n const [iconRef, hasIcon] = useSlot();\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp),\n [theme.Checkbox, classNamesProp],\n );\n\n const style = useCallback(\n ({ ...renderProps }: CheckboxRenderProps) =>\n inlineVars(checkboxStateVars, {\n ...renderProps,\n alignInput,\n }),\n [alignInput],\n );\n\n const values = useMemo<\n [\n [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof IconContext, ContextValue<IconProps, HTMLDivElement>],\n [typeof TextContext, ContextValue<TextProps, HTMLElement>],\n ]\n >(\n () => [\n [AriaTextContext, { className: classNames?.checkbox?.label }],\n [\n IconContext,\n {\n ref: iconRef,\n classNames: classNames?.checkbox?.icon,\n },\n ],\n [TextContext, null],\n ],\n [classNames?.checkbox?.label, classNames?.checkbox?.icon, iconRef],\n );\n\n const children = useCallback(\n (renderProps: CheckboxRenderProps) => (\n <Provider values={values}>\n <div className={classNames?.checkbox?.checkbox}>\n {!hasIcon && (\n <span className={classNames?.checkbox?.icon?.container} />\n )}\n {callRenderProps(childrenProp, renderProps)}\n </div>\n </Provider>\n ),\n [childrenProp, classNames?.checkbox, hasIcon, values],\n );\n\n return (\n <RACCheckbox\n {...rest}\n ref={ref}\n className={classNames?.checkbox?.container}\n style={style}\n >\n {children}\n </RACCheckbox>\n );\n});\n\nexport const CheckboxGroupContext =\n createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);\n\nexport const CheckboxGroup = forwardRef(function CheckboxGroup(\n props: CheckboxGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n [props, ref] = useContextProps(props, ref, CheckboxGroupContext);\n\n props = useDefaultProps(props, 'CheckboxGroup');\n\n const {\n children: childrenProp,\n classNames: classNamesProp,\n alignInput = 'end',\n orientation = 'vertical',\n ...rest\n } = props;\n\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(checkboxClassNames, theme.Checkbox, classNamesProp),\n [classNamesProp, theme.Checkbox],\n );\n\n const style = useCallback(\n (renderProps: CheckboxGroupRenderProps) =>\n inlineVars(checkboxGroupStateVars, {\n ...renderProps,\n orientation,\n }),\n [orientation],\n );\n\n const values = useMemo<\n [\n [typeof AriaLabelContext, ContextValue<LabelProps, HTMLLabelElement>],\n [typeof CheckboxContext, ContextValue<CheckboxProps, HTMLLabelElement>],\n ]\n >(\n () => [\n [AriaLabelContext, { className: classNames?.group?.label }],\n [\n CheckboxContext,\n {\n classNames,\n alignInput,\n },\n ],\n ],\n [alignInput, classNames],\n );\n\n const children = useCallback(\n (renderProps: CheckboxGroupRenderProps) => (\n <Provider values={values}>\n <div className={classNames?.group?.group}>\n {callRenderProps(childrenProp, {\n ...renderProps,\n defaultChildren: null,\n })}\n </div>\n </Provider>\n ),\n [childrenProp, classNames?.group, values],\n );\n\n return (\n <RACCheckboxGroup\n {...rest}\n ref={ref}\n className={classNames?.group?.container}\n style={style}\n >\n {children}\n </RACCheckboxGroup>\n );\n});\n"],"names":["Checkbox","RACCheckbox","CheckboxGroup","RACCheckboxGroup"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqCa,MAAA,eAAA,GACX,cAA6D,IAAI,EAAA;AAE5D,MAAM,QAAW,GAAA,UAAA,CAAW,SAASA,SAAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,eAAe,CAAA,CAAA;AAE1D,EAAQ,KAAA,GAAA,eAAA,CAAgB,OAAO,UAAU,CAAA,CAAA;AAEzC,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,UAAa,GAAA,KAAA;AAAA,IACb,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,CAAC,OAAA,EAAS,OAAO,CAAA,GAAI,OAAQ,EAAA,CAAA;AACnC,EAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,eAAA,CAAgB,kBAAoB,EAAA,KAAA,CAAM,UAAU,cAAc,CAAA;AAAA,IACxE,CAAC,KAAM,CAAA,QAAA,EAAU,cAAc,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,KAAQ,GAAA,WAAA;AAAA,IACZ,CAAC,EAAE,GAAG,WAAY,EAAA,KAChB,WAAW,iBAAmB,EAAA;AAAA,MAC5B,GAAG,WAAA;AAAA,MACH,UAAA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,MAAM,MAAS,GAAA,OAAA;AAAA,IAOb,MAAM;AAAA,MACJ,CAAC,eAAiB,EAAA,EAAE,WAAW,UAAY,EAAA,QAAA,EAAU,OAAO,CAAA;AAAA,MAC5D;AAAA,QACE,WAAA;AAAA,QACA;AAAA,UACE,GAAK,EAAA,OAAA;AAAA,UACL,UAAA,EAAY,YAAY,QAAU,EAAA,IAAA;AAAA,SACpC;AAAA,OACF;AAAA,MACA,CAAC,aAAa,IAAI,CAAA;AAAA,KACpB;AAAA,IACA,CAAC,UAAY,EAAA,QAAA,EAAU,OAAO,UAAY,EAAA,QAAA,EAAU,MAAM,OAAO,CAAA;AAAA,GACnE,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,WACC,qBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,MAAA,EACR,+BAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAY,EAAA,QAAA,EAAU,QACnC,EAAA,QAAA,EAAA;AAAA,MAAA,CAAC,2BACC,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,UAAY,EAAA,QAAA,EAAU,MAAM,SAAW,EAAA,CAAA;AAAA,MAEzD,eAAA,CAAgB,cAAc,WAAW,CAAA;AAAA,KAAA,EAC5C,CACF,EAAA,CAAA;AAAA,IAEF,CAAC,YAAA,EAAc,UAAY,EAAA,QAAA,EAAU,SAAS,MAAM,CAAA;AAAA,GACtD,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAACC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,YAAY,QAAU,EAAA,SAAA;AAAA,MACjC,KAAA;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,oBAAA,GACX,cAAgE,IAAI,EAAA;AAE/D,MAAM,aAAgB,GAAA,UAAA,CAAW,SAASC,cAAAA,CAC/C,OACA,GACA,EAAA;AACA,EAAA,CAAC,OAAO,GAAG,CAAA,GAAI,eAAgB,CAAA,KAAA,EAAO,KAAK,oBAAoB,CAAA,CAAA;AAE/D,EAAQ,KAAA,GAAA,eAAA,CAAgB,OAAO,eAAe,CAAA,CAAA;AAE9C,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA,YAAA;AAAA,IACV,UAAY,EAAA,cAAA;AAAA,IACZ,UAAa,GAAA,KAAA;AAAA,IACb,WAAc,GAAA,UAAA;AAAA,IACd,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,MAAM,eAAA,CAAgB,kBAAoB,EAAA,KAAA,CAAM,UAAU,cAAc,CAAA;AAAA,IACxE,CAAC,cAAgB,EAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,KAAQ,GAAA,WAAA;AAAA,IACZ,CAAC,WACC,KAAA,UAAA,CAAW,sBAAwB,EAAA;AAAA,MACjC,GAAG,WAAA;AAAA,MACH,WAAA;AAAA,KACD,CAAA;AAAA,IACH,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,MAAM,MAAS,GAAA,OAAA;AAAA,IAMb,MAAM;AAAA,MACJ,CAAC,gBAAkB,EAAA,EAAE,WAAW,UAAY,EAAA,KAAA,EAAO,OAAO,CAAA;AAAA,MAC1D;AAAA,QACE,eAAA;AAAA,QACA;AAAA,UACE,UAAA;AAAA,UACA,UAAA;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,YAAY,UAAU,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,CAAC,WAAA,qBACE,GAAA,CAAA,QAAA,EAAA,EAAS,MACR,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAY,EAAA,KAAA,EAAO,KAChC,EAAA,QAAA,EAAA,eAAA,CAAgB,YAAc,EAAA;AAAA,MAC7B,GAAG,WAAA;AAAA,MACH,eAAiB,EAAA,IAAA;AAAA,KAClB,GACH,CACF,EAAA,CAAA;AAAA,IAEF,CAAC,YAAA,EAAc,UAAY,EAAA,KAAA,EAAO,MAAM,CAAA;AAAA,GAC1C,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAA,EAAW,YAAY,KAAO,EAAA,SAAA;AAAA,MAC9B,KAAA;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC;;;;"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
var checkboxClassNames = { checkbox: { container: "checkbox_checkboxClassNames_checkbox_container__1rajo3pp", checkbox: "checkbox_checkboxClassNames_checkbox_checkbox__1rajo3pq", icon: { container: "checkbox_checkboxClassNames_checkbox_icon_container__1rajo3pr" }, label: "checkbox_checkboxClassNames_checkbox_label__1rajo3ps typography_label__j8fgabg" }, group: { container: "checkbox_checkboxClassNames_group_container__1rajo3pt", group: "checkbox_checkboxClassNames_group_group__1rajo3pu", label: "checkbox_checkboxClassNames_group_label__1rajo3pv typography_label__j8fgabg" } };
|
|
3
|
-
var checkboxColorVars = { border: "var(--border__1rajo3p2)", background: "var(--background__1rajo3p3)", color: "var(--color__1rajo3p4)", indicator: "var(--indicator__1rajo3p5)" };
|
|
4
|
-
var checkboxContainer = "checkbox_checkboxContainer__1rajo3p0";
|
|
5
|
-
var checkboxGroupStateVars = { orientation: "var(--orientation__1rajo3pk)", isDisabled: "var(--isDisabled__1rajo3pl)", isReadOnly: "var(--isReadOnly__1rajo3pm)", isRequired: "var(--isRequired__1rajo3pn)", isInvalid: "var(--isInvalid__1rajo3po)" };
|
|
6
|
-
var checkboxSpaceVars = { dimension: "var(--dimension__1rajo3p6)", gap: "var(--gap__1rajo3p7)", elementGap: "var(--elementGap__1rajo3p8)" };
|
|
7
|
-
var checkboxStateVars = { alignInput: "var(--alignInput__1rajo3p9)", isDisabled: "var(--isDisabled__1rajo3pa)", isFocused: "var(--isFocused__1rajo3pb)", isFocusVisible: "var(--isFocusVisible__1rajo3pc)", isHovered: "var(--isHovered__1rajo3pd)", isIndeterminate: "var(--isIndeterminate__1rajo3pe)", isInvalid: "var(--isInvalid__1rajo3pf)", isPressed: "var(--isPressed__1rajo3pg)", isReadOnly: "var(--isReadOnly__1rajo3ph)", isRequired: "var(--isRequired__1rajo3pi)", isSelected: "var(--isSelected__1rajo3pj)" };
|
|
8
|
-
|
|
9
|
-
export { checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.vanilla.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export { Checkbox, CheckboxContext, CheckboxGroup, CheckboxGroupContext, } from './checkbox';
|
|
2
|
-
export { checkboxClassNames, checkboxColorVars, checkboxContainer, checkboxGroupStateVars, checkboxSpaceVars, checkboxStateVars, } from './checkbox.css';
|
|
3
|
-
export { type CheckboxAlignment, type CheckboxClassNames, type CheckboxGroupProps, type CheckboxGroupRenderProps, type CheckboxGroupState, type CheckboxProps, type CheckboxRenderProps, type CheckboxState, } from './types';
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import type { Orientation } from 'react-aria';
|
|
2
|
-
import type { CheckboxGroupProps as RACCheckboxGroupProps, CheckboxGroupRenderProps as RACCheckboxGroupRenderProps, CheckboxProps as RACCheckboxProps, CheckboxRenderProps as RACCheckboxRenderProps } from 'react-aria-components';
|
|
3
|
-
import type { PartialDeep } from 'type-fest';
|
|
4
|
-
import type { RenderPropsChildren } from '../../types';
|
|
5
|
-
import type { IconClassNames } from '../icon/types';
|
|
6
|
-
export type CheckboxClassNames = PartialDeep<{
|
|
7
|
-
group: {
|
|
8
|
-
container: string;
|
|
9
|
-
group: string;
|
|
10
|
-
label: string;
|
|
11
|
-
};
|
|
12
|
-
checkbox: {
|
|
13
|
-
container: string;
|
|
14
|
-
checkbox: string;
|
|
15
|
-
icon: IconClassNames;
|
|
16
|
-
label: string;
|
|
17
|
-
};
|
|
18
|
-
}>;
|
|
19
|
-
export type CheckboxAlignment = 'start' | 'end';
|
|
20
|
-
export type CheckboxRenderProps = RACCheckboxRenderProps;
|
|
21
|
-
type BaseCheckboxProps = {
|
|
22
|
-
children?: RenderPropsChildren<CheckboxRenderProps>;
|
|
23
|
-
label?: string;
|
|
24
|
-
classNames?: CheckboxClassNames;
|
|
25
|
-
alignInput?: CheckboxAlignment;
|
|
26
|
-
};
|
|
27
|
-
export type CheckboxState = Omit<CheckboxRenderProps, 'state'> & Required<Pick<BaseCheckboxProps, 'alignInput'>>;
|
|
28
|
-
export type CheckboxProps = Omit<RACCheckboxProps, 'children' | 'className' | 'style'> & BaseCheckboxProps;
|
|
29
|
-
export type CheckboxGroupRenderProps = RACCheckboxGroupRenderProps;
|
|
30
|
-
type BaseCheckboxGroupProps = {
|
|
31
|
-
children?: RenderPropsChildren<CheckboxGroupRenderProps>;
|
|
32
|
-
classNames?: CheckboxClassNames;
|
|
33
|
-
label?: string;
|
|
34
|
-
orientation?: Orientation;
|
|
35
|
-
} & Pick<BaseCheckboxProps, 'alignInput'>;
|
|
36
|
-
export type CheckboxGroupProps = Omit<RACCheckboxGroupProps, 'children' | 'className' | 'style'> & BaseCheckboxGroupProps;
|
|
37
|
-
export type CheckboxGroupState = Omit<CheckboxGroupRenderProps, 'state'> & Pick<BaseCheckboxGroupProps, 'orientation'>;
|
|
38
|
-
export {};
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import type { ChipClassNames } from './types';
|
|
2
|
-
export declare const chipContainer: string;
|
|
3
|
-
export declare const chipColorVars: {
|
|
4
|
-
background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
5
|
-
border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
6
|
-
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
7
|
-
};
|
|
8
|
-
export declare const chipSpaceVars: {
|
|
9
|
-
list: {
|
|
10
|
-
gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
11
|
-
};
|
|
12
|
-
chip: {
|
|
13
|
-
gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
14
|
-
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
15
|
-
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
export declare const chipStateVars: {
|
|
19
|
-
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
20
|
-
size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
21
|
-
allowsRemoving: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
22
|
-
selectionBehavior: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
23
|
-
selectionMode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
24
|
-
isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
25
|
-
isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
26
|
-
isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
27
|
-
isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
28
|
-
isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
29
|
-
isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
30
|
-
};
|
|
31
|
-
export declare const chipClassNames: ChipClassNames;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { type ContextValue } from 'react-aria-components';
|
|
2
|
-
import type { ChipGroupProps, ChipItemProps, ChipListProps, ChipProps } from './types';
|
|
3
|
-
export declare function Chip(props: ChipProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
-
export declare const ChipContext: import("react").Context<ContextValue<ChipItemProps, HTMLDivElement>>;
|
|
5
|
-
/**
|
|
6
|
-
* Must be used in conjunction with ChipList & ChipGroup and
|
|
7
|
-
* cannot be used outside of ChipList, else will throw error
|
|
8
|
-
*
|
|
9
|
-
* Color & Size props can be passed in from ChipGroup and overriden
|
|
10
|
-
* on each instance of this components
|
|
11
|
-
*
|
|
12
|
-
* Order of precedence (from lowest to highest):
|
|
13
|
-
* Design System Defaults of Chip
|
|
14
|
-
* Global Defaults of ChipGroup
|
|
15
|
-
* Instance of ChipGroup
|
|
16
|
-
* Global Defaults of ChipItem
|
|
17
|
-
* Instance of ChipItem
|
|
18
|
-
*/
|
|
19
|
-
export declare const ChipItem: (props: Omit<import("react-aria-components").TagProps, "children" | "className" | "style"> & import("./types").BaseChipProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
|
|
20
|
-
/**
|
|
21
|
-
* Must be used in conjunction with ChipItem & ChipGroup and
|
|
22
|
-
* cannot be used outside of ChipGroup, else will throw error
|
|
23
|
-
*/
|
|
24
|
-
export declare function ChipList<T extends object>({ classNames: classNamesProp, ...rest }: ChipListProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
25
|
-
export declare const ChipGroupContext: import("react").Context<ContextValue<ChipGroupProps, HTMLDivElement>>;
|
|
26
|
-
/**
|
|
27
|
-
* Color & Size props are passed down to ChipItem but can be overridden
|
|
28
|
-
* on each component if desired
|
|
29
|
-
*/
|
|
30
|
-
export declare const ChipGroup: (props: Omit<import("react-aria-components").TagGroupProps, "className" | "style"> & Omit<import("./types").BaseChipProps, "children"> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, forwardRef, useMemo, useCallback } from 'react';
|
|
3
|
-
import { TextContext, Provider, Tag, TagGroup, TagList } from 'react-aria-components';
|
|
4
|
-
import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
|
|
5
|
-
import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
|
|
6
|
-
import { inlineVars } from '../../utils/css.js';
|
|
7
|
-
import { mergeClassNames, callRenderProps } from '../../utils/props.js';
|
|
8
|
-
import { useTheme } from '../../hooks/use-theme/use-theme.js';
|
|
9
|
-
import { bodies } from '../../styles/typography.vanilla.js';
|
|
10
|
-
import { AriaTextContext } from '../aria/aria.js';
|
|
11
|
-
import { ButtonContext } from '../button/button.js';
|
|
12
|
-
import { chipClassNames, chipStateVars } from './chip.vanilla.js';
|
|
13
|
-
|
|
14
|
-
const defaults = {
|
|
15
|
-
color: "info",
|
|
16
|
-
size: "sm"
|
|
17
|
-
};
|
|
18
|
-
const defaultMapping = {
|
|
19
|
-
font: {
|
|
20
|
-
sm: bodies.sm,
|
|
21
|
-
lg: bodies.sm
|
|
22
|
-
},
|
|
23
|
-
remove: {
|
|
24
|
-
sm: { size: "sm", variant: "icon" },
|
|
25
|
-
lg: { size: "sm", variant: "icon" }
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
function Chip(props) {
|
|
29
|
-
props = useDefaultProps(props, "Chip");
|
|
30
|
-
const { children, classNames: classNamesProp, color = defaults.color, mapping: mappingProp, size = defaults.size } = props;
|
|
31
|
-
const theme = useTheme();
|
|
32
|
-
const mapping = useMemo(() => ({
|
|
33
|
-
...defaultMapping,
|
|
34
|
-
...mappingProp
|
|
35
|
-
}), [mappingProp]);
|
|
36
|
-
const classNames = useMemo(() => mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {
|
|
37
|
-
chip: mapping.font[size]
|
|
38
|
-
}), [theme.Chip, classNamesProp, mapping, size]);
|
|
39
|
-
const values = useMemo(() => [[AriaTextContext, { className: classNames?.label }]], [classNames?.label]);
|
|
40
|
-
const style = useMemo(() => inlineVars(chipStateVars, {
|
|
41
|
-
allowsRemoving: false,
|
|
42
|
-
color,
|
|
43
|
-
selectionBehavior: "toggle",
|
|
44
|
-
selectionMode: "none",
|
|
45
|
-
size,
|
|
46
|
-
isDisabled: false,
|
|
47
|
-
isFocused: false,
|
|
48
|
-
isFocusVisible: false,
|
|
49
|
-
isHovered: false,
|
|
50
|
-
isPressed: false,
|
|
51
|
-
isSelected: false
|
|
52
|
-
}), [color, size]);
|
|
53
|
-
return jsx(Provider, { values, children: jsx("div", { className: classNames?.container, style, children: jsx("div", { className: classNames?.chip, children }) }) });
|
|
54
|
-
}
|
|
55
|
-
const ChipContext = createContext(null);
|
|
56
|
-
const ChipItem = forwardRef(function ChipItem2(props, ref) {
|
|
57
|
-
[props, ref] = useContextProps(props, ref, ChipContext);
|
|
58
|
-
props = useDefaultProps(props, "Chip");
|
|
59
|
-
const { children: childrenProp, id, classNames: classNamesProp, color = defaults.color, size = defaults.size, textValue, mapping: mappingProp, ...rest } = props;
|
|
60
|
-
const theme = useTheme();
|
|
61
|
-
const mapping = useMemo(() => ({
|
|
62
|
-
...defaultMapping,
|
|
63
|
-
...mappingProp
|
|
64
|
-
}), [mappingProp]);
|
|
65
|
-
const classNames = useMemo(() => mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {
|
|
66
|
-
chip: mapping.font[size]
|
|
67
|
-
}), [theme.Chip, classNamesProp, mapping, size]);
|
|
68
|
-
const values = useMemo(() => [
|
|
69
|
-
// Because ChipGroup (TagGroup) implements a TextContext, we need to block it inside of the Chip
|
|
70
|
-
// so that there isn't a conflict of with our AriaTextContext. Otherwise there are slot errors
|
|
71
|
-
[TextContext, null],
|
|
72
|
-
[AriaTextContext, { className: classNames?.label }],
|
|
73
|
-
[
|
|
74
|
-
ButtonContext,
|
|
75
|
-
{
|
|
76
|
-
...mapping.remove[size],
|
|
77
|
-
classNames: { button: classNames?.remove },
|
|
78
|
-
slot: "remove"
|
|
79
|
-
}
|
|
80
|
-
]
|
|
81
|
-
], [classNames?.label, classNames?.remove, mapping, size]);
|
|
82
|
-
const style = useCallback((renderProps) => inlineVars(chipStateVars, {
|
|
83
|
-
...renderProps,
|
|
84
|
-
color,
|
|
85
|
-
size
|
|
86
|
-
}), [color, size]);
|
|
87
|
-
const children = useCallback((renderProps) => jsx(Provider, { values, children: jsx("div", { className: classNames?.chip, children: callRenderProps(childrenProp, renderProps) }) }), [values, classNames?.chip, childrenProp]);
|
|
88
|
-
return jsx(Tag, { ...rest, ref, id: id ?? textValue, className: classNames?.container, style, textValue, children });
|
|
89
|
-
});
|
|
90
|
-
function ChipList({ classNames: classNamesProp, ...rest }) {
|
|
91
|
-
const theme = useTheme();
|
|
92
|
-
const classNames = useMemo(() => mergeClassNames(chipClassNames, theme.Chip, classNamesProp), [theme.Chip, classNamesProp]);
|
|
93
|
-
return jsx(TagList, { ...rest, className: classNames?.list });
|
|
94
|
-
}
|
|
95
|
-
const ChipGroupContext = createContext(null);
|
|
96
|
-
const ChipGroup = forwardRef(function ChipGroup2(props, ref) {
|
|
97
|
-
[props, ref] = useContextProps(props, ref, ChipGroupContext);
|
|
98
|
-
props = useDefaultProps(props, "ChipGroup");
|
|
99
|
-
const { children, classNames: classNamesProp, color, size, ...rest } = props;
|
|
100
|
-
const theme = useTheme();
|
|
101
|
-
const classNames = useMemo(() => mergeClassNames(chipClassNames, theme.Chip, classNamesProp), [theme.Chip, classNamesProp]);
|
|
102
|
-
const values = useMemo(() => [[ChipContext, { classNames, color, size }]], [classNames, color, size]);
|
|
103
|
-
return jsx(TagGroup, { ...rest, ref, className: classNames?.group, children: jsx(Provider, { values, children }) });
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
export { Chip, ChipContext, ChipGroup, ChipGroupContext, ChipItem, ChipList };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sources":["../../../src/components/chip/chip.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useMemo,\n type ForwardedRef,\n} from 'react';\nimport {\n Provider,\n TextContext as RACTextContext,\n Tag,\n TagGroup,\n TagList,\n type ContextValue,\n type TagRenderProps,\n type TextProps,\n} from 'react-aria-components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { bodies } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport { AriaTextContext } from '../aria';\nimport { ButtonContext, type ButtonProps } from '../button';\nimport { chipClassNames, chipStateVars } from './chip.css';\nimport type {\n ChipGroupProps,\n ChipItemProps,\n ChipListProps,\n ChipMapping,\n ChipProps,\n} from './types';\n\nconst defaults: Required<Pick<ChipProps, 'color' | 'size'>> = {\n color: 'info',\n size: 'sm',\n};\n\nconst defaultMapping: ChipMapping = {\n font: {\n sm: bodies.sm,\n lg: bodies.sm,\n },\n remove: {\n sm: { size: 'sm', variant: 'icon' },\n lg: { size: 'sm', variant: 'icon' },\n },\n};\n\nexport function Chip(props: ChipProps) {\n props = useDefaultProps(props, 'Chip');\n\n const {\n children,\n classNames: classNamesProp,\n color = defaults.color,\n mapping: mappingProp,\n size = defaults.size,\n } = props;\n\n const theme = useTheme();\n\n const mapping = useMemo(\n () => ({\n ...defaultMapping,\n ...mappingProp,\n }),\n [mappingProp],\n );\n\n const classNames = useMemo(\n () =>\n mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {\n chip: mapping.font[size],\n }),\n [theme.Chip, classNamesProp, mapping, size],\n );\n\n const values = useMemo<\n [[typeof AriaTextContext, ContextValue<TextProps, HTMLElement>]]\n >(\n () => [[AriaTextContext, { className: classNames?.label }]],\n [classNames?.label],\n );\n\n const style = useMemo(\n () =>\n inlineVars(chipStateVars, {\n allowsRemoving: false,\n color,\n selectionBehavior: 'toggle',\n selectionMode: 'none',\n size,\n isDisabled: false,\n isFocused: false,\n isFocusVisible: false,\n isHovered: false,\n isPressed: false,\n isSelected: false,\n }),\n [color, size],\n );\n\n return (\n <Provider values={values}>\n <div className={classNames?.container} style={style}>\n <div className={classNames?.chip}>{children}</div>\n </div>\n </Provider>\n );\n}\n\nexport const ChipContext =\n createContext<ContextValue<ChipItemProps, HTMLDivElement>>(null);\n\n/**\n * Must be used in conjunction with ChipList & ChipGroup and\n * cannot be used outside of ChipList, else will throw error\n *\n * Color & Size props can be passed in from ChipGroup and overriden\n * on each instance of this components\n *\n * Order of precedence (from lowest to highest):\n * Design System Defaults of Chip\n * Global Defaults of ChipGroup\n * Instance of ChipGroup\n * Global Defaults of ChipItem\n * Instance of ChipItem\n */\nexport const ChipItem = forwardRef(function ChipItem(\n props: ChipItemProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n [props, ref] = useContextProps(props, ref, ChipContext);\n props = useDefaultProps(props, 'Chip');\n\n const {\n children: childrenProp,\n id,\n classNames: classNamesProp,\n color = defaults.color,\n size = defaults.size,\n textValue,\n mapping: mappingProp,\n ...rest\n } = props;\n\n const theme = useTheme();\n\n const mapping = useMemo(\n () => ({\n ...defaultMapping,\n ...mappingProp,\n }),\n [mappingProp],\n );\n\n const classNames = useMemo(\n () =>\n mergeClassNames(chipClassNames, theme.Chip, classNamesProp, {\n chip: mapping.font[size],\n }),\n [theme.Chip, classNamesProp, mapping, size],\n );\n\n const values = useMemo<\n [\n [typeof RACTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof AriaTextContext, ContextValue<TextProps, HTMLElement>],\n [typeof ButtonContext, ContextValue<ButtonProps, HTMLButtonElement>],\n ]\n >(\n () => [\n // Because ChipGroup (TagGroup) implements a TextContext, we need to block it inside of the Chip\n // so that there isn't a conflict of with our AriaTextContext. Otherwise there are slot errors\n [RACTextContext, null],\n [AriaTextContext, { className: classNames?.label }],\n [\n ButtonContext,\n {\n ...mapping.remove[size],\n classNames: { button: classNames?.remove },\n slot: 'remove',\n },\n ],\n ],\n [classNames?.label, classNames?.remove, mapping, size],\n );\n\n const style = useCallback(\n (renderProps: TagRenderProps) =>\n inlineVars(chipStateVars, {\n ...renderProps,\n color,\n size,\n }),\n [color, size],\n );\n\n const children = useCallback(\n (renderProps: TagRenderProps) => (\n <Provider values={values}>\n <div className={classNames?.chip}>\n {callRenderProps(childrenProp, renderProps)}\n </div>\n </Provider>\n ),\n [values, classNames?.chip, childrenProp],\n );\n\n return (\n <Tag\n {...rest}\n ref={ref}\n id={id ?? textValue}\n className={classNames?.container}\n style={style}\n textValue={textValue}\n >\n {children}\n </Tag>\n );\n});\n\n/**\n * Must be used in conjunction with ChipItem & ChipGroup and\n * cannot be used outside of ChipGroup, else will throw error\n */\nexport function ChipList<T extends object>({\n classNames: classNamesProp,\n ...rest\n}: ChipListProps<T>) {\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(chipClassNames, theme.Chip, classNamesProp),\n [theme.Chip, classNamesProp],\n );\n\n return <TagList<T> {...rest} className={classNames?.list} />;\n}\n\nexport const ChipGroupContext =\n createContext<ContextValue<ChipGroupProps, HTMLDivElement>>(null);\n\n/**\n * Color & Size props are passed down to ChipItem but can be overridden\n * on each component if desired\n */\nexport const ChipGroup = forwardRef(function ChipGroup(\n props: ChipGroupProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n [props, ref] = useContextProps(props, ref, ChipGroupContext);\n props = useDefaultProps(props, 'ChipGroup');\n\n const { children, classNames: classNamesProp, color, size, ...rest } = props;\n const theme = useTheme();\n\n const classNames = useMemo(\n () => mergeClassNames(chipClassNames, theme.Chip, classNamesProp),\n [theme.Chip, classNamesProp],\n );\n\n const values = useMemo<\n [[typeof ChipContext, ContextValue<ChipItemProps, HTMLDivElement>]]\n >(\n () => [[ChipContext, { classNames, color, size }]],\n [classNames, color, size],\n );\n\n return (\n <TagGroup {...rest} ref={ref} className={classNames?.group}>\n <Provider values={values}>{children}</Provider>\n </TagGroup>\n );\n});\n"],"names":["ChipItem","RACTextContext","ChipGroup"],"mappings":"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"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
var chipClassNames = { list: "chip_chipClassNames_list__1t8hj09j", container: "chip_chipClassNames_container__1t8hj09k", chip: "chip_chipClassNames_chip__1t8hj09l", label: "chip_chipClassNames_label__1t8hj09m", remove: "chip_chipClassNames_remove__1t8hj09n" };
|
|
3
|
-
var chipColorVars = { background: "var(--background__1t8hj091)", border: "var(--border__1t8hj092)", color: "var(--color__1t8hj093)" };
|
|
4
|
-
var chipContainer = "chip_chipContainer__1t8hj090";
|
|
5
|
-
var chipSpaceVars = { list: { gap: "var(--list-gap__1t8hj094)" }, chip: { gap: "var(--chip-gap__1t8hj095)", x: "var(--chip-x__1t8hj096)", y: "var(--chip-y__1t8hj097)" } };
|
|
6
|
-
var chipStateVars = { color: "var(--color__1t8hj098)", size: "var(--size__1t8hj099)", allowsRemoving: "var(--allowsRemoving__1t8hj09a)", selectionBehavior: "var(--selectionBehavior__1t8hj09b)", selectionMode: "var(--selectionMode__1t8hj09c)", isDisabled: "var(--isDisabled__1t8hj09d)", isFocused: "var(--isFocused__1t8hj09e)", isFocusVisible: "var(--isFocusVisible__1t8hj09f)", isHovered: "var(--isHovered__1t8hj09g)", isPressed: "var(--isPressed__1t8hj09h)", isSelected: "var(--isSelected__1t8hj09i)" };
|
|
7
|
-
|
|
8
|
-
export { chipClassNames, chipColorVars, chipContainer, chipSpaceVars, chipStateVars };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chip.vanilla.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
export { Chip, ChipContext, ChipGroup, ChipGroupContext, ChipItem, ChipList, } from './chip';
|
|
2
|
-
export { chipClassNames, chipColorVars, chipSpaceVars, chipStateVars, chipContainer, } from './chip.css';
|
|
3
|
-
export { type ChipClassNames, type ChipColors, type ChipGroupProps, type ChipItemProps, type ChipListProps, type ChipMapping, type ChipProps, type ChipRenderProps, type ChipSizes, type ChipState, } from './types';
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import type { PropsWithChildren } from 'react';
|
|
2
|
-
import type { TagGroupProps, TagListProps, TagProps, TagRenderProps } from 'react-aria-components';
|
|
3
|
-
import type { AsType, OmitProtectedProps, RenderPropsChildren } from '../../types';
|
|
4
|
-
import type { ButtonProps } from '../button/types';
|
|
5
|
-
export type ChipClassNames = Partial<{
|
|
6
|
-
group: string;
|
|
7
|
-
list: string;
|
|
8
|
-
container: string;
|
|
9
|
-
chip: string;
|
|
10
|
-
label: string;
|
|
11
|
-
remove: string;
|
|
12
|
-
}>;
|
|
13
|
-
export type ChipColors = 'primary' | 'secondary' | 'tertiary' | 'info' | 'advisory' | 'affirmative' | 'serious' | 'critical';
|
|
14
|
-
export type ChipSizes = 'sm' | 'lg';
|
|
15
|
-
export type ChipRenderProps = AsType<TagRenderProps>;
|
|
16
|
-
export type ChipMapping = {
|
|
17
|
-
font: Partial<Record<ChipSizes, string>>;
|
|
18
|
-
remove: Partial<Record<ChipSizes, OmitProtectedProps<ButtonProps>>>;
|
|
19
|
-
};
|
|
20
|
-
export type BaseChipProps = {
|
|
21
|
-
children?: RenderPropsChildren<ChipRenderProps>;
|
|
22
|
-
classNames?: ChipClassNames;
|
|
23
|
-
color?: ChipColors;
|
|
24
|
-
mapping?: Partial<ChipMapping>;
|
|
25
|
-
size?: ChipSizes;
|
|
26
|
-
};
|
|
27
|
-
export type ChipState = ChipRenderProps & Required<Pick<BaseChipProps, 'color' | 'size'>>;
|
|
28
|
-
export type ChipProps = PropsWithChildren<Omit<BaseChipProps, 'children'>>;
|
|
29
|
-
export type ChipItemProps = Omit<TagProps, 'children' | 'className' | 'style'> & BaseChipProps;
|
|
30
|
-
export type ChipListProps<T> = Omit<TagListProps<T>, 'className' | 'style'> & Pick<BaseChipProps, 'classNames'>;
|
|
31
|
-
export type ChipGroupProps = Omit<TagGroupProps, 'className' | 'style'> & Omit<BaseChipProps, 'children'>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type Context } from 'react';
|
|
2
|
-
import type { CollectionRenderer } from 'react-aria-components';
|
|
3
|
-
import type { Collection, Node } from 'react-stately';
|
|
4
|
-
import { type MergeProviderProps } from '../merge-provider';
|
|
5
|
-
/**
|
|
6
|
-
* Replace the default collection renderer to allow for injection of
|
|
7
|
-
* context props for multiple composed components. Also enables use of
|
|
8
|
-
* Section as wrapper of list items at the top level as a styleable
|
|
9
|
-
* element within the RAC container
|
|
10
|
-
*/
|
|
11
|
-
export declare function createCollectionRenderer<C extends {
|
|
12
|
-
readonly collection: Collection<Node<unknown>>;
|
|
13
|
-
}, V extends MergeProviderProps['values']>(context: Context<C>, values: V): CollectionRenderer;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useContext } from 'react';
|
|
3
|
-
import { useCollectionRender } from '../../hooks/use-collection-render/use-collection-render.js';
|
|
4
|
-
import { MergeProvider } from '../merge-provider/merge-provider.js';
|
|
5
|
-
|
|
6
|
-
function createCollectionRenderer(context, values) {
|
|
7
|
-
return {
|
|
8
|
-
// biome-ignore lint/style/useNamingConvention: intentional
|
|
9
|
-
CollectionRoot: ({ renderDropIndicator }) => jsx(MergeProvider, { values, children: useCollectionRender(useContext(context)?.collection, null, renderDropIndicator) }),
|
|
10
|
-
// biome-ignore lint/style/useNamingConvention: intentional
|
|
11
|
-
CollectionBranch: ({ collection, parent, renderDropIndicator }) => jsx(MergeProvider, { values, children: useCollectionRender(collection, parent, renderDropIndicator) })
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export { createCollectionRenderer };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"collection.js","sources":["../../../src/components/collection/collection.tsx"],"sourcesContent":["import { useContext, type Context } from 'react';\nimport type { CollectionRenderer } from 'react-aria-components';\nimport type { Collection, Node } from 'react-stately';\nimport { useCollectionRender } from '../../hooks';\nimport { MergeProvider, type MergeProviderProps } from '../merge-provider';\n\n/**\n * Replace the default collection renderer to allow for injection of\n * context props for multiple composed components. Also enables use of\n * Section as wrapper of list items at the top level as a styleable\n * element within the RAC container\n */\nexport function createCollectionRenderer<\n C extends { readonly collection: Collection<Node<unknown>> },\n V extends MergeProviderProps['values'],\n>(context: Context<C>, values: V): CollectionRenderer {\n return {\n // biome-ignore lint/style/useNamingConvention: intentional\n CollectionRoot: ({ renderDropIndicator }) => (\n <MergeProvider values={values}>\n {useCollectionRender(\n useContext(context)?.collection,\n null,\n renderDropIndicator,\n )}\n </MergeProvider>\n ),\n // biome-ignore lint/style/useNamingConvention: intentional\n CollectionBranch: ({ collection, parent, renderDropIndicator }) => (\n <MergeProvider values={values}>\n {useCollectionRender(collection, parent, renderDropIndicator)}\n </MergeProvider>\n ),\n };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYgB,SAAA,wBAAA,CAGd,SAAqB,MAA+B,EAAA;AACpD,EAAO,OAAA;AAAA;AAAA,IAEL,gBAAgB,CAAC,EAAE,qBACjB,qBAAA,GAAA,CAAC,iBAAc,MACZ,EAAA,QAAA,EAAA,mBAAA;AAAA,MACC,UAAA,CAAW,OAAO,CAAG,EAAA,UAAA;AAAA,MACrB,IAAA;AAAA,MACA,mBAAA;AAAA,KAEJ,EAAA,CAAA;AAAA;AAAA,IAGF,gBAAkB,EAAA,CAAC,EAAE,UAAA,EAAY,QAAQ,mBAAoB,EAAA,qBAC1D,GAAA,CAAA,aAAA,EAAA,EAAc,MACZ,EAAA,QAAA,EAAA,mBAAA,CAAoB,UAAY,EAAA,MAAA,EAAQ,mBAAmB,CAC9D,EAAA,CAAA;AAAA,GAEJ,CAAA;AACF;;;;"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { createCollectionRenderer } from './collection';
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { ComboBoxClassNames } from './types';
|
|
2
|
-
export declare const comboBoxContainer: string;
|
|
3
|
-
export declare const comboBoxColorVars: {
|
|
4
|
-
description: {
|
|
5
|
-
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
6
|
-
};
|
|
7
|
-
error: {
|
|
8
|
-
color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
9
|
-
};
|
|
10
|
-
};
|
|
11
|
-
export declare const comboBoxSpaceVars: {
|
|
12
|
-
x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
13
|
-
y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
14
|
-
};
|
|
15
|
-
export declare const comboBoxStateVars: {
|
|
16
|
-
size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
17
|
-
isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
18
|
-
isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
19
|
-
isOpen: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
20
|
-
isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
21
|
-
};
|
|
22
|
-
export declare const comboBoxClassNames: ComboBoxClassNames;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type ContextValue } from 'react-aria-components';
|
|
2
|
-
import type { ComboBoxMapping, ComboBoxProps } from './types';
|
|
3
|
-
export declare const ComboBoxContext: import("react").Context<ContextValue<ComboBoxProps<object>, HTMLDivElement>>;
|
|
4
|
-
export declare const ComboBox: <T extends object>(props: Omit<import("react-aria-components").ComboBoxProps<T>, "className" | "style"> & {
|
|
5
|
-
classNames?: import("./types").ComboBoxClassNames;
|
|
6
|
-
mapping?: Partial<ComboBoxMapping>;
|
|
7
|
-
size?: import("./types").ComboBoxSizes;
|
|
8
|
-
} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { createContext, forwardRef, useMemo, useCallback } from 'react';
|
|
3
|
-
import { Provider, ComboBox as ComboBox$1 } from 'react-aria-components';
|
|
4
|
-
import { useContextProps } from '../../hooks/use-context-props/use-context-props.js';
|
|
5
|
-
import { useDefaultProps } from '../../hooks/use-defaults/use-defaults.js';
|
|
6
|
-
import { inlineVars } from '../../utils/css.js';
|
|
7
|
-
import { mergeClassNames, callRenderProps } from '../../utils/props.js';
|
|
8
|
-
import { useTheme } from '../../hooks/use-theme/use-theme.js';
|
|
9
|
-
import { bodies } from '../../styles/typography.vanilla.js';
|
|
10
|
-
import { AriaLabelContext, AriaGroupContext, AriaTextContext, AriaFieldErrorContext } from '../aria/aria.js';
|
|
11
|
-
import { ButtonContext } from '../button/button.js';
|
|
12
|
-
import { InputContext } from '../input/input.js';
|
|
13
|
-
import { OptionsContext } from '../options/options.js';
|
|
14
|
-
import { comboBoxClassNames, comboBoxStateVars } from './combo-box.vanilla.js';
|
|
15
|
-
|
|
16
|
-
const defaultMapping = {
|
|
17
|
-
description: {
|
|
18
|
-
sm: bodies.xs,
|
|
19
|
-
lg: bodies.xs
|
|
20
|
-
},
|
|
21
|
-
error: {
|
|
22
|
-
sm: bodies.xs,
|
|
23
|
-
lg: bodies.xs
|
|
24
|
-
},
|
|
25
|
-
toggle: {
|
|
26
|
-
sm: { size: "sm", variant: "icon" },
|
|
27
|
-
lg: { size: "md", variant: "icon" }
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const ComboBoxContext = createContext(null);
|
|
31
|
-
const ComboBox = forwardRef(function ComboBox2(props, ref) {
|
|
32
|
-
[props, ref] = useContextProps(props, ref, ComboBoxContext);
|
|
33
|
-
props = useDefaultProps(props, "ComboBox");
|
|
34
|
-
const { children: childrenProp, classNames: classNamesProp, mapping: mappingProp, size = "lg" } = props;
|
|
35
|
-
const theme = useTheme();
|
|
36
|
-
const mapping = useMemo(() => ({
|
|
37
|
-
...defaultMapping,
|
|
38
|
-
...mappingProp
|
|
39
|
-
}), [mappingProp]);
|
|
40
|
-
const classNames = useMemo(() => mergeClassNames(comboBoxClassNames, theme.ComboBox, classNamesProp, {
|
|
41
|
-
description: mapping.description[size],
|
|
42
|
-
error: mapping.error[size]
|
|
43
|
-
}), [theme.ComboBox, classNamesProp, mapping, size]);
|
|
44
|
-
const values = useMemo(() => [
|
|
45
|
-
[
|
|
46
|
-
AriaLabelContext,
|
|
47
|
-
{
|
|
48
|
-
className: classNames?.label
|
|
49
|
-
}
|
|
50
|
-
],
|
|
51
|
-
[
|
|
52
|
-
AriaGroupContext,
|
|
53
|
-
{
|
|
54
|
-
className: classNames?.group
|
|
55
|
-
}
|
|
56
|
-
],
|
|
57
|
-
[InputContext, { classNames: classNames?.input, size }],
|
|
58
|
-
[
|
|
59
|
-
ButtonContext,
|
|
60
|
-
{
|
|
61
|
-
...mapping.toggle[size],
|
|
62
|
-
classNames: classNames?.toggle
|
|
63
|
-
}
|
|
64
|
-
],
|
|
65
|
-
[
|
|
66
|
-
AriaTextContext,
|
|
67
|
-
{
|
|
68
|
-
slots: {
|
|
69
|
-
description: { className: classNames?.description }
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
],
|
|
73
|
-
[AriaFieldErrorContext, { className: classNames?.error }],
|
|
74
|
-
[OptionsContext, { classNames: classNames?.options, size }]
|
|
75
|
-
], [classNames, mapping, size]);
|
|
76
|
-
const style = useCallback((renderProps) => inlineVars(comboBoxStateVars, {
|
|
77
|
-
...renderProps,
|
|
78
|
-
size
|
|
79
|
-
}), [size]);
|
|
80
|
-
const children = useCallback((renderProps) => jsx("div", { className: classNames?.comboBox, children: jsx(Provider, { values, children: callRenderProps(childrenProp, {
|
|
81
|
-
...renderProps,
|
|
82
|
-
defaultChildren: null
|
|
83
|
-
}) }) }), [classNames?.comboBox, values, childrenProp]);
|
|
84
|
-
return jsx(ComboBox$1, { ...props, ref, className: classNames?.container, style, children });
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
export { ComboBox, ComboBoxContext };
|