@m4l/components 9.2.21 → 9.2.22

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.22",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"