@m4l/components 8.2.0-beta.devDaniel.RHFInputNumberSpinner → 8.2.0-beta.devManuela.RHFTextField

package/@types/types.d.ts

@@ -52,7 +52,6 @@ import type {
 } from '../components/mui_extended/MenuItem/types';
 
 import { SelectOwnerState, SelectSlotsType } from '../components/mui_extended/Select/types';
-import { RHFInputNumberSpinnerOwnerState, RHFInputNumberSpinnerSlotsType } from '../components/hook-form/RHFInputNumberSpinner/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -77,7 +76,6 @@ declare module '@mui/material/styles' {
     M4LSkeleton: SkeletonSlotsType;
     M4LSelect: SelectSlotsType;
     M4LTypography: TypographySlotsType;
-    M4LRHFInputNumberSpinner: RHFInputNumberSpinnerSlotsType;
   }
 
   interface ComponentsPropsList {
@@ -102,7 +100,6 @@ declare module '@mui/material/styles' {
     M4LSkeleton: Partial<SkeletonOwnerState>;
     M4LSelect: Partial<SelectOwnerState>;
     M4LTypography: Partial<TypographyOwnerState>;
-    M4LRHFInputNumberSpinner:Partial<RHFInputNumberSpinnerOwnerState>
   }
 
   interface Components {
@@ -205,11 +202,6 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LTypography'];
       variants?: ComponentsVariants['M4LTypography'];
     };
-    M4LRHFInputNumberSpinner?: {
-      defaultProps?: ComponentsPropsList['M4LRHFInputNumberSpinner'];
-      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFInputNumberSpinner'];
-      variants?: ComponentsVariants['M4LRHFInputNumberSpinner'];
-    };
   }
 }
 }

package/components/hook-form/RHFTextField/RHFTextField.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from "react";
+import { forwardRef } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { useTheme, InputAdornment } from "@mui/material";
 import { useModuleSkeleton, getPropertyByString } from "@m4l/core";
@@ -13,7 +13,7 @@ import { R as RHFTextFieldSlots } from "./slots/RHFTextFieldEnum.js";
 import { H as HelperError } from "../../HelperError/HelperError.js";
 const RHFTextField = forwardRef((props, ref) => {
   const {
-    name: nameRHF,
+    name,
     autoComplete = "off",
     skeletonWidth = "100%",
     skeletonHeight = "18px",
@@ -30,42 +30,32 @@ const RHFTextField = forwardRef((props, ref) => {
     color = "primary",
     isInteger = true,
     mandatoryMessage,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     helperText = true,
     ...other
   } = props;
-  const ariaLabelledById = `field-label-${nameRHF}`;
+  const ariaLabelledById = `field-label-${name}`;
   const {
     control,
     formState: { errors }
   } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
   const { handlerFocus, handlerOnKeyUp, handlerOnBlur } = useFormFocus();
   const isDesktop = useResponsiveDesktop();
   const isSkeleton = useModuleSkeleton();
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors[nameRHF], variant, control]);
   const theme = useTheme();
   const paletteColor = getPropertyByString(
     theme.palette,
-    disabled ? "default" : color,
+    disabled ? "default" : errors ? "error" : color,
     theme.palette.default
   );
   const ownerState = {
-    name: nameRHF,
+    name,
     isInteger,
     paletteColor,
     type: type ?? "text",
     size: !isDesktop ? "medium" : size,
     disabled,
-    variantRHFTextField: RHFvariants
+    variantRHFTextField: RHFvariants,
+    RHFtextFieldError: !!errors[name]
   };
   return (
     /* RHFTextFieldRoot: Contenedor principal del componente, es usado para aplicar los estilos css de los overrides
@@ -79,14 +69,14 @@ const RHFTextField = forwardRef((props, ref) => {
         onBlur: handlerOnBlur,
         onKeyUp: handlerOnKeyUp,
         role: "textbox",
-        htmlFor: nameRHF,
+        htmlFor: name,
         ...getPropDataTestId(RHF_TEXT_FIELD_KEY_COMPONENT, RHFTextFieldSlots.root),
         children: !isSkeleton ? (
           /* controller: Componente usado para suscribir el componente al contexto de hook-form */
           /* @__PURE__ */ jsx(
             Controller,
             {
-              name: nameRHF,
+              name,
               control,
               render: ({ field: { onChange, value, ref: inputRef }, fieldState: { error } }) => {
                 const onInternalChange = (event) => {
@@ -128,8 +118,8 @@ const RHFTextField = forwardRef((props, ref) => {
                       className: "rhf-text-field-root",
                       value: type === "number" ? isNaN(parseFloat(value)) ? "" : value : value || "",
                       inputProps: {
-                        name: nameRHF,
-                        id: nameRHF,
+                        name,
+                        id: name,
                         "aria-labelledby": ariaLabelledById,
                         ...getPropDataTestId(RHF_TEXT_FIELD_KEY_COMPONENT, RHFTextFieldSlots.textField)
                       },
@@ -151,10 +141,10 @@ const RHFTextField = forwardRef((props, ref) => {
                       ...other
                     }
                   ),
-                  currentVariant ? /* @__PURE__ */ jsx(
+                  error?.message ? /* @__PURE__ */ jsx(
                     HelperError,
                     {
-                      message: currentVariant !== "error" ? helperMessage : error?.message
+                      message: error.message
                     }
                   ) : null
                 ] });

package/components/hook-form/RHFTextField/RHFTextField.styles.js

@@ -1,265 +1,212 @@
 const rhfTextFieldStyles = {
   /**
    * Estilos personalizados para el componente RHFTextField.
-   * @author Bruce Escobar - automatic
-   * @createdAt 2024-10-22 09:41:31 - automatic
-   * @updatedAt 2024-10-22 19:27:23 - automatic
-   * @updatedUser Bruce Escobar - automatic
    */
   textField: ({ ownerState, theme }) => ({
     "&.rhf-text-field-root": {
       width: "100%",
       padding: 0,
-      borderRadius: theme.size.borderRadius.r1,
-      // Condiciones de tamaño Medium en el root
-      ...ownerState.sizes === "medium" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.medium.action,
-          width: theme.vars.size.mobile.medium.action
-        } : {
-          height: theme.vars.size.desktop.medium.action,
-          width: theme.vars.size.desktop.medium.action
-        }
-      },
-      // Condiciones de tamaño Small en el root
-      ...ownerState.sizes === "small" && {
-        ...theme.generalSettings.isMobile ? {
-          height: theme.vars.size.mobile.small.action,
-          width: theme.vars.size.mobile.small.action
-        } : {
-          height: theme.vars.size.desktop.medium.action,
-          width: theme.vars.size.desktop.medium.action
-        }
+      borderRadius: theme.vars.size.borderRadius.r1,
+      display: "flex",
+      '& [class*="M4LIcon-icon"]': {
+        backgroundColor: ownerState.paletteColor?.main
       },
       // Variant Outlined TextField
       ...ownerState.variantRHFTextField === "outlined" && {
         "& .MuiInputBase-root": {
           padding: 0,
           minHeight: 0,
+          height: "inherit",
           paddingLeft: theme.vars.size.baseSpacings.sp1,
           paddingRight: theme.vars.size.baseSpacings.sp1,
-          borderRadius: theme.size.borderRadius.r1,
+          borderRadius: theme.vars.size.borderRadius.r1,
           "& .MuiOutlinedInput-notchedOutline": {
+            minHeight: 0,
             border: theme.vars.size.borderStroke.actionInput,
-            borderColor: theme.vars.palette.border.default
+            borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default
           },
-          //Active para primary para el icono y placeholder
-          "&:active": {
-            ":focus-within": {
-              "&:focus-within .MuiInputBase-input::placeholder": {
-                color: theme.vars.palette.primary.active
-              },
-              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: theme.vars.palette.primary.active
-              }
-            }
+          //Estilo Hover para primary para el Icono e IconButton
+          "&:hover": {
+            backgroundColor: ownerState.paletteColor?.hoverOpacity
           },
-          //Estilos de focus primary para el icono y placeholder
+          //Estilo Focus para primary para el Icono e IconButton
           ":focus-within": {
-            "&:focus-within .MuiInputBase-input::placeholder": {
-              color: ownerState.paletteColor?.main
-            },
+            borderColor: theme.vars.palette.border.main,
             '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
               backgroundColor: ownerState.paletteColor?.main
+            },
+            '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
+              backgroundColor: ownerState.paletteColor?.main
             }
           },
-          //Estilos del hover primar
-          "&:hover": {
-            backgroundColor: ownerState.paletteColor?.hoverOpacity
+          //Estilo Active para primary para el Icono e IconButton
+          "&:active": {
+            ":focus-within": {
+              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+                backgroundColor: ownerState.paletteColor?.main
+              },
+              '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
+                backgroundColor: ownerState.paletteColor?.main
+              },
+              "&:not(:placeholder-shown)": {
+                color: ownerState.paletteColor?.active
+              }
+            }
           },
           //Estilos del InputBase
           "& .MuiInputBase-input": {
-            ...ownerState.error && {
-              borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
-            },
+            padding: "0px",
+            paddingRight: theme.vars.size.baseSpacings.sp1,
+            paddingLeft: theme.vars.size.baseSpacings.sp1,
+            height: "inherit",
             //Estilos del InputBase en hover
             "&:hover ~ .MuiOutlinedInput-notchedOutline": {
               ...ownerState.error && {
                 borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
               }
             },
-            //Estilos del InputBase en Focus
+            // Estilos del InputBase en Focus
             "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+              borderColor: ownerState.paletteColor?.main
             },
-            //Estilos del InputBase en Active
+            // Estilos del InputBase en Active
             "&:active ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active
+              borderColor: ownerState.paletteColor?.active
             },
             //Estilos del InputBase en placeholder default
             "&::placeholder": {
-              color: theme.vars.palette.text.primary
+              color: theme.vars.palette.text.secondary
+            },
+            "&:not(:placeholder-shown)": {
+              color: ownerState.textFieldError ? ownerState.paletteColor?.main : theme.vars.palette.text.primary
             }
           },
           //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
           "& .MuiOutlinedInput-input:-webkit-autofill": {
             padding: 0
           },
-          // Historia Error variante Outlined
-          ...ownerState.error && {
-            "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
-            },
-            //Estilos del hover Error
-            "&:hover": {
-              backgroundColor: theme.vars.palette.error.hoverOpacity,
-              borderColor: ownerState.paletteColor?.main
-            },
-            //Estilos focus Error el icono y placeholder de color error
-            "&:focus-within": {
-              "&:focus-within .MuiInputBase-input::placeholder": {
-                color: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
-              },
-              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
-              }
-            },
-            //Estilos active Error el icono y placeholder de color error
-            "&:active": {
-              "&:focus-within": {
-                "&:focus-within .MuiInputBase-input::placeholder": {
-                  color: theme.vars.palette.error.active
-                },
-                '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                  backgroundColor: theme.vars.palette.error.active
-                }
-              }
-            }
-          },
           // Historia Disabled para Outlined
           ...ownerState.disabled && {
-            borderColor: theme.palette.border.disabled,
-            pointerEvents: ownerState.disabled ? "none" : "auto",
+            borderColor: theme.vars.palette.border.disabled,
+            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
             "&:hover": {
-              pointerEvents: ownerState.disabled ? "none" : "auto"
+              pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
+            },
+            "& .MuiInputBase-input::placeholder": {
+              color: theme.vars.palette.text.disabled
             }
           }
         }
       },
-      // Variant Text RHFTextField
+      // Variant Text TextField
       ...ownerState.variantRHFTextField === "text" && {
         borderColor: "transparent",
         "& .MuiInputBase-root": {
           padding: 0,
           minHeight: 0,
+          height: "inherit",
           borderColor: "transparent",
           paddingLeft: theme.vars.size.baseSpacings.sp1,
           paddingRight: theme.vars.size.baseSpacings.sp1,
-          borderRadius: theme.size.borderRadius.r1,
+          borderRadius: theme.vars.size.borderRadius.r1,
           //Estilos para los bordes del campo de texto
           "& .MuiOutlinedInput-notchedOutline": {
+            minHeight: 0,
             border: theme.vars.size.borderStroke.actionInput,
-            borderColor: theme.vars.palette.border.default,
-            borderTop: theme.vars.palette.primary.main,
+            borderColor: ownerState.error ? ownerState.paletteColor?.main : theme.vars.palette.border.default,
             borderLeft: "transparent",
+            borderTop: "transparent",
             borderRight: "transparent"
           },
-          //Estilo Focus para primary para el icono y placeholder
+          //Estilo Hover para primary para el Icono e IconButton
+          "&:hover": {
+            backgroundColor: ownerState.paletteColor?.hoverOpacity
+          },
+          //Estilo Focus para primary para el Icono e IconButton
           ":focus-within": {
-            borderColor: theme.palette.border.main,
-            "&:focus-within .MuiInputBase-input::placeholder": {
-              color: ownerState.paletteColor?.main
-            },
             '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-              backgroundColor: theme.vars.palette.primary.main
+              backgroundColor: ownerState.paletteColor?.main
+            },
+            '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
+              backgroundColor: ownerState.paletteColor?.main
             }
           },
-          //Estilo Active para primary para el icono y placeholder
+          //Estilo Active para primary para el Icono e IconButton
           "&:active": {
             ":focus-within": {
-              "&:focus-within .MuiInputBase-input::placeholder": {
-                color: theme.vars.palette.primary.active
-              },
               '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: theme.vars.palette.primary.active
+                backgroundColor: ownerState.paletteColor?.main
+              },
+              '&:focus-within .MuiIconButton-root [class*="M4LIcon-icon"]': {
+                backgroundColor: ownerState.paletteColor?.main
+              },
+              "&:not(:placeholder-shown) .MuiOutlinedInput-notchedOutline": {
+                color: ownerState.textFieldError ? theme.vars.palette.error.main : theme.vars.palette.text.primary
               }
             }
           },
-          //Estilos para Hover Text
-          "&:hover": {
-            borderColor: "transparent",
-            backgroundColor: ownerState.paletteColor?.hoverOpacity
-          },
           //Estilos del InputBase
           "& .MuiInputBase-input": {
-            "&:hover ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
-            },
+            padding: "0px",
+            paddingRight: theme.vars.size.baseSpacings.sp1,
+            paddingLeft: theme.vars.size.baseSpacings.sp1,
+            height: "inherit",
             //Estilo Focus del InputBase
             "&:focus ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+              borderColor: ownerState.paletteColor?.main
             },
             //Estilo Active del InputBase
             "&:active ~ .MuiOutlinedInput-notchedOutline": {
-              borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active,
-              "&:focus-within .MuiInputBase-input::placeholder": {
-                color: theme.vars.palette.primary.active
-              }
+              borderColor: ownerState.paletteColor?.active
             },
+            // Estilos del InputBase en placeholder default
             "&::placeholder": {
-              color: theme.vars.palette.text.primary
+              color: theme.vars.palette.text.secondary
+            },
+            "&:not(:placeholder-shown)": {
+              color: ownerState.textFieldError ? ownerState.paletteColor?.main : theme.vars.palette.text.primary
             }
           },
           //Este estilo se asegura de que los campos de entrada que han sido autocompletados por el navegador no tengan ningún relleno adicional
           "& .MuiOutlinedInput-input:-webkit-autofill": {
             padding: 0
           },
-          // Historia Error
-          ...ownerState.error && {
-            // Historia Error variante Text
-            "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: theme.vars.palette.border.error,
-              borderTop: theme.vars.palette.border.error,
-              borderLeft: "transparent",
-              borderRight: "transparent",
-              "&:focus": { borderColor: theme.vars.palette.error.main }
-            },
-            //Estilos del hover Error
-            "&:hover": {
-              backgroundColor: theme.vars.palette.error.hoverOpacity
-            },
-            // Estilos focus Error el icono y placeholder de color error
-            "&:focus-within": {
-              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main,
-              "&:focus-within .MuiInputBase-input::placeholder": {
-                color: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
-              },
-              '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                backgroundColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
-              }
-            },
-            // Estilos active Error el icono y placeholder de color error
-            "&:active": {
-              "& .MuiOutlinedInput-notchedOutline": {
-                borderColor: theme.vars.palette.error.main
-              },
-              ":focus-within": {
-                "&:focus-within .MuiInputBase-input::placeholder": {
-                  color: theme.vars.palette.error.active
-                },
-                '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
-                  backgroundColor: theme.vars.palette.error.active
-                }
-              }
-            }
-          },
           // Historia Disabled
           ...ownerState.disabled && {
             "& .MuiOutlinedInput-notchedOutline": {
-              borderColor: theme.palette.border.disabled,
-              borderTop: theme.palette.border.disabled,
+              borderColor: theme.vars.palette.border.disabled,
+              borderTop: theme.vars.palette.border.disabled,
               borderLeft: "transparent",
               borderRight: "transparent"
             },
-            pointerEvents: ownerState.disabled ? "none" : "auto",
+            pointerEvents: ownerState.textFieldDisabled ? "none" : "auto",
             "&:hover": {
-              pointerEvents: ownerState.disabled ? "none" : "auto"
+              pointerEvents: ownerState.textFieldDisabled ? "none" : "auto"
+            },
+            "& .MuiInputBase-input::placeholder": {
+              color: theme.vars.palette.text.disabled
             }
           }
         }
       }
     }
   }),
+  /**
+   * Estilos personalizados para el componente Label.
+   */
+  label: ({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    color: theme.vars.palette.text.primary,
+    "& .mandatory": {
+      /*  color: theme.vars.palette.error.main, */
+      marginLeft: theme.spacing(0.5)
+    },
+    '& .M4LIcon-icon[class*="M4LIcon-icon"]': {
+      width: "inherit",
+      height: "inherit"
+    }
+  }),
   /**
    * Estilos personalizados para el componente Skeleton.
    * @author Bruce Escobar - automatic

package/components/hook-form/RHFTextField/stories/Error/RHFTextFieldErrorOutlined.stories.d.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ * Story for the Error outlined RHFvariants of the TextField component.
+ */
+export declare const ErrorOutlined: Story;
+/**
+ * Story for the Error outlined RHFvariants of the TextField component whit label props and adorment End
+ */
+export declare const ErrorOutlinedAdormentEnd: Story;
+/**
+ * Story for the Error outlined RHFvariants of the TextField component whit label props and adorment Start
+ */
+export declare const ErrorOutlinedAdormentStart: Story;
+/**
+ * Story for the Error outlined RHFvariants of the TextField component whitout adorments.
+ */
+export declare const WhitoutAdorments: Story;
+/**
+ * Story for the Error outlined RHFvariants of the TextField component whit adorment end.
+ */
+export declare const WhitAdormentEnd: Story;
+/**
+ * Story for the Error outlined RHFvariants of the TextField component whit adorment start.
+ */
+export declare const WhitAdormentStart: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Error/RHFTextFieldErrorText.stories.d.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ * Story for the Error Text RHFvariants of the TextField component.
+ */
+export declare const ErrorText: Story;
+/**
+ * Story for the Error Text RHFvariants of the TextField component whit label props and adorment End
+ */
+export declare const ErrorTextAdormentEnd: Story;
+/**
+ * Story for the Error Text RHFvariants of the TextField component whit label props and adorment Start
+ */
+export declare const ErrorTextAdormentStart: Story;
+/**
+ * Story for the Error Text RHFvariants of the TextField component whitout adorments.
+ */
+export declare const WhitoutAdorments: Story;
+/**
+ * Story for the Error Text RHFvariants of the TextField component whit adorment end.
+ */
+export declare const WhitAdormentEnd: Story;
+/**
+ * Story for the Error Text RHFvariants of the TextField component whit adorment start.
+ */
+export declare const WhitAdormentStart: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Primary/RHFTextFieldOutlined.stories.d.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ * Story for the primary outlined RHFvariants of the TextField component.
+ */
+export declare const PrimaryOutlined: Story;
+/**
+ * Story for the primary outlined RHFvariants of the TextField component whit label props and adorment End
+ */
+export declare const PrimaryOutlinedAdormentEnd: Story;
+/**
+ * Story for the primary outlined RHFvariants of the TextField component whit label props and adorment Start
+ */
+export declare const PrimaryOutlinedAdormentStart: Story;
+/**
+ * Story for the primary outlined RHFvariants of the TextField component whitout adorments.
+ */
+export declare const WhitoutAdorments: Story;
+/**
+ * Story for the primary outlined RHFvariants of the TextField component whit adorment end.
+ */
+export declare const WhitAdormentEnd: Story;
+/**
+ * Story for the primary outlined RHFvariants of the TextField component whit adorment start.
+ */
+export declare const WhitAdormentStart: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Primary/RHFTextFieldText.stories.d.ts

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+/**
+ * Story for the primary text variant of the TextField component.
+ */
+/**
+ * Story for the primary text RHFvariants of the TextField component.
+ */
+export declare const PrimaryText: Story;
+/**
+ * Story for the primary text RHFvariants of the TextField component whit label props and adorment End
+ */
+export declare const PrimaryTextAdormentEnd: Story;
+/**
+ * Story for the primary text RHFvariants of the TextField component whit label props and adorment Start
+ */
+export declare const PrimaryTextAdormentStart: Story;
+/**
+ * Story for the primary text RHFvariants of the TextField component whitout adorments.
+ */
+export declare const WhitoutAdorments: Story;
+/**
+ * Story for the primary text RHFvariants of the TextField component whit adorment end.
+ */
+export declare const WhitAdormentEnd: Story;
+/**
+ * Story for the primary text RHFvariants of the TextField component whit adorment start.
+ */
+export declare const WhitAdormentStart: Story;
+export default meta;

package/components/hook-form/RHFTextField/types.d.ts

@@ -28,6 +28,7 @@ export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputP
     isInteger?: boolean;
     color?: Extract<ComponentPalletColor, 'primary'>;
     RHFvariants?: VariantsRHFTextField;
+    RHFtextFieldError?: boolean;
 }
 export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
     type: 'password' | 'text';
@@ -39,6 +40,8 @@ export type RHFTextFieldOwnerState = RHFTextFieldProps & {
     componentPaletteColor?: ComponentPalletColor;
     paletteColor: PaletteColor;
     variantRHFTextField?: VariantsRHFTextField;
+    RHFtextFieldError?: boolean;
+    error?: boolean;
 };
 export type RHFTextFieldSlotsType = keyof typeof RHFTextFieldSlots;
 export type RHFTextFieldStyles = Partial<OverridesStyleRules<RHFTextFieldSlotsType, typeof RHF_TEXT_FIELD_KEY_COMPONENT, Theme> | undefined> | undefined;

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

@@ -1,5 +1,5 @@
 export declare enum TextFieldSlots {
-    muiTextFieldStyled = "muiTextFieldStyled",
+    root = "root",
     textFieldRootStyled = "textFieldRootStyled",
     muiSkeletonStyled = "muiSkeletonStyled"
 }

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

@@ -1,13 +1,13 @@
 export declare const MuiTextFieldStyled: import('@emotion/styled').StyledComponent<Pick<{
     variant?: import('@mui/material').TextFieldVariants | undefined;
-} & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').OutlinedTextFieldProps | import('@mui/material').StandardTextFieldProps, "variant">, "children" | "value" | "ref" | "title" | "component" | "size" | "name" | "error" | "select" | "rows" | "id" | "type" | "hidden" | "color" | "content" | "style" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "key" | "autoComplete" | "placeholder" | "required" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').OwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').OwnerState> & Record<string, unknown>;
+} & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').OutlinedTextFieldProps | import('@mui/material').StandardTextFieldProps, "variant">, "children" | "value" | "ref" | "title" | "component" | "size" | "name" | "error" | "select" | "rows" | "id" | "type" | "hidden" | "color" | "content" | "style" | "disabled" | "variant" | "margin" | "translate" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "label" | "key" | "autoComplete" | "placeholder" | "required" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const TextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').OwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').OwnerState> & Record<string, unknown>;
+export declare const TextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
 export declare const MuiSkeletonStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').SkeletonOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLSpanElement> | null | undefined;
-}, "children" | "style" | "variant" | "width" | "height" | "animation" | "sx" | "classes" | "className">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "variant" | "width" | "height" | "translate" | "animation" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').OwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').OwnerState> & Record<string, unknown>;
+}, "children" | "style" | "variant" | "width" | "height" | "animation" | "sx" | "classes" | "className">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "variant" | "width" | "height" | "translate" | "animation" | "sx" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').TextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('../types').TextFieldOwnerState> & Record<string, unknown>;
 }, {}, {}>;

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

@@ -4,7 +4,6 @@ import { TextFieldSlots } from './slots/TextFieldEnum';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
 import { TEXT_FIELD_KEY_COMPONENT } from './constants';
 import { ComponentPalletColor, Sizes } from '@m4l/styles';
-import { LabelProps } from '../../Label/types';
 /**
  * Variants for the TextField component.
  */
@@ -17,19 +16,64 @@ export type SkeletonVariants = 'rectangular' | 'circular' | 'text';
  * Props for the TextField component.
  *
  */
-export interface TextFieldProps extends Omit<MUITextFieldProps, 'size' | 'color' | 'disabled' | 'variant'>, Pick<LabelProps, 'helperMessage' | 'htmlFor' | 'id' | 'mandatory' | 'mandatoryMessage'> {
+export interface TextFieldProps extends Omit<MUITextFieldProps, 'size' | 'color' | 'disabled' | 'variant'> {
+    /**
+     * todo: documentar
+     */
     dataTestId?: string;
+    /**
+     * Variante del campo de texto.
+     * variant="text"
+     */
     variant?: TextFieldVariants;
+    /**
+     * Indica si el campo de texto está deshabilitado.
+     * disabled={true}
+     */
     disabled?: boolean;
-    size?: Sizes;
+    /**
+     * Tamaño del campo de texto.
+     * size="medium"
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Color del campo de texto.
+     * color="primary"
+     */
     color?: Extract<ComponentPalletColor, 'primary'>;
 }
-export type OwnerState = Pick<TextFieldProps, 'size' | 'color' | 'disabled' | 'error'> & {
-    disabled?: boolean;
-    paletteColor: PaletteColor;
-    variantTextField?: TextFieldVariants;
-    componentPaletteColor?: ComponentPalletColor;
-};
+/**
+ * Estado del propietario del campo de texto.
+ */
+export interface TextFieldOwnerState {
+    /**
+     * Indica si el campo de texto está deshabilitado.
+     */
+    textFieldDisabled?: boolean;
+    /**
+     * Color de la paleta del campo de texto.
+     */
+    textFieldPaletteColor: PaletteColor;
+    /**
+     * Variante del campo de texto.
+     */
+    textFieldVariant?: TextFieldVariants;
+    /**
+     * Color de la paleta del componente del campo de texto.
+     */
+    textFieldComponentPaletteColor?: ComponentPalletColor;
+    /**
+     * Tamaño del campo de texto.
+     */
+    textFieldSizes: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Indica si el campo de texto es error.
+     */
+    textFieldError?: boolean;
+    /**
+     * Color del campo de texto.
+     */
+    textFieldColor?: Extract<ComponentPalletColor, 'primary'>;
+}
 export type TextFieldSlotsType = keyof typeof TextFieldSlots;
-export type TextFieldOwnerState = OwnerState;
 export type TextFieldStyles = Partial<OverridesStyleRules<TextFieldSlotsType, typeof TEXT_FIELD_KEY_COMPONENT, Theme> | undefined> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "8.2.0-beta.devDaniel.RHFInputNumberSpinner",
+  "version": "8.2.0-beta.devManuela.RHFTextField",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0"

package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.d.ts

@@ -1,5 +0,0 @@
-import { RHFInputNumberSpinnerProps } from './types';
-/**
- * Componente RHFInputNumberSpinner
- */
-export declare const RHFInputNumberSpinner: (props: RHFInputNumberSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/components/hook-form/RHFInputNumberSpinner/RHFInputNumberSpinner.styles.d.ts

@@ -1,8 +0,0 @@
-import { RHFInputNumberSpinnerStyles } from './types';
-/**
- * Estilos para el componente `RHFInputNumberSpinner`.
- *
- * Este objeto contiene los estilos para los diferentes slots del componente,
- * permitiendo personalizar su apariencia a través de las propiedades definidas.
- */
-export declare const rhfInputNumberSpinnerStyles: RHFInputNumberSpinnerStyles;

package/components/hook-form/RHFInputNumberSpinner/constants.d.ts

@@ -1,4 +0,0 @@
-/**
- * Nombre de clase que se usa para dar identidad a los slots del componente.
- */
-export declare const RHFINPUTNUMBER_SPINNER_KEY_COMPONENT = "M4LRHFInputNumberSpinner";

package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnerEnum.d.ts

@@ -1,10 +0,0 @@
-/**
- * Define los nombres de los slots de estilo para el componente `RHFInputNumberSpinner`. Estos slots se utilizan para
- * aplicar estilos específicos y crear clases CSS únicas para los distintos elementos del componente.
- */
-export declare enum RHFInputNumberSpinnerSlots {
-    root = "root",
-    label = "label",
-    inputNumberSpinner = "inputNumberSpinner",
-    helperError = "helperError"
-}

package/components/hook-form/RHFInputNumberSpinner/slots/RHFInputNumberSpinnerSlots.d.ts

@@ -1,28 +0,0 @@
-/**
- * Este componente utiliza el slot `root` para aplicar estilos personalizados
- * al contenedor principal del `RHFInputNumberSpinner`.
- */
-export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
-}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;
-/**
- * Este componente utiliza el slot `label` para aplicar estilos personalizados
- * a la etiqueta que acompaña al campo de entrada.
- */
-export declare const LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
-}, {}, {}>;
-/**
- * Este componente utiliza el slot `inputNumberSpinner` para aplicar estilos
- * personalizados al campo de entrada numérica del spinner.
- */
-export declare const InputNumberSpinnerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../InputNumberSpinner/types').InputNumberSpinnerProps, keyof import('../../../InputNumberSpinner/types').InputNumberSpinnerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
-}, {}, {}>;
-/**
- * Este componente utiliza el slot `inputNumberSpinner` para aplicar estilos
- * personalizados al campo de entrada numérica del spinner.
- */
-export declare const HelperErrorStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../HelperError').HelperErrorProps, keyof import('../../../HelperError').HelperErrorProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown> & {
-    ownerState: Partial<import('../types').RHFInputNumberSpinnerOwnerState> & Record<string, unknown>;
-}, {}, {}>;

package/components/hook-form/RHFInputNumberSpinner/stories/RHFInputNumberSpinner.defaultProps.stories.d.ts

@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { RHFInputNumberSpinner } from '../RHFInputNumberSpinner';
-declare const meta: Meta<typeof RHFInputNumberSpinner>;
-export default meta;
-/**
- * Tipo de historia para `RHFInputNumberSpinner`.
- */
-type Story = StoryObj<typeof RHFInputNumberSpinner>;
-/**
- * Historia base para el componente `RHFInputNumberSpinner`.
- * Esta historia muestra la funcionalidad básica del componente.
- */
-export declare const Base: Story;
-export declare const Default: Story;
-export declare const DefaultDisabled: Story;
-/**
- * Historia base para el componente `RHFInputNumberSpinner`.
- * Esta historia muestra la funcionalidad básica del componente.
- */
-export declare const SinLabel: Story;
-export declare const SinLabelDisabled: Story;
-/**
- * Historia en Skeleton para el componente `RHFInputNumberSpinner`.
- * Esta historia muestra la funcionalidad del componente en modo Skeleton.
- */
-export declare const Skeleton: Story;

package/components/hook-form/RHFInputNumberSpinner/stories/RHFInputNumberSpinner.error.stories.d.ts

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { RHFInputNumberSpinner } from '../RHFInputNumberSpinner';
-declare const meta: Meta<typeof RHFInputNumberSpinner>;
-export default meta;
-/**
- * Tipo de historia para `RHFInputNumberSpinner`.
- */
-type Story = StoryObj<typeof RHFInputNumberSpinner>;
-/**
- * Historia base para el componente `RHFInputNumberSpinner`.
- * Esta historia muestra la funcionalidad básica del componente.
- */
-export declare const Base: Story;

package/components/hook-form/RHFInputNumberSpinner/stories/RHFInputNumberSpinner.variants.stories.d.ts

@@ -1,23 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { RHFInputNumberSpinner } from '../RHFInputNumberSpinner';
-declare const meta: Meta<typeof RHFInputNumberSpinner>;
-export default meta;
-/**
- * Tipo de historia para `RHFInputNumberSpinner`.
- */
-type Story = StoryObj<typeof RHFInputNumberSpinner>;
-/**
- * Historia base para el componente `RHFInputNumberSpinner`.
- * Esta historia muestra la funcionalidad básica del componente.
- */
-export declare const Base: Story;
-/**
- * Historia base para el componente `RHFInputNumberSpinner`.
- * Esta historia muestra la funcionalidad básica del componente.
- */
-export declare const OutlinedWithLabel: Story;
-/**
- * Historia base para el componente `RHFInputNumberSpinner`.
- * Esta historia muestra la funcionalidad básica del componente.
- */
-export declare const TextWithLabel: Story;

package/components/hook-form/RHFInputNumberSpinner/types.d.ts

@@ -1,71 +0,0 @@
-import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { Theme } from '@mui/material';
-import { ComponentPalletColor, Sizes } from '@m4l/styles';
-import { LabelProps } from '../../Label';
-import { RHFInputNumberSpinnerSlots } from './slots/RHFInputNumberSpinnerEnum';
-import { RHFINPUTNUMBER_SPINNER_KEY_COMPONENT } from './constants';
-/**
- * Props para el componente RHPInputNumberSpinner
- */
-export interface RHFInputNumberSpinnerProps extends Omit<LabelProps, 'label'> {
-    name: string;
-    /**
-     * Cantidad de números por los que se incrementará o disminuirá el valor.
-     */
-    steps: number;
-    /**
-     * Tipo de dato del valor, puede ser 'pt' (puntos), '%' (porcentaje) o vacio.
-     */
-    valueType?: 'pt' | '%';
-    /**
-     * Indica si el componente está deshabilitado.
-     */
-    disabled?: boolean;
-    /**
-     * Tamaño del componente, puede ser uno de los valores definidos en 'small' , 'medium' , 'large'.
-     */
-    sizes?: Extract<Sizes, 'small' | 'medium'>;
-    /**
-     * Valor máximo permitido para el componente.
-     */
-    maxValue: number;
-    /**
-     * Valor mínimo permitido para el componente.
-     */
-    minValue: number;
-    color?: Extract<ComponentPalletColor, 'primary'>;
-    /**
-     * Prop Para el testeo del componente
-     */
-    instaceDataTestId?: string;
-    /**
-     * Variante de estilos
-     */
-    variants?: 'Outlined' | 'Text';
-    /**
-     * label para informar sobre el campo
-     */
-    label?: string;
-}
-/**
- * Define las claves del objeto `RHFInputNumberSpinnerSlots`, que se utilizan para
- * hacer referencia a los diferentes slots disponibles para estilizar el componente
- * `RHFInputNumberSpinner`.
- */
-export type RHFInputNumberSpinnerSlotsType = keyof typeof RHFInputNumberSpinnerSlots;
-/**
- * Representa las propiedades de estado específicas del componente `RHFInputNumberSpinner`.
- */
-export interface RHFInputNumberSpinnerOwnerState {
-    /**
-     * Valor para definir el tamaño del icono.
-     */
-    iconSize: Sizes;
-}
-/**
- * Define los estilos del componente `RHFInputNumberSpinner`. Permite la personalización parcial
- * de las reglas de estilo mediante `OverridesStyleRules`.
- *
- * Puede ser parcial o estar indefinido.
- */
-export type RHFInputNumberSpinnerStyles = Partial<OverridesStyleRules<RHFInputNumberSpinnerSlots, typeof RHFINPUTNUMBER_SPINNER_KEY_COMPONENT, Theme>> | undefined;

package/components/hook-form/RHFTextField/stories/Error/TextFieldErrorOutlined.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- * Error en RHFTextField outlined y text se utiliza para mostrar un campo de texto que indica un estado de error. Esto es útil para proporcionar retroalimentación visual al usuario cuando hay un problema con la entrada de datos.
- */
-export declare const ErrorOutlined: Story;
-export default meta;

package/components/hook-form/RHFTextField/stories/Error/TextFieldErrorText.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- *  Error en RHFTextField outlined y text se utiliza para mostrar un campo de texto que indica un estado de error. Esto es útil para proporcionar retroalimentación visual al usuario cuando hay un problema con la entrada de datos.
- */
-export declare const ErrorText: Story;
-export default meta;

package/components/hook-form/RHFTextField/stories/Primary/TextFieldOutlined.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- * Story for the primary outlined RHFvariants of the TextField component.
- */
-export declare const PrimaryOutlined: Story;
-export default meta;

package/components/hook-form/RHFTextField/stories/Primary/TextFieldText.stories.d.ts

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import { RHFTextField } from '../../..';
-declare const meta: Meta<typeof RHFTextField>;
-type Story = StoryObj<typeof RHFTextField>;
-/**
- * Story for the primary text variant of the TextField component.
- */
-export declare const PrimaryText: Story;
-export default meta;