@everlywell/ui-kit 0.0.1 → 0.0.2-menu-next
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/index.d.mts +12 -2
- package/index.d.ts +12 -2
- package/index.js +78 -1
- package/index.mjs +67292 -230
- package/lib/components/Fonts/Fonts.d.ts +2 -0
- package/lib/components/Fonts/index.d.ts +1 -0
- package/lib/components/ThemeProvider/ThemeProvider.d.ts +5 -0
- package/lib/components/ThemeProvider/index.d.ts +1 -0
- package/lib/theme/{forms/Button/config.d.ts → actions/Button/Button.config.d.ts} +26 -14
- package/lib/theme/actions/IconButton/IconButton.d.ts +11 -0
- package/lib/theme/actions/Menu/Menu.config.d.ts +83 -0
- package/lib/theme/actions/Menu/Menu.d.ts +3 -0
- package/lib/theme/foundations/colors.d.ts +39 -63
- package/lib/theme/index.d.ts +418 -125
- package/lib/theme/layout/Box/Box.d.ts +3 -0
- package/lib/theme/layout/Grid/Grid.d.ts +48 -0
- package/lib/theme/layout/Grid/GridItem.d.ts +5 -0
- package/lib/theme/layout/Grid/index.d.ts +2 -0
- package/lib/theme/media/Icon/Icon.config.d.ts +21 -0
- package/lib/theme/media/Icon/Icon.d.ts +14 -0
- package/lib/theme/navigation/Link/Link.config.d.ts +31 -0
- package/lib/theme/navigation/Link/Link.d.ts +3 -0
- package/lib/theme/overlay/Drawer/Drawer.config.d.ts +72 -0
- package/lib/theme/overlay/Drawer/Drawer.d.ts +3 -0
- package/lib/theme/typography/Heading/Heading.config.d.ts +47 -0
- package/lib/theme/typography/Heading/Heading.d.ts +3 -0
- package/lib/theme/typography/Text/Text.config.d.ts +36 -0
- package/lib/theme/typography/Text/Text.d.ts +3 -0
- package/package.json +1 -1
- /package/lib/theme/{forms → actions}/Button/Button.d.ts +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './Fonts';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './ThemeProvider';
|
|
@@ -13,21 +13,30 @@ declare const _default: {
|
|
|
13
13
|
} | undefined;
|
|
14
14
|
sizes?: {
|
|
15
15
|
sm: {
|
|
16
|
-
fontSize:
|
|
16
|
+
fontSize: ("md" | "lg")[];
|
|
17
17
|
px: number[];
|
|
18
18
|
py: number[];
|
|
19
|
-
'
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
'&:has(> svg:only-child)': {
|
|
20
|
+
px: number;
|
|
21
|
+
py: number;
|
|
22
|
+
svg: {
|
|
23
|
+
fontSize: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
svg: {
|
|
27
|
+
fontSize: string;
|
|
22
28
|
};
|
|
23
29
|
};
|
|
24
30
|
md: {
|
|
25
|
-
fontSize:
|
|
31
|
+
fontSize: ("lg" | "xl")[];
|
|
26
32
|
px: number[];
|
|
27
33
|
py: number[];
|
|
34
|
+
'&:has(> svg:only-child)': {
|
|
35
|
+
px: number[];
|
|
36
|
+
py: number[];
|
|
37
|
+
};
|
|
28
38
|
svg: {
|
|
29
|
-
|
|
30
|
-
height: ("1.25rem" | "1.5rem")[];
|
|
39
|
+
fontSize: ("1.5rem" | "1.25rem")[];
|
|
31
40
|
};
|
|
32
41
|
};
|
|
33
42
|
wide: {
|
|
@@ -35,14 +44,17 @@ declare const _default: {
|
|
|
35
44
|
px: number;
|
|
36
45
|
py: number;
|
|
37
46
|
width: string;
|
|
38
|
-
'
|
|
39
|
-
|
|
40
|
-
|
|
47
|
+
'&:has(> svg:only-child)': {
|
|
48
|
+
px: number;
|
|
49
|
+
py: number;
|
|
50
|
+
};
|
|
51
|
+
svg: {
|
|
52
|
+
fontSize: string;
|
|
41
53
|
};
|
|
42
54
|
};
|
|
43
55
|
} | undefined;
|
|
44
56
|
variants?: {
|
|
45
|
-
|
|
57
|
+
primary: (props: StyleFunctionProps) => {
|
|
46
58
|
bg: string;
|
|
47
59
|
color: string;
|
|
48
60
|
':hover, &.hover': {
|
|
@@ -56,7 +68,7 @@ declare const _default: {
|
|
|
56
68
|
color: string;
|
|
57
69
|
};
|
|
58
70
|
};
|
|
59
|
-
|
|
71
|
+
secondary: (props: StyleFunctionProps) => {
|
|
60
72
|
color: string;
|
|
61
73
|
boxShadow: (theme: Record<string, any>) => string;
|
|
62
74
|
':hover, &.hover': {
|
|
@@ -75,8 +87,8 @@ declare const _default: {
|
|
|
75
87
|
};
|
|
76
88
|
} | undefined;
|
|
77
89
|
defaultProps?: {
|
|
78
|
-
size?: "
|
|
79
|
-
variant?: "
|
|
90
|
+
size?: "wide" | "sm" | "md" | undefined;
|
|
91
|
+
variant?: "primary" | "secondary" | undefined;
|
|
80
92
|
colorScheme?: string | undefined;
|
|
81
93
|
} | undefined;
|
|
82
94
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { IconButtonProps as ChakraIconButtonProps, ThemingProps } from '@chakra-ui/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { ICON_SET, IconKey } from '../../media/Icon/Icon';
|
|
4
|
+
export type IconButtonProps = Omit<ChakraIconButtonProps, 'icon'> & ThemingProps<'IconButton'> & {
|
|
5
|
+
icon: IconKey;
|
|
6
|
+
};
|
|
7
|
+
declare const IconButton: React.ForwardRefExoticComponent<Omit<ChakraIconButtonProps, "icon"> & ThemingProps<"IconButton"> & {
|
|
8
|
+
icon: IconKey;
|
|
9
|
+
} & React.RefAttributes<unknown>>;
|
|
10
|
+
export { ICON_SET };
|
|
11
|
+
export default IconButton;
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
baseStyle?: {
|
|
3
|
+
button: {};
|
|
4
|
+
list: {
|
|
5
|
+
boxShadow: string;
|
|
6
|
+
backgroundColor: string;
|
|
7
|
+
};
|
|
8
|
+
item: {
|
|
9
|
+
fontWeight: string;
|
|
10
|
+
lineHeight: string;
|
|
11
|
+
color: string;
|
|
12
|
+
_hover: {
|
|
13
|
+
backgroundColor: string;
|
|
14
|
+
};
|
|
15
|
+
_disabled: {
|
|
16
|
+
backgroundColor: string;
|
|
17
|
+
color: string;
|
|
18
|
+
cursor: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
groupTitle: {
|
|
22
|
+
color: string;
|
|
23
|
+
letterSpacing: string;
|
|
24
|
+
};
|
|
25
|
+
command: {
|
|
26
|
+
color: string;
|
|
27
|
+
};
|
|
28
|
+
divider: {
|
|
29
|
+
borderColor: string;
|
|
30
|
+
borderBottom: string;
|
|
31
|
+
};
|
|
32
|
+
} | undefined;
|
|
33
|
+
sizes?: {
|
|
34
|
+
sm: {
|
|
35
|
+
button: {};
|
|
36
|
+
item: {
|
|
37
|
+
fontSize: ("sm" | "md")[];
|
|
38
|
+
paddingY: string;
|
|
39
|
+
paddingX: string;
|
|
40
|
+
};
|
|
41
|
+
groupTitle: {
|
|
42
|
+
fontSize: ("md" | "lg")[];
|
|
43
|
+
paddingY: string;
|
|
44
|
+
paddingX: string;
|
|
45
|
+
};
|
|
46
|
+
divider: {
|
|
47
|
+
marginY: string;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
md: {
|
|
51
|
+
item: {
|
|
52
|
+
fontSize: ("lg" | "xl")[];
|
|
53
|
+
paddingY: string;
|
|
54
|
+
paddingX: string;
|
|
55
|
+
};
|
|
56
|
+
groupTitle: {
|
|
57
|
+
fontSize: ("xl" | "2xl")[];
|
|
58
|
+
paddingY: string;
|
|
59
|
+
paddingX: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
lg: {
|
|
63
|
+
item: {
|
|
64
|
+
fontSize: ("2xl" | "3xl")[];
|
|
65
|
+
paddingX: string;
|
|
66
|
+
paddingY: string;
|
|
67
|
+
};
|
|
68
|
+
groupTitle: {
|
|
69
|
+
fontSize: ("4xl" | "5xl")[];
|
|
70
|
+
paddingX: string;
|
|
71
|
+
paddingY: string;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
} | undefined;
|
|
75
|
+
variants?: {} | undefined;
|
|
76
|
+
defaultProps?: {
|
|
77
|
+
size?: "sm" | "md" | "lg" | undefined;
|
|
78
|
+
variant?: undefined;
|
|
79
|
+
colorScheme?: string | undefined;
|
|
80
|
+
} | undefined;
|
|
81
|
+
parts: ("button" | "list" | "item" | "groupTitle" | "command" | "divider")[];
|
|
82
|
+
};
|
|
83
|
+
export default _default;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { Menu } from '@chakra-ui/react';
|
|
2
|
+
export { Menu, type MenuProps, MenuCommand, type MenuCommandProps, MenuButton, type MenuButtonProps, MenuList, type MenuListProps, MenuItem, type MenuItemProps, MenuItemOption, type MenuItemOptionProps, MenuGroup, type MenuGroupProps, MenuOptionGroup, type MenuOptionGroupProps, MenuDivider, type MenuDividerProps, } from '@chakra-ui/react';
|
|
3
|
+
export default Menu;
|
|
@@ -1,40 +1,16 @@
|
|
|
1
1
|
declare const colors: {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
50: string;
|
|
5
|
-
100: string;
|
|
6
|
-
200: string;
|
|
7
|
-
300: string;
|
|
8
|
-
400: string;
|
|
9
|
-
500: string;
|
|
10
|
-
600: string;
|
|
11
|
-
700: string;
|
|
12
|
-
800: string;
|
|
13
|
-
900: string;
|
|
14
|
-
};
|
|
15
|
-
black: {
|
|
16
|
-
base: string;
|
|
17
|
-
50: string;
|
|
18
|
-
100: string;
|
|
19
|
-
200: string;
|
|
20
|
-
300: string;
|
|
21
|
-
400: string;
|
|
22
|
-
500: string;
|
|
23
|
-
600: string;
|
|
24
|
-
700: string;
|
|
25
|
-
800: string;
|
|
26
|
-
900: string;
|
|
27
|
-
};
|
|
28
|
-
grayscale: {
|
|
2
|
+
tints: {
|
|
3
|
+
black: string;
|
|
29
4
|
darkGrey: string;
|
|
30
|
-
|
|
31
|
-
|
|
5
|
+
uiGrey: string;
|
|
6
|
+
medGrey: string;
|
|
32
7
|
lightGrey: string;
|
|
33
8
|
darkCream: string;
|
|
34
9
|
cream: string;
|
|
35
10
|
lightCream: string;
|
|
11
|
+
white: string;
|
|
36
12
|
};
|
|
37
|
-
|
|
13
|
+
viridian: {
|
|
38
14
|
50: string;
|
|
39
15
|
100: string;
|
|
40
16
|
200: string;
|
|
@@ -45,20 +21,20 @@ declare const colors: {
|
|
|
45
21
|
700: string;
|
|
46
22
|
800: string;
|
|
47
23
|
900: string;
|
|
48
|
-
wash: string;
|
|
49
|
-
lighter: string;
|
|
50
|
-
light: string;
|
|
51
|
-
base: string;
|
|
52
24
|
dark: string;
|
|
53
|
-
};
|
|
54
|
-
yellow: {
|
|
55
|
-
wash: string;
|
|
56
|
-
lighter: string;
|
|
57
|
-
light: string;
|
|
58
25
|
base: string;
|
|
26
|
+
light: string;
|
|
27
|
+
lighter: string;
|
|
28
|
+
wash: string;
|
|
29
|
+
};
|
|
30
|
+
sunshine: {
|
|
59
31
|
dark: string;
|
|
32
|
+
base: string;
|
|
33
|
+
light: string;
|
|
34
|
+
lighter: string;
|
|
35
|
+
wash: string;
|
|
60
36
|
};
|
|
61
|
-
|
|
37
|
+
terracotta: {
|
|
62
38
|
50: string;
|
|
63
39
|
100: string;
|
|
64
40
|
200: string;
|
|
@@ -69,39 +45,39 @@ declare const colors: {
|
|
|
69
45
|
700: string;
|
|
70
46
|
800: string;
|
|
71
47
|
900: string;
|
|
72
|
-
wash: string;
|
|
73
|
-
lighter: string;
|
|
74
|
-
light: string;
|
|
75
|
-
base: string;
|
|
76
48
|
dark: string;
|
|
77
|
-
};
|
|
78
|
-
lightBlue: {
|
|
79
|
-
wash: string;
|
|
80
|
-
lighter: string;
|
|
81
|
-
light: string;
|
|
82
49
|
base: string;
|
|
83
|
-
dark: string;
|
|
84
|
-
};
|
|
85
|
-
blue: {
|
|
86
|
-
wash: string;
|
|
87
|
-
lighter: string;
|
|
88
50
|
light: string;
|
|
89
|
-
base: string;
|
|
90
|
-
dark: string;
|
|
91
|
-
};
|
|
92
|
-
indigo: {
|
|
93
|
-
wash: string;
|
|
94
51
|
lighter: string;
|
|
95
|
-
|
|
96
|
-
base: string;
|
|
97
|
-
dark: string;
|
|
52
|
+
wash: string;
|
|
98
53
|
};
|
|
99
54
|
violet: {
|
|
100
|
-
|
|
55
|
+
dark: string;
|
|
56
|
+
base: string;
|
|
57
|
+
light: string;
|
|
101
58
|
lighter: string;
|
|
59
|
+
wash: string;
|
|
60
|
+
};
|
|
61
|
+
eggplant: {
|
|
62
|
+
dark: string;
|
|
63
|
+
base: string;
|
|
102
64
|
light: string;
|
|
65
|
+
lighter: string;
|
|
66
|
+
wash: string;
|
|
67
|
+
};
|
|
68
|
+
moonlight: {
|
|
69
|
+
dark: string;
|
|
103
70
|
base: string;
|
|
71
|
+
light: string;
|
|
72
|
+
lighter: string;
|
|
73
|
+
wash: string;
|
|
74
|
+
};
|
|
75
|
+
sky: {
|
|
104
76
|
dark: string;
|
|
77
|
+
base: string;
|
|
78
|
+
light: string;
|
|
79
|
+
lighter: string;
|
|
80
|
+
wash: string;
|
|
105
81
|
};
|
|
106
82
|
};
|
|
107
83
|
export default colors;
|