@everlywell/ui-kit 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.mts +2 -0
- package/index.d.ts +2 -0
- package/index.js +10 -10
- package/index.mjs +553 -457
- package/lib/theme/actions/FormControl/FormControl.config.d.ts +28 -0
- package/lib/theme/actions/FormControl/FormControl.d.ts +4 -0
- package/lib/theme/actions/FormControl/FormError.config.d.ts +31 -0
- package/lib/theme/actions/FormControl/FormLabel.config.d.ts +24 -0
- package/lib/theme/actions/Input/Input.config.d.ts +45 -0
- package/lib/theme/actions/Input/Input.d.ts +4 -0
- package/lib/theme/foundations/colors.d.ts +6 -0
- package/lib/theme/index.d.ts +130 -0
- package/package.json +1 -1
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
baseStyle?: {
|
|
3
|
+
container: {
|
|
4
|
+
width: string;
|
|
5
|
+
position: string;
|
|
6
|
+
display: string;
|
|
7
|
+
flexDirection: string;
|
|
8
|
+
gap: number;
|
|
9
|
+
};
|
|
10
|
+
requiredIndicator: {
|
|
11
|
+
color: string;
|
|
12
|
+
};
|
|
13
|
+
helperText: {
|
|
14
|
+
_dark: {};
|
|
15
|
+
color: string;
|
|
16
|
+
fontSize: ("sm" | "md")[];
|
|
17
|
+
};
|
|
18
|
+
} | undefined;
|
|
19
|
+
sizes?: {} | undefined;
|
|
20
|
+
variants?: {} | undefined;
|
|
21
|
+
defaultProps?: {
|
|
22
|
+
size?: undefined;
|
|
23
|
+
variant?: undefined;
|
|
24
|
+
colorScheme?: string | undefined;
|
|
25
|
+
} | undefined;
|
|
26
|
+
parts: ("container" | "requiredIndicator" | "helperText")[];
|
|
27
|
+
};
|
|
28
|
+
export default _default;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { FormControl as ChakraFormControl, FormControlProps as ChakraFormControlProps, FormLabel, FormErrorMessage, FormHelperText } from '@chakra-ui/react';
|
|
2
|
+
export type FormControlProps = ChakraFormControlProps;
|
|
3
|
+
export { FormLabel, FormErrorMessage, FormHelperText };
|
|
4
|
+
export default ChakraFormControl;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
baseStyle?: {
|
|
3
|
+
text: {
|
|
4
|
+
color: string;
|
|
5
|
+
fontSize: ("sm" | "md")[];
|
|
6
|
+
};
|
|
7
|
+
icon: {
|
|
8
|
+
color: string;
|
|
9
|
+
height: string;
|
|
10
|
+
width: string;
|
|
11
|
+
mr: number;
|
|
12
|
+
};
|
|
13
|
+
} | undefined;
|
|
14
|
+
sizes?: {
|
|
15
|
+
[key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
|
|
16
|
+
keys: ("text" | "icon")[];
|
|
17
|
+
}>;
|
|
18
|
+
} | undefined;
|
|
19
|
+
variants?: {
|
|
20
|
+
[key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
|
|
21
|
+
keys: ("text" | "icon")[];
|
|
22
|
+
}>;
|
|
23
|
+
} | undefined;
|
|
24
|
+
defaultProps?: {
|
|
25
|
+
size?: string | number | undefined;
|
|
26
|
+
variant?: string | number | undefined;
|
|
27
|
+
colorScheme?: string | undefined;
|
|
28
|
+
} | undefined;
|
|
29
|
+
parts: ("text" | "icon")[];
|
|
30
|
+
};
|
|
31
|
+
export default _default;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
baseStyle?: {
|
|
3
|
+
fontSize: ("sm" | "md")[];
|
|
4
|
+
color: string;
|
|
5
|
+
transitionProperty: string;
|
|
6
|
+
transitionDuration: string;
|
|
7
|
+
opacity: number;
|
|
8
|
+
_disabled: {
|
|
9
|
+
opacity: number;
|
|
10
|
+
};
|
|
11
|
+
} | undefined;
|
|
12
|
+
sizes?: {
|
|
13
|
+
[key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
|
|
14
|
+
} | undefined;
|
|
15
|
+
variants?: {
|
|
16
|
+
[key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
|
|
17
|
+
} | undefined;
|
|
18
|
+
defaultProps?: {
|
|
19
|
+
size?: string | number | undefined;
|
|
20
|
+
variant?: string | number | undefined;
|
|
21
|
+
colorScheme?: string | undefined;
|
|
22
|
+
} | undefined;
|
|
23
|
+
};
|
|
24
|
+
export default _default;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
baseStyle?: {
|
|
3
|
+
field: {
|
|
4
|
+
fontWeight: string;
|
|
5
|
+
fontSize: ("md" | "lg")[];
|
|
6
|
+
bg: string;
|
|
7
|
+
color: string;
|
|
8
|
+
px: number;
|
|
9
|
+
borderStyle: string;
|
|
10
|
+
borderWidth: string;
|
|
11
|
+
borderColor: string;
|
|
12
|
+
borderRadius: string;
|
|
13
|
+
w: string;
|
|
14
|
+
h: ("44px" | "52px")[];
|
|
15
|
+
':focus, &.focus': {
|
|
16
|
+
borderColor: string;
|
|
17
|
+
outline: string;
|
|
18
|
+
};
|
|
19
|
+
_disabled: {
|
|
20
|
+
borderColor: string;
|
|
21
|
+
color: string;
|
|
22
|
+
};
|
|
23
|
+
_placeholder: {
|
|
24
|
+
color: string;
|
|
25
|
+
};
|
|
26
|
+
_invalid: {
|
|
27
|
+
borderColor: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
element: {
|
|
31
|
+
px: number;
|
|
32
|
+
py: number;
|
|
33
|
+
color: string;
|
|
34
|
+
};
|
|
35
|
+
} | undefined;
|
|
36
|
+
sizes?: {} | undefined;
|
|
37
|
+
variants?: {} | undefined;
|
|
38
|
+
defaultProps?: {
|
|
39
|
+
size?: undefined;
|
|
40
|
+
variant?: undefined;
|
|
41
|
+
colorScheme?: string | undefined;
|
|
42
|
+
} | undefined;
|
|
43
|
+
parts: ("element" | "addon" | "field")[];
|
|
44
|
+
};
|
|
45
|
+
export default _default;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { Input as ChakraInput, InputProps as ChakraInputProps, InputGroup, InputLeftElement, InputRightElement } from '@chakra-ui/react';
|
|
2
|
+
export type InputProps = ChakraInputProps;
|
|
3
|
+
export { InputGroup, InputLeftElement, InputRightElement };
|
|
4
|
+
export default ChakraInput;
|
package/lib/theme/index.d.ts
CHANGED
|
@@ -210,6 +210,12 @@ export declare const theme: {
|
|
|
210
210
|
lighter: string;
|
|
211
211
|
wash: string;
|
|
212
212
|
};
|
|
213
|
+
utility: {
|
|
214
|
+
warning: string;
|
|
215
|
+
sale: string;
|
|
216
|
+
success: string;
|
|
217
|
+
rating: string;
|
|
218
|
+
};
|
|
213
219
|
};
|
|
214
220
|
components: {
|
|
215
221
|
Button: {
|
|
@@ -600,6 +606,130 @@ export declare const theme: {
|
|
|
600
606
|
} | undefined;
|
|
601
607
|
parts: ("button" | "list" | "item" | "groupTitle" | "command" | "divider")[];
|
|
602
608
|
};
|
|
609
|
+
Input: {
|
|
610
|
+
baseStyle?: {
|
|
611
|
+
field: {
|
|
612
|
+
fontWeight: string;
|
|
613
|
+
fontSize: ("md" | "lg")[];
|
|
614
|
+
bg: string;
|
|
615
|
+
color: string;
|
|
616
|
+
px: number;
|
|
617
|
+
borderStyle: string;
|
|
618
|
+
borderWidth: string;
|
|
619
|
+
borderColor: string;
|
|
620
|
+
borderRadius: string;
|
|
621
|
+
w: string;
|
|
622
|
+
h: ("44px" | "52px")[];
|
|
623
|
+
':focus, &.focus': {
|
|
624
|
+
borderColor: string;
|
|
625
|
+
outline: string;
|
|
626
|
+
};
|
|
627
|
+
_disabled: {
|
|
628
|
+
borderColor: string;
|
|
629
|
+
color: string;
|
|
630
|
+
};
|
|
631
|
+
_placeholder: {
|
|
632
|
+
color: string;
|
|
633
|
+
};
|
|
634
|
+
_invalid: {
|
|
635
|
+
borderColor: string;
|
|
636
|
+
};
|
|
637
|
+
};
|
|
638
|
+
element: {
|
|
639
|
+
px: number;
|
|
640
|
+
py: number;
|
|
641
|
+
color: string;
|
|
642
|
+
};
|
|
643
|
+
} | undefined;
|
|
644
|
+
sizes?: {} | undefined;
|
|
645
|
+
variants?: {} | undefined;
|
|
646
|
+
defaultProps?: {
|
|
647
|
+
size?: undefined;
|
|
648
|
+
variant?: undefined;
|
|
649
|
+
colorScheme?: string | undefined;
|
|
650
|
+
} | undefined;
|
|
651
|
+
parts: ("element" | "addon" | "field")[];
|
|
652
|
+
};
|
|
653
|
+
Form: {
|
|
654
|
+
baseStyle?: {
|
|
655
|
+
container: {
|
|
656
|
+
width: string;
|
|
657
|
+
position: string;
|
|
658
|
+
display: string;
|
|
659
|
+
flexDirection: string;
|
|
660
|
+
gap: number;
|
|
661
|
+
};
|
|
662
|
+
requiredIndicator: {
|
|
663
|
+
color: string;
|
|
664
|
+
};
|
|
665
|
+
helperText: {
|
|
666
|
+
_dark: {};
|
|
667
|
+
color: string;
|
|
668
|
+
fontSize: ("sm" | "md")[];
|
|
669
|
+
};
|
|
670
|
+
} | undefined;
|
|
671
|
+
sizes?: {} | undefined;
|
|
672
|
+
variants?: {} | undefined;
|
|
673
|
+
defaultProps?: {
|
|
674
|
+
size?: undefined;
|
|
675
|
+
variant?: undefined;
|
|
676
|
+
colorScheme?: string | undefined;
|
|
677
|
+
} | undefined;
|
|
678
|
+
parts: ("container" | "requiredIndicator" | "helperText")[];
|
|
679
|
+
};
|
|
680
|
+
FormError: {
|
|
681
|
+
baseStyle?: {
|
|
682
|
+
text: {
|
|
683
|
+
color: string;
|
|
684
|
+
fontSize: ("sm" | "md")[];
|
|
685
|
+
};
|
|
686
|
+
icon: {
|
|
687
|
+
color: string;
|
|
688
|
+
height: string;
|
|
689
|
+
width: string;
|
|
690
|
+
mr: number;
|
|
691
|
+
};
|
|
692
|
+
} | undefined;
|
|
693
|
+
sizes?: {
|
|
694
|
+
[key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
|
|
695
|
+
keys: ("text" | "icon")[];
|
|
696
|
+
}>;
|
|
697
|
+
} | undefined;
|
|
698
|
+
variants?: {
|
|
699
|
+
[key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
|
|
700
|
+
keys: ("text" | "icon")[];
|
|
701
|
+
}>;
|
|
702
|
+
} | undefined;
|
|
703
|
+
defaultProps?: {
|
|
704
|
+
size?: string | number | undefined;
|
|
705
|
+
variant?: string | number | undefined;
|
|
706
|
+
colorScheme?: string | undefined;
|
|
707
|
+
} | undefined;
|
|
708
|
+
parts: ("text" | "icon")[];
|
|
709
|
+
};
|
|
710
|
+
FormLabel: {
|
|
711
|
+
baseStyle?: {
|
|
712
|
+
fontSize: ("sm" | "md")[];
|
|
713
|
+
color: string;
|
|
714
|
+
transitionProperty: string;
|
|
715
|
+
transitionDuration: string;
|
|
716
|
+
opacity: number;
|
|
717
|
+
_disabled: {
|
|
718
|
+
opacity: number;
|
|
719
|
+
};
|
|
720
|
+
} | undefined;
|
|
721
|
+
sizes?: {
|
|
722
|
+
[key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
|
|
723
|
+
} | undefined;
|
|
724
|
+
variants?: {
|
|
725
|
+
[key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
|
|
726
|
+
} | undefined;
|
|
727
|
+
defaultProps?: {
|
|
728
|
+
size?: string | number | undefined;
|
|
729
|
+
variant?: string | number | undefined;
|
|
730
|
+
colorScheme?: string | undefined;
|
|
731
|
+
} | undefined;
|
|
732
|
+
};
|
|
603
733
|
};
|
|
604
734
|
styles: import("@chakra-ui/theme-tools/dist/component").Styles;
|
|
605
735
|
config: import("@chakra-ui/theme/dist/theme.types").ThemeConfig;
|