@m4l/components 9.4.23 → 9.4.25

package/components/DaysOfMonthPicker/DaysOfMonthPicker.d.ts

@@ -0,0 +1,6 @@
+import { DaysOfMonthPickerProps } from './types';
+/**
+ * Componente DaysOfMonthPicker que permite seleccionar uno o varios días del mes (1-31).
+ * Utiliza una estrategia de slots con overrides CSS de Button para cada día.
+ */
+export declare const DaysOfMonthPicker: import('react').ForwardRefExoticComponent<DaysOfMonthPickerProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/DaysOfMonthPicker/DaysOfMonthPicker.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.js";
+import { a as DaysOfMonthPickerRootStyled, b as DaysOfMonthPickerDaysStyled, S as SkeletonDayStyled } from "./slots/DaysOfMonthPickerSlots.js";
+import { a as DAYS_OF_MONTH_PICKER_CLASSES } from "./constants.js";
+import { u as useDaysOfMonthPicker } from "./hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.js";
+const DaysOfMonthPicker = forwardRef((props, ref) => {
+  const { className, dataTestId, disabled } = props;
+  const { days, ownerState, currentSize, isSkeleton, renderDay } = useDaysOfMonthPicker(props);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(
+      DaysOfMonthPickerRootStyled,
+      {
+        ref,
+        className: clsx(className, DAYS_OF_MONTH_PICKER_CLASSES.root),
+        ownerState,
+        role: "group",
+        "aria-label": "Selector de días del mes",
+        ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
+        children: /* @__PURE__ */ jsx(
+          DaysOfMonthPickerDaysStyled,
+          {
+            className: DAYS_OF_MONTH_PICKER_CLASSES.days,
+            role: "grid",
+            "aria-label": "Días del mes",
+            children: days.map((day) => /* @__PURE__ */ jsx(
+              SkeletonDayStyled,
+              {
+                variant: "rounded",
+                className: DAYS_OF_MONTH_PICKER_CLASSES.skeletonDay,
+                ownerState: { size: currentSize }
+              },
+              day
+            ))
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    DaysOfMonthPickerRootStyled,
+    {
+      ref,
+      className: clsx(className, DAYS_OF_MONTH_PICKER_CLASSES.root),
+      ownerState,
+      role: "group",
+      "aria-label": "Selector de días del mes",
+      "aria-disabled": disabled || void 0,
+      ...process.env.NODE_ENV !== "production" ? { [TEST_PROP_ID]: dataTestId } : {},
+      children: /* @__PURE__ */ jsx(
+        DaysOfMonthPickerDaysStyled,
+        {
+          className: DAYS_OF_MONTH_PICKER_CLASSES.days,
+          role: "grid",
+          "aria-label": "Días del mes",
+          children: days.map(renderDay)
+        }
+      )
+    }
+  );
+});
+DaysOfMonthPicker.displayName = "DaysOfMonthPicker";
+export {
+  DaysOfMonthPicker as D
+};

package/components/DaysOfMonthPicker/DaysOfMonthPicker.styles.d.ts

@@ -0,0 +1,2 @@
+import { DaysOfMonthPickerStyles } from './types';
+export declare const daysOfMonthPickerStyles: DaysOfMonthPickerStyles;

package/components/DaysOfMonthPicker/DaysOfMonthPicker.styles.js

@@ -0,0 +1,111 @@
+import { g as getTypographyStyles } from "../../utils/getTypographyStyles.js";
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const daysOfMonthPickerStyles = {
+  /**
+   * Estilos para el elemento raíz del componente.
+   */
+  root: ({ theme }) => ({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "fit-content"
+  }),
+  /**
+   * Estilos para el contenedor de días.
+   */
+  days: ({ theme }) => ({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
+  }),
+  /**
+   * Estilos para cada día individual (slot con overrides de Button).
+   */
+  day: ({ theme, ownerState }) => {
+    const dayOwnerState = ownerState;
+    const isSelected = dayOwnerState?.selected;
+    const isDisabled = dayOwnerState?.disabled;
+    const isReadOnly = dayOwnerState?.readOnly;
+    const backgroundColor = isSelected ? theme.vars.palette.primary.enabledOpacity : "transparent";
+    let textColor = theme.vars.palette.default.semanticText;
+    if (isSelected) {
+      textColor = theme.vars.palette.primary.enabled;
+    }
+    if (isDisabled) {
+      textColor = theme.vars.palette.text.disabled;
+    }
+    const borderRadius = theme.vars.size.borderRadius.r2;
+    const shouldHaveInteractiveStates = !isDisabled && !isReadOnly;
+    return {
+      "&&&": {
+        ...getSizeStyles(theme, dayOwnerState?.size || "medium", "action", (size) => ({
+          minWidth: size,
+          width: size,
+          height: size,
+          minHeight: size
+        })),
+        ...getTypographyStyles(theme.generalSettings.isMobile, dayOwnerState?.size || "medium", "body"),
+        padding: 0,
+        borderRadius,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "none",
+        // Usar !important cuando está selected para sobrescribir el backgroundColor: 'unset' del Button base (variante text)
+        backgroundColor: isSelected ? `${theme.vars.palette.primary.enabledOpacity}!important` : backgroundColor,
+        // Usar !important cuando está selected para sobrescribir el color del texto del Button base (especialmente cuando está disabled)
+        color: `${textColor}!important`,
+        cursor: !shouldHaveInteractiveStates ? "default" : "pointer",
+        transition: "background-color 0.2s ease, color 0.2s ease",
+        pointerEvents: !shouldHaveInteractiveStates ? "none" : "auto",
+        // Estado hover: mantener el backgroundColor actual si está disabled o readOnly
+        "&:hover": {
+          backgroundColor: shouldHaveInteractiveStates ? isSelected ? `${theme.vars.palette.primary.enabledOpacity}!important` : theme.vars.palette.default.hoverOpacity : `${backgroundColor}!important`
+          // Mantener el estado base si no hay estados interactivos
+        },
+        // Estado active: mantener el backgroundColor actual si está disabled o readOnly
+        "&:active": {
+          backgroundColor: shouldHaveInteractiveStates ? isSelected ? `${theme.vars.palette.primary.activeOpacity}!important` : theme.vars.palette.default.activeOpacity : `${backgroundColor}!important`
+          // Mantener el estado base si no hay estados interactivos
+        },
+        // Estado focus visible (solo si no está deshabilitado ni en readOnly)
+        ...shouldHaveInteractiveStates && {
+          "&:focus-visible": {
+            outline: `${theme.vars.size.borderStroke.container} solid ${theme.vars.palette.primary.focusVisible}`,
+            outlineOffset: "2px"
+          }
+        },
+        // Override del texto del botón
+        "& .M4LButton-textButton": {
+          // Usar !important cuando está selected para sobrescribir el color del Button base (especialmente cuando está disabled)
+          color: `${textColor}!important`,
+          padding: 0,
+          fontSize: theme.typography.bodyDens.fontSize,
+          fontWeight: isSelected ? 600 : 400,
+          minWidth: "auto",
+          width: "auto",
+          cursor: "inherit"
+          // Heredar el cursor del contenedor
+        }
+      }
+    };
+  },
+  /**
+   * Estilos para cada día individual en modo skeleton.
+   */
+  skeletonDay: ({ theme, ownerState }) => {
+    const dayOwnerState = ownerState;
+    return {
+      ...getSizeStyles(theme, dayOwnerState?.size || "medium", "action", (size) => ({
+        minWidth: size,
+        width: size,
+        height: size,
+        minHeight: size
+      }))
+    };
+  }
+};
+export {
+  daysOfMonthPickerStyles as d
+};

package/components/DaysOfMonthPicker/DaysOfMonthPicker.test.d.ts

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

package/components/DaysOfMonthPicker/constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Clave de identificación del componente DaysOfMonthPicker dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos y configuraciones
+ * relacionadas con el componente `DaysOfMonthPicker` dentro del sistema de temas y estilos.
+ * @default 'M4LDaysOfMonthPicker'
+ */
+export declare const DAYS_OF_MONTH_PICKER_KEY_COMPONENT = "M4LDaysOfMonthPicker";
+/**
+ * Inventario de clases CSS para el componente DaysOfMonthPicker
+ */
+export declare const DAYS_OF_MONTH_PICKER_CLASSES: Record<"root" | "days" | "day" | "skeletonDay", string>;

package/components/DaysOfMonthPicker/constants.js

@@ -0,0 +1,11 @@
+import { a as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { D as DaysOfMonthPickerSlots } from "./slots/DaysOfMonthPickerEnum.js";
+const DAYS_OF_MONTH_PICKER_KEY_COMPONENT = "M4LDaysOfMonthPicker";
+const DAYS_OF_MONTH_PICKER_CLASSES = getComponentClasses(
+  DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  DaysOfMonthPickerSlots
+);
+export {
+  DAYS_OF_MONTH_PICKER_KEY_COMPONENT as D,
+  DAYS_OF_MONTH_PICKER_CLASSES as a
+};

package/components/DaysOfMonthPicker/constants.test.d.ts

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

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { useDaysOfMonthPicker } from './useDaysOfMonthPicker';
+export * from './types';

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/index.js

@@ -0,0 +1 @@
+

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/types.d.ts

@@ -0,0 +1,27 @@
+import { DaysOfMonthPickerOwnerState } from '../../types';
+import { ReactNode } from 'react';
+/**
+ * Valores retornados por el hook useDaysOfMonthPicker
+ */
+export interface UseDaysOfMonthPickerReturn {
+    /**
+     * Array de días del mes (1-31, siempre en orden consecutivo)
+     */
+    days: number[];
+    /**
+     * Owner state del componente principal
+     */
+    ownerState: DaysOfMonthPickerOwnerState;
+    /**
+     * Tamaño actual del componente
+     */
+    currentSize: 'small' | 'medium';
+    /**
+     * Indica si el componente está en modo skeleton
+     */
+    isSkeleton: boolean;
+    /**
+     * Función para renderizar un día individual
+     */
+    renderDay: (day: number) => ReactNode;
+}

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/types.js

@@ -0,0 +1 @@
+

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.d.ts

@@ -0,0 +1,8 @@
+import { DaysOfMonthPickerProps } from '../../types';
+import { UseDaysOfMonthPickerReturn } from './types';
+/**
+ * Hook personalizado que maneja toda la lógica del componente DaysOfMonthPicker
+ * @param props - Propiedades del componente DaysOfMonthPicker
+ * @returns Objeto con los valores y funciones necesarias para el render
+ */
+export declare const useDaysOfMonthPicker: (props: DaysOfMonthPickerProps) => UseDaysOfMonthPickerReturn;

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.js

@@ -0,0 +1,121 @@
+import { jsx } from "react/jsx-runtime";
+import { useModuleSkeleton } from "@m4l/core";
+import { useMemo, useCallback } from "react";
+import { a as DAYS_OF_MONTH_PICKER_CLASSES } from "../../constants.js";
+import { D as DayButtonStyled } from "../../slots/DaysOfMonthPickerSlots.js";
+import { u as useComponentSize } from "../../../../hooks/useComponentSize/useComponentSize.js";
+const useDaysOfMonthPicker = (props) => {
+  const {
+    value,
+    onChange,
+    multiple = false,
+    disabledDays = [],
+    disabled = false,
+    readOnly = false,
+    size
+  } = props;
+  const isSkeleton = useModuleSkeleton();
+  const { currentSize } = useComponentSize(size);
+  const ownerState = useMemo(
+    () => ({
+      disabled,
+      readOnly
+    }),
+    [disabled, readOnly]
+  );
+  const days = useMemo(() => {
+    const daysArray = [];
+    for (let day = 1; day <= 31; day++) {
+      daysArray.push(day);
+    }
+    return daysArray;
+  }, []);
+  const isDaySelected = useCallback(
+    (day) => {
+      if (value === void 0) {
+        return false;
+      }
+      if (multiple) {
+        return Array.isArray(value) && value.includes(day);
+      }
+      return value === day;
+    },
+    [value, multiple]
+  );
+  const isDayDisabled = useCallback(
+    (day) => {
+      return disabled || disabledDays.includes(day);
+    },
+    [disabled, disabledDays]
+  );
+  const handleDayClick = useCallback(
+    (day) => {
+      if (isDayDisabled(day) || readOnly || isSkeleton) {
+        return;
+      }
+      if (multiple) {
+        const currentValue = Array.isArray(value) ? value : [];
+        const isSelected = currentValue.includes(day);
+        if (isSelected) {
+          const newValue = currentValue.filter((d) => d !== day);
+          onChange?.(newValue);
+        } else {
+          const newValue = [...currentValue, day];
+          onChange?.(newValue);
+        }
+      } else {
+        const newValue = value === day ? void 0 : day;
+        onChange?.(newValue);
+      }
+    },
+    [multiple, value, onChange, isDayDisabled, readOnly, isSkeleton]
+  );
+  const renderDay = useCallback(
+    (day) => {
+      const selected = isDaySelected(day);
+      const dayDisabled = isDayDisabled(day);
+      const dayOwnerState = {
+        selected,
+        disabled: dayDisabled,
+        readOnly,
+        size: currentSize
+      };
+      const dayLabel = day.toString().padStart(2, "0");
+      const ariaLabel = selected ? `Día ${day} seleccionado` : `Día ${day} no seleccionado`;
+      return /* @__PURE__ */ jsx(
+        DayButtonStyled,
+        {
+          label: dayLabel,
+          variant: "text",
+          disabled: dayDisabled,
+          onClick: () => handleDayClick(day),
+          ownerState: dayOwnerState,
+          "aria-label": ariaLabel,
+          "aria-pressed": selected,
+          "aria-disabled": dayDisabled || readOnly,
+          role: "button",
+          tabIndex: dayDisabled || readOnly ? -1 : 0,
+          className: DAYS_OF_MONTH_PICKER_CLASSES.day
+        },
+        day
+      );
+    },
+    [
+      isDaySelected,
+      isDayDisabled,
+      readOnly,
+      handleDayClick,
+      currentSize
+    ]
+  );
+  return {
+    days,
+    ownerState,
+    currentSize,
+    isSkeleton,
+    renderDay
+  };
+};
+export {
+  useDaysOfMonthPicker as u
+};

package/components/DaysOfMonthPicker/hooks/useDaysOfMonthPicker/useDaysOfMonthPicker.test.d.ts

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

package/components/DaysOfMonthPicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DaysOfMonthPicker';
+export * from './types';

package/components/DaysOfMonthPicker/index.js

@@ -0,0 +1 @@
+

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerEnum.d.ts

@@ -0,0 +1,6 @@
+export declare enum DaysOfMonthPickerSlots {
+    root = "root",
+    days = "days",
+    day = "day",
+    skeletonDay = "skeletonDay"
+}

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerEnum.js

@@ -0,0 +1,10 @@
+var DaysOfMonthPickerSlots = /* @__PURE__ */ ((DaysOfMonthPickerSlots2) => {
+  DaysOfMonthPickerSlots2["root"] = "root";
+  DaysOfMonthPickerSlots2["days"] = "days";
+  DaysOfMonthPickerSlots2["day"] = "day";
+  DaysOfMonthPickerSlots2["skeletonDay"] = "skeletonDay";
+  return DaysOfMonthPickerSlots2;
+})(DaysOfMonthPickerSlots || {});
+export {
+  DaysOfMonthPickerSlots as D
+};

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerSlots.d.ts

@@ -0,0 +1,4 @@
+export declare const DaysOfMonthPickerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DaysOfMonthPickerDaysStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
+export declare const DayButtonStyled: import('@emotion/styled').StyledComponent<Pick<Omit<import('../../mui_extended/Button').ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "value" | "size" | "children" | "title" | "component" | "name" | "id" | "type" | "disabled" | "action" | "variant" | "color" | "content" | "translate" | "className" | "style" | "classes" | "sx" | "form" | "label" | "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "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" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "href" | "skeletonWidth" | "startIcon" | "endIcon" | keyof import('react').RefAttributes<HTMLButtonElement> | "fullWidth" | "disableElevation"> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;
+export declare const SkeletonDayStyled: import('@emotion/styled').StyledComponent<Pick<import('../../mui_extended/Skeleton/types').SkeletonProps, keyof import('../../mui_extended/Skeleton/types').SkeletonProps> & import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown>, {}, {}>;

package/components/DaysOfMonthPicker/slots/DaysOfMonthPickerSlots.js

@@ -0,0 +1,28 @@
+import { styled } from "@mui/material/styles";
+import { d as daysOfMonthPickerStyles } from "../DaysOfMonthPicker.styles.js";
+import { D as DAYS_OF_MONTH_PICKER_KEY_COMPONENT } from "../constants.js";
+import { D as DaysOfMonthPickerSlots } from "./DaysOfMonthPickerEnum.js";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
+import { B as Button } from "../../mui_extended/Button/Button.js";
+const DaysOfMonthPickerRootStyled = styled("div", {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.root
+})(daysOfMonthPickerStyles?.root);
+const DaysOfMonthPickerDaysStyled = styled("div", {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.days
+})(daysOfMonthPickerStyles?.days);
+const DayButtonStyled = styled(Button, {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.day
+})(daysOfMonthPickerStyles?.day);
+const SkeletonDayStyled = styled(Skeleton, {
+  name: DAYS_OF_MONTH_PICKER_KEY_COMPONENT,
+  slot: DaysOfMonthPickerSlots.skeletonDay
+})(daysOfMonthPickerStyles?.skeletonDay);
+export {
+  DayButtonStyled as D,
+  SkeletonDayStyled as S,
+  DaysOfMonthPickerRootStyled as a,
+  DaysOfMonthPickerDaysStyled as b
+};

package/components/DaysOfMonthPicker/slots/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DaysOfMonthPickerEnum';
+export * from './DaysOfMonthPickerSlots';

package/components/DaysOfMonthPicker/types.d.ts

@@ -0,0 +1,82 @@
+import { Theme } from '@mui/material/styles';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+import { DAYS_OF_MONTH_PICKER_KEY_COMPONENT } from './constants';
+import { DaysOfMonthPickerSlots } from './slots/DaysOfMonthPickerEnum';
+import { Sizes } from '@m4l/styles';
+/**
+ * Propiedades del componente `DaysOfMonthPicker`.
+ */
+export interface DaysOfMonthPickerProps {
+    /**
+     * Valor seleccionado. Puede ser un número (día único) o un array de números (múltiples días).
+     */
+    value?: number | number[];
+    /**
+     * Callback que se ejecuta cuando cambia la selección.
+     */
+    onChange?: (value: number | number[]) => void;
+    /**
+     * Si es true, permite seleccionar múltiples días. Si es false, solo permite seleccionar un día modo single.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Array de días que están deshabilitados y no se pueden seleccionar.
+     */
+    disabledDays?: number[];
+    /**
+     * Si es true, el componente está completamente deshabilitado.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Si es true, el componente está en modo solo lectura.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Class name para el componente.
+     */
+    className?: string;
+    /**
+     * Tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Test id para el componente.
+     */
+    dataTestId?: string;
+}
+/**
+ * Owner state del componente `DaysOfMonthPicker` usado para definir propiedades internas de estilo y comportamiento.
+ */
+export interface DaysOfMonthPickerOwnerState {
+    disabled?: boolean;
+    readOnly?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Owner state para cada día individual.
+ */
+export interface DayOwnerState {
+    selected: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    size: Extract<Sizes, 'small' | 'medium'>;
+    [key: string]: unknown;
+}
+/**
+ * Owner state para cada header de día individual.
+ */
+export interface DayHeaderOwnerState {
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    [key: string]: unknown;
+}
+/**
+ * Define los tipos de Slots disponibles para el componente `DaysOfMonthPicker`.
+ */
+export type DaysOfMonthPickerSlotsType = keyof typeof DaysOfMonthPickerSlots;
+/**
+ * Estilos aplicables al componente `DaysOfMonthPicker` usando temas y slots personalizados.
+ */
+export type DaysOfMonthPickerStyles = M4LOverridesStyleRules<DaysOfMonthPickerSlotsType, typeof DAYS_OF_MONTH_PICKER_KEY_COMPONENT, Theme>;

package/components/DaysOfMonthPicker/types.js

@@ -0,0 +1 @@
+

package/components/datagrids/Datagrid.styles.js

@@ -1165,6 +1165,33 @@ const dataGridStyles = {
     textOverflow: "ellipsis",
     wordBreak: "break-word",
     whiteSpace: "normal"
+  }),
+  /**
+   * Wrapper para celdas con color de fondo personalizado.
+   *
+   * Este estilo aplica backgroundColor y ocupa toda la celda,
+   * manteniendo el comportamiento de truncado con ellipsis.
+   * El color se recibe a través de ownerState.cellBackgroundColor
+   */
+  cellBackgroundWrapper: ({ ownerState }) => ({
+    // Ocupar toda la celda con margin negativo
+    margin: "-8px",
+    padding: "8px",
+    width: "calc(100% + 16px)",
+    height: "calc(100% + 16px)",
+    boxSizing: "border-box",
+    // Mantener el comportamiento de truncado igual que las celdas
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: ownerState?.currentRowHeightVariant === "compact" ? 1 : ownerState?.currentRowHeightVariant === "confortable" ? 3 : 2,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    wordBreak: "break-word",
+    whiteSpace: "normal",
+    alignContent: "center",
+    ...ownerState?.cellBackgroundColor && {
+      backgroundColor: ownerState.cellBackgroundColor
+    }
   })
 };
 export {

package/components/datagrids/components/DataGridMain/DataGridMain.js

@@ -14,7 +14,8 @@ function DataGrid(props) {
     cardsViewConfig,
     focusOnRowKey,
     checkedRows,
-    onCheckedRowsChange
+    onCheckedRowsChange,
+    rowCellsBackground
   } = props;
   return /* @__PURE__ */ jsx(BaseDataGrid, { ...props, children: /* @__PURE__ */ jsx(
     RenderContent,
@@ -30,7 +31,8 @@ function DataGrid(props) {
       cardsViewConfig,
       focusOnRowKey,
       checkedRows,
-      onCheckedRowsChange
+      onCheckedRowsChange,
+      rowCellsBackground
     }
   ) });
 }

package/components/datagrids/components/TreeDataGrid/TreeDataGrid.js

@@ -17,7 +17,8 @@ function TreeDataGrid(props) {
     onCheckedRowsChange,
     rowGrouper,
     expandedGroupIds: expandedGroupIdsProp,
-    onExpandedGroupIdsChange: onExpandedGroupIdsChangeProp
+    onExpandedGroupIdsChange: onExpandedGroupIdsChangeProp,
+    rowCellsBackground
   } = props;
   const [internalExpandedGroupIds, setInternalExpandedGroupIds] = useState(() => new Set(expandedGroupIdsProp ?? []));
   const isControlled = expandedGroupIdsProp !== void 0 && onExpandedGroupIdsChangeProp !== void 0;
@@ -37,6 +38,7 @@ function TreeDataGrid(props) {
       focusOnRowKey,
       checkedRows,
       onCheckedRowsChange,
+      rowCellsBackground,
       treeProps: {
         rowGrouper,
         expandedGroupIds,

package/components/datagrids/slots/DataGridEnum.d.ts

@@ -55,7 +55,8 @@ export declare enum TableSlots {
     editLabel = "editLabel",
     iconButtonEdit = "iconButtonEdit",
     defaultRenderGroupCellRoot = "defaultRenderGroupCellRoot",
-    defaultRenderGroupCellText = "defaultRenderGroupCellText"
+    defaultRenderGroupCellText = "defaultRenderGroupCellText",
+    cellBackgroundWrapper = "cellBackgroundWrapper"
 }
 export declare enum TextEditorSlots {
     inputTexEditor = "inputTexEditor"

package/components/datagrids/slots/DataGridEnum.js

@@ -59,6 +59,7 @@ var TableSlots = /* @__PURE__ */ ((TableSlots2) => {
   TableSlots2["iconButtonEdit"] = "iconButtonEdit";
   TableSlots2["defaultRenderGroupCellRoot"] = "defaultRenderGroupCellRoot";
   TableSlots2["defaultRenderGroupCellText"] = "defaultRenderGroupCellText";
+  TableSlots2["cellBackgroundWrapper"] = "cellBackgroundWrapper";
   return TableSlots2;
 })(TableSlots || {});
 var TextEditorSlots = /* @__PURE__ */ ((TextEditorSlots2) => {

package/components/datagrids/slots/DataGridSlot.d.ts

@@ -99,3 +99,4 @@ export declare const ControlNavigateStyled: import('@emotion/styled').StyledComp
 export declare const ColumnIconFormatterStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('react').ClassAttributes<HTMLDivElement> | keyof import('react').HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const DefaultRenderGroupCellRootStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
 export declare const DefaultRenderGroupCellTextStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;
+export declare const CellBackgroundWrapperStyled: import('@emotion/styled').StyledComponent<any, Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof import('react').ClassAttributes<HTMLSpanElement> | keyof import('react').HTMLAttributes<HTMLSpanElement>>, {}>;

package/components/datagrids/slots/DataGridSlot.js

@@ -239,6 +239,10 @@ const DefaultRenderGroupCellTextStyled = styled("span", {
   name: DATAGRID_PREFIX_NAME,
   slot: TableSlots.defaultRenderGroupCellText
 })(dataGridStyles.defaultRenderGroupCellText);
+const CellBackgroundWrapperStyled = styled("span", {
+  name: DATAGRID_PREFIX_NAME,
+  slot: TableSlots.cellBackgroundWrapper
+})(dataGridStyles.cellBackgroundWrapper);
 export {
   ActionsRootStyled as A,
   NameColumnStyled as B,
@@ -254,16 +258,17 @@ export {
   LabelHeaderColumnStyled as L,
   HeaderInputBaseStyled as M,
   NameColumnIconStyled as N,
-  DefaultRenderGroupCellRootStyled as O,
-  DefaultRenderGroupCellTextStyled as P,
-  MenuListStyled as Q,
+  CellBackgroundWrapperStyled as O,
+  DefaultRenderGroupCellRootStyled as P,
+  DefaultRenderGroupCellTextStyled as Q,
   RowsCountRootStyled as R,
-  HeaderRenderClickStyled as S,
+  MenuListStyled as S,
   TextToggleCardButtonStyled as T,
-  TableContainerStyled as U,
+  HeaderRenderClickStyled as U,
   ValueColumnStyled as V,
   WrapperSkeletonStyled as W,
-  InputTextEditorStyled as X,
+  TableContainerStyled as X,
+  InputTextEditorStyled as Y,
   CardToggleButtonStyled as a,
   CheckboxCellWrapperStyled as b,
   ColumnsConfigWrapperStyled as c,

package/components/datagrids/subcomponents/editors/TextEditor/TextEditor.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { X as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
+import { Y as InputTextEditorStyled } from "../../../slots/DataGridSlot.js";
 function autoFocusAndSelect(input) {
   input?.focus();
   input?.select();

package/components/datagrids/types.d.ts

@@ -54,6 +54,33 @@ declare module 'react-data-grid' {
     }
 }
 export declare type RowKey = string | number;
+/**
+ * Define una celda específica que tendrá un color de fondo personalizado.
+ * rowKey - Identificador único de la fila (el mismo que usa rowKeyGetter)
+ * columnKey - Identificador de la columna (el key de la columna)
+ * color - Color de fondo a aplicar (puede ser hex como '#FF0000', rgb, etc.)
+ */
+export interface RowCellBackground<TKey extends RowKey = RowKey> {
+    rowKey: TKey;
+    columnKey: string;
+    color: string;
+}
+/**
+ * Función que retorna el color de fondo para una celda específica.
+ * Esta variante es más óptima para muchas filas porque solo se llama
+ * para las celdas visibles durante la virtualización.
+ * @param rowKey - Identificador único de la fila
+ * @param columnKey - Identificador de la columna
+ * @returns El color de fondo (hex, rgb, etc.) o undefined/null para transparente
+ */
+export type RowCellsBackgroundGetter<TKey extends RowKey = RowKey> = (rowKey: TKey, columnKey: string) => string | undefined | null;
+/**
+ * Tipo union que permite array o función para rowCellsBackground.
+ *
+ * - Array: Más simple de usar, pero procesa todas las celdas al inicio
+ * - Función: Más óptima para muchas filas, solo se llama para celdas visibles
+ */
+export type RowCellsBackgroundProp<TKey extends RowKey = RowKey> = RowCellBackground<TKey>[] | RowCellsBackgroundGetter<TKey>;
 export declare interface WithActionsProps {
     withActions?: boolean;
 }
@@ -228,6 +255,12 @@ export interface GridProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> exte
      * Útil cuando se agrega un nuevo elemento y se quiere enfocar en él.
      */
     focusOnRowKey?: TKey;
+    /**
+     * Colores de fondo para celdas específicas.
+     * - Array: `[{ rowKey, columnKey, color }]`
+     * - Función: `(rowKey, columnKey) => color | undefined` (más óptima para muchas filas)
+     */
+    rowCellsBackground?: RowCellsBackgroundProp<TKey>;
 }
 export declare const DATAGRID_TEST_ID = "m4ldatagrid";
 export declare const PREFIX_TEST_ATTRIBUTE = "data-testid";

package/components/datagrids/views/TableView/TableView.js

@@ -3,10 +3,11 @@ import { useMemo, useRef, useState, useEffect } from "react";
 import DataGrid, { TreeDataGrid } from "react-data-grid";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import { U as TableContainerStyled, f as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
+import { X as TableContainerStyled, f as TableWrapperDataGridStyled } from "../../slots/DataGridSlot.js";
 import { u as useSortColumnsRows } from "./hooks/useSortColumnsRows/useSortColumnsRows.js";
 import { g as getGroupBy } from "./helpers/getGroupBy/getGroupBy.js";
 import { d as defaultRowGrouper } from "./helpers/defaultRowGrouper/defaultRowGrouper.js";
+import { c as createRowCellsBackgroundMap, p as processColumnsWithRowCellsBackground } from "./helpers/rowCellsBackground/rowCellsBackground.js";
 import { u as useHeaderMenuActions } from "./hooks/useHeaderMenuActions/useHeaderMenuActions.js";
 import { a as filterHeight } from "./subcomponents/SelectColumn/SelectColumn.js";
 import { H as HeaderRenderClick } from "./subcomponents/HeaderRenderClick/HeaderRenderClick.js";
@@ -24,6 +25,7 @@ function TableView(props) {
     onSelectedRowsChange,
     defaultColumnOptions: defaultColumnOptionsProp,
     focusOnRowKey,
+    rowCellsBackground,
     treeProps,
     ...restProps
   } = props;
@@ -76,6 +78,24 @@ function TableView(props) {
     return getGroupBy(columnsConfig);
   }, [columnsConfig, treeProps]);
   const rowGrouper = treeProps?.rowGrouper ?? defaultRowGrouper;
+  const colorGetter = useMemo(() => {
+    if (!rowCellsBackground) {
+      return void 0;
+    }
+    if (typeof rowCellsBackground === "function") {
+      return rowCellsBackground;
+    }
+    return createRowCellsBackgroundMap(rowCellsBackground);
+  }, [rowCellsBackground]);
+  const columnsWithBackground = useMemo(
+    () => processColumnsWithRowCellsBackground(
+      finalColumns,
+      colorGetter,
+      rowKeyGetter,
+      currentRowHeightVariant
+    ),
+    [finalColumns, colorGetter, rowKeyGetter, currentRowHeightVariant]
+  );
   const ref_data_grid = useRef(null);
   const [popoverState, setPopoverState] = useState({
     anchorEl: null,
@@ -179,7 +199,7 @@ function TableView(props) {
             className: "rdg-light",
             ref: ref_data_grid,
             headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-            columns: finalColumns,
+            columns: columnsWithBackground,
             sortColumns,
             onSortColumnsChange: handleSortColumnsChange,
             onColumnResize,
@@ -207,7 +227,7 @@ function TableView(props) {
             className: "rdg-light",
             ref: ref_data_grid,
             headerRowHeight: activeFilters ? currentRowHeaderHeight + filterHeight : currentRowHeaderHeight,
-            columns: finalColumns,
+            columns: columnsWithBackground,
             sortColumns,
             onSortColumnsChange: handleSortColumnsChange,
             onColumnResize,

package/components/datagrids/views/TableView/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export { getDragHeaderRenderer } from './getDragHeaderRenderer';
 export { getGroupBy } from './getGroupBy';
 export { defaultRowGrouper } from './defaultRowGrouper';
+export { createRowCellsBackgroundMap, processColumnsWithRowCellsBackground, } from './rowCellsBackground';

package/components/datagrids/views/TableView/helpers/rowCellsBackground/index.d.ts

@@ -0,0 +1,2 @@
+export { createRowCellsBackgroundMap, processColumnsWithRowCellsBackground, } from './rowCellsBackground';
+export type { CellColorGetter } from './types';

package/components/datagrids/views/TableView/helpers/rowCellsBackground/index.js

@@ -0,0 +1 @@
+

package/components/datagrids/views/TableView/helpers/rowCellsBackground/rowCellsBackground.d.ts

@@ -0,0 +1,32 @@
+import { Column } from 'react-data-grid';
+import { RowKey, RowCellBackground, RowHeightVariants } from '../../../../types';
+import { CellColorGetter } from './types';
+/**
+ * Convierte el array de rowCellsBackground en un Map para buscar el color
+ * de una celda usando la combinación de rowKey y columnKey.
+ *
+ * El Map usa como llave la combinación "rowKey|columnKey" (separados por |)
+ * y como valor el color.
+ *
+ * Ejemplo:
+ * - Entrada: [{ rowKey: 'user_1', columnKey: 'status', color: '#FF0000' }]
+ * - Map resultante: { 'user_1|status' => '#FF0000' }
+ * @param rowCellsBackground - Array de celdas con sus colores (puede ser undefined)
+ * @returns Map con la llave "rowKey|columnKey" y el color como valor
+ */
+export declare const createRowCellsBackgroundMap: <TKey extends RowKey>(rowCellsBackground: RowCellBackground<TKey>[] | undefined) => Map<string, string>;
+/**
+ * Procesa las columnas para agregar el wrapper de color donde corresponda.
+ *
+ * Para cada columna, modifica el renderCell para:
+ * 1. Obtener el rowKey de la fila actual
+ * 2. Buscar si existe un color para esa combinación rowKey + columnKey
+ * 3. Si existe color, envolver el contenido con CellBackgroundWrapperStyled
+ * 4. Si no existe color, mostrar el contenido normal sin cambios
+ * @param columns - Las columnas originales del DataGrid
+ * @param colorGetter - Map con los colores o función que retorna el color
+ * @param rowKeyGetter - Función que obtiene el key de una fila
+ * @param currentRowHeightVariant - Variante de altura de fila para el truncado
+ * @returns Las columnas modificadas con el renderCell actualizado
+ */
+export declare const processColumnsWithRowCellsBackground: <TRow, TSummaryRow, TKey extends RowKey>(columns: readonly Column<TRow, TSummaryRow>[], colorGetter: CellColorGetter<TKey> | undefined, rowKeyGetter: (row: TRow) => TKey, currentRowHeightVariant?: RowHeightVariants) => Column<TRow, TSummaryRow>[];

package/components/datagrids/views/TableView/helpers/rowCellsBackground/rowCellsBackground.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { O as CellBackgroundWrapperStyled } from "../../../../slots/DataGridSlot.js";
+const getCellColor = (colorGetter, rowKey, columnKey) => {
+  if (colorGetter instanceof Map) {
+    return colorGetter.get(`${rowKey}|${columnKey}`);
+  }
+  return colorGetter(rowKey, columnKey);
+};
+const createRowCellsBackgroundMap = (rowCellsBackground) => {
+  const map = /* @__PURE__ */ new Map();
+  if (!rowCellsBackground) {
+    return map;
+  }
+  rowCellsBackground.forEach(({ rowKey, columnKey, color }) => {
+    map.set(`${rowKey}|${columnKey}`, color);
+  });
+  return map;
+};
+const processColumnsWithRowCellsBackground = (columns, colorGetter, rowKeyGetter, currentRowHeightVariant) => {
+  if (!colorGetter) {
+    return columns;
+  }
+  if (colorGetter instanceof Map && colorGetter.size === 0) {
+    return columns;
+  }
+  return columns.map((column) => {
+    const originalRenderCell = column.renderCell;
+    return {
+      ...column,
+      // Mantener todas las propiedades originales de la columna
+      /**
+       * Reemplazar renderCell con nuestra versión que agrega el color
+       */
+      renderCell: (props) => {
+        const rowKey = rowKeyGetter(props.row);
+        const cellColor = getCellColor(colorGetter, rowKey, column.key);
+        const originalContent = originalRenderCell ? originalRenderCell(props) : props.row[column.key];
+        if (cellColor) {
+          return /* @__PURE__ */ jsx(
+            CellBackgroundWrapperStyled,
+            {
+              ownerState: {
+                cellBackgroundColor: cellColor,
+                currentRowHeightVariant
+              },
+              children: originalContent
+            }
+          );
+        }
+        return originalContent;
+      }
+    };
+  });
+};
+export {
+  createRowCellsBackgroundMap as c,
+  processColumnsWithRowCellsBackground as p
+};

package/components/datagrids/views/TableView/helpers/rowCellsBackground/types.d.ts

@@ -0,0 +1,7 @@
+import { RowKey, RowCellsBackgroundGetter } from '../../../../types';
+/**
+ * Tipo para el getter de color - puede ser Map (desde array) o función directa.
+ * - Map: Resultado de convertir un array de RowCellBackground
+ * - Función: La función directa que retorna el color para cada celda
+ */
+export type CellColorGetter<TKey extends RowKey> = Map<string, string> | RowCellsBackgroundGetter<TKey>;

package/components/datagrids/views/TableView/subcomponents/HeaderRenderClick/HeaderRenderClick.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useState, useMemo, useEffect, useCallback } from "react";
 import { useModuleDictionary } from "@m4l/core";
 import { M as MenuItem } from "../../../../../mui_extended/MenuItem/MenuItem.js";
-import { Q as MenuListStyled, S as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
+import { S as MenuListStyled, U as HeaderRenderClickStyled } from "../../../../slots/DataGridSlot.js";
 import { M as MenuDivider } from "../../../../../mui_extended/MenuDivider/MenuDivider.js";
 import { P as Popover } from "../../../../../mui_extended/Popover/Popover.js";
 import { D as DICTIONARY } from "../../../../dictionary.js";

package/components/datagrids/views/TableView/subcomponents/RenderGroupCell/RenderGroupCell.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useEnvironment } from "@m4l/core";
 import { p as pathIcons } from "../../../../icons.js";
 import { I as Icon } from "../../../../../Icon/Icon.js";
-import { O as DefaultRenderGroupCellRootStyled, P as DefaultRenderGroupCellTextStyled } from "../../../../slots/DataGridSlot.js";
+import { P as DefaultRenderGroupCellRootStyled, Q as DefaultRenderGroupCellTextStyled } from "../../../../slots/DataGridSlot.js";
 import { u as useDataGrid } from "../../../../hooks/shared/useDataGrid/useDataGrid.js";
 function RenderGroupCell(props) {
   const { groupKey, isExpanded, toggleGroup, column, customRenderGroupCell, ...restProps } = props;

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

@@ -0,0 +1,29 @@
+/**
+ * Componente RHFDaysOfMonthPicker que integra DaysOfMonthPicker con react-hook-form.
+ *
+ * Este componente permite seleccionar días del mes (1-31) en un formulario controlado
+ * por react-hook-form, proporcionando validación automática y manejo de estados.
+ *
+ * ### Características:
+ * - **Integración con RHF**: Se integra automáticamente con react-hook-form mediante el HOC withRHFController
+ * - **Validación**: Soporta validación mediante esquemas de validación (Yup, Zod, etc.)
+ * - **Estados del formulario**: Se deshabilita automáticamente durante el envío del formulario
+ * - **Label y errores**: El HOC maneja automáticamente el Label y los mensajes de error
+ * - **Modo single/multiple**: Permite seleccionar un día único o múltiples días
+ * - **Atajos**: Soporta atajos de selección rápida cuando está en modo multiple
+ * @example
+ * ```tsx
+ * const schema = Yup.object({
+ *   days: Yup.array().min(1, 'Debe seleccionar al menos un día').required('Campo requerido'),
+ * });
+ *
+ * <RHFDaysOfMonthPicker
+ *   name="days"
+ *   label="Días del mes"
+ *   mandatory
+ *   multiple
+ *   disabledDays={[1, 15]} // Deshabilita día 1 y 15
+ * />
+ * ```
+ */
+export declare const RHFDaysOfMonthPicker: import('react').ForwardRefExoticComponent<Omit<import('../../DaysOfMonthPicker').DaysOfMonthPickerProps & import('react').RefAttributes<HTMLDivElement> & import('../../../hocs').BaseRHFProps<import('react-hook-form').FieldValues>, "ref"> & import('react').RefAttributes<any>>;

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

@@ -0,0 +1,6 @@
+import { w as withRHFController } from "../../../hocs/withRHFController/index.js";
+import { D as DaysOfMonthPicker } from "../../DaysOfMonthPicker/DaysOfMonthPicker.js";
+const RHFDaysOfMonthPicker = withRHFController(DaysOfMonthPicker);
+export {
+  RHFDaysOfMonthPicker as R
+};

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

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

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

@@ -0,0 +1 @@
+

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

@@ -9,6 +9,7 @@ export { RHFDateTime } from './RHFDateTime';
 export { RHFDateTimePicker } from './RHFDateTimePicker';
 export { RHFDatePicker } from './RHFDatePicker';
 export * from './RHFDaysOfWeekPicker';
+export * from './RHFDaysOfMonthPicker';
 export { RHFMultiCheckbox } from './RHFMultiCheckbox';
 export { RHFSelect } from './RHFSelect';
 export { RHFHelperError } from './RHFHelperError';

package/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './CommonActions/dictionary';
 export * from './datagrids';
 export * from './DaysOfWeekPicker';
 export * from './DragResizeWindowRND';
+export * from './DaysOfMonthPicker';
 export * from './DynamicFilter';
 export * from './DynamicSort';
 export * from './extended';

package/index.js

@@ -63,14 +63,15 @@ import { D as D2, d, g as g3 } from "./components/CommonActions/dictionary.js";
 import { D as D3 } from "./components/datagrids/components/DataGridMain/DataGridMain.js";
 import { D as D4, g as g4 } from "./components/formatters/DateFormatter/DateFormatter.js";
 import { D as D5 } from "./components/mui_extended/DatePicker/DatePicker.js";
-import { D as D6 } from "./components/DaysOfWeekPicker/DaysOfWeekPicker.js";
-import { D as D7 } from "./components/mui_extended/Dialog/Dialog.js";
-import { D as D8 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
-import { D as D9 } from "./components/mui_extended/Divider/Divider.js";
-import { D as D10 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
-import { D as D11 } from "./components/DynamicFilter/DynamicFilter.js";
-import { D as D12, a as a5, M } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
-import { D as D13 } from "./components/DynamicSort/DynamicSort.js";
+import { D as D6 } from "./components/DaysOfMonthPicker/DaysOfMonthPicker.js";
+import { D as D7 } from "./components/DaysOfWeekPicker/DaysOfWeekPicker.js";
+import { D as D8 } from "./components/mui_extended/Dialog/Dialog.js";
+import { D as D9 } from "./components/formatters/DistanceToNowFormatter/DistanceToNowFormatter.js";
+import { D as D10 } from "./components/mui_extended/Divider/Divider.js";
+import { D as D11 } from "./components/DragResizeWindowRND/DragResizeWindowRND.js";
+import { D as D12 } from "./components/DynamicFilter/DynamicFilter.js";
+import { D as D13, a as a5, M } from "./components/WindowBase/contexts/DynamicMFParmsContext/DynamicMFParmsContext.js";
+import { D as D14 } from "./components/DynamicSort/DynamicSort.js";
 import { F } from "./components/extended/React-Window/FixedSizeList/FixedSizeList.js";
 import { F as F2 } from "./components/FormContainer/FormContainer.js";
 import { F as F3, R, u } from "./components/hook-form/RHFormProvider/RHFormProvider.js";
@@ -132,24 +133,25 @@ import { R as R8 } from "./components/hook-form/RHFColorPicker/RFHColorPicker.js
 import { R as R9 } from "./components/hook-form/RHFDatePicker/RHFDatePicker.js";
 import { R as R10 } from "./components/hook-form/RHFDateTime/RHFDateTime.js";
 import { R as R11 } from "./components/hook-form/RHFDateTimePicker/RHFDateTimePicker.js";
-import { R as R12 } from "./components/hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.js";
-import { R as R13 } from "./components/hook-form/RHFHelperError/index.js";
-import { R as R14 } from "./components/hook-form/RHFMultiCheckbox/index.js";
-import { R as R15 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
-import { R as R16 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
-import { R as R17 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
-import { R as R18 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
-import { R as R19 } from "./components/hook-form/RHFSelect/RHFSelect.js";
-import { R as R20 } from "./components/hook-form/RHFTextField/RHFTextField.js";
-import { R as R21 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
-import { R as R22 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
-import { R as R23 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
-import { R as R24 } from "./components/hook-form/RHFPeriod/constants.js";
-import { R as R25 } from "./components/mui_extended/Radio/Radio.js";
-import { R as R26 } from "./components/extended/React-Json-Viewer/ReactJsonViewer.js";
-import { R as R27 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
-import { R as R28 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
-import { R as R29 } from "./components/GridLayout/subcomponents/Responsive/index.js";
+import { R as R12 } from "./components/hook-form/RHFDaysOfMonthPicker/RHFDaysOfMonthPicker.js";
+import { R as R13 } from "./components/hook-form/RHFDaysOfWeekPicker/RHFDaysOfWeekPicker.js";
+import { R as R14 } from "./components/hook-form/RHFHelperError/index.js";
+import { R as R15 } from "./components/hook-form/RHFMultiCheckbox/index.js";
+import { R as R16 } from "./components/hook-form/RHFNumberInput/RHFNumberInput.js";
+import { R as R17 } from "./components/hook-form/RHFPeriod/RHFPeriod.js";
+import { R as R18 } from "./components/hook-form/RHFPeriod/slots/RHFPeriodEnum.js";
+import { R as R19 } from "./components/hook-form/RHFRadioGroup/RHFRadioGroup.js";
+import { R as R20 } from "./components/hook-form/RHFSelect/RHFSelect.js";
+import { R as R21 } from "./components/hook-form/RHFTextField/RHFTextField.js";
+import { R as R22 } from "./components/hook-form/RHFTextFieldPassword/RHFTextFieldPassword.js";
+import { R as R23 } from "./components/hook-form/RHFUpload/RHFUploadImage/RHFUploadImage.js";
+import { R as R24 } from "./components/hook-form/RHFUpload/RHFUploadSingleFile/RHFUploadSingleFile.js";
+import { R as R25 } from "./components/hook-form/RHFPeriod/constants.js";
+import { R as R26 } from "./components/mui_extended/Radio/Radio.js";
+import { R as R27 } from "./components/extended/React-Json-Viewer/ReactJsonViewer.js";
+import { R as R28 } from "./components/extended/React-Resizable/Resizable/Resizable.js";
+import { R as R29 } from "./components/extended/React-Resizable/ResizableBox/ResizableBox.js";
+import { R as R30 } from "./components/GridLayout/subcomponents/Responsive/index.js";
 import { S as S2 } from "./hooks/useSvgColor/constants.js";
 import { S as S3 } from "./components/ScrollBar/ScrollBar.js";
 import { S as S4 } from "./components/commercial/SectionCommercial/index.js";
@@ -356,15 +358,16 @@ export {
   D3 as DataGrid,
   D4 as DateFormatter,
   D5 as DatePicker,
-  D6 as DaysOfWeekPicker,
-  D7 as Dialog,
-  D8 as DistanceToNowFormatter,
-  D9 as Divider,
-  D10 as DragResizeWindowRND,
-  D11 as DynamicFilter,
-  D12 as DynamicMFParmsContext,
+  D6 as DaysOfMonthPicker,
+  D7 as DaysOfWeekPicker,
+  D8 as Dialog,
+  D9 as DistanceToNowFormatter,
+  D10 as Divider,
+  D11 as DragResizeWindowRND,
+  D12 as DynamicFilter,
+  D13 as DynamicMFParmsContext,
   a5 as DynamicMFParmsProvider,
-  D13 as DynamicSort,
+  D14 as DynamicSort,
   F as FixedSizeList,
   F2 as FormContainer,
   F3 as FormProviderCustom,
@@ -432,26 +435,27 @@ export {
   R9 as RHFDatePicker,
   R10 as RHFDateTime,
   R11 as RHFDateTimePicker,
-  R12 as RHFDaysOfWeekPicker,
-  R13 as RHFHelperError,
-  R14 as RHFMultiCheckbox,
-  R15 as RHFNumberInput,
-  R16 as RHFPeriod,
+  R12 as RHFDaysOfMonthPicker,
+  R13 as RHFDaysOfWeekPicker,
+  R14 as RHFHelperError,
+  R15 as RHFMultiCheckbox,
+  R16 as RHFNumberInput,
+  R17 as RHFPeriod,
   R2 as RHFPeriodRootStyled,
-  R17 as RHFPeriodSlots,
-  R18 as RHFRadioGroup,
-  R19 as RHFSelect,
-  R20 as RHFTextField,
-  R21 as RHFTextFieldPassword,
-  R22 as RHFUploadImage,
-  R23 as RHFUploadSingleFile,
-  R24 as RHF_PERIOD_KEY_COMPONENT,
+  R18 as RHFPeriodSlots,
+  R19 as RHFRadioGroup,
+  R20 as RHFSelect,
+  R21 as RHFTextField,
+  R22 as RHFTextFieldPassword,
+  R23 as RHFUploadImage,
+  R24 as RHFUploadSingleFile,
+  R25 as RHF_PERIOD_KEY_COMPONENT,
   R as RHFormProvider,
-  R25 as Radio,
-  R26 as ReactJsonViewer,
-  R27 as Resizable,
-  R28 as ResizableBox,
-  R29 as Responsive,
+  R26 as Radio,
+  R27 as ReactJsonViewer,
+  R28 as Resizable,
+  R29 as ResizableBox,
+  R30 as Responsive,
   S2 as SKELETON_SVG_ICON,
   S3 as ScrollBar,
   S4 as SectionCommercial,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.23",
+  "version": "9.4.25",
   "license": "UNLICENSED",
   "description": "M4L Components",
   "lint-staged": {