@m4l/components 9.2.21 → 9.2.23

package/components/WindowBase/WindowBase.styles.js

@@ -58,9 +58,14 @@ const windowBaseStyles = {
       }
     },
     ...ownerState?.selected ? {
-      background: theme.vars.palette["default"].selectedOpacity
+      background: theme.vars.palette["primary"].enabledOpacity
     } : {
-      background: theme.vars.palette["default"].opacity
+      background: theme.vars.palette.background.default
+    },
+    ...ownerState?.selected ? {
+      borderBottom: `1px solid ${theme.vars.palette.border.disabled}`
+    } : {
+      borderBottom: `1px solid ${theme.vars.palette.border.default}`
     }
   }),
   /**
@@ -79,9 +84,13 @@ const windowBaseStyles = {
   /**
    * Styles for the title of the header of the window base component.
    */
-  headerTitleWindowBase: ({ theme }) => ({
+  headerTitleWindowBase: ({ theme, ownerState }) => ({
     minWidth: "30px",
-    color: theme.vars.palette.text.primary,
+    ...ownerState?.selected ? {
+      color: `${theme.vars.palette["primary"].semanticText} !important`
+    } : {
+      color: `${theme.vars.palette.text.secondary} !important`
+    },
     fontWeight: `${theme.typography.fontWeightBold} !important`,
     whiteSpace: "nowrap",
     overflow: "hidden",
@@ -125,20 +134,30 @@ const windowBaseStyles = {
   /**
    * Styles for the subtitle of the header of the window base component.
    */
-  headerSubTitleWindowBase: ({ theme }) => ({
+  headerSubTitleWindowBase: ({ theme, ownerState }) => ({
     width: "auto !important",
     height: "auto !important",
-    color: `${theme.vars.palette.text.primary} !important`
+    ...ownerState?.selected ? {
+      color: `${theme.vars.palette["primary"].semanticText} !important`
+    } : {
+      color: `${theme.vars.palette.text.secondary} !important`
+    }
   }),
   /**
    * Styles for the icon of the header of the window base component.
    */
-  headerIconWindowBase: ({ theme }) => ({
+  headerIconWindowBase: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: theme.vars.size.borderRadius["r0-5"],
-    color: theme.vars.palette.text.primary
+    "& .M4LIcon-icon": {
+      ...ownerState?.selected ? {
+        backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
+      } : {
+        backgroundColor: `${theme.vars.palette.text.secondary} !important`
+      }
+    }
   }),
   /**
    * Styles for the icons wrapper of the window base component.
@@ -155,7 +174,13 @@ const windowBaseStyles = {
    * Styles for the dot icon of the window base component.
    */
   pointIcon: ({ theme, ownerState }) => ({
-    color: theme.vars.palette.text.primary,
+    "& .M4LIcon-icon": {
+      ...ownerState?.selected ? {
+        backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
+      } : {
+        backgroundColor: `${theme.vars.palette.text.secondary} !important`
+      }
+    },
     ...theme.generalSettings.isMobile ? {
       ...ownerState.size === "small" && {
         height: theme.vars.size.mobile.small.base
@@ -175,8 +200,15 @@ const windowBaseStyles = {
   /**
    * Styles for the menu actions of the window base component.
    */
-  menuActionsWindowBase: () => ({
-    left: "-50px"
+  menuActionsWindowBase: ({ theme, ownerState }) => ({
+    left: "-50px",
+    "& .M4LIcon-icon": {
+      ...ownerState?.selected ? {
+        backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
+      } : {
+        backgroundColor: `${theme.vars.palette.text.secondary} !important`
+      }
+    }
   }),
   /**
    * Styles for the linear progress of the window base component.

package/components/mui_extended/TextField/TextField.js

@@ -30,7 +30,8 @@ const TextField = forwardRef(function TextField2(props, ref) {
     disabled,
     paletteColor,
     variant,
-    error
+    error,
+    color: error ? "error" : "default"
   };
   const isSkeleton = useModuleSkeleton();
   if (isSkeleton) {

package/components/mui_extended/TextField/TextField.styles.js

@@ -117,6 +117,21 @@ const textFieldStyles = {
         borderRight: 0,
         borderBottom: theme.vars.size.borderStroke.actionInput
       }
+    },
+    // Variant Contained TextField
+    ...ownerState.variant === "contained" && {
+      [`&.${TEXT_FIELD_CLASSES.contained} .MuiInputBase-root`]: {
+        border: "none",
+        backgroundColor: theme.vars.palette[ownerState.color || "default"][ownerState.error ? "toneOpacity" : "enabled"]
+      },
+      ...ownerState.error && {
+        border: theme.vars.size.borderStroke.actionInput,
+        borderColor: `${ownerState.paletteColor?.enabled}!important`
+      },
+      "&:focus-within": {
+        border: theme.vars.size.borderStroke.actionInput,
+        borderColor: `${ownerState.paletteColor?.enabled}!important`
+      }
     }
   }),
   /**

package/components/mui_extended/TextField/constants.d.ts

@@ -3,6 +3,7 @@ export declare const TEXT_FIELD_KEY_COMPONENT = "M4LTextField";
 export declare const COMBINATED_TEXTFIELD_ENUMS: {
     outlined: TexFieldComplementaryClasses.outlined;
     text: TexFieldComplementaryClasses.text;
+    contained: TexFieldComplementaryClasses.contained;
     root: TextFieldSlots.root;
     skeleton: TextFieldSlots.skeleton;
 };

package/components/mui_extended/TextField/slots/TextFieldEnum.d.ts

@@ -4,5 +4,6 @@ export declare enum TextFieldSlots {
 }
 export declare enum TexFieldComplementaryClasses {
     outlined = "outlined",
-    text = "text"
+    text = "text",
+    contained = "contained"
 }

package/components/mui_extended/TextField/slots/TextFieldEnum.js

@@ -6,6 +6,7 @@ var TextFieldSlots = /* @__PURE__ */ ((TextFieldSlots2) => {
 var TexFieldComplementaryClasses = /* @__PURE__ */ ((TexFieldComplementaryClasses2) => {
   TexFieldComplementaryClasses2["outlined"] = "outlined";
   TexFieldComplementaryClasses2["text"] = "text";
+  TexFieldComplementaryClasses2["contained"] = "contained";
   return TexFieldComplementaryClasses2;
 })(TexFieldComplementaryClasses || {});
 export {

package/components/mui_extended/TextField/types.d.ts

@@ -2,12 +2,12 @@ import { TextFieldProps as MUITextFieldProps } from '@mui/material/TextField';
 import { Theme, PaletteColor } from '@mui/material';
 import { TextFieldSlots } from './slots/TextFieldEnum';
 import { TEXT_FIELD_KEY_COMPONENT } from './constants';
-import { Sizes } from '@m4l/styles';
+import { ComponentPalletColor, Sizes } from '@m4l/styles';
 import { M4LOverridesStyleRules } from '../../../@types/augmentations';
 /**
  * Variants for the TextField component.
  */
-export type TextFieldVariants = 'outlined' | 'text';
+export type TextFieldVariants = 'outlined' | 'text' | 'contained';
 /**
  * Variants for the Skeleton component.
  */
@@ -61,6 +61,7 @@ export interface TextFieldOwnerState {
      * Indica si el campo de texto es error.
      */
     error?: boolean;
+    color?: Extract<ComponentPalletColor, 'default' | 'error'>;
 }
 export type TextFieldSlotsType = keyof typeof TextFieldSlots;
 export type TextFieldStyles = M4LOverridesStyleRules<TextFieldSlotsType, typeof TEXT_FIELD_KEY_COMPONENT, Theme>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.21",
+  "version": "9.2.23",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"