@accelint/design-system 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/components/button/button.css +55 -0
- package/dist/assets/components/checkbox/checkbox.css +73 -0
- package/dist/assets/components/chip/chip.css +62 -0
- package/dist/assets/components/combo-box/combo-box.css +66 -0
- package/dist/assets/components/dialog/dialog.css +51 -0
- package/dist/assets/components/drawer/drawer.css +135 -0
- package/dist/assets/components/group/group.css +33 -0
- package/dist/assets/components/icon/icon.css +19 -0
- package/dist/assets/components/input/input.css +29 -0
- package/dist/assets/components/menu/menu.css +83 -0
- package/dist/assets/components/options/options.css +80 -0
- package/dist/assets/components/picker/picker.css +47 -0
- package/dist/assets/components/popover/popover.css +26 -0
- package/dist/assets/components/query-builder/query-builder.css +129 -0
- package/dist/assets/components/radio/radio.css +67 -0
- package/dist/assets/components/search-field/search-field.css +62 -0
- package/dist/assets/components/select/select.css +33 -0
- package/dist/assets/components/switch/switch.css +62 -0
- package/dist/assets/components/tabs/tabs.css +144 -0
- package/dist/assets/components/textarea/textarea.css +32 -0
- package/dist/assets/components/tooltip/tooltip.css +54 -0
- package/dist/assets/components/tree/tree.css +157 -0
- package/dist/assets/hooks/use-theme/use-theme.css +6 -0
- package/dist/assets/src/components/button/button.css.ts.vanilla-9uttMYGm.css +55 -0
- package/dist/assets/src/components/checkbox/checkbox.css.ts.vanilla-Bewmypyn.css +73 -0
- package/dist/assets/src/components/chip/chip.css.ts.vanilla-CsGhxrlu.css +62 -0
- package/dist/assets/src/components/combo-box/combo-box.css.ts.vanilla-BNEPKjPm.css +66 -0
- package/dist/assets/src/components/dialog/dialog.css.ts.vanilla-CG0m-NJD.css +51 -0
- package/dist/assets/src/components/drawer/drawer.css.ts.vanilla-DEfHnoNS.css +135 -0
- package/dist/assets/src/components/group/group.css.ts.vanilla-DR69xgQy.css +33 -0
- package/dist/assets/src/components/icon/icon.css.ts.vanilla-CoUAfp2F.css +19 -0
- package/dist/assets/src/components/input/input.css.ts.vanilla-DoK5h9SX.css +29 -0
- package/dist/assets/src/components/menu/menu.css.ts.vanilla-CSnDqc5E.css +83 -0
- package/dist/assets/src/components/options/options.css.ts.vanilla-ngVt12W4.css +80 -0
- package/dist/assets/src/components/picker/picker.css.ts.vanilla-Fe0YXv-c.css +47 -0
- package/dist/assets/src/components/popover/popover.css.ts.vanilla-C5YGwwVD.css +26 -0
- package/dist/assets/src/components/query-builder/query-builder.css.ts.vanilla-B3P9cbCv.css +129 -0
- package/dist/assets/src/components/radio/radio.css.ts.vanilla-gi-KedQc.css +67 -0
- package/dist/assets/src/components/search-field/search-field.css.ts.vanilla-B_JL53f8.css +62 -0
- package/dist/assets/src/components/select/select.css.ts.vanilla-C94A60jf.css +33 -0
- package/dist/assets/src/components/switch/switch.css.ts.vanilla-DkQwtRa6.css +62 -0
- package/dist/assets/src/components/tabs/tabs.css.ts.vanilla-BygIflpl.css +144 -0
- package/dist/assets/src/components/textarea/textarea.css.ts.vanilla-Ba6E5HFc.css +32 -0
- package/dist/assets/src/components/tooltip/tooltip.css.ts.vanilla-BntxAlwN.css +54 -0
- package/dist/assets/src/components/tree/tree.css.ts.vanilla-SLmhk0zZ.css +157 -0
- package/dist/assets/src/hooks/use-theme/use-theme.css.ts.vanilla-zkVHnGkP.css +6 -0
- package/dist/assets/src/styles/layers.css.ts.vanilla-B2GUgnOF.css +21 -0
- package/dist/assets/src/styles/reset.css.ts.vanilla-C8PShXm0.css +31 -0
- package/dist/assets/src/styles/space.css.ts.vanilla-Md6Whc4G.css +18 -0
- package/dist/assets/src/styles/surfaces.css.ts.vanilla-Ckztx7VT.css +24 -0
- package/dist/assets/src/styles/theme.css.ts.vanilla-aDPSIzBK.css +208 -0
- package/dist/assets/src/styles/typography.css.ts.vanilla-DRT9H7rd.css +150 -0
- package/dist/assets/styles/layers.css +21 -0
- package/dist/assets/styles/reset.css +31 -0
- package/dist/assets/styles/space.css +18 -0
- package/dist/assets/styles/surfaces.css +24 -0
- package/dist/assets/styles/theme.css +208 -0
- package/dist/assets/styles/typography.css +150 -0
- package/dist/components/aria/aria.d.ts +19 -0
- package/dist/components/aria/aria.js +36 -0
- package/dist/components/aria/aria.js.map +1 -0
- package/dist/components/aria/index.d.ts +1 -0
- package/dist/components/button/button.css.d.ts +33 -0
- package/dist/components/button/button.d.ts +39 -0
- package/dist/components/button/button.js +71 -0
- package/dist/components/button/button.js.map +1 -0
- package/dist/components/button/button.vanilla.js +8 -0
- package/dist/components/button/button.vanilla.js.map +1 -0
- package/dist/components/button/index.d.ts +3 -0
- package/dist/components/button/types.d.ts +28 -0
- package/dist/components/checkbox/checkbox.css.d.ts +35 -0
- package/dist/components/checkbox/checkbox.d.ts +21 -0
- package/dist/components/checkbox/checkbox.js +68 -0
- package/dist/components/checkbox/checkbox.js.map +1 -0
- package/dist/components/checkbox/checkbox.vanilla.js +9 -0
- package/dist/components/checkbox/checkbox.vanilla.js.map +1 -0
- package/dist/components/checkbox/index.d.ts +3 -0
- package/dist/components/checkbox/types.d.ts +38 -0
- package/dist/components/chip/chip.css.d.ts +31 -0
- package/dist/components/chip/chip.d.ts +30 -0
- package/dist/components/chip/chip.js +106 -0
- package/dist/components/chip/chip.js.map +1 -0
- package/dist/components/chip/chip.vanilla.js +8 -0
- package/dist/components/chip/chip.vanilla.js.map +1 -0
- package/dist/components/chip/index.d.ts +3 -0
- package/dist/components/chip/types.d.ts +31 -0
- package/dist/components/collection/collection.d.ts +13 -0
- package/dist/components/collection/collection.js +15 -0
- package/dist/components/collection/collection.js.map +1 -0
- package/dist/components/collection/index.d.ts +1 -0
- package/dist/components/combo-box/combo-box.css.d.ts +22 -0
- package/dist/components/combo-box/combo-box.d.ts +8 -0
- package/dist/components/combo-box/combo-box.js +87 -0
- package/dist/components/combo-box/combo-box.js.map +1 -0
- package/dist/components/combo-box/combo-box.vanilla.js +8 -0
- package/dist/components/combo-box/combo-box.vanilla.js.map +1 -0
- package/dist/components/combo-box/index.d.ts +3 -0
- package/dist/components/combo-box/types.d.ts +32 -0
- package/dist/components/dialog/dialog.css.d.ts +34 -0
- package/dist/components/dialog/dialog.d.ts +18 -0
- package/dist/components/dialog/dialog.js +146 -0
- package/dist/components/dialog/dialog.js.map +1 -0
- package/dist/components/dialog/dialog.vanilla.js +8 -0
- package/dist/components/dialog/dialog.vanilla.js.map +1 -0
- package/dist/components/dialog/index.d.ts +3 -0
- package/dist/components/dialog/types.d.ts +48 -0
- package/dist/components/drawer/drawer.css.d.ts +33 -0
- package/dist/components/drawer/drawer.d.ts +13 -0
- package/dist/components/drawer/drawer.js +199 -0
- package/dist/components/drawer/drawer.js.map +1 -0
- package/dist/components/drawer/drawer.vanilla.js +10 -0
- package/dist/components/drawer/drawer.vanilla.js.map +1 -0
- package/dist/components/drawer/index.d.ts +3 -0
- package/dist/components/drawer/types.d.ts +71 -0
- package/dist/components/element/element.d.ts +11 -0
- package/dist/components/element/element.js +21 -0
- package/dist/components/element/element.js.map +1 -0
- package/dist/components/element/index.d.ts +2 -0
- package/dist/components/element/types.d.ts +21 -0
- package/dist/components/group/group.css.d.ts +14 -0
- package/dist/components/group/group.d.ts +10 -0
- package/dist/components/group/group.js +44 -0
- package/dist/components/group/group.js.map +1 -0
- package/dist/components/group/group.vanilla.js +7 -0
- package/dist/components/group/group.vanilla.js.map +1 -0
- package/dist/components/group/index.d.ts +3 -0
- package/dist/components/group/types.d.ts +35 -0
- package/dist/components/icon/icon.css.d.ts +18 -0
- package/dist/components/icon/icon.d.ts +12 -0
- package/dist/components/icon/icon.js +26 -0
- package/dist/components/icon/icon.js.map +1 -0
- package/dist/components/icon/icon.vanilla.js +8 -0
- package/dist/components/icon/icon.vanilla.js.map +1 -0
- package/dist/components/icon/index.d.ts +3 -0
- package/dist/components/icon/types.d.ts +13 -0
- package/dist/components/index.d.ts +26 -0
- package/dist/components/input/index.d.ts +3 -0
- package/dist/components/input/input.css.d.ts +29 -0
- package/dist/components/input/input.d.ts +8 -0
- package/dist/components/input/input.js +93 -0
- package/dist/components/input/input.js.map +1 -0
- package/dist/components/input/input.vanilla.js +8 -0
- package/dist/components/input/input.vanilla.js.map +1 -0
- package/dist/components/input/types.d.ts +44 -0
- package/dist/components/menu/index.d.ts +3 -0
- package/dist/components/menu/menu.css.d.ts +71 -0
- package/dist/components/menu/menu.d.ts +24 -0
- package/dist/components/menu/menu.js +155 -0
- package/dist/components/menu/menu.js.map +1 -0
- package/dist/components/menu/menu.vanilla.js +8 -0
- package/dist/components/menu/menu.vanilla.js.map +1 -0
- package/dist/components/menu/types.d.ts +48 -0
- package/dist/components/merge-provider/index.d.ts +2 -0
- package/dist/components/merge-provider/merge-provider.d.ts +14 -0
- package/dist/components/merge-provider/merge-provider.js +40 -0
- package/dist/components/merge-provider/merge-provider.js.map +1 -0
- package/dist/components/merge-provider/types.d.ts +5 -0
- package/dist/components/options/index.d.ts +3 -0
- package/dist/components/options/options.css.d.ts +75 -0
- package/dist/components/options/options.d.ts +20 -0
- package/dist/components/options/options.js +152 -0
- package/dist/components/options/options.js.map +1 -0
- package/dist/components/options/options.vanilla.js +10 -0
- package/dist/components/options/options.vanilla.js.map +1 -0
- package/dist/components/options/types.d.ts +49 -0
- package/dist/components/picker/index.d.ts +3 -0
- package/dist/components/picker/picker.css.d.ts +32 -0
- package/dist/components/picker/picker.d.ts +18 -0
- package/dist/components/picker/picker.js +46 -0
- package/dist/components/picker/picker.js.map +1 -0
- package/dist/components/picker/picker.stories.css.d.ts +3 -0
- package/dist/components/picker/picker.vanilla.js +9 -0
- package/dist/components/picker/picker.vanilla.js.map +1 -0
- package/dist/components/picker/types.d.ts +28 -0
- package/dist/components/popover/index.d.ts +3 -0
- package/dist/components/popover/popover.css.d.ts +31 -0
- package/dist/components/popover/popover.d.ts +8 -0
- package/dist/components/popover/popover.js +110 -0
- package/dist/components/popover/popover.js.map +1 -0
- package/dist/components/popover/popover.vanilla.js +7 -0
- package/dist/components/popover/popover.vanilla.js.map +1 -0
- package/dist/components/popover/types.d.ts +32 -0
- package/dist/components/query-builder/action-element.d.ts +2 -0
- package/dist/components/query-builder/action-element.js +12 -0
- package/dist/components/query-builder/action-element.js.map +1 -0
- package/dist/components/query-builder/constants.d.ts +4 -0
- package/dist/components/query-builder/constants.js +20 -0
- package/dist/components/query-builder/constants.js.map +1 -0
- package/dist/components/query-builder/dataset-sample.d.ts +91 -0
- package/dist/components/query-builder/group.d.ts +5 -0
- package/dist/components/query-builder/group.js +87 -0
- package/dist/components/query-builder/group.js.map +1 -0
- package/dist/components/query-builder/index.d.ts +5 -0
- package/dist/components/query-builder/query-builder.css.d.ts +91 -0
- package/dist/components/query-builder/query-builder.d.ts +2 -0
- package/dist/components/query-builder/query-builder.js +129 -0
- package/dist/components/query-builder/query-builder.js.map +1 -0
- package/dist/components/query-builder/query-builder.vanilla.js +10 -0
- package/dist/components/query-builder/query-builder.vanilla.js.map +1 -0
- package/dist/components/query-builder/rule.d.ts +3 -0
- package/dist/components/query-builder/rule.js +112 -0
- package/dist/components/query-builder/rule.js.map +1 -0
- package/dist/components/query-builder/types.d.ts +128 -0
- package/dist/components/query-builder/utils.d.ts +29 -0
- package/dist/components/query-builder/utils.js +22 -0
- package/dist/components/query-builder/utils.js.map +1 -0
- package/dist/components/query-builder/value-editor.d.ts +4 -0
- package/dist/components/query-builder/value-editor.js +74 -0
- package/dist/components/query-builder/value-editor.js.map +1 -0
- package/dist/components/query-builder/value-selector.d.ts +2 -0
- package/dist/components/query-builder/value-selector.js +28 -0
- package/dist/components/query-builder/value-selector.js.map +1 -0
- package/dist/components/radio/index.d.ts +3 -0
- package/dist/components/radio/radio.css.d.ts +34 -0
- package/dist/components/radio/radio.d.ts +16 -0
- package/dist/components/radio/radio.js +63 -0
- package/dist/components/radio/radio.js.map +1 -0
- package/dist/components/radio/radio.vanilla.js +8 -0
- package/dist/components/radio/radio.vanilla.js.map +1 -0
- package/dist/components/radio/types.d.ts +29 -0
- package/dist/components/search-field/index.d.ts +3 -0
- package/dist/components/search-field/search-field.css.d.ts +16 -0
- package/dist/components/search-field/search-field.d.ts +9 -0
- package/dist/components/search-field/search-field.js +60 -0
- package/dist/components/search-field/search-field.js.map +1 -0
- package/dist/components/search-field/search-field.vanilla.js +7 -0
- package/dist/components/search-field/search-field.vanilla.js.map +1 -0
- package/dist/components/search-field/types.d.ts +29 -0
- package/dist/components/select/index.d.ts +3 -0
- package/dist/components/select/select.css.d.ts +25 -0
- package/dist/components/select/select.d.ts +8 -0
- package/dist/components/select/select.js +80 -0
- package/dist/components/select/select.js.map +1 -0
- package/dist/components/select/select.vanilla.js +8 -0
- package/dist/components/select/select.vanilla.js.map +1 -0
- package/dist/components/select/types.d.ts +30 -0
- package/dist/components/switch/index.d.ts +3 -0
- package/dist/components/switch/switch.css.d.ts +25 -0
- package/dist/components/switch/switch.d.ts +4 -0
- package/dist/components/switch/switch.js +34 -0
- package/dist/components/switch/switch.js.map +1 -0
- package/dist/components/switch/switch.vanilla.js +8 -0
- package/dist/components/switch/switch.vanilla.js.map +1 -0
- package/dist/components/switch/types.d.ts +17 -0
- package/dist/components/tabs/index.d.ts +3 -0
- package/dist/components/tabs/tabs.css.d.ts +49 -0
- package/dist/components/tabs/tabs.d.ts +68 -0
- package/dist/components/tabs/tabs.js +108 -0
- package/dist/components/tabs/tabs.js.map +1 -0
- package/dist/components/tabs/tabs.vanilla.js +11 -0
- package/dist/components/tabs/tabs.vanilla.js.map +1 -0
- package/dist/components/tabs/types.d.ts +82 -0
- package/dist/components/textarea/index.d.ts +3 -0
- package/dist/components/textarea/textarea.css.d.ts +31 -0
- package/dist/components/textarea/textarea.d.ts +14 -0
- package/dist/components/textarea/textarea.js +86 -0
- package/dist/components/textarea/textarea.js.map +1 -0
- package/dist/components/textarea/textarea.vanilla.js +8 -0
- package/dist/components/textarea/textarea.vanilla.js.map +1 -0
- package/dist/components/textarea/types.d.ts +39 -0
- package/dist/components/tooltip/index.d.ts +3 -0
- package/dist/components/tooltip/tooltip.css.d.ts +23 -0
- package/dist/components/tooltip/tooltip.d.ts +23 -0
- package/dist/components/tooltip/tooltip.js +69 -0
- package/dist/components/tooltip/tooltip.js.map +1 -0
- package/dist/components/tooltip/tooltip.vanilla.js +8 -0
- package/dist/components/tooltip/tooltip.vanilla.js.map +1 -0
- package/dist/components/tooltip/types.d.ts +39 -0
- package/dist/components/tree/index.d.ts +3 -0
- package/dist/components/tree/tree.css.d.ts +73 -0
- package/dist/components/tree/tree.d.ts +5 -0
- package/dist/components/tree/tree.js +337 -0
- package/dist/components/tree/tree.js.map +1 -0
- package/dist/components/tree/tree.vanilla.js +11 -0
- package/dist/components/tree/tree.vanilla.js.map +1 -0
- package/dist/components/tree/types.d.ts +114 -0
- package/dist/components/tree/utils.d.ts +8 -0
- package/dist/components/tree/utils.js +75 -0
- package/dist/components/tree/utils.js.map +1 -0
- package/dist/hooks/index.d.ts +8 -0
- package/dist/hooks/use-collection-render/index.d.ts +1 -0
- package/dist/hooks/use-collection-render/use-collection-render.d.ts +9 -0
- package/dist/hooks/use-collection-render/use-collection-render.js +20 -0
- package/dist/hooks/use-collection-render/use-collection-render.js.map +1 -0
- package/dist/hooks/use-context-props/index.d.ts +1 -0
- package/dist/hooks/use-context-props/use-context-props.d.ts +7 -0
- package/dist/hooks/use-context-props/use-context-props.js +15 -0
- package/dist/hooks/use-context-props/use-context-props.js.map +1 -0
- package/dist/hooks/use-defaults/index.d.ts +2 -0
- package/dist/hooks/use-defaults/types.d.ts +67 -0
- package/dist/hooks/use-defaults/use-defaults.d.ts +56 -0
- package/dist/hooks/use-defaults/use-defaults.js +21 -0
- package/dist/hooks/use-defaults/use-defaults.js.map +1 -0
- package/dist/hooks/use-propagating-press/index.d.ts +1 -0
- package/dist/hooks/use-propagating-press/use-propagating-press.d.ts +9 -0
- package/dist/hooks/use-propagating-press/use-propagating-press.js +14 -0
- package/dist/hooks/use-propagating-press/use-propagating-press.js.map +1 -0
- package/dist/hooks/use-slot/index.d.ts +1 -0
- package/dist/hooks/use-slot/use-slot.d.ts +13 -0
- package/dist/hooks/use-slot/use-slot.js +18 -0
- package/dist/hooks/use-slot/use-slot.js.map +1 -0
- package/dist/hooks/use-theme/index.d.ts +2 -0
- package/dist/hooks/use-theme/types.d.ts +86 -0
- package/dist/hooks/use-theme/use-theme.css.d.ts +1 -0
- package/dist/hooks/use-theme/use-theme.d.ts +13 -0
- package/dist/hooks/use-theme/use-theme.js +64 -0
- package/dist/hooks/use-theme/use-theme.js.map +1 -0
- package/dist/hooks/use-theme/use-theme.vanilla.js +4 -0
- package/dist/hooks/use-theme/use-theme.vanilla.js.map +1 -0
- package/dist/hooks/use-tree/index.d.ts +1 -0
- package/dist/hooks/use-tree/use-tree.d.ts +2 -0
- package/dist/hooks/use-tree/use-tree.js +217 -0
- package/dist/hooks/use-tree/use-tree.js.map +1 -0
- package/dist/hooks/use-tree/utils.d.ts +6 -0
- package/dist/hooks/use-tree/utils.js +77 -0
- package/dist/hooks/use-tree/utils.js.map +1 -0
- package/dist/hooks/use-update-effect/index.d.ts +1 -0
- package/dist/hooks/use-update-effect/use-update-effect.d.ts +1 -0
- package/dist/hooks/use-update-effect/use-update-effect.js +20 -0
- package/dist/hooks/use-update-effect/use-update-effect.js.map +1 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.js +66 -0
- package/dist/index.js.map +1 -0
- package/dist/ladle/actions.d.ts +1 -0
- package/dist/ladle/index.d.ts +1 -0
- package/dist/styles/index.d.ts +6 -0
- package/dist/styles/layers.css.d.ts +16 -0
- package/dist/styles/layers.vanilla.js +4 -0
- package/dist/styles/layers.vanilla.js.map +1 -0
- package/dist/styles/reset.css.d.ts +1 -0
- package/dist/styles/space.css.d.ts +1 -0
- package/dist/styles/surfaces.css.d.ts +4 -0
- package/dist/styles/surfaces.vanilla.js +4 -0
- package/dist/styles/surfaces.vanilla.js.map +1 -0
- package/dist/styles/theme.css.d.ts +334 -0
- package/dist/styles/theme.vanilla.js +31 -0
- package/dist/styles/theme.vanilla.js.map +1 -0
- package/dist/styles/typography.css.d.ts +17 -0
- package/dist/styles/typography.vanilla.js +8 -0
- package/dist/styles/typography.vanilla.js.map +1 -0
- package/dist/styles.css +2014 -0
- package/dist/test/setup.d.ts +1 -0
- package/dist/types/deckgl.d.ts +1 -0
- package/dist/types/generic.d.ts +3 -0
- package/dist/types/index.d.ts +6 -0
- package/dist/types/props.d.ts +4 -0
- package/dist/types/react-aria.d.ts +91 -0
- package/dist/types/use-tree.d.ts +52 -0
- package/dist/types/vanilla-extract.d.ts +15 -0
- package/dist/utils/css.d.ts +139 -0
- package/dist/utils/css.js +145 -0
- package/dist/utils/css.js.map +1 -0
- package/dist/utils/events.d.ts +10 -0
- package/dist/utils/events.js +5 -0
- package/dist/utils/events.js.map +1 -0
- package/dist/utils/index.d.ts +4 -0
- package/dist/utils/props.d.ts +29 -0
- package/dist/utils/props.js +108 -0
- package/dist/utils/props.js.map +1 -0
- package/dist/utils/validators.d.ts +49 -0
- package/dist/utils/validators.js +37 -0
- package/dist/utils/validators.js.map +1 -0
- package/dist/vanilla.d.ts +27 -0
- package/dist/vanilla.js +27 -0
- package/package.json +5 -5
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type RGBA = [number, number, number, number] & number[];
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export type { RGBA } from './deckgl';
|
|
2
|
+
export type { AsType } from './generic';
|
|
3
|
+
export type { ClassNames, OmitProtectedProps } from './props';
|
|
4
|
+
export type { ChildrenRenderProps, ClassNameRenderProps, ProviderValue, ProviderValues, RenderProps, RenderPropsChildren, RenderPropsClassName, RenderPropsStyle, StylePropRenderProps, StyleRenderProps, } from './react-aria';
|
|
5
|
+
export type { TreeActions, TreeGroupNode, TreeItemNode, TreeNode, TreeNodes, UseTreeOptions, UseTreeResult, } from './use-tree';
|
|
6
|
+
export type { Contract, CssVarFunction, MapLeafNodes, PartialMapLeafNodes, Primitive, } from './vanilla-extract';
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import type { Context, CSSProperties, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Re-export due to not being exported by library
|
|
4
|
+
*/
|
|
5
|
+
export type ClassNameRenderProps<T extends object> = T & {
|
|
6
|
+
defaultClassName?: string;
|
|
7
|
+
};
|
|
8
|
+
export type RenderPropsClassName<T extends object> = string | ((values: ClassNameRenderProps<T>) => string);
|
|
9
|
+
export type StylePropRenderProps<T extends object> = T & {
|
|
10
|
+
defaultStyle?: CSSProperties;
|
|
11
|
+
};
|
|
12
|
+
export type RenderPropsStyle<T extends object> = CSSProperties | ((values: StylePropRenderProps<T>) => CSSProperties);
|
|
13
|
+
export type ChildrenRenderProps<T extends object> = T & {
|
|
14
|
+
defaultChildren?: ReactNode;
|
|
15
|
+
};
|
|
16
|
+
export type RenderPropsChildren<T extends object> = ReactNode | ((values: ChildrenRenderProps<T>) => ReactNode);
|
|
17
|
+
export type StyleRenderProps<T extends object> = {
|
|
18
|
+
/** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
|
|
19
|
+
className?: RenderPropsClassName<T>;
|
|
20
|
+
/** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. */
|
|
21
|
+
style?: RenderPropsStyle<T>;
|
|
22
|
+
};
|
|
23
|
+
export type RenderProps<T extends object> = StyleRenderProps<T> & {
|
|
24
|
+
/** The children of the component. A function may be provided to alter the children based on component state. */
|
|
25
|
+
children?: RenderPropsChildren<T>;
|
|
26
|
+
};
|
|
27
|
+
export type ProviderValue<T> = [Context<T>, T];
|
|
28
|
+
export type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> = [ProviderValue<A>] | [ProviderValue<A>, ProviderValue<B>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>] | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>] | [
|
|
29
|
+
ProviderValue<A>,
|
|
30
|
+
ProviderValue<B>,
|
|
31
|
+
ProviderValue<C>,
|
|
32
|
+
ProviderValue<D>,
|
|
33
|
+
ProviderValue<E>
|
|
34
|
+
] | [
|
|
35
|
+
ProviderValue<A>,
|
|
36
|
+
ProviderValue<B>,
|
|
37
|
+
ProviderValue<C>,
|
|
38
|
+
ProviderValue<D>,
|
|
39
|
+
ProviderValue<E>,
|
|
40
|
+
ProviderValue<F>
|
|
41
|
+
] | [
|
|
42
|
+
ProviderValue<A>,
|
|
43
|
+
ProviderValue<B>,
|
|
44
|
+
ProviderValue<C>,
|
|
45
|
+
ProviderValue<D>,
|
|
46
|
+
ProviderValue<E>,
|
|
47
|
+
ProviderValue<F>,
|
|
48
|
+
ProviderValue<G>
|
|
49
|
+
] | [
|
|
50
|
+
ProviderValue<A>,
|
|
51
|
+
ProviderValue<B>,
|
|
52
|
+
ProviderValue<C>,
|
|
53
|
+
ProviderValue<D>,
|
|
54
|
+
ProviderValue<E>,
|
|
55
|
+
ProviderValue<F>,
|
|
56
|
+
ProviderValue<G>,
|
|
57
|
+
ProviderValue<H>
|
|
58
|
+
] | [
|
|
59
|
+
ProviderValue<A>,
|
|
60
|
+
ProviderValue<B>,
|
|
61
|
+
ProviderValue<C>,
|
|
62
|
+
ProviderValue<D>,
|
|
63
|
+
ProviderValue<E>,
|
|
64
|
+
ProviderValue<F>,
|
|
65
|
+
ProviderValue<G>,
|
|
66
|
+
ProviderValue<H>,
|
|
67
|
+
ProviderValue<I>
|
|
68
|
+
] | [
|
|
69
|
+
ProviderValue<A>,
|
|
70
|
+
ProviderValue<B>,
|
|
71
|
+
ProviderValue<C>,
|
|
72
|
+
ProviderValue<D>,
|
|
73
|
+
ProviderValue<E>,
|
|
74
|
+
ProviderValue<F>,
|
|
75
|
+
ProviderValue<G>,
|
|
76
|
+
ProviderValue<H>,
|
|
77
|
+
ProviderValue<I>,
|
|
78
|
+
ProviderValue<J>
|
|
79
|
+
] | [
|
|
80
|
+
ProviderValue<A>,
|
|
81
|
+
ProviderValue<B>,
|
|
82
|
+
ProviderValue<C>,
|
|
83
|
+
ProviderValue<D>,
|
|
84
|
+
ProviderValue<E>,
|
|
85
|
+
ProviderValue<F>,
|
|
86
|
+
ProviderValue<G>,
|
|
87
|
+
ProviderValue<H>,
|
|
88
|
+
ProviderValue<I>,
|
|
89
|
+
ProviderValue<J>,
|
|
90
|
+
ProviderValue<K>
|
|
91
|
+
];
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import type { Key } from 'react-aria';
|
|
2
|
+
import type { Selection, SelectionMode, TreeData } from 'react-stately';
|
|
3
|
+
export type TreeItemNode<T> = {
|
|
4
|
+
id: Key;
|
|
5
|
+
label: string;
|
|
6
|
+
type?: string;
|
|
7
|
+
value?: T;
|
|
8
|
+
isViewable?: boolean;
|
|
9
|
+
isVisible?: boolean;
|
|
10
|
+
};
|
|
11
|
+
export type TreeGroupNode<T> = TreeItemNode<T> & {
|
|
12
|
+
nodes: TreeNodes<T>[];
|
|
13
|
+
types?: string[];
|
|
14
|
+
isExpanded?: boolean;
|
|
15
|
+
};
|
|
16
|
+
export type TreeNodes<T> = TreeGroupNode<T> | TreeItemNode<T>;
|
|
17
|
+
export type TreeNode<T, N extends TreeNodes<T> = TreeNodes<T>> = {
|
|
18
|
+
key: Key;
|
|
19
|
+
parentKey: Key;
|
|
20
|
+
value: N;
|
|
21
|
+
children: TreeNode<T, N>[];
|
|
22
|
+
};
|
|
23
|
+
export type TreeActions<T> = Omit<TreeData<TreeNodes<T>>, 'items' | 'selectedKeys' | 'update'> & {
|
|
24
|
+
revertIsExpanded: () => void;
|
|
25
|
+
toggleIsExpanded: (selection?: Selection, isExpanded?: boolean, isRevertable?: boolean) => void;
|
|
26
|
+
toggleIsSelected: (selection?: Selection, isSelected?: boolean) => void;
|
|
27
|
+
toggleIsViewable: (selection?: Selection, isViewable?: boolean) => void;
|
|
28
|
+
update: (key: Key, node: Partial<TreeNodes<T>>) => void;
|
|
29
|
+
};
|
|
30
|
+
export type UseTreeOptions<T> = {
|
|
31
|
+
allowsExpansion?: boolean;
|
|
32
|
+
allowsVisibility?: boolean;
|
|
33
|
+
nodes: TreeNodes<T>[];
|
|
34
|
+
selectionMode?: SelectionMode;
|
|
35
|
+
onSelectionChange?: (keys: Selection) => void;
|
|
36
|
+
/**
|
|
37
|
+
* Due to being triggered during the render cycle, this event
|
|
38
|
+
* handler should not be tied to any state change updates
|
|
39
|
+
*/
|
|
40
|
+
onUpdate?: (nodes: TreeNodes<T>[]) => void;
|
|
41
|
+
};
|
|
42
|
+
export type UseTreeResult<T> = Required<Omit<UseTreeOptions<T>, 'nodes' | 'onSelectionChange' | 'onUpdate'>> & Pick<TreeData<TreeNodes<T>>, 'selectedKeys'> & {
|
|
43
|
+
lookup: Record<Key, TreeNode<T>>;
|
|
44
|
+
tree: TreeNode<T>;
|
|
45
|
+
/**
|
|
46
|
+
* DO NOT DESTRUCTURE THIS PROPERTY
|
|
47
|
+
*
|
|
48
|
+
* The underlying useTreeData hook relies on "this" within certain methods
|
|
49
|
+
* and destructuring the actions will cause errors to be thrown
|
|
50
|
+
*/
|
|
51
|
+
actions: TreeActions<T>;
|
|
52
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { createVar } from '@vanilla-extract/css';
|
|
2
|
+
/**
|
|
3
|
+
* Re-export due to not being exported by library
|
|
4
|
+
*/
|
|
5
|
+
export type CssVarFunction = ReturnType<typeof createVar>;
|
|
6
|
+
export type Contract = {
|
|
7
|
+
[key: string]: CssVarFunction | null | Contract;
|
|
8
|
+
};
|
|
9
|
+
export type Primitive = string | boolean | number | null | undefined;
|
|
10
|
+
export type MapLeafNodes<Obj, LeafType> = {
|
|
11
|
+
[Prop in keyof Obj]: Obj[Prop] extends Primitive ? LeafType : Obj[Prop] extends Record<string | number, unknown> ? MapLeafNodes<Obj[Prop], LeafType> : never;
|
|
12
|
+
};
|
|
13
|
+
export type PartialMapLeafNodes<Obj, LeafType> = {
|
|
14
|
+
[Prop in keyof Obj]?: Obj[Prop] extends Primitive ? LeafType : Obj[Prop] extends Record<string | number, unknown> ? PartialMapLeafNodes<Obj[Prop], LeafType> : never;
|
|
15
|
+
};
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import type { GlobalStyleRule, StyleRule } from '@vanilla-extract/css';
|
|
2
|
+
import type { Contract, CssVarFunction, MapLeafNodes, PartialMapLeafNodes, Primitive, RGBA } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Parse out CSS var name from CSS var implementation
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* unwrapCssVar('var(--foo)')
|
|
8
|
+
* // returns '--foo'
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* unwrapCssVar('var(--foo, blue)')
|
|
12
|
+
* // returns '--foo'
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* unwrapCssVar('var(--foo, var(--bar))')
|
|
16
|
+
* // returns '--foo'
|
|
17
|
+
*/
|
|
18
|
+
export declare function unwrapCssVar(cssVar: string): string;
|
|
19
|
+
type FulfilledContract<T> = MapLeafNodes<T, null | number | string | RGBA>;
|
|
20
|
+
/**
|
|
21
|
+
* Convert contract to nested object of identical shape with computed CSS values
|
|
22
|
+
* Pixel values are converted to numbers
|
|
23
|
+
* RGB(A) values are converted to DeckGL compatible tuples
|
|
24
|
+
* All other values are left unconverted
|
|
25
|
+
*/
|
|
26
|
+
export declare function computeContract<T extends Contract>(contract: T, css: CSSStyleDeclaration): FulfilledContract<T>;
|
|
27
|
+
/**
|
|
28
|
+
* Convert potentially nested contract and values pair into flattened CSS var record
|
|
29
|
+
* The contract provides a lookup for CSS vars
|
|
30
|
+
* The values are expected to partially match the contract shapeForm
|
|
31
|
+
*/
|
|
32
|
+
export declare function reduceContract<T extends Contract, U>(contract: T, values: PartialMapLeafNodes<T, U>): Record<`var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`, U>;
|
|
33
|
+
/**
|
|
34
|
+
* Reduce contract and values into Vanilla Extract friendly CSS vars
|
|
35
|
+
*/
|
|
36
|
+
export declare function assignPartialVars<T extends Contract>(contract: T, values: PartialMapLeafNodes<T, Primitive>): {
|
|
37
|
+
[k: string]: string;
|
|
38
|
+
};
|
|
39
|
+
type CssVarValues = {
|
|
40
|
+
[key: string]: CssVarValues | Primitive;
|
|
41
|
+
};
|
|
42
|
+
type CssVarValueOptions<T extends object> = {
|
|
43
|
+
[P in keyof T]?: T[P] extends object ? CssVarValueOptions<T[P]> : T[P] | T[P][];
|
|
44
|
+
};
|
|
45
|
+
type Operators = 'and' | 'or';
|
|
46
|
+
type ContainerQueryOptions = {
|
|
47
|
+
container?: string;
|
|
48
|
+
operator?: Operators;
|
|
49
|
+
maxHeight?: string;
|
|
50
|
+
minHeight?: string;
|
|
51
|
+
maxWidth?: string;
|
|
52
|
+
minWidth?: string;
|
|
53
|
+
};
|
|
54
|
+
type ContainerQueryValues<T extends CssVarValues> = CssVarValueOptions<T> & ContainerQueryOptions;
|
|
55
|
+
type MultiContainerQuery<T extends CssVarValues> = {
|
|
56
|
+
operator?: Operators;
|
|
57
|
+
groups: ContainerQueryValues<T>[];
|
|
58
|
+
};
|
|
59
|
+
/**
|
|
60
|
+
* Create simple or complex container queries with and/or operators.
|
|
61
|
+
*
|
|
62
|
+
* To provide type safety and ease of use, this function accepts a generic and a contract
|
|
63
|
+
* The generic type defines the possible values for the parameters defined within the contract
|
|
64
|
+
*
|
|
65
|
+
* Ex: containerQuery<{ foo: boolean }>({ foo: 'var(--foo)' }, { foo: true })
|
|
66
|
+
*
|
|
67
|
+
* By providing the type constraint and contract, the query parameters will have intellisense
|
|
68
|
+
* on which parameters exist and what their possible values can be
|
|
69
|
+
*
|
|
70
|
+
* @example
|
|
71
|
+
* containerQuery(contract, { a: true })
|
|
72
|
+
* // returns (a: true)
|
|
73
|
+
*
|
|
74
|
+
* @example
|
|
75
|
+
* containerQuery(contract, { a: true, b: true })
|
|
76
|
+
* // returns (a: true) and (b: true)
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* containerQuery(contract, { operator: 'or', a: true, b: true })
|
|
80
|
+
* // returns (a: true) or (b: true)
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
83
|
+
* containerQuery(contract, { groups: [{ a: true }, { b: true }] })
|
|
84
|
+
* // returns (a: true) or (b: true)
|
|
85
|
+
*
|
|
86
|
+
* @example
|
|
87
|
+
* containerQuery(contract, { a: ['foo', 'bar'] })
|
|
88
|
+
* // returns (a: 'foo') or (a: 'bar')
|
|
89
|
+
*
|
|
90
|
+
* @example
|
|
91
|
+
* containerQuery(contract, { a: ['foo', 'bar'], b: true })
|
|
92
|
+
* // returns ((a: 'foo') or (a: 'bar')) and (b: true)
|
|
93
|
+
*
|
|
94
|
+
* @example
|
|
95
|
+
* containerQuery(contract, { operator: 'or', a: ['foo', 'bar'], b: true })
|
|
96
|
+
* // returns ((a: 'foo') or (a: 'bar')) or (b: true)
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* containerQuery(contract, { groups: [{ a: true, b: true }, { c: true, d: true }] })
|
|
100
|
+
* // returns ((a: true) and (b: true)) or ((c: true) and (d: true))
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { c: true, d: true }] })
|
|
104
|
+
* // returns ((a: true) or (b: true)) and ((c: true) and (d: true))
|
|
105
|
+
*
|
|
106
|
+
* @example
|
|
107
|
+
* containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { operator: 'or', c: true, d: true }] })
|
|
108
|
+
* // returns ((a: true) or (b: true)) and ((c: true) or (d: true))
|
|
109
|
+
*/
|
|
110
|
+
export declare function containerQuery<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, query: ContainerQueryValues<T> | MultiContainerQuery<T>): string;
|
|
111
|
+
type ContainerStyle = Exclude<StyleRule['@container'], undefined>[string];
|
|
112
|
+
type ContainerQuery<T extends CssVarValues> = {
|
|
113
|
+
query: ContainerQueryValues<T> | MultiContainerQuery<T>;
|
|
114
|
+
};
|
|
115
|
+
type ContainerQueries<T extends CssVarValues> = ContainerStyle & ContainerQuery<T>;
|
|
116
|
+
type GlobalContainerStyle = Exclude<GlobalStyleRule['@container'], undefined>[string];
|
|
117
|
+
type GlobalContainerQueries<T extends CssVarValues> = GlobalContainerStyle & ContainerQuery<T>;
|
|
118
|
+
/**
|
|
119
|
+
* Bulk container query creation based on the same contract
|
|
120
|
+
*/
|
|
121
|
+
export declare function containerQueries<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, ...styles: ContainerQueries<T>[]): Record<string, ContainerStyle>;
|
|
122
|
+
export declare function containerQueries<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, ...styles: GlobalContainerQueries<T>[]): Record<string, GlobalContainerStyle>;
|
|
123
|
+
type VarsOnlyContainerQuery<T extends CssVarValues> = Required<Pick<ContainerQueries<T>, 'query' | 'vars'>>;
|
|
124
|
+
type QueryOptionalVarsOnlyContainerQuery<T extends CssVarValues> = Partial<Pick<VarsOnlyContainerQuery<T>, 'query'>> & Pick<VarsOnlyContainerQuery<T>, 'vars'>;
|
|
125
|
+
/**
|
|
126
|
+
* Helper for establishing global theme variables with the restriction that
|
|
127
|
+
* only variables may be set (and are required). All other styles must be
|
|
128
|
+
* established using alternative utils
|
|
129
|
+
*
|
|
130
|
+
* The first style rule has an optional query. If the query is missing, the vars
|
|
131
|
+
* are set outside of a container query
|
|
132
|
+
*/
|
|
133
|
+
export declare function applyThemeVars<T extends CssVarValues = CssVarValues>(contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>, styles: [QueryOptionalVarsOnlyContainerQuery<T>, ...VarsOnlyContainerQuery<T>[]] | VarsOnlyContainerQuery<T>[], layer?: string): StyleRule;
|
|
134
|
+
/**
|
|
135
|
+
* Runtime creation of inline style CSS vars that enable CSS container queries
|
|
136
|
+
*/
|
|
137
|
+
export declare function inlineVars(vars: Record<string, Primitive>): Record<string, string>;
|
|
138
|
+
export declare function inlineVars<T extends Contract>(contract: T, values: PartialMapLeafNodes<T, Primitive>): Record<string, string>;
|
|
139
|
+
export {};
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
import { assignInlineVars } from '@vanilla-extract/dynamic';
|
|
2
|
+
import { kebabCase } from 'lodash';
|
|
3
|
+
import { layers } from '../styles/layers.vanilla.js';
|
|
4
|
+
import { pixelValueAsStringValidator, rgbaAsStringValidator } from './validators.js';
|
|
5
|
+
|
|
6
|
+
function unwrapCssVar(cssVar) {
|
|
7
|
+
return cssVar.replace(/^var\((--[\w-]+)[^\w-]+.*/i, "$1");
|
|
8
|
+
}
|
|
9
|
+
function computeContract(contract, css) {
|
|
10
|
+
return Object.entries(contract).reduce((acc, [key, cssVarOrContract]) => {
|
|
11
|
+
if (cssVarOrContract == null) {
|
|
12
|
+
acc[key] = null;
|
|
13
|
+
return acc;
|
|
14
|
+
}
|
|
15
|
+
if (typeof cssVarOrContract === "object") {
|
|
16
|
+
acc[key] = computeContract(cssVarOrContract, css);
|
|
17
|
+
return acc;
|
|
18
|
+
}
|
|
19
|
+
const cssVar = unwrapCssVar(cssVarOrContract);
|
|
20
|
+
const value = css.getPropertyValue(cssVar);
|
|
21
|
+
const pixel = pixelValueAsStringValidator.safeParse(value);
|
|
22
|
+
if (pixel.success) {
|
|
23
|
+
acc[key] = pixel.data;
|
|
24
|
+
return acc;
|
|
25
|
+
}
|
|
26
|
+
const rgba = rgbaAsStringValidator.safeParse(value);
|
|
27
|
+
if (rgba.success) {
|
|
28
|
+
acc[key] = rgba.data;
|
|
29
|
+
return acc;
|
|
30
|
+
}
|
|
31
|
+
acc[key] = value ?? null;
|
|
32
|
+
return acc;
|
|
33
|
+
}, {});
|
|
34
|
+
}
|
|
35
|
+
function reduceContract(contract, values) {
|
|
36
|
+
const nodes = [
|
|
37
|
+
{ contract, values }
|
|
38
|
+
];
|
|
39
|
+
const vars = {};
|
|
40
|
+
for (let node of nodes) {
|
|
41
|
+
Object.entries(node.values).forEach(([key, value]) => {
|
|
42
|
+
const cssVarOrSubContract = node.contract[key];
|
|
43
|
+
if (cssVarOrSubContract == null || value == null) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
if (typeof cssVarOrSubContract === "string" && (typeof value !== "object" || Array.isArray(value))) {
|
|
47
|
+
vars[cssVarOrSubContract] = value;
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
if (typeof cssVarOrSubContract === "object" && typeof value === "object") {
|
|
51
|
+
nodes.push({ contract: cssVarOrSubContract, values: value });
|
|
52
|
+
}
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
return vars;
|
|
56
|
+
}
|
|
57
|
+
function assignPartialVars(contract, values) {
|
|
58
|
+
return Object.fromEntries(Object.entries(reduceContract(contract, values)).map(([key, value]) => [
|
|
59
|
+
key,
|
|
60
|
+
`${value}`
|
|
61
|
+
]));
|
|
62
|
+
}
|
|
63
|
+
function processConditions(contract, values) {
|
|
64
|
+
return Object.entries(reduceContract({
|
|
65
|
+
...contract,
|
|
66
|
+
maxHeight: "maxHeight",
|
|
67
|
+
// NOTE: Passthrough these values not as CSS vars
|
|
68
|
+
minHeight: "minHeight",
|
|
69
|
+
maxWidth: "maxWidth",
|
|
70
|
+
minWidth: "minWidth"
|
|
71
|
+
}, values)).reduce((acc, [key, value]) => {
|
|
72
|
+
if (key === "container" || key === "operator" || value == null) {
|
|
73
|
+
return acc;
|
|
74
|
+
}
|
|
75
|
+
const isStyle = !/^(?:max|min)(?:Height|Width)$/.test(key);
|
|
76
|
+
const prefix = isStyle ? "style" : "";
|
|
77
|
+
const prop = isStyle ? unwrapCssVar(key) : kebabCase(key);
|
|
78
|
+
if (Array.isArray(value)) {
|
|
79
|
+
const group = value.reduce((ac, val) => {
|
|
80
|
+
if (val != null) {
|
|
81
|
+
ac.push(`${prefix}(${prop}: ${val})`);
|
|
82
|
+
}
|
|
83
|
+
return ac;
|
|
84
|
+
}, []);
|
|
85
|
+
acc.push(`(${group.join(" or ")})`);
|
|
86
|
+
} else {
|
|
87
|
+
acc.push(`${prefix}(${prop}: ${value})`);
|
|
88
|
+
}
|
|
89
|
+
return acc;
|
|
90
|
+
}, []);
|
|
91
|
+
}
|
|
92
|
+
function isMultiQuery(value) {
|
|
93
|
+
return value != null && typeof value === "object" && (!("operator" in value) || "operator" in value && (value.operator === "and" || value.operator === "or")) && "groups" in value && Array.isArray(value.groups) && value.groups.every((group) => group != null && typeof group === "object");
|
|
94
|
+
}
|
|
95
|
+
function containerQuery(contract, query) {
|
|
96
|
+
const isMultiGroup = isMultiQuery(query);
|
|
97
|
+
const groups = isMultiGroup ? query.groups : [query];
|
|
98
|
+
const groupsOperator = ` ${(isMultiGroup ? query.operator : null) ?? "or"} `;
|
|
99
|
+
return groups.map((group, index) => {
|
|
100
|
+
const operator = ` ${group.operator ?? "and"} `;
|
|
101
|
+
let container = group.container ?? "";
|
|
102
|
+
if (index) {
|
|
103
|
+
container = "";
|
|
104
|
+
}
|
|
105
|
+
const conditions = processConditions(contract, group);
|
|
106
|
+
const isMultiCondition = groups.length > 1 && conditions.length > 1;
|
|
107
|
+
return [
|
|
108
|
+
container,
|
|
109
|
+
container && " ",
|
|
110
|
+
isMultiCondition ? "(" : "",
|
|
111
|
+
conditions.join(operator),
|
|
112
|
+
isMultiCondition ? ")" : ""
|
|
113
|
+
].join("");
|
|
114
|
+
}).join(groupsOperator);
|
|
115
|
+
}
|
|
116
|
+
function containerQueries(contract, ...styles) {
|
|
117
|
+
return Object.fromEntries(styles.map(({ query, ...style }) => [
|
|
118
|
+
containerQuery(contract, query),
|
|
119
|
+
style
|
|
120
|
+
]));
|
|
121
|
+
}
|
|
122
|
+
function applyThemeVars(contract, styles, layer = layers.variables.l1) {
|
|
123
|
+
const [style, ...rest] = styles;
|
|
124
|
+
const stylesWithQueries = !style.query ? rest : styles;
|
|
125
|
+
return {
|
|
126
|
+
"@layer": {
|
|
127
|
+
[layer]: {
|
|
128
|
+
...!style.query ? { vars: style.vars } : {},
|
|
129
|
+
...stylesWithQueries.length ? {
|
|
130
|
+
"@container": containerQueries(contract, ...stylesWithQueries)
|
|
131
|
+
} : {}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
function inlineVars(varsOrContract, values) {
|
|
137
|
+
return assignInlineVars(!values ? Object.entries(varsOrContract).reduce((acc, [key, value]) => {
|
|
138
|
+
if (value != null) {
|
|
139
|
+
acc[key] = `${value}`;
|
|
140
|
+
}
|
|
141
|
+
return acc;
|
|
142
|
+
}, {}) : assignPartialVars(varsOrContract, values));
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
export { applyThemeVars, assignPartialVars, computeContract, containerQueries, containerQuery, inlineVars, reduceContract, unwrapCssVar };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"css.js","sources":["../../src/utils/css.ts"],"sourcesContent":["import { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { kebabCase } from 'lodash';\nimport { layers } from '../styles';\nimport type { GlobalStyleRule, StyleRule } from '@vanilla-extract/css';\nimport type {\n Contract,\n CssVarFunction,\n MapLeafNodes,\n PartialMapLeafNodes,\n Primitive,\n RGBA,\n} from '../types';\nimport {\n pixelValueAsStringValidator,\n rgbaAsStringValidator,\n} from './validators';\n\n/**\n * Parse out CSS var name from CSS var implementation\n *\n * @example\n * unwrapCssVar('var(--foo)')\n * // returns '--foo'\n *\n * @example\n * unwrapCssVar('var(--foo, blue)')\n * // returns '--foo'\n *\n * @example\n * unwrapCssVar('var(--foo, var(--bar))')\n * // returns '--foo'\n */\nexport function unwrapCssVar(cssVar: string) {\n return cssVar.replace(/^var\\((--[\\w-]+)[^\\w-]+.*/i, '$1');\n}\n\ntype FulfilledContract<T> = MapLeafNodes<T, null | number | string | RGBA>;\n\n// TODO: remove if possible\n// NOTE: had to create a generic version not bound to type of T because of type issues around setting values on accumulator\ntype GenericFulfilledContract = {\n [key: string]: GenericFulfilledContract | null | number | string | RGBA;\n};\n\n/**\n * Convert contract to nested object of identical shape with computed CSS values\n * Pixel values are converted to numbers\n * RGB(A) values are converted to DeckGL compatible tuples\n * All other values are left unconverted\n */\nexport function computeContract<T extends Contract>(\n contract: T,\n css: CSSStyleDeclaration,\n): FulfilledContract<T> {\n return Object.entries(contract).reduce<GenericFulfilledContract>(\n (acc, [key, cssVarOrContract]) => {\n if (cssVarOrContract == null) {\n acc[key] = null;\n\n return acc;\n }\n\n if (typeof cssVarOrContract === 'object') {\n acc[key] = computeContract(cssVarOrContract, css);\n\n return acc;\n }\n\n const cssVar = unwrapCssVar(cssVarOrContract);\n const value = css.getPropertyValue(cssVar);\n const pixel = pixelValueAsStringValidator.safeParse(value);\n\n if (pixel.success) {\n acc[key] = pixel.data;\n\n return acc;\n }\n\n const rgba = rgbaAsStringValidator.safeParse(value);\n\n if (rgba.success) {\n acc[key] = rgba.data;\n\n return acc;\n }\n\n acc[key] = value ?? null;\n\n return acc;\n },\n {},\n ) as FulfilledContract<T>;\n}\n\n/**\n * Convert potentially nested contract and values pair into flattened CSS var record\n * The contract provides a lookup for CSS vars\n * The values are expected to partially match the contract shapeForm\n */\nexport function reduceContract<T extends Contract, U>(\n contract: T,\n values: PartialMapLeafNodes<T, U>,\n) {\n const nodes: { contract: Contract; values: PartialMapLeafNodes<T, U> }[] = [\n { contract, values },\n ];\n\n const vars: Record<CssVarFunction, U> = {};\n\n for (let node of nodes) {\n Object.entries(node.values).forEach(([key, value]: [string, U]) => {\n const cssVarOrSubContract = node.contract[key];\n\n if (cssVarOrSubContract == null || value == null) {\n return;\n }\n\n if (\n typeof cssVarOrSubContract === 'string' &&\n (typeof value !== 'object' || Array.isArray(value))\n ) {\n vars[cssVarOrSubContract] = value;\n\n return;\n }\n\n if (\n typeof cssVarOrSubContract === 'object' &&\n typeof value === 'object'\n ) {\n nodes.push({ contract: cssVarOrSubContract, values: value });\n }\n });\n }\n\n return vars;\n}\n\n/**\n * Reduce contract and values into Vanilla Extract friendly CSS vars\n */\nexport function assignPartialVars<T extends Contract>(\n contract: T,\n values: PartialMapLeafNodes<T, Primitive>,\n) {\n return Object.fromEntries(\n Object.entries(reduceContract(contract, values)).map(([key, value]) => [\n key,\n `${value}`,\n ]),\n );\n}\n\ntype CssVarValues = {\n [key: string]: CssVarValues | Primitive;\n};\n\ntype CssVarValueOptions<T extends object> = {\n [P in keyof T]?: T[P] extends object\n ? CssVarValueOptions<T[P]>\n : T[P] | T[P][];\n};\n\ntype Operators = 'and' | 'or';\n\ntype ContainerQueryOptions = {\n container?: string;\n operator?: Operators;\n maxHeight?: string;\n minHeight?: string;\n maxWidth?: string;\n minWidth?: string;\n};\n\ntype ContainerQueryValues<T extends CssVarValues> = CssVarValueOptions<T> &\n ContainerQueryOptions;\n\ntype MultiContainerQuery<T extends CssVarValues> = {\n operator?: Operators;\n groups: ContainerQueryValues<T>[];\n};\n\n/**\n * Handle creation of query groups based on options and values\n * Internal to containerQueries\n */\nfunction processConditions<T extends CssVarValues>(\n contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n values: ContainerQueryValues<T>,\n) {\n return Object.entries(\n reduceContract(\n {\n ...contract,\n maxHeight: 'maxHeight', // NOTE: Passthrough these values not as CSS vars\n minHeight: 'minHeight',\n maxWidth: 'maxWidth',\n minWidth: 'minWidth',\n },\n values as PartialMapLeafNodes<\n MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n ContainerQueryValues<T>[string]\n >,\n ),\n ).reduce<string[]>((acc, [key, value]) => {\n if (key === 'container' || key === 'operator' || value == null) {\n return acc;\n }\n\n const isStyle = !/^(?:max|min)(?:Height|Width)$/.test(key);\n const prefix = isStyle ? 'style' : '';\n const prop = isStyle ? unwrapCssVar(key) : kebabCase(key);\n\n if (Array.isArray(value)) {\n const group = value.reduce<string[]>((ac, val) => {\n if (val != null) {\n ac.push(`${prefix}(${prop}: ${val})`);\n }\n\n return ac;\n }, []);\n\n acc.push(`(${group.join(' or ')})`);\n } else {\n acc.push(`${prefix}(${prop}: ${value})`);\n }\n\n return acc;\n }, []);\n}\n\nfunction isMultiQuery<T extends CssVarValues>(\n value: unknown,\n): value is MultiContainerQuery<T> {\n return (\n value != null &&\n typeof value === 'object' &&\n (!('operator' in value) ||\n ('operator' in value &&\n (value.operator === 'and' || value.operator === 'or'))) &&\n 'groups' in value &&\n Array.isArray(value.groups) &&\n value.groups.every((group) => group != null && typeof group === 'object')\n );\n}\n\n/**\n * Create simple or complex container queries with and/or operators.\n *\n * To provide type safety and ease of use, this function accepts a generic and a contract\n * The generic type defines the possible values for the parameters defined within the contract\n *\n * Ex: containerQuery<{ foo: boolean }>({ foo: 'var(--foo)' }, { foo: true })\n *\n * By providing the type constraint and contract, the query parameters will have intellisense\n * on which parameters exist and what their possible values can be\n *\n * @example\n * containerQuery(contract, { a: true })\n * // returns (a: true)\n *\n * @example\n * containerQuery(contract, { a: true, b: true })\n * // returns (a: true) and (b: true)\n *\n * @example\n * containerQuery(contract, { operator: 'or', a: true, b: true })\n * // returns (a: true) or (b: true)\n *\n * @example\n * containerQuery(contract, { groups: [{ a: true }, { b: true }] })\n * // returns (a: true) or (b: true)\n *\n * @example\n * containerQuery(contract, { a: ['foo', 'bar'] })\n * // returns (a: 'foo') or (a: 'bar')\n *\n * @example\n * containerQuery(contract, { a: ['foo', 'bar'], b: true })\n * // returns ((a: 'foo') or (a: 'bar')) and (b: true)\n *\n * @example\n * containerQuery(contract, { operator: 'or', a: ['foo', 'bar'], b: true })\n * // returns ((a: 'foo') or (a: 'bar')) or (b: true)\n *\n * @example\n * containerQuery(contract, { groups: [{ a: true, b: true }, { c: true, d: true }] })\n * // returns ((a: true) and (b: true)) or ((c: true) and (d: true))\n *\n * @example\n * containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { c: true, d: true }] })\n * // returns ((a: true) or (b: true)) and ((c: true) and (d: true))\n *\n * @example\n * containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { operator: 'or', c: true, d: true }] })\n * // returns ((a: true) or (b: true)) and ((c: true) or (d: true))\n */\nexport function containerQuery<T extends CssVarValues = CssVarValues>(\n contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n query: ContainerQueryValues<T> | MultiContainerQuery<T>,\n) {\n const isMultiGroup = isMultiQuery<T>(query);\n const groups = isMultiGroup ? query.groups : [query];\n const groupsOperator = ` ${(isMultiGroup ? query.operator : null) ?? 'or'} `;\n\n return groups\n .map((group, index) => {\n const operator = ` ${group.operator ?? 'and'} `;\n\n let container = group.container ?? '';\n\n if (index) {\n // Multiple container specifiers is not yet supported: https://github.com/w3c/csswg-drafts/issues/6876\n container = '';\n }\n\n const conditions = processConditions(contract, group);\n const isMultiCondition = groups.length > 1 && conditions.length > 1;\n\n return [\n container,\n container && ' ',\n isMultiCondition ? '(' : '',\n conditions.join(operator),\n isMultiCondition ? ')' : '',\n ].join('');\n })\n .join(groupsOperator);\n}\n\ntype ContainerStyle = Exclude<StyleRule['@container'], undefined>[string];\n\ntype ContainerQuery<T extends CssVarValues> = {\n query: ContainerQueryValues<T> | MultiContainerQuery<T>;\n};\n\ntype ContainerQueries<T extends CssVarValues> = ContainerStyle &\n ContainerQuery<T>;\n\ntype GlobalContainerStyle = Exclude<\n GlobalStyleRule['@container'],\n undefined\n>[string];\n\ntype GlobalContainerQueries<T extends CssVarValues> = GlobalContainerStyle &\n ContainerQuery<T>;\n\n/**\n * Bulk container query creation based on the same contract\n */\nexport function containerQueries<T extends CssVarValues = CssVarValues>(\n contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n ...styles: ContainerQueries<T>[]\n): Record<string, ContainerStyle>;\n\nexport function containerQueries<T extends CssVarValues = CssVarValues>(\n contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n ...styles: GlobalContainerQueries<T>[]\n): Record<string, GlobalContainerStyle>;\n\nexport function containerQueries<T extends CssVarValues = CssVarValues>(\n contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n ...styles: ContainerQueries<T>[] | GlobalContainerQueries<T>[]\n): Record<string, ContainerStyle | GlobalContainerStyle> {\n return Object.fromEntries(\n styles.map(({ query, ...style }) => [\n containerQuery<T>(contract, query),\n style,\n ]),\n );\n}\n\ntype VarsOnlyContainerQuery<T extends CssVarValues> = Required<\n Pick<ContainerQueries<T>, 'query' | 'vars'>\n>;\n\ntype QueryOptionalVarsOnlyContainerQuery<T extends CssVarValues> = Partial<\n Pick<VarsOnlyContainerQuery<T>, 'query'>\n> &\n Pick<VarsOnlyContainerQuery<T>, 'vars'>;\n\n/**\n * Helper for establishing global theme variables with the restriction that\n * only variables may be set (and are required). All other styles must be\n * established using alternative utils\n *\n * The first style rule has an optional query. If the query is missing, the vars\n * are set outside of a container query\n */\nexport function applyThemeVars<T extends CssVarValues = CssVarValues>(\n contract: MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CssVarFunction>,\n styles:\n | [QueryOptionalVarsOnlyContainerQuery<T>, ...VarsOnlyContainerQuery<T>[]]\n | VarsOnlyContainerQuery<T>[],\n layer = layers.variables.l1,\n): StyleRule {\n const [style, ...rest] = styles;\n\n const stylesWithQueries = (\n !style.query ? rest : styles\n ) as VarsOnlyContainerQuery<T>[];\n\n return {\n '@layer': {\n [layer]: {\n ...(!style.query ? { vars: style.vars } : {}),\n ...(stylesWithQueries.length\n ? {\n '@container': containerQueries<T>(contract, ...stylesWithQueries),\n }\n : {}),\n },\n },\n };\n}\n\n/**\n * Runtime creation of inline style CSS vars that enable CSS container queries\n */\nexport function inlineVars(\n vars: Record<string, Primitive>,\n): Record<string, string>;\n\nexport function inlineVars<T extends Contract>(\n contract: T,\n values: PartialMapLeafNodes<T, Primitive>,\n): Record<string, string>;\n\nexport function inlineVars<T extends Contract>(\n varsOrContract: Record<string, Primitive> | T,\n values?: PartialMapLeafNodes<T, Primitive>,\n): Record<string, string> {\n return assignInlineVars(\n !values\n ? Object.entries(varsOrContract).reduce<Record<string, string>>(\n (acc, [key, value]) => {\n if (value != null) {\n acc[key] = `${value}`;\n }\n\n return acc;\n },\n {},\n )\n : assignPartialVars(varsOrContract as T, values),\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
type ContinuableEvent = {
|
|
2
|
+
continuePropagation: () => void;
|
|
3
|
+
};
|
|
4
|
+
/**
|
|
5
|
+
* The default behavior of events within React Aria is to stop progagation
|
|
6
|
+
*
|
|
7
|
+
* To reenable propagation, continuePropagation must be called
|
|
8
|
+
*/
|
|
9
|
+
export declare function continuePropagation(event: ContinuableEvent): void;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"events.js","sources":["../../src/utils/events.ts"],"sourcesContent":["// Support React Aria's BaseEvent & PressEvent (and any others the might share the same interface)\ntype ContinuableEvent = {\n continuePropagation: () => void;\n};\n\n/**\n * The default behavior of events within React Aria is to stop progagation\n *\n * To reenable propagation, continuePropagation must be called\n */\nexport function continuePropagation(event: ContinuableEvent) {\n event.continuePropagation();\n}\n"],"names":[],"mappings":";AAUO,SAAS,oBAAoB,KAAyB,EAAA;AAC3D,EAAA,KAAA,CAAM,mBAAoB,EAAA,CAAA;AAC5B;;;;"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { applyThemeVars, assignPartialVars, computeContract, containerQuery, containerQueries, inlineVars, unwrapCssVar, } from './css';
|
|
2
|
+
export { continuePropagation } from './events';
|
|
3
|
+
export { callRenderProps, mergeClassNames, mergeProps, wrapRenderProps, } from './props';
|
|
4
|
+
export { alphaChannelAsNumberValidator, alphaChannelAsStringValidator, colorChannelAsNumberValidator, colorChannelAsStringValidator, pixelValueAsNumberValidator, pixelValueAsStringValidator, rgbaAsStringValidator, rgbaAsTupleValidator, } from './validators';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ClassNames, AsType } from '../types';
|
|
2
|
+
type Props<T extends object> = AsType<T> | null | undefined;
|
|
3
|
+
/**
|
|
4
|
+
* Deep merges classNames objects by concatenating class values
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* mergeClassNames({ foo: 'foo' }, { foo: 'FOO', bar: 'bar' })
|
|
8
|
+
* // returns { foo: 'foo FOO', bar: 'bar' }
|
|
9
|
+
*/
|
|
10
|
+
export declare function mergeClassNames<T extends ClassNames>(...classNamesToMerge: (T | null | undefined)[]): T | undefined;
|
|
11
|
+
/**
|
|
12
|
+
* Extends the base margeProps functionality to also merge styles and handle class/style render props
|
|
13
|
+
*/
|
|
14
|
+
export declare function mergeProps<T extends object>(...propsToMerge: Props<T>[]): T;
|
|
15
|
+
/**
|
|
16
|
+
* A helper for not having to reimplement the type check for a renderProp value being a function or not everywhere
|
|
17
|
+
*/
|
|
18
|
+
export declare function callRenderProps<T extends object, R>(value: R | ((renderProps: T) => R), values: T): R;
|
|
19
|
+
/**
|
|
20
|
+
* A helper function to pair with React Aria's render props. Typically
|
|
21
|
+
* implemented with children, className and styles
|
|
22
|
+
*
|
|
23
|
+
* Allows for the injection of additional renderProps that a component
|
|
24
|
+
* from React Aria may not already provide
|
|
25
|
+
*
|
|
26
|
+
* If the value isn't a renderProp function, then it is passed through unchanged
|
|
27
|
+
*/
|
|
28
|
+
export declare function wrapRenderProps<T extends object, U extends object, R>(value: R | ((renderProps: T & U) => R), inject?: U): R | ((renderProps: T) => R);
|
|
29
|
+
export {};
|