@everlywell/ui-kit 1.4.0 → 1.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.
Files changed (10) hide show
  1. package/index.d.mts +1 -0
  2. package/index.d.ts +1 -0
  3. package/index.js +7 -7
  4. package/index.mjs +537 -425
  5. package/lib/theme/actions/Input/Input.config.d.ts +1 -1
  6. package/lib/theme/actions/Select/Select.config.d.ts +1 -1
  7. package/lib/theme/index.d.ts +216 -22
  8. package/lib/theme/overlay/Modal/Modal.config.d.ts +106 -0
  9. package/lib/theme/overlay/Modal/Modal.d.ts +3 -0
  10. package/package.json +1 -1
package/lib/theme/actions/Input/Input.config.d.ts CHANGED
@@ -16,7 +16,7 @@ declare const _default: {
16
16
  borderColor: string;
17
17
  outline: string;
18
18
  };
19
- _disabled: {
19
+ ':disabled, :read-only': {
20
20
  borderColor: string;
21
21
  color: string;
22
22
  };
package/lib/theme/actions/Select/Select.config.d.ts CHANGED
@@ -21,7 +21,7 @@ declare const _default: {
21
21
  borderColor: string;
22
22
  outline: string;
23
23
  } | undefined;
24
- _disabled?: {
24
+ ':disabled, :read-only'?: {
25
25
  borderColor: string;
26
26
  color: string;
27
27
  } | undefined;
package/lib/theme/index.d.ts CHANGED
@@ -360,15 +360,7 @@ export declare const theme: {
360
360
  };
361
361
  };
362
362
  secondary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
363
- color: string; /**
364
- * Base unit: 4px
365
- * 1 rem = 16px
366
- *
367
- * Mental model:
368
- *
369
- * If you need a spacing of 40px, divide it by 4.
370
- * That'll give you 10. Then use it in your component.
371
- */
363
+ color: string;
372
364
  boxShadow: (theme: Record<string, any>) => string;
373
365
  ':hover, &.hover': {
374
366
  color: string;
@@ -716,7 +708,7 @@ export declare const theme: {
716
708
  borderColor: string;
717
709
  outline: string;
718
710
  } | undefined;
719
- _disabled?: {
711
+ ':disabled, :read-only'?: {
720
712
  borderColor: string;
721
713
  color: string;
722
714
  } | undefined;
@@ -837,7 +829,7 @@ export declare const theme: {
837
829
  borderColor: string;
838
830
  outline: string;
839
831
  };
840
- _disabled: {
832
+ ':disabled, :read-only': {
841
833
  borderColor: string;
842
834
  color: string;
843
835
  };
@@ -1787,6 +1779,111 @@ export declare const theme: {
1787
1779
  colorScheme?: string | undefined;
1788
1780
  } | undefined;
1789
1781
  };
1782
+ Modal: {
1783
+ baseStyle?: {
1784
+ overlay: {
1785
+ background: string;
1786
+ zIndex: string;
1787
+ };
1788
+ dialogContainer: {
1789
+ display: string;
1790
+ zIndex: string;
1791
+ justifyContent: string;
1792
+ alignItems: string;
1793
+ overflow: string;
1794
+ };
1795
+ dialog: {
1796
+ borderRadius: string;
1797
+ backgroundColor: string;
1798
+ color: string;
1799
+ marginY: string;
1800
+ zIndex: string;
1801
+ maxHeight: string;
1802
+ boxShadow: string;
1803
+ };
1804
+ header: {
1805
+ paddingX: string;
1806
+ paddingY: string;
1807
+ fontSize: string;
1808
+ fontWeight: string;
1809
+ };
1810
+ closeButton: {
1811
+ position: string;
1812
+ top: string;
1813
+ insetEnd: string;
1814
+ width: string;
1815
+ height: string;
1816
+ backgroundColor: string;
1817
+ borderRadius: string;
1818
+ '&:has(> svg:only-child)': {
1819
+ svg: {
1820
+ fontSize: string;
1821
+ };
1822
+ };
1823
+ ':hover, &.hover': {
1824
+ backgroundColor: string;
1825
+ };
1826
+ ':active, &.active': {
1827
+ backgroundColor: string;
1828
+ };
1829
+ ':disabled, &.disabled': {
1830
+ backgroundColor: string;
1831
+ color: string;
1832
+ cursor: string;
1833
+ };
1834
+ };
1835
+ body: {
1836
+ paddingX: string;
1837
+ paddingY: string;
1838
+ flex: number;
1839
+ overflow: string;
1840
+ };
1841
+ footer: {
1842
+ paddingX: string;
1843
+ paddingY: string;
1844
+ };
1845
+ } | undefined;
1846
+ sizes?: {
1847
+ xs: {
1848
+ dialog: {
1849
+ maxWidth: string;
1850
+ };
1851
+ };
1852
+ sm: {
1853
+ dialog: {
1854
+ maxWidth: string;
1855
+ };
1856
+ };
1857
+ md: {
1858
+ dialog: {
1859
+ maxWidth: string;
1860
+ };
1861
+ };
1862
+ lg: {
1863
+ dialog: {
1864
+ maxWidth: string;
1865
+ };
1866
+ };
1867
+ xl: {
1868
+ dialog: {
1869
+ maxWidth: string;
1870
+ };
1871
+ };
1872
+ full: {
1873
+ dialog: {
1874
+ maxWidth: string;
1875
+ height: string;
1876
+ };
1877
+ };
1878
+ } | undefined;
1879
+ variants?: {} | undefined;
1880
+ defaultProps?: {
1881
+ size?: "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
1882
+ variant?: undefined;
1883
+ colorScheme?: string | undefined;
1884
+ } | undefined;
1885
+ parts: ("body" | "overlay" | "dialog" | "dialogContainer" | "header" | "closeButton" | "footer")[];
1886
+ };
1790
1887
  };
1791
1888
  styles: import("@chakra-ui/theme-tools").Styles;
1792
1889
  config: import("@chakra-ui/react").ThemeConfig;
@@ -2205,15 +2302,7 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2205
2302
  };
2206
2303
  };
2207
2304
  secondary: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
2208
- color: string; /**
2209
- * Base unit: 4px
2210
- * 1 rem = 16px
2211
- *
2212
- * Mental model:
2213
- *
2214
- * If you need a spacing of 40px, divide it by 4.
2215
- * That'll give you 10. Then use it in your component.
2216
- */
2305
+ color: string;
2217
2306
  boxShadow: (theme: Record<string, any>) => string;
2218
2307
  ':hover, &.hover': {
2219
2308
  color: string;
@@ -2561,7 +2650,7 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2561
2650
  borderColor: string;
2562
2651
  outline: string;
2563
2652
  } | undefined;
2564
- _disabled?: {
2653
+ ':disabled, :read-only'?: {
2565
2654
  borderColor: string;
2566
2655
  color: string;
2567
2656
  } | undefined;
@@ -2682,7 +2771,7 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
2682
2771
  borderColor: string;
2683
2772
  outline: string;
2684
2773
  };
2685
- _disabled: {
2774
+ ':disabled, :read-only': {
2686
2775
  borderColor: string;
2687
2776
  color: string;
2688
2777
  };
@@ -3632,6 +3721,111 @@ export declare const useTheme: () => import("@chakra-ui/styled-system").WithCSSV
3632
3721
  colorScheme?: string | undefined;
3633
3722
  } | undefined;
3634
3723
  };
3724
+ Modal: {
3725
+ baseStyle?: {
3726
+ overlay: {
3727
+ background: string;
3728
+ zIndex: string;
3729
+ };
3730
+ dialogContainer: {
3731
+ display: string;
3732
+ zIndex: string;
3733
+ justifyContent: string;
3734
+ alignItems: string;
3735
+ overflow: string;
3736
+ };
3737
+ dialog: {
3738
+ borderRadius: string;
3739
+ backgroundColor: string;
3740
+ color: string;
3741
+ marginY: string;
3742
+ zIndex: string;
3743
+ maxHeight: string;
3744
+ boxShadow: string;
3745
+ };
3746
+ header: {
3747
+ paddingX: string;
3748
+ paddingY: string;
3749
+ fontSize: string;
3750
+ fontWeight: string;
3751
+ };
3752
+ closeButton: {
3753
+ position: string;
3754
+ top: string;
3755
+ insetEnd: string;
3756
+ width: string;
3757
+ height: string;
3758
+ backgroundColor: string;
3759
+ borderRadius: string;
3760
+ '&:has(> svg:only-child)': {
3761
+ svg: {
3762
+ fontSize: string;
3763
+ };
3764
+ };
3765
+ ':hover, &.hover': {
3766
+ backgroundColor: string;
3767
+ };
3768
+ ':active, &.active': {
3769
+ backgroundColor: string;
3770
+ };
3771
+ ':disabled, &.disabled': {
3772
+ backgroundColor: string;
3773
+ color: string;
3774
+ cursor: string;
3775
+ };
3776
+ };
3777
+ body: {
3778
+ paddingX: string;
3779
+ paddingY: string;
3780
+ flex: number;
3781
+ overflow: string;
3782
+ };
3783
+ footer: {
3784
+ paddingX: string;
3785
+ paddingY: string;
3786
+ };
3787
+ } | undefined;
3788
+ sizes?: {
3789
+ xs: {
3790
+ dialog: {
3791
+ maxWidth: string;
3792
+ };
3793
+ };
3794
+ sm: {
3795
+ dialog: {
3796
+ maxWidth: string;
3797
+ };
3798
+ };
3799
+ md: {
3800
+ dialog: {
3801
+ maxWidth: string;
3802
+ };
3803
+ };
3804
+ lg: {
3805
+ dialog: {
3806
+ maxWidth: string;
3807
+ };
3808
+ };
3809
+ xl: {
3810
+ dialog: {
3811
+ maxWidth: string;
3812
+ };
3813
+ };
3814
+ full: {
3815
+ dialog: {
3816
+ maxWidth: string;
3817
+ height: string;
3818
+ };
3819
+ };
3820
+ } | undefined;
3821
+ variants?: {} | undefined;
3822
+ defaultProps?: {
3823
+ size?: "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
3824
+ variant?: undefined;
3825
+ colorScheme?: string | undefined;
3826
+ } | undefined;
3827
+ parts: ("body" | "overlay" | "dialog" | "dialogContainer" | "header" | "closeButton" | "footer")[];
3828
+ };
3635
3829
  };
3636
3830
  styles: import("@chakra-ui/theme-tools").Styles;
3637
3831
  config: import("@chakra-ui/react").ThemeConfig;
package/lib/theme/overlay/Modal/Modal.config.d.ts ADDED
@@ -0,0 +1,106 @@
1
+ declare const _default: {
2
+ baseStyle?: {
3
+ overlay: {
4
+ background: string;
5
+ zIndex: string;
6
+ };
7
+ dialogContainer: {
8
+ display: string;
9
+ zIndex: string;
10
+ justifyContent: string;
11
+ alignItems: string;
12
+ overflow: string;
13
+ };
14
+ dialog: {
15
+ borderRadius: string;
16
+ backgroundColor: string;
17
+ color: string;
18
+ marginY: string;
19
+ zIndex: string;
20
+ maxHeight: string;
21
+ boxShadow: string;
22
+ };
23
+ header: {
24
+ paddingX: string;
25
+ paddingY: string;
26
+ fontSize: string;
27
+ fontWeight: string;
28
+ };
29
+ closeButton: {
30
+ position: string;
31
+ top: string;
32
+ insetEnd: string;
33
+ width: string;
34
+ height: string;
35
+ backgroundColor: string;
36
+ borderRadius: string;
37
+ '&:has(> svg:only-child)': {
38
+ svg: {
39
+ fontSize: string;
40
+ };
41
+ };
42
+ ':hover, &.hover': {
43
+ backgroundColor: string;
44
+ };
45
+ ':active, &.active': {
46
+ backgroundColor: string;
47
+ };
48
+ ':disabled, &.disabled': {
49
+ backgroundColor: string;
50
+ color: string;
51
+ cursor: string;
52
+ };
53
+ };
54
+ body: {
55
+ paddingX: string;
56
+ paddingY: string;
57
+ flex: number;
58
+ overflow: string;
59
+ };
60
+ footer: {
61
+ paddingX: string;
62
+ paddingY: string;
63
+ };
64
+ } | undefined;
65
+ sizes?: {
66
+ xs: {
67
+ dialog: {
68
+ maxWidth: string;
69
+ };
70
+ };
71
+ sm: {
72
+ dialog: {
73
+ maxWidth: string;
74
+ };
75
+ };
76
+ md: {
77
+ dialog: {
78
+ maxWidth: string;
79
+ };
80
+ };
81
+ lg: {
82
+ dialog: {
83
+ maxWidth: string;
84
+ };
85
+ };
86
+ xl: {
87
+ dialog: {
88
+ maxWidth: string;
89
+ };
90
+ };
91
+ full: {
92
+ dialog: {
93
+ maxWidth: string;
94
+ height: string;
95
+ };
96
+ };
97
+ } | undefined;
98
+ variants?: {} | undefined;
99
+ defaultProps?: {
100
+ size?: "sm" | "md" | "lg" | "xl" | "full" | "xs" | undefined;
101
+ variant?: undefined;
102
+ colorScheme?: string | undefined;
103
+ } | undefined;
104
+ parts: ("body" | "overlay" | "dialog" | "dialogContainer" | "header" | "closeButton" | "footer")[];
105
+ };
106
+ export default _default;
package/lib/theme/overlay/Modal/Modal.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { Modal } from '@chakra-ui/react';
2
+ export { ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, type ModalProps, type ModalOverlayProps, type ModalContentProps, type ModalHeaderProps, type ModalFooterProps, type ModalBodyProps, type ModalCloseButtonProps, useDisclosure, type UseDisclosureProps, } from '@chakra-ui/react';
3
+ export default Modal;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everlywell/ui-kit",
3
- "version": "1.4.0",
3
+ "version": "1.6.0",
4
4
  "main": "./index.js",
5
5
  "types": "./index.d.ts",
6
6
  "exports": {