@m4l/styles 6.0.0 → 6.1.0

package/config.d.ts

@@ -1,4 +1,4 @@
-import { Sizes } from './types';
+import { Sizes } from "./theme/sizes";
 export declare const muiBreakpointsValues: {
     values: {
         xs: number;

package/index.js

@@ -1,8 +1,8 @@
 import { D as o, g as a, m as r } from "./config-B8bZIPuH.js";
-import { O as p, g as m } from "./theme/defaultThemeOptions-DVY68pts.js";
+import { O as p, g as m } from "./theme/index-BZonCMpk.js";
 import { c as O, s as x } from "./theme/shadows-Cek_1mpN.js";
 import { t as g } from "./theme/typography-BsOO459U.js";
-import { f as S } from "./theme/overrides/index-BOMUIneQ.js";
+import { f as S } from "./theme/overrides/index-DLjfQaz-.js";
 import { B as n, a as R, C as T, G as i, p as P } from "./theme/palette-voCQl3kP.js";
 import { u } from "./utils/useResponsive-DaeQVwlH.js";
 import { D as L, d, g as B } from "./utils/getColorPresets-DgmrCj5l.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "license": "UNLICENSED",
   "author": "m4l team",
   "dependencies": {

package/theme/index-BZonCMpk.js

@@ -0,0 +1,196 @@
+import { createTheme as O, alpha as R } from "@mui/material/styles";
+import { t as i } from "./typography-BsOO459U.js";
+import { s as _, c as b } from "./shadows-Cek_1mpN.js";
+import { C as l, D as m, B as s, P as d, a as e, S as p, G as n, b as c, c as g, d as f, e as S } from "./palette-voCQl3kP.js";
+import { g as L } from "../utils/getColorPresets-DgmrCj5l.js";
+const o = {
+  light: {
+    scrollBar: "#5663763D",
+    gridHover: "#FCFCFC"
+  },
+  dark: {
+    scrollBar: "#5663765D",
+    gridHover: "#282E2E"
+  }
+}, E = (a) => {
+  const t = f?.[a], h = S?.[a];
+  return {
+    light: {
+      mode: "light",
+      common: l,
+      primary: {
+        ...t
+      },
+      default: {
+        ...m,
+        focusVisible: t.focusVisible,
+        contrastText: s.onyx[20]
+      },
+      divider: s.coolGrey[20],
+      text: {
+        primary: s.onyx[20],
+        secondary: s.coolGrey[50],
+        disabled: s.oxford[30]
+      },
+      background: {
+        default: s.marbleLight[10],
+        neutral: s.marbleLight[30],
+        surface: s.marbleLight[50],
+        hover: m.hover,
+        //por compatibilidad de mui
+        paper: ""
+      },
+      border: {
+        main: d[a]?.borderMainLight,
+        default: e.oxford[40],
+        secondary: e.oxford[30],
+        dens: e.oxford[60],
+        disabled: e.oxford[10],
+        error: p.error.main
+      },
+      general: {
+        scrollBar: o.light.scrollBar,
+        gridHover: o.light.gridHover
+      },
+      grey: n,
+      skeleton: {
+        default: e.oxford[10],
+        transition: e.oxford[20]
+      },
+      ...p
+    },
+    dark: {
+      mode: "dark",
+      common: l,
+      primary: {
+        ...t
+      },
+      default: {
+        ...c,
+        focusVisible: h?.focusVisible,
+        contrastText: s.marbleLight[30]
+      },
+      text: {
+        primary: s.marbleLight[30],
+        secondary: s.coolGrey[20],
+        disabled: s.coolGrey[50]
+      },
+      divider: s.coolGrey[80],
+      background: {
+        default: s.onyx[40],
+        neutral: s.marbleLight[50],
+        surface: s.marbleLight[60],
+        hover: c.hover,
+        //por compatibilidad de mui
+        paper: ""
+      },
+      border: {
+        main: d[a]?.borderMainDark,
+        default: e.mint[50],
+        secondary: e.mint[40],
+        dens: e.mint[60],
+        disabled: e.mint[20],
+        error: g.error.main
+      },
+      general: {
+        scrollBar: o.light.scrollBar,
+        gridHover: o.light.gridHover
+      },
+      grey: n,
+      skeleton: {
+        default: e.mint[20],
+        transition: e.mint[40]
+      },
+      ...g
+    }
+  };
+}, y = {
+  r0: 0,
+  "r0.5": 2,
+  r1: 4,
+  "r1.5": 6,
+  r2: 8,
+  r3: 12,
+  r4: 16
+}, r = {
+  sp0: 0,
+  "sp0.5": 2,
+  sp1: 4,
+  sp2: 8,
+  sp3: 12,
+  "sp3.5": 14,
+  sp4: 16,
+  sp5: 20,
+  sp6: 24,
+  sp7: 28,
+  sp8: 32,
+  sp9: 36,
+  sp10: 40,
+  "sp10.5": 42,
+  sp11: 44,
+  sp12: 48,
+  sp13: 52,
+  sp14: 56,
+  "sp14.5": 58
+}, C = {
+  base: {
+    small: r["sp3.5"],
+    medium: r.sp4,
+    large: r.sp5
+  },
+  action: {
+    small: r.sp5,
+    medium: r.sp6,
+    large: r.sp8
+  },
+  container: {
+    small: r.sp7,
+    medium: r.sp8,
+    large: r.sp9
+  }
+}, T = {
+  base: {
+    small: r.sp5,
+    medium: r.sp6,
+    large: r.sp7
+  },
+  action: {
+    small: r.sp7,
+    medium: r.sp8,
+    large: r.sp9
+  },
+  container: {
+    small: r.sp9,
+    medium: r.sp10,
+    large: r.sp11
+  }
+}, x = {
+  desktop: {
+    ...C
+  },
+  mobile: {
+    ...T
+  },
+  borderRadius: {
+    ...y
+  }
+}, A = O(), u = E("patronus"), G = {
+  ...i,
+  ..._.light,
+  ...u,
+  customShadows: {
+    primary: `0 8px 16px 0 ${R(L("patronus").main, 0.2)}`,
+    ...b("light")
+  },
+  stretch: !0,
+  palette: {
+    ...A.palette,
+    ...u.light
+  },
+  typography: i,
+  size: x
+};
+export {
+  G as O,
+  E as g
+};

package/theme/index.d.ts

@@ -1,7 +1,8 @@
 export type { CustomShadowOptions } from './shadows';
-export { OUR_THEME } from './defaultThemeOptions';
+export { OUR_THEME } from './ourTheme';
 export { shadows, createCustomShadows } from './shadows';
 export * from './palette';
 export { typography } from './typography';
 export type { M4LTypographyVariants } from './typography';
+export * from './sizes';
 export { fnComponentsOverrides } from './overrides';

package/theme/overrides/{index-BOMUIneQ.js → index-DLjfQaz-.js}

@@ -1,16 +1,16 @@
-import { F as s, C as o, M as r, L, c as M, I as n, R as i, B as p, a as l, T as c, P as d, S as u, b as g, d as B, A as F, e as P, D as A, f as T, g as b, h as C, i as S, j as v, k as y, l as R, m as H, n as I, o as k, p as f, q as D, r as x, s as w, t as G, u as O, v as V, w as j, x as E, y as N, z as q } from "./MUIComponents/index-DrBJTI1s.js";
+import { F as s, C as o, M as r, L, c as M, I as i, R as n, B as p, a as l, T as c, P as d, S as u, b as g, d as B, A as F, e as P, D as A, f as T, g as b, h as C, i as S, j as y, k as R, l as v, m as H, n as I, o as k, p as D, q as f, r as x, s as w, t as G, u as V, v as j, w as E, x as N, y as O, z as q } from "./MUIComponents/index-DrBJTI1s.js";
 import { M as z, a as U, b as J, c as K, d as Q, e as W, f as X, g as Y, h as Z } from "./M4LRHFComponents/index-Dv4h8DSV.js";
-import { M as _, a as $, b as t, c as m, d as e, e as h, f as aa, g as sa, h as oa, i as ra, j as La, k as Ma, l as na, m as ia, n as pa, o as la, p as ca, q as da, r as ua, s as ga, t as Ba, u as Fa, v as Pa, w as Aa, x as Ta, y as ba, z as Ca, A as Sa, B as va, C as ya, D as Ra, E as Ha, F as Ia, G as ka, H as fa, I as Da, J as xa, K as wa, L as Ga, N as Oa, O as Va, P as ja, Q as Ea, R as Na, S as qa, T as za, U as Ua, V as Ja, W as Ka, X as Qa, Y as Wa, Z as Xa, _ as Ya } from "./M4LExtendedComponents/index-BO_x8lkT.js";
+import { M as _, a as $, b as t, c as m, d as e, e as h, f as aa, g as sa, h as oa, i as ra, j as La, k as Ma, l as ia, m as na, n as pa, o as la, p as ca, q as da, r as ua, s as ga, t as Ba, u as Fa, v as Pa, w as Aa, x as Ta, y as ba, z as Ca, A as Sa, B as ya, C as Ra, D as va, E as Ha, F as Ia, G as ka, H as Da, I as fa, J as xa, K as wa, L as Ga, N as Va, O as ja, P as Ea, Q as Na, R as Oa, S as qa, T as za, U as Ua, V as Ja, W as Ka, X as Qa, Y as Wa, Z as Xa, _ as Ya } from "./M4LExtendedComponents/index-BO_x8lkT.js";
 function ta(a) {
-  return console.log("fnComponentsOverrides theme", a), Object.assign(
+  return Object.assign(
     s(a),
     // Chip(theme),
     o(a),
     r(a),
     L(a),
     M(a),
-    n(),
-    i(a),
+    i(),
+    n(a),
     p(),
     l(a),
     c(a),
@@ -28,23 +28,23 @@ function ta(a) {
     b(a),
     C(),
     S(),
-    v(a),
     y(a),
     R(a),
+    v(a),
     H(a),
     // TreeView(theme),
     I(a),
     k(a),
-    f(a),
     D(a),
+    f(a),
     x(a),
     w(a),
     G(a),
-    O(),
-    V(a),
+    V(),
     j(a),
     E(a),
     N(a),
+    O(a),
     _(a),
     /* Owner components */
     q(),
@@ -67,8 +67,8 @@ function ta(a) {
     Y(a),
     La(a),
     Ma(a),
-    na(a),
     ia(a),
+    na(a),
     pa(a),
     la(a),
     ca(a),
@@ -83,22 +83,22 @@ function ta(a) {
     ba(a),
     Ca(a),
     Sa(a),
-    va(a),
     ya(a),
     Ra(a),
+    va(a),
     Ha(a),
     Ia(a),
     ka(a),
-    fa(),
-    Da(a),
+    Da(),
+    fa(a),
     xa(),
     wa(a),
     Ga(),
-    Oa(a),
     Va(a),
     ja(a),
     Ea(a),
     Na(a),
+    Oa(a),
     qa(),
     Z(a),
     za(),

package/theme/sizes/baseBorderRadius.d.ts

@@ -0,0 +1,6 @@
+import { BaseBorderRadius } from "./types";
+/**
+ * Conjunto de valores predeterminados utilizados para definir el radio de borde en los
+ * componentes de la aplicación web.
+*/
+export declare const BASE_BORDER_RADIUS: BaseBorderRadius;

package/theme/sizes/baseSizes.d.ts

@@ -0,0 +1,5 @@
+import { BaseSpacings } from "./types";
+/**
+ * Conjunto de valores predeterminados utilizados para definir el tamaño y espaciados en los componentes de la aplicación web.
+*/
+export declare const BASE_SPACINGS: BaseSpacings;

package/theme/sizes/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/theme/sizes/pointerQr.d.ts

@@ -0,0 +1,21 @@
+import { PointerQrSizes } from "./types";
+/**
+ * Conjunto de valores que utilizan los desarrolladores para definir categorías de tamaños y espacios en la aplicación web, aplicados principalmente en modalidad de cursor 'pointer'.
+ *
+ * - base: Clasificación de altura para componentes generales, que no pertenecen a las categorías de acción ni contenedores. Estos componentes suelen ser de uso común sin funcionalidad específica de interacción.
+ *
+ * - action: Clasificación de altura para componentes de tipo acción, como MenuItems, HeaderPopover, IconButton, Button, entre otros. Estos componentes se utilizan para interacciones directas del usuario.
+ *
+ * - container: Clasificación de altura para componentes que funcionan como contenedores, como DynamicFilter, DynamicSort, HeaderModule, Tabs, etc. Estos agrupan o contienen otros elementos o funcionalidades.
+ */
+export declare const POINTER_QR_DESKTOP_SIZES: PointerQrSizes;
+/**
+ * Conjunto de valores que utilizan los desarrolladores para definir categorías de tamaños y espacios en la aplicación web, aplicados principalmente en modalidad de cursor 'touch'.
+ *
+ * - base: Clasificación de altura para componentes generales, que no pertenecen a las categorías de acción ni contenedores. Estos componentes suelen ser de uso común sin funcionalidad específica de interacción.
+ *
+ * - action: Clasificación de altura para componentes de tipo acción, como MenuItems, HeaderPopover, IconButton, Button, entre otros. Estos componentes se utilizan para interacciones directas del usuario.
+ *
+ * - container: Clasificación de altura para componentes que funcionan como contenedores, como DynamicFilter, DynamicSort, HeaderModule, Tabs, etc. Estos agrupan o contienen otros elementos o funcionalidades.
+ */
+export declare const POINTER_QR_MOBILE_SIZES: PointerQrSizes;

package/theme/sizes/size.d.ts

@@ -0,0 +1,2 @@
+import { Size } from "./types";
+export declare const SIZE: Size;

package/theme/sizes/types.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Conjunto de valores predeterminados utilizados para definir el radio de borde en los
+ * componentes de la aplicación web.
+*/
+export interface BaseBorderRadius {
+    'r0': number;
+    'r0.5': number;
+    'r1': number;
+    'r1.5': number;
+    'r2': number;
+    'r3': number;
+    'r4': number;
+}
+/**
+ * Conjunto de valores predeterminados utilizados para definir el tamaño y espaciados en los componentes de la aplicación web.
+*/
+export interface BaseSpacings {
+    'sp0': number;
+    'sp0.5': number;
+    'sp1': number;
+    'sp2': number;
+    'sp3': number;
+    'sp3.5': number;
+    'sp4': number;
+    'sp5': number;
+    'sp6': number;
+    'sp7': number;
+    'sp8': number;
+    'sp9': number;
+    'sp10': number;
+    'sp10.5': number;
+    'sp11': number;
+    'sp12': number;
+    'sp13': number;
+    'sp14': number;
+    'sp14.5': number;
+}
+/**
+ * type usado para tipar las props sizes de los componentes o sus derivaciones
+ */
+export declare type Sizes = 'small' | 'medium' | 'large';
+/**
+ * Representa al conjunto de valores de tamaño que tienen en cuenta la variación de tamaño en la aplicación web.
+ * Puede ser small, medium y large.
+*/
+export declare type SizesValues = Record<Sizes, number>;
+/**
+ * Representa a los conjuntos de valores que utilizan los desarroladores para definir diferentes categorías de componentes en tamaños y espacios.
+ * base: Es la clasificación de altura para componentes de tipo general, los cuales no son de categoría de acción ni de categoría contenedora.
+ * action: Es la clasificación de altura para componentes de tipo acción, los cuales son MenuItems, HeaderPopover, IconButton, Button, etc.
+ * container: Es la clasificación de altura para componentes de tipo contenedor, los cuales son DinamicFilter, DinamicSort, HeaderModule, Tabs, etc.
+*/
+export declare type SizesComponentsTypes = 'base' | 'action' | 'container';
+/**
+ * Representa el conjunto de tamaños separados en categorías de componentes para la aplicación web.
+ * Se dividen en los siguientes tipos; base, action y container. Cada opción de categoría define
+ * los tamaños que pueden ser small, medium y large.
+*/
+export declare type PointerQrSizes = Record<SizesComponentsTypes, SizesValues>;
+/**
+ * Representa las opciones de tamaño para los dispositivos desktop y mobile en la aplicación web,
+ * cada opción contiene el grupo PointerQrSizes adecuados al tipo de dispositivo según figma.
+**/
+/**
+ * Representa la coleccción completa de tamaños y espacios en la aplicación, contiene valores para
+ * uso de dispositivo móvil, escritorio, borders y valores base para ser usados por el desarrolador
+ * en los componentes de la aplicación web.
+*/
+export interface Size {
+    mobile: PointerQrSizes;
+    desktop: PointerQrSizes;
+    borderRadius: BaseBorderRadius;
+}

package/types/augmentations.d.ts

@@ -1,6 +1,7 @@
 import { Breakpoints } from '@mui/material';
 
 import type { CustomShadowOptions } from '../theme';
+import type { BaseBorderRadius, Size } from '../theme/sizes/types';
 
 declare module '@mui/material' {
   interface Color {
@@ -36,17 +37,6 @@ declare module '@mui/material/styles' {
     neutral: string;
   }
 
-  /* interface SimplePaletteColorOptions {
-    lighter?: string;
-    darker?: string;
-    active: string;
-    primary: string;
-    activeOpacity: string;
-    hover: string;
-    focusVisible: string;
-    toneOpacity: string;
-  } */
-
   interface Palette {
     mode: 'light' | 'dark';
     secondary: never;
@@ -82,7 +72,7 @@ declare module '@mui/material/styles' {
       disabled: string;
       error: string;
     };
-    default: PaletteColorOptions; 
+    default: PaletteColor; 
     general: {
       scrollBar: string;
       gridHover: string;
@@ -96,13 +86,18 @@ declare module '@mui/material/styles' {
   interface CssVarsTheme {
     generalSettings: {
       isMobile: boolean;
-    };
+    }
+
   }
 
   interface Theme extends CssVarsTheme {
     stretch: boolean;
     customShadows: CustomShadowOptions;
     breakpoints: Breakpoints;
+    /**
+     * Colección de tamaños y espaciados base en el sistema de diseño
+    */
+    size: Size;
   }
 
   interface CssVarsThemeOptions {
@@ -113,6 +108,10 @@ declare module '@mui/material/styles' {
 
   interface ThemeVars {
     customShadows: CustomShadowOptions;
+    /**
+     * Colección de tamaños y espaciados base en el sistema de diseño
+    */
+    size: Size;
   }
 
   interface ColorSystem {

package/types/types.d.ts

@@ -1,8 +1,4 @@
 import { PaletteColor, Theme } from '@mui/material/styles';
-/**
- * type usado para tipar las props sizes de los componentes o sus derivaciones
- */
-export declare type Sizes = 'small' | 'medium' | 'large';
 /**
  * Opciones de color seleccionables por un usuario con los que se puede pintar la aplicación.
  */
@@ -96,4 +92,4 @@ export declare type PresetsOptions = Array<{
     value: string;
 }>;
 export declare type ColorState = 'warning' | 'delete' | 'info' | 'success';
-export declare type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch'>;
+export declare type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch' | 'size'>;

package/theme/defaultThemeOptions-DVY68pts.js

@@ -1,125 +0,0 @@
-import { createTheme as u, alpha as O } from "@mui/material/styles";
-import { t as s } from "./typography-BsOO459U.js";
-import { s as L, c as y } from "./shadows-Cek_1mpN.js";
-import { C as i, D as l, B as r, P as d, a as o, S as n, G as m, b as c, c as g, d as b, e as p } from "./palette-voCQl3kP.js";
-import { g as C } from "../utils/getColorPresets-DgmrCj5l.js";
-const a = {
-  light: {
-    scrollBar: "#5663763D",
-    gridHover: "#FCFCFC"
-  },
-  dark: {
-    scrollBar: "#5663765D",
-    gridHover: "#282E2E"
-  }
-}, R = (e) => {
-  const t = b?.[e], f = p?.[e];
-  return {
-    light: {
-      mode: "light",
-      common: i,
-      primary: {
-        ...t
-      },
-      default: {
-        ...l,
-        focusVisible: t.focusVisible,
-        contrastText: r.onyx[20]
-      },
-      divider: r.coolGrey[20],
-      text: {
-        primary: r.onyx[20],
-        secondary: r.coolGrey[50],
-        disabled: r.oxford[30]
-      },
-      background: {
-        default: r.marbleLight[10],
-        neutral: r.marbleLight[30],
-        surface: r.marbleLight[50],
-        hover: l.hover,
-        //por compatibilidad de mui
-        paper: ""
-      },
-      border: {
-        main: d[e]?.borderMainLight,
-        default: o.oxford[30],
-        secondary: o.oxford[20],
-        dens: o.oxford[50],
-        disabled: o.oxford[10],
-        error: n.error.main
-      },
-      general: {
-        scrollBar: a.light.scrollBar,
-        gridHover: a.light.gridHover
-      },
-      grey: m,
-      skeleton: {
-        default: o.oxford[10],
-        transition: o.oxford[20]
-      },
-      ...n
-    },
-    dark: {
-      mode: "dark",
-      common: i,
-      primary: {
-        ...t
-      },
-      default: {
-        ...c,
-        focusVisible: f?.focusVisible,
-        contrastText: r.marbleLight[30]
-      },
-      text: {
-        primary: r.marbleLight[30],
-        secondary: r.coolGrey[20],
-        disabled: r.coolGrey[50]
-      },
-      divider: r.coolGrey[80],
-      background: {
-        default: r.onyx[40],
-        neutral: r.marbleLight[50],
-        surface: r.marbleLight[60],
-        hover: c.hover,
-        //por compatibilidad de mui
-        paper: ""
-      },
-      border: {
-        main: d[e]?.borderMainDark,
-        default: o.mint[50],
-        secondary: o.mint[40],
-        dens: o.mint[60],
-        disabled: o.mint[20],
-        error: g.error.main
-      },
-      general: {
-        scrollBar: a.light.scrollBar,
-        gridHover: a.light.gridHover
-      },
-      grey: m,
-      skeleton: {
-        default: o.mint[20],
-        transition: o.mint[40]
-      },
-      ...g
-    }
-  };
-}, _ = u(), h = R("patronus"), v = {
-  ...s,
-  ...L.light,
-  ...h,
-  customShadows: {
-    primary: `0 8px 16px 0 ${O(C("patronus").main, 0.2)}`,
-    ...y("light")
-  },
-  stretch: !0,
-  palette: {
-    ..._.palette,
-    ...h.light
-  },
-  typography: s
-};
-export {
-  v as O,
-  R as g
-};

package/theme/index-l0sNRNKZ.js

@@ -1 +0,0 @@
-