@m4l/components 9.3.12-BE010925-beta.1 → 9.3.12-BE080925-beta.1

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.
@@ -73,6 +73,7 @@ export declare const colorsLight: {
73
73
  readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
74
74
  readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
75
75
  readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
76
+ readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
76
77
  readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
77
78
  readonly primary: {
78
79
  readonly outlined: {
@@ -277,6 +278,7 @@ export declare const colorsLight: {
277
278
  readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
278
279
  readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
279
280
  readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
281
+ readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
280
282
  readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
281
283
  readonly primary: {
282
284
  readonly outlined: {
@@ -482,6 +484,7 @@ export declare const colorsDark: {
482
484
  readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
483
485
  readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
484
486
  readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
487
+ readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
485
488
  readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
486
489
  readonly primary: {
487
490
  readonly outlined: {
@@ -686,6 +689,7 @@ export declare const colorsDark: {
686
689
  readonly candy: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
687
690
  readonly persianGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
688
691
  readonly aqua: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
692
+ readonly sheetGreen: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
689
693
  readonly disabled: Record<import('@m4l/styles').ChipColorVariant, import('@m4l/styles').ChipColor>;
690
694
  readonly primary: {
691
695
  readonly outlined: {
@@ -1,8 +1,7 @@
1
1
  import { CardProps } from '../types';
2
- import { Theme } from '@mui/material';
3
2
  /**
4
3
  * Obtiene el tamaño del gap de la tarjeta.
5
- * @param spacing - El gap de la tarjeta.
4
+ * @param gap - El gap de la tarjeta.
6
5
  * @returns El tamaño del gap de la tarjeta.
7
6
  */
8
- export declare const getSizeSpacing: (spacing: CardProps["gap"] | number | undefined | null, theme: Theme) => string | number;
7
+ export declare const getSizeSpacing: (gap: CardProps["gap"] | number | undefined | null) => number;
@@ -2,8 +2,6 @@ import { Theme } from '@mui/material';
2
2
  import { M4LOverridesStyleRules } from '../../@types/augmentations';
3
3
  import { CARD_KEY } from './constants';
4
4
  import { CardSlots } from './slots/CardEnum';
5
- import { Density } from '@m4l/styles';
6
- export type SpacingsCard = number | keyof Density;
7
5
  export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
8
6
  /**
9
7
  * Contenido de la tarjeta.
@@ -16,11 +14,11 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
16
14
  /**
17
15
  * Espacio entre los elementos de la tarjeta.
18
16
  */
19
- gap?: SpacingsCard;
17
+ gap?: number | 'compact' | 'standard' | 'comfortable';
20
18
  /**
21
19
  * Espacio entre los elementos de la tarjeta.
22
20
  */
23
- padding?: SpacingsCard;
21
+ padding?: number | 'compact' | 'standard' | 'comfortable';
24
22
  /**
25
23
  * Dirección de la tarjeta.
26
24
  */
@@ -49,9 +47,9 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
49
47
  export type CardSlotsType = keyof typeof CardSlots;
50
48
  export type CardOwnerState = {
51
49
  variant: CardProps['variant'];
52
- CardGap: CardProps['gap'];
50
+ gap: CardProps['gap'];
53
51
  height: CardProps['height'];
54
- CardPadding: CardProps['padding'];
52
+ padding: CardProps['padding'];
55
53
  direction: CardProps['direction'];
56
54
  onClick: boolean;
57
55
  justifyContent: CardProps['justifyContent'];
@@ -4,7 +4,6 @@ export * from './AppBar';
4
4
  export * from './AppBar/AppBar';
5
5
  export * from './areas';
6
6
  export * from './BaseModule';
7
- export * from './Card';
8
7
  export * from './Chip';
9
8
  export * from './commercial';
10
9
  export * from './CommonActions/';
@@ -24,11 +24,13 @@ const badgeStyles = {
24
24
  ...theme.generalSettings.isMobile ? {
25
25
  height: theme.vars.size.baseSpacings.sp5,
26
26
  width: ownerState?.displayBadgeContent ? "26px" : theme.vars.size.baseSpacings.sp5,
27
- right: ownerState?.displayBadgeContent ? 4 : 0
27
+ right: ownerState?.displayBadgeContent ? 0 : 2,
28
+ top: ownerState?.displayBadgeContent ? 0 : 2
28
29
  } : {
29
30
  height: theme.vars.size.baseSpacings["sp3-5"],
30
31
  width: ownerState?.displayBadgeContent ? "23px" : theme.vars.size.baseSpacings["sp3-5"],
31
- right: ownerState?.displayBadgeContent ? 4 : 0
32
+ right: ownerState?.displayBadgeContent ? 0 : 2,
33
+ top: ownerState?.displayBadgeContent ? 0 : 2
32
34
  },
33
35
  // Estilos para variantes
34
36
  ...ownerState?.BadgeVariant === "dot" && {
@@ -13,7 +13,7 @@ const iconButtonStyles = {
13
13
  overflow: "hidden",
14
14
  cursor: ownerState?.disabled ? "not-allowed" : "pointer",
15
15
  color: theme.vars.palette.text.primary,
16
- borderRadius: theme.size.borderRadius.r1,
16
+ borderRadius: theme.size.borderRadius["r1-5"],
17
17
  pointerEvents: ownerState?.disabled ? "none" : "auto",
18
18
  display: ownerState?.isSkeleton ? "none" : "flex",
19
19
  justifyContent: "center",
@@ -47,24 +47,24 @@ const iconButtonStyles = {
47
47
  // Estilos para la variante contained
48
48
  ...ownerState?.variant === "contained" && {
49
49
  // 🎯 Color de fondo según variante y color del componente
50
- backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
50
+ backgroundColor: ownerState?.variant === "contained" ? ownerState?.color === "error" ? paletteColor.active : ownerState?.color === "default" ? theme.vars.palette.primary.selected : ownerState?.color === "success" ? theme.vars.palette.success.selected : paletteColor.selected : ownerState?.color === "error" ? paletteColor.activeOpacity : paletteColor.selectedOpacity,
51
51
  "&&& .M4LIcon-icon": {
52
52
  backgroundColor: ownerState?.variant === "contained" ? theme.vars.palette.primary.contrastText : paletteColor.semanticText
53
53
  }
54
54
  },
55
55
  // Estilos para la variante text
56
56
  ...ownerState.variant === "outline" && {
57
- backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
57
+ backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
58
58
  border: theme.vars.size.borderStroke.actionInput,
59
59
  borderColor: ownerState.color === "default" ? theme.vars.palette.primary.active : paletteColor.active,
60
60
  "&&& .M4LIcon-icon": {
61
- backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
61
+ backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
62
62
  }
63
63
  },
64
64
  ...ownerState.variant === "text" && {
65
- backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.activeOpacity : paletteColor.activeOpacity,
65
+ backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.selectedOpacity : paletteColor.selectedOpacity,
66
66
  "&&& .M4LIcon-icon": {
67
- backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : paletteColor.selected
67
+ backgroundColor: ownerState.color === "default" ? theme.vars.palette.primary.semanticText : ownerState.color === "warning" ? paletteColor.active : paletteColor.selected
68
68
  }
69
69
  }
70
70
  } : {
@@ -128,7 +128,7 @@ const iconButtonStyles = {
128
128
  backgroundColor: paletteColor.enabled,
129
129
  // 🖼️ Color del icono
130
130
  "&&& .M4LIcon-icon": {
131
- backgroundColor: paletteColor.semanticText
131
+ backgroundColor: ownerState?.color === "default" ? paletteColor.semanticText : paletteColor.contrastText
132
132
  },
133
133
  // 🖱️ Estado Hover
134
134
  "&:hover": {
@@ -18,7 +18,6 @@ function Typography(props) {
18
18
  children,
19
19
  disabled,
20
20
  ellipsis = false,
21
- fontFamily = "inter",
22
21
  ...other
23
22
  } = props;
24
23
  const isSkeleton = useModuleSkeleton();
@@ -31,8 +30,7 @@ function Typography(props) {
31
30
  skeletonRows,
32
31
  variant,
33
32
  skeleton: isSkeleton,
34
- ellipsis,
35
- fontFamily
33
+ ellipsis
36
34
  };
37
35
  return /* @__PURE__ */ jsx(
38
36
  StyledMUITypography,
@@ -47,10 +47,6 @@ export interface TypographyProps extends Omit<MUITypographyProps, 'color' | 'var
47
47
  * Si se activa, el texto se corta y se muestra un elipsis.
48
48
  */
49
49
  ellipsis?: boolean;
50
- /**
51
- * Familia de fuentes a usar para el componente.
52
- */
53
- fontFamily?: 'inter' | 'jura';
54
50
  }
55
51
  /**
56
52
  * Define valores de estado necesarios para estilar el componente.
@@ -63,7 +59,6 @@ export interface TypographyOwnerState {
63
59
  skeletonRows: TypographyProps['skeletonRows'];
64
60
  skeleton: boolean;
65
61
  ellipsis: TypographyProps['ellipsis'];
66
- fontFamily: TypographyProps['fontFamily'];
67
62
  }
68
63
  /**
69
64
  * Agrupa la lista de slots del componente.
@@ -8,7 +8,6 @@ const typographyStyles = {
8
8
  root: ({ ownerState, theme }) => ({
9
9
  margin: 0,
10
10
  cursor: "default",
11
- fontFamily: ownerState?.fontFamily === "jura" ? "Jura" : "Inter",
12
11
  "&.M4lclassCssSpecificity": {
13
12
  // Estilos generales 🌐
14
13
  // skeleton spacing when multiple rows 🦴
package/index.js CHANGED
@@ -18,8 +18,7 @@ import { a as a2, A as A6 } from "./components/areas/contexts/AreasContext/index
18
18
  import { u } from "./components/areas/hooks/useAreas/index.js";
19
19
  import { A as A7, a as a3, L as L2, b as b2, g as g3 } from "./components/areas/dictionary.js";
20
20
  import { B } from "./components/BaseModule/BaseModule.js";
21
- import { C } from "./components/Card/Card.js";
22
- import { C as C2 } from "./components/Chip/Chip.js";
21
+ import { C } from "./components/Chip/Chip.js";
23
22
  import { A as A8 } from "./components/commercial/AppBarCommercial/index.js";
24
23
  import { H } from "./components/commercial/HamburgerMenu/HamburgerMenu.js";
25
24
  import { T } from "./components/commercial/TopBar/TopBar.js";
@@ -30,32 +29,32 @@ import { A as A11 } from "./components/CommonActions/components/ActionIntro/Acti
30
29
  import { A as A12 } from "./components/CommonActions/components/ActionFormCancel/ActionFormCancel.js";
31
30
  import { A as A13 } from "./components/CommonActions/components/ActionFormIntro/ActionFormIntro.js";
32
31
  import { D, d, g as g4 } from "./components/CommonActions/dictionary.js";
33
- import { C as C3 } from "./components/ContainerFlow/ContainerFlow.js";
32
+ import { C as C2 } from "./components/ContainerFlow/ContainerFlow.js";
34
33
  import { D as D2 } from "./components/DataGrid/DataGrid.js";
35
34
  import { g as g5 } from "./components/DataGrid/dictionary.js";
36
35
  import { N, T as T2 } from "./components/DataGrid/subcomponents/editors/TextEditor/index.js";
37
36
  import { g as g6 } from "./components/DataGrid/utils/getDataGridRowsFromSet.js";
38
37
  import { b as b3, a as a4, e } from "./components/DataGrid/constants.js";
39
- import { C as C4 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
38
+ import { C as C3 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/formatter.js";
40
39
  import { u as u2 } from "./components/DataGrid/formatters/ColumnBooleanFormatter/useColumnBoolean.js";
41
- import { C as C5 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
40
+ import { C as C4 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/formatter.js";
42
41
  import { u as u3 } from "./components/DataGrid/formatters/ColumnConcatenatedValuesFormatter/useColumnConcatenatedValues.js";
43
- import { C as C6 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
42
+ import { C as C5 } from "./components/DataGrid/formatters/ColumnDateFormatter/formatter.js";
44
43
  import { u as u4 } from "./components/DataGrid/formatters/ColumnDateFormatter/useColumnDate.js";
45
- import { C as C7 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
46
- import { C as C8 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
44
+ import { C as C6 } from "./components/DataGrid/formatters/ColumnIconFormatter/formatter.js";
45
+ import { C as C7 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/formatter.js";
47
46
  import { u as u5 } from "./components/DataGrid/formatters/ColumnInteractiveCheckFormatter/useColumnInteractiveCheck.js";
48
- import { C as C9 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
47
+ import { C as C8 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js";
49
48
  import { u as u6 } from "./components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js";
50
- import { C as C10 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
49
+ import { C as C9 } from "./components/DataGrid/formatters/ColumnPointsFormatter/formatter.js";
51
50
  import { u as u7 } from "./components/DataGrid/formatters/ColumnPointsFormatter/useColumnPoints.js";
52
- import { C as C11 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
51
+ import { C as C10 } from "./components/DataGrid/formatters/ColumnPriceFormatter/formatter.js";
53
52
  import { u as u8 } from "./components/DataGrid/formatters/ColumnPriceFormatter/useColumnPrice.js";
54
- import { C as C12 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
53
+ import { C as C11 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/formatter.js";
55
54
  import { u as u9 } from "./components/DataGrid/formatters/ColumnSetCheckFormatter/useColumnSetCheck.js";
56
- import { C as C13 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
55
+ import { C as C12 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/formatter.js";
57
56
  import { u as u10 } from "./components/DataGrid/formatters/ColumnUncertaintyFormatter/useColumnUncertainty.js";
58
- import { C as C14 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
57
+ import { C as C13 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js";
59
58
  import { u as u11 } from "./components/DataGrid/formatters/ColumnChipStatusFormatter/useColumnChipStatus.js";
60
59
  import { D as D3 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
61
60
  import { d as d2 } from "./components/DragResizeWindowRND/classes/index.js";
@@ -78,7 +77,7 @@ import { R as R3 } from "./components/extended/React-Json-Viewer/ReactJsonViewer
78
77
  import { A as A14 } from "./components/mui_extended/Avatar/Avatar.js";
79
78
  import { B as B2 } from "./components/mui_extended/BoxIcon/index.js";
80
79
  import { B as B3 } from "./components/mui_extended/Breadcrumbs/index.js";
81
- import { C as C15 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
80
+ import { C as C14 } from "./components/mui_extended/CircularProgress/CircularProgress.js";
82
81
  import { B as B4 } from "./components/mui_extended/Badge/Badge.js";
83
82
  import { L as L3 } from "./components/mui_extended/LinearProgress/index.js";
84
83
  import { L as L4 } from "./components/mui_extended/LinkWithRoute/index.js";
@@ -88,7 +87,7 @@ import { A as A15 } from "./components/mui_extended/Accordion/Accordion.js";
88
87
  import { T as T3 } from "./components/mui_extended/Tooltip/Tooltip.js";
89
88
  import { I as I2 } from "./components/mui_extended/IconButton/IconButton.js";
90
89
  import { B as B5 } from "./components/mui_extended/Button/Button.js";
91
- import { C as C16 } from "./components/mui_extended/CheckBox/CheckBox.js";
90
+ import { C as C15 } from "./components/mui_extended/CheckBox/CheckBox.js";
92
91
  import { I as I3 } from "./components/mui_extended/ImageButton/ImageButton.js";
93
92
  import { P as P2 } from "./components/mui_extended/Popover/Popover.js";
94
93
  import { S as S4 } from "./components/mui_extended/Select/Select.js";
@@ -116,10 +115,10 @@ import { B as B6 } from "./components/formatters/BooleanFormatter/BooleanFormatt
116
115
  import { D as D8, g as g12 } from "./components/formatters/DateFormatter/DateFormatter.js";
117
116
  import { U, g as g13 } from "./components/formatters/UncertaintyFormatter/UncertaintyFormatter.js";
118
117
  import { P as P3, g as g14 } from "./components/formatters/PointsFormatter/PointsFormatter.js";
119
- import { C as C17, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
118
+ import { C as C16, g as g15 } from "./components/formatters/ConcatenatedFormatter/ConcatenatedFormatter.js";
120
119
  import { P as P4, u as u12 } from "./components/formatters/PeriodFormatter/PeriodFormatter.js";
121
120
  import { P as P5, g as g16 } from "./components/formatters/PriceFormatter/PriceFormatter.js";
122
- import { C as C18 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
121
+ import { C as C17 } from "./components/formatters/ChipStatusFormatter/ChipStatusFormatter.js";
123
122
  import { g as g17 } from "./components/formatters/DistanceToNowFormatter/dictionary.js";
124
123
  import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
125
124
  import { g as g18 } from "./components/formatters/dictionary.js";
@@ -252,24 +251,23 @@ export {
252
251
  B2 as BoxIcon,
253
252
  B3 as Breadcrumbs,
254
253
  B5 as Button,
255
- C as Card,
256
- C16 as CheckBox,
257
- C2 as Chip,
258
- C18 as ChipStatusFormatter,
259
- C15 as CircularProgress,
260
- C4 as ColumnBooleanFormatter,
261
- C14 as ColumnChipStatusFormatter,
262
- C5 as ColumnConcatenatedValueFormatter,
263
- C6 as ColumnDateFormatter,
264
- C7 as ColumnIconFormatter,
265
- C8 as ColumnInteractiveCheckFormatter,
266
- C9 as ColumnNestedValueFormatter,
267
- C10 as ColumnPointsFormatter,
268
- C11 as ColumnPriceFormatter,
269
- C12 as ColumnSetCheckFormatter,
270
- C13 as ColumnUncertaintyFormatter,
271
- C17 as ConcatenatedFormatter,
272
- C3 as ContainerFlow,
254
+ C15 as CheckBox,
255
+ C as Chip,
256
+ C17 as ChipStatusFormatter,
257
+ C14 as CircularProgress,
258
+ C3 as ColumnBooleanFormatter,
259
+ C13 as ColumnChipStatusFormatter,
260
+ C4 as ColumnConcatenatedValueFormatter,
261
+ C5 as ColumnDateFormatter,
262
+ C6 as ColumnIconFormatter,
263
+ C7 as ColumnInteractiveCheckFormatter,
264
+ C8 as ColumnNestedValueFormatter,
265
+ C9 as ColumnPointsFormatter,
266
+ C10 as ColumnPriceFormatter,
267
+ C11 as ColumnSetCheckFormatter,
268
+ C12 as ColumnUncertaintyFormatter,
269
+ C16 as ConcatenatedFormatter,
270
+ C2 as ContainerFlow,
273
271
  b3 as DATAGRID_ROW_HEADER_HEIGHTS,
274
272
  a4 as DATAGRID_ROW_HEIGHTS,
275
273
  e as DATAGRID_SEMANTIC_WIDTHS,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@m4l/components",
3
- "version": "9.3.12-BE010925-beta.1",
3
+ "version": "9.3.12-BE080925-beta.1",
4
4
  "license": "UNLICENSED",
5
5
  "description": "M4L Components",
6
6
  "lint-staged": {
@@ -11,8 +11,8 @@
11
11
  "@googlemaps/js-api-loader": "^1.16.6",
12
12
  "@hookform/resolvers": "2.9.11",
13
13
  "@m4l/core": "^2.0.0",
14
- "@m4l/graphics": "7.1.4-BE010925-beta.1",
15
- "@m4l/styles": "7.1.33-BE010925-beta.1",
14
+ "@m4l/graphics": "^7.0.0",
15
+ "@m4l/styles": "^7.0.0",
16
16
  "@microlink/react-json-view": "^1.23.3",
17
17
  "@mui/lab": "5.0.0-alpha.173",
18
18
  "@mui/material": "5.16.7",
@@ -36,4 +36,7 @@ export declare const WithBadgeDot: Story;
36
36
  * Story for IconButton with skeleton.
37
37
  */
38
38
  export declare const WithSkeleton: Story;
39
+ export declare const allColorsContained: Story;
40
+ export declare const allColorsOutlined: Story;
41
+ export declare const allColorsText: Story;
39
42
  export default meta;
@@ -1,49 +0,0 @@
1
- import { jsx } from "react/jsx-runtime";
2
- import { C as CardRootStyled } from "./slots/CardSlots.js";
3
- import { C as CARD_CLASSES } from "./constants.js";
4
- import clsx from "clsx";
5
- const Card = (props) => {
6
- const {
7
- className,
8
- variant = "text",
9
- gap,
10
- height = "auto",
11
- children,
12
- direction = "row",
13
- justifyContent = "center",
14
- alignItems = "center",
15
- selected = false,
16
- padding,
17
- ...others
18
- } = props;
19
- const ownerState = {
20
- variant,
21
- CardGap: gap,
22
- height,
23
- direction,
24
- onClick: !!props.onClick,
25
- justifyContent,
26
- alignItems,
27
- selected,
28
- CardPadding: padding
29
- };
30
- return /* @__PURE__ */ jsx(
31
- CardRootStyled,
32
- {
33
- ownerState,
34
- className: clsx(
35
- CARD_CLASSES.root,
36
- variant === "outlined" && CARD_CLASSES.outlined,
37
- variant === "text" && CARD_CLASSES.text,
38
- selected && CARD_CLASSES.selected,
39
- className
40
- ),
41
- role: "card",
42
- ...others,
43
- children
44
- }
45
- );
46
- };
47
- export {
48
- Card as C
49
- };
@@ -1,56 +0,0 @@
1
- import { g as getSizeSpacing } from "./helpers/getSizeSpacing.js";
2
- const cardStyles = {
3
- /**
4
- * Estilos para el contenedor principal del card.
5
- */
6
- root: ({ theme, ownerState }) => {
7
- const gap = getSizeSpacing(ownerState?.CardGap, theme);
8
- const padding = getSizeSpacing(ownerState?.CardPadding, theme);
9
- return {
10
- display: "flex",
11
- justifyContent: ownerState?.justifyContent ?? "center",
12
- alignItems: ownerState?.alignItems ?? "center",
13
- flexDirection: ownerState?.direction ?? "column",
14
- gap,
15
- padding,
16
- transition: "all 0.2s ease-in-out",
17
- width: "100%",
18
- outline: "unset!important",
19
- borderRadius: theme.vars.size.borderRadius.r2,
20
- backgroundColor: theme.palette.background.paper,
21
- height: ownerState?.height ?? "auto",
22
- minHeight: ownerState?.height ?? "auto",
23
- maxHeight: ownerState?.height ?? "auto",
24
- overflow: "hidden",
25
- ...ownerState?.onClick && {
26
- cursor: "pointer",
27
- "&:hover": {
28
- backgroundColor: theme.vars.palette.background.base
29
- },
30
- "&:active": {
31
- backgroundColor: theme.vars.palette.default.activeOpacity
32
- },
33
- "&:focus-visible, &:focus-within": {
34
- border: theme.vars.size.borderStroke.container,
35
- borderColor: `${theme.vars.palette.primary.focusVisible}!important`,
36
- outline: "unset!important"
37
- }
38
- },
39
- ...ownerState?.variant === "outlined" && {
40
- border: theme.vars.size.borderStroke.container,
41
- borderColor: theme.vars.palette.border.disabled
42
- },
43
- ...ownerState?.variant === "text" && {
44
- border: theme.vars.size.borderStroke.container,
45
- borderColor: "transparent"
46
- },
47
- ...ownerState?.selected && {
48
- border: theme.vars.size.borderStroke.container,
49
- borderColor: theme.vars.palette.primary.enabled
50
- }
51
- };
52
- }
53
- };
54
- export {
55
- cardStyles as c
56
- };
@@ -1,17 +0,0 @@
1
- import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
2
- import { C as CardSlots } from "./slots/CardEnum.js";
3
- const CARD_KEY = "M4LCard";
4
- const CARD_VARIANTS = {
5
- text: "text",
6
- outlined: "outlined"
7
- };
8
- const COMBINED_CLASSES = {
9
- ...CARD_VARIANTS,
10
- ...CardSlots,
11
- selected: "selected"
12
- };
13
- const CARD_CLASSES = getComponentClasses(CARD_KEY, COMBINED_CLASSES);
14
- export {
15
- CARD_CLASSES as C,
16
- CARD_KEY as a
17
- };
@@ -1,10 +0,0 @@
1
- const getSizeSpacing = (spacing, theme) => {
2
- if (typeof spacing === "number") {
3
- return spacing;
4
- }
5
- const densityKey = spacing ?? "standard";
6
- return theme.vars.size.density[densityKey];
7
- };
8
- export {
9
- getSizeSpacing as g
10
- };
@@ -1 +0,0 @@
1
-
@@ -1,7 +0,0 @@
1
- var CardSlots = /* @__PURE__ */ ((CardSlots2) => {
2
- CardSlots2["root"] = "root";
3
- return CardSlots2;
4
- })(CardSlots || {});
5
- export {
6
- CardSlots as C
7
- };
@@ -1,11 +0,0 @@
1
- import { styled } from "@mui/material/styles";
2
- import { a as CARD_KEY } from "../constants.js";
3
- import { C as CardSlots } from "./CardEnum.js";
4
- import { c as cardStyles } from "../Card.styles.js";
5
- const CardRootStyled = styled("div", {
6
- name: CARD_KEY,
7
- slot: CardSlots.root
8
- })(cardStyles?.root);
9
- export {
10
- CardRootStyled as C
11
- };