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

package/components/mui_extended/DatePicker/DatePicker.styles.js

@@ -0,0 +1,193 @@
+import { g as getSizeStyles } from "../../../utils/getSizeStyles/getSizeStyles.js";
+import { g as getTypographyStyles } from "../../../utils/getTypographyStyles.js";
+const datePickerStyles = {
+  /**
+   * Estilos para el DatePicker de MUI.
+   * Permite personalizar los estilos del componente DatePicker.
+   */
+  root: {},
+  /**
+   * 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"
+      }
+    }
+  }),
+  /**
+   * 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
+  }),
+  /**
+   * Estilos para el dialog de MUI.
+   */
+  dialog: ({ theme }) => ({
+    "& .MuiPaper-root": {
+      borderRadius: theme.vars.size.borderRadius.r2
+    }
+  })
+};
+export {
+  datePickerStyles as d
+};

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

@@ -0,0 +1,2 @@
+export declare const DATE_PICKER_KEY_COMPONENT = "M4LDatePicker";
+export declare const DATE_PICKER_CLASSES: Record<"layout" | "root" | "dialog" | "iconButton" | "actionsContainer" | "textField" | "desktopPaper" | "calendarHeader", string>;

package/components/mui_extended/DatePicker/constants.js

@@ -0,0 +1,8 @@
+import { g as getComponentClasses } from "../../../utils/getComponentSlotRoot.js";
+import { D as DatePickerEnum } from "./slots/DatePickerEnum.js";
+const DATE_PICKER_KEY_COMPONENT = "M4LDatePicker";
+const DATE_PICKER_CLASSES = getComponentClasses(DATE_PICKER_KEY_COMPONENT, DatePickerEnum);
+export {
+  DATE_PICKER_CLASSES as D,
+  DATE_PICKER_KEY_COMPONENT as a
+};

package/components/mui_extended/DatePicker/hooks/useDatePicker/types.d.ts

@@ -0,0 +1,11 @@
+import { DatePickerSlotsComponents, DatePickerSlotsComponentsProps } from '@mui/x-date-pickers';
+import { DatePickerOwnerState } from '../../types';
+/**
+ * Tipo de retorno del hook useDatePicker
+ */
+export interface UseDatePickerReturn {
+    ownerState: DatePickerOwnerState;
+    defaultSlots: DatePickerSlotsComponents<unknown>;
+    defaultSlotProps: DatePickerSlotsComponentsProps<unknown>;
+    dateFormat: string;
+}

package/components/mui_extended/DatePicker/hooks/useDatePicker/useDatePicker.d.ts

@@ -0,0 +1,9 @@
+import { DatePickerProps } from '../../types';
+import { UseDatePickerReturn } from './types';
+/**
+ * Hook personalizado que encapsula toda la lógica de memos, callbacks y objetos
+ * necesarios para el componente DatePicker
+ * @param props - Props del componente DatePicker
+ * @returns Objeto con ownerState, defaultSlots, defaultSlotProps, dateFormat y dateMask
+ */
+export declare const useDatePicker: (props: DatePickerProps) => UseDatePickerReturn;

package/components/mui_extended/DatePicker/hooks/useDatePicker/useDatePicker.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I as IconButtonStyled, C as CalendarHeaderStyled, A as ActionsContainerStyled, P as PickersLayoutStyled, a as DesktopPaperStyled, T as TextFieldStyled } from "../../slots/DatePickerSlots.js";
+import { useFormatter, useIsMobile } from "@m4l/graphics";
+import React, { useMemo, useCallback } from "react";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
+import { c as chevron_left, a as chevron_right, b as chevron_down, d as calendar } from "../../icons.js";
+import { d as datePickerStyles } from "../../DatePicker.styles.js";
+import { u as useComponentSize } from "../../../../../hooks/useComponentSize/useComponentSize.js";
+import { I as IconButton } from "../../../IconButton/IconButton.js";
+import { B as Button } from "../../../Button/Button.js";
+const useDatePicker = (props) => {
+  const {
+    error,
+    size = "medium",
+    disabled,
+    slots,
+    variant = "outlined",
+    readOnly,
+    id
+  } = props;
+  const { dateFormatter } = useFormatter();
+  const { host_static_assets, environment_assets } = useEnvironment();
+  const { getLabel } = useModuleDictionary();
+  const isMobile = useIsMobile();
+  const { currentSize } = useComponentSize(size);
+  const { dateFormat } = dateFormatter;
+  const ownerState = useMemo(() => ({
+    size: currentSize,
+    error: !!error,
+    disabled: !!disabled
+  }), [currentSize, error, disabled]);
+  const CustomPreviousIconButton = useMemo(() => {
+    return React.forwardRef((iconButtonProps, ref) => {
+      return /* @__PURE__ */ jsx(
+        IconButtonStyled,
+        {
+          ref,
+          ...iconButtonProps,
+          ownerState,
+          size: currentSize,
+          disabled,
+          icon: `${host_static_assets}/${environment_assets}/${chevron_left}`
+        }
+      );
+    });
+  }, [currentSize, disabled, environment_assets, host_static_assets, ownerState]);
+  const CustomNextIconButton = useMemo(() => {
+    return React.forwardRef((iconButtonProps, ref) => {
+      return /* @__PURE__ */ jsx(
+        IconButtonStyled,
+        {
+          ref,
+          ...iconButtonProps,
+          ownerState,
+          size: currentSize,
+          disabled,
+          icon: `${host_static_assets}/${environment_assets}/${chevron_right}`
+        }
+      );
+    });
+  }, [currentSize, disabled, environment_assets, host_static_assets, ownerState]);
+  const CustomSwitchViewButton = useMemo(() => {
+    return React.forwardRef((iconButtonProps, ref) => {
+      const currentView = iconButtonProps?.ownerState?.view;
+      const isYearView = currentView === "year";
+      const rotationAngle = isYearView ? 180 : 0;
+      return /* @__PURE__ */ jsx(
+        IconButtonStyled,
+        {
+          ref,
+          ...iconButtonProps,
+          ownerState,
+          size: currentSize,
+          disabled,
+          rotationAngle,
+          icon: `${host_static_assets}/${environment_assets}/${chevron_down}`
+        }
+      );
+    });
+  }, [currentSize, disabled, environment_assets, host_static_assets, ownerState]);
+  const calendarHeaderCallback = useCallback((args) => {
+    return /* @__PURE__ */ jsx(CalendarHeaderStyled, { ...args, ownerState });
+  }, [ownerState]);
+  const CustomCancelButton = useMemo(() => {
+    return React.forwardRef((buttonProps, ref) => {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          ...buttonProps,
+          variant: "text",
+          color: "default",
+          size: currentSize,
+          label: getLabel("common_actions.cancel"),
+          disabled
+        }
+      );
+    });
+  }, [currentSize, disabled, getLabel]);
+  const CustomOkButton = useMemo(() => {
+    return React.forwardRef((buttonProps, ref) => {
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          ref,
+          ...buttonProps,
+          variant: "contained",
+          color: "primary",
+          size: currentSize,
+          label: getLabel("common_actions.intro"),
+          disabled
+        }
+      );
+    });
+  }, [currentSize, disabled, getLabel]);
+  const CustomActionBar = useMemo(() => {
+    return React.forwardRef((actionBarProps, ref) => {
+      const { onAccept, onCancel, className: actionBarClassName } = actionBarProps;
+      return /* @__PURE__ */ jsxs(
+        ActionsContainerStyled,
+        {
+          ref,
+          className: actionBarClassName,
+          children: [
+            /* @__PURE__ */ jsx(CustomCancelButton, { onClick: onCancel }),
+            /* @__PURE__ */ jsx(CustomOkButton, { onClick: onAccept })
+          ]
+        }
+      );
+    });
+  }, [CustomCancelButton, CustomOkButton]);
+  const mobileActionBarSlot = useMemo(() => {
+    if (isMobile && slots?.actionBar === void 0) {
+      return { actionBar: CustomActionBar };
+    }
+    return {};
+  }, [isMobile, slots?.actionBar, CustomActionBar]);
+  const openPickerButton = useCallback((args) => {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...args,
+        icon: `${host_static_assets}/${environment_assets}/${calendar}`,
+        size: currentSize,
+        disabled: readOnly || disabled
+      }
+    );
+  }, [currentSize, disabled, environment_assets, host_static_assets, readOnly]);
+  const defaultSlots = useMemo(() => ({
+    textField: TextFieldStyled,
+    openPickerButton,
+    // Popper component
+    desktopPaper: DesktopPaperStyled,
+    calendarHeader: calendarHeaderCallback,
+    previousIconButton: CustomPreviousIconButton,
+    nextIconButton: CustomNextIconButton,
+    switchViewButton: CustomSwitchViewButton,
+    layout: PickersLayoutStyled,
+    ...mobileActionBarSlot
+  }), [
+    calendarHeaderCallback,
+    CustomNextIconButton,
+    CustomPreviousIconButton,
+    CustomSwitchViewButton,
+    mobileActionBarSlot,
+    openPickerButton
+  ]);
+  const hasError = !!error;
+  const dialogSxStyles = useMemo(() => {
+    const dialogStyleFn = datePickerStyles?.dialog;
+    if (!dialogStyleFn || typeof dialogStyleFn !== "function") {
+      return void 0;
+    }
+    return (theme) => {
+      return dialogStyleFn({ theme });
+    };
+  }, []);
+  const defaultSlotProps = useMemo(() => ({
+    textField: {
+      id,
+      error: hasError,
+      size: currentSize,
+      variant,
+      label: null,
+      readOnly
+    },
+    dialog: {
+      sx: dialogSxStyles
+    }
+  }), [id, hasError, currentSize, variant, readOnly, dialogSxStyles]);
+  return {
+    ownerState,
+    defaultSlots,
+    defaultSlotProps,
+    dateFormat
+  };
+};
+export {
+  useDatePicker as u
+};

package/components/mui_extended/DatePicker/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const chevron_down = "frontend/components/rhfdatepicker/assets/icons/chevron_down.svg";
+export declare const calendar = "frontend/components/rhfdatepicker/assets/icons/created_at.svg";
+export declare const chevron_left = "frontend/components/rhfdatepicker/assets/icons/chevron_left_sm.svg";
+export declare const chevron_right = "frontend/components/rhfdatepicker/assets/icons/chevron_right_sm.svg";

package/components/mui_extended/DatePicker/icons.js

@@ -0,0 +1,10 @@
+const chevron_down = "frontend/components/rhfdatepicker/assets/icons/chevron_down.svg";
+const calendar = "frontend/components/rhfdatepicker/assets/icons/created_at.svg";
+const chevron_left = "frontend/components/rhfdatepicker/assets/icons/chevron_left_sm.svg";
+const chevron_right = "frontend/components/rhfdatepicker/assets/icons/chevron_right_sm.svg";
+export {
+  chevron_right as a,
+  chevron_down as b,
+  chevron_left as c,
+  calendar as d
+};

package/components/mui_extended/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerAdditionalProps, DatePickerOwnerState } from './types';

package/components/mui_extended/DatePicker/slots/DatePickerEnum.d.ts

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

package/components/mui_extended/DatePicker/slots/DatePickerEnum.js

@@ -0,0 +1,14 @@
+var DatePickerEnum = /* @__PURE__ */ ((DatePickerEnum2) => {
+  DatePickerEnum2["root"] = "root";
+  DatePickerEnum2["textField"] = "textField";
+  DatePickerEnum2["desktopPaper"] = "desktopPaper";
+  DatePickerEnum2["calendarHeader"] = "calendarHeader";
+  DatePickerEnum2["iconButton"] = "iconButton";
+  DatePickerEnum2["layout"] = "layout";
+  DatePickerEnum2["actionsContainer"] = "actionsContainer";
+  DatePickerEnum2["dialog"] = "dialog";
+  return DatePickerEnum2;
+})(DatePickerEnum || {});
+export {
+  DatePickerEnum as D
+};

package/components/mui_extended/DatePicker/slots/DatePickerSlots.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 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('..').DatePickerOwnerState> & 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('../../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('..').DatePickerOwnerState> & 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('..').DatePickerOwnerState> & 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('..').DatePickerOwnerState> & 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('../../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('..').DatePickerOwnerState> & 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('..').DatePickerOwnerState> & 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('..').DatePickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/mui_extended/DatePicker/slots/DatePickerSlots.js

@@ -0,0 +1,46 @@
+import { styled, Paper } from "@mui/material";
+import { DatePicker, PickersCalendarHeader, PickersLayout } from "@mui/x-date-pickers";
+import { a as DATE_PICKER_KEY_COMPONENT } from "../constants.js";
+import { d as datePickerStyles } from "../DatePicker.styles.js";
+import { D as DatePickerEnum } from "./DatePickerEnum.js";
+import { I as IconButton } from "../../IconButton/IconButton.js";
+import { A as ActionsContainer } from "../../../CommonActions/components/ActionsContainer/ActionsContainer.js";
+import { T as TextField } from "../../TextField/TextField.js";
+const DatePickerStyled = styled(DatePicker, {
+  name: DATE_PICKER_KEY_COMPONENT,
+  slot: DatePickerEnum.root,
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(datePickerStyles?.root);
+const TextFieldStyled = styled(TextField, {
+  name: DATE_PICKER_KEY_COMPONENT,
+  slot: DatePickerEnum.textField
+})(datePickerStyles?.textField);
+const DesktopPaperStyled = styled(Paper, {
+  name: DATE_PICKER_KEY_COMPONENT,
+  slot: DatePickerEnum.desktopPaper
+})(datePickerStyles?.desktopPaper);
+const CalendarHeaderStyled = styled(PickersCalendarHeader, {
+  name: DATE_PICKER_KEY_COMPONENT,
+  slot: DatePickerEnum.calendarHeader
+})(datePickerStyles?.calendarHeader);
+const IconButtonStyled = styled(IconButton, {
+  name: DATE_PICKER_KEY_COMPONENT,
+  slot: DatePickerEnum.iconButton
+})(datePickerStyles?.iconButton);
+const PickersLayoutStyled = styled(PickersLayout, {
+  name: DATE_PICKER_KEY_COMPONENT,
+  slot: DatePickerEnum.layout
+})(datePickerStyles?.layout);
+const ActionsContainerStyled = styled(ActionsContainer, {
+  name: DATE_PICKER_KEY_COMPONENT,
+  slot: DatePickerEnum.actionsContainer
+})(datePickerStyles?.actionsContainer);
+export {
+  ActionsContainerStyled as A,
+  CalendarHeaderStyled as C,
+  DatePickerStyled as D,
+  IconButtonStyled as I,
+  PickersLayoutStyled as P,
+  TextFieldStyled as T,
+  DesktopPaperStyled as a
+};

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

@@ -0,0 +1,32 @@
+import { Theme } from '@mui/material';
+import { Sizes } from '@m4l/styles';
+import { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers';
+import { M4LOverridesStyleRules } from '../../../@types/augmentations';
+import { TextFieldVariants } from '../TextField/types';
+import { DatePickerEnum } from './slots/DatePickerEnum';
+import { DATE_PICKER_KEY_COMPONENT } from './constants';
+export interface DatePickerProps extends Omit<MuiDatePickerProps<Date>, 'value' | 'size' | 'format'> {
+    value: Date | null;
+    error?: {
+        message?: string;
+    };
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    disabled?: boolean;
+    className?: string;
+    dataTestId?: string;
+    variant?: TextFieldVariants;
+    readOnly?: boolean;
+    id?: string;
+}
+/**
+ * Tipo para las props adicionales de DatePicker que se pasan directamente al componente
+ * Excluye las props que ya se están manejando explícitamente
+ */
+export type DatePickerAdditionalProps = Omit<MuiDatePickerProps<Date>, 'value' | 'onChange' | 'disabled' | 'format' | 'slots' | 'slotProps' | 'className' | 'size' | 'components' | 'componentsProps'>;
+export interface DatePickerOwnerState extends Record<string, unknown> {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    error?: boolean;
+    disabled?: boolean;
+}
+export type DatePickerSlotsType = keyof typeof DatePickerEnum;
+export type DatePickerStyles = M4LOverridesStyleRules<DatePickerSlotsType, typeof DATE_PICKER_KEY_COMPONENT, Theme>;