@m4l/components 9.81.0 → 9.82.0

package/@types/types.d.ts

@@ -1,3 +1,4 @@
+import type { HoursOfWeekPickerOwnerState, HoursOfWeekPickerSlotsType } from '../components/HoursOfWeekPicker/types';
 import { ComponentsOverrides, ComponentsVariants } from '@mui/material/styles';
 import {
   RHFTextFieldSlotsType,
@@ -508,6 +509,7 @@ declare module '@mui/material/styles' {
     M4LDatePicker: DatePickerSlotsType;
     M4LDateRangeCalendarPicker: DateRangeCalendarPickerSlotsType;
     M4LImageFormatter: ImageFormatterSlotsType;
+    M4LHoursOfWeekPicker: HoursOfWeekPickerSlotsType;
     M4LDaysOfWeekPicker: DaysOfWeekPickerSlotsType;
     M4LDaysOfMonthPicker: DaysOfMonthPickerSlotsType;
     M4LDateRangeCalendarPicker: DateRangeCalendarPickerSlotsType;
@@ -627,6 +629,7 @@ declare module '@mui/material/styles' {
     M4LRHFDatePicker: Partial<RHFDatePickerOwnerState>;
     M4LDateRangeCalendarPicker: Partial<DateRangeCalendarPickerOwnerState>;
     M4LImageFormatter: Partial<ImageFormatterOwnerState>;
+    M4LHoursOfWeekPicker: Partial<HoursOfWeekPickerOwnerState>;
     M4LDaysOfWeekPicker: Partial<DaysOfWeekPickerOwnerState>;
     M4LDaysOfMonthPicker: Partial<DaysOfMonthPickerOwnerState>;
     M4LDateRangeCalendarPicker: Partial<DateRangeCalendarPickerOwnerState>;
@@ -1174,6 +1177,11 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LDaysOfMonthPicker'];
       variants?: ComponentsVariants['M4LDaysOfMonthPicker'];
     };
+    M4LHoursOfWeekPicker?: {
+      defaultProps?: ComponentsPropsList['M4LHoursOfWeekPicker'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LHoursOfWeekPicker'];
+      variants?: ComponentsVariants['M4LHoursOfWeekPicker'];
+    };
     M4LDaysOfWeekPicker?: {
       defaultProps?: ComponentsPropsList['M4LDaysOfWeekPicker'];
       styleOverrides?: ComponentsOverrides<Theme>['M4LDaysOfWeekPicker'];

package/components/HoursOfWeekPicker/HoursOfWeekPicker.d.ts

@@ -0,0 +1,4 @@
+import { HoursOfWeekPickerProps } from './types';
+/** Edit recurring local weekly availability with pointer transactions and an accessible keyboard grid. */
+export declare const HoursOfWeekPicker: import('react').ForwardRefExoticComponent<HoursOfWeekPickerProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=HoursOfWeekPicker.d.ts.map

package/components/HoursOfWeekPicker/HoursOfWeekPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoursOfWeekPicker.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/HoursOfWeekPicker/HoursOfWeekPicker.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAkD,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtG,0GAA0G;AAC1G,eAAO,MAAM,iBAAiB,mHA0G5B,CAAC"}

package/components/HoursOfWeekPicker/HoursOfWeekPicker.js

@@ -0,0 +1,144 @@
+import { jsx as t, jsxs as s, Fragment as pe } from "@emotion/react/jsx-runtime";
+import fe from "clsx";
+import { forwardRef as he, useMemo as O } from "react";
+import _e from "@mui/material/useMediaQuery";
+import { useTheme as be } from "@mui/material/styles";
+import { Typography as y, Tooltip as ye } from "@m4l/base";
+import { useModuleSkeleton as ke, useModuleDictionary as Se } from "@m4l/core";
+import { useComponentSize as ge } from "../../hooks/useComponentSize/index.js";
+import { HOURS_OF_WEEK_DEFAULT_SLOT_MINUTES as Oe, HOURS_OF_WEEK_DEFAULT_PRESENTATION as ve, HOURS_OF_WEEK_DAY_KEYS as G, HOURS_OF_WEEK_CARD_SLOT_OPTIONS as we, HOURS_OF_WEEK_PICKER_CLASSES as i, HOURS_OF_WEEK_DAYS as Ne, HOURS_OF_WEEK_COPY_DAYS as Ee } from "./constants.js";
+import { useHoursOfWeekPresentation as He } from "./hooks/useHoursOfWeekPresentation/useHoursOfWeekPresentation.js";
+import { useHoursOfWeekDayPeriods as Ce } from "./hooks/useHoursOfWeekDayPeriods/useHoursOfWeekDayPeriods.js";
+import { HoursOfWeekCards as Te } from "./subcomponents/HoursOfWeekCards/HoursOfWeekCards.js";
+import { HoursOfWeekRow as xe } from "./subcomponents/HoursOfWeekRow/HoursOfWeekRow.js";
+import { HoursOfWeekPeriods as V } from "./subcomponents/HoursOfWeekPeriods/HoursOfWeekPeriods.js";
+import { HoursOfWeekSummary as ze } from "./subcomponents/HoursOfWeekSummary/HoursOfWeekSummary.js";
+import { HoursOfWeekLegend as Re } from "./subcomponents/HoursOfWeekLegend/HoursOfWeekLegend.js";
+import { HoursOfWeekSkeleton as We } from "./subcomponents/HoursOfWeekSkeleton/HoursOfWeekSkeleton.js";
+import { useHoursOfWeekPicker as Pe } from "./hooks/useHoursOfWeekPicker/useHoursOfWeekPicker.js";
+import { getTotals as Fe } from "./helpers/getTotals/getTotals.js";
+import { matrixToValue as Q } from "./helpers/matrixToValue/matrixToValue.js";
+import { getCellState as q } from "./helpers/getCellState/getCellState.js";
+import { Label as Ae } from "../Label/Label.js";
+import { formatDuration as g } from "./helpers/formatDuration/formatDuration.js";
+import { valueToMatrix as X } from "./helpers/valueToMatrix/valueToMatrix.js";
+import { copyDay as De } from "./helpers/copyDay/copyDay.js";
+import { Alert as Me } from "../Alert/Alert.js";
+import { toggleHour as Le } from "./helpers/toggleHour/toggleHour.js";
+import { toggleDay as Ue } from "./helpers/toggleDay/toggleDay.js";
+import { Root as $e, Header as Ke, Status as Z, Interval as Be, SlotSelector as Ie, SlotButton as Ye, Actions as ee, Notice as Je, Viewport as je, Grid as te, Axis as Ge, RowTotal as A, Track as Ve, TooltipTarget as Qe, AxisHour as qe, GridBody as Xe, Footer as Ze, Totals as et, LegendItem as tt } from "./slots/HoursOfWeekPickerSlots.js";
+import { Chip as ot } from "../Chip/Chip.js";
+import { Button as v } from "../extended/mui/Button/Button.js";
+const Ft = he(function(p, z) {
+  const { slotMinutes: w = Oe, slotMinutesOptions: D = [], onSlotMinutesChange: M, presets: oe = [], showSummary: ae = !1, showDayPeriods: N = !0, disabled: d = !1, readOnly: f = !1, error: L = !1, id: U, className: $, onBlur: re } = p, R = !d && !f, le = ke(), K = p.skeleton || le, { currentSize: l } = ge(p.size), { getLabel: n } = Se(), h = He(), ie = be(), se = _e(ie.breakpoints.down("sm")), B = p.presentation ?? ve, m = B === "cards" || B === "auto" && se, k = Ce(N && !m, p.dayPeriodsDate, p.dayPeriodsLocation), E = Pe({ ...p, skeleton: K || m }), { matrix: u, columns: H, startUnit: _, endUnit: C, unitsPerSlot: b, drag: c, hover: ne, focused: I, changeMatrix: T } = E, x = (C - _) / 4, o = O(() => ({ size: l, disabled: d, readOnly: f, error: L, columns: H, unitsPerSlot: b, hours: x, cards: m, dayPeriods: N, periods: k?.periods }), [l, d, f, L, H, b, x, m, N, k]), a = (e) => n(`hours_of_week_picker.${e}`), Y = O(() => ({ full: n("hours_of_week_picker.selected"), partial: n("hours_of_week_picker.partial"), empty: n("hours_of_week_picker.empty") }), [n]), J = O(() => G.map((e) => n(`hours_of_week_picker.${e}`)), [n]), j = [...new Set(D.length === 0 && M ? we : D)], W = O(() => Fe(u), [u]), ce = O(() => Q(u), [u]), de = u.some((e) => Array.from({ length: H }, (r, ue) => q(e, _ + ue * b, b)).includes("partial")), P = c?.end ?? ne, S = P && P.slot < H ? P : null, me = S ? `${J[S.day]}, ${h(_ + S.slot * b)}–${h(_ + (S.slot + 1) * b)}, ${c ? a(c.selected ? "adding" : "removing") : Y[q(u[S.day], _ + S.slot * b, b)]}` : "", F = (e) => {
+    p.onChange?.(Q(e));
+  };
+  return K ? /* @__PURE__ */ t(We, { inputRef: z, label: a("loading"), ownerState: o, className: $ }) : /* @__PURE__ */ s($e, { ownerState: o, className: fe($, i.root), onBlur: (e) => {
+    e.currentTarget.contains(e.relatedTarget) || re?.(e);
+  }, children: [
+    /* @__PURE__ */ s(Ke, { ownerState: o, className: i.header, children: [
+      /* @__PURE__ */ t(Ae, { label: a("title"), helperMessage: m ? void 0 : a("instructions"), size: l, disabled: d }),
+      /* @__PURE__ */ t(y, { variant: "bodySlim", size: l, color: "text.secondary", children: a(m ? "cards_description" : "description") }),
+      !m && /* @__PURE__ */ t(Z, { role: "status", "aria-live": "polite", ownerState: o, className: i.status, children: me })
+    ] }),
+    R && j.length >= 2 && /* @__PURE__ */ s(Be, { ownerState: o, children: [
+      /* @__PURE__ */ t(y, { variant: "captionStandard", size: l, color: "text.secondary", children: a("interval") }),
+      /* @__PURE__ */ t(Ie, { role: "group", "aria-label": a("interval"), className: i.slotSelector, children: j.map((e) => /* @__PURE__ */ t(Ye, { type: "button", "aria-label": g(e, n), "aria-pressed": w === e, disabled: d || f, ownerState: o, className: i.slotButton, onClick: () => M?.(e), children: /* @__PURE__ */ t(ot, { size: l, variant: "contained", opacity: !0, color: w === e ? "info" : "default", label: /* @__PURE__ */ t(y, { component: "span", fontFamily: "Jura", variant: "captionStandard", size: l, color: "inherit", children: g(e, n) }) }) }, e)) })
+    ] }),
+    R && !m && /* @__PURE__ */ s(ee, { ownerState: o, className: i.actions, children: [
+      /* @__PURE__ */ t(y, { variant: "captionStandard", size: l, color: "text.secondary", children: a("shortcuts") }),
+      oe.map((e, r) => /* @__PURE__ */ t(v, { label: e.label, size: l, variant: "contained", color: "default", disabled: d || f, onClick: () => T(X(e.value)) }, `${e.label}-${r}`)),
+      /* @__PURE__ */ t(v, { label: a("copy_monday"), size: l, variant: "contained", color: "default", disabled: d || f, onClick: () => T(De(u, 0, Ee)) })
+    ] }),
+    !m && de && /* @__PURE__ */ t(Je, { className: i.notice, children: /* @__PURE__ */ t(Me, { severity: "info", size: l, label: a("partial_notice") }) }),
+    m ? /* @__PURE__ */ s(pe, { children: [
+      /* @__PURE__ */ s(Z, { role: "status", ownerState: o, className: i.status, children: [
+        a("interval_hint"),
+        " ",
+        g(w, n)
+      ] }),
+      /* @__PURE__ */ t(Te, { ...p, ownerState: o, inputRef: z, id: U, formatHour: h })
+    ] }) : /* @__PURE__ */ t(je, { ownerState: o, className: i.viewport, children: /* @__PURE__ */ s(te, { ownerState: o, children: [
+      k && /* @__PURE__ */ t(V, { startUnit: _, endUnit: C, ownerState: o, formatHour: h, periods: k.periods }),
+      /* @__PURE__ */ s(Ge, { ownerState: o, className: i.axis, children: [
+        /* @__PURE__ */ t(A, { ownerState: o }),
+        /* @__PURE__ */ t(Ve, { ownerState: { ...o, columns: x }, className: i.track, children: Array.from({ length: x }, (e, r) => _ / 4 + r).map((e, r) => /* @__PURE__ */ t(ye, { title: h(e * 4), size: l, describeChild: !0, children: /* @__PURE__ */ t(Qe, { ownerState: o, children: /* @__PURE__ */ t(qe, { type: "button", "aria-label": h(e * 4), ownerState: o, className: i.axisHour, disabled: d || f, onClick: () => T(Le(u, e)), children: /* @__PURE__ */ t(y, { component: "span", fontFamily: "Jura", variant: "bodyStandard", size: l, color: "text.secondary", children: w === 60 ? h(e * 4).replace(":00", "") : r % 3 === 0 ? h(e * 4) : "" }) }) }) }, e)) }),
+        /* @__PURE__ */ t(A, { ownerState: o, children: a("total") })
+      ] }),
+      /* @__PURE__ */ s(Xe, { ownerState: o, children: [
+        k && /* @__PURE__ */ t(V, { startUnit: _, endUnit: C, ownerState: o, formatHour: h, periods: k.periods, background: !0 }),
+        /* @__PURE__ */ t(
+          te,
+          {
+            ref: E.gridRef,
+            role: "grid",
+            "aria-label": p["aria-label"] ?? a("label"),
+            "aria-labelledby": p["aria-labelledby"],
+            "aria-multiselectable": "true",
+            "aria-readonly": f,
+            "aria-disabled": d,
+            ownerState: o,
+            className: i.grid,
+            ...E.handlers,
+            onFocus: (e) => {
+              const r = e.target.closest("[data-hours-cell]");
+              r && E.setFocus({ day: Number(r.dataset.day), slot: Number(r.dataset.slot) });
+            },
+            onClick: (e) => {
+              const r = e.target.closest("[data-day-action]");
+              r && T(Ue(u, Number(r.dataset.dayAction), _, C));
+            },
+            children: Ne.map((e) => {
+              const r = c && e >= Math.min(c.start.day, c.end.day) && e <= Math.max(c.start.day, c.end.day);
+              return /* @__PURE__ */ t(
+                xe,
+                {
+                  day: e,
+                  label: J[e],
+                  shortLabel: a(`${G[e]}_short`),
+                  formatHour: h,
+                  showDayPeriods: N,
+                  values: u[e],
+                  startUnit: _,
+                  unitsPerSlot: b,
+                  ownerState: o,
+                  focusedSlot: I.day === e ? I.slot : -1,
+                  previewStart: r ? Math.min(c.start.slot, c.end.slot) : -1,
+                  previewEnd: r ? Math.max(c.start.slot, c.end.slot) : -1,
+                  previewSelected: !!(r && c.selected),
+                  labels: Y,
+                  firstCellId: U,
+                  firstCellRef: z
+                },
+                e
+              );
+            })
+          }
+        )
+      ] })
+    ] }) }),
+    !m && /* @__PURE__ */ t(Re, { ownerState: o }),
+    !m && ae && /* @__PURE__ */ t(ze, { ownerState: o, ranges: ce, formatHour: h }),
+    /* @__PURE__ */ s(Ze, { ownerState: o, children: [
+      /* @__PURE__ */ s(et, { ownerState: o, children: [
+        /* @__PURE__ */ s(tt, { ownerState: o, "aria-label": `${a("week_total")}: ${g(W.week, n)}`, "data-testid": "hours-week-total", children: [
+          /* @__PURE__ */ t(y, { component: "span", fontFamily: "Jura", variant: "captionDens", size: l, children: g(W.week, n) }),
+          /* @__PURE__ */ t(y, { component: "span", variant: "captionDens", size: l, children: a("selected_total") })
+        ] }),
+        /* @__PURE__ */ s(A, { ownerState: o, className: i.rowTotal, "data-testid": "hours-holiday-total", children: [
+          a("holidays_total"),
+          ": ",
+          g(W.holidays, n)
+        ] })
+      ] }),
+      R && /* @__PURE__ */ s(ee, { ownerState: o, className: i.actions, children: [
+        /* @__PURE__ */ t(v, { label: a("invert"), size: l, variant: "text", color: "default", disabled: d || f, onClick: () => F(u.map((e) => e.map((r) => !r))) }),
+        /* @__PURE__ */ t(v, { label: a("select_all"), size: l, variant: "text", color: "primary", disabled: d || f, onClick: () => F(u.map((e) => e.map(() => !0))) }),
+        /* @__PURE__ */ t(v, { label: a("clear"), size: l, variant: "text", color: "error", disabled: d || f, onClick: () => F(X([])) })
+      ] })
+    ] })
+  ] });
+});
+export {
+  Ft as HoursOfWeekPicker
+};

package/components/HoursOfWeekPicker/HoursOfWeekPicker.styles.d.ts

@@ -0,0 +1,3 @@
+import { HoursOfWeekPickerStyles } from './types';
+export declare const hoursOfWeekPickerStyles: HoursOfWeekPickerStyles;
+//# sourceMappingURL=HoursOfWeekPicker.styles.d.ts.map

package/components/HoursOfWeekPicker/HoursOfWeekPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoursOfWeekPicker.styles.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/HoursOfWeekPicker/HoursOfWeekPicker.styles.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAA+B,MAAM,SAAS,CAAC;AAEpF,eAAO,MAAM,uBAAuB,EAAE,uBAmRrC,CAAC"}

package/components/HoursOfWeekPicker/HoursOfWeekPicker.styles.js

@@ -0,0 +1,317 @@
+import { HOURS_OF_WEEK_HOLIDAY_DAY as c } from "./constants.js";
+import { getSizeStyles as l } from "../../utils/getSizeStyles/getSizeStyles.js";
+import { getTypographyStyles as n } from "../../utils/getTypographyStyles.js";
+const y = {
+  /**
+   * Keep the paper surface borderless in every state; RHF owns validation helpers.
+   * Reserve the wider totals column without reducing the minimum time-track width.
+   * Mantener la superficie paper sin borde en todos los estados; RHF controla la ayuda de validación.
+   * Reservar la columna de totales más ancha sin reducir el mínimo de la pista horaria.
+   */
+  root: ({ theme: a, ownerState: s }) => ({
+    display: "flex",
+    flexDirection: "column",
+    minWidth: s?.cards ? 0 : `calc(${a.breakpoints.values.md}px + ${a.vars.size.baseSpacings.sp8})`,
+    boxSizing: "border-box",
+    gap: a.vars.size.baseSpacings.sp4,
+    padding: s?.cards ? a.vars.size.baseSpacings.sp4 : a.vars.size.baseSpacings.sp6,
+    border: 0,
+    borderRadius: a.vars.size.borderRadius.r3,
+    // The supplied sh1 design variable has no theme equivalent; preserve its exact fallback color.
+    // La variable sh1 suministrada no tiene equivalente en el tema; conservar su color fallback exacto.
+    boxShadow: "0 4px 16px 1px var(--customShadowsColors-sh1, rgba(146, 156, 171, 0.08))",
+    backgroundColor: a.vars.palette.background.paper,
+    color: a.vars.palette.text.primary,
+    ...n(a.generalSettings.isMobile, s.size, "bodySlim"),
+    ...s?.disabled && { pointerEvents: "none" }
+  }),
+  /**
+   * Separate the title/help from precision controls and keep its Label on captionDens.
+   * Separar título/ayuda de los intervalos y aplicar captionDens al Label del título.
+   */
+  header: ({ theme: a, ownerState: s }) => ({ display: "flex", flexDirection: "column", gap: a.vars.size.baseSpacings.sp2, minWidth: 0, "& .M4LLabel-root.M4LTypography-root": n(a.generalSettings.isMobile, s.size, "captionDens") }),
+  /** Let precision controls wrap independently of the horizontal time viewport. */
+  interval: ({ theme: a, ownerState: s }) => ({ display: "flex", alignItems: "center", flexWrap: "wrap", gap: a.vars.size.baseSpacings.sp2, ...l(a, s.size, "action", (r) => ({ minHeight: r, height: "auto" })) }),
+  /** Group shared chips without introducing a second selector surface. */
+  slotSelector: ({ theme: a }) => ({ display: "flex", alignItems: "center", gap: a.vars.size.baseSpacings.sp1 }),
+  /**
+   * Retain native button semantics and size interval chips with the action token on both surfaces.
+   * Conservar la semántica de botón y dimensionar los chips de intervalo con el token action en ambas vistas.
+   */
+  slotButton: ({ theme: a, ownerState: s }) => ({
+    display: "flex",
+    alignItems: "center",
+    border: 0,
+    padding: 0,
+    cursor: "pointer",
+    background: "transparent",
+    borderRadius: a.vars.size.borderRadius["r1-5"],
+    "& > .M4LChip-root": l(a, s.size, "action", (r) => ({ height: r, minHeight: r, boxSizing: "border-box" })),
+    "&:focus-visible": { outline: a.vars.size.borderStroke.container, outlineColor: a.vars.palette.primary.focusVisible },
+    "&:disabled": { cursor: "default", opacity: a.vars.palette.action.disabledOpacity }
+  }),
+  /**
+   * Space caller presets and standard actions, keeping their labels on bodyDens over the Typography primitive.
+   * Separar presets y acciones, aplicando bodyDens a sus etiquetas sobre la primitiva Typography.
+   */
+  actions: ({ theme: a, ownerState: s }) => ({ display: "flex", alignItems: "center", flexWrap: "wrap", gap: a.vars.size.baseSpacings.sp1, "& .M4LButton-textButton.M4LTypography-root": n(a.generalSettings.isMobile, s.size, "bodyDens") }),
+  /** Keep the partial-selection explanation within the editor width. */
+  notice: () => ({ minWidth: 0 }),
+  /** Reserve one grid hover line, even when empty, without clipping the mobile interval hint. */
+  status: ({ theme: a, ownerState: s }) => ({ color: a.vars.palette.text.secondary, minWidth: 0, ...n(a.generalSettings.isMobile, s.size, "captionSlim"), ...!s?.cards && { height: "1lh", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" } }),
+  /**
+   * Anchor shared tooltips without changing column widths, including disabled readonly buttons.
+   * Anclar tooltips compartidos sin cambiar anchos, incluidos los botones desactivados en solo lectura.
+   */
+  tooltipTarget: ({ ownerState: a }) => ({ display: "flex", minWidth: 0, "& > button": { width: "100%", ...(a?.disabled || a?.readOnly) && { pointerEvents: "none" } } }),
+  /** Align hour headings with the time track and its side labels. */
+  axis: ({ theme: a }) => ({ display: "grid", gridTemplateColumns: `${a.vars.size.baseSpacings["sp7-5"]} minmax(0, 1fr) calc(${a.vars.size.baseSpacings.sp14} + ${a.vars.size.baseSpacings.sp8})`, columnGap: a.vars.size.baseSpacings.sp1, alignItems: "center" }),
+  /** Keep every hour actionable while showing sparse labels for subdivided tracks. */
+  axisHour: ({ theme: a, ownerState: s }) => ({
+    minWidth: 0,
+    border: 0,
+    padding: 0,
+    textAlign: "left",
+    whiteSpace: "nowrap",
+    background: "transparent",
+    color: a.vars.palette.text.secondary,
+    cursor: s?.readOnly ? "default" : "pointer",
+    minHeight: a.vars.size.baseSpacings.sp4,
+    "&:focus-visible": { outline: a.vars.size.borderStroke.container, outlineColor: a.vars.palette.primary.focusVisible }
+  }),
+  /** Align weekday labels, the editable track, and whole-day totals. */
+  row: ({ theme: a, ownerState: s }) => ({ display: "grid", gridTemplateColumns: `${a.vars.size.baseSpacings["sp7-5"]} minmax(0, 1fr) calc(${a.vars.size.baseSpacings.sp14} + ${a.vars.size.baseSpacings.sp8})`, columnGap: a.vars.size.baseSpacings.sp1, alignItems: "center", ...s?.day === c && { marginBlockStart: a.vars.size.baseSpacings.sp3 } }),
+  /** Present abbreviated row actions while accessible names retain the complete day. */
+  dayButton: ({ theme: a, ownerState: s }) => ({
+    minWidth: 0,
+    padding: 0,
+    border: 0,
+    textAlign: "left",
+    background: "transparent",
+    color: a.vars.palette.text.secondary,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    cursor: s?.readOnly ? "default" : "pointer",
+    ...l(a, s.size, "action"),
+    ...n(a.generalSettings.isMobile, s.size, "bodyStandard"),
+    "&:focus-visible": { outline: a.vars.size.borderStroke.container, outlineColor: a.vars.palette.primary.focusVisible }
+  }),
+  /**
+   * Share the remaining width after cell margins so hourly separators never shrink the last subdivision.
+   * Keep hour headings on the same full-width track while retaining visual grouping by hour.
+   * Repartir el ancho restante tras los márgenes evita que el separador horario estreche la última subdivisión.
+   * Mantener los encabezados sobre el mismo ancho de pista y conservar la agrupación visual por hora.
+   */
+  track: () => ({ display: "flex", minWidth: 0, "& > *": { flex: "1 1 0%" } }),
+  /**
+   * Use error/primary selection tokens and stronger light fills; lift dark neutrals above the soft tints and retain a distinct focus ring.
+   * Usar selección error/primary y vacíos light con más contraste; aclarar neutros dark sobre los tintes y conservar un foco distinguible.
+   */
+  cell: ({ theme: a, ownerState: s }) => {
+    const r = s?.cellState, i = s?.readOnly, e = s?.disabled, o = s?.error ? "error" : "primary", p = e ? a.vars.palette.background.default : i ? a.vars.palette.primary.activeOpacity : a.vars.palette[o].focus, g = a.vars.palette[i && !e ? "primary" : o].selectedOpacity, b = e ? a.vars.palette[o].main : i ? a.vars.palette.primary.focus : p, d = s?.boundary === "hour" ? a.vars.size.borderRadius.r1 : a.vars.size.borderRadius.r0, t = s?.hourEnd ? a.vars.size.borderRadius.r1 : a.vars.size.borderRadius.r0;
+    return {
+      boxSizing: "border-box",
+      minWidth: 0,
+      cursor: i ? "default" : "crosshair",
+      ...l(a, s.size, "action"),
+      border: 0,
+      borderRadius: `${d} ${t} ${t} ${d}`,
+      marginInlineEnd: s?.hourEnd ? a.vars.size.baseSpacings.sp1 : `calc(${a.vars.size.baseSpacings["sp0-5"]} / 2)`,
+      backgroundColor: r === "full" ? p : r === "partial" && (i || e) ? e ? a.vars.palette.background.default : a.vars.palette.background.paper : i || e ? a.vars.palette.background.surface : a.palette.mode === "dark" ? `color-mix(in srgb, ${a.vars.palette.default.enabled} 50%, ${a.vars.palette.default.selected})` : a.vars.palette.default.hover,
+      ...r === "full" && !e && { boxShadow: a.vars.customShadows[i ? "primary" : o] },
+      // Paint the disabled contour inside the cell without changing flex widths between selected and empty rows.
+      // Dibujar el contorno disabled por dentro sin cambiar los anchos flex entre filas seleccionadas y vacías.
+      ...e && r !== "empty" && { outline: a.vars.size.borderStroke.container, outlineStyle: "dashed", outlineColor: a.vars.palette.border.secondary, outlineOffset: `calc(${a.vars.size.baseSpacings["sp0-5"]} / -2)` },
+      ...r === "partial" && { backgroundImage: `repeating-linear-gradient(135deg, ${b} 0 ${a.vars.size.baseSpacings["sp0-5"]}, ${g} ${a.vars.size.baseSpacings["sp0-5"]} ${a.vars.size.baseSpacings["sp1-5"]})` },
+      // Readonly retains saved selection and keyboard focus, but has no editing preview.
+      // Solo lectura conserva selección y foco de teclado, sin previsualización de edición.
+      ...s?.preview && !i && !s?.disabled && {
+        backgroundImage: "none",
+        boxShadow: "none",
+        backgroundColor: s.preview === "add" ? a.vars.palette[o].selectedOpacity : a.vars.palette.default.hover,
+        ...s.preview === "remove" && { outline: a.vars.size.borderStroke.container, outlineStyle: "dashed", outlineColor: a.vars.palette.default.focus, outlineOffset: `calc(${a.vars.size.baseSpacings["sp0-5"]} / -2)` }
+      },
+      ...!i && !s?.disabled && !s?.preview && { "&:hover": { backgroundColor: r === "full" ? a.vars.palette[o].active : a.palette.mode === "dark" ? `color-mix(in srgb, ${a.vars.palette.default.hover} 50%, ${a.vars.palette.default.selected})` : a.vars.palette.default.active } },
+      "&:focus-visible": { position: "relative", zIndex: 1, outline: a.vars.size.borderStroke.container, outlineColor: a.vars.palette.primary.main, outlineOffset: `calc(${a.vars.size.baseSpacings["sp0-5"]} * -1)` }
+    };
+  },
+  /**
+   * Keep complete durations on one line so totals cannot change the row height.
+   * Mantener las duraciones completas en una línea para que los totales no cambien la altura de la fila.
+   */
+  rowTotal: ({ theme: a, ownerState: s }) => ({ textAlign: "right", whiteSpace: "nowrap", color: a.vars.palette.text.secondary, ...n(a.generalSettings.isMobile, s.size, "bodySlim") }),
+  /** Keep the selection legend separate from the scrollable grid. */
+  legend: ({ theme: a }) => ({ display: "flex", alignItems: "center", flexWrap: "wrap", columnGap: a.vars.size.baseSpacings.sp4, rowGap: a.vars.size.baseSpacings.sp1, color: a.vars.palette.text.secondary }),
+  /** Pair each legend swatch with its readable explanation. */
+  legendItem: ({ theme: a }) => ({ display: "flex", alignItems: "center", gap: a.vars.size.baseSpacings.sp2 }),
+  /** Mirror cell states and period semantics without relying on color alone. */
+  swatch: ({ theme: a, ownerState: s }) => {
+    const r = s?.error ? "error" : "primary", i = s?.readOnly || s?.disabled ? a.vars.palette.primary.activeOpacity : a.vars.palette[r].focus, e = a.vars.palette[s?.readOnly && !s?.disabled ? "primary" : r].selectedOpacity, o = s?.disabled ? a.vars.palette[r].main : s?.readOnly ? a.vars.palette.primary.focus : i;
+    return {
+      width: a.vars.size.baseSpacings.sp3,
+      height: a.vars.size.baseSpacings.sp3,
+      flexShrink: 0,
+      borderRadius: a.vars.size.borderRadius.r1,
+      backgroundColor: s?.legendState === "full" ? i : s?.legendState === "partial" && (s?.readOnly || s?.disabled) ? s?.disabled ? a.vars.palette.background.default : a.vars.palette.background.paper : s?.legendState === "preview" ? a.vars.palette[r].selectedOpacity : s?.readOnly || s?.disabled ? a.vars.palette.background.surface : a.palette.mode === "dark" ? `color-mix(in srgb, ${a.vars.palette.default.enabled} 50%, ${a.vars.palette.default.selected})` : a.vars.palette.default.hover,
+      ...s?.legendState === "partial" && { backgroundImage: `repeating-linear-gradient(135deg, ${o} 0 ${a.vars.size.baseSpacings["sp0-5"]}, ${e} ${a.vars.size.baseSpacings["sp0-5"]} ${a.vars.size.baseSpacings["sp1-5"]})` },
+      ...s?.legendState === "full" && (s?.readOnly || s?.disabled) && { boxShadow: a.vars.customShadows.primary },
+      ...s?.disabled && s?.legendState === "partial" && { boxSizing: "border-box", border: a.vars.size.borderStroke.container, borderStyle: "dashed", borderColor: a.vars.palette.border.secondary },
+      ...s?.legendState === "disabled" && { background: "transparent", border: a.vars.size.borderStroke.container, borderStyle: "dashed", borderColor: a.vars.palette.border.secondary },
+      ...s?.period && {
+        backgroundColor: `color-mix(in srgb, ${a.vars.palette[s.period === "daytime" ? "warning" : "info"].focusOpacity} 50%, transparent)`,
+        border: a.vars.size.borderStroke.container,
+        borderColor: s.period === "daytime" ? a.vars.palette.chips.orange.contained.color : a.vars.palette.info.semanticText
+      },
+      ...s?.periodBoundary && { width: a.vars.size.baseSpacings["sp0-5"], backgroundColor: a.vars.palette.warning.semanticText }
+    };
+  },
+  /** Lay out the normalized weekly summary as readable lines. */
+  summary: ({ theme: a }) => ({ display: "flex", flexDirection: "column", gap: a.vars.size.baseSpacings.sp2 }),
+  /** Use two reading columns on desktop and collapse naturally in narrow containers. */
+  summaryDays: ({ theme: a }) => ({ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: a.vars.size.baseSpacings.sp1, columnGap: a.vars.size.baseSpacings.sp6, [a.breakpoints.down("sm")]: { gridTemplateColumns: "minmax(0, 1fr)" } }),
+  /** Give day names a stable column beside wrapping range chips. */
+  summaryDay: ({ theme: a }) => ({ display: "grid", gridTemplateColumns: `calc(${a.vars.size.baseSpacings.sp10} * 2) minmax(0, 1fr)`, alignItems: "center", gap: a.vars.size.baseSpacings.sp1 }),
+  /** Wrap the shared range chips without shrinking their time labels. */
+  summaryRanges: ({ theme: a }) => ({ display: "flex", flexWrap: "wrap", alignItems: "center", gap: a.vars.size.baseSpacings.sp1 }),
+  /** Wrap long daily summaries within the available editor width. */
+  summaryRange: () => ({ overflowWrap: "anywhere" }),
+  /** Keep the loading silhouette inside the same responsive paper surface as the editor.
+   * Mantener la silueta de carga dentro de la misma superficie paper adaptable del editor.
+   */
+  skeleton: () => ({ width: "100%" }),
+  /** Arrange loading sections with the Figma spacing, independently from interactive controls.
+   * Organizar las secciones de carga con el espaciado de Figma, independientemente de los controles.
+   */
+  skeletonGroup: ({ theme: a, ownerState: s }) => ({
+    display: "flex",
+    flexDirection: ["interval", "row", "footer"].includes(String(s?.skeletonGroup)) ? "row" : "column",
+    alignItems: "flex-start",
+    width: "100%",
+    minWidth: 0,
+    gap: s?.skeletonGroup === "content" ? a.vars.size.baseSpacings.sp4 : s?.skeletonGroup === "footer" ? a.vars.size.baseSpacings.sp2 : a.vars.size.baseSpacings.sp1,
+    ...s?.skeletonGroup === "footer" && { justifyContent: "space-between" }
+  }),
+  /** Size shared Skeleton bones with existing spacing/action tokens; the local selector overrides its full-size rounded default.
+   * Dimensionar los bloques compartidos con tokens de espaciado/action; el selector local ajusta el tamaño rounded predeterminado.
+   */
+  skeletonBone: ({ theme: a, ownerState: s }) => {
+    const r = a.vars.size.baseSpacings, i = s.skeletonBone ?? "track", e = {
+      title: { width: `calc(${r.sp10} * 3 + ${r.sp5})`, height: r.sp4 },
+      description: { width: `calc(${r.sp10} * ${s?.cards ? 6 : 9})`, height: r.sp3 },
+      intervalLabel: { width: r.sp14 },
+      intervalHour: { width: r.sp9 },
+      intervalMinute: { width: r.sp13 },
+      dayLabel: { width: r["sp7-5"], height: r["sp3-5"] },
+      track: { flex: 1 },
+      dayCard: { height: r.sp14 },
+      summary: { width: `calc(${r.sp10} * 3 - ${r["sp2-5"]})`, height: r["sp3-5"] },
+      actions: { width: `calc(${r.sp10} * 4 - ${r["sp2-5"]})` }
+    };
+    return { "&.MuiSkeleton-root.M4lclassCssSpecificity": {
+      width: "100%",
+      minWidth: 0,
+      maxWidth: "100%",
+      flexShrink: 1,
+      borderRadius: a.vars.size.borderRadius.r2,
+      ...l(a, s.size, "action"),
+      ...e[i]
+    } };
+  },
+  /** Contain the time viewport while the root owns the fixed resize minimum. */
+  viewport: () => ({ overflow: "auto", maxWidth: "100%" }),
+  /** Share the available width across slots without stretching the grid when precision changes. */
+  grid: ({ theme: a, ownerState: s }) => ({ position: "relative", display: "flex", flexDirection: "column", gap: a.vars.size.baseSpacings.sp1, minWidth: 0, touchAction: s?.readOnly ? "auto" : "none", userSelect: "none" }),
+  /** Keep period tints behind cells and confine the continuous boundary overlays to this grid. */
+  gridBody: () => ({ position: "relative", isolation: "isolate" }),
+  /** Align the three period bands with their clipped time coverage. */
+  periodTrack: ({ theme: a }) => ({ position: "relative", height: a.vars.size.baseSpacings.sp7, marginBlockEnd: a.vars.size.baseSpacings.sp1 }),
+  /** Keep each local-period label and its numeric interval together, truncating the text after a stable icon. */
+  periodBand: ({ theme: a, ownerState: s }) => ({
+    position: "absolute",
+    insetBlock: 0,
+    left: `${s?.startPercent}%`,
+    width: `calc(${s?.widthPercent}% - ${a.vars.size.baseSpacings.sp1})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: a.vars.size.baseSpacings["sp1-5"],
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    paddingInline: a.vars.size.baseSpacings["sp0-5"],
+    borderRadius: a.vars.size.borderRadius.r2,
+    backgroundColor: a.vars.palette[s?.period === "daytime" ? "warning" : "info"].focusOpacity,
+    "& > .M4LIcon-root": { flexShrink: 0 },
+    "& > .M4LTypography-root": { minWidth: 0, flexShrink: 1, "& > .M4LTypography-root": { marginInlineStart: a.vars.size.baseSpacings["sp1-5"] } }
+  }),
+  /** Tint only the time track, preserving row labels and totals on the surface. */
+  periodBackground: ({ theme: a }) => ({ position: "absolute", insetBlock: 0, left: `calc(${a.vars.size.baseSpacings["sp7-5"]} + ${a.vars.size.baseSpacings.sp1})`, right: `calc(${a.vars.size.baseSpacings.sp14} + ${a.vars.size.baseSpacings.sp8} + ${a.vars.size.baseSpacings.sp1})`, overflow: "hidden", pointerEvents: "none", borderRadius: a.vars.size.borderRadius.r2 }),
+  /** Mark the reference date's estimated sunrise and sunset above cells and focus rings without changing selectable hours. */
+  periodTint: ({ theme: a, ownerState: s }) => ({
+    position: "absolute",
+    insetBlock: 0,
+    left: `${s?.startPercent}%`,
+    width: `${s?.widthPercent}%`,
+    backgroundColor: `color-mix(in srgb, ${a.vars.palette[s?.period === "daytime" ? "warning" : "info"].focusOpacity} 50%, transparent)`,
+    ...s?.periodBoundary && {
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        insetBlock: 0,
+        left: 0,
+        transform: "translateX(-50%)",
+        width: a.vars.size.baseSpacings["sp0-5"],
+        backgroundColor: a.vars.palette.warning.semanticText,
+        zIndex: 2
+      }
+    }
+  }),
+  /** Separate whole-schedule actions from the editable body. */
+  footer: ({ theme: a }) => ({ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: a.vars.size.baseSpacings.sp2, borderTop: a.vars.size.borderStroke.container, borderColor: a.vars.palette.border.secondary, paddingTop: a.vars.size.baseSpacings.sp3 }),
+  /** Keep the holiday total distinct from the seven-day weekly duration. */
+  totals: ({ theme: a }) => ({ display: "flex", alignItems: "center", flexWrap: "wrap", gap: a.vars.size.baseSpacings.sp3 }),
+  /** Stack touch-friendly day cards without a horizontal scrolling grid. */
+  cards: ({ theme: a }) => ({ display: "flex", flexDirection: "column", gap: a.vars.size.baseSpacings.sp2, minWidth: 0, outlineColor: a.vars.palette.primary.focusVisible }),
+  /**
+   * Separate Holidays and keep each day on the paper surface with a secondary divider in both disclosure states.
+   * Separar Festivos y mantener cada día sobre paper con un divisor secondary tanto abierto como cerrado.
+   */
+  card: ({ theme: a, ownerState: s }) => ({ borderBottom: a.vars.size.borderStroke.container, borderColor: a.vars.palette.border.secondary, paddingInline: a.vars.size.baseSpacings.sp3, paddingBottom: a.vars.size.baseSpacings.sp3, backgroundColor: a.vars.palette.background.paper, ...s?.day === c && { marginTop: a.vars.size.baseSpacings.sp3 } }),
+  /**
+   * Keep disclosure and availability as separate touch targets, with sp2 before the day overview.
+   * Mantener desplegar y disponibilidad como controles separados, con sp2 antes de la vista diaria.
+   */
+  cardHeader: ({ theme: a }) => ({ display: "flex", alignItems: "center", gap: a.vars.size.baseSpacings.sp1, marginBottom: a.vars.size.baseSpacings.sp2 }),
+  /**
+   * Fill the space beside the switch without Button's width cap or lateral padding; retain its theme-owned interaction states.
+   * Ocupar el espacio junto al switch sin el ancho máximo ni padding lateral de Button; conservar sus estados del tema.
+   */
+  cardToggle: ({ theme: a }) => ({ flex: 1, minWidth: 0, maxWidth: "none", paddingInline: 0, justifyContent: "space-between", gap: a.vars.size.baseSpacings.sp2, "& .M4LButton-textButton": { flex: 1, minWidth: 0, textAlign: "left" } }),
+  /** Show the complete 24-hour schedule without intercepting scrolling gestures. */
+  overview: ({ theme: a }) => ({ position: "relative", height: a.vars.size.baseSpacings.sp1, backgroundColor: a.vars.palette.default.enabled, borderRadius: a.vars.size.borderRadius.r1, overflow: "hidden" }),
+  /** Position each saved range and mirror the grid's readonly fill or disabled outline.
+   * Posicionar cada franja guardada y reflejar el relleno readonly o contorno disabled del grid.
+   */
+  overviewRange: ({ theme: a, ownerState: s }) => ({ position: "absolute", insetBlock: 0, left: `${s?.startPercent}%`, width: `${s?.widthPercent}%`, backgroundColor: s?.disabled ? a.vars.palette.background.default : s?.readOnly ? a.vars.palette.primary.activeOpacity : a.vars.palette[s?.error ? "error" : "primary"].focus, ...s?.disabled && { boxSizing: "border-box", border: a.vars.size.borderStroke.container, borderStyle: "dashed", borderColor: a.vars.palette.border.secondary } }),
+  /** Distribute whole-day markers below the expanded overview. */
+  overviewAxis: ({ theme: a }) => ({ display: "flex", justifyContent: "space-between", color: a.vars.palette.text.secondary, marginBlock: a.vars.size.baseSpacings.sp1 }),
+  /**
+   * Keep range text and touch actions within a narrow phone card, with dense action typography.
+   * Pair the Button and Typography classes so the primitive's specificity class cannot restore the standard weight.
+   * Mantener texto y acciones dentro de la tarjeta móvil, con tipografía densa para las acciones.
+   * Combinar las clases de Button y Typography evita que la especificidad de la primitiva restaure el peso estándar.
+   */
+  rangeRow: ({ theme: a, ownerState: s }) => ({ display: "flex", alignItems: "center", gap: a.vars.size.baseSpacings.sp1, minHeight: a.vars.size.baseSpacings.sp11, borderBottom: a.vars.size.borderStroke.container, borderColor: a.vars.palette.border.disabled, "& > span": { flex: 1, minWidth: 0 }, "& .M4LButton-textButton.M4LTypography-root": n(a.generalSettings.isMobile, s.size, "bodyDens") }),
+  /** Lay out two time controls and wrapping actions without covering other days. */
+  rangeEditor: ({ theme: a }) => ({ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", alignItems: "end", gap: a.vars.size.baseSpacings.sp2, paddingBlock: a.vars.size.baseSpacings.sp2, "& > div:nth-of-type(n + 3)": { gridColumn: "1 / -1" }, '& > [role="alert"]': { color: a.vars.palette.error.main } }),
+  /** Keep the shared label and Select together without overriding the control's design-system styles. */
+  timeLabel: ({ theme: a }) => ({ display: "flex", flexDirection: "column", gap: a.vars.size.baseSpacings.sp1, minWidth: 0 }),
+  /** Wrap explicit copy destinations within the day card. */
+  copyTargets: ({ theme: a }) => ({ display: "flex", flexWrap: "wrap", gap: a.vars.size.baseSpacings.sp2, marginBlock: a.vars.size.baseSpacings.sp2 }),
+  /** Keep destination labels and their checkbox in one touch target. */
+  copyTarget: ({ theme: a }) => ({ display: "flex", alignItems: "center", minHeight: a.vars.size.baseSpacings.sp11, gap: a.vars.size.baseSpacings.sp1, minWidth: "45%" })
+};
+export {
+  y as hoursOfWeekPickerStyles
+};

package/components/HoursOfWeekPicker/constants.d.ts

@@ -0,0 +1,18 @@
+import { HoursOfWeekDay, HoursOfWeekPeriodLocation } from './types';
+export declare const HOURS_OF_WEEK_PICKER_KEY_COMPONENT = "M4LHoursOfWeekPicker";
+export declare const HOURS_OF_WEEK_PICKER_CLASSES: Record<"root" | "grid" | "skeleton" | "footer" | "header" | "legend" | "summary" | "track" | "row" | "cell" | "status" | "actions" | "viewport" | "axis" | "dayButton" | "slotSelector" | "slotButton" | "notice" | "axisHour" | "rowTotal" | "summaryRange" | "cards" | "card" | "cardHeader" | "cardToggle" | "overview" | "overviewRange" | "overviewAxis" | "rangeRow" | "rangeEditor" | "timeLabel" | "copyTargets" | "copyTarget" | "interval" | "gridBody" | "periodTrack" | "periodBand" | "periodBackground" | "periodTint" | "legendItem" | "swatch" | "summaryDays" | "summaryDay" | "summaryRanges" | "totals" | "skeletonGroup" | "skeletonBone" | "tooltipTarget", string>;
+export declare const HOURS_OF_WEEK_DAYS: HoursOfWeekDay[];
+export declare const HOURS_OF_WEEK_DAY_KEYS: readonly ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday", "holidays"];
+export declare const HOURS_OF_WEEK_UNITS = 96;
+export declare const HOURS_OF_WEEK_UNIT_MINUTES = 15;
+export declare const HOURS_OF_WEEK_DEFAULT_SLOT_MINUTES = 30;
+export declare const HOURS_OF_WEEK_DEFAULT_VISIBLE_RANGE: {
+    startHour: number;
+    endHour: number;
+};
+export declare const HOURS_OF_WEEK_COPY_DAYS: HoursOfWeekDay[];
+export declare const HOURS_OF_WEEK_HOLIDAY_DAY = 7;
+export declare const HOURS_OF_WEEK_DEFAULT_PRESENTATION = "auto";
+export declare const HOURS_OF_WEEK_CARD_SLOT_OPTIONS: readonly [60, 30, 15];
+export declare const HOURS_OF_WEEK_DEFAULT_LOCATION: Readonly<HoursOfWeekPeriodLocation>;
+//# sourceMappingURL=constants.d.ts.map

package/components/HoursOfWeekPicker/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/HoursOfWeekPicker/constants.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAGzE,eAAO,MAAM,kCAAkC,yBAAyB,CAAC;AACzE,eAAO,MAAM,4BAA4B,0pBAAkF,CAAC;AAC5H,eAAO,MAAM,kBAAkB,EAAE,cAAc,EAA6B,CAAC;AAC7E,eAAO,MAAM,sBAAsB,qGAAsG,CAAC;AAC1I,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAC7C,eAAO,MAAM,kCAAkC,KAAK,CAAC;AACrD,eAAO,MAAM,mCAAmC;;;CAAgC,CAAC;AACjF,eAAO,MAAM,uBAAuB,EAAE,cAAc,EAAiB,CAAC;AACtE,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAC3C,eAAO,MAAM,kCAAkC,SAAS,CAAC;AACzD,eAAO,MAAM,+BAA+B,uBAAwB,CAAC;AAErE,eAAO,MAAM,8BAA8B,EAAE,QAAQ,CAAC,yBAAyB,CAM9E,CAAC"}

package/components/HoursOfWeekPicker/constants.js

@@ -0,0 +1,24 @@
+import { getComponentClasses as _ } from "../../utils/getComponentSlotRoot.js";
+import { HoursOfWeekPickerSlots as E } from "./slots/HoursOfWeekPickerEnum.js";
+const O = "M4LHoursOfWeekPicker", S = _(O, E), s = [0, 1, 2, 3, 4, 5, 6, 7], e = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday", "holidays"], n = 96, U = 15, a = 30, H = { startHour: 0, endHour: 24 }, R = [1, 2, 3, 4], c = 7, r = "auto", F = [60, 30, 15], K = {
+  latitude: 4.711,
+  longitude: -74.0721,
+  timeZone: "America/Bogota",
+  name: "Bogotá, Colombia",
+  source: "default"
+};
+export {
+  F as HOURS_OF_WEEK_CARD_SLOT_OPTIONS,
+  R as HOURS_OF_WEEK_COPY_DAYS,
+  s as HOURS_OF_WEEK_DAYS,
+  e as HOURS_OF_WEEK_DAY_KEYS,
+  K as HOURS_OF_WEEK_DEFAULT_LOCATION,
+  r as HOURS_OF_WEEK_DEFAULT_PRESENTATION,
+  a as HOURS_OF_WEEK_DEFAULT_SLOT_MINUTES,
+  H as HOURS_OF_WEEK_DEFAULT_VISIBLE_RANGE,
+  c as HOURS_OF_WEEK_HOLIDAY_DAY,
+  S as HOURS_OF_WEEK_PICKER_CLASSES,
+  O as HOURS_OF_WEEK_PICKER_KEY_COMPONENT,
+  n as HOURS_OF_WEEK_UNITS,
+  U as HOURS_OF_WEEK_UNIT_MINUTES
+};

package/components/HoursOfWeekPicker/dictionary.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Declare the dictionary required by the weekly schedule picker.
+ * Declarar el diccionario requerido por el selector de horario semanal.
+ */
+export declare function getHoursOfWeekPickerDictionary(): string[];
+//# sourceMappingURL=dictionary.d.ts.map

package/components/HoursOfWeekPicker/dictionary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dictionary.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/components/HoursOfWeekPicker/dictionary.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,8BAA8B,aAE7C"}

package/components/HoursOfWeekPicker/dictionary.js

@@ -0,0 +1,6 @@
+function e() {
+  return ["hours_of_week_picker"];
+}
+export {
+  e as getHoursOfWeekPickerDictionary
+};

package/components/HoursOfWeekPicker/helpers/applyRectangle/applyRectangle.d.ts

@@ -0,0 +1,4 @@
+import { HoursOfWeekCoordinate, HoursOfWeekMatrix } from '../../types';
+/** Apply a rectangle in either direction while preserving unchanged row references. */
+export declare function applyRectangle(matrix: HoursOfWeekMatrix, start: HoursOfWeekCoordinate, end: HoursOfWeekCoordinate, unitsPerSlot: number, startUnit: number, selected: boolean): HoursOfWeekMatrix;
+//# sourceMappingURL=applyRectangle.d.ts.map

package/components/HoursOfWeekPicker/helpers/applyRectangle/applyRectangle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyRectangle.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/HoursOfWeekPicker/helpers/applyRectangle/applyRectangle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC5E,uFAAuF;AACvF,wBAAgB,cAAc,CAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,qBAAqB,EAAE,GAAG,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,iBAAiB,CAWjM"}

package/components/HoursOfWeekPicker/helpers/applyRectangle/applyRectangle.js

@@ -0,0 +1,12 @@
+function M(m, t, a, l, i, o) {
+  const h = Math.min(t.day, a.day), p = Math.max(t.day, a.day), s = i + Math.min(t.slot, a.slot) * l, c = i + (Math.max(t.slot, a.slot) + 1) * l;
+  return m.map((n, y) => {
+    if (y < h || y > p || n.slice(s, c).every((x) => x === o))
+      return n;
+    const f = [...n];
+    return f.fill(o, s, c), f;
+  });
+}
+export {
+  M as applyRectangle
+};

package/components/HoursOfWeekPicker/helpers/copyDay/copyDay.d.ts

@@ -0,0 +1,4 @@
+import { HoursOfWeekDay, HoursOfWeekMatrix } from '../../types';
+/** Replace target days with the full source day, including hours outside the viewport. */
+export declare function copyDay(matrix: HoursOfWeekMatrix, source: HoursOfWeekDay, targets: readonly HoursOfWeekDay[]): HoursOfWeekMatrix;
+//# sourceMappingURL=copyDay.d.ts.map