@m4l/components 8.1.0-beta.devManuela.HelperError → 8.1.0-beta.devManuela.TextField

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

@@ -1,111 +1,281 @@
-import { inputBaseClasses } from "@mui/material/InputBase";
 const rhfTextFieldStyles = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-    gap: "2px",
-    outline: "unset",
-    height: "auto",
-    "& .MuiFormControl-root": {
-      minHeight: "24px",
-      height: "auto",
-      "& .MuiInputBase-multiline": {
-        minHeight: "24px",
-        height: "auto",
-        "& .MuiInputBase-input": {
-          padding: "4px"
-        },
-        "& .MuiOutlinedInput-notchedOutline": {
-          height: "100%",
-          padding: "4px"
-        }
-      }
-    }
-  },
-  /**
-   * TODO: Documentar
-   */
-  label: ({ theme }) => ({
-    color: theme.vars.palette.text.secondary,
-    transition: "all .5s ease"
-  }),
   /**
-   * TODO: Documentar
+   * Estilos personalizados para el componente RHFTextField.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @updatedAt 2024-10-22 09:42:39 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
-  textField: ({ theme, ownerState }) => ({
-    [`& .${inputBaseClasses.root}`]: {
-      borderRadius: "4px",
-      ...ownerState.size === "small" && {
-        height: "24px",
-        padding: "0px 8px",
-        borderdRadius: "4px",
-        [`& .${inputBaseClasses.inputMultiline}`]: {
-          minHeight: "24px",
-          height: "100%"
-        },
-        [theme.breakpoints.up("sm")]: {
-          height: "20px",
-          padding: "0px 8px"
+  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
         }
       },
-      // Estilos específicos para el tamaño medium
-      ...ownerState.size === "medium" && {
-        height: "36px",
-        padding: "0px 8px",
-        [`& .${inputBaseClasses.inputMultiline}`]: {
-          minHeight: "36px",
-          height: "100%"
-        },
-        [theme.breakpoints.up("sm")]: {
-          height: "24px",
-          padding: "0px 8px"
+      // 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
         }
-      }
-    },
-    "& .MuiInputBase-input": {
-      fontSize: "0.875rem",
-      padding: "0px",
-      height: "100%"
-    },
-    "& .MuiOutlinedInput-root": {
-      "&:not(.Mui-focused,input:disabled):hover fieldset": {
-        transition: "all .3s ease",
-        borderColor: ownerState?.error === true ? theme.vars.palette.error.main : theme.vars.palette.primary.light,
-        color: theme.vars.palette.primary?.active,
-        background: theme.vars.palette.primary.opacity
-      },
-      "&:has(:disabled) fieldset": {
-        color: theme.vars.palette.text.disabled
       },
-      "&:focus-within": {
-        borderColor: !ownerState.isValid ? theme.palette.error.main : theme.palette.primary.focusVisible
+      // Variant Outlined TextField
+      ...ownerState.variantRHFTextField === "outlined" && {
+        "& .MuiInputBase-root": {
+          padding: 0,
+          minHeight: 0,
+          paddingLeft: theme.vars.size.baseSpacings.sp1,
+          paddingRight: theme.vars.size.baseSpacings.sp1,
+          borderRadius: theme.size.borderRadius.r1,
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: theme.vars.size.borderStroke.actionInput,
+            borderColor: 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
+              }
+            }
+          },
+          //Estilos de focus primary para el icono y placeholder
+          ":focus-within": {
+            "&:focus-within .MuiInputBase-input::placeholder": {
+              color: ownerState.paletteColor?.main
+            },
+            '&:focus-within [class*="M4LIcon-icon"]:not(.MuiIconButton-root [class*="M4LIcon-icon"])': {
+              backgroundColor: ownerState.paletteColor?.main
+            }
+          },
+          //Estilos del hover primar
+          "&:hover": {
+            backgroundColor: ownerState.paletteColor?.hoverOpacity
+          },
+          //Estilos del InputBase
+          "& .MuiInputBase-input": {
+            ...ownerState.error && {
+              borderColor: ownerState.error ? theme.vars.palette.border.error : theme.vars.palette.border.default
+            },
+            //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
+            "&:focus ~ .MuiOutlinedInput-notchedOutline": {
+              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.main
+            },
+            //Estilos del InputBase en Active
+            "&:active ~ .MuiOutlinedInput-notchedOutline": {
+              borderColor: ownerState.error ? theme.vars.palette.error.active : theme.vars.palette.primary.active
+            },
+            //Estilos del InputBase en placeholder default
+            "&::placeholder": {
+              color: 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",
+            "&:hover": {
+              pointerEvents: ownerState.disabled ? "none" : "auto"
+            }
+          }
+        }
       },
-      ...ownerState.isValid === false ? {
-        borderColor: theme.palette.error.main
-      } : {}
+      // Variant Text RHFTextField
+      ...ownerState.variantRHFTextField === "text" && {
+        borderColor: "transparent",
+        "& .MuiInputBase-root": {
+          padding: 0,
+          minHeight: 0,
+          borderColor: "transparent",
+          paddingLeft: theme.vars.size.baseSpacings.sp1,
+          paddingRight: theme.vars.size.baseSpacings.sp1,
+          borderRadius: theme.size.borderRadius.r1,
+          //Estilos para los bordes del campo de texto
+          "& .MuiOutlinedInput-notchedOutline": {
+            border: theme.vars.size.borderStroke.actionInput,
+            borderColor: theme.vars.palette.border.default,
+            borderTop: theme.vars.palette.primary.main,
+            borderLeft: "transparent",
+            borderRight: "transparent"
+          },
+          //Estilo Focus para primary para el icono y placeholder
+          ":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
+            }
+          },
+          //Estilo 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
+              }
+            }
+          },
+          //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
+            },
+            //Estilo Focus del InputBase
+            "&:focus ~ .MuiOutlinedInput-notchedOutline": {
+              borderColor: ownerState.error ? theme.vars.palette.error.main : theme.vars.palette.primary.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
+              }
+            },
+            "&::placeholder": {
+              color: 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,
+              borderLeft: "transparent",
+              borderRight: "transparent"
+            },
+            pointerEvents: ownerState.disabled ? "none" : "auto",
+            "&:hover": {
+              pointerEvents: ownerState.disabled ? "none" : "auto"
+            }
+          }
+        }
+      }
     }
   }),
-  /*  SkeletonTextField Styles */
-  skeletonTextFieldRoot: {
-    display: "flex",
-    flexDirection: "column",
-    width: "100%",
-    gap: "4px"
-  },
   /**
-   * TODO: Documentar
+   * Estilos personalizados para el componente Skeleton.
+   * @author Bruce Escobar - automatic
+   * @createdAt 2024-10-22 09:41:31 - automatic
+   * @updatedAt 2024-10-22 09:42:39 - automatic
+   * @updatedUser Bruce Escobar - automatic
    */
-  wrapperSkeletonRHFTextField: ({ theme }) => ({
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "space-between",
-    padding: "12px 14px",
-    borderRadius: theme.spacing(1),
-    gap: "4px",
-    backgroundColor: theme.vars.palette.background.surface,
-    height: "20px"
+  wrapperSkeletonRHFTextField: ({ ownerState, theme }) => ({
+    borderRadius: theme.size.borderRadius.r1,
+    ...ownerState.size === "small" && {
+      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.small.action } : { height: theme.vars.size.desktop.small.action }
+    },
+    // Condiciones de tamaño Medium en el root
+    ...ownerState.size === "medium" && {
+      ...theme.generalSettings.isMobile ? { height: theme.vars.size.mobile.medium.action } : { height: theme.vars.size.desktop.medium.action }
+    }
   })
 };
 export {

package/components/hook-form/RHFTextField/slots/RHFTextFieldSlots.d.ts

@@ -1,17 +1,17 @@
-export declare const RHFTextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldProps> & Record<string, unknown> & {
-    ownerState: Partial<import('..').RHFTextFieldProps> & Record<string, unknown>;
+export declare const RHFTextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').RHFTextFieldOwnerState> & 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 LabelStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../Label').LabelProps, keyof import('../../../Label').LabelProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldProps> & Record<string, unknown> & {
-    ownerState: Partial<import('..').RHFTextFieldProps> & Record<string, unknown>;
+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('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown>;
 }, {}, {}>;
 export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<{
     variant?: import('@mui/material').TextFieldVariants | undefined;
-} & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').StandardTextFieldProps | import('@mui/material').OutlinedTextFieldProps, "variant">, "color" | "content" | "translate" | "margin" | "size" | "disabled" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "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" | "children" | "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" | "ref" | "error" | "name" | "label" | "select" | "key" | "component" | "value" | "type" | "variant" | "autoComplete" | "placeholder" | "required" | "rows" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldProps> & Record<string, unknown> & {
-    ownerState: Partial<import('..').RHFTextFieldProps> & Record<string, unknown>;
+} & Omit<import('@mui/material').FilledTextFieldProps | import('@mui/material').StandardTextFieldProps | import('@mui/material').OutlinedTextFieldProps, "variant">, "color" | "content" | "translate" | "margin" | "size" | "disabled" | "sx" | "classes" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "style" | "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" | "children" | "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" | "ref" | "error" | "name" | "label" | "select" | "key" | "component" | "value" | "type" | "variant" | "autoComplete" | "placeholder" | "required" | "rows" | "fullWidth" | "inputProps" | "inputRef" | "SelectProps" | "multiline" | "maxRows" | "minRows" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown>;
 }, {}, {}>;
-export declare const SkeletonTextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldProps> & Record<string, unknown> & {
-    ownerState: Partial<import('..').RHFTextFieldProps> & Record<string, unknown>;
+export declare const SkeletonTextFieldRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').RHFTextFieldOwnerState> & 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 WrapperSkeletonRHFTextFieldStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldProps> & Record<string, unknown> & {
-    ownerState: Partial<import('..').RHFTextFieldProps> & Record<string, unknown>;
+export declare const WrapperSkeletonRHFTextFieldStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown> & {
+    ownerState: Partial<import('..').RHFTextFieldOwnerState> & Record<string, unknown>;
 }, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').HTMLAttributes<HTMLDivElement> | keyof import('react').ClassAttributes<HTMLDivElement>>, {}>;

package/components/hook-form/RHFTextField/stories/Default/RHFTextFieldDisabledOutlined.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+export declare const OutlinedDisabled: Story;
+export declare const WhitoutEndAdorment: Story;
+export declare const WhitAdorment: Story;
+export declare const WhitoutStartAdorment: Story;
+export declare const WhitoutAdorment: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Default/RHFTextFieldDisabledText.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+export declare const TextDisabled: Story;
+export declare const WhitoutEndAdorment: Story;
+export declare const WhitoutStartAdorment: Story;
+export declare const WhitAdorment: Story;
+export declare const WhitoutAdorment: Story;
+export default meta;

package/components/hook-form/RHFTextField/stories/Default/RHFTextFieldSkeleton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react/*';
+import { RHFTextField } from '../../..';
+declare const meta: Meta<typeof RHFTextField>;
+type Story = StoryObj<typeof RHFTextField>;
+export declare const SkeletonBase: Story;
+export default meta;

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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;

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

@@ -1,10 +1,12 @@
 import { Theme } from '@mui/material/styles';
 import { OverridesStyleRules } from '@mui/material/styles/overrides';
-import { TextFieldProps } from '@mui/material';
+import { TextFieldProps, PaletteColor } from '@mui/material';
 import { ReactElement } from 'react';
 import { LabelProps } from '../../Label/types';
 import { RHFTextFieldSlots } from './slots';
 import { RHF_TEXT_FIELD_KEY_COMPONENT } from './constant';
+import { ComponentPalletColor } from '@m4l/styles';
+export type VariantsRHFTextField = 'outlined' | 'text';
 export type RHFTextFieldVariants = 'info' | 'success' | 'warning' | null;
 export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputProps' | 'variant' | 'label' | 'theme'>, Omit<LabelProps, 'label'> {
     skeletonWidth?: string | number;
@@ -24,6 +26,8 @@ export interface RHFTextFieldProps extends Omit<TextFieldProps, 'size' | 'inputP
     label?: string;
     /** Etiqueta que se utiliza para condicionar el valor del campo de texto para que sea de tipo entero o decimal.*/
     isInteger?: boolean;
+    color?: Extract<ComponentPalletColor, 'primary'>;
+    RHFvariants?: VariantsRHFTextField;
 }
 export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'disabled'> {
     type: 'password' | 'text';
@@ -31,6 +35,10 @@ export interface RHFTextFieldState extends Pick<RHFTextFieldProps, 'size' | 'dis
     isTabSelected: boolean;
     variant: RHFTextFieldVariants | 'warning' | 'error' | null;
 }
-export type RHFTextFieldOwnerState = RHFTextFieldProps;
+export type RHFTextFieldOwnerState = RHFTextFieldProps & {
+    componentPaletteColor?: ComponentPalletColor;
+    paletteColor: PaletteColor;
+    variantRHFTextField?: VariantsRHFTextField;
+};
 export type RHFTextFieldSlotsType = keyof typeof RHFTextFieldSlots;
 export type RHFTextFieldStyles = Partial<OverridesStyleRules<RHFTextFieldSlotsType, typeof RHF_TEXT_FIELD_KEY_COMPONENT, Theme> | undefined> | undefined;

package/components/hook-form/RHFUpload/RHFUploadImage/subcomponents/UploadImage/index.d.ts

@@ -2,8 +2,8 @@ import { UploadImageProps } from './types';
 /**
  * TODO: Documentar
  * @author Juan Escobar - automatic
- * @updatedAt 2024-10-15 17:33:28 - automatic
- * @updatedUser Juan Escobar - automatic
+ * @updatedAt 2024-10-22 09:42:39 - automatic
+ * @updatedUser Bruce Escobar - automatic
  * @createdAt 2024-10-15 17:33:28 - automatic
  */
 export default function UploadImage({ error, file, helperText, sx, ...other }: UploadImageProps): import("react/jsx-runtime").JSX.Element;

package/components/maps/components/Map/contexts/MapContext/store.d.ts

@@ -8,8 +8,8 @@ import { MapStateWithActions, InitialMapStoreProps } from './types';
 /**
  * TODO: Documentar
  * @author Juan Escobar - automatic
- * @updatedAt 2024-10-15 17:33:28 - automatic
- * @updatedUser Juan Escobar - automatic
+ * @updatedAt 2024-10-22 09:42:39 - automatic
+ * @updatedUser Bruce Escobar - automatic
  * @createdAt 2024-10-15 17:33:28 - automatic
  */
 export declare const createMapStore: (initProps: InitialMapStoreProps) => Omit<Omit<import('zustand').StoreApi<MapStateWithActions>, "setState"> & {