@m4l/styles 3.2.3 → 6.1.0

package/theme/{shadows-GTYqExFA.js → shadows-Cek_1mpN.js}

@@ -1,5 +1,5 @@
 import { alpha as a } from "@mui/material/styles";
-import { G as n, B as s, C as e } from "./palette-DM0gXxA2.js";
+import { G as n, B as s, C as e } from "./palette-voCQl3kP.js";
 const o = n[500], c = "#000000", t = (r) => {
   const p = a(r, 0.2), x = a(r, 0.14), $ = a(r, 0.12);
   return [

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,155 +1,159 @@
-import { Breakpoints } from '@mui/material';
-
-import type { CustomShadowOptions } from '../theme';
-
-declare module '@mui/material' {
-  interface Color {
-    0: string;
-    500_8: string;
-    500_12: string;
-    500_16: string;
-    500_24: string;
-    500_32: string;
-    500_48: string;
-    500_56: string;
-    500_80: string;
-  }
-}
-
-declare module '@mui/material/styles' {
-  interface PaletteColor {
-    lighter?: string;
-    darker?: string;
-    active: string;
-    activeOpacity: string;
-    hover: string;
-    focus: string;
-    selected: string;
-    toneOpacity: string;
-  }
-
-  interface SimplePaletteColorOptions {
-    lighter?: string;
-    darker?: string;
-    active: string;
-    activeOpacity: string;
-    hover: string;
-    focus: string;
-    selected: string;
-    toneOpacity: string;
-  }
-
-  interface Palette {
-    mode: 'light' | 'dark';
-    secondary: never;
-    skeleton: { default: string; transition: string };
-    border: {
-      active: string;
-      selected: string;
-      default: string;
-      primary: string;
-      secondary: string;
-      disabled: string;
-      dense: string;
-      line: string;
-    };
-    general: {
-      scrollBar: string;
-      gridHover: string;
-    };
-  }
-
-  interface PaletteOptions {
-    mode: 'light' | 'dark';
-    secondary: never;
-    skeleton: { default: string; transition: string };
-    border: {
-      active: string;
-      selected: string;
-      default: string;
-      primary: string;
-      secondary: string;
-      disabled: string;
-      dense: string;
-      line: string;
-    };
-    general: {
-      scrollBar: string;
-      gridHover: string;
-    };
-  }
-
-  interface ColorSchemeOverrides {
-    finalTheme?: true;
-  }
-
-  interface CssVarsTheme {
-    generalSettings: {
-      isMobile: boolean;
-    };
-  }
-
-  interface Theme extends CssVarsTheme {
-    stretch: boolean;
-    customShadows: CustomShadowOptions;
-    breakpoints: Breakpoints;
-  }
-
-  interface CssVarsThemeOptions {
-    generalSettings: {
-      isMobile: boolean;
-    };
-  }
-
-  interface ThemeVars {
-    customShadows: CustomShadowOptions;
-  }
-
-  interface ColorSystem {
-    typography: TypographyVariants;
-  }
-
-  interface TypeBackground {
-    default: string;
-    hover: string;
-    surface: string;
-    subtle: string;
-    main: string;
-    bold: string;
-    backdrop: string;
-    reverse: string;
-    header: string;
-  }
-
-  interface TypographyVariants {
-    subtitle: Record<string, any>;
-    subtitleDens: Record<string, any>;
-    paragraph: Record<string, any>;
-    paragraphDens: Record<string, any>;
-    body: Record<string, any>;
-    bodyDens: Record<string, any>;
-    action: Record<string, any>;
-  }
-
-  interface TypographyVariantsOptions {
-    subtitle: React.CSSProperties;
-    subtitleDens: React.CSSProperties;
-    paragraph: React.CSSProperties;
-    paragraphDens: React.CSSProperties;
-    body: React.CSSProperties;
-    bodyDens: React.CSSProperties;
-    action: React.CSSProperties;
-  }
-}
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    subtitle: true;
-    subtitleDens: true;
-    paragraph: true;
-    paragraphDens: true;
-    body: true;
-    bodyDens: true;
-    action: true;
-  }
-}
+import { Breakpoints } from '@mui/material';
+
+import type { CustomShadowOptions } from '../theme';
+import type { BaseBorderRadius, Size } from '../theme/sizes/types';
+
+declare module '@mui/material' {
+  interface Color {
+    0: string;
+    500_8: string;
+    500_12: string;
+    500_16: string;
+    500_24: string;
+    500_32: string;
+    500_48: string;
+    500_56: string;
+    500_80: string;
+  }
+}
+
+declare module '@mui/material/styles' {
+  interface PaletteColor {
+    //TODO: Documentar los colores segun figma
+    // light: string; *** Por compatibilidad con MUI
+    // main: string; ***
+    // dark: string; ***  Por compatibilidad con MUI
+    // contrastText: string; ***
+
+    focusActive: string;
+    focusVisible: string;
+    hover: string;
+    hoverOpacity: string;
+    opacity: string;
+    toneOpacity: string;
+  }
+
+  export interface TypeBackground {
+    neutral: string;
+  }
+
+  interface Palette {
+    mode: 'light' | 'dark';
+    secondary: never;
+    skeleton: { default: string; transition: string };
+    default: PaletteColor;
+    border: {
+      main: string;
+      default: string;
+      secondary: string;
+      dens: string;
+      disabled: string;
+      error: string;
+    };
+    general: {
+      scrollBar: string;
+      gridHover: string;
+    };
+  }
+
+  /**
+   * Interfaz de colores de material-ui, define las opciones de personalización de la paleta de colores que se
+   * pueden usar al crear un tema con la función `createTheme`.
+  */
+  interface PaletteOptions {
+    mode: 'light' | 'dark';
+    secondary: never;
+    skeleton: { default: string; transition: string };
+    border: {
+      main: string;
+      default: string;
+      secondary: string;
+      dens: string;
+      disabled: string;
+      error: string;
+    };
+    default: PaletteColor; 
+    general: {
+      scrollBar: string;
+      gridHover: string;
+    };
+  }
+
+  interface ColorSchemeOverrides {
+    finalTheme?: true;
+  }
+
+  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 {
+    generalSettings: {
+      isMobile: boolean;
+    };
+  }
+
+  interface ThemeVars {
+    customShadows: CustomShadowOptions;
+    /**
+     * Colección de tamaños y espaciados base en el sistema de diseño
+    */
+    size: Size;
+  }
+
+  interface ColorSystem {
+    typography: TypographyVariants;
+  }
+
+  interface TypeBackground {
+    default: string,
+    neutral: string,
+    surface: string,
+    hover: string,
+  }
+
+  interface TypographyVariants {
+    subtitle: Record<string, any>;
+    subtitleDens: Record<string, any>;
+    paragraph: Record<string, any>;
+    paragraphDens: Record<string, any>;
+    body: Record<string, any>;
+    bodyDens: Record<string, any>;
+    action: Record<string, any>;
+  }
+
+  interface TypographyVariantsOptions {
+    subtitle: React.CSSProperties;
+    subtitleDens: React.CSSProperties;
+    paragraph: React.CSSProperties;
+    paragraphDens: React.CSSProperties;
+    body: React.CSSProperties;
+    bodyDens: React.CSSProperties;
+    action: React.CSSProperties;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    subtitle: true;
+    subtitleDens: true;
+    paragraph: true;
+    paragraphDens: true;
+    body: true;
+    bodyDens: true;
+    action: true;
+  }
+}

package/types/types.d.ts

@@ -1,16 +1,25 @@
-import { PaletteColor } from '@mui/material/styles';
+import { PaletteColor, Theme } from '@mui/material/styles';
 /**
- * type usado para tipar las props sizes de los componentes o sus derivaciones
+ * Opciones de color seleccionables por un usuario con los que se puede pintar la aplicación.
  */
-export declare type Sizes = 'small' | 'medium' | 'large';
-export declare type ThemeColorPresets = 'patronus' | 'turqui' | 'grass' | 'brown' | 'blaze';
-export declare type StateColorSchema = 'info' | 'success' | 'warning' | 'error';
-export declare type ColorSchema = 'primary' | 'secondary' | StateColorSchema;
-export declare type ColorSchemeComponent = ColorSchema | string;
+export declare type ThemeColorOptionsType = 'patronus' | 'turqui' | 'grass' | 'brown' | 'blaze';
+/**
+ * Lista de colores semánticos disponibles en la aplicación.
+*/
+export declare type SemanticColorOptionsType = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Son los conjuntos de colores que se pueden usar en los componentes y corresponde al tipo PaletteColor
+*/
+export declare type ComponentPalletColor = 'primary' | 'default' | SemanticColorOptionsType;
 export declare type BasePalettes = 'patronusBlue' | 'crayonBlue' | 'middleYellow' | 'acidGreen' | 'grassGreen' | 'desertBeige' | 'turquiBlue' | 'blazeOrange' | 'flameRed' | 'coolGrey' | 'brown' | 'marbleLight' | 'onyx' | 'mint' | 'oxford';
-export declare type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'orange' | 'cool' | 'marble' | 'mint' | 'oxford';
+export declare type BaseOpacityPalettes = 'patronus' | 'turqui' | 'grass' | 'brown' | 'beige' | 'blaze' | 'cool' | 'marble' | 'mint' | 'oxford' | 'middle' | 'acid' | 'flame' | 'crayon';
 export interface Colors {
-    '00': string;
+    /**
+     * ToneOpacity se usa para colorear el fondo de los celdas en el compksonente grid.
+     * Requiere un todo de 100 en alpha pero basado en el color de opacidad con fondo ligth o dark.
+    */
+    'toneOpacity10': string;
+    'toneOpacity20': string;
     10: string;
     20: string;
     30: string;
@@ -23,36 +32,64 @@ export interface Colors {
     100: string;
 }
 export interface OpacityColors {
-    4: string;
-    6: string;
-    8: string;
     10: string;
-    12: string;
-    14: string;
-    16: string;
-    18: string;
-    28: string;
-    31: string;
-    32: string;
-    48: string;
-    60?: string;
-    72?: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
 }
-export interface ActionsPaletteColors {
-    active: string;
-    activeOpacity: string;
-    hover: string;
-    focus: string;
-    selected: string;
-    toneOpacity: string;
+export interface PresetColor {
+    main: string;
+    contrastText: string;
+    light: string;
+    lighter: string;
+    toneOpacityLight: string;
+    /**
+     * Permite definir fondos de componentes en estados hover y focus dependiendo de la necesidad.
+    */
+    opacityLight: string;
+    opacityDark: string;
+    dark: string;
+    darker: string;
+    toneOpacityDark: string;
+    /**
+     * Permite mantener consitencia en el color de tema para los borders en caso de estar en un estado de usuario focus.
+    */
+    borderMainDark: string;
+    borderMainLight: string;
 }
+/**
+ * Lista de colores base en formato Colors
+*/
 export declare type BaseConstantColors = Record<BasePalettes, Colors>;
-export declare type BasePresetColors = Record<keyof PaletteColor, string>;
-export declare type PresetPalettes = Record<ThemeColorPresets, BasePresetColors>;
-export declare type StatePalettes = Record<StateColorSchema, BasePresetColors>;
-export declare type PresetActionsPalettes = Record<ThemeColorPresets, ActionsPaletteColors>;
+/**
+ * Son los colores de las las ocpiones del tema, en formato PresetColor (Mas amplio que el PaletteColor)
+ */
+export declare type ThemePresetColors = Record<ThemeColorOptionsType, PresetColor>;
+/**
+ * Son los colores semanticos en formato PresetColor
+ */
+export declare type SemanticPresetColors = Record<SemanticColorOptionsType, PresetColor>;
+/**
+ * Son los colores de las ocpiones del tema, en formato PalletColor
+*/
+export declare type ThemePaletteColors = Record<ThemeColorOptionsType, PaletteColor>;
+/**
+ * Son las opcines de paleta de colores semánticos en formato PaletteColor
+*/
+export declare type SemanticsPaletteColors = Record<SemanticColorOptionsType, PaletteColor>;
+/**
+ * Es la configuración de color que se usa fabricar la paleta "default", se encuentra en formato PaletteColor.
+*/
+export declare type DefaultPresetColor = Omit<PresetColor, 'borderMainDark' | 'borderMainLight' | 'main' | 'contrastText'> & {
+    mainLight: string;
+    mainDark: string;
+};
 export declare type PresetsOptions = Array<{
     name: string | undefined;
     value: string;
 }>;
 export declare type ColorState = 'warning' | 'delete' | 'info' | 'success';
+export declare type OurTheme = Pick<Theme, 'palette' | 'typography' | 'customShadows' | 'stretch' | 'size'>;

package/utils/{getColorPresets-CXZaM9oS.js → getColorPresets-DgmrCj5l.js}

@@ -1,4 +1,4 @@
-import { P as r } from "../theme/palette-DM0gXxA2.js";
+import { P as r } from "../theme/palette-voCQl3kP.js";
 const o = "patronus", s = r[o];
 function n(t) {
   try {

package/utils/getColorPresets.d.ts

@@ -1,5 +1,5 @@
-import { BasePresetColors, ThemeColorPresets } from '../types';
-export declare const DEFAULT_PRESET: ThemeColorPresets;
-export declare const defaultPresetColors: BasePresetColors;
-export declare function getColorPresets(presetsKey: ThemeColorPresets): BasePresetColors;
+import { PresetColor, ThemeColorOptionsType } from '../types';
+export declare const DEFAULT_PRESET: ThemeColorOptionsType;
+export declare const defaultPresetColors: PresetColor;
+export declare function getColorPresets(presetsKey: ThemeColorOptionsType): PresetColor;
 export default getColorPresets;

package/utils/getColorState.d.ts

@@ -1,3 +1,3 @@
-import { ColorSchemeComponent } from '../types/types';
+import { ComponentPalletColor } from '../types/types';
 import { Theme } from '@mui/material';
-export declare const getColorState: (color: ColorSchemeComponent, palette: Theme['palette'] | Theme['vars']['palette']) => string;
+export declare const getColorState: (color: ComponentPalletColor, palette: Theme['palette'] | Theme['vars']['palette']) => string;