@jordan-mace/chaser-design-system 1.2.7 → 1.2.9
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/index.d.mts +1834 -0
- package/dist/index.mjs +4729 -0
- package/dist/styles/layers.css.d.mts +6 -0
- package/dist/styles/layers.css.mjs +7 -0
- package/dist/styles/reset.css.d.mts +1 -0
- package/dist/styles/reset.css.mjs +24 -0
- package/dist/styles/sprinkles.css.d.mts +246 -0
- package/dist/styles/sprinkles.css.mjs +200 -0
- package/dist/styles/theme.css.d.mts +41 -0
- package/dist/styles/theme.css.mjs +50 -0
- package/package.json +18 -9
- package/src/components/Accordion/Accordion.tsx +21 -16
- package/src/components/Alert/Alert.tsx +11 -7
- package/src/components/Avatar/Avatar.tsx +16 -14
- package/src/components/Badge/Badge.tsx +8 -6
- package/src/components/Box/reset.css.ts +2 -2
- package/src/components/Breadcrumb/Breadcrumb.tsx +7 -10
- package/src/components/Button/Button.tsx +9 -11
- package/src/components/Card/Card.tsx +8 -10
- package/src/components/Checkbox/Checkbox.tsx +11 -8
- package/src/components/Collapse/Collapse.tsx +12 -9
- package/src/components/Combobox/Combobox.tsx +60 -31
- package/src/components/Container/Container.tsx +4 -3
- package/src/components/Divider/Divider.tsx +9 -5
- package/src/components/Drawer/Drawer.tsx +20 -13
- package/src/components/DropdownMenu/DropdownMenu.tsx +37 -15
- package/src/components/EmptyState/EmptyState.tsx +9 -12
- package/src/components/FileUpload/FileUpload.tsx +61 -45
- package/src/components/Form/Form.tsx +6 -8
- package/src/components/Grid/Grid.tsx +18 -13
- package/src/components/Icon/Icon.tsx +7 -6
- package/src/components/Input/Input.tsx +7 -8
- package/src/components/Kbd/Kbd.tsx +5 -4
- package/src/components/List/List.tsx +6 -2
- package/src/components/List/ListItem.tsx +6 -2
- package/src/components/Modal/Modal.tsx +16 -5
- package/src/components/Navbar/Navbar.tsx +2 -1
- package/src/components/Navbar/NavbarItem.tsx +2 -1
- package/src/components/NumberInput/NumberInput.tsx +29 -22
- package/src/components/Pagination/Pagination.tsx +39 -28
- package/src/components/Popover/Popover.tsx +37 -21
- package/src/components/Progress/Progress.tsx +39 -38
- package/src/components/Radio/Radio.tsx +12 -6
- package/src/components/ScrollArea/ScrollArea.tsx +9 -10
- package/src/components/Select/Select.tsx +12 -7
- package/src/components/Separator/Separator.tsx +8 -14
- package/src/components/Skeleton/Skeleton.tsx +11 -13
- package/src/components/Spinner/Spinner.tsx +15 -11
- package/src/components/Stack/Stack.tsx +34 -15
- package/src/components/Stepper/Stepper.tsx +19 -17
- package/src/components/Table/Table.tsx +31 -21
- package/src/components/Tabs/Tabs.tsx +14 -10
- package/src/components/Tag/Tag.tsx +8 -7
- package/src/components/Text/Header.tsx +6 -5
- package/src/components/Text/P.tsx +5 -4
- package/src/components/TextArea/TextArea.tsx +7 -8
- package/src/components/Toggle/Toggle.tsx +16 -7
- package/src/components/Tooltip/Tooltip.tsx +16 -11
- package/src/components/VisuallyHidden/VisuallyHidden.tsx +7 -8
- package/src/index.ts +6 -1
- package/dist/components/Accordion/Accordion.d.ts +0 -16
- package/dist/components/Accordion/Accordion.js +0 -43
- package/dist/components/Accordion/index.d.ts +0 -1
- package/dist/components/Accordion/index.js +0 -1
- package/dist/components/Accordion/styles.css.d.ts +0 -7
- package/dist/components/Accordion/styles.css.js +0 -65
- package/dist/components/Alert/Alert.d.ts +0 -9
- package/dist/components/Alert/Alert.js +0 -8
- package/dist/components/Alert/index.d.ts +0 -1
- package/dist/components/Alert/index.js +0 -1
- package/dist/components/Alert/styles.css.d.ts +0 -4
- package/dist/components/Alert/styles.css.js +0 -54
- package/dist/components/AspectRatio/AspectRatio.d.ts +0 -9
- package/dist/components/AspectRatio/AspectRatio.js +0 -12
- package/dist/components/AspectRatio/index.d.ts +0 -2
- package/dist/components/AspectRatio/index.js +0 -1
- package/dist/components/Avatar/Avatar.d.ts +0 -11
- package/dist/components/Avatar/Avatar.js +0 -13
- package/dist/components/Avatar/index.d.ts +0 -1
- package/dist/components/Avatar/index.js +0 -1
- package/dist/components/Avatar/styles.css.d.ts +0 -4
- package/dist/components/Avatar/styles.css.js +0 -151
- package/dist/components/Badge/Badge.d.ts +0 -11
- package/dist/components/Badge/Badge.js +0 -8
- package/dist/components/Badge/index.d.ts +0 -2
- package/dist/components/Badge/index.js +0 -1
- package/dist/components/Badge/styles.css.d.ts +0 -5
- package/dist/components/Badge/styles.css.js +0 -77
- package/dist/components/Box/Box.d.ts +0 -11
- package/dist/components/Box/Box.js +0 -54
- package/dist/components/Box/index.d.ts +0 -2
- package/dist/components/Box/index.js +0 -1
- package/dist/components/Box/reset.css.d.ts +0 -1
- package/dist/components/Box/reset.css.js +0 -15
- package/dist/components/Breadcrumb/Breadcrumb.d.ts +0 -12
- package/dist/components/Breadcrumb/Breadcrumb.js +0 -8
- package/dist/components/Breadcrumb/index.d.ts +0 -1
- package/dist/components/Breadcrumb/index.js +0 -1
- package/dist/components/Breadcrumb/styles.css.d.ts +0 -6
- package/dist/components/Breadcrumb/styles.css.js +0 -50
- package/dist/components/Button/Button.d.ts +0 -9
- package/dist/components/Button/Button.js +0 -8
- package/dist/components/Button/index.d.ts +0 -1
- package/dist/components/Button/index.js +0 -1
- package/dist/components/Button/styles.css.d.ts +0 -2
- package/dist/components/Button/styles.css.js +0 -30
- package/dist/components/Card/Card.d.ts +0 -8
- package/dist/components/Card/Card.js +0 -8
- package/dist/components/Card/index.d.ts +0 -1
- package/dist/components/Card/index.js +0 -1
- package/dist/components/Card/styles.css.d.ts +0 -2
- package/dist/components/Card/styles.css.js +0 -25
- package/dist/components/Checkbox/Checkbox.d.ts +0 -6
- package/dist/components/Checkbox/Checkbox.js +0 -25
- package/dist/components/Checkbox/index.d.ts +0 -1
- package/dist/components/Checkbox/index.js +0 -1
- package/dist/components/Checkbox/styles.css.d.ts +0 -3
- package/dist/components/Checkbox/styles.css.js +0 -31
- package/dist/components/Collapse/Collapse.d.ts +0 -12
- package/dist/components/Collapse/Collapse.js +0 -56
- package/dist/components/Collapse/index.d.ts +0 -2
- package/dist/components/Collapse/index.js +0 -1
- package/dist/components/Collapse/styles.css.d.ts +0 -3
- package/dist/components/Collapse/styles.css.js +0 -36
- package/dist/components/Combobox/Combobox.d.ts +0 -23
- package/dist/components/Combobox/Combobox.js +0 -104
- package/dist/components/Combobox/index.d.ts +0 -2
- package/dist/components/Combobox/index.js +0 -1
- package/dist/components/Combobox/styles.css.d.ts +0 -13
- package/dist/components/Combobox/styles.css.js +0 -142
- package/dist/components/Container/Container.d.ts +0 -11
- package/dist/components/Container/Container.js +0 -21
- package/dist/components/Container/index.d.ts +0 -2
- package/dist/components/Container/index.js +0 -1
- package/dist/components/Divider/Divider.d.ts +0 -9
- package/dist/components/Divider/Divider.js +0 -8
- package/dist/components/Divider/index.d.ts +0 -2
- package/dist/components/Divider/index.js +0 -1
- package/dist/components/Divider/styles.css.d.ts +0 -4
- package/dist/components/Divider/styles.css.js +0 -41
- package/dist/components/Drawer/Drawer.d.ts +0 -16
- package/dist/components/Drawer/Drawer.js +0 -65
- package/dist/components/Drawer/index.d.ts +0 -2
- package/dist/components/Drawer/index.js +0 -1
- package/dist/components/Drawer/styles.css.d.ts +0 -8
- package/dist/components/Drawer/styles.css.js +0 -125
- package/dist/components/DropdownMenu/DropdownMenu.d.ts +0 -23
- package/dist/components/DropdownMenu/DropdownMenu.js +0 -43
- package/dist/components/DropdownMenu/index.d.ts +0 -2
- package/dist/components/DropdownMenu/index.js +0 -1
- package/dist/components/DropdownMenu/styles.css.d.ts +0 -9
- package/dist/components/DropdownMenu/styles.css.js +0 -93
- package/dist/components/EmptyState/EmptyState.d.ts +0 -10
- package/dist/components/EmptyState/EmptyState.js +0 -8
- package/dist/components/EmptyState/index.d.ts +0 -2
- package/dist/components/EmptyState/index.js +0 -1
- package/dist/components/EmptyState/styles.css.d.ts +0 -5
- package/dist/components/EmptyState/styles.css.js +0 -30
- package/dist/components/FileUpload/FileUpload.d.ts +0 -27
- package/dist/components/FileUpload/FileUpload.js +0 -102
- package/dist/components/FileUpload/index.d.ts +0 -2
- package/dist/components/FileUpload/index.js +0 -1
- package/dist/components/FileUpload/styles.css.d.ts +0 -19
- package/dist/components/FileUpload/styles.css.js +0 -145
- package/dist/components/Form/Form.d.ts +0 -7
- package/dist/components/Form/Form.js +0 -8
- package/dist/components/Form/FormInput.d.ts +0 -5
- package/dist/components/Form/FormInput.js +0 -9
- package/dist/components/Form/index.d.ts +0 -2
- package/dist/components/Form/index.js +0 -2
- package/dist/components/Form/styles.css.d.ts +0 -2
- package/dist/components/Form/styles.css.js +0 -11
- package/dist/components/Grid/Grid.d.ts +0 -13
- package/dist/components/Grid/Grid.js +0 -25
- package/dist/components/Grid/index.d.ts +0 -2
- package/dist/components/Grid/index.js +0 -1
- package/dist/components/Icon/Icon.d.ts +0 -12
- package/dist/components/Icon/Icon.js +0 -21
- package/dist/components/Icon/index.d.ts +0 -1
- package/dist/components/Icon/index.js +0 -1
- package/dist/components/Icon/styles.css.d.ts +0 -1
- package/dist/components/Icon/styles.css.js +0 -9
- package/dist/components/Input/Input.d.ts +0 -7
- package/dist/components/Input/Input.js +0 -9
- package/dist/components/Input/index.d.ts +0 -1
- package/dist/components/Input/index.js +0 -1
- package/dist/components/Input/styles.css.d.ts +0 -2
- package/dist/components/Input/styles.css.js +0 -8
- package/dist/components/Kbd/Kbd.d.ts +0 -7
- package/dist/components/Kbd/Kbd.js +0 -6
- package/dist/components/Kbd/index.d.ts +0 -2
- package/dist/components/Kbd/index.js +0 -1
- package/dist/components/Kbd/styles.css.d.ts +0 -1
- package/dist/components/Kbd/styles.css.js +0 -16
- package/dist/components/List/List.d.ts +0 -5
- package/dist/components/List/List.js +0 -7
- package/dist/components/List/ListItem.d.ts +0 -5
- package/dist/components/List/ListItem.js +0 -7
- package/dist/components/List/index.d.ts +0 -2
- package/dist/components/List/index.js +0 -2
- package/dist/components/List/styles.css.d.ts +0 -2
- package/dist/components/List/styles.css.js +0 -11
- package/dist/components/Modal/Modal.d.ts +0 -13
- package/dist/components/Modal/Modal.js +0 -35
- package/dist/components/Modal/index.d.ts +0 -2
- package/dist/components/Modal/index.js +0 -1
- package/dist/components/Modal/styles.css.d.ts +0 -7
- package/dist/components/Modal/styles.css.js +0 -92
- package/dist/components/Navbar/Navbar.d.ts +0 -6
- package/dist/components/Navbar/Navbar.js +0 -8
- package/dist/components/Navbar/NavbarItem.d.ts +0 -6
- package/dist/components/Navbar/NavbarItem.js +0 -8
- package/dist/components/Navbar/index.d.ts +0 -2
- package/dist/components/Navbar/index.js +0 -2
- package/dist/components/Navbar/styles.css.d.ts +0 -2
- package/dist/components/Navbar/styles.css.js +0 -3
- package/dist/components/NumberInput/NumberInput.d.ts +0 -20
- package/dist/components/NumberInput/NumberInput.js +0 -39
- package/dist/components/NumberInput/index.d.ts +0 -2
- package/dist/components/NumberInput/index.js +0 -1
- package/dist/components/NumberInput/styles.css.d.ts +0 -10
- package/dist/components/NumberInput/styles.css.js +0 -117
- package/dist/components/Pagination/Pagination.d.ts +0 -10
- package/dist/components/Pagination/Pagination.js +0 -47
- package/dist/components/Pagination/index.d.ts +0 -2
- package/dist/components/Pagination/index.js +0 -1
- package/dist/components/Pagination/styles.css.d.ts +0 -4
- package/dist/components/Pagination/styles.css.js +0 -44
- package/dist/components/Popover/Popover.d.ts +0 -18
- package/dist/components/Popover/Popover.js +0 -55
- package/dist/components/Popover/index.d.ts +0 -2
- package/dist/components/Popover/index.js +0 -1
- package/dist/components/Popover/styles.css.d.ts +0 -11
- package/dist/components/Popover/styles.css.js +0 -185
- package/dist/components/Progress/Progress.d.ts +0 -10
- package/dist/components/Progress/Progress.js +0 -9
- package/dist/components/Progress/index.d.ts +0 -1
- package/dist/components/Progress/index.js +0 -1
- package/dist/components/Progress/styles.css.d.ts +0 -4
- package/dist/components/Progress/styles.css.js +0 -71
- package/dist/components/Radio/Radio.d.ts +0 -16
- package/dist/components/Radio/Radio.js +0 -25
- package/dist/components/Radio/index.d.ts +0 -1
- package/dist/components/Radio/index.js +0 -1
- package/dist/components/Radio/styles.css.d.ts +0 -5
- package/dist/components/Radio/styles.css.js +0 -42
- package/dist/components/ScrollArea/ScrollArea.d.ts +0 -11
- package/dist/components/ScrollArea/ScrollArea.js +0 -12
- package/dist/components/ScrollArea/index.d.ts +0 -2
- package/dist/components/ScrollArea/index.js +0 -1
- package/dist/components/ScrollArea/styles.css.d.ts +0 -3
- package/dist/components/ScrollArea/styles.css.js +0 -25
- package/dist/components/Select/Select.d.ts +0 -13
- package/dist/components/Select/Select.js +0 -10
- package/dist/components/Select/index.d.ts +0 -1
- package/dist/components/Select/index.js +0 -1
- package/dist/components/Select/styles.css.d.ts +0 -4
- package/dist/components/Select/styles.css.js +0 -82
- package/dist/components/Separator/Separator.d.ts +0 -8
- package/dist/components/Separator/Separator.js +0 -8
- package/dist/components/Separator/index.d.ts +0 -2
- package/dist/components/Separator/index.js +0 -1
- package/dist/components/Separator/styles.css.d.ts +0 -4
- package/dist/components/Separator/styles.css.js +0 -28
- package/dist/components/Skeleton/Skeleton.d.ts +0 -14
- package/dist/components/Skeleton/Skeleton.js +0 -13
- package/dist/components/Skeleton/index.d.ts +0 -2
- package/dist/components/Skeleton/index.js +0 -1
- package/dist/components/Skeleton/styles.css.d.ts +0 -4
- package/dist/components/Skeleton/styles.css.js +0 -56
- package/dist/components/Spinner/Spinner.d.ts +0 -10
- package/dist/components/Spinner/Spinner.js +0 -8
- package/dist/components/Spinner/index.d.ts +0 -2
- package/dist/components/Spinner/index.js +0 -1
- package/dist/components/Spinner/styles.css.d.ts +0 -4
- package/dist/components/Spinner/styles.css.js +0 -55
- package/dist/components/Stack/Stack.d.ts +0 -16
- package/dist/components/Stack/Stack.js +0 -24
- package/dist/components/Stack/index.d.ts +0 -2
- package/dist/components/Stack/index.js +0 -1
- package/dist/components/Stepper/Stepper.d.ts +0 -18
- package/dist/components/Stepper/Stepper.js +0 -25
- package/dist/components/Stepper/index.d.ts +0 -2
- package/dist/components/Stepper/index.js +0 -1
- package/dist/components/Stepper/styles.css.d.ts +0 -14
- package/dist/components/Stepper/styles.css.js +0 -104
- package/dist/components/Table/Table.d.ts +0 -42
- package/dist/components/Table/Table.js +0 -39
- package/dist/components/Table/index.d.ts +0 -1
- package/dist/components/Table/index.js +0 -1
- package/dist/components/Table/styles.css.d.ts +0 -8
- package/dist/components/Table/styles.css.js +0 -49
- package/dist/components/Tabs/Tabs.d.ts +0 -29
- package/dist/components/Tabs/Tabs.js +0 -52
- package/dist/components/Tabs/index.d.ts +0 -1
- package/dist/components/Tabs/index.js +0 -1
- package/dist/components/Tabs/styles.css.d.ts +0 -6
- package/dist/components/Tabs/styles.css.js +0 -100
- package/dist/components/Tag/Tag.d.ts +0 -16
- package/dist/components/Tag/Tag.js +0 -18
- package/dist/components/Tag/index.d.ts +0 -1
- package/dist/components/Tag/index.js +0 -1
- package/dist/components/Tag/styles.css.d.ts +0 -3
- package/dist/components/Tag/styles.css.js +0 -93
- package/dist/components/Text/Header.d.ts +0 -8
- package/dist/components/Text/Header.js +0 -8
- package/dist/components/Text/P.d.ts +0 -7
- package/dist/components/Text/P.js +0 -8
- package/dist/components/Text/index.d.ts +0 -2
- package/dist/components/Text/index.js +0 -2
- package/dist/components/Text/styles.css.d.ts +0 -2
- package/dist/components/Text/styles.css.js +0 -13
- package/dist/components/TextArea/TextArea.d.ts +0 -7
- package/dist/components/TextArea/TextArea.js +0 -9
- package/dist/components/TextArea/index.d.ts +0 -2
- package/dist/components/TextArea/index.js +0 -1
- package/dist/components/TextArea/styles.css.d.ts +0 -2
- package/dist/components/TextArea/styles.css.js +0 -10
- package/dist/components/Toast/Toast.d.ts +0 -34
- package/dist/components/Toast/Toast.js +0 -177
- package/dist/components/Toast/index.d.ts +0 -1
- package/dist/components/Toast/index.js +0 -1
- package/dist/components/Toast/styles.css.d.ts +0 -21
- package/dist/components/Toast/styles.css.js +0 -192
- package/dist/components/Toggle/Toggle.d.ts +0 -10
- package/dist/components/Toggle/Toggle.js +0 -17
- package/dist/components/Toggle/index.d.ts +0 -2
- package/dist/components/Toggle/index.js +0 -1
- package/dist/components/Toggle/styles.css.d.ts +0 -12
- package/dist/components/Toggle/styles.css.js +0 -118
- package/dist/components/Tooltip/Tooltip.d.ts +0 -10
- package/dist/components/Tooltip/Tooltip.js +0 -16
- package/dist/components/Tooltip/index.d.ts +0 -2
- package/dist/components/Tooltip/index.js +0 -1
- package/dist/components/Tooltip/styles.css.d.ts +0 -8
- package/dist/components/Tooltip/styles.css.js +0 -86
- package/dist/components/VisuallyHidden/VisuallyHidden.d.ts +0 -8
- package/dist/components/VisuallyHidden/VisuallyHidden.js +0 -9
- package/dist/components/VisuallyHidden/index.d.ts +0 -2
- package/dist/components/VisuallyHidden/index.js +0 -1
- package/dist/components/VisuallyHidden/styles.css.d.ts +0 -1
- package/dist/components/VisuallyHidden/styles.css.js +0 -12
- package/dist/components/index.d.ts +0 -68
- package/dist/components/index.js +0 -47
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -1
- package/dist/styles/layers.css.d.ts +0 -3
- package/dist/styles/layers.css.js +0 -3
- package/dist/styles/sprinkles.css.d.ts +0 -241
- package/dist/styles/sprinkles.css.js +0 -165
- package/dist/styles/theme.css.d.ts +0 -38
- package/dist/styles/theme.css.js +0 -51
- package/dist/styles/utils.d.ts +0 -2
- package/dist/styles/utils.js +0 -7
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
3
|
-
export interface ContainerProps {
|
|
4
|
-
size?: ContainerSize;
|
|
5
|
-
centerContent?: boolean;
|
|
6
|
-
children?: React.ReactNode;
|
|
7
|
-
className?: string;
|
|
8
|
-
style?: React.CSSProperties;
|
|
9
|
-
}
|
|
10
|
-
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
|
|
11
|
-
export default Container;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import Box from '../Box';
|
|
4
|
-
const sizeMap = {
|
|
5
|
-
sm: '640px',
|
|
6
|
-
md: '768px',
|
|
7
|
-
lg: '1024px',
|
|
8
|
-
xl: '1280px',
|
|
9
|
-
full: '100%',
|
|
10
|
-
};
|
|
11
|
-
const Container = forwardRef(({ size = 'lg', centerContent = true, children, className, style }, ref) => {
|
|
12
|
-
const sizeValue = size;
|
|
13
|
-
const containerStyle = {
|
|
14
|
-
maxWidth: sizeMap[sizeValue],
|
|
15
|
-
marginLeft: centerContent ? 'auto' : undefined,
|
|
16
|
-
marginRight: centerContent ? 'auto' : undefined,
|
|
17
|
-
};
|
|
18
|
-
return (_jsx(Box, { ref: ref, width: "100%", className: className, style: { ...containerStyle, ...style }, children: children }));
|
|
19
|
-
});
|
|
20
|
-
Container.displayName = 'Container';
|
|
21
|
-
export default Container;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Container } from './Container';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type DividerOrientation = 'horizontal' | 'vertical';
|
|
3
|
-
export type DividerSize = 'small' | 'medium' | 'large';
|
|
4
|
-
export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
|
|
5
|
-
orientation?: DividerOrientation;
|
|
6
|
-
size?: DividerSize;
|
|
7
|
-
}
|
|
8
|
-
declare const Divider: ({ orientation, size, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
-
export default Divider;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { divider, dividerOrientations, dividerSizes, dividerVerticalSizes, } from './styles.css';
|
|
4
|
-
import Box from '../Box';
|
|
5
|
-
const Divider = ({ orientation = 'horizontal', size = 'medium', ...props }) => {
|
|
6
|
-
return (_jsx(Box, { as: "hr", className: clsx(divider, dividerOrientations[orientation], orientation === 'vertical' ? dividerVerticalSizes[size] : dividerSizes[size], props.className), role: "separator", "aria-orientation": orientation, ...props }));
|
|
7
|
-
};
|
|
8
|
-
export default Divider;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Divider } from './Divider';
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export declare const dividerOrientations: Record<"horizontal" | "vertical", string>;
|
|
2
|
-
export declare const dividerSizes: Record<"medium" | "large" | "small", string>;
|
|
3
|
-
export declare const divider: string;
|
|
4
|
-
export declare const dividerVerticalSizes: Record<"medium" | "large" | "small", string>;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { styleVariants } from '@vanilla-extract/css';
|
|
2
|
-
import { vars } from '../../styles/theme.css';
|
|
3
|
-
import { styleWithLayer } from '../../styles/utils';
|
|
4
|
-
export const dividerOrientations = styleVariants({
|
|
5
|
-
horizontal: {
|
|
6
|
-
width: '100%',
|
|
7
|
-
height: '1px',
|
|
8
|
-
borderTop: `1px solid ${vars.colors.borderMuted}`,
|
|
9
|
-
},
|
|
10
|
-
vertical: {
|
|
11
|
-
width: '1px',
|
|
12
|
-
height: '100%',
|
|
13
|
-
borderLeft: `1px solid ${vars.colors.borderMuted}`,
|
|
14
|
-
},
|
|
15
|
-
});
|
|
16
|
-
export const dividerSizes = styleVariants({
|
|
17
|
-
small: {
|
|
18
|
-
margin: '0.5rem 0',
|
|
19
|
-
},
|
|
20
|
-
medium: {
|
|
21
|
-
margin: '1rem 0',
|
|
22
|
-
},
|
|
23
|
-
large: {
|
|
24
|
-
margin: '1.5rem 0',
|
|
25
|
-
},
|
|
26
|
-
});
|
|
27
|
-
export const divider = styleWithLayer({
|
|
28
|
-
border: 'none',
|
|
29
|
-
flexShrink: 0,
|
|
30
|
-
});
|
|
31
|
-
export const dividerVerticalSizes = styleVariants({
|
|
32
|
-
small: {
|
|
33
|
-
margin: '0 0.5rem',
|
|
34
|
-
},
|
|
35
|
-
medium: {
|
|
36
|
-
margin: '0 1rem',
|
|
37
|
-
},
|
|
38
|
-
large: {
|
|
39
|
-
margin: '0 1.5rem',
|
|
40
|
-
},
|
|
41
|
-
});
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
|
|
3
|
-
export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
|
|
4
|
-
export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
-
isOpen: boolean;
|
|
6
|
-
onClose: () => void;
|
|
7
|
-
title?: string;
|
|
8
|
-
position?: DrawerPosition;
|
|
9
|
-
size?: DrawerSize;
|
|
10
|
-
children?: React.ReactNode;
|
|
11
|
-
footer?: React.ReactNode;
|
|
12
|
-
showCloseButton?: boolean;
|
|
13
|
-
closeOnOverlayClick?: boolean;
|
|
14
|
-
}
|
|
15
|
-
declare const Drawer: ({ isOpen, onClose, title, position, size, children, footer, showCloseButton, closeOnOverlayClick, className, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
-
export default Drawer;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { useEffect } from 'react';
|
|
4
|
-
import { drawer, drawerPositionVariants, drawerOverlay, drawerHeader, drawerTitle, drawerCloseButton, drawerBody, drawerFooter, } from './styles.css';
|
|
5
|
-
import Box from '../Box';
|
|
6
|
-
const sizeMap = {
|
|
7
|
-
left: {
|
|
8
|
-
small: '250px',
|
|
9
|
-
medium: '350px',
|
|
10
|
-
large: '450px',
|
|
11
|
-
full: '100vw',
|
|
12
|
-
},
|
|
13
|
-
right: {
|
|
14
|
-
small: '250px',
|
|
15
|
-
medium: '350px',
|
|
16
|
-
large: '450px',
|
|
17
|
-
full: '100vw',
|
|
18
|
-
},
|
|
19
|
-
top: {
|
|
20
|
-
small: '200px',
|
|
21
|
-
medium: '300px',
|
|
22
|
-
large: '400px',
|
|
23
|
-
full: '100vh',
|
|
24
|
-
},
|
|
25
|
-
bottom: {
|
|
26
|
-
small: '200px',
|
|
27
|
-
medium: '300px',
|
|
28
|
-
large: '400px',
|
|
29
|
-
full: '100vh',
|
|
30
|
-
},
|
|
31
|
-
};
|
|
32
|
-
const Drawer = ({ isOpen, onClose, title, position = 'right', size = 'medium', children, footer, showCloseButton = true, closeOnOverlayClick = true, className, ...props }) => {
|
|
33
|
-
useEffect(() => {
|
|
34
|
-
if (isOpen) {
|
|
35
|
-
document.body.style.overflow = 'hidden';
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
document.body.style.overflow = '';
|
|
39
|
-
}
|
|
40
|
-
return () => {
|
|
41
|
-
document.body.style.overflow = '';
|
|
42
|
-
};
|
|
43
|
-
}, [isOpen]);
|
|
44
|
-
useEffect(() => {
|
|
45
|
-
const handleEscape = (e) => {
|
|
46
|
-
if (e.key === 'Escape' && isOpen) {
|
|
47
|
-
onClose();
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
document.addEventListener('keydown', handleEscape);
|
|
51
|
-
return () => document.removeEventListener('keydown', handleEscape);
|
|
52
|
-
}, [isOpen, onClose]);
|
|
53
|
-
if (!isOpen)
|
|
54
|
-
return null;
|
|
55
|
-
const dimensionStyle = {
|
|
56
|
-
['--drawer-width']: ['left', 'right'].includes(position)
|
|
57
|
-
? sizeMap[position][size]
|
|
58
|
-
: undefined,
|
|
59
|
-
['--drawer-height']: ['top', 'bottom'].includes(position)
|
|
60
|
-
? sizeMap[position][size]
|
|
61
|
-
: undefined,
|
|
62
|
-
};
|
|
63
|
-
return (_jsxs(_Fragment, { children: [_jsx(Box, { className: drawerOverlay, onClick: closeOnOverlayClick ? onClose : undefined, "aria-hidden": "true" }), _jsxs(Box, { as: "div", role: "dialog", "aria-modal": "true", className: clsx(drawer, drawerPositionVariants[position], className), style: dimensionStyle, ...props, children: [title && (_jsxs(Box, { as: "div", className: drawerHeader, children: [_jsx(Box, { as: "h2", className: drawerTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: drawerCloseButton, onClick: onClose, "aria-label": "Close drawer", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: drawerBody, children: children }), footer && _jsx(Box, { as: "div", className: drawerFooter, children: footer })] })] }));
|
|
64
|
-
};
|
|
65
|
-
export default Drawer;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as Drawer } from './Drawer';
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export declare const drawerPositionVariants: Record<"bottom" | "left" | "right" | "top", string>;
|
|
2
|
-
export declare const drawerOverlay: string;
|
|
3
|
-
export declare const drawer: string;
|
|
4
|
-
export declare const drawerHeader: string;
|
|
5
|
-
export declare const drawerTitle: string;
|
|
6
|
-
export declare const drawerCloseButton: string;
|
|
7
|
-
export declare const drawerBody: string;
|
|
8
|
-
export declare const drawerFooter: string;
|
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import { styleVariants, keyframes } from '@vanilla-extract/css';
|
|
2
|
-
import { vars } from '../../styles/theme.css';
|
|
3
|
-
import { styleWithLayer } from '../../styles/utils';
|
|
4
|
-
const slideInFromLeft = keyframes({
|
|
5
|
-
from: { transform: 'translateX(-100%)' },
|
|
6
|
-
to: { transform: 'translateX(0)' },
|
|
7
|
-
});
|
|
8
|
-
const slideInFromRight = keyframes({
|
|
9
|
-
from: { transform: 'translateX(100%)' },
|
|
10
|
-
to: { transform: 'translateX(0)' },
|
|
11
|
-
});
|
|
12
|
-
const slideInFromTop = keyframes({
|
|
13
|
-
from: { transform: 'translateY(-100%)' },
|
|
14
|
-
to: { transform: 'translateY(0)' },
|
|
15
|
-
});
|
|
16
|
-
const slideInFromBottom = keyframes({
|
|
17
|
-
from: { transform: 'translateY(100%)' },
|
|
18
|
-
to: { transform: 'translateY(0)' },
|
|
19
|
-
});
|
|
20
|
-
const fadeIn = keyframes({
|
|
21
|
-
from: { opacity: 0 },
|
|
22
|
-
to: { opacity: 1 },
|
|
23
|
-
});
|
|
24
|
-
export const drawerPositionVariants = styleVariants({
|
|
25
|
-
left: {
|
|
26
|
-
top: 0,
|
|
27
|
-
left: 0,
|
|
28
|
-
bottom: 0,
|
|
29
|
-
width: 'var(--drawer-width, 300px)',
|
|
30
|
-
maxWidth: '100vw',
|
|
31
|
-
animation: `${slideInFromLeft} 0.3s ease-out`,
|
|
32
|
-
},
|
|
33
|
-
right: {
|
|
34
|
-
top: 0,
|
|
35
|
-
right: 0,
|
|
36
|
-
bottom: 0,
|
|
37
|
-
width: 'var(--drawer-width, 300px)',
|
|
38
|
-
maxWidth: '100vw',
|
|
39
|
-
animation: `${slideInFromRight} 0.3s ease-out`,
|
|
40
|
-
},
|
|
41
|
-
top: {
|
|
42
|
-
top: 0,
|
|
43
|
-
left: 0,
|
|
44
|
-
right: 0,
|
|
45
|
-
height: 'var(--drawer-height, 300px)',
|
|
46
|
-
maxHeight: '100vh',
|
|
47
|
-
animation: `${slideInFromTop} 0.3s ease-out`,
|
|
48
|
-
},
|
|
49
|
-
bottom: {
|
|
50
|
-
bottom: 0,
|
|
51
|
-
left: 0,
|
|
52
|
-
right: 0,
|
|
53
|
-
height: 'var(--drawer-height, 300px)',
|
|
54
|
-
maxHeight: '100vh',
|
|
55
|
-
animation: `${slideInFromBottom} 0.3s ease-out`,
|
|
56
|
-
},
|
|
57
|
-
});
|
|
58
|
-
export const drawerOverlay = styleWithLayer({
|
|
59
|
-
position: 'fixed',
|
|
60
|
-
inset: 0,
|
|
61
|
-
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
62
|
-
animation: `${fadeIn} 0.2s ease-out`,
|
|
63
|
-
zIndex: 40,
|
|
64
|
-
});
|
|
65
|
-
export const drawer = styleWithLayer({
|
|
66
|
-
position: 'fixed',
|
|
67
|
-
background: vars.colors.backgroundDefault,
|
|
68
|
-
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
69
|
-
zIndex: 50,
|
|
70
|
-
display: 'flex',
|
|
71
|
-
flexDirection: 'column',
|
|
72
|
-
overflow: 'hidden',
|
|
73
|
-
});
|
|
74
|
-
export const drawerHeader = styleWithLayer({
|
|
75
|
-
padding: '1.25rem',
|
|
76
|
-
borderBottom: `1px solid ${vars.colors.borderMuted}`,
|
|
77
|
-
display: 'flex',
|
|
78
|
-
alignItems: 'center',
|
|
79
|
-
justifyContent: 'space-between',
|
|
80
|
-
gap: '1rem',
|
|
81
|
-
});
|
|
82
|
-
export const drawerTitle = styleWithLayer({
|
|
83
|
-
fontFamily: vars.fontFamily.heading,
|
|
84
|
-
fontSize: '1.25rem',
|
|
85
|
-
fontWeight: '600',
|
|
86
|
-
color: vars.colors.textPrimary,
|
|
87
|
-
margin: 0,
|
|
88
|
-
});
|
|
89
|
-
export const drawerCloseButton = styleWithLayer({
|
|
90
|
-
background: 'none',
|
|
91
|
-
border: 'none',
|
|
92
|
-
padding: '0.5rem',
|
|
93
|
-
cursor: 'pointer',
|
|
94
|
-
borderRadius: '0.375rem',
|
|
95
|
-
display: 'flex',
|
|
96
|
-
alignItems: 'center',
|
|
97
|
-
justifyContent: 'center',
|
|
98
|
-
color: vars.colors.textSecondary,
|
|
99
|
-
fontSize: '1.5rem',
|
|
100
|
-
lineHeight: '1',
|
|
101
|
-
transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
|
|
102
|
-
selectors: {
|
|
103
|
-
'&:hover': {
|
|
104
|
-
backgroundColor: vars.colors.borderMuted,
|
|
105
|
-
color: vars.colors.textPrimary,
|
|
106
|
-
},
|
|
107
|
-
'&:focus-visible': {
|
|
108
|
-
outline: '2px solid var(--drawer-focus-ring, currentColor)',
|
|
109
|
-
outlineOffset: '2px',
|
|
110
|
-
},
|
|
111
|
-
},
|
|
112
|
-
});
|
|
113
|
-
export const drawerBody = styleWithLayer({
|
|
114
|
-
padding: '1.25rem',
|
|
115
|
-
overflowY: 'auto',
|
|
116
|
-
flex: 1,
|
|
117
|
-
});
|
|
118
|
-
export const drawerFooter = styleWithLayer({
|
|
119
|
-
padding: '1.25rem',
|
|
120
|
-
borderTop: `1px solid ${vars.colors.borderMuted}`,
|
|
121
|
-
display: 'flex',
|
|
122
|
-
gap: '0.75rem',
|
|
123
|
-
justifyContent: 'flex-end',
|
|
124
|
-
alignItems: 'center',
|
|
125
|
-
});
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
|
|
3
|
-
export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
|
|
4
|
-
export interface DropdownMenuItemProps {
|
|
5
|
-
label: string;
|
|
6
|
-
onClick?: () => void;
|
|
7
|
-
variant?: DropdownMenuItemVariant;
|
|
8
|
-
icon?: React.ReactNode;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
}
|
|
11
|
-
export interface DropdownMenuGroupProps {
|
|
12
|
-
label?: string;
|
|
13
|
-
items: DropdownMenuItemProps[];
|
|
14
|
-
}
|
|
15
|
-
export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
16
|
-
trigger: React.ReactNode;
|
|
17
|
-
items?: DropdownMenuItemProps[];
|
|
18
|
-
groups?: DropdownMenuGroupProps[];
|
|
19
|
-
position?: DropdownMenuPosition;
|
|
20
|
-
closeOnItemClick?: boolean;
|
|
21
|
-
}
|
|
22
|
-
declare const DropdownMenu: ({ trigger, items, groups, position, closeOnItemClick, className, ...props }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
-
export default DropdownMenu;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import React, { useState, useRef, useEffect } from 'react';
|
|
4
|
-
import { dropdownMenuContainer, dropdownMenuTrigger, dropdownMenuContent, dropdownMenuPositionVariants, dropdownMenuItem, dropdownMenuItemVariants, dropdownMenuSeparator, dropdownMenuGroup, dropdownMenuLabel, } from './styles.css';
|
|
5
|
-
import Box from '../Box';
|
|
6
|
-
const DropdownMenu = ({ trigger, items = [], groups = [], position = 'bottomLeft', closeOnItemClick = true, className, ...props }) => {
|
|
7
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
8
|
-
const containerRef = useRef(null);
|
|
9
|
-
useEffect(() => {
|
|
10
|
-
const handleClickOutside = (event) => {
|
|
11
|
-
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
12
|
-
setIsOpen(false);
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
if (isOpen) {
|
|
16
|
-
document.addEventListener('mousedown', handleClickOutside);
|
|
17
|
-
}
|
|
18
|
-
return () => {
|
|
19
|
-
document.removeEventListener('mousedown', handleClickOutside);
|
|
20
|
-
};
|
|
21
|
-
}, [isOpen]);
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
const handleEscape = (e) => {
|
|
24
|
-
if (e.key === 'Escape' && isOpen) {
|
|
25
|
-
setIsOpen(false);
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
document.addEventListener('keydown', handleEscape);
|
|
29
|
-
return () => document.removeEventListener('keydown', handleEscape);
|
|
30
|
-
}, [isOpen]);
|
|
31
|
-
const handleItemClick = (item) => {
|
|
32
|
-
if (item.disabled || item.variant === 'disabled')
|
|
33
|
-
return;
|
|
34
|
-
item.onClick?.();
|
|
35
|
-
if (closeOnItemClick) {
|
|
36
|
-
setIsOpen(false);
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
const renderItem = (item, index) => (_jsxs(Box, { as: "button", className: clsx(dropdownMenuItem, dropdownMenuItemVariants[item.disabled || item.variant === 'disabled' ? 'disabled' : item.variant || 'default']), onClick: () => handleItemClick(item), disabled: item.disabled || item.variant === 'disabled', role: "menuitem", type: "button", children: [item.icon && _jsx("span", { children: item.icon }), item.label] }, index));
|
|
40
|
-
const renderGroup = (group, index) => (_jsxs(Box, { className: dropdownMenuGroup, role: "group", children: [group.label && (_jsx(Box, { as: "div", className: dropdownMenuLabel, role: "presentation", children: group.label })), group.items.map((item, itemIndex) => renderItem(item, itemIndex))] }, index));
|
|
41
|
-
return (_jsxs(Box, { ref: containerRef, className: clsx(dropdownMenuContainer, className), ...props, children: [_jsx(Box, { className: dropdownMenuTrigger, onClick: () => setIsOpen(!isOpen), "aria-expanded": isOpen, "aria-haspopup": "true", children: trigger }), isOpen && (_jsxs(Box, { className: clsx(dropdownMenuContent, dropdownMenuPositionVariants[position]), role: "menu", "aria-orientation": "vertical", children: [items.length > 0 && (_jsx(Box, { className: dropdownMenuGroup, children: items.map((item, index) => renderItem(item, index)) })), groups.map((group, index) => (_jsxs(React.Fragment, { children: [index > 0 && _jsx(Box, { as: "div", className: dropdownMenuSeparator, role: "separator" }), renderGroup(group, index)] }, index)))] }))] }));
|
|
42
|
-
};
|
|
43
|
-
export default DropdownMenu;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as DropdownMenu } from './DropdownMenu';
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export declare const dropdownMenuContainer: string;
|
|
2
|
-
export declare const dropdownMenuTrigger: string;
|
|
3
|
-
export declare const dropdownMenuContent: string;
|
|
4
|
-
export declare const dropdownMenuPositionVariants: Record<"topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
|
|
5
|
-
export declare const dropdownMenuItem: string;
|
|
6
|
-
export declare const dropdownMenuItemVariants: Record<"default" | "disabled" | "destructive", string>;
|
|
7
|
-
export declare const dropdownMenuSeparator: string;
|
|
8
|
-
export declare const dropdownMenuGroup: string;
|
|
9
|
-
export declare const dropdownMenuLabel: string;
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { styleVariants } from '@vanilla-extract/css';
|
|
2
|
-
import { vars } from '../../styles/theme.css';
|
|
3
|
-
import { styleWithLayer } from '../../styles/utils';
|
|
4
|
-
export const dropdownMenuContainer = styleWithLayer({
|
|
5
|
-
position: 'relative',
|
|
6
|
-
display: 'inline-block',
|
|
7
|
-
});
|
|
8
|
-
export const dropdownMenuTrigger = styleWithLayer({
|
|
9
|
-
cursor: 'pointer',
|
|
10
|
-
userSelect: 'none',
|
|
11
|
-
});
|
|
12
|
-
export const dropdownMenuContent = styleWithLayer({
|
|
13
|
-
position: 'absolute',
|
|
14
|
-
backgroundColor: vars.colors.backgroundDefault,
|
|
15
|
-
border: `1px solid ${vars.colors.borderDefault}`,
|
|
16
|
-
borderRadius: '0.5rem',
|
|
17
|
-
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
|
18
|
-
minWidth: '160px',
|
|
19
|
-
zIndex: 50,
|
|
20
|
-
overflow: 'hidden',
|
|
21
|
-
marginTop: '0.25rem',
|
|
22
|
-
});
|
|
23
|
-
export const dropdownMenuPositionVariants = styleVariants({
|
|
24
|
-
bottomLeft: {
|
|
25
|
-
top: '100%',
|
|
26
|
-
left: 0,
|
|
27
|
-
},
|
|
28
|
-
bottomRight: {
|
|
29
|
-
top: '100%',
|
|
30
|
-
right: 0,
|
|
31
|
-
},
|
|
32
|
-
topLeft: {
|
|
33
|
-
bottom: '100%',
|
|
34
|
-
left: 0,
|
|
35
|
-
marginTop: 0,
|
|
36
|
-
marginBottom: '0.25rem',
|
|
37
|
-
},
|
|
38
|
-
topRight: {
|
|
39
|
-
bottom: '100%',
|
|
40
|
-
right: 0,
|
|
41
|
-
marginTop: 0,
|
|
42
|
-
marginBottom: '0.25rem',
|
|
43
|
-
},
|
|
44
|
-
});
|
|
45
|
-
export const dropdownMenuItem = styleWithLayer({
|
|
46
|
-
padding: '0.75rem 1rem',
|
|
47
|
-
cursor: 'pointer',
|
|
48
|
-
display: 'flex',
|
|
49
|
-
alignItems: 'center',
|
|
50
|
-
gap: '0.5rem',
|
|
51
|
-
fontSize: '14px',
|
|
52
|
-
color: vars.colors.textPrimary,
|
|
53
|
-
transition: 'background-color 0.15s ease',
|
|
54
|
-
':hover': {
|
|
55
|
-
backgroundColor: vars.colors.backgroundMuted,
|
|
56
|
-
},
|
|
57
|
-
':focus-visible': {
|
|
58
|
-
outline: 'none',
|
|
59
|
-
backgroundColor: vars.colors.backgroundMuted,
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
export const dropdownMenuItemVariants = styleVariants({
|
|
63
|
-
default: {},
|
|
64
|
-
destructive: {
|
|
65
|
-
color: vars.colors.alertErrorText,
|
|
66
|
-
':hover': {
|
|
67
|
-
backgroundColor: vars.colors.alertErrorBackground,
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
disabled: {
|
|
71
|
-
opacity: 0.5,
|
|
72
|
-
cursor: 'not-allowed',
|
|
73
|
-
':hover': {
|
|
74
|
-
backgroundColor: 'transparent',
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
});
|
|
78
|
-
export const dropdownMenuSeparator = styleWithLayer({
|
|
79
|
-
height: '1px',
|
|
80
|
-
backgroundColor: vars.colors.borderMuted,
|
|
81
|
-
margin: '0.5rem 0',
|
|
82
|
-
});
|
|
83
|
-
export const dropdownMenuGroup = styleWithLayer({
|
|
84
|
-
padding: '0.5rem 0',
|
|
85
|
-
});
|
|
86
|
-
export const dropdownMenuLabel = styleWithLayer({
|
|
87
|
-
padding: '0.5rem 1rem',
|
|
88
|
-
fontSize: '12px',
|
|
89
|
-
fontWeight: '600',
|
|
90
|
-
color: vars.colors.textSecondary,
|
|
91
|
-
textTransform: 'uppercase',
|
|
92
|
-
letterSpacing: '0.05em',
|
|
93
|
-
});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface EmptyStateProps {
|
|
3
|
-
icon?: React.ReactNode;
|
|
4
|
-
title?: string;
|
|
5
|
-
description?: string;
|
|
6
|
-
action?: React.ReactNode;
|
|
7
|
-
className?: string;
|
|
8
|
-
}
|
|
9
|
-
declare const EmptyState: ({ icon, title, description, action, className, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export default EmptyState;
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import { emptyState, emptyStateIcon, emptyStateTitle, emptyStateDescription, emptyStateAction, } from './styles.css';
|
|
4
|
-
import Box from '../Box';
|
|
5
|
-
const EmptyState = ({ icon, title, description, action, className, }) => {
|
|
6
|
-
return (_jsxs(Box, { className: clsx(emptyState, className), role: "status", children: [icon && (_jsx(Box, { className: emptyStateIcon, "aria-hidden": "true", children: icon })), title && (_jsx(Box, { as: "h3", className: emptyStateTitle, children: title })), description && (_jsx(Box, { as: "p", className: emptyStateDescription, children: description })), action && (_jsx(Box, { className: emptyStateAction, children: action }))] }));
|
|
7
|
-
};
|
|
8
|
-
export default EmptyState;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as EmptyState } from './EmptyState';
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { vars } from '../../styles/theme.css';
|
|
2
|
-
import { styleWithLayer } from '../../styles/utils';
|
|
3
|
-
export const emptyState = styleWithLayer({
|
|
4
|
-
display: 'flex',
|
|
5
|
-
flexDirection: 'column',
|
|
6
|
-
alignItems: 'center',
|
|
7
|
-
justifyContent: 'center',
|
|
8
|
-
padding: '2rem',
|
|
9
|
-
textAlign: 'center',
|
|
10
|
-
});
|
|
11
|
-
export const emptyStateIcon = styleWithLayer({
|
|
12
|
-
fontSize: '48px',
|
|
13
|
-
marginBottom: '1rem',
|
|
14
|
-
color: vars.colors.textSecondary,
|
|
15
|
-
});
|
|
16
|
-
export const emptyStateTitle = styleWithLayer({
|
|
17
|
-
fontSize: '18px',
|
|
18
|
-
fontWeight: '600',
|
|
19
|
-
color: vars.colors.textPrimary,
|
|
20
|
-
margin: '0 0 0.5rem 0',
|
|
21
|
-
});
|
|
22
|
-
export const emptyStateDescription = styleWithLayer({
|
|
23
|
-
fontSize: '14px',
|
|
24
|
-
color: vars.colors.textSecondary,
|
|
25
|
-
margin: '0 0 1rem 0',
|
|
26
|
-
maxWidth: '400px',
|
|
27
|
-
});
|
|
28
|
-
export const emptyStateAction = styleWithLayer({
|
|
29
|
-
marginTop: '0.5rem',
|
|
30
|
-
});
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export interface FileUploadFile {
|
|
3
|
-
id: string;
|
|
4
|
-
file: File;
|
|
5
|
-
name: string;
|
|
6
|
-
size: number;
|
|
7
|
-
progress: number;
|
|
8
|
-
status: 'uploading' | 'success' | 'error';
|
|
9
|
-
errorMessage?: string;
|
|
10
|
-
}
|
|
11
|
-
export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
12
|
-
label?: string;
|
|
13
|
-
files?: FileUploadFile[];
|
|
14
|
-
onFilesChange?: (files: FileUploadFile[]) => void;
|
|
15
|
-
onFileAdd?: (files: File[]) => void;
|
|
16
|
-
onFileRemove?: (fileId: string) => void;
|
|
17
|
-
accept?: string;
|
|
18
|
-
multiple?: boolean;
|
|
19
|
-
maxFileSize?: number;
|
|
20
|
-
maxFiles?: number;
|
|
21
|
-
disabled?: boolean;
|
|
22
|
-
dropzoneText?: string;
|
|
23
|
-
hint?: string;
|
|
24
|
-
showProgress?: boolean;
|
|
25
|
-
}
|
|
26
|
-
declare const FileUpload: ({ label, files, onFilesChange, onFileAdd, onFileRemove, accept, multiple, maxFileSize, maxFiles, disabled, dropzoneText, hint, showProgress, className, ...props }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export default FileUpload;
|