@m4l/components 9.4.20 → 9.4.22-BE20260204-1

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 { D as DaysOfMonthPickerRootStyled, a as DaysOfMonthPickerDaysStyled, S as SkeletonDayStyled } from "./slots/DaysOfMonthPickerSlots.js";
+import { D 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 { g 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_CLASSES as D,
+  DAYS_OF_MONTH_PICKER_KEY_COMPONENT 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 { D as DAYS_OF_MONTH_PICKER_CLASSES } from "../../constants.js";
+import { b 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 { a 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 {
+  DaysOfMonthPickerRootStyled as D,
+  SkeletonDayStyled as S,
+  DaysOfMonthPickerDaysStyled as a,
+  DayButtonStyled 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 @@
+