@m4l/components 9.3.37 → 9.3.38-BE20251203-beta.2

package/components/hook-form/RHFColorPicker/slots/RHFColorPickerSlots.js

@@ -3,8 +3,8 @@ import { R as RHFCOLOR_PICKER_KEY_COMPONENT } from "../constants.js";
 import { r as rhfcolorPickerStyles } from "../RHFColorPicker.styles.js";
 import { R as RHFColorPickerSlots } from "./RHFColorPickerEnum.js";
 import { SketchPicker } from "react-color";
-import { P as Popover } from "../../../mui_extended/Popover/Popover.js";
 import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+import { P as Popover } from "../../../mui_extended/Popover/Popover.js";
 const RootStyled = styled("div", {
   name: RHFCOLOR_PICKER_KEY_COMPONENT,
   slot: RHFColorPickerSlots.root

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

@@ -0,0 +1,7 @@
+import { RHFDatePickerProps } from './types';
+/**
+ * Componente RHFDatePicker para seleccionar fechas con React Hook Form.
+ * @param {RHFDatePickerProps} props - Propiedades del componente.
+ * @returns {JSX.Element} - Elemento JSX que representa el componente.
+ */
+export declare const RHFDatePicker: (props: RHFDatePickerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,85 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useFormContext, Controller } from "react-hook-form";
+import { clsx } from "clsx";
+import { useModuleSkeleton } from "@m4l/core";
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { R as RHF_DATE_PICKER_KEY_COMPONENT } from "./constants.js";
+import { R as RHFDatePickerSlots } from "./slots/RHFDatePickerEnum.js";
+import { useId } from "react";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { R as RootStyled } from "./slots/RHFDatePickerSlots.js";
+import { L as Label } from "../../Label/Label.js";
+import { D as DatePicker } from "../../mui_extended/DatePicker/DatePicker.js";
+import { H as HelperError } from "../../HelperError/HelperError.js";
+const RHFDatePicker = (props) => {
+  const {
+    name,
+    size,
+    label,
+    mandatory,
+    mandatoryMessage,
+    helperMessage,
+    disabled,
+    readOnly,
+    className,
+    ...datePickerProps
+  } = props;
+  const { control } = useFormContext();
+  const isSkeleton = useModuleSkeleton();
+  const { currentSize } = useComponentSize(size);
+  const classes = getComponentClasses(RHF_DATE_PICKER_KEY_COMPONENT, RHFDatePickerSlots);
+  const htmlForId = useId();
+  return /* @__PURE__ */ jsx(
+    RootStyled,
+    {
+      className: clsx(className, classes.root),
+      role: isSkeleton ? "presentation" : void 0,
+      children: /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name,
+          control,
+          defaultValue: null,
+          render: ({ field: { value, onChange }, fieldState: { error }, formState: { isSubmitting } }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+            label && /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: htmlForId,
+                size: currentSize,
+                label,
+                mandatory,
+                mandatoryMessage,
+                helperMessage
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              DatePicker,
+              {
+                ...datePickerProps,
+                value,
+                id: htmlForId,
+                onChange,
+                readOnly,
+                error,
+                size: currentSize,
+                disabled: disabled || isSubmitting,
+                className
+              }
+            ),
+            error?.message && /* @__PURE__ */ jsx(
+              HelperError,
+              {
+                size: currentSize,
+                htmlFor: htmlForId,
+                message: error?.message + ""
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+};
+export {
+  RHFDatePicker as R
+};

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

@@ -0,0 +1,5 @@
+import { RHFDatePickerStyles } from './types';
+/**
+ * Estilos para el componente `RHFDatePicker`. Define los estilos de cada parte del componente, como el root y el datePicker.
+ */
+export declare const rhfDatePickerStyles: RHFDatePickerStyles;

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

@@ -0,0 +1,200 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
+const rhfDatePickerStyles = {
+  /**
+   * Estilos para el elemento raíz del `RHFDatePicker`.
+   * Aplica un layout de columna con un espacio entre los elementos basado en el tamaño de espaciado definido en el tema.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
+  }),
+  /**
+   * Estilos para el DatePicker de MUI.
+   * Permite personalizar los estilos del componente DatePicker.
+   * Aplica los estilos del TextField apuntando a la estructura correcta cuando se usa como slot.
+   * La estructura es: DatePickerStyled > .M4LTextField-root > .MuiFormControl-root > .MuiInputBase-root
+   */
+  datePicker: {},
+  /**
+   * Estilos para el TextField de MUI.
+   */
+  textField: ({ theme, ownerState }) => ({
+    "& .MuiInputAdornment-root": {
+      ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
+        width: size,
+        height: size
+      }))
+    },
+    "& .MuiFormLabel-root": {
+      display: "none"
+    }
+  }),
+  /**
+   * Estilos para el layout de MUI.
+   */
+  layout: ({ theme, ownerState }) => ({
+    "& .MuiDateCalendar-root": {
+      maxWidth: "244px",
+      height: "fit-content",
+      gap: theme.vars.size.baseSpacings.sp3,
+      "& .MuiPickersFadeTransitionGroup-root": {
+        "& .MuiYearCalendar-root": {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(50px, 1fr));",
+          justifyContent: "space-between",
+          width: "100%",
+          rowGap: theme.vars.size.baseSpacings.sp2,
+          "& .MuiPickersYear-root": {
+            width: theme.vars.size.baseSpacings.sp10,
+            "& .MuiPickersYear-yearButton": {
+              borderRadius: theme.vars.size.borderRadius["r1-5"],
+              ...getSizeStyles(theme, ownerState?.size || "medium", "action", (size) => ({
+                height: size
+              })),
+              ...getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body"),
+              margin: 0,
+              padding: 0,
+              "&:hover": {
+                backgroundColor: theme.vars.palette.default.hoverOpacity
+              },
+              "&:active": {
+                backgroundColor: theme.vars.palette.default.active
+              },
+              "&.Mui-selected": {
+                backgroundColor: theme.vars.palette.primary.enabled,
+                color: theme.vars.palette.primary.contrastText,
+                "&:hover": {
+                  backgroundColor: theme.vars.palette.primary.hover
+                },
+                "&:active": {
+                  backgroundColor: theme.vars.palette.primary.active
+                }
+              }
+            }
+          }
+        }
+      },
+      "& .MuiDayCalendar-root": {
+        minHeight: "fit-content",
+        "& .MuiDayCalendar-header": {
+          height: theme.vars.size.baseSpacings.sp7,
+          width: "100%",
+          gap: theme.vars.size.baseSpacings.sp1,
+          justifyContent: "flex-start",
+          margin: 0,
+          padding: 0,
+          "& .MuiDayCalendar-weekDayLabel": {
+            height: theme.vars.size.baseSpacings.sp7,
+            width: theme.vars.size.baseSpacings.sp7,
+            ...getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body"),
+            color: theme.vars.palette.text.secondary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        "& .MuiPickersSlideTransition-root": {
+          minHeight: "168px",
+          "& .MuiDayCalendar-weekContainer": {
+            height: "fit-content",
+            gap: theme.vars.size.baseSpacings.sp1,
+            justifyContent: "flex-start",
+            margin: 0,
+            padding: 0,
+            "& .MuiPickersDay-root": {
+              borderRadius: theme.vars.size.borderRadius["r1-5"],
+              height: theme.vars.size.baseSpacings.sp7,
+              width: theme.vars.size.baseSpacings.sp7,
+              color: theme.vars.palette.text.primary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              ...getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body"),
+              "&.Mui-selected": {
+                backgroundColor: theme.vars.palette.primary.enabled,
+                color: theme.vars.palette.primary.contrastText,
+                "&:hover": {
+                  backgroundColor: theme.vars.palette.primary.hover
+                },
+                "&:active": {
+                  backgroundColor: theme.vars.palette.primary.active
+                }
+              },
+              "&:hover": {
+                backgroundColor: theme.vars.palette.default.hoverOpacity
+              },
+              "&:active": {
+                backgroundColor: theme.vars.palette.default.active
+              }
+            }
+          }
+        }
+      }
+    }
+  }),
+  /**
+   * Estilos para el desktopPaper de MUI.
+   */
+  desktopPaper: ({ theme }) => ({
+    // Overrides
+    backgroundColor: theme.vars.palette.background.default,
+    borderRadius: theme.vars.size.borderRadius.r2,
+    boxShadow: theme.vars.customShadows.z4,
+    padding: theme.vars.size.baseSpacings.sp3,
+    gap: theme.vars.size.baseSpacings.sp1
+  }),
+  /**
+   * Estilos para el calendarHeader de MUI.
+   */
+  calendarHeader: ({ theme, ownerState }) => ({
+    "&&&.MuiPickersCalendarHeader-root": {
+      margin: 0,
+      padding: 0,
+      minHeight: "fit-content",
+      maxHeight: "fit-content",
+      "& .MuiPickersCalendarHeader-labelContainer": {
+        ...getSizeStyles(theme, ownerState?.size || "medium", "action", (height) => ({
+          height,
+          minHeight: height,
+          maxHeight: height
+        })),
+        paddingLeft: theme.vars.size.baseSpacings.sp3,
+        paddingRight: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        border: `1px solid ${theme.vars.palette.border.secondary}`,
+        borderRadius: theme.vars.size.borderRadius["r1-5"],
+        "& .MuiPickersCalendarHeader-label": {
+          ...getTypographyStyles(theme.generalSettings.isMobile, ownerState?.size || "medium", "body")
+        }
+      },
+      "& .MuiPickersArrowSwitcher-root": {
+        minWidth: "52px",
+        gap: theme.vars.size.baseSpacings["sp0-5"],
+        justifyContent: "space-between"
+        /* '& .MuiPickersArrowSwitcher-spacer': {
+          display: 'none',
+        }, */
+      }
+    }
+  }),
+  /**
+   * Estilos para el iconButton de M4L.
+   * Requerido para corrección de fix en tamaños ↴ Overrides ❌
+   */
+  iconButton: () => ({}),
+  /**
+   * Estilos para el actionsContainer de M4L.
+   */
+  actionsContainer: ({ theme }) => ({
+    paddingLeft: theme.vars.size.baseSpacings.sp6,
+    paddingRight: theme.vars.size.baseSpacings.sp6,
+    paddingBottom: theme.vars.size.baseSpacings.sp4
+  })
+};
+export {
+  rhfDatePickerStyles as r
+};

package/components/hook-form/RHFDatePicker/__tests__/RHFDatePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/components/hook-form/RHFDatePicker/constants.js

@@ -0,0 +1,4 @@
+const RHF_DATE_PICKER_KEY_COMPONENT = "M4LRHFDatePicker";
+export {
+  RHF_DATE_PICKER_KEY_COMPONENT as R
+};

package/components/hook-form/RHFDatePicker/icons.d.ts

@@ -0,0 +1,6 @@
+export declare const RHF_DATE_PICKER_ICONS: {
+    CHEVRON_DOWN: string;
+    CALENDAR: string;
+    CHEVRON_LEFT: string;
+    CHEVRON_RIGHT: string;
+};

package/components/hook-form/RHFDatePicker/index.d.ts

@@ -0,0 +1 @@
+export { RHFDatePicker } from './RHFDatePicker';

package/components/hook-form/RHFDatePicker/index.js

@@ -0,0 +1 @@
+

package/components/hook-form/RHFDatePicker/slots/RHFDatePickerEnum.d.ts

@@ -0,0 +1,11 @@
+export declare enum RHFDatePickerSlots {
+    root = "root",
+    datePicker = "datePicker",
+    textField = "textField",
+    desktopPaper = "desktopPaper",
+    calendarHeader = "calendarHeader",
+    iconButton = "iconButton",
+    layout = "layout",
+    actionsContainer = "actionsContainer",
+    dialog = "dialog"
+}

package/components/hook-form/RHFDatePicker/slots/RHFDatePickerEnum.js

@@ -0,0 +1,15 @@
+var RHFDatePickerSlots = /* @__PURE__ */ ((RHFDatePickerSlots2) => {
+  RHFDatePickerSlots2["root"] = "root";
+  RHFDatePickerSlots2["datePicker"] = "datePicker";
+  RHFDatePickerSlots2["textField"] = "textField";
+  RHFDatePickerSlots2["desktopPaper"] = "desktopPaper";
+  RHFDatePickerSlots2["calendarHeader"] = "calendarHeader";
+  RHFDatePickerSlots2["iconButton"] = "iconButton";
+  RHFDatePickerSlots2["layout"] = "layout";
+  RHFDatePickerSlots2["actionsContainer"] = "actionsContainer";
+  RHFDatePickerSlots2["dialog"] = "dialog";
+  return RHFDatePickerSlots2;
+})(RHFDatePickerSlots || {});
+export {
+  RHFDatePickerSlots as R
+};

package/components/hook-form/RHFDatePicker/slots/RHFDatePickerSlots.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Componente que es un envoltorio `div` que representa el contenedor raíz del `RHFDatePicker`.
+ */
+export declare const RootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+/**
+ * Componente estilizado de DatePicker de MUI como slot del componente.
+ */
+export declare const DatePickerStyled: import('@emotion/styled').StyledComponent<import('@mui/x-date-pickers').DatePickerProps<unknown> & import('react').RefAttributes<HTMLDivElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+/**
+ * Componente estilizado de TextField de MUI como slot del componente.
+ */
+export declare const TextFieldStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/TextField/types').TextFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>, "value" | "size" | "children" | "title" | "component" | "name" | "error" | "select" | "rows" | "id" | "type" | "disabled" | "hidden" | "content" | "style" | "variant" | "margin" | "translate" | "className" | "classes" | "sx" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "exportparts" | "part" | "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" | "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" | "dataTestId" | "autoComplete" | "maxLength" | "placeholder" | "required" | keyof import('react').RefAttributes<HTMLDivElement> | "maxRows" | "fullWidth" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputProps" | "inputRef" | "multiline" | "minRows" | "SelectProps"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+/**
+ * Componente estilizado de DesktopPaper de MUI como slot del componente.
+ */
+export declare const DesktopPaperStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/material').PaperOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | 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<HTMLDivElement> | null | undefined;
+}, "children" | "style" | "square" | "variant" | "className" | "classes" | "sx" | "elevation">, "children" | "ref" | "title" | "id" | "hidden" | "color" | "content" | "style" | "square" | "variant" | "translate" | "className" | "classes" | "sx" | "slot" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "exportparts" | "part" | "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" | "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" | "elevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+/**
+ * Componente estilizado de HeaderDesktop de MUI como slot del componente.
+ */
+export declare const CalendarHeaderStyled: import('@emotion/styled').StyledComponent<Pick<import('@mui/x-date-pickers').PickersCalendarHeaderProps<unknown> & import('react').RefAttributes<HTMLButtonElement>, keyof import('react').RefAttributes<HTMLButtonElement> | keyof import('@mui/x-date-pickers').PickersCalendarHeaderProps<unknown>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+/**
+ * Componente estilizado de IconButton de M4L como slot del componente.
+ */
+export declare const IconButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../../mui_extended/IconButton/types').IconButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "selected" | "disabled" | "action" | "hidden" | "color" | "content" | "style" | "icon" | "tooltip" | "variant" | "translate" | "className" | "classes" | "src" | "sx" | "form" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "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" | "exportparts" | "part" | "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" | "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" | "instaceDataTestId" | "placement" | "rotationAngle" | "ariaLabel" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "badgeProps" | keyof import('react').RefAttributes<HTMLButtonElement>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+/**
+ * Componente estilizado de Layout de MUI como slot del componente.
+ */
+export declare const PickersLayoutStyled: import('@emotion/styled').StyledComponent<Pick<Pick<import('@mui/x-date-pickers').PickersLayoutProps<unknown, unknown, import('@mui/x-date-pickers/internals/models').DateOrTimeViewWithMeridiem>, keyof import('@mui/x-date-pickers').PickersLayoutProps<unknown, unknown, import('@mui/x-date-pickers/internals/models').DateOrTimeViewWithMeridiem>> & Pick<import('prop-types').InferProps<any>, string | number | symbol> & Pick<import('@mui/x-date-pickers').PickersLayoutProps<unknown, unknown, import('@mui/x-date-pickers/internals/models').DateOrTimeViewWithMeridiem>, never>, keyof import('@mui/x-date-pickers').PickersLayoutProps<unknown, unknown, import('@mui/x-date-pickers/internals/models').DateOrTimeViewWithMeridiem>> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+/**
+ * Componente estilizado de ActionsContainer.
+ */
+export declare const ActionsContainerStyled: import('@emotion/styled').StyledComponent<Pick<import('../../../CommonActions/components/ActionsContainer').ActionsContainerProps & import('react').RefAttributes<HTMLDivElement>, keyof import('react').RefAttributes<HTMLDivElement> | keyof import('../../../CommonActions/components/ActionsContainer').ActionsContainerProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').RHFDatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/hook-form/RHFDatePicker/slots/RHFDatePickerSlots.js

@@ -0,0 +1,44 @@
+import { styled, Paper } from "@mui/material";
+import { DatePicker, PickersCalendarHeader, PickersLayout } from "@mui/x-date-pickers";
+import { R as RHF_DATE_PICKER_KEY_COMPONENT } from "../constants.js";
+import { r as rhfDatePickerStyles } from "../RHFDatePicker.styles.js";
+import { R as RHFDatePickerSlots } from "./RHFDatePickerEnum.js";
+import { T as TextField } from "../../../mui_extended/TextField/TextField.js";
+import { I as IconButton } from "../../../mui_extended/IconButton/IconButton.js";
+import { A as ActionsContainer } from "../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+const RootStyled = styled("div", {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.root
+})(rhfDatePickerStyles?.root);
+styled(DatePicker, {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.datePicker,
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(rhfDatePickerStyles?.datePicker);
+styled(TextField, {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.textField
+})(rhfDatePickerStyles?.textField);
+styled(Paper, {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.desktopPaper
+})(rhfDatePickerStyles?.desktopPaper);
+styled(PickersCalendarHeader, {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.calendarHeader
+})(rhfDatePickerStyles?.calendarHeader);
+styled(IconButton, {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.iconButton
+})(rhfDatePickerStyles?.iconButton);
+styled(PickersLayout, {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.layout
+})(rhfDatePickerStyles?.layout);
+styled(ActionsContainer, {
+  name: RHF_DATE_PICKER_KEY_COMPONENT,
+  slot: RHFDatePickerSlots.actionsContainer
+})(rhfDatePickerStyles?.actionsContainer);
+export {
+  RootStyled as R
+};

package/components/hook-form/RHFDatePicker/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RHFDatePickerEnum';
+export * from './RHFDatePickerSlots';

package/components/hook-form/RHFDatePicker/slots/index.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,61 @@
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+import { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
+import { LabelProps } from '../../Label/types';
+import { RHFDatePickerSlots } from './slots/RHFDatePickerEnum';
+import { RHF_DATE_PICKER_KEY_COMPONENT } from './constants';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { TextFieldVariants } from '../../mui_extended/TextField/types';
+/**
+ * Interfaz de las propiedades que acepta el componente `RHFDatePicker`.
+ * Extiende los props del DatePicker de MUI, excluyendo `size` para usar el propio sistema de tamaños.
+ * También extiende `LabelProps` para soportar etiquetas y mensajes.
+ */
+export interface RHFDatePickerProps extends Omit<MuiDatePickerProps<Date>, 'size' | 'slots' | 'slotProps'>, Omit<LabelProps, 'label' | 'error'> {
+    /**
+     * Nombre de etiqueta del campo.
+     * Esta propiedad se utiliza para etiquetar el campo del date picker.
+     * Puede ser útil para accesibilidad o como descripción del campo.
+     */
+    label?: string;
+    /**
+     * Identificador único del campo dentro del formulario de React Hook Form.
+     * Este identificador es necesario para vincular el campo con el formulario y manejar su estado.
+     */
+    name: string;
+    /**
+     * Variación de tamaño para el componente. Permite seleccionar entre dos tamaños:
+     * - `small`: Tamaño pequeño.
+     * - `medium`: Tamaño mediano.
+     * Esta propiedad sobrescribe el `size` del DatePicker de MUI.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Indica si el campo está deshabilitado.
+     */
+    variant?: TextFieldVariants;
+    /**
+     * Indica si el campo es de solo lectura.
+     */
+    readOnly?: boolean;
+}
+/**
+ * Tipo que define los posibles valores de los slots disponibles en el componente `RHFDatePicker`.
+ * Este tipo se utiliza para determinar qué partes del componente pueden ser estilizadas o modificadas.
+ */
+export type RHFDatePickerSlotsType = keyof typeof RHFDatePickerSlots;
+/**
+ * Estado propietario del componente `RHFDatePicker`.
+ * Define propiedades específicas del estado que son necesarias para la gestión del componente.
+ */
+export interface RHFDatePickerOwnerState extends Record<string, unknown> {
+    size?: RHFDatePickerProps['size'];
+    error?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Tipo de estilos para el componente `RHFDatePicker`.
+ * Permite personalizar los estilos de los slots del componente.
+ * `OverridesStyleRules` se usa para sobrescribir los estilos predeterminados de Material-UI.
+ */
+export type RHFDatePickerStyles = M4LOverridesStyleRules<RHFDatePickerSlotsType, typeof RHF_DATE_PICKER_KEY_COMPONENT, Theme>;

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

@@ -1,5 +1,28 @@
 import { RHFDateTimeProps } from './types';
 /**
- * TODO: Documentar
+ * RHFDateTime es un componente que permite la selección y visualización de una fecha y hora específica,
+ * sin tener que gestionar una fecha completa. Se utiliza en escenarios donde se requiere
+ * que el usuario defina una fecha y hora, y se integra con react-hook-form, permitiendo la validación y
+ * manejo de estados de los campos de formulario.
+ * @deprecated Use RHFDateTimePicker instead.
+ *
+ * ### Dependencias:
+ * - **`useFormContext:`** Hook que provee acceso a los métodos y propiedades de un formulario react-hook-form.
+ * - **`useFormatter:`** Hook que permite acceder a los diferentes formatters de la aplicación.
+ * @example
+ * ```tsx
+ * const ExampleComponent = () => {
+ *   const { control } = useForm();
+ *   return (
+ *     <RHFDateTime
+ *       name="dateTime"
+ *       size="medium"
+ *       variant="outlined"
+ *       label="Fecha y hora"
+ *       helperMessage="Seleccione una fecha y hora"
+ *     />
+ *   );
+ * };
+ * ```
  */
 export declare function RHFDateTime(props: RHFDateTimeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -43,7 +43,7 @@ function RHFDateTime(props) {
         {
           name: nameRHF,
           control,
-          render: ({ field: { value, onChange, ref }, fieldState: { error } }) => {
+          render: ({ field: { value, onChange, ref }, fieldState: { error }, formState: { isSubmitting } }) => {
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               label && /* @__PURE__ */ jsx(
                 Label,
@@ -62,7 +62,7 @@ function RHFDateTime(props) {
                 {
                   variant,
                   size: adjustedSize,
-                  disabled,
+                  disabled: disabled || isSubmitting,
                   inputRef: ref,
                   slotProps: {
                     field: {