@m4l/styles 0.0.8 → 0.0.10

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 (25) hide show
  1. package/index.js +2009 -507
  2. package/package.json +1 -1
  3. package/theme/defaultThemeOptions.d.ts +2 -1
  4. package/theme/overrides/M4LExtendedComponents/M4LButton.d.ts +200 -2
  5. package/theme/overrides/M4LExtendedComponents/M4LErrorLabel.d.ts +14 -3
  6. package/theme/overrides/M4LExtendedComponents/M4LIcon.d.ts +33 -2
  7. package/theme/overrides/M4LExtendedComponents/M4LIconButton.d.ts +130 -2
  8. package/theme/overrides/M4LExtendedComponents/M4LImage.d.ts +30 -1
  9. package/theme/overrides/M4LExtendedComponents/M4LImageButton.d.ts +3 -3
  10. package/theme/overrides/M4LExtendedComponents/M4LNavLink.d.ts +14 -2
  11. package/theme/overrides/M4LExtendedComponents/M4LPopover.d.ts +48 -1
  12. package/theme/overrides/M4LExtendedComponents/M4LSideBar.d.ts +1093 -0
  13. package/theme/overrides/M4LExtendedComponents/M4LTypography.d.ts +2 -1
  14. package/theme/overrides/M4LExtendedComponents/M4LanguagePopover.d.ts +1 -3
  15. package/theme/overrides/M4LExtendedComponents/M4LoadingButton.d.ts +214 -2
  16. package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.d.ts +125 -3
  17. package/theme/overrides/M4LRHFComponents/M4LRHFAutocompleteAsync.d.ts +2 -2
  18. package/theme/overrides/M4LRHFComponents/M4LRHFCheckbox.d.ts +8 -6
  19. package/theme/overrides/M4LRHFComponents/M4LRHFTextField.d.ts +125 -2
  20. package/theme/overrides/M4LRHFComponents/M4LRHFTextFieldPassword.d.ts +3 -8
  21. package/theme/overrides/MUIComponents/Drawer.d.ts +1078 -0
  22. package/theme/overrides/MUIComponents/Input.d.ts +0 -6
  23. package/theme/overrides/MUIComponents/Paper.d.ts +10 -10
  24. package/types/augmentations.d.ts +11 -7
  25. package/types/types.d.ts +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/styles",
3
- "version": "0.0.8",
3
+ "version": "0.0.10",
4
4
  "license": "UNLICENSED",
5
5
  "dependencies": {
6
6
  "@m4l/graphics": "*",
package/theme/defaultThemeOptions.d.ts CHANGED
@@ -1 +1,2 @@
1
- export declare const defaultThemeOptions: any;
1
+ import { ThemeOptions } from '@mui/material';
2
+ export declare const defaultThemeOptions: ThemeOptions;
package/theme/overrides/M4LExtendedComponents/M4LButton.d.ts CHANGED
@@ -1,6 +1,204 @@
1
1
  import { Theme } from '@mui/material/styles';
2
- export declare const M4LButton: (_theme: Theme) => {
2
+ export declare const M4LButton: (theme: Theme) => {
3
3
  M4LButton: {
4
- styleOverrides: {};
4
+ styleOverrides: {
5
+ '&.M4LButton-root': {
6
+ width: string;
7
+ display: string;
8
+ justifyContent: string;
9
+ '& .M4LButton-skeleton ': {
10
+ height: string;
11
+ borderRadius: string;
12
+ };
13
+ '& .MuiButtonBase-root': {
14
+ '& .M4LIcon-icon': {
15
+ transition: string;
16
+ };
17
+ '& .MuiButton-startIcon, & .MuiButton-endIcon': {
18
+ margin: string;
19
+ };
20
+ '&::before': {
21
+ inset: string;
22
+ border: string;
23
+ borderColor: string;
24
+ borderRadius: string;
25
+ transform: string;
26
+ position: string;
27
+ boxSizing: string;
28
+ };
29
+ display: string;
30
+ textTransform: string;
31
+ gap: string;
32
+ transition: string;
33
+ borderRadius: string;
34
+ border: string;
35
+ };
36
+ '&.M4LButton-isDisabled': {
37
+ '& .MuiButtonBase-root': {
38
+ color: string;
39
+ '& .M4LIcon-icon': {
40
+ backgroundColor: string;
41
+ };
42
+ };
43
+ '&.M4LButton-variantContained': {
44
+ '& .MuiButtonBase-root': {
45
+ color: string;
46
+ '& .M4LIcon-icon': {
47
+ backgroundColor: string;
48
+ };
49
+ '&:hover': {
50
+ backgroundColor: string;
51
+ color: string;
52
+ '& .M4LIcon-icon': {
53
+ backgroundColor: string;
54
+ color: string;
55
+ };
56
+ };
57
+ '&:active': {
58
+ backgroundColor: string;
59
+ color: string;
60
+ '& .M4LIcon-icon': {
61
+ backgroundColor: string;
62
+ color: string;
63
+ };
64
+ };
65
+ '&.Mui-focusVisible': {
66
+ backgroundColor: string;
67
+ color: string;
68
+ '& .M4LIcon-icon': {
69
+ backgroundColor: string;
70
+ color: string;
71
+ };
72
+ '&::before': {
73
+ content: string;
74
+ };
75
+ };
76
+ };
77
+ };
78
+ };
79
+ '&.M4LButton-sizeSmall': {
80
+ height: string;
81
+ '& .MuiButtonBase-root': {
82
+ padding: string;
83
+ };
84
+ '&.M4LButton-skeleton': {
85
+ height: string;
86
+ };
87
+ };
88
+ '&.M4LButton-sizeMedium': {
89
+ height: string;
90
+ '& .MuiButtonBase-root': {
91
+ padding: string;
92
+ };
93
+ '&.M4LButton-skeleton': {
94
+ height: string;
95
+ };
96
+ };
97
+ '&.M4LButton-variantContained': {
98
+ '& .MuiButtonBase-root': {
99
+ backgroundColor: string;
100
+ color: string;
101
+ boxShadow: string;
102
+ position: string;
103
+ '& .M4LIcon-icon': {
104
+ backgroundColor: string;
105
+ };
106
+ '&:hover': {
107
+ backgroundColor: string;
108
+ color: string | undefined;
109
+ '& .M4LIcon-icon': {
110
+ backgroundColor: string | undefined;
111
+ };
112
+ };
113
+ '&:active': {
114
+ backgroundColor: string;
115
+ color: string | undefined;
116
+ '& .M4LIcon-icon': {
117
+ backgroundColor: string | undefined;
118
+ };
119
+ };
120
+ '&.Mui-focusVisible': {
121
+ backgroundColor: string;
122
+ color: string | undefined;
123
+ '& .M4LIcon-icon': {
124
+ backgroundColor: string | undefined;
125
+ };
126
+ '&::before': {
127
+ content: string;
128
+ };
129
+ };
130
+ };
131
+ };
132
+ '&.M4LButton-variantOutlined': {
133
+ '& .MuiButtonBase-root': {
134
+ border: string;
135
+ borderColor: string;
136
+ color: string;
137
+ '& .M4LIcon-icon': {
138
+ backgroundColor: string;
139
+ };
140
+ '&:hover': {
141
+ borderColor: string;
142
+ color: string;
143
+ backgroundColor: string;
144
+ '& .M4LIcon-icon': {
145
+ backgroundColor: string;
146
+ };
147
+ };
148
+ '&:active': {
149
+ borderColor: string;
150
+ color: string;
151
+ backgroundColor: string;
152
+ '& .M4LIcon-icon': {
153
+ backgroundColor: string;
154
+ };
155
+ };
156
+ '&.Mui-focusVisible': {
157
+ borderColor: string;
158
+ color: string;
159
+ backgroundColor: string;
160
+ '& .M4LIcon-icon': {
161
+ backgroundColor: string;
162
+ };
163
+ '&::before': {
164
+ content: string;
165
+ };
166
+ };
167
+ };
168
+ };
169
+ '&.M4LButton-variantText': {
170
+ '& .MuiButtonBase-root': {
171
+ color: string;
172
+ '& .M4LIcon-icon': {
173
+ backgroundColor: string;
174
+ };
175
+ '&:hover': {
176
+ backgroundColor: string;
177
+ color: string;
178
+ '& .M4LIcon-icon': {
179
+ backgroundColor: string;
180
+ };
181
+ };
182
+ '&:active': {
183
+ backgroundColor: string;
184
+ color: string;
185
+ '& .M4LIcon-icon': {
186
+ backgroundColor: string;
187
+ };
188
+ };
189
+ '&.Mui-focusVisible': {
190
+ backgroundColor: string;
191
+ color: string;
192
+ '& .M4LIcon-icon': {
193
+ backgroundColor: string;
194
+ };
195
+ '&:before': {
196
+ content: string;
197
+ };
198
+ };
199
+ };
200
+ };
201
+ };
202
+ };
5
203
  };
6
204
  };
package/theme/overrides/M4LExtendedComponents/M4LErrorLabel.d.ts CHANGED
@@ -1,9 +1,20 @@
1
1
  import { Theme } from '@mui/material/styles';
2
- export declare const M4LErrorLabel: (_theme: Theme) => {
2
+ export declare const M4LErrorLabel: (theme: Theme) => {
3
3
  M4LErrorLabel: {
4
4
  styleOverrides: {
5
- "&.M4LErrorLabel-root": {
6
- test: string;
5
+ "&.M4LHelperText-root": {
6
+ '&.M4LHelperText-variantInfo .MuiTypography-root': {
7
+ color: string;
8
+ };
9
+ '&.M4LHelperText-variantSuccess .MuiTypography-root': {
10
+ color: string;
11
+ };
12
+ '&.M4LHelperText-variantWarning .MuiTypography-root': {
13
+ color: string;
14
+ };
15
+ '&.M4LHelperText-variantError .MuiTypography-root': {
16
+ color: string;
17
+ };
7
18
  };
8
19
  };
9
20
  };
package/theme/overrides/M4LExtendedComponents/M4LIcon.d.ts CHANGED
@@ -1,9 +1,40 @@
1
1
  import { Theme } from '@mui/material/styles';
2
- export declare const M4LIcon: (_theme: Theme) => {
2
+ export declare const M4LIcon: (theme: Theme) => {
3
3
  M4LIcon: {
4
4
  styleOverrides: {
5
5
  "&.M4LIcon-root": {
6
- test: string;
6
+ display: string;
7
+ justifyContent: string;
8
+ alignItems: string;
9
+ width: string;
10
+ transition: string;
11
+ '.M4LIcon-icon': {
12
+ backgroundColor: string;
13
+ };
14
+ '.M4LIcon-sizeExtraSmall': {
15
+ width: string;
16
+ height: string;
17
+ };
18
+ '.M4LIcon-sizeSmall': {
19
+ width: string;
20
+ height: string;
21
+ };
22
+ '.M4LIcon-sizeMedium': {
23
+ width: string;
24
+ height: string;
25
+ };
26
+ '.M4LIcon-sizeLarge': {
27
+ width: string;
28
+ height: string;
29
+ };
30
+ '.M4LIcon-sizeExtraLarge': {
31
+ width: string;
32
+ height: string;
33
+ };
34
+ '.M4LIcon-variantSkeleton': {
35
+ borderRadius: string;
36
+ backgroundColor: string;
37
+ };
7
38
  };
8
39
  };
9
40
  };
package/theme/overrides/M4LExtendedComponents/M4LIconButton.d.ts CHANGED
@@ -1,9 +1,137 @@
1
1
  import { Theme } from '@mui/material/styles';
2
- export declare const M4LIconButton: (_theme: Theme) => {
2
+ export declare const M4LIconButton: (theme: Theme) => {
3
3
  M4LIconButton: {
4
4
  styleOverrides: {
5
5
  "&.M4LIconButton-root": {
6
- test: string;
6
+ position: string;
7
+ borderRadius: string;
8
+ display: string;
9
+ justifyContent: string;
10
+ alignItems: string;
11
+ transition: string;
12
+ '& .M4LIcon-root .M4LIcon-icon': {
13
+ transition: string;
14
+ backgroundColor: string;
15
+ };
16
+ '&::before': {
17
+ boxSizing: string;
18
+ border: string;
19
+ borderColor: string;
20
+ borderRadius: string;
21
+ position: string;
22
+ transition: string;
23
+ };
24
+ '.M4LIconButton-sizeExtraSmall&::before': {
25
+ width: string;
26
+ height: string;
27
+ };
28
+ '.M4LIconButton-sizeSmall&::before': {
29
+ width: string;
30
+ height: string;
31
+ };
32
+ '.M4LIconButton-sizeMedium&::before': {
33
+ width: string;
34
+ height: string;
35
+ };
36
+ '&.M4LIconButton-sizeExtraSmall': {
37
+ width: string;
38
+ height: string;
39
+ };
40
+ '&.M4LIconButton-sizeSmall': {
41
+ width: string;
42
+ height: string;
43
+ };
44
+ '&.M4LIconButton-sizeMedium': {
45
+ width: string;
46
+ height: string;
47
+ };
48
+ '& .MuiIconButton-root': {
49
+ position: string;
50
+ borderRadius: string;
51
+ padding: string;
52
+ };
53
+ '.MuiIconButton-root:hover': {
54
+ backgroundColor: string;
55
+ };
56
+ '&.M4LIconButton-variantPrimary': {
57
+ backgroundColor: string;
58
+ '&:hover': {
59
+ backgroundColor: string;
60
+ '& .M4LIcon-icon': {
61
+ backgroundColor: string;
62
+ };
63
+ };
64
+ '&:active': {
65
+ backgroundColor: string;
66
+ transition: string;
67
+ '& .M4LIcon-icon': {
68
+ backgroundColor: string;
69
+ };
70
+ };
71
+ '&.M4LIconButton-isFocus': {
72
+ backgroundColor: string;
73
+ '&::before': {
74
+ content: string;
75
+ };
76
+ };
77
+ };
78
+ '&.M4LIconButton-variantSecondary': {
79
+ borderColor: string;
80
+ '&:hover': {
81
+ border: string;
82
+ borderColor: string;
83
+ '& .M4LIcon-icon': {
84
+ backgroundColor: string;
85
+ };
86
+ };
87
+ '&:active': {
88
+ border: string;
89
+ borderColor: string;
90
+ '& .M4LIcon-icon': {
91
+ backgroundColor: string;
92
+ };
93
+ };
94
+ '&.M4LIconButton-isFocus': {
95
+ border: string;
96
+ borderColor: string;
97
+ '& .M4LIcon-icon': {
98
+ backgroundColor: string;
99
+ };
100
+ '&::before': {
101
+ content: string;
102
+ };
103
+ };
104
+ };
105
+ '&.M4LIconButton-variantLine': {
106
+ '&:hover': {
107
+ backgroundColor: string;
108
+ '& .M4LIcon-icon': {
109
+ backgroundColor: string;
110
+ };
111
+ };
112
+ '&:active': {
113
+ backgroundColor: string;
114
+ '& .M4LIcon-icon': {
115
+ backgroundColor: string;
116
+ };
117
+ };
118
+ '&.M4LIconButton-isFocus': {
119
+ backgroundColor: string;
120
+ border: string;
121
+ borderColor: string;
122
+ '& .M4LIcon-icon': {
123
+ backgroundColor: string;
124
+ };
125
+ };
126
+ };
127
+ '&.M4LIconButton-isDisabled': {
128
+ '& .M4LIcon-icon': {
129
+ backgroundColor: string;
130
+ };
131
+ };
132
+ '&.M4LIconButton-root .MuiSkeleton-root': {
133
+ borderRadius: string;
134
+ };
7
135
  };
8
136
  };
9
137
  };
package/theme/overrides/M4LExtendedComponents/M4LImage.d.ts CHANGED
@@ -3,7 +3,36 @@ export declare const M4LImage: (_theme: Theme) => {
3
3
  M4LImage: {
4
4
  styleOverrides: {
5
5
  "&.M4LImage-root": {
6
- test: string;
6
+ position: string;
7
+ display: string;
8
+ flexDirection: string;
9
+ justifyContent: string;
10
+ alignItems: string;
11
+ '& .M4LImage-img': {
12
+ opacity: number;
13
+ position: string;
14
+ inset: string;
15
+ objectFit: string;
16
+ };
17
+ '&.M4LImage-loaded .M4LImage-img': {
18
+ opacity: number;
19
+ transition: string;
20
+ margin: string;
21
+ };
22
+ '& .M4LImage-skeletonImage, & .M4LImage-skeletonCircle': {
23
+ opacity: number;
24
+ position: string;
25
+ inset: number;
26
+ };
27
+ '&.M4LImage-loaded .M4LImage-skeletonImage, &.M4LImage-loaded .M4LImage-skeletonCircle': {
28
+ opacity: number;
29
+ transition: string;
30
+ };
31
+ '& .M4LImage-lazyLoad': {
32
+ display: string;
33
+ justifyContent: string;
34
+ alignItems: string;
35
+ };
7
36
  };
8
37
  };
9
38
  };
package/theme/overrides/M4LExtendedComponents/M4LImageButton.d.ts CHANGED
@@ -31,12 +31,12 @@ export declare const M4LImageButton: (theme: Theme) => {
31
31
  borderRadius: string;
32
32
  };
33
33
  '.MuiButtonBase-root:hover': {
34
- backgroundColor: any;
34
+ backgroundColor: string;
35
35
  };
36
36
  '.MuiButtonBase-root:focus': {
37
- backgroundColor: any;
37
+ backgroundColor: string;
38
38
  border: string;
39
- borderColor: any;
39
+ borderColor: string;
40
40
  };
41
41
  };
42
42
  };
package/theme/overrides/M4LExtendedComponents/M4LNavLink.d.ts CHANGED
@@ -1,9 +1,21 @@
1
1
  import { Theme } from '@mui/material/styles';
2
- export declare const M4LNavLink: (_theme: Theme) => {
2
+ export declare const M4LNavLink: (theme: Theme) => {
3
3
  M4LNavLink: {
4
4
  styleOverrides: {
5
5
  "&.M4LNavLink-root": {
6
- test: string;
6
+ '& .M4LTypography-root': {
7
+ color: string;
8
+ };
9
+ '&: hover': {
10
+ '& .M4LTypography-root': {
11
+ color: string;
12
+ textDecoration: string;
13
+ textDecorationColor: string;
14
+ };
15
+ };
16
+ '& > a': {
17
+ textDecoration: string;
18
+ };
7
19
  };
8
20
  };
9
21
  };
package/theme/overrides/M4LExtendedComponents/M4LPopover.d.ts CHANGED
@@ -2,8 +2,41 @@ import { Theme } from '@mui/material/styles';
2
2
  export declare const M4LPopover: (theme: Theme) => {
3
3
  M4LPopover: {
4
4
  styleOverrides: {
5
+ '&.M4LSideBar-popover': {
6
+ '& .MuiPaper-root': {
7
+ boxShadow: string;
8
+ "& .M4LSideBar-navListSubItemRoot:hover": {
9
+ padding: string;
10
+ borderRadius: string;
11
+ backgroundColor: string;
12
+ };
13
+ "& .M4LSideBar-navListSubItemRoot": {
14
+ padding: string;
15
+ borderRadius: string;
16
+ '& .M4LSideBar-subItemActive': {
17
+ '& .M4LSideBar-navSubItemContentBullet': {
18
+ borderRadius: string;
19
+ height: string;
20
+ backgroundColor: string;
21
+ };
22
+ };
23
+ '& .MuiButtonBase-root': {
24
+ gap: string;
25
+ '&:hover': {
26
+ backgroundColor: string;
27
+ };
28
+ };
29
+ '& .M4LSideBar-navSubItemContentBullet': {
30
+ width: string;
31
+ height: string;
32
+ borderRadius: string;
33
+ backgroundColor: string;
34
+ margin: string;
35
+ };
36
+ };
37
+ };
38
+ };
5
39
  "&.M4LPopover-root": {
6
- test: string;
7
40
  '.MuiPaper-root': {
8
41
  background: string;
9
42
  borderRadius: string;
@@ -11,6 +44,20 @@ export declare const M4LPopover: (theme: Theme) => {
11
44
  margin: string;
12
45
  boxShadow: string;
13
46
  };
47
+ '& .M4LanguagePopover-containerItems': {
48
+ '& .M4LanguagePopover-labelItem': {
49
+ color: string;
50
+ };
51
+ '& .MuiButtonBase-root:hover': {
52
+ backgroundColor: string;
53
+ };
54
+ '& .MuiButtonBase-root.Mui-selected': {
55
+ backgroundColor: string;
56
+ '& .M4LanguagePopover-labelItem': {
57
+ color: string;
58
+ };
59
+ };
60
+ };
14
61
  };
15
62
  };
16
63
  };