@m4l/styles 6.4.0 → 6.5.1

package/theme/overrides/M4LRHFComponents/M4LRHFDateTime.js

@@ -0,0 +1,184 @@
+const t = (o) => ({
+  M4LRHFDateTime: {
+    styleOverrides: {
+      "&.M4LRHFDateTime-root": {
+        test: "root",
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "2px",
+        outline: "unset",
+        "& .M4LRHFDateTime-skeleton": {
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "space-between",
+          border: `1px solid ${o.vars.palette.divider}`,
+          paddingLeft: "12px",
+          borderRadius: "2px",
+          "& .MuiSkeleton-circular": {
+            margin: "4px"
+          }
+        },
+        "&.M4LRHFDateTime-small": {
+          "& .M4LRHFDateTime-skeleton": {
+            height: "24px",
+            "& .MuiSkeleton-circular": {
+              width: "16px",
+              height: "16px"
+            }
+          },
+          "& .MuiFormControl-root": {
+            height: "24px"
+          }
+        },
+        "&.M4LRHFDateTime-medium": {
+          "& .M4LRHFDateTime-skeleton": {
+            height: "36px",
+            "& .MuiSkeleton-circular": {
+              width: "24px",
+              height: "24px"
+            }
+          },
+          "& .MuiFormControl-root": {
+            height: "36px"
+          }
+        },
+        /* General properties */
+        "& .MuiFormControl-root": {
+          "& .MuiInputBase-root": {
+            padding: "0 4px 0 0",
+            height: "100%",
+            "& .MuiInputBase-input": {
+              minHeight: "24px"
+            }
+          }
+        },
+        "& .M4LRHFTextField-label": {
+          color: o.vars.palette.text.secondary,
+          transition: "all .5s ease"
+        },
+        "& .MuiInputBase-root.MuiInputBase-formControl": {
+          padding: "0px 8px 0 0",
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.secondary,
+            padding: "0px 12px",
+            backgroundColor: "transparent",
+            height: "100%",
+            ...o.colorSchemes.finalTheme.typography.body
+          },
+          "& .MuiInputAdornment-root": {
+            margin: "0px",
+            padding: "0px",
+            width: "16px",
+            height: "auto",
+            position: "relative",
+            maxWidth: "16px",
+            minWidth: "16px",
+            display: "flex",
+            flex: "1",
+            overflow: "hidden",
+            "& .MuiButtonBase-root": {
+              padding: "0px",
+              backgroundColor: "transparent"
+            }
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.text.secondary,
+            transition: "all .3s ease"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            padding: "4px",
+            borderColor: o.vars.palette.divider,
+            borderRadius: "4px",
+            inset: "0px",
+            transition: "all .3s ease",
+            "& legend": {
+              display: "none"
+            }
+          }
+        },
+        /* State hover */
+        "&:hover": {
+          "& .M4LTypography-root": {
+            color: o.vars.palette.primary?.hover
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            borderColor: o.vars.palette.primary?.hover
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.primary?.hover
+          }
+        },
+        /* State focus and active */
+        "&.M4LRHFDateTime-isFocus": {
+          "& .M4LTypography-root": {
+            color: o.vars.palette.primary.focusActive
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            transition: "all .1s ease",
+            border: "2px solid",
+            borderColor: o.vars.palette.primary.focusActive
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.primary.focusActive
+          }
+        },
+        /* State error */
+        "&.M4LRHFTextField-variantError": {
+          "& .M4LRHFTextField-label": {
+            color: o.vars.palette.error.main
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.vars.palette.error.main
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.error.main
+          },
+          "&:hover": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          },
+          "&.M4LRHFTextField-isFocus": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          }
+        },
+        /* State disabled */
+        "&.M4LRHFTextField-isDisabled": {
+          "& .M4LRHFTextField-label": {
+            color: o.vars.palette.text.disabled
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.vars.palette.text.disabled,
+            backgroundColor: o.vars.palette.background?.default,
+            boxShadow: "none"
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.disabled
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.text.disabled
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

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

@@ -1,4 +1,11 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
+/**
+ * M4LRHFTextField overrides
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:25 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
 export declare const M4LRHFPeriod: (_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFPeriod: {
         styleOverrides: {

package/theme/overrides/M4LRHFComponents/M4LRHFPeriod.js

@@ -0,0 +1,12 @@
+const r = (e) => ({
+  M4LRHFPeriod: {
+    styleOverrides: {
+      "&.M4LRHFPeriod-root": {
+        test: "root"
+      }
+    }
+  }
+});
+export {
+  r as M
+};

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

@@ -1,5 +1,12 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LRHFTextField: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+/**
+ * M4LRHFTextField overrides
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:25 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
+export declare const M4LRHFTextField: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFTextField: {
         styleOverrides: {
             '&.M4LRHFTextField-root': {

package/theme/overrides/M4LRHFComponents/M4LRHFTextField.js

@@ -0,0 +1,175 @@
+import { alpha as e } from "@mui/system";
+const r = (t) => ({
+  M4LRHFTextField: {
+    styleOverrides: {
+      "&.M4LRHFTextField-root": {
+        /* Root styles */
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "2px",
+        outline: "unset",
+        /* General properties */
+        "&.M4LRHFTextField-variantText": {
+          height: "auto",
+          "& .MuiFormControl-root": {
+            minHeight: "24px",
+            height: "auto",
+            "& .MuiInputBase-multiline": {
+              minHeight: "24px",
+              height: "auto",
+              "& .MuiInputBase-input": {
+                padding: "4px"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                height: "100%",
+                padding: "4px"
+              }
+            }
+          }
+        },
+        "& .M4LRHFTextField-label": {
+          color: t.vars.palette.text.secondary,
+          transition: "all .5s ease"
+        },
+        "& .MuiInputBase-root": {
+          padding: "0px",
+          borderRadius: "4px",
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.secondary,
+            padding: "4px 8px",
+            backgroundColor: "transparent",
+            height: "100%",
+            ...t.colorSchemes.finalTheme.typography.body
+          },
+          "& .MuiInputAdornment-root": {
+            margin: "0px",
+            padding: "0px 4px 0 0"
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.text.secondary,
+            transition: "all .3s ease"
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: "1.3px solid",
+            padding: "4px",
+            borderColor: t.vars.palette?.border.default,
+            borderRadius: "4px",
+            inset: "0px",
+            transition: "all .3s ease",
+            "& legend": {
+              display: "none"
+            }
+          }
+        },
+        /* State hover */
+        "&:hover": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.primary?.hover
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            borderColor: t.vars.palette.primary?.hover,
+            boxShadow: `0px 1px 8px ${e(
+              t.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`,
+            background: t.vars.palette.primary.opacity
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.primary?.hover
+          }
+        },
+        /* State focus and active */
+        "&.M4LRHFTextField-isFocus": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.primary.focusActive
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            transition: "all .1s ease",
+            border: "2px solid",
+            borderColor: t.vars.palette.primary.focusActive,
+            boxShadow: `0px 1px 8px ${e(
+              t.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`,
+            background: t.vars.palette.primary.opacity
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.primary.focusActive
+          }
+        },
+        /* State error */
+        "&.M4LRHFTextField-variantError": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.error.main
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: t.vars.palette.error.main,
+            background: t.vars.palette.error.opacity
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.error.main
+          },
+          "&:hover": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: t.customShadows?.error
+            }
+          },
+          "&.M4LRHFTextField-isFocus": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: t.customShadows?.error
+            }
+          }
+        },
+        /* State disabled */
+        "&.M4LRHFTextField-isDisabled": {
+          "& .M4LRHFTextField-label": {
+            color: t.vars.palette.text.disabled
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: t.vars.palette?.border.secondary,
+            backgroundColor: t.vars.palette.background?.default,
+            boxShadow: "none"
+          },
+          "& .MuiInputBase-input": {
+            color: t.vars.palette.text.disabled
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: t.vars.palette.text.disabled
+          }
+        },
+        /* Sizes */
+        "&.M4LRHFTextField-sizeSmall": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
+            height: "24px",
+            padding: "0px 8px"
+          }
+        },
+        "&.M4LRHFTextField-sizeMedium": {
+          "& .MuiInputBase-input, & .MuiOutlinedInput-notchedOutline, & .M4LRHFTextField-skeleton": {
+            height: "36px",
+            padding: "0px 8px"
+          },
+          "& .MuiInputBase-multiline": {
+            minHeight: "36px",
+            height: "100%"
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

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

@@ -1,4 +1,11 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
+/**
+ * M4LRHFTextFieldPassword overrides
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:25 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
 export declare const M4LRHFTextFieldPassword: (_theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFTextFieldPassword: {
         styleOverrides: {

package/theme/overrides/M4LRHFComponents/M4LRHFTextFieldPassword.js

@@ -0,0 +1,12 @@
+const s = (e) => ({
+  M4LRHFTextFieldPassword: {
+    styleOverrides: {
+      "&.M4LRHFTextFieldPassword-root": {
+        width: "100%"
+      }
+    }
+  }
+});
+export {
+  s as M
+};

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

@@ -1,4 +1,11 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
+/**
+ * M4LRHFUploadImage overrides
+ * @author Juan Escobar - automatic
+ * @createdAt 2024-10-06 13:47:24 - automatic
+ * @updatedAt 2024-10-06 13:47:25 - automatic
+ * @updatedUser Juan Escobar - automatic
+ */
 export declare const M4LRHFUploadImage: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFUploadImage: {
         styleOverrides: {
@@ -87,28 +94,28 @@ export declare const M4LRHFUploadImage: (theme: Omit<Theme, "palette" | "applySt
                                     flexDirection: string;
                                     gap: string;
                                     width: string;
-                                    "& .M4LRHFUploadImage-containerTitle": {
+                                    '& .M4LRHFUploadImage-containerTitle': {
                                         display: string;
                                         justifyContent: string;
-                                        ".MuiTypography-subtitle": {
+                                        '.MuiTypography-subtitle': {
                                             color: string;
                                         };
                                     };
-                                    "& .M4LRHFUploadImage-containerDescription": {
+                                    '& .M4LRHFUploadImage-containerDescription': {
                                         display: string;
                                         justifyContent: string;
-                                        ".MuiTypography-root": {
+                                        '.MuiTypography-root': {
                                             color: string;
                                         };
                                     };
-                                    "& .M4LRHFUploadImage-containerConditions": {
+                                    '& .M4LRHFUploadImage-containerConditions': {
                                         display: string;
                                         justifyContent: string;
-                                        ".MuiTypography-root": {
+                                        '.MuiTypography-root': {
                                             color: string;
                                         };
                                     };
-                                    "& .M4LButton-root": {
+                                    '& .M4LButton-root': {
                                         display: string;
                                         justifyContent: string;
                                         marginTop: string;
@@ -129,7 +136,7 @@ export declare const M4LRHFUploadImage: (theme: Omit<Theme, "palette" | "applySt
                     WebkitMask: string;
                 };
             };
-            "&.M4LRHFUploadImage-hasFile": {
+            '&.M4LRHFUploadImage-hasFile': {
                 '& .M4LRHFUploadImage-placeHolder': {
                     opacity: string;
                     overflor: string;
@@ -150,16 +157,16 @@ export declare const M4LRHFUploadImage: (theme: Omit<Theme, "palette" | "applySt
                             opacity: string;
                         };
                         '& .M4LRHFUploadImage-containerMessage': {
-                            "& .M4LRHFUploadImage-containerTitle": {
+                            '& .M4LRHFUploadImage-containerTitle': {
                                 opacity: string;
                             };
-                            "& .M4LRHFUploadImage-containerDescription": {
+                            '& .M4LRHFUploadImage-containerDescription': {
                                 opacity: string;
                             };
-                            "& .M4LRHFUploadImage-containerConditions": {
+                            '& .M4LRHFUploadImage-containerConditions': {
                                 opacity: string;
                             };
-                            "& .M4LButton-root": {
+                            '& .M4LButton-root': {
                                 display: string;
                                 justifyContent: string;
                                 marginTop: string;