@m4l/components 9.4.18 → 9.4.19

package/@types/types.d.ts

@@ -331,6 +331,7 @@ import {
   ImageFormatterOwnerState,
   ImageFormatterSlotsType,
 } from '../components/formatters/ImageFormatter';
+import { DaysOfWeekPickerOwnerState, DaysOfWeekPickerSlotsType } from '../components/DaysOfWeekPicker/types';
 
 declare module '@mui/material/styles' {
   // Define the slots in the theme
@@ -430,6 +431,7 @@ declare module '@mui/material/styles' {
     M4LRHFDatePicker: RHFDatePickerSlotsType;
     M4LDatePicker: DatePickerSlotsType;
     M4LImageFormatter: ImageFormatterSlotsType;
+    M4LDaysOfWeekPicker: DaysOfWeekPickerSlotsType;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -528,6 +530,7 @@ declare module '@mui/material/styles' {
     M4LDatePicker: Partial<DatePickerOwnerState>;
     M4LRHFDatePicker: Partial<RHFDatePickerOwnerState>;
     M4LImageFormatter: Partial<ImageFormatterOwnerState>;
+    M4LDaysOfWeekPicker: Partial<DaysOfWeekPickerOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -999,21 +1002,26 @@ declare module '@mui/material/styles' {
       defaultProps?: ComponentsPropsList['M4LCheckableList'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LCheckableList'];
       variants?: ComponentsVariants['M4LCheckableList'];
-      M4LRHFDatePicker?: {
-        defaultProps?: ComponentsPropsList['M4LRHFDatePicker'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LRHFDatePicker'];
-        variants?: ComponentsVariants['M4LRHFDatePicker'];
-      };
-      M4LDatePicker?: {
-        defaultProps?: ComponentsPropsList['M4LDatePicker'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LDatePicker'];
-        variants?: ComponentsVariants['M4LDatePicker'];
-      };
-      M4LImageFormatter?: {
-        defaultProps?: ComponentsPropsList['M4LImageFormatter'];
-        styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
-        variants?: ComponentsVariants['M4LImageFormatter'];
-      };
     };
-  }
+    M4LRHFDatePicker?: {
+      defaultProps?: ComponentsPropsList['M4LRHFDatePicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LRHFDatePicker'];
+      variants?: ComponentsVariants['M4LRHFDatePicker'];
+    };
+    M4LDatePicker?: {
+      defaultProps?: ComponentsPropsList['M4LDatePicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDatePicker'];
+      variants?: ComponentsVariants['M4LDatePicker'];
+    };
+    M4LImageFormatter?: {
+      defaultProps?: ComponentsPropsList['M4LImageFormatter'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LImageFormatter'];
+      variants?: ComponentsVariants['M4LImageFormatter'];
+    };
+    M4LDaysOfWeekPicker?: {
+      defaultProps?: ComponentsPropsList['M4LDaysOfWeekPicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LDaysOfWeekPicker'];
+      variants?: ComponentsVariants['M4LDaysOfWeekPicker'];
+    };
+  };
 }

package/components/DaysOfWeekPicker/DaysOfWeekPicker.d.ts

@@ -0,0 +1,33 @@
+import { DaysOfWeekPickerProps } from './types';
+/**
+ * Componente para seleccionar días de la semana.
+ *
+ * Permite seleccionar uno o múltiples días de la semana mediante botones interactivos.
+ * El componente es controlado y requiere la prop `value` para funcionar.
+ *
+ * ### Características:
+ * - **Selección múltiple**: Por defecto permite seleccionar múltiples días
+ * - **Modo controlado**: Requiere la prop `value` para controlar el estado
+ * - **Días deshabilitados**: Permite deshabilitar días específicos mediante `disabledDays`
+ * - **Solo lectura**: Permite mostrar el componente en modo solo lectura con `readOnly`
+ * - **Tamaños**: Soporta tamaños small, medium y large
+ * @param {DaysOfWeekPickerProps} props - Propiedades del componente.
+ * @returns {JSX.Element} Elemento renderizado.
+ * @example
+ * ```tsx
+ * const [selectedDays, setSelectedDays] = useState<DayOfWeek[]>([0, 1, 2]);
+ *
+ * <DaysOfWeekPicker
+ *   value={selectedDays}
+ *   onChange={setSelectedDays}
+ *   disabledDays={[6]} // Deshabilita domingo
+ * />
+ *
+ * // Modo solo lectura
+ * <DaysOfWeekPicker
+ *   value={selectedDays}
+ *   readOnly={true} // No permite interacción, los botones disabled se ven igual que enabled
+ * />
+ * ```
+ */
+export declare const DaysOfWeekPicker: import('react').ForwardRefExoticComponent<DaysOfWeekPickerProps & import('react').RefAttributes<HTMLDivElement>>;

package/components/DaysOfWeekPicker/DaysOfWeekPicker.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { D as DAYS_OF_WEEK_PICKER_CLASSES } from "./constants.js";
+import { u as useDaysOfWeekPicker } from "./hooks/useDaysOfWeekPicker.js";
+import { D as DaysOfWeekPickerSkeletonStyled, a as DaysOfWeekPickerRootStyled, b as DayButtonStyled } from "./slots/DaysOfWeekPickerSlots.js";
+const DaysOfWeekPicker = forwardRef(
+  (props, ref) => {
+    const {
+      value,
+      onChange,
+      disabledDays = [],
+      disabled = false,
+      readOnly = false,
+      size,
+      className,
+      multiple = true
+    } = props;
+    const {
+      currentSize,
+      isSkeleton,
+      daysOfWeek,
+      handleDayClick,
+      isDaySelected,
+      isDayDisabled,
+      ownerState
+    } = useDaysOfWeekPicker({
+      value,
+      onChange,
+      disabledDays,
+      disabled,
+      readOnly,
+      size,
+      multiple
+    });
+    if (isSkeleton) {
+      return /* @__PURE__ */ jsx(
+        DaysOfWeekPickerSkeletonStyled,
+        {
+          ownerState,
+          ...process.env.NODE_ENV !== "production" ? { "data-testid": `SkeletonDaysOfWeekPicker` } : {}
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      DaysOfWeekPickerRootStyled,
+      {
+        ownerState,
+        className: clsx(className, DAYS_OF_WEEK_PICKER_CLASSES.root),
+        ref,
+        children: daysOfWeek.map((day) => {
+          const isSelected = isDaySelected(day.value);
+          const isDisabled = isDayDisabled(day.value);
+          const dayOwnerState = {
+            ...ownerState,
+            selected: isSelected,
+            day: day.value,
+            readOnly
+          };
+          return /* @__PURE__ */ jsx(
+            DayButtonStyled,
+            {
+              ownerState: dayOwnerState,
+              onClick: readOnly ? void 0 : () => handleDayClick(day.value),
+              disabled: isDisabled && !readOnly,
+              size: currentSize,
+              label: day.label,
+              className: DAYS_OF_WEEK_PICKER_CLASSES.dayButton,
+              ...process.env.NODE_ENV !== "production" ? { "data-testid": `day-${day.value}` } : {}
+            },
+            day.value
+          );
+        })
+      }
+    );
+  }
+);
+DaysOfWeekPicker.displayName = "DaysOfWeekPicker";
+export {
+  DaysOfWeekPicker as D
+};

package/components/DaysOfWeekPicker/DaysOfWeekPicker.styles.d.ts

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

package/components/DaysOfWeekPicker/DaysOfWeekPicker.styles.js

@@ -0,0 +1,99 @@
+import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
+const daysOfWeekPickerStyles = {
+  /**
+   * Estilos para el elemento raíz del componente.
+   */
+  root: ({ theme, ownerState }) => {
+    const state = ownerState;
+    return {
+      display: "flex",
+      alignItems: "center",
+      gap: 0,
+      backgroundColor: theme.vars.palette.background.default,
+      borderRadius: theme.vars.size.borderRadius.r2,
+      border: theme.vars.size.borderStroke.container,
+      borderColor: theme.vars.palette.border.secondary,
+      overflow: "hidden",
+      width: "fit-content",
+      ...state?.disabled && !state?.readOnly && {
+        pointerEvents: "none"
+      },
+      ...state?.readOnly && {
+        pointerEvents: "none",
+        cursor: "default"
+      }
+    };
+  },
+  /**
+   * Estilos para cada botón de día.
+   */
+  dayButton: ({ theme, ownerState }) => {
+    const state = ownerState;
+    const isSelected = state?.selected;
+    const isDisabled = state?.disabled || false;
+    const isReadOnly = state?.readOnly || false;
+    const isFirst = state?.day === 0;
+    const isLast = state?.day === 6;
+    return {
+      "&&&": {
+        minWidth: "auto",
+        padding: theme.vars.size.baseSpacings.sp1,
+        borderRadius: 0,
+        border: "none",
+        // Todos los botones tienen borderRight con color border.secondary (excepto el último)
+        borderRight: isLast ? "none" : `${theme.vars.size.borderStroke.container}!important`,
+        borderColor: `${theme.vars.palette.border.secondary}!important`,
+        // Solo cambia el backgroundColor según el estado de selección
+        backgroundColor: isSelected ? theme.vars.palette.primary.enabledOpacity : theme.vars.palette.background.paper,
+        "& .MuiTypography-root": {
+          ...isDisabled && {
+            color: theme.vars.palette.text.disabled
+          },
+          color: isSelected ? theme.vars.palette.primary.semanticText : theme.vars.palette.default.semanticText
+        },
+        ...getSizeStyles(theme, state?.size || "medium", "base"),
+        ...isFirst && {
+          borderTopLeftRadius: theme.vars.size.borderRadius["r1-5"],
+          borderBottomLeftRadius: theme.vars.size.borderRadius["r1-5"]
+        },
+        ...isLast && {
+          borderTopRightRadius: theme.vars.size.borderRadius["r1-5"],
+          borderBottomRightRadius: theme.vars.size.borderRadius["r1-5"]
+        },
+        ...!isDisabled && !isReadOnly && {
+          "&:hover": {
+            backgroundColor: isSelected ? theme.vars.palette.primary.hoverOpacity : theme.vars.palette.default.hoverOpacity
+          },
+          "&:active": {
+            backgroundColor: isSelected ? theme.vars.palette.primary.activeOpacity : theme.vars.palette.default.activeOpacity
+          }
+          /*  '&:focus-visible': {
+            outline: `${theme.vars.size.borderStroke.container} ${theme.vars.palette.primary.main}`,
+            outlineOffset: -1,
+          }, */
+        },
+        ...isDisabled && !isReadOnly && {
+          cursor: "not-allowed",
+          opacity: 0.5
+        },
+        ...isReadOnly && {
+          cursor: "default",
+          pointerEvents: "none"
+        }
+      }
+    };
+  },
+  /**
+   * Estilos para el skeleton del componente.
+   */
+  skeleton: ({ theme, ownerState }) => ({
+    borderRadius: theme.vars.size.borderRadius.r2,
+    ...getSizeStyles(theme, ownerState?.size || "medium", "base", (size) => ({
+      width: "234px!important",
+      height: `${size}!important`
+    }))
+  })
+};
+export {
+  daysOfWeekPickerStyles as d
+};

package/components/DaysOfWeekPicker/DaysOfWeekPicker.test.d.ts

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

package/components/DaysOfWeekPicker/constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Clave de identificación del componente DaysOfWeekPicker dentro del sistema.
+ *
+ * Esta constante se utiliza como identificador único para asociar y personalizar estilos
+ * y configuraciones relacionadas con el componente dentro del sistema de temas y estilos.
+ * @default 'M4LDaysOfWeekPicker'
+ */
+export declare const DAYS_OF_WEEK_PICKER_KEY_COMPONENT = "M4LDaysOfWeekPicker";
+/**
+ * Inventario de clases CSS para el componente DaysOfWeekPicker
+ */
+export declare const DAYS_OF_WEEK_PICKER_CLASSES: Record<"skeleton" | "root" | "dayButton", string>;

package/components/DaysOfWeekPicker/constants.js

@@ -0,0 +1,11 @@
+import { g as getComponentClasses } from "../../utils/getComponentSlotRoot.js";
+import { D as DaysOfWeekPickerSlots } from "./slots/DaysOfWeekPickerEnum.js";
+const DAYS_OF_WEEK_PICKER_KEY_COMPONENT = "M4LDaysOfWeekPicker";
+const DAYS_OF_WEEK_PICKER_CLASSES = getComponentClasses(
+  DAYS_OF_WEEK_PICKER_KEY_COMPONENT,
+  DaysOfWeekPickerSlots
+);
+export {
+  DAYS_OF_WEEK_PICKER_CLASSES as D,
+  DAYS_OF_WEEK_PICKER_KEY_COMPONENT as a
+};

package/components/DaysOfWeekPicker/dictionary.d.ts

@@ -0,0 +1 @@
+export declare function getDaysOfWeekPickerDictionary(): string[];

package/components/DaysOfWeekPicker/dictionary.js

@@ -0,0 +1,6 @@
+function getDaysOfWeekPickerDictionary() {
+  return ["days_of_week_picker"];
+}
+export {
+  getDaysOfWeekPickerDictionary as g
+};

package/components/DaysOfWeekPicker/helpers/getDaysOfWeekFromDictionary.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Genera un array de días de la semana con sus etiquetas obtenidas del sistema de diccionario.
+ *
+ * Esta función utiliza la función `getLabel` proporcionada para obtener las etiquetas
+ * traducidas de cada día de la semana desde el diccionario del módulo.
+ * @param getLabel - Función para obtener las etiquetas del diccionario del módulo.
+ * @returns Array de días de la semana con sus valores numéricos (0-6) y etiquetas traducidas.
+ *          - 0: Lunes (Monday)
+ *          - 1: Martes (Tuesday)
+ *          - 2: Miércoles (Wednesday)
+ *          - 3: Jueves (Thursday)
+ *          - 4: Viernes (Friday)
+ *          - 5: Sábado (Saturday)
+ *          - 6: Domingo (Sunday)
+ * @example
+ * ```tsx
+ * const { getLabel } = useModuleDictionary();
+ * const days = getDaysOfWeekFromDictionary(getLabel);
+ * // Resultado: [
+ * //   { value: 0, label: 'Lun' },
+ * //   { value: 1, label: 'Mar' },
+ * //   ...
+ * // ]
+ * ```
+ */
+export declare const getDaysOfWeekFromDictionary: (getLabel: (key: string) => string) => Array<{
+    value: number;
+    label: string;
+}>;

package/components/DaysOfWeekPicker/helpers/getDaysOfWeekFromDictionary.js

@@ -0,0 +1,12 @@
+const getDaysOfWeekFromDictionary = (getLabel) => [
+  { value: 0, label: getLabel("days_of_week_picker.mon") },
+  { value: 1, label: getLabel("days_of_week_picker.tu") },
+  { value: 2, label: getLabel("days_of_week_picker.we") },
+  { value: 3, label: getLabel("days_of_week_picker.th") },
+  { value: 4, label: getLabel("days_of_week_picker.fr") },
+  { value: 5, label: getLabel("days_of_week_picker.sa") },
+  { value: 6, label: getLabel("days_of_week_picker.su") }
+];
+export {
+  getDaysOfWeekFromDictionary as g
+};

package/components/DaysOfWeekPicker/helpers/getDaysOfWeekFromDictionary.test.d.ts

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

package/components/DaysOfWeekPicker/helpers/index.d.ts

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

package/components/DaysOfWeekPicker/helpers/index.js

@@ -0,0 +1 @@
+

package/components/DaysOfWeekPicker/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useDaysOfWeekPicker } from './useDaysOfWeekPicker';
+export type { UseDaysOfWeekPickerParams, UseDaysOfWeekPickerReturn } from './types';

package/components/DaysOfWeekPicker/hooks/types.d.ts

@@ -0,0 +1,29 @@
+import { useComponentSize } from '../../../hooks/useComponentSize';
+import { DayOfWeek, DaysOfWeekPickerProps, DaysOfWeekPickerOwnerState } from '../types';
+/**
+ * Parámetros del hook useDaysOfWeekPicker.
+ */
+export interface UseDaysOfWeekPickerParams {
+    value: DayOfWeek[];
+    onChange?: (value: DayOfWeek[]) => void;
+    disabledDays?: DayOfWeek[];
+    disabled?: boolean;
+    readOnly?: boolean;
+    size?: DaysOfWeekPickerProps['size'];
+    multiple?: boolean;
+}
+/**
+ * Retorno del hook useDaysOfWeekPicker.
+ */
+export interface UseDaysOfWeekPickerReturn {
+    currentSize: ReturnType<typeof useComponentSize>['currentSize'];
+    isSkeleton: boolean;
+    daysOfWeek: Array<{
+        value: number;
+        label: string;
+    }>;
+    handleDayClick: (day: DayOfWeek) => void;
+    isDaySelected: (day: DayOfWeek) => boolean;
+    isDayDisabled: (day: DayOfWeek) => boolean;
+    ownerState: DaysOfWeekPickerOwnerState;
+}

package/components/DaysOfWeekPicker/hooks/useDaysOfWeekPicker.d.ts

@@ -0,0 +1,9 @@
+import { UseDaysOfWeekPickerParams, UseDaysOfWeekPickerReturn } from './types';
+/**
+ * Hook personalizado que encapsula la lógica del componente DaysOfWeekPicker.
+ *
+ * Maneja la lógica de selección de días, validaciones, estados y callbacks.
+ * @param params - Parámetros del hook
+ * @returns Objeto con toda la lógica necesaria para el componente
+ */
+export declare const useDaysOfWeekPicker: (params: UseDaysOfWeekPickerParams) => UseDaysOfWeekPickerReturn;

package/components/DaysOfWeekPicker/hooks/useDaysOfWeekPicker.js

@@ -0,0 +1,71 @@
+import { useModuleSkeleton, useModuleDictionary } from "@m4l/core";
+import { useMemo, useCallback } from "react";
+import { u as useComponentSize } from "../../../hooks/useComponentSize/useComponentSize.js";
+import { g as getDaysOfWeekFromDictionary } from "../helpers/getDaysOfWeekFromDictionary.js";
+const useDaysOfWeekPicker = (params) => {
+  const {
+    value,
+    onChange,
+    disabledDays = [],
+    disabled = false,
+    readOnly = false,
+    size,
+    multiple = true
+  } = params;
+  const { currentSize } = useComponentSize(size);
+  const isSkeleton = useModuleSkeleton();
+  const { getLabel } = useModuleDictionary();
+  const daysOfWeek = useMemo(() => getDaysOfWeekFromDictionary(getLabel), [getLabel]);
+  const handleDayToggleClick = useCallback(
+    (day) => {
+      if (readOnly || disabled || disabledDays.includes(day)) {
+        return;
+      }
+      const isSelected = value.includes(day);
+      let newValue;
+      if (multiple) {
+        if (isSelected) {
+          newValue = value.filter((d) => d !== day);
+        } else {
+          newValue = [...value, day].sort((a, b) => a - b);
+        }
+      } else {
+        newValue = isSelected ? [] : [day];
+      }
+      onChange?.(newValue);
+    },
+    [readOnly, disabled, disabledDays, value, multiple, onChange]
+  );
+  const isDaySelected = useCallback(
+    (day) => {
+      return value.includes(day);
+    },
+    [value]
+  );
+  const isDayDisabled = useCallback(
+    (day) => {
+      return disabled || disabledDays.includes(day);
+    },
+    [disabled, disabledDays]
+  );
+  const ownerState = useMemo(
+    () => ({
+      size: currentSize,
+      disabled,
+      readOnly
+    }),
+    [currentSize, disabled, readOnly]
+  );
+  return {
+    currentSize,
+    isSkeleton,
+    daysOfWeek,
+    handleDayClick: handleDayToggleClick,
+    isDaySelected,
+    isDayDisabled,
+    ownerState
+  };
+};
+export {
+  useDaysOfWeekPicker as u
+};

package/components/DaysOfWeekPicker/hooks/useDaysOfWeekPicker.test.d.ts

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

package/components/DaysOfWeekPicker/index.d.ts

@@ -0,0 +1,3 @@
+export { DaysOfWeekPicker } from './DaysOfWeekPicker';
+export { getDaysOfWeekPickerDictionary } from './dictionary';
+export type { DaysOfWeekPickerProps, DayOfWeek } from './types';

package/components/DaysOfWeekPicker/index.js

@@ -0,0 +1 @@
+

package/components/DaysOfWeekPicker/slots/DaysOfWeekPickerEnum.d.ts

@@ -0,0 +1,5 @@
+export declare enum DaysOfWeekPickerSlots {
+    root = "root",
+    dayButton = "dayButton",
+    skeleton = "skeleton"
+}

package/components/DaysOfWeekPicker/slots/DaysOfWeekPickerEnum.js

@@ -0,0 +1,9 @@
+var DaysOfWeekPickerSlots = /* @__PURE__ */ ((DaysOfWeekPickerSlots2) => {
+  DaysOfWeekPickerSlots2["root"] = "root";
+  DaysOfWeekPickerSlots2["dayButton"] = "dayButton";
+  DaysOfWeekPickerSlots2["skeleton"] = "skeleton";
+  return DaysOfWeekPickerSlots2;
+})(DaysOfWeekPickerSlots || {});
+export {
+  DaysOfWeekPickerSlots as D
+};

package/components/DaysOfWeekPicker/slots/DaysOfWeekPickerSlots.d.ts

@@ -0,0 +1,9 @@
+export declare const DaysOfWeekPickerRootStyled: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material/styles').Theme> & Record<string, unknown> & {
+    ownerState?: (Partial<import('../types').DaysOfWeekPickerOwnerState> & Record<string, unknown>) | undefined;
+}, 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> & {
+    ownerState?: (Partial<import('../types').DaysOfWeekPickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;
+export declare const DaysOfWeekPickerSkeletonStyled: 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> & {
+    ownerState?: (Partial<import('../types').DaysOfWeekPickerOwnerState> & Record<string, unknown>) | undefined;
+}, {}, {}>;

package/components/DaysOfWeekPicker/slots/DaysOfWeekPickerSlots.js

@@ -0,0 +1,23 @@
+import { styled } from "@mui/material/styles";
+import { D as DaysOfWeekPickerSlots } from "./DaysOfWeekPickerEnum.js";
+import { d as daysOfWeekPickerStyles } from "../DaysOfWeekPicker.styles.js";
+import { a as DAYS_OF_WEEK_PICKER_KEY_COMPONENT } from "../constants.js";
+import { S as Skeleton } from "../../mui_extended/Skeleton/Skeleton.js";
+import { B as Button } from "../../mui_extended/Button/Button.js";
+const DaysOfWeekPickerRootStyled = styled("div", {
+  name: DAYS_OF_WEEK_PICKER_KEY_COMPONENT,
+  slot: DaysOfWeekPickerSlots.root
+})(daysOfWeekPickerStyles?.root);
+const DayButtonStyled = styled(Button, {
+  name: DAYS_OF_WEEK_PICKER_KEY_COMPONENT,
+  slot: DaysOfWeekPickerSlots.dayButton
+})(daysOfWeekPickerStyles?.dayButton);
+const DaysOfWeekPickerSkeletonStyled = styled(Skeleton, {
+  name: DAYS_OF_WEEK_PICKER_KEY_COMPONENT,
+  slot: DaysOfWeekPickerSlots.skeleton
+})(daysOfWeekPickerStyles?.skeleton);
+export {
+  DaysOfWeekPickerSkeletonStyled as D,
+  DaysOfWeekPickerRootStyled as a,
+  DayButtonStyled as b
+};

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

@@ -0,0 +1,3 @@
+export * from './DaysOfWeekPickerSlots';
+export * from './DaysOfWeekPickerEnum';
+export { DaysOfWeekPickerSlots } from './DaysOfWeekPickerEnum';

package/components/DaysOfWeekPicker/slots/index.js

@@ -0,0 +1 @@
+

package/components/DaysOfWeekPicker/types.d.ts

@@ -0,0 +1,70 @@
+import { Sizes } from '@m4l/styles';
+import { Theme } from '@mui/material/styles';
+import { ReactNode } from 'react';
+import { DAYS_OF_WEEK_PICKER_KEY_COMPONENT } from './constants';
+import { DaysOfWeekPickerSlots } from './slots';
+import { M4LOverridesStyleRules } from '../../@types/augmentations';
+/**
+ * Días de la semana disponibles.
+ */
+export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+/**
+ * Propiedades del componente `DaysOfWeekPicker`.
+ */
+export interface DaysOfWeekPickerProps {
+    /**
+     * Valor controlado del componente. Array de días seleccionados (0 = Lunes, 6 = Domingo).
+     */
+    value: DayOfWeek[];
+    /**
+     * Callback que se ejecuta cuando cambia la selección de días.
+     * @param value - Array de días seleccionados.
+     */
+    onChange?: (value: DayOfWeek[]) => void;
+    /**
+     * Array de días que deben estar deshabilitados.
+     * Cada valor representa un día de la semana (0 = Lunes, 6 = Domingo).
+     */
+    disabledDays?: DayOfWeek[];
+    /**
+     * Si es true, deshabilita todo el componente.
+     */
+    disabled?: boolean;
+    /**
+     * Si es true, el componente es de solo lectura y no permite interacción.
+     * Los botones deshabilitados se muestran con el mismo estilo que los habilitados.
+     */
+    readOnly?: boolean;
+    /**
+     * Tamaño del componente.
+     */
+    size?: Extract<Sizes, 'small' | 'medium'>;
+    /**
+     * Clase CSS adicional.
+     */
+    className?: string;
+    /**
+     * Si es true, permite selección múltiple. Por defecto es true.
+     */
+    multiple?: boolean;
+    /**
+     * Contenido adicional del componente.
+     */
+    children?: ReactNode;
+}
+/**
+ * Owner state del componente usado para definir propiedades internas de estilo y comportamiento.
+ */
+export interface DaysOfWeekPickerOwnerState extends Pick<DaysOfWeekPickerProps, 'size' | 'disabled' | 'readOnly'> {
+    selected?: boolean;
+    day?: DayOfWeek;
+    [key: string]: unknown;
+}
+/**
+ * Define los tipos de Slots disponibles para el componente.
+ */
+export type DaysOfWeekPickerSlotsType = keyof typeof DaysOfWeekPickerSlots;
+/**
+ * Estilos aplicables al componente usando temas y slots personalizados.
+ */
+export type DaysOfWeekPickerStyles = M4LOverridesStyleRules<DaysOfWeekPickerSlotsType, typeof DAYS_OF_WEEK_PICKER_KEY_COMPONENT, Theme>;