@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LRHFComponents/M4LRHFAutocomplete.js

@@ -0,0 +1,384 @@
+import { alpha as t } from "@mui/material/styles";
+const i = (o) => ({
+  M4LRHFAutocomplete: {
+    styleOverrides: {
+      "&.M4LRHFAutocomplete-root": {
+        height: "auto",
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "2px",
+        outline: "unset",
+        // Variant
+        "&.M4LRHFAutocomplete-multiple": {
+          "& .MuiAutocomplete-inputRoot": {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "6px"
+          },
+          "& .MuiInputBase-root": {
+            padding: "2px !important"
+          },
+          "& .MuiAutocomplete-root": {
+            height: "auto"
+          },
+          "&.M4LRHFAutocomplete-sizeSmall": {
+            "& .MuiChip-root": {
+              height: "20px"
+            }
+          },
+          "&.M4LRHFAutocomplete-sizeMedium": {
+            "& .MuiChip-root": {
+              height: "32px"
+            }
+          }
+        },
+        /* General properties */
+        "& .MuiAutocomplete-root": {
+          height: "100%",
+          "& .MuiFormControl-root": {
+            height: "100%",
+            "& .MuiInputBase-root": {
+              borderColor: o.vars.palette?.border.default,
+              position: "relative",
+              height: "100%",
+              "& .MuiInputBase-input": {
+                /* Selector del elemento html input */
+                boxSizing: "border-box",
+                color: o.vars.palette.text.secondary,
+                backgroundColor: "transparent",
+                height: "100%",
+                padding: "0 16px 0 8px",
+                ...o.colorSchemes.finalTheme.typography.body
+                /*  '& .MuiInputAdornment-root': {
+                                                         margin: '0px',
+                                                         padding: '0px',
+                                                     },
+                
+                                                     '& .M4LIcon-icon': {
+                                                         backgroundColor: theme.vars.palette.text.secondary,
+                                                         transition: 'all .3s ease',
+                                                     },
+                
+                                                     '& .MuiOutlinedInput-notchedOutline': {
+                                                         border: '1px solid',
+                                                         borderColor: theme.vars.palette?.border.default,
+                                                         borderRadius: '4px',
+                                                         inset: '0px',
+                                                         transition: 'all .3s ease',
+                
+                                                         '& legend': {
+                                                             display: 'none'
+                                                            },
+                
+                                                        } */
+              },
+              "& .M4LRHFAutocomplete-containerRefreshDown": {
+                display: "flex",
+                width: "auto",
+                "& .M4LRHFAutocomplete-iconLeft": {
+                  borderLeft: "1px solid",
+                  borderColor: o.vars.palette?.border.default
+                }
+              },
+              "& .M4LRHFAutocomplete-iconDown": {},
+              "& .MuiOutlinedInput-notchedOutline": {
+                inset: "0",
+                height: "unset",
+                "& legend": {
+                  display: "none"
+                }
+              }
+            }
+          }
+        },
+        /* Skeleton general properties*/
+        "& .M4LRHFAutocomplete-skeletonRoot": {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: "100%",
+          "& .M4LRHFAutocomplete-skeleton": {
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            border: "1px solid",
+            borderColor: o.vars.palette.divider,
+            borderRadius: "4px",
+            padding: "0 10px",
+            overflow: "hidden",
+            "& .M4LRHFAutocomplete-SkeletonContainerText": {
+              width: "100%",
+              height: "auto",
+              overflow: "hidden"
+            }
+          }
+        },
+        "& .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root": {
+          padding: "0"
+        },
+        "& .M4LRHFAutocomplete-label": {
+          color: o.vars.palette.text.secondary,
+          transition: "all .3s ease"
+        },
+        "& .MuiAutocomplete-endAdornment": {
+          top: "unset"
+        },
+        "& .MuiAutocomplete-root .MuiInputBase-root": {
+          padding: "0p 8px",
+          height: "100%"
+          //revisar
+        },
+        /* State hover */
+        "&:hover": {
+          "& .M4LRHFAutocomplete-label": {
+            color: o.vars.palette.text.secondary
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            borderColor: o.vars.palette.primary?.hover,
+            boxShadow: `0px 1px 8px ${t(
+              o.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.primary?.hover
+          }
+        },
+        /* State focus and active */
+        "&.M4LRHFAutocomplete-isFocus": {
+          "& .M4LRHFAutocomplete-label": {
+            color: o.vars.palette.primary.focusActive
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            transition: "all .1s ease",
+            background: o.vars.palette.primary.opacity,
+            border: "2px solid",
+            borderColor: o.vars.palette.primary.focusActive,
+            boxShadow: `0px 1px 8px ${t(
+              o.colorSchemes.finalTheme.palette.primary.main,
+              0.32
+            )}`
+          },
+          "& .MuiInputBase-input": {
+            color: o.vars.palette.text.primary
+          },
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.primary.focusActive
+          }
+        },
+        /* State error */
+        "&.M4LRHFAutocomplete-variantError": {
+          "& .M4LRHFAutocomplete-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
+            }
+          },
+          "&.M4LRHFAutocomplete-isFocus": {
+            "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+              boxShadow: o.customShadows?.error
+            }
+          }
+        },
+        /* State disabled */
+        "&.M4LRHFAutocomplete-isDisabled": {
+          "& .M4LRHFAutocomplete-label": {
+            color: o.vars.palette.text.disabled
+          },
+          "& .MuiInputBase-root .MuiOutlinedInput-notchedOutline": {
+            border: "1px solid",
+            borderColor: o.vars.palette?.border.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
+          }
+        },
+        /* Sizes */
+        "&.M4LRHFAutocomplete-sizeSmall": {
+          "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
+            "& .M4LImage-root": {
+              width: "24px",
+              height: "24px",
+              marginLeft: "6px"
+            },
+            height: "fit-content",
+            minHeight: "24px"
+          }
+        },
+        "&.M4LRHFAutocomplete-sizeMedium": {
+          "& .M4LRHFAutocomplete-skeleton,\n                          & .MuiAutocomplete-root": {
+            "& .M4LImage-root": {
+              width: "28px",
+              height: "28px",
+              marginLeft: "6px"
+            },
+            height: "fit-content",
+            minHeight: "36px"
+          }
+        },
+        // variant image defined
+        "&.M4LRHFAutocomplete-imageWidthDefined": {
+          "& .M4LImage-root": {
+            "& .M4LImage-img": {
+              objectPosition: "left"
+            }
+          }
+        }
+        // with multiple values in chips
+      }
+    }
+  },
+  M4LRHFAutocompletePopover: {
+    styleOverrides: {
+      // Menu popover que se despliega luego de interactuar con el componente.
+      // Despliega la lista de opciones diponibles.
+      "&.M4LRHFAutocomplete-popper": {
+        zIndex: "1300",
+        // Primer contendeor del manu, se utiliza para dar espacio interno y distribuir los items.
+        "& .MuiAutocomplete-listbox": {
+          padding: "8px",
+          display: "flex",
+          flexDirection: "column",
+          "& .MuiAutocomplete-option": {
+            borderRadius: "unset"
+          },
+          "& .M4LRHFAutocomplete-withImage": {
+            display: "flex",
+            alignItems: "center",
+            cursor: "pointer",
+            "& .M4LImage-root": {
+              height: "100%",
+              width: "auto",
+              alignItems: "start"
+            }
+          }
+        },
+        // Estilos generales para withImage
+        "& .M4LRHFAutocomplete-withImage": {
+          display: "flex",
+          gap: "8px",
+          // Estados por evento de usuario
+          "&:hover": {
+            color: o.vars.palette.text.primary,
+            backgroundColor: o.vars.palette.primary.opacity
+          },
+          "& .M4LImage-root": {
+            width: "auto",
+            height: "100%"
+          }
+        },
+        // Estilos del menu para la versión de tamaño small
+        "&.M4LRHFAutocomplete-sizeSmall": {
+          // Item sin imagen
+          "& .MuiAutocomplete-listbox": {
+            "& .MuiAutocomplete-option": {
+              minHeight: "24px"
+            },
+            // Item con imagen
+            "& .M4LRHFAutocomplete-withImage": {
+              paddingLeft: "4px",
+              height: "24px",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              overflow: "hidden",
+              "& .M4LImage-img": {
+                width: "22px",
+                height: "22px",
+                position: "relative"
+              }
+            }
+          }
+        },
+        // Estilos del menu para la versión de tamaño medium
+        "&.M4LRHFAutocomplete-sizeMedium": {
+          // Item sin imagen
+          "& .MuiAutocomplete-listbox": {
+            "& .MuiAutocomplete-option": {
+              height: "36px"
+            }
+          },
+          // Item con imagen
+          "& .M4LRHFAutocomplete-withImage": {
+            paddingLeft: "4px",
+            height: "36px",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            overflow: "hidden",
+            "& .M4LImage-img": {
+              width: "28px",
+              height: "28px",
+              position: "relative"
+            }
+          }
+        },
+        // variación de ancho de imagen definido
+        "&.M4LRHFAutocomplete-imageWidthDefined": {
+          "& .M4LImage-img": {
+            minWidth: "24px",
+            objectPostion: "left"
+          }
+        },
+        "& .MuiPaper-root": {
+          boxShadow: o.customShadows?.z2,
+          "& .MuiAutocomplete-listbox .MuiAutocomplete-option:hover": {
+            color: o.vars.palette.text.primary,
+            backgroundColor: o.vars.palette.primary.opacity
+          }
+        }
+      }
+    }
+  },
+  M4LRHFAutocompleteChip: {
+    styleOverrides: {
+      "&.M4LRHFAutocomplete-sizeSmall": {
+        height: "18px",
+        // important debido a que MUI agrega media queries directamente al elemento.
+        minHeight: "18px !important",
+        "& .MuiChip-deleteIcon": {
+          fontSize: "16px"
+        },
+        "& .MuiChip-label": {
+          paddingRight: 0
+        }
+      },
+      "&.M4LRHFAutocomplete-sizeMedium": {
+        height: "24px",
+        // important debido a que MUI agrega media queries directamente al elemento.
+        minHeight: "24px !important",
+        "& .MuiChip-deleteIcon": {
+          fontSize: "20px"
+        },
+        "& .MuiChip-label": {
+          paddingRight: 0
+        }
+      }
+    }
+  }
+});
+export {
+  i as M
+};

package/theme/overrides/M4LRHFComponents/M4LRHFAutocompleteAsync.js

@@ -0,0 +1,13 @@
+const e = (t) => ({
+  M4LRHFAutocompleteAsync: {
+    styleOverrides: {
+      "&.M4LRHFAutocompleteAsync-root": {
+        width: "100%",
+        height: "auto"
+      }
+    }
+  }
+});
+export {
+  e as M
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LRHFCheckbox: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LRHFCheckbox: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFCheckbox: {
         styleOverrides: {
             '&.M4LRHFCheckbox-root': {

package/theme/overrides/M4LRHFComponents/M4LRHFCheckbox.js

@@ -0,0 +1,80 @@
+const i = (o) => ({
+  M4LRHFCheckbox: {
+    styleOverrides: {
+      "&.M4LRHFCheckbox-root": {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        [o.breakpoints.down("sm")]: {
+          "& .M4LRHFCheckbox-checkTypography": {
+            "& .M4LCheckBox-root": {
+              "& .MuiButtonBase-root": {
+                "& .MuiSvgIcon-fontSizeSmall": {
+                  height: "20px",
+                  width: "20px"
+                }
+              }
+            }
+          }
+        },
+        ".M4LRHFCheckbox-checkTypography": {
+          display: "flex",
+          gap: o.spacing(2),
+          [o.breakpoints.down("sm")]: {
+            gap: o.spacing(1),
+            ...o.colorSchemes.finalTheme.typography.paragraph
+          }
+        },
+        "& .MuiTypography-root": {
+          color: o.vars.palette.text.primary,
+          ...o.colorSchemes.finalTheme.typography.body
+        },
+        /* caso small */
+        ".M4LRHFCheckbox-small .MuiButtonBase-root": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeSmall": {
+          width: "16px",
+          height: "16px"
+        },
+        /* caso medium */
+        ".M4LRHFCheckbox-medium .MuiButtonBase-root": {
+          width: "24px",
+          height: "24px"
+        },
+        ".MuiCheckbox-root .MuiSvgIcon-fontSizeMedium": {
+          width: "20px",
+          height: "20px"
+        },
+        ".MuiButtonBase-root": {
+          borderRadius: "4px"
+        },
+        ".MuiButtonBase-root:hover": {
+          backgroundColor: o.vars.palette.primary.opacity
+        },
+        ".Mui-focusVisible": {
+          border: "1px solid",
+          borderColor: o.vars.palette.primary.focusActive
+        },
+        ".MuiButtonBase-root:hover .MuiSvgIcon-root": {
+          fill: o.vars.palette.primary?.hover
+        },
+        /* caso general */
+        ".M4LRHFCheckbox-checkTypography .MuiTypography-root": {
+          ...o.colorSchemes.finalTheme.typography.body
+        },
+        ".M4LRHFCheckbox-stateDisabled .MuiSvgIcon-root": {
+          fill: o.vars.palette.background?.default
+        },
+        /* selector del caso focus por tab */
+        ".MuiButtonBase-root .Mui-focusVisible:focus-visible": {
+          outline: "#FFF00"
+        }
+      }
+    }
+  }
+});
+export {
+  i as M
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LRHFColorPicker: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LRHFColorPicker: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFColorPicker: {
         styleOverrides: {
             '&.M4LRHFColorPicker-root': {

package/theme/overrides/M4LRHFComponents/M4LRHFColorPicker.js

@@ -0,0 +1,133 @@
+const r = (o) => ({
+  M4LRHFColorPicker: {
+    styleOverrides: {
+      "&.M4LRHFColorPicker-root": {
+        width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        outline: "unset",
+        "&.M4LRHFColorPicker-sizeSmall": {
+          "& .M4LRHFColorPicker-containerFieldColor": {
+            "& .M4LRHFColorPicker-boxColor": {
+              width: "20px",
+              height: "20px"
+            }
+          }
+        },
+        "&.M4LRHFColorPicker-sizeMedium": {
+          "& .M4LRHFColorPicker-containerFieldColor": {
+            "& .M4LRHFColorPicker-boxColor": {
+              width: "24px",
+              height: "24px"
+            }
+          }
+        },
+        "& .M4LRHFColorPicker-skeleton": {
+          borderRadius: "4px"
+        },
+        "& .M4LRHFColorPicker-containerFieldColor": {
+          display: "flex",
+          aligItems: "center",
+          justifyContent: "center",
+          gap: "4px",
+          padding: "2px",
+          border: "1.5px solid",
+          borderColor: o.vars.palette?.border.default,
+          borderRadius: "4px",
+          width: "fit-content",
+          "& .M4LRHFColorPicker-boxColor": {
+            cursor: "pointer"
+          },
+          /* '& .M4LIcon-root': {
+                          minHeight: '18px',
+                          minWidth: '18px',
+                          cursor: 'pointer',
+                          borderRadius: '4px',
+                      }, */
+          "& .M4LIcon-root:hover": {
+            background: o.vars.palette.background.hover
+          }
+        }
+      }
+    }
+  },
+  M4LRHFColorPickerPopoverRoot: {
+    styleOverrides: {
+      "&.M4LRHFColorPicker-popoverRoot": {
+        "& .MuiPaper-root": {
+          background: o.vars.palette.background.default,
+          padding: "8px",
+          border: "1px solid",
+          borderColor: o.vars.palette?.border.secondary,
+          borderRadius: "4px",
+          boxShadow: o.vars.customShadows.z4,
+          test: "root",
+          "& .M4LRHFColorPicker-containerPicker": {
+            background: "transparent",
+            borderRadius: "4px",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-end",
+            gap: "24px",
+            "& .sketch-picker": {
+              background: "transparent !important",
+              boxShadow: "none !important",
+              padding: "12px !important",
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              border: "1px solid",
+              borderColor: o.vars.palette?.border.secondary,
+              borderRadius: "4px",
+              backgroundColor: o.vars.palette.background.default,
+              "& :nth-of-type(-n + 1)": {
+                borderRadius: "4px"
+              },
+              "& .flexbox-fix": {
+                border: "none !important",
+                background: "transparent !important",
+                "& > div": {
+                  "& > div": {
+                    display: "flex",
+                    flexDirection: "column-reverse",
+                    ...o.colorSchemes.finalTheme.typography.body,
+                    color: o.vars.palette.text.secondary,
+                    gap: "2px",
+                    padding: "0 important",
+                    "& > input": {
+                      display: "flex",
+                      textAlign: "center !important",
+                      border: "1px solid",
+                      borderColor: o.vars.palette?.border.default,
+                      borderRadius: "2px",
+                      background: "transparent",
+                      minHeight: "24px",
+                      height: "24px !important",
+                      ...o.colorSchemes.finalTheme.typography.body,
+                      color: `${o.vars.palette.text.primary} !important`
+                    },
+                    "& > label": {
+                      display: "flex",
+                      textAlign: "left !important",
+                      ...o.colorSchemes.finalTheme.typography.body,
+                      color: `${o.vars.palette.text.secondary} !important`,
+                      padding: "0 !important"
+                    }
+                  }
+                }
+              }
+            },
+            "& .M4LButton-root": {
+              display: "flex",
+              justifyContent: "right"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LRHFDateTime: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LRHFDateTime: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LRHFDateTime: {
         styleOverrides: {
             '&.M4LRHFDateTime-root': {