@jordan-mace/chaser-design-system 1.2.2 → 1.2.4
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/components/Accordion/Accordion.d.ts +2 -2
- package/dist/components/Accordion/Accordion.js +26 -91
- package/dist/components/Accordion/index.js +1 -2
- package/dist/components/Accordion/styles.css.js +65 -14
- package/dist/components/Alert/Alert.d.ts +1 -1
- package/dist/components/Alert/Alert.js +8 -28
- package/dist/components/Alert/index.js +1 -2
- package/dist/components/Alert/styles.css.js +54 -13
- package/dist/components/AspectRatio/AspectRatio.js +9 -24
- package/dist/components/AspectRatio/index.js +1 -2
- package/dist/components/Avatar/Avatar.d.ts +1 -1
- package/dist/components/Avatar/Avatar.js +10 -24
- package/dist/components/Avatar/index.js +1 -2
- package/dist/components/Avatar/styles.css.js +151 -19
- package/dist/components/Badge/Badge.d.ts +1 -1
- package/dist/components/Badge/Badge.js +8 -13
- package/dist/components/Badge/index.js +1 -2
- package/dist/components/Badge/styles.css.js +77 -23
- package/dist/components/Box/Box.js +18 -17
- package/dist/components/Box/index.js +1 -2
- package/dist/components/Box/reset.css.js +15 -3
- package/dist/components/Breadcrumb/Breadcrumb.d.ts +1 -2
- package/dist/components/Breadcrumb/Breadcrumb.js +8 -66
- package/dist/components/Breadcrumb/index.js +1 -2
- package/dist/components/Breadcrumb/styles.css.js +50 -10
- package/dist/components/Button/Button.d.ts +1 -1
- package/dist/components/Button/Button.js +8 -15
- package/dist/components/Button/index.js +1 -2
- package/dist/components/Button/styles.css.js +30 -9
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.js +8 -15
- package/dist/components/Card/index.js +1 -2
- package/dist/components/Card/styles.css.js +25 -10
- package/dist/components/Checkbox/Checkbox.js +20 -45
- package/dist/components/Checkbox/index.js +1 -2
- package/dist/components/Checkbox/styles.css.js +31 -7
- package/dist/components/Collapse/Collapse.d.ts +1 -1
- package/dist/components/Collapse/Collapse.js +40 -42
- package/dist/components/Collapse/index.js +1 -2
- package/dist/components/Collapse/styles.css.js +36 -8
- package/dist/components/Combobox/Combobox.d.ts +1 -1
- package/dist/components/Combobox/Combobox.js +62 -129
- package/dist/components/Combobox/index.js +1 -2
- package/dist/components/Combobox/styles.css.js +142 -20
- package/dist/components/Container/Container.js +9 -19
- package/dist/components/Container/index.js +1 -2
- package/dist/components/Divider/Divider.d.ts +1 -1
- package/dist/components/Divider/Divider.js +8 -14
- package/dist/components/Divider/index.js +1 -2
- package/dist/components/Divider/styles.css.js +41 -19
- package/dist/components/Drawer/Drawer.d.ts +1 -1
- package/dist/components/Drawer/Drawer.js +37 -85
- package/dist/components/Drawer/index.js +1 -2
- package/dist/components/Drawer/styles.css.js +125 -17
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +33 -88
- package/dist/components/DropdownMenu/index.js +1 -2
- package/dist/components/DropdownMenu/styles.css.d.ts +1 -1
- package/dist/components/DropdownMenu/styles.css.js +93 -22
- package/dist/components/EmptyState/EmptyState.d.ts +1 -1
- package/dist/components/EmptyState/EmptyState.js +8 -32
- package/dist/components/EmptyState/index.js +1 -2
- package/dist/components/EmptyState/styles.css.js +30 -9
- package/dist/components/FileUpload/FileUpload.d.ts +1 -1
- package/dist/components/FileUpload/FileUpload.js +63 -175
- package/dist/components/FileUpload/index.js +1 -2
- package/dist/components/FileUpload/styles.css.js +145 -32
- package/dist/components/Form/Form.d.ts +1 -1
- package/dist/components/Form/Form.js +8 -15
- package/dist/components/Form/FormInput.d.ts +1 -1
- package/dist/components/Form/FormInput.js +9 -15
- package/dist/components/Form/index.js +2 -3
- package/dist/components/Form/styles.css.js +11 -4
- package/dist/components/Grid/Grid.js +14 -19
- package/dist/components/Grid/index.js +1 -2
- package/dist/components/Icon/Icon.d.ts +1 -1
- package/dist/components/Icon/Icon.js +12 -20
- package/dist/components/Icon/index.js +1 -2
- package/dist/components/Icon/styles.css.js +9 -3
- package/dist/components/Input/Input.d.ts +1 -1
- package/dist/components/Input/Input.js +9 -38
- package/dist/components/Input/index.js +1 -2
- package/dist/components/Input/styles.css.js +8 -4
- package/dist/components/Kbd/Kbd.d.ts +1 -1
- package/dist/components/Kbd/Kbd.js +6 -10
- package/dist/components/Kbd/index.js +1 -2
- package/dist/components/Kbd/styles.css.js +16 -5
- package/dist/components/List/List.d.ts +1 -1
- package/dist/components/List/List.js +7 -11
- package/dist/components/List/ListItem.d.ts +1 -1
- package/dist/components/List/ListItem.js +7 -11
- package/dist/components/List/index.js +2 -3
- package/dist/components/List/styles.css.js +11 -6
- package/dist/components/Modal/Modal.d.ts +1 -1
- package/dist/components/Modal/Modal.js +21 -57
- package/dist/components/Modal/index.js +1 -2
- package/dist/components/Modal/styles.css.js +92 -16
- package/dist/components/Navbar/Navbar.d.ts +1 -1
- package/dist/components/Navbar/Navbar.js +8 -16
- package/dist/components/Navbar/NavbarItem.d.ts +1 -1
- package/dist/components/Navbar/NavbarItem.js +8 -12
- package/dist/components/Navbar/index.js +2 -3
- package/dist/components/Navbar/styles.css.js +3 -4
- package/dist/components/NumberInput/NumberInput.d.ts +1 -1
- package/dist/components/NumberInput/NumberInput.js +25 -94
- package/dist/components/NumberInput/index.js +1 -2
- package/dist/components/NumberInput/styles.css.js +117 -17
- package/dist/components/Pagination/Pagination.d.ts +1 -2
- package/dist/components/Pagination/Pagination.js +34 -57
- package/dist/components/Pagination/index.js +1 -2
- package/dist/components/Pagination/styles.css.js +44 -11
- package/dist/components/Popover/Popover.d.ts +1 -1
- package/dist/components/Popover/Popover.js +43 -93
- package/dist/components/Popover/index.js +1 -2
- package/dist/components/Popover/styles.css.d.ts +2 -2
- package/dist/components/Popover/styles.css.js +185 -33
- package/dist/components/Progress/Progress.d.ts +1 -2
- package/dist/components/Progress/Progress.js +8 -54
- package/dist/components/Progress/index.js +1 -2
- package/dist/components/Progress/styles.css.js +71 -18
- package/dist/components/Radio/Radio.d.ts +2 -2
- package/dist/components/Radio/Radio.js +17 -52
- package/dist/components/Radio/index.js +1 -2
- package/dist/components/Radio/styles.css.js +42 -9
- package/dist/components/ScrollArea/ScrollArea.d.ts +1 -1
- package/dist/components/ScrollArea/ScrollArea.js +8 -18
- package/dist/components/ScrollArea/index.js +1 -2
- package/dist/components/ScrollArea/styles.css.js +25 -11
- package/dist/components/Select/Select.js +9 -35
- package/dist/components/Select/index.js +1 -2
- package/dist/components/Select/styles.css.js +82 -11
- package/dist/components/Separator/Separator.d.ts +1 -2
- package/dist/components/Separator/Separator.js +8 -13
- package/dist/components/Separator/index.js +1 -2
- package/dist/components/Separator/styles.css.js +28 -15
- package/dist/components/Skeleton/Skeleton.d.ts +1 -1
- package/dist/components/Skeleton/Skeleton.js +9 -24
- package/dist/components/Skeleton/index.js +1 -2
- package/dist/components/Skeleton/styles.css.js +56 -20
- package/dist/components/Spinner/Spinner.d.ts +1 -1
- package/dist/components/Spinner/Spinner.js +8 -14
- package/dist/components/Spinner/index.js +1 -2
- package/dist/components/Spinner/styles.css.d.ts +1 -1
- package/dist/components/Spinner/styles.css.js +55 -19
- package/dist/components/Stack/Stack.js +10 -25
- package/dist/components/Stack/index.js +1 -2
- package/dist/components/Stepper/Stepper.d.ts +1 -1
- package/dist/components/Stepper/Stepper.js +19 -64
- package/dist/components/Stepper/index.js +1 -2
- package/dist/components/Stepper/styles.css.js +104 -22
- package/dist/components/Table/Table.d.ts +7 -7
- package/dist/components/Table/Table.js +30 -56
- package/dist/components/Table/index.js +1 -2
- package/dist/components/Table/styles.css.js +49 -15
- package/dist/components/Tabs/Tabs.d.ts +4 -4
- package/dist/components/Tabs/Tabs.js +33 -52
- package/dist/components/Tabs/index.js +1 -2
- package/dist/components/Tabs/styles.css.js +100 -14
- package/dist/components/Tag/Tag.d.ts +2 -2
- package/dist/components/Tag/Tag.js +16 -38
- package/dist/components/Tag/index.js +1 -2
- package/dist/components/Tag/styles.css.d.ts +1 -1
- package/dist/components/Tag/styles.css.js +93 -14
- package/dist/components/Text/Header.d.ts +1 -1
- package/dist/components/Text/Header.js +8 -12
- package/dist/components/Text/P.d.ts +1 -1
- package/dist/components/Text/P.js +8 -12
- package/dist/components/Text/index.js +2 -3
- package/dist/components/Text/styles.css.js +13 -6
- package/dist/components/TextArea/TextArea.d.ts +1 -1
- package/dist/components/TextArea/TextArea.js +9 -38
- package/dist/components/TextArea/index.js +1 -2
- package/dist/components/TextArea/styles.css.js +10 -4
- package/dist/components/Toast/Toast.d.ts +3 -3
- package/dist/components/Toast/Toast.js +85 -144
- package/dist/components/Toast/index.js +1 -2
- package/dist/components/Toast/styles.css.d.ts +1 -1
- package/dist/components/Toast/styles.css.js +192 -32
- package/dist/components/Toggle/Toggle.d.ts +1 -1
- package/dist/components/Toggle/Toggle.js +12 -57
- package/dist/components/Toggle/index.js +1 -2
- package/dist/components/Toggle/styles.css.js +118 -24
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.js +12 -37
- package/dist/components/Tooltip/index.js +1 -2
- package/dist/components/Tooltip/styles.css.js +86 -17
- package/dist/components/VisuallyHidden/VisuallyHidden.js +7 -6
- package/dist/components/VisuallyHidden/index.js +1 -2
- package/dist/components/VisuallyHidden/styles.css.js +12 -3
- package/dist/components/index.js +47 -48
- package/dist/index.js +1 -1
- package/dist/styles/layers.css.js +3 -4
- package/dist/styles/sprinkles.css.d.ts +115 -115
- package/dist/styles/sprinkles.css.js +72 -2219
- package/dist/styles/theme.css.js +48 -38
- package/dist/styles/utils.js +7 -8
- package/package.json +12 -16
- package/src/components/Accordion/Accordion.stories.tsx +73 -0
- package/src/components/Accordion/Accordion.test.tsx +54 -0
- package/src/components/Accordion/Accordion.tsx +146 -0
- package/src/components/Accordion/index.ts +1 -0
- package/src/components/Accordion/styles.css.ts +72 -0
- package/src/components/Alert/Alert.stories.tsx +82 -0
- package/src/components/Alert/Alert.test.tsx +58 -0
- package/src/components/Alert/Alert.tsx +48 -0
- package/src/components/Alert/__screenshots__/Alert.test.tsx/Alert-renders-dismissible-alert-correctly-1-chromium-linux.png +0 -0
- package/src/components/Alert/__screenshots__/Alert.test.tsx/Alert-renders-error-alert-correctly-1-chromium-linux.png +0 -0
- package/src/components/Alert/__screenshots__/Alert.test.tsx/Alert-renders-info-alert-correctly-1-chromium-linux.png +0 -0
- package/src/components/Alert/__screenshots__/Alert.test.tsx/Alert-renders-success-alert-correctly-1-chromium-linux.png +0 -0
- package/src/components/Alert/__screenshots__/Alert.test.tsx/Alert-renders-warning-alert-correctly-1-chromium-linux.png +0 -0
- package/src/components/Alert/index.ts +1 -0
- package/src/components/Alert/styles.css.ts +58 -0
- package/src/components/AspectRatio/AspectRatio.stories.tsx +85 -0
- package/src/components/AspectRatio/AspectRatio.test.tsx +50 -0
- package/src/components/AspectRatio/AspectRatio.tsx +42 -0
- package/src/components/AspectRatio/index.ts +2 -0
- package/src/components/Avatar/Avatar.stories.tsx +82 -0
- package/src/components/Avatar/Avatar.test.tsx +45 -0
- package/src/components/Avatar/Avatar.tsx +51 -0
- package/src/components/Avatar/index.ts +1 -0
- package/src/components/Avatar/styles.css.ts +155 -0
- package/src/components/Badge/Badge.stories.tsx +141 -0
- package/src/components/Badge/Badge.test.tsx +74 -0
- package/src/components/Badge/Badge.tsx +46 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-does-not-render-children-when-dot-is-true-1.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-default-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-dot-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-dot-with-size-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-dot-with-variant-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-error-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-info-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-large-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-medium-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-small-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-span-element-with-proper-attributes-1.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-success-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/__screenshots__/Badge.test.tsx/Badge-renders-warning-badge-correctly-1-chromium-linux.png +0 -0
- package/src/components/Badge/index.ts +2 -0
- package/src/components/Badge/styles.css.ts +82 -0
- package/src/components/Box/Box.stories.tsx +183 -0
- package/src/components/Box/Box.test.tsx +63 -0
- package/src/components/Box/Box.tsx +72 -0
- package/src/components/Box/index.ts +2 -0
- package/src/components/Box/reset.css.ts +16 -0
- package/src/components/Breadcrumb/Breadcrumb.stories.tsx +55 -0
- package/src/components/Breadcrumb/Breadcrumb.test.tsx +44 -0
- package/src/components/Breadcrumb/Breadcrumb.tsx +102 -0
- package/src/components/Breadcrumb/index.ts +1 -0
- package/src/components/Breadcrumb/styles.css.ts +56 -0
- package/src/components/Button/Button.stories.tsx +60 -0
- package/src/components/Button/Button.test.tsx +26 -0
- package/src/components/Button/Button.tsx +31 -0
- package/src/components/Button/__screenshots__/Button.test.tsx/Button-renders-correctly-1-chromium-win32.png +0 -0
- package/src/components/Button/__screenshots__/Button.test.tsx/Button-renders-primary-button-correctly-1-chromium-linux.png +0 -0
- package/src/components/Button/__screenshots__/Button.test.tsx/Button-renders-primary-button-correctly-1-chromium-win32.png +0 -0
- package/src/components/Button/index.ts +1 -0
- package/src/components/Button/styles.css.ts +32 -0
- package/src/components/Card/Card.stories.tsx +85 -0
- package/src/components/Card/Card.test.tsx +43 -0
- package/src/components/Card/Card.tsx +34 -0
- package/src/components/Card/__screenshots__/Card.test.tsx/Card-renders-elevated-card-correctly-1-chromium-linux.png +0 -0
- package/src/components/Card/__screenshots__/Card.test.tsx/Card-renders-filled-card-correctly-1-chromium-linux.png +0 -0
- package/src/components/Card/__screenshots__/Card.test.tsx/Card-renders-outlined-card-correctly-1-chromium-linux.png +0 -0
- package/src/components/Card/__screenshots__/Card.test.tsx/Card-renders-with-no-padding-1-chromium-linux.png +0 -0
- package/src/components/Card/index.ts +1 -0
- package/src/components/Card/styles.css.ts +27 -0
- package/src/components/Checkbox/Checkbox.stories.tsx +61 -0
- package/src/components/Checkbox/Checkbox.test.tsx +40 -0
- package/src/components/Checkbox/Checkbox.tsx +58 -0
- package/src/components/Checkbox/index.ts +1 -0
- package/src/components/Checkbox/styles.css.ts +34 -0
- package/src/components/Collapse/Collapse.stories.tsx +63 -0
- package/src/components/Collapse/Collapse.test.tsx +24 -0
- package/src/components/Collapse/Collapse.tsx +97 -0
- package/src/components/Collapse/index.ts +2 -0
- package/src/components/Collapse/styles.css.ts +42 -0
- package/src/components/Combobox/Combobox.stories.tsx +100 -0
- package/src/components/Combobox/Combobox.test.tsx +49 -0
- package/src/components/Combobox/Combobox.tsx +266 -0
- package/src/components/Combobox/index.ts +2 -0
- package/src/components/Combobox/styles.css.ts +155 -0
- package/src/components/Container/Container.stories.tsx +69 -0
- package/src/components/Container/Container.test.tsx +42 -0
- package/src/components/Container/Container.tsx +47 -0
- package/src/components/Container/index.ts +2 -0
- package/src/components/Divider/Divider.stories.tsx +121 -0
- package/src/components/Divider/Divider.test.tsx +56 -0
- package/src/components/Divider/Divider.tsx +40 -0
- package/src/components/Divider/__screenshots__/Divider.test.tsx/Divider-applies-orientation-correctly-1.png +0 -0
- package/src/components/Divider/__screenshots__/Divider.test.tsx/Divider-renders-horizontal-divider-correctly-1-chromium-linux.png +0 -0
- package/src/components/Divider/__screenshots__/Divider.test.tsx/Divider-renders-hr-element-with-proper-attributes-1.png +0 -0
- package/src/components/Divider/__screenshots__/Divider.test.tsx/Divider-renders-large-divider-correctly-1-chromium-linux.png +0 -0
- package/src/components/Divider/__screenshots__/Divider.test.tsx/Divider-renders-medium-divider-correctly-1-chromium-linux.png +0 -0
- package/src/components/Divider/__screenshots__/Divider.test.tsx/Divider-renders-small-divider-correctly-1-chromium-linux.png +0 -0
- package/src/components/Divider/__screenshots__/Divider.test.tsx/Divider-renders-vertical-divider-correctly-1-chromium-linux.png +0 -0
- package/src/components/Divider/index.ts +2 -0
- package/src/components/Divider/styles.css.ts +45 -0
- package/src/components/Drawer/Drawer.stories.tsx +99 -0
- package/src/components/Drawer/Drawer.test.tsx +51 -0
- package/src/components/Drawer/Drawer.tsx +148 -0
- package/src/components/Drawer/index.ts +2 -0
- package/src/components/Drawer/styles.css.ts +138 -0
- package/src/components/DropdownMenu/DropdownMenu.stories.tsx +72 -0
- package/src/components/DropdownMenu/DropdownMenu.test.tsx +43 -0
- package/src/components/DropdownMenu/DropdownMenu.tsx +156 -0
- package/src/components/DropdownMenu/index.ts +2 -0
- package/src/components/DropdownMenu/styles.css.ts +102 -0
- package/src/components/EmptyState/EmptyState.stories.tsx +47 -0
- package/src/components/EmptyState/EmptyState.test.tsx +25 -0
- package/src/components/EmptyState/EmptyState.tsx +53 -0
- package/src/components/EmptyState/index.ts +2 -0
- package/src/components/EmptyState/styles.css.ts +36 -0
- package/src/components/FileUpload/FileUpload.stories.tsx +138 -0
- package/src/components/FileUpload/FileUpload.test.tsx +56 -0
- package/src/components/FileUpload/FileUpload.tsx +269 -0
- package/src/components/FileUpload/index.ts +2 -0
- package/src/components/FileUpload/styles.css.ts +164 -0
- package/src/components/Form/Form.stories.tsx +51 -0
- package/src/components/Form/Form.test.tsx +41 -0
- package/src/components/Form/Form.tsx +28 -0
- package/src/components/Form/FormInput.tsx +16 -0
- package/src/components/Form/__screenshots__/Form.test.tsx/Form-can-submit-1.png +0 -0
- package/src/components/Form/__screenshots__/Form.test.tsx/Form-renders-correctly-1-chromium-win32.png +0 -0
- package/src/components/Form/__screenshots__/Form.test.tsx/Form-renders-form-correctly-1-chromium-linux.png +0 -0
- package/src/components/Form/__screenshots__/Form.test.tsx/Form-renders-form-correctly-1-chromium-win32.png +0 -0
- package/src/components/Form/index.ts +2 -0
- package/src/components/Form/styles.css.ts +13 -0
- package/src/components/Grid/Grid.stories.tsx +134 -0
- package/src/components/Grid/Grid.test.tsx +41 -0
- package/src/components/Grid/Grid.tsx +48 -0
- package/src/components/Grid/index.ts +2 -0
- package/src/components/Icon/Icon.tsx +43 -0
- package/src/components/Icon/index.ts +1 -0
- package/src/components/Icon/styles.css.ts +11 -0
- package/src/components/Input/Input.stories.tsx +38 -0
- package/src/components/Input/Input.test.tsx +16 -0
- package/src/components/Input/Input.tsx +43 -0
- package/src/components/Input/__screenshots__/Input.test.tsx/Input-renders-correctly-with-label-1-chromium-linux.png +0 -0
- package/src/components/Input/__screenshots__/Input.test.tsx/Input-renders-correctly-with-label-1-chromium-win32.png +0 -0
- package/src/components/Input/__screenshots__/Input.test.tsx/Input-renders-correctly-without-label-1-chromium-linux.png +0 -0
- package/src/components/Input/__screenshots__/Input.test.tsx/Input-renders-correctly-without-label-1-chromium-win32.png +0 -0
- package/src/components/Input/index.ts +1 -0
- package/src/components/Input/styles.css.ts +10 -0
- package/src/components/Kbd/Kbd.stories.tsx +53 -0
- package/src/components/Kbd/Kbd.test.tsx +22 -0
- package/src/components/Kbd/Kbd.tsx +17 -0
- package/src/components/Kbd/index.ts +2 -0
- package/src/components/Kbd/styles.css.ts +18 -0
- package/src/components/List/List.test.tsx +18 -0
- package/src/components/List/List.tsx +13 -0
- package/src/components/List/ListItem.tsx +13 -0
- package/src/components/List/__screenshots__/List.test.tsx/List-renders-correctly-1-chromium-win32.png +0 -0
- package/src/components/List/__screenshots__/List.test.tsx/List-renders-list-correctly-1-chromium-linux.png +0 -0
- package/src/components/List/__screenshots__/List.test.tsx/List-renders-list-correctly-1-chromium-win32.png +0 -0
- package/src/components/List/index.ts +2 -0
- package/src/components/List/styles.css.ts +13 -0
- package/src/components/Modal/Modal.stories.tsx +202 -0
- package/src/components/Modal/Modal.test.tsx +168 -0
- package/src/components/Modal/Modal.tsx +109 -0
- package/src/components/Modal/__screenshots__/Modal.test.tsx/Modal-displays-title-correctly-1.png +0 -0
- package/src/components/Modal/__screenshots__/Modal.test.tsx/Modal-handles-backdrop-click-to-close-1.png +0 -0
- package/src/components/Modal/index.ts +2 -0
- package/src/components/Modal/styles.css.ts +99 -0
- package/src/components/Navbar/Navbar.stories.tsx +49 -0
- package/src/components/Navbar/Navbar.test.tsx +18 -0
- package/src/components/Navbar/Navbar.tsx +27 -0
- package/src/components/Navbar/NavbarItem.tsx +14 -0
- package/src/components/Navbar/__screenshots__/Navbar.test.tsx/Navbar-renders-correctly-1-chromium-win32.png +0 -0
- package/src/components/Navbar/__screenshots__/Navbar.test.tsx/Navbar-renders-navbar-correctly-1-chromium-linux.png +0 -0
- package/src/components/Navbar/__screenshots__/Navbar.test.tsx/Navbar-renders-navbar-correctly-1-chromium-win32.png +0 -0
- package/src/components/Navbar/index.ts +2 -0
- package/src/components/Navbar/styles.css.ts +5 -0
- package/src/components/NumberInput/NumberInput.stories.tsx +101 -0
- package/src/components/NumberInput/NumberInput.test.tsx +39 -0
- package/src/components/NumberInput/NumberInput.tsx +161 -0
- package/src/components/NumberInput/index.ts +2 -0
- package/src/components/NumberInput/styles.css.ts +127 -0
- package/src/components/Pagination/Pagination.stories.tsx +63 -0
- package/src/components/Pagination/Pagination.test.tsx +27 -0
- package/src/components/Pagination/Pagination.tsx +138 -0
- package/src/components/Pagination/index.ts +2 -0
- package/src/components/Pagination/styles.css.ts +48 -0
- package/src/components/Popover/Popover.stories.tsx +80 -0
- package/src/components/Popover/Popover.test.tsx +47 -0
- package/src/components/Popover/Popover.tsx +171 -0
- package/src/components/Popover/index.ts +2 -0
- package/src/components/Popover/styles.css.ts +197 -0
- package/src/components/Progress/Progress.stories.tsx +73 -0
- package/src/components/Progress/Progress.test.tsx +53 -0
- package/src/components/Progress/Progress.tsx +66 -0
- package/src/components/Progress/index.ts +1 -0
- package/src/components/Progress/styles.css.ts +75 -0
- package/src/components/Radio/Radio.stories.tsx +75 -0
- package/src/components/Radio/Radio.test.tsx +54 -0
- package/src/components/Radio/Radio.tsx +104 -0
- package/src/components/Radio/index.ts +1 -0
- package/src/components/Radio/styles.css.ts +47 -0
- package/src/components/ScrollArea/ScrollArea.stories.tsx +63 -0
- package/src/components/ScrollArea/ScrollArea.test.tsx +24 -0
- package/src/components/ScrollArea/ScrollArea.tsx +50 -0
- package/src/components/ScrollArea/index.ts +2 -0
- package/src/components/ScrollArea/styles.css.ts +28 -0
- package/src/components/Select/Select.stories.tsx +94 -0
- package/src/components/Select/Select.test.tsx +57 -0
- package/src/components/Select/Select.tsx +60 -0
- package/src/components/Select/index.ts +1 -0
- package/src/components/Select/styles.css.ts +86 -0
- package/src/components/Separator/Separator.stories.tsx +49 -0
- package/src/components/Separator/Separator.test.tsx +22 -0
- package/src/components/Separator/Separator.tsx +37 -0
- package/src/components/Separator/index.ts +2 -0
- package/src/components/Separator/styles.css.ts +32 -0
- package/src/components/Skeleton/Skeleton.stories.tsx +78 -0
- package/src/components/Skeleton/Skeleton.test.tsx +36 -0
- package/src/components/Skeleton/Skeleton.tsx +67 -0
- package/src/components/Skeleton/index.ts +2 -0
- package/src/components/Skeleton/styles.css.ts +62 -0
- package/src/components/Spinner/Spinner.stories.tsx +123 -0
- package/src/components/Spinner/Spinner.test.tsx +73 -0
- package/src/components/Spinner/Spinner.tsx +41 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-div-element-with-proper-attributes-1.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-error-color-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-info-color-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-large-spinner-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-medium-spinner-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-primary-spinner-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-secondary-color-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-small-spinner-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-success-color-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/__screenshots__/Spinner.test.tsx/Spinner-renders-warning-color-correctly-1-chromium-linux.png +0 -0
- package/src/components/Spinner/index.ts +2 -0
- package/src/components/Spinner/styles.css.ts +59 -0
- package/src/components/Stack/Stack.stories.tsx +123 -0
- package/src/components/Stack/Stack.test.tsx +48 -0
- package/src/components/Stack/Stack.tsx +60 -0
- package/src/components/Stack/index.ts +2 -0
- package/src/components/Stepper/Stepper.stories.tsx +85 -0
- package/src/components/Stepper/Stepper.test.tsx +47 -0
- package/src/components/Stepper/Stepper.tsx +133 -0
- package/src/components/Stepper/index.ts +2 -0
- package/src/components/Stepper/styles.css.ts +118 -0
- package/src/components/Table/Table.stories.tsx +147 -0
- package/src/components/Table/Table.test.tsx +104 -0
- package/src/components/Table/Table.tsx +131 -0
- package/src/components/Table/index.ts +1 -0
- package/src/components/Table/styles.css.ts +57 -0
- package/src/components/Tabs/Tabs.stories.tsx +104 -0
- package/src/components/Tabs/Tabs.test.tsx +52 -0
- package/src/components/Tabs/Tabs.tsx +147 -0
- package/src/components/Tabs/index.ts +1 -0
- package/src/components/Tabs/styles.css.ts +106 -0
- package/src/components/Tag/Tag.stories.tsx +72 -0
- package/src/components/Tag/Tag.test.tsx +49 -0
- package/src/components/Tag/Tag.tsx +72 -0
- package/src/components/Tag/index.ts +1 -0
- package/src/components/Tag/styles.css.ts +96 -0
- package/src/components/Text/Header.stories.tsx +45 -0
- package/src/components/Text/Header.tsx +20 -0
- package/src/components/Text/P.stories.tsx +24 -0
- package/src/components/Text/P.tsx +19 -0
- package/src/components/Text/Text.test.tsx +32 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/Header-renders-h1-correctly-1-chromium-linux.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/Header-renders-h1-correctly-1-chromium-win32.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/Header-renders-h2-correctly-1-chromium-linux.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/Header-renders-h2-correctly-1-chromium-win32.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/Header-renders-h3-correctly-1-chromium-linux.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/Header-renders-h3-correctly-1-chromium-win32.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/P-renders-correctly-1-chromium-win32.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/P-renders-p-correctly-1-chromium-linux.png +0 -0
- package/src/components/Text/__screenshots__/Text.test.tsx/P-renders-p-correctly-1-chromium-win32.png +0 -0
- package/src/components/Text/index.ts +2 -0
- package/src/components/Text/styles.css.ts +15 -0
- package/src/components/TextArea/TextArea.stories.tsx +40 -0
- package/src/components/TextArea/TextArea.test.tsx +16 -0
- package/src/components/TextArea/TextArea.tsx +43 -0
- package/src/components/TextArea/index.ts +2 -0
- package/src/components/TextArea/styles.css.ts +12 -0
- package/src/components/Toast/Toast.tsx +342 -0
- package/src/components/Toast/index.ts +9 -0
- package/src/components/Toast/styles.css.ts +213 -0
- package/src/components/Toggle/Toggle.stories.tsx +190 -0
- package/src/components/Toggle/Toggle.test.tsx +85 -0
- package/src/components/Toggle/Toggle.tsx +94 -0
- package/src/components/Toggle/index.ts +2 -0
- package/src/components/Toggle/styles.css.ts +130 -0
- package/src/components/Tooltip/Tooltip.stories.tsx +111 -0
- package/src/components/Tooltip/Tooltip.test.tsx +93 -0
- package/src/components/Tooltip/Tooltip.tsx +72 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-has-proper-role-attribute-1.png +0 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-renders-bottom-tooltip-correctly-1-chromium-linux.png +0 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-renders-left-tooltip-correctly-1-chromium-linux.png +0 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-renders-right-tooltip-correctly-1-chromium-linux.png +0 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-renders-tooltip-without-arrow-1-chromium-linux.png +0 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-renders-top-tooltip-correctly-1-chromium-linux.png +0 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-renders-with-tooltip-content-1.png +0 -0
- package/src/components/Tooltip/__screenshots__/Tooltip.test.tsx/Tooltip-shows-tooltip-on-hover-1.png +0 -0
- package/src/components/Tooltip/index.ts +2 -0
- package/src/components/Tooltip/styles.css.ts +94 -0
- package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +42 -0
- package/src/components/VisuallyHidden/VisuallyHidden.test.tsx +20 -0
- package/src/components/VisuallyHidden/VisuallyHidden.tsx +26 -0
- package/src/components/VisuallyHidden/index.ts +2 -0
- package/src/components/VisuallyHidden/styles.css.ts +14 -0
- package/src/components/index.ts +68 -0
- package/src/index.ts +1 -0
- package/src/styles/layers.css.ts +3 -0
- package/src/styles/reset.css.ts +79 -0
- package/src/styles/sprinkles.css.ts +177 -0
- package/src/styles/theme.css.ts +55 -0
- package/src/styles/utils.ts +9 -0
- package/dist/layers.css.js +0 -4
- package/dist/reset.css.js +0 -1
- package/dist/styles/reset.css.js +0 -1
- package/dist/theme.css.js +0 -41
|
@@ -1,9 +1,30 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
primary:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { styleVariants } from '@vanilla-extract/css';
|
|
2
|
+
import { vars } from '../../styles/theme.css';
|
|
3
|
+
import { styleWithLayer } from '../../styles/utils';
|
|
4
|
+
export const buttonVariants = styleVariants({
|
|
5
|
+
primary: {
|
|
6
|
+
backgroundColor: vars.colors.buttonBackgroundPrimary,
|
|
7
|
+
color: vars.colors.buttonTextPrimary,
|
|
8
|
+
':focus-visible': {
|
|
9
|
+
backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
|
|
10
|
+
},
|
|
11
|
+
':hover': {
|
|
12
|
+
backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
|
|
13
|
+
},
|
|
14
|
+
},
|
|
15
|
+
secondary: {
|
|
16
|
+
backgroundColor: vars.colors.buttonBackgroundSecondary,
|
|
17
|
+
color: vars.colors.buttonTextSecondary,
|
|
18
|
+
':focus-visible': {
|
|
19
|
+
backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
|
|
20
|
+
},
|
|
21
|
+
':hover': {
|
|
22
|
+
backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
export const button = styleWithLayer({
|
|
27
|
+
padding: '1rem',
|
|
28
|
+
borderRadius: '1rem',
|
|
29
|
+
border: 0,
|
|
30
|
+
});
|
|
@@ -4,5 +4,5 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
padding?: 'none' | 'small' | 'medium' | 'large';
|
|
6
6
|
};
|
|
7
|
-
declare const Card: ({ variant, padding, ...props }: CardProps) =>
|
|
7
|
+
declare const Card: ({ variant, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
export default Card;
|
|
@@ -1,15 +1,8 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import clsx from
|
|
3
|
-
import { card, cardVariants } from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
padding: 'none' !== padding ? padding : void 0,
|
|
10
|
-
className: clsx(cardVariants[variant], card, props.className),
|
|
11
|
-
...props,
|
|
12
|
-
children: props.children
|
|
13
|
-
});
|
|
14
|
-
const Card_Card = Card;
|
|
15
|
-
export { Card_Card as default };
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { card, cardVariants } from './styles.css';
|
|
4
|
+
import Box from '../Box';
|
|
5
|
+
const Card = ({ variant = 'elevated', padding = 'medium', ...props }) => {
|
|
6
|
+
return (_jsx(Box, { as: "div", borderRadius: "large", padding: padding !== 'none' ? padding : undefined, className: clsx(cardVariants[variant], card, props.className), ...props, children: props.children }));
|
|
7
|
+
};
|
|
8
|
+
export default Card;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Card };
|
|
1
|
+
export { default as Card } from './Card';
|
|
@@ -1,10 +1,25 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
1
|
+
import { styleVariants } from '@vanilla-extract/css';
|
|
2
|
+
import { vars } from '../../styles/theme.css';
|
|
3
|
+
import { styleWithLayer } from '../../styles/utils';
|
|
4
|
+
export const cardVariants = styleVariants({
|
|
5
|
+
elevated: {
|
|
6
|
+
backgroundColor: vars.colors.backgroundDefault,
|
|
7
|
+
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
|
8
|
+
border: 'none',
|
|
9
|
+
},
|
|
10
|
+
outlined: {
|
|
11
|
+
backgroundColor: vars.colors.backgroundDefault,
|
|
12
|
+
border: `1px solid ${vars.colors.borderDefault}`,
|
|
13
|
+
boxShadow: 'none',
|
|
14
|
+
},
|
|
15
|
+
filled: {
|
|
16
|
+
backgroundColor: vars.colors.backgroundMuted,
|
|
17
|
+
border: 'none',
|
|
18
|
+
boxShadow: 'none',
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
export const card = styleWithLayer({
|
|
22
|
+
display: 'block',
|
|
23
|
+
position: 'relative',
|
|
24
|
+
transition: 'all 0.2s ease-in-out',
|
|
25
|
+
});
|
|
@@ -1,50 +1,25 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import clsx from
|
|
3
|
-
import { forwardRef, useEffect, useRef } from
|
|
4
|
-
import { checkboxContainer, checkboxInput, checkboxLabel } from
|
|
5
|
-
import Box from
|
|
6
|
-
const Checkbox =
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { forwardRef, useEffect, useRef } from 'react';
|
|
4
|
+
import { checkboxContainer, checkboxInput, checkboxLabel } from './styles.css';
|
|
5
|
+
import Box from '../Box';
|
|
6
|
+
const Checkbox = forwardRef(({ label, className, indeterminate, ...props }, ref) => {
|
|
7
7
|
const inputRef = useRef(null);
|
|
8
|
-
const combinedRef = (node)=>{
|
|
9
|
-
if ('function'
|
|
10
|
-
|
|
8
|
+
const combinedRef = (node) => {
|
|
9
|
+
if (typeof ref === 'function') {
|
|
10
|
+
ref(node);
|
|
11
|
+
}
|
|
12
|
+
else if (ref) {
|
|
13
|
+
ref.current = node;
|
|
14
|
+
}
|
|
11
15
|
inputRef.current = node;
|
|
12
16
|
};
|
|
13
|
-
useEffect(()=>{
|
|
14
|
-
if (inputRef.current)
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
]);
|
|
18
|
-
return
|
|
19
|
-
as: "label",
|
|
20
|
-
className: clsx(checkboxContainer, className),
|
|
21
|
-
display: "flex",
|
|
22
|
-
alignItems: "center",
|
|
23
|
-
gap: "small",
|
|
24
|
-
cursor: "pointer",
|
|
25
|
-
style: {
|
|
26
|
-
userSelect: 'none'
|
|
27
|
-
},
|
|
28
|
-
children: [
|
|
29
|
-
/*#__PURE__*/ jsx(Box, {
|
|
30
|
-
as: "input",
|
|
31
|
-
type: "checkbox",
|
|
32
|
-
ref: combinedRef,
|
|
33
|
-
className: checkboxInput,
|
|
34
|
-
style: {
|
|
35
|
-
width: '18px',
|
|
36
|
-
height: '18px'
|
|
37
|
-
},
|
|
38
|
-
...props
|
|
39
|
-
}),
|
|
40
|
-
label && /*#__PURE__*/ jsx(Box, {
|
|
41
|
-
as: "span",
|
|
42
|
-
className: checkboxLabel,
|
|
43
|
-
children: label
|
|
44
|
-
})
|
|
45
|
-
]
|
|
46
|
-
});
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
if (inputRef.current) {
|
|
19
|
+
inputRef.current.indeterminate = !!indeterminate;
|
|
20
|
+
}
|
|
21
|
+
}, [indeterminate]);
|
|
22
|
+
return (_jsxs(Box, { as: "label", className: clsx(checkboxContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "checkbox", ref: combinedRef, className: checkboxInput, style: { width: '18px', height: '18px' }, ...props }), label && _jsx(Box, { as: "span", className: checkboxLabel, children: label })] }));
|
|
47
23
|
});
|
|
48
24
|
Checkbox.displayName = 'Checkbox';
|
|
49
|
-
|
|
50
|
-
export { Checkbox_Checkbox as default };
|
|
25
|
+
export default Checkbox;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Checkbox };
|
|
1
|
+
export { default as Checkbox } from './Checkbox';
|
|
@@ -1,7 +1,31 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { style } from '@vanilla-extract/css';
|
|
2
|
+
import { vars } from '../../styles/theme.css';
|
|
3
|
+
import { styleWithLayer } from '../../styles/utils';
|
|
4
|
+
export const checkboxContainer = styleWithLayer({
|
|
5
|
+
display: 'flex',
|
|
6
|
+
alignItems: 'center',
|
|
7
|
+
gap: '8px',
|
|
8
|
+
cursor: 'pointer',
|
|
9
|
+
userSelect: 'none',
|
|
10
|
+
});
|
|
11
|
+
export const checkboxInput = style({
|
|
12
|
+
width: '18px',
|
|
13
|
+
height: '18px',
|
|
14
|
+
border: `2px solid ${vars.colors.borderDefault}`,
|
|
15
|
+
borderRadius: '4px',
|
|
16
|
+
cursor: 'pointer',
|
|
17
|
+
accentColor: vars.colors.buttonBackgroundPrimary,
|
|
18
|
+
':focus-visible': {
|
|
19
|
+
outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
|
|
20
|
+
outlineOffset: '2px',
|
|
21
|
+
},
|
|
22
|
+
':disabled': {
|
|
23
|
+
cursor: 'not-allowed',
|
|
24
|
+
opacity: 0.5,
|
|
25
|
+
},
|
|
26
|
+
});
|
|
27
|
+
export const checkboxLabel = styleWithLayer({
|
|
28
|
+
fontFamily: vars.fontFamily.body,
|
|
29
|
+
fontSize: '14px',
|
|
30
|
+
color: vars.colors.textPrimary,
|
|
31
|
+
});
|
|
@@ -8,5 +8,5 @@ export interface CollapseProps {
|
|
|
8
8
|
className?: string;
|
|
9
9
|
onAnimationEnd?: () => void;
|
|
10
10
|
}
|
|
11
|
-
declare const Collapse: ({ isOpen, children, animation, duration, className, onAnimationEnd, }: CollapseProps) =>
|
|
11
|
+
declare const Collapse: ({ isOpen, children, animation, duration, className, onAnimationEnd, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export default Collapse;
|
|
@@ -1,58 +1,56 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import clsx from
|
|
3
|
-
import {
|
|
4
|
-
import { collapseContainer, collapseContent } from
|
|
5
|
-
import Box from
|
|
6
|
-
const Collapse = ({ isOpen, children, animation = 'both', duration = 300, className, onAnimationEnd })=>{
|
|
7
|
-
const [height, setHeight] = useState(isOpen ?
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { useState, useRef, useEffect } from 'react';
|
|
4
|
+
import { collapseContainer, collapseContent, } from './styles.css';
|
|
5
|
+
import Box from '../Box';
|
|
6
|
+
const Collapse = ({ isOpen, children, animation = 'both', duration = 300, className, onAnimationEnd, }) => {
|
|
7
|
+
const [height, setHeight] = useState(isOpen ? undefined : 0);
|
|
8
8
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
9
9
|
const contentRef = useRef(null);
|
|
10
|
-
useEffect(()=>{
|
|
10
|
+
useEffect(() => {
|
|
11
11
|
if (isOpen) {
|
|
12
12
|
setIsAnimating(true);
|
|
13
|
-
if (contentRef.current)
|
|
14
|
-
|
|
13
|
+
if (contentRef.current) {
|
|
14
|
+
setHeight(contentRef.current.scrollHeight);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
else {
|
|
15
18
|
setIsAnimating(true);
|
|
16
19
|
setHeight(0);
|
|
17
20
|
}
|
|
18
|
-
}, [
|
|
19
|
-
|
|
20
|
-
]);
|
|
21
|
-
const handleTransitionEnd = ()=>{
|
|
21
|
+
}, [isOpen]);
|
|
22
|
+
const handleTransitionEnd = () => {
|
|
22
23
|
setIsAnimating(false);
|
|
23
|
-
if (isOpen)
|
|
24
|
+
if (isOpen) {
|
|
25
|
+
setHeight(undefined);
|
|
26
|
+
}
|
|
24
27
|
onAnimationEnd?.();
|
|
25
28
|
};
|
|
26
|
-
const getAnimationStyles = ()=>{
|
|
29
|
+
const getAnimationStyles = () => {
|
|
27
30
|
const baseStyles = {
|
|
28
31
|
transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
|
|
29
|
-
height:
|
|
30
|
-
opacity: isOpen || isAnimating ? 1 : 0
|
|
31
|
-
};
|
|
32
|
-
if ('height' === animation) return {
|
|
33
|
-
...baseStyles,
|
|
34
|
-
transition: `height ${duration}ms ease-out`,
|
|
35
|
-
opacity: 1
|
|
36
|
-
};
|
|
37
|
-
if ('opacity' === animation) return {
|
|
38
|
-
...baseStyles,
|
|
39
|
-
transition: `opacity ${duration}ms ease-out`,
|
|
40
|
-
height: void 0
|
|
32
|
+
height: height !== undefined ? `${height}px` : undefined,
|
|
33
|
+
opacity: isOpen || isAnimating ? 1 : 0,
|
|
41
34
|
};
|
|
35
|
+
if (animation === 'height') {
|
|
36
|
+
return {
|
|
37
|
+
...baseStyles,
|
|
38
|
+
transition: `height ${duration}ms ease-out`,
|
|
39
|
+
opacity: 1,
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
if (animation === 'opacity') {
|
|
43
|
+
return {
|
|
44
|
+
...baseStyles,
|
|
45
|
+
transition: `opacity ${duration}ms ease-out`,
|
|
46
|
+
height: undefined,
|
|
47
|
+
};
|
|
48
|
+
}
|
|
42
49
|
return baseStyles;
|
|
43
50
|
};
|
|
44
|
-
if (!isOpen && !isAnimating && 'opacity'
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
onTransitionEnd: handleTransitionEnd,
|
|
49
|
-
"aria-hidden": !isOpen,
|
|
50
|
-
children: /*#__PURE__*/ jsx(Box, {
|
|
51
|
-
ref: contentRef,
|
|
52
|
-
className: collapseContent,
|
|
53
|
-
children: children
|
|
54
|
-
})
|
|
55
|
-
});
|
|
51
|
+
if (!isOpen && !isAnimating && animation !== 'opacity') {
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
return (_jsx(Box, { className: clsx(collapseContainer, className), style: getAnimationStyles(), onTransitionEnd: handleTransitionEnd, "aria-hidden": !isOpen, children: _jsx(Box, { ref: contentRef, className: collapseContent, children: children }) }));
|
|
56
55
|
};
|
|
57
|
-
|
|
58
|
-
export { Collapse_Collapse as default };
|
|
56
|
+
export default Collapse;
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Collapse };
|
|
1
|
+
export { default as Collapse } from './Collapse';
|
|
@@ -1,8 +1,36 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
1
|
+
import { styleVariants, keyframes } from '@vanilla-extract/css';
|
|
2
|
+
import { styleWithLayer } from '../../styles/utils';
|
|
3
|
+
const collapseIn = keyframes({
|
|
4
|
+
from: {
|
|
5
|
+
height: 0,
|
|
6
|
+
opacity: 0,
|
|
7
|
+
},
|
|
8
|
+
to: {
|
|
9
|
+
height: 'auto',
|
|
10
|
+
opacity: 1,
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
const collapseOut = keyframes({
|
|
14
|
+
from: {
|
|
15
|
+
height: 'auto',
|
|
16
|
+
opacity: 1,
|
|
17
|
+
},
|
|
18
|
+
to: {
|
|
19
|
+
height: 0,
|
|
20
|
+
opacity: 0,
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
export const collapseContainer = styleWithLayer({
|
|
24
|
+
overflow: 'hidden',
|
|
25
|
+
});
|
|
26
|
+
export const collapseContent = styleWithLayer({
|
|
27
|
+
width: '100%',
|
|
28
|
+
});
|
|
29
|
+
export const collapseAnimation = styleVariants({
|
|
30
|
+
in: {
|
|
31
|
+
animation: `${collapseIn} 0.3s ease-out forwards`,
|
|
32
|
+
},
|
|
33
|
+
out: {
|
|
34
|
+
animation: `${collapseOut} 0.3s ease-out forwards`,
|
|
35
|
+
},
|
|
36
|
+
});
|
|
@@ -19,5 +19,5 @@ export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
|
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
|
|
21
21
|
}
|
|
22
|
-
declare const Combobox: ({ label, options, value, onChange, onInputChange, placeholder, hint, error, errorMessage, fullWidth, clearable, disabled, filterFn, className, ...props }: ComboboxProps) =>
|
|
22
|
+
declare const Combobox: ({ label, options, value, onChange, onInputChange, placeholder, hint, error, errorMessage, fullWidth, clearable, disabled, filterFn, className, ...props }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
23
|
export default Combobox;
|