@m4l/components 9.1.85 → 9.1.87

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 (13) hide show
  1. package/@types/types.d.ts +9 -0
  2. package/components/Chip/Chip.js +2 -10
  3. package/components/Chip/ChipStyles.js +37 -433
  4. package/components/Chip/types.d.ts +1 -2
  5. package/components/mui_extended/Divider/Divider.d.ts +14 -0
  6. package/components/mui_extended/Divider/Divider.styles.d.ts +2 -0
  7. package/components/mui_extended/Divider/constants.d.ts +1 -0
  8. package/components/mui_extended/Divider/slots/DividerEnum.d.ts +4 -0
  9. package/components/mui_extended/Divider/slots/DividerSlots.d.ts +8 -0
  10. package/components/mui_extended/Divider/slots/index.d.ts +2 -0
  11. package/components/mui_extended/Divider/types.d.ts +46 -0
  12. package/components/mui_extended/IconButton/IconButton.styles.js +2 -1
  13. package/package.json +1 -1
package/@types/types.d.ts CHANGED
@@ -143,6 +143,7 @@ import { LinearProgressIndeterminateOwnerState, LinearProgressIndeterminateType
143
143
  import { MenuDividerOwnerState, MenuDividerSlotsType } from '../components/mui_extended/MenuDivider/types';
144
144
  import { RHFSelectSlotsType, RHFSelectOwnerState } from '../components/hook-form/RHFSelect/types';
145
145
  import { RHFCheckBoxOwnerState, RHFCheckBoxSlotsType } from '../components/hook-form/RHFCheckbox/types';
146
+ import { DividerOwnerState, DividerSlotsType } from '../components/mui_extended/Divider/types';
146
147
 
147
148
  declare module '@mui/material/styles' {
148
149
  // Define the slots in the theme
@@ -202,6 +203,7 @@ declare module '@mui/material/styles' {
202
203
  M4LLinearProgressIndeterminate: LinearProgressIndeterminateType;
203
204
  M4LMenuDivider: MenuDividerSlotsType;
204
205
  M4LRHFSelect: RHFSelectSlotsType;
206
+ M4LDivider: DividerSlotsType;
205
207
  }
206
208
 
207
209
  interface ComponentsPropsList {
@@ -261,6 +263,8 @@ declare module '@mui/material/styles' {
261
263
  M4LLinearProgressIndeterminate: Partial<LinearProgressIndeterminateOwnerState>;
262
264
  M4LMenuDivider: Partial<MenuDividerOwnerState>;
263
265
  M4LRHFSelect: Partial<RHFSelectOwnerState>;
266
+ M4LDivider: Partial<DividerOwnerState>;
267
+
264
268
  }
265
269
 
266
270
  interface Components {
@@ -540,5 +544,10 @@ declare module '@mui/material/styles' {
540
544
  styleOverrides?: ComponentsOverrides<Theme>['M4LRHFSelect'];
541
545
  variants?: ComponentsVariants['M4LRHFSelect'];
542
546
  };
547
+ M4LDivider?: {
548
+ defaultProps?: ComponentsPropsList['M4LDivider'];
549
+ styleOverrides?: ComponentsOverrides<Theme>['M4LDivider'];
550
+ variants?: ComponentsVariants['M4LDivider'];
551
+ };
543
552
  }
544
553
  }
package/components/Chip/Chip.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useModuleSkeleton, useEnvironment, getPropertyByString } from "@m4l/core";
3
- import { useTheme } from "@mui/material";
2
+ import { useModuleSkeleton, useEnvironment } from "@m4l/core";
4
3
  import clsx from "clsx";
5
4
  import { forwardRef } from "react";
6
5
  import { C as CHIP_CLASSES } from "./constants.js";
@@ -24,18 +23,11 @@ const Chip = forwardRef((props, ref) => {
24
23
  } = props;
25
24
  const { currentSize } = useComponentSize(size);
26
25
  const isSkeleton = useModuleSkeleton();
27
- const theme = useTheme();
28
26
  const { host_static_assets, environment_assets } = useEnvironment();
29
27
  const adjustedSize = currentSize === "small" || currentSize === "medium" ? currentSize : "medium";
30
- const paletteColor = getPropertyByString(
31
- theme.vars.palette,
32
- color || "default",
33
- theme.vars.palette.default
34
- );
35
28
  const ownerState = {
36
29
  chipSize: adjustedSize,
37
30
  variant,
38
- paletteColor,
39
31
  color,
40
32
  opacity
41
33
  };
@@ -77,12 +69,12 @@ const Chip = forwardRef((props, ref) => {
77
69
  ChipRootStyled,
78
70
  {
79
71
  role: "button-chip",
80
- tabIndex: 0,
81
72
  size: adjustedSize,
82
73
  onClick,
83
74
  ownerState: { ...ownerState },
84
75
  className: clsx(className, CHIP_CLASSES.root),
85
76
  ref,
77
+ ...onClick ? { tabIndex: 0 } : {},
86
78
  ...others,
87
79
  children: [
88
80
  renderIcon(startIcon, "ChipStartIcon"),
package/components/Chip/ChipStyles.js CHANGED
@@ -6,444 +6,48 @@ const chipStyles = {
6
6
  * @updatedAt 2025-01-08 10:36:40 - automatic
7
7
  * @updatedUser Andrés Quintero - automatic
8
8
  */
9
- root: ({ theme, ownerState }) => ({
10
- display: "flex",
11
- alignItems: "center",
12
- padding: theme.vars.size.baseSpacings.sp1,
13
- borderRadius: theme.vars.size.borderRadius["r0-5"],
14
- width: "max-content",
15
- cursor: "pointer",
16
- ...ownerState.variant === "contained" && {
17
- ...ownerState.color === "default" && {
18
- color: theme.vars.palette.chips.default.contrastText,
19
- backgroundColor: theme.vars.palette.chips.default.backgroundColor,
20
- "& .M4LIconClass-root": {
21
- backgroundColor: theme.vars.palette.chips.default.contrastText
22
- },
23
- "&:hover": {
24
- backgroundColor: theme.vars.palette.chips.default.backgroundHover,
25
- "&:active": {
26
- backgroundColor: theme.vars.palette.chips.default.backgroundActive,
27
- "& .M4LIconClass-root": {
28
- backgroundColor: theme.vars.palette.chips.default.contrastText
29
- }
30
- }
31
- },
32
- ...ownerState.opacity === true && {
33
- color: theme.vars.palette.chips.default.semanticText,
34
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundColor,
35
- "& .M4LIconClass-root": {
36
- backgroundColor: theme.vars.palette.chips.default.semanticText
37
- },
38
- "&:hover": {
39
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
40
- "&:active": {
41
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
42
- "& .M4LIconClass-root": {
43
- backgroundColor: theme.vars.palette.chips.default.semanticText
44
- }
45
- }
46
- }
47
- },
48
- "&:focus-visible": {
49
- boxShadow: "none",
50
- outline: theme.vars.size.borderStroke.container,
51
- outlineColor: theme.vars.palette.border.main,
52
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
53
- backgroundColor: theme.vars.palette.chips.default.backgroundActive
54
- }
9
+ root: ({ theme, ownerState }) => {
10
+ const keyColor = ownerState.color || "defualt";
11
+ const keyColorOpacity = keyColor + "Opacity";
12
+ const keyColorConditionalOpacity = ownerState.opacity ? keyColorOpacity : keyColor;
13
+ const bgColor = ownerState.variant !== "outlined" ? theme.vars.palette.chips[keyColorConditionalOpacity].backgroundColor : "transparent";
14
+ const bgActive = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundActive;
15
+ const bgHover = theme.vars.palette.chips[keyColorConditionalOpacity].backgroundHover;
16
+ const color = ownerState.variant === "contained" && !ownerState.opacity ? theme.vars.palette.chips[keyColorConditionalOpacity].contrastText : theme.vars.palette.chips[keyColorConditionalOpacity].semanticText;
17
+ return {
18
+ display: "flex",
19
+ alignItems: "center",
20
+ padding: theme.vars.size.baseSpacings.sp1,
21
+ borderRadius: theme.vars.size.borderRadius["r0-5"],
22
+ width: "max-content",
23
+ cursor: "pointer",
24
+ color,
25
+ backgroundColor: bgColor,
26
+ "& .M4LIcon-icon": {
27
+ backgroundColor: `${color} !important`
55
28
  },
56
- ...ownerState.color === "warning" && {
57
- color: theme.vars.palette.chips.warning.contrastText,
58
- backgroundColor: theme.vars.palette.chips.warning.backgroundColor,
59
- "& .M4LIconClass-root": {
60
- backgroundColor: theme.vars.palette.chips.warning.contrastText
61
- },
62
- "&:hover": {
63
- backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
64
- "&:active": {
65
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
66
- "& .M4LIconClass-root": {
67
- backgroundColor: theme.vars.palette.chips.warning.contrastText
68
- }
69
- }
70
- },
71
- ...ownerState.opacity === true && {
72
- color: theme.vars.palette.chips.warningOpacity.contrastText,
73
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundColor,
74
- "& .M4LIconClass-root": {
75
- backgroundColor: theme.vars.palette.text.primary
76
- },
77
- "&:hover": {
78
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
79
- "&:active": {
80
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
81
- "& .M4LIconClass-root": {
82
- backgroundColor: theme.vars.palette.text.primary
83
- }
84
- }
85
- }
86
- },
87
- "&:focus-visible": {
88
- boxShadow: "none",
89
- outline: theme.vars.size.borderStroke.container,
90
- outlineColor: theme.vars.palette.border.main,
91
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
92
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive
93
- }
29
+ "&:hover": {
30
+ backgroundColor: bgHover
94
31
  },
95
- ...ownerState.color === "success" && {
96
- color: theme.vars.palette.chips.success.contrastText,
97
- backgroundColor: theme.vars.palette.chips.success.backgroundColor,
98
- "& .M4LIconClass-root": {
99
- backgroundColor: theme.vars.palette.chips.info.contrastText
100
- },
101
- "&:hover": {
102
- backgroundColor: theme.vars.palette.chips.success.backgroundHover,
103
- "&:active": {
104
- backgroundColor: theme.vars.palette.chips.success.backgroundActive,
105
- "& .M4LIconClass-root": {
106
- backgroundColor: theme.vars.palette.chips.info.contrastText
107
- }
108
- }
109
- },
110
- ...ownerState.opacity === true && {
111
- color: theme.vars.palette.text.primary,
112
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundColor,
113
- "& .M4LIconClass-root": {
114
- backgroundColor: theme.vars.palette.text.primary
115
- },
116
- "&:hover": {
117
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
118
- "&:active": {
119
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
120
- "& .M4LIconClass-root": {
121
- backgroundColor: theme.vars.palette.text.primary
122
- }
123
- }
124
- }
125
- },
126
- "&:focus-visible": {
127
- boxShadow: "none",
128
- outline: theme.vars.size.borderStroke.container,
129
- outlineColor: theme.vars.palette.border.main,
130
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
131
- backgroundColor: theme.vars.palette.chips.success.backgroundActive
132
- }
32
+ "&:active": {
33
+ backgroundColor: bgActive
34
+ // '& .M4LIcon-icon': {
35
+ // backgroundColor: color,
36
+ // },
133
37
  },
134
- ...ownerState.color === "error" && {
135
- color: theme.vars.palette.chips.error.contrastText,
136
- backgroundColor: theme.vars.palette.chips.error.backgroundColor,
137
- "& .M4LIconClass-root": {
138
- backgroundColor: theme.vars.palette.chips.error.contrastText
139
- },
140
- "&:hover": {
141
- backgroundColor: theme.vars.palette.chips.error.backgroundHover,
142
- "&:active": {
143
- backgroundColor: theme.vars.palette.chips.error.backgroundActive,
144
- "& .M4LIconClass-root": {
145
- backgroundColor: theme.vars.palette.chips.error.contrastText
146
- }
147
- }
148
- },
149
- ...ownerState.opacity === true && {
150
- color: theme.vars.palette.chips.error.semanticText,
151
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
152
- "& .M4LIconClass-root": {
153
- backgroundColor: theme.vars.palette.chips.error.semanticText
154
- },
155
- "&:hover": {
156
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
157
- "&:active": {
158
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
159
- "& .M4LIconClass-root": {
160
- backgroundColor: theme.vars.palette.chips.error.semanticText
161
- }
162
- }
163
- }
164
- },
165
- "&:focus-visible": {
166
- boxShadow: "none",
167
- outline: theme.vars.size.borderStroke.container,
168
- outlineColor: theme.vars.palette.border.main,
169
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
170
- backgroundColor: theme.vars.palette.chips.error.backgroundActive
171
- }
38
+ ...ownerState.variant === "outlined" && {
39
+ border: `${theme.vars.size.borderStroke.container}`,
40
+ borderColor: color
172
41
  },
173
- ...ownerState.color === "info" && {
174
- color: theme.vars.palette.chips.info.contrastText,
175
- backgroundColor: theme.vars.palette.chips.info.backgroundColor,
176
- "& .M4LIconClass-root": {
177
- backgroundColor: theme.vars.palette.chips.info.contrastText
178
- },
179
- "&:hover": {
180
- backgroundColor: theme.vars.palette.chips.info.backgroundHover,
181
- "&:active": {
182
- backgroundColor: theme.vars.palette.chips.info.backgroundActive,
183
- "& .M4LIconClass-root": {
184
- backgroundColor: theme.vars.palette.chips.info.contrastText
185
- }
186
- }
187
- },
188
- ...ownerState.opacity === true && {
189
- color: theme.vars.palette.text.primary,
190
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
191
- "& .M4LIconClass-root": {
192
- backgroundColor: theme.vars.palette.text.primary
193
- },
194
- "&:hover": {
195
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
196
- "&:active": {
197
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive,
198
- "& .M4LIconClass-root": {
199
- backgroundColor: theme.vars.palette.text.primary
200
- }
201
- }
202
- }
203
- },
204
- "&:focus-visible": {
205
- boxShadow: "none",
206
- outline: theme.vars.size.borderStroke.container,
207
- outlineColor: theme.vars.palette.border.main,
208
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
209
- backgroundColor: theme.vars.palette.chips.info.backgroundActive
210
- }
42
+ "&:focus-visible": {
43
+ boxShadow: "none",
44
+ outline: theme.vars.size.borderStroke.container,
45
+ outlineColor: theme.vars.palette.border.main,
46
+ outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
47
+ backgroundColor: bgActive
211
48
  }
212
- },
213
- ...ownerState.variant === "outlined" && {
214
- backgroundColor: "transparent",
215
- border: `${theme.vars.size.borderStroke.container}`,
216
- ...ownerState.color === "default" && {
217
- color: theme.vars.palette.chips.default.semanticText,
218
- borderColor: theme.vars.palette.chips.default.backgroundColor,
219
- "& .M4LIconClass-root": {
220
- backgroundColor: theme.vars.palette.chips.default.semanticText
221
- },
222
- "&:hover": {
223
- backgroundColor: theme.vars.palette.chips.default.backgroundHover,
224
- "&:active": {
225
- backgroundColor: theme.vars.palette.chips.default.backgroundActive,
226
- "& .M4LIconClass-root": {
227
- backgroundColor: theme.vars.palette.chips.default.semanticText
228
- }
229
- }
230
- },
231
- ...ownerState.opacity === true && {
232
- color: theme.vars.palette.chips.default.semanticText,
233
- borderColor: theme.vars.palette.chips.default.backgroundColor,
234
- "& .M4LIconClass-root": {
235
- backgroundColor: theme.vars.palette.chips.default.semanticText
236
- },
237
- "&:hover": {
238
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundHover,
239
- "&:active": {
240
- backgroundColor: theme.vars.palette.chips.defaultOpacity.backgroundActive,
241
- "& .M4LIconClass-root": {
242
- backgroundColor: theme.vars.palette.chips.default.semanticText
243
- }
244
- }
245
- }
246
- },
247
- "&:focus-visible": {
248
- boxShadow: "none",
249
- outline: theme.vars.size.borderStroke.container,
250
- outlineColor: theme.vars.palette.border.main,
251
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
252
- backgroundColor: theme.vars.palette.chips.default.backgroundActive
253
- }
254
- },
255
- ...ownerState.color === "warning" && {
256
- color: theme.vars.palette.chips.warning.semanticText,
257
- borderColor: theme.vars.palette.chips.warning.backgroundColor,
258
- "& .M4LIconClass-root": {
259
- backgroundColor: theme.vars.palette.chips.warning.semanticText
260
- },
261
- "&:hover": {
262
- backgroundColor: theme.vars.palette.chips.warning.backgroundHover,
263
- "&:active": {
264
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive,
265
- "& .M4LIconClass-root": {
266
- backgroundColor: theme.vars.palette.chips.warning.semanticText
267
- }
268
- }
269
- },
270
- ...ownerState.opacity === true && {
271
- color: theme.vars.palette.chips.default.semanticText,
272
- borderColor: theme.vars.palette.chips.default.backgroundColor,
273
- "& .M4LIconClass-root": {
274
- backgroundColor: theme.vars.palette.chips.default.semanticText
275
- },
276
- "&:hover": {
277
- color: theme.vars.palette.chips.warning.semanticText,
278
- borderColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
279
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundHover,
280
- "& .M4LIconClass-root": {
281
- backgroundColor: theme.vars.palette.chips.warning.semanticText
282
- },
283
- "&:active": {
284
- backgroundColor: theme.vars.palette.chips.warningOpacity.backgroundActive,
285
- "& .M4LIconClass-root": {
286
- backgroundColor: theme.vars.palette.chips.warning.semanticText
287
- }
288
- }
289
- }
290
- },
291
- "&:focus-visible": {
292
- boxShadow: "none",
293
- outline: theme.vars.size.borderStroke.container,
294
- outlineColor: theme.vars.palette.border.main,
295
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
296
- backgroundColor: theme.vars.palette.chips.warning.backgroundActive
297
- }
298
- },
299
- ...ownerState.color === "success" && {
300
- color: theme.vars.palette.chips.success.semanticText,
301
- borderColor: theme.vars.palette.chips.success.backgroundColor,
302
- "& .M4LIconClass-root": {
303
- backgroundColor: theme.vars.palette.chips.success.semanticText
304
- },
305
- "&:hover": {
306
- color: theme.vars.palette.chips.success.contrastText,
307
- backgroundColor: theme.vars.palette.chips.success.backgroundHover,
308
- "& .M4LIconClass-root": {
309
- backgroundColor: theme.vars.palette.chips.success.contrastText
310
- },
311
- "&:active": {
312
- backgroundColor: theme.vars.palette.chips.success.backgroundActive,
313
- "& .M4LIconClass-root": {
314
- backgroundColor: theme.vars.palette.chips.success.contrastText
315
- }
316
- }
317
- },
318
- ...ownerState.opacity === true && {
319
- color: theme.vars.palette.chips.success.semanticText,
320
- borderColor: theme.vars.palette.chips.successOpacity.backgroundColor,
321
- "& .M4LIconClass-root": {
322
- backgroundColor: theme.vars.palette.chips.success.semanticText
323
- },
324
- "&:hover": {
325
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundHover,
326
- "&:active": {
327
- backgroundColor: theme.vars.palette.chips.successOpacity.backgroundActive,
328
- "& .M4LIconClass-root": {
329
- backgroundColor: theme.vars.palette.chips.success.semanticText
330
- }
331
- }
332
- }
333
- },
334
- "&:focus-visible": {
335
- boxShadow: "none",
336
- outline: theme.vars.size.borderStroke.container,
337
- outlineColor: theme.vars.palette.border.main,
338
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
339
- backgroundColor: theme.vars.palette.chips.success.backgroundActive
340
- }
341
- },
342
- ...ownerState.color === "error" && {
343
- color: theme.vars.palette.chips.error.semanticText,
344
- borderColor: theme.vars.palette.chips.error.backgroundColor,
345
- "& .M4LIconClass-root": {
346
- backgroundColor: theme.vars.palette.chips.error.semanticText
347
- },
348
- "&:hover": {
349
- color: theme.vars.palette.chips.error.contrastText,
350
- backgroundColor: theme.vars.palette.chips.error.backgroundHover,
351
- "& .M4LIconClass-root": {
352
- backgroundColor: theme.vars.palette.chips.error.contrastText
353
- },
354
- "&:active": {
355
- backgroundColor: theme.vars.palette.chips.error.backgroundActive,
356
- "& .M4LIconClass-root": {
357
- backgroundColor: theme.vars.palette.chips.error.contrastText
358
- }
359
- }
360
- },
361
- ...ownerState.opacity === true && {
362
- color: theme.vars.palette.chips.error.semanticText,
363
- borderColor: theme.vars.palette.chips.errorOpacity.backgroundColor,
364
- "& .M4LIconClass-root": {
365
- backgroundColor: theme.vars.palette.chips.error.semanticText
366
- },
367
- "&:hover": {
368
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundHover,
369
- "&:active": {
370
- backgroundColor: theme.vars.palette.chips.errorOpacity.backgroundActive,
371
- "& .M4LIconClass-root": {
372
- backgroundColor: theme.vars.palette.chips.error.semanticText
373
- }
374
- }
375
- }
376
- },
377
- "&:focus-visible": {
378
- boxShadow: "none",
379
- outline: theme.vars.size.borderStroke.container,
380
- outlineColor: theme.vars.palette.border.main,
381
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
382
- backgroundColor: theme.vars.palette.chips.error.backgroundActive
383
- }
384
- },
385
- ...ownerState.color === "info" && {
386
- color: theme.vars.palette.chips.info.semanticText,
387
- borderColor: theme.vars.palette.chips.info.backgroundColor,
388
- "& .M4LIconClass-root": {
389
- backgroundColor: theme.vars.palette.chips.info.semanticText
390
- },
391
- "&:hover": {
392
- color: theme.vars.palette.chips.info.contrastText,
393
- backgroundColor: theme.vars.palette.chips.info.backgroundHover,
394
- "& .M4LIconClass-root": {
395
- backgroundColor: theme.vars.palette.chips.info.contrastText
396
- },
397
- "&:active": {
398
- backgroundColor: theme.vars.palette.chips.info.backgroundActive,
399
- "& .M4LIconClass-root": {
400
- backgroundColor: theme.vars.palette.chips.info.contrastText
401
- }
402
- }
403
- },
404
- ...ownerState.opacity === true && {
405
- color: theme.vars.palette.chips.info.semanticText,
406
- borderColor: theme.vars.palette.chips.infoOpacity.backgroundColor,
407
- "& .M4LIconClass-root": {
408
- backgroundColor: theme.vars.palette.chips.info.semanticText
409
- },
410
- "&:hover": {
411
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundHover,
412
- "&:active": {
413
- backgroundColor: theme.vars.palette.chips.infoOpacity.backgroundActive
414
- }
415
- }
416
- },
417
- "&:focus-visible": {
418
- boxShadow: "none",
419
- outline: theme.vars.size.borderStroke.container,
420
- outlineColor: theme.vars.palette.border.main,
421
- outlineOffset: theme.vars.size.baseSpacings["sp0-5"],
422
- backgroundColor: theme.vars.palette.chips.info.backgroundActive
423
- }
424
- }
425
- },
426
- // Estilos específicos para el tamaño small
427
- ...ownerState.chipSize === "small" && {
428
- ...theme.generalSettings.isMobile ? {
429
- height: theme.vars.size.mobile.small.base,
430
- minHeight: theme.vars.size.mobile.small.base
431
- } : {
432
- height: theme.vars.size.desktop.small.base,
433
- minHeight: theme.vars.size.desktop.small.base
434
- }
435
- },
436
- // Estilos específicos para el tamaño medium
437
- ...ownerState.chipSize === "medium" && {
438
- ...theme.generalSettings.isMobile ? {
439
- height: theme.vars.size.mobile.medium.base,
440
- minHeight: theme.vars.size.mobile.medium.base
441
- } : {
442
- height: theme.vars.size.desktop.medium.base,
443
- minHeight: theme.vars.size.desktop.medium.base
444
- }
445
- }
446
- }),
49
+ };
50
+ },
447
51
  /**
448
52
  * Styles for the text chip element.
449
53
  * @author SebastianM - automatic
package/components/Chip/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ComponentPalletColor, Sizes } from '@m4l/styles';
2
- import { PaletteColor, Theme } from '@mui/material';
2
+ import { Theme } from '@mui/material';
3
3
  import { OverridesStyleRules } from '@mui/material/styles/overrides';
4
4
  import { EventHandler, ReactNode } from 'react';
5
5
  import { CHIP_KEY_COMPONENT } from './constants';
@@ -77,7 +77,6 @@ export interface ChipProps {
77
77
  */
78
78
  export interface ChipOwnerState extends Pick<ChipProps, 'variant' | 'color'> {
79
79
  opacity?: boolean;
80
- paletteColor: PaletteColor;
81
80
  chipSize: ChipProps['size'];
82
81
  }
83
82
  /**
package/components/mui_extended/Divider/Divider.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { DividerProps } from './types';
2
+ /**
3
+ * Componente Divider que extiende las props de MUIDividerProps.
4
+ *
5
+ * Este componente se utiliza para crear un divisor visual entre elementos.
6
+ * Puede ser horizontal o vertical y puede tener diferentes variantes de estilo.
7
+ * @param props - Las propiedades del componente Divider.
8
+ * @returns El componente Divider.
9
+ * @example
10
+ * ```tsx
11
+ * <Divider orientation="horizontal" customVariant="solid" />
12
+ * ```
13
+ */
14
+ export declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;
package/components/mui_extended/Divider/Divider.styles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { DividerStyles } from './types';
2
+ export declare const dividerStyles: DividerStyles;
package/components/mui_extended/Divider/constants.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const DIVIDER_KEY_COMPONENT = "M4LDivider";
package/components/mui_extended/Divider/slots/DividerEnum.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare enum DividerSlots {
2
+ root = "root",
3
+ divider = "divider"
4
+ }
package/components/mui_extended/Divider/slots/DividerSlots.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ export declare const DividerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DividerOwnerState> & Record<string, unknown> & {
2
+ ownerState: Partial<import('../types').DividerOwnerState> & Record<string, unknown>;
3
+ }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
4
+ export declare const DividerStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').DividerOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
5
+ ref?: ((instance: HTMLHRElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLHRElement> | null | undefined;
6
+ }, "children" | "light" | "style" | "absolute" | "variant" | "textAlign" | "sx" | "classes" | "className" | "orientation" | "flexItem">, "children" | "ref" | "title" | "id" | "light" | "hidden" | "color" | "content" | "style" | "absolute" | "variant" | "textAlign" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "orientation" | "flexItem"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').DividerOwnerState> & Record<string, unknown> & {
7
+ ownerState: Partial<import('../types').DividerOwnerState> & Record<string, unknown>;
8
+ }, {}, {}>;
package/components/mui_extended/Divider/slots/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './DividerEnum';
2
+ export * from './DividerSlots';
package/components/mui_extended/Divider/types.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { DividerProps as MUIDividerProps, Theme } from '@mui/material';
2
+ import { OverridesStyleRules } from '@mui/material/styles/overrides';
3
+ import { DividerSlots } from './slots/DividerEnum';
4
+ import { DIVIDER_KEY_COMPONENT } from './constants';
5
+ import { Sizes } from '@m4l/styles';
6
+ /**
7
+ * Propiedades del componente `MenuDivider`.
8
+ */
9
+ export interface DividerProps extends MUIDividerProps {
10
+ /**
11
+ * Identificador de prueba para el `Divider`.
12
+ */
13
+ dataTestId?: string;
14
+ /**
15
+ * Clase CSS adicional para el `Divider`.
16
+ */
17
+ className?: string;
18
+ /**
19
+ * Define el estilo del divisor.
20
+ * - `solid`: Una línea sólida.
21
+ * - `dash`: Una línea con guiones.
22
+ */
23
+ customVariant?: 'solid' | 'dash';
24
+ /**
25
+ * Define la orientación del `Divider`.
26
+ * - `'horizontal'`: Una línea horizontal.
27
+ * - `'vertical'`: Una línea vertical.
28
+ */
29
+ orientation?: 'horizontal' | 'vertical';
30
+ /**
31
+ * Tamaño del `Divider`.
32
+ */
33
+ size?: Extract<Sizes, 'small' | 'medium'>;
34
+ }
35
+ /**
36
+ * Estado del propietario del `Divider` utilizado para definir propiedades internas de estilo y comportamiento.
37
+ */
38
+ export type DividerOwnerState = Pick<DividerProps, 'orientation' | 'customVariant' | 'size'>;
39
+ /**
40
+ * Define los tipos de Slots disponibles para el `Divider`.
41
+ */
42
+ export type DividerSlotsType = keyof typeof DividerSlots;
43
+ /**
44
+ * Estilos aplicables al `Divider` utilizando temas y slots personalizados.
45
+ */
46
+ export type DividerStyles = OverridesStyleRules<DividerSlotsType, typeof DIVIDER_KEY_COMPONENT, Theme>;
package/components/mui_extended/IconButton/IconButton.styles.js CHANGED
@@ -56,8 +56,9 @@ const iconButtonStyles = {
56
56
  }
57
57
  }
58
58
  },
59
- ":focus-visible": {
59
+ "&:focus-visible": {
60
60
  background: ownerState.paletteColor?.activeOpacity,
61
+ outline: `1px solid ${theme.vars.palette.border.main}`,
61
62
  '& [class*="M4LIcon-icon"]': {
62
63
  backgroundColor: ownerState.componentPaletteColor === "default" ? ownerState.paletteColor?.contrastText : ownerState.paletteColor?.active
63
64
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.1.85",
3
+ "version": "9.1.87",
4
4
  "license": "UNLICENSED",
5
5
  "lint-staged": {
6
6
  "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"