@m4l/styles 0.0.4 → 0.0.5

package/index.js

@@ -1,4 +1,5 @@
 import { alpha as t, useTheme as m } from "@mui/material/styles";
+import { styled as yr } from "@mui/material/styles";
 import { alpha as n } from "@mui/system";
 import { alpha as F } from "@mui/material";
 import { useResponsive as w } from "@m4l/graphics";
@@ -2340,6 +2341,7 @@ export {
   Y as remToPx,
   p as responsiveFontSizes,
   dr as shadows,
+  yr as styled,
   W as turqui,
   U as typography
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/styles",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "license": "UNLICENSED",
   "dependencies": {
     "@m4l/graphics": "*",

package/theme/overrides/M4LRHFComponents/M4LRHFCheckbox.d.ts

@@ -5,11 +5,15 @@ export declare const M4LRHFCheckbox: (theme: Theme) => {
             "&.M4LRHFCheckbox-root": {
                 test: string;
                 '.M4LRHFCheckbox-checkTypography': {
-                    [x: string]: any;
+                    [x: string]: string | {
+                        gap: string;
+                    };
                     display: string;
                     gap: string;
                 };
-                '& .MuiTypography-root': any;
+                '& .MuiTypography-root': {
+                    color: string;
+                };
                 '.M4LRHFCheckbox-small .MuiButtonBase-root': {
                     width: string;
                     height: string;
@@ -39,7 +43,9 @@ export declare const M4LRHFCheckbox: (theme: Theme) => {
                 '.MuiButtonBase-root:hover .MuiSvgIcon-root': {
                     fill: string;
                 };
-                '.M4LRHFCheckbox-checkTypography .MuiTypography-root': any;
+                '.M4LRHFCheckbox-checkTypography .MuiTypography-root': {
+                    [x: string]: any;
+                };
                 '.M4LRHFCheckbox-stateDisabled .MuiSvgIcon-root': {
                     fill: string;
                 };

package/theme/overrides/MUIComponents/Paper.d.ts

@@ -17,7 +17,11 @@ export default function Paper(theme: Theme): {
                 backgroundImage: string;
                 backgroundColor: string;
                 borderRadius: string;
-                '& .MuiStack-root .MuiMenuItem-root': any;
+                '& .MuiStack-root .MuiMenuItem-root': {
+                    color: string;
+                    transition: string;
+                    borderRadius: string;
+                };
                 '& .MuiStack-root .MuiMenuItem-root:hover': {
                     color: string;
                     transition: string;
@@ -34,7 +38,11 @@ export default function Paper(theme: Theme): {
                     backgroundColor: string;
                     boxShadow: string;
                 };
-                '& .MuiAutocomplete-listbox .MuiAutocomplete-option': any;
+                '& .MuiAutocomplete-listbox .MuiAutocomplete-option': {
+                    color: string;
+                    transition: string;
+                    borderRadius: string;
+                };
                 '& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover': {
                     color: string;
                     transition: string;

package/theme/typography.d.ts

@@ -1,46 +1,17 @@
+export declare type FontProps = {
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: string;
+    letterSpacing: string;
+};
 export interface TypographyVariants {
-    subtitle: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    subtitleDens: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    paragraph: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    paragraphDens: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    body: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    bodyDens: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        letterSpacing: string;
-    };
-    action: {
-        fontSize: string;
-        fontWeight: number;
-        lineHeight: string;
-        letterSpacing: string;
-    };
+    subtitle: FontProps;
+    subtitleDens: FontProps;
+    paragraph: FontProps;
+    paragraphDens: FontProps;
+    body: FontProps;
+    bodyDens: FontProps;
+    action: FontProps;
 }
 export declare const typography: {
     readonly fontFamily: "Poppins, sans-serif";

package/types/augmentations.d.ts

@@ -0,0 +1,108 @@
+import { PatronusConstantColors } from '../theme/palette';
+import { CustomShadowOptions } from '../theme';
+import { ChartPaletteOptions, GradientsPaletteOptions, GridPaletteOptions } from './types';
+import { ColorStateOptions } from '../utils/getColorState';
+export { styled } from '@mui/material/styles';
+
+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/createPalette' {
+    interface TypeBackground {
+        neutral: string;
+        autofill: string;
+        header: string;
+    }
+    interface SimplePaletteColorOptions {
+        lighter?: string;
+        darker?: string;
+        LightSelected?: string;
+        LightSelectedHover?: string;
+        DarkSelected?: string;
+        DarkSelectedHover?: string;
+    }
+    interface PaletteColor {
+        lighter?: string;
+        darker?: string;
+        LightSelected?: string;
+        LightSelectedHover?: string;
+        DarkSelected?: string;
+        DarkSelectedHover?: string;
+        opacity?: string;
+    }
+    interface Palette {
+        gradients?: GradientsPaletteOptions;
+        chart: ChartPaletteOptions;
+        grid?: GridPaletteOptions;
+        patronus?: PatronusConstantColors;
+        state: ColorStateOptions /* Organizar cada caso con los valores específicos. */;
+        /* info: AgumentationInfoOptions; */
+    }
+    interface PaletteOptions {
+        gradients?: GradientsPaletteOptions;
+        chart?: ChartPaletteOptions;
+        grid?: GridPaletteOptions;
+    }
+}
+
+// declare module '@mui/core/Typography' {
+//     interface TypographyProps {
+//       variant?: 'subtitle';
+//     }
+// }
+
+declare module '@mui/material/styles' {
+    interface Theme {
+        stretch?: boolean;
+        customShadows: CustomShadowOptions;
+    }
+
+    interface ThemeOptions {
+        stretch?: boolean;
+        customShadows?: CustomShadowOptions;
+    }
+
+    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>;
+    }
+
+    // allow configuration using `createTheme`
+    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/index.d.ts

@@ -1 +1,2 @@
 export * from './types.d';
+export * from './augmentations.d';

package/types/types.d.ts

@@ -1,62 +1,5 @@
-import { Patronus, PatronusConstantColors } from '../theme/palette';
-import {CustomShadowOptions } from '../theme'
-import { ColorStateOptions } from '../utils/getColorState';
-import { TypographyVariants } from '../theme/typography';
-
-export {};
-
 export declare type ThemeColorPresets = 'patronus' | 'turqui' | 'grass' | 'candy' | 'blaze';
 
-declare module '@mui/material/styles' {
-    interface Theme {
-        stretch?: boolean;
-        customShadows: CustomShadowOptions;
-    }
-
-    interface ThemeOptions {
-        stretch?: boolean;
-        customShadows?: CustomShadowOptions;
-    }
-
-    interface TypographyVariants {
-        subtitle: Record<any>;
-        subtitleDens: Record<any>;
-        paragraph:  Record<any>;
-        paragraphDens: Record<any>;
-        body: Record<any>;
-        bodyDens: Record<any>;
-        action: Record<any>;
-    }
-
-   
-    
-      // allow configuration using `createTheme`
-      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;
-    }
-  }
-
 export interface GridPaletteOptions {
     sectionHeader: string;
     rowHover: string;
@@ -78,74 +21,3 @@ export interface GradientsPaletteOptions {
     warning: string;
     error: string;
 }
-
-/* interface AgumentationInfoOptions extends Pick<PaletteColor, 'lighter' | 'light' | 'main' | 'dark' | 'darker' >{
-    opacity: string
-}
- */
-declare module '@mui/material/styles/createPalette' {
-    interface TypeBackground {
-        neutral: string;
-        autofill: string;
-        header: string;
-    }
-    interface SimplePaletteColorOptions {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-    }
-    interface PaletteColor {
-        lighter?: string;
-        darker?: string;
-        LightSelected?: string;
-        LightSelectedHover?: string;
-        DarkSelected?: string;
-        DarkSelectedHover?: string;
-        opacity?: string;
-    }
-    interface Palette {
-        gradients?: GradientsPaletteOptions;
-        chart: ChartPaletteOptions;
-        grid?: GridPaletteOptions;
-        patronus?: PatronusConstantColors;
-        state: ColorStateOptions;
-        /* info: AgumentationInfoOptions; */ /* Organizar cada caso con los valores específicos. */
-    }
-    interface PaletteOptions {
-        gradients?: GradientsPaletteOptions;
-        chart?: ChartPaletteOptions;
-        grid?: GridPaletteOptions;
-    }
-}
-
-/* declare module '@material-ui/core/styles/createTypography' {
-    interface TypographyOptions extends TypographyVariants {}
-  }
- */
-
-
-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;
-    }
-}
-
-
-/* import { TypographyProps } from '@material-ui/core/Typography'; */
-
-declare module '@material-ui/core/Typography' {
-  interface TypographyProps {
-    variant?: 'subtitle';
-  }
-}