@studiolxd/brand 49.8.1 → 49.10.0

package/dist/calendar-planner.css

@@ -1 +1 @@
-.calendar-planner{gap:var(--calendar-planner-gap);font-family:var(--calendar-planner-font-family);flex-direction:column;width:100%;display:flex}.calendar-planner__header{justify-content:space-between;align-items:center;gap:var(--calendar-planner-items-gap);display:flex}.calendar-planner__title{text-align:center;font-family:var(--calendar-planner-font-family);font-size:var(--calendar-planner-title-font-size);font-weight:var(--calendar-planner-title-font-weight);color:var(--calendar-planner-title-color);flex:1;margin-block:0}.calendar-planner__nav{padding-block:var(--calendar-planner-items-gap);padding-inline:var(--calendar-planner-items-gap);border-radius:var(--calendar-planner-nav-radius);color:var(--calendar-planner-nav-color);cursor:pointer;transition-property:box-shadow;transition-duration:var(--calendar-planner-transition-duration);transition-timing-function:var(--calendar-planner-transition-easing);background-color:#0000;border:none;justify-content:center;align-items:center;display:inline-flex}.calendar-planner__nav:hover{box-shadow:inset 0 calc(-1 * var(--calendar-planner-hover-line-width)) 0 0 var(--calendar-planner-hover-line-color)}.calendar-planner__nav:focus-visible{outline:var(--calendar-planner-nav-focus-ring-width) solid var(--calendar-planner-nav-focus-ring-color);outline-offset:var(--calendar-planner-nav-focus-ring-offset)}.calendar-planner__chevron--prev{transform:rotate(180deg)}.calendar-planner__grid{border-block-start:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);border-inline-start:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);grid-template-columns:1fr;display:grid}.calendar-planner__row{grid-template-columns:repeat(7,1fr);display:grid}.calendar-planner__weekday abbr{cursor:inherit;text-decoration:none}.calendar-planner__weekday{padding-block:var(--calendar-planner-weekday-padding-block);padding-inline:var(--calendar-planner-cell-padding-inline);font-size:var(--calendar-planner-weekday-font-size);font-weight:var(--calendar-planner-weekday-font-weight);color:var(--calendar-planner-weekday-color);text-align:center;border-block-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);border-inline-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);font-family:var(--calendar-planner-font-family)}.calendar-planner__cell{gap:var(--calendar-planner-items-gap);min-height:var(--calendar-planner-cell-min-height);min-width:0;padding-block:var(--calendar-planner-cell-padding-block);padding-inline:var(--calendar-planner-cell-padding-inline);background-color:var(--calendar-planner-cell-bg);border-block-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);border-inline-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);flex-direction:column;display:flex;overflow:hidden}.calendar-planner__cell.calendar-planner__cell--outside{background-color:var(--calendar-planner-cell-outside-bg)}.calendar-planner__cell.calendar-planner__cell--clickable{cursor:pointer}.calendar-planner__cell.calendar-planner__cell--clickable:hover{box-shadow:inset 0 calc(-1 * var(--calendar-planner-hover-line-width)) 0 0 var(--calendar-planner-hover-line-color)}.calendar-planner__cell.calendar-planner__cell--clickable:focus-visible{outline:var(--calendar-planner-cell-focus-ring-width) solid var(--calendar-planner-cell-focus-ring-color);outline-offset:var(--calendar-planner-cell-focus-ring-offset)}.calendar-planner__day-number{width:var(--calendar-planner-day-number-size);height:var(--calendar-planner-day-number-size);border-radius:var(--calendar-planner-day-number-radius);font-size:var(--calendar-planner-day-number-font-size);font-weight:var(--calendar-planner-day-number-font-weight);color:var(--calendar-planner-day-number-color);font-family:var(--calendar-planner-font-family);flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;display:inline-flex}.calendar-planner__day-number.calendar-planner__day-number--outside{color:var(--calendar-planner-day-number-outside-color)}.calendar-planner__day-number.calendar-planner__day-number--today{background-color:var(--calendar-planner-cell-today-number-bg);color:var(--calendar-planner-cell-today-number-color)}.calendar-planner__cell-body{gap:var(--calendar-planner-items-gap);flex-direction:column;min-width:0;display:flex;overflow:hidden}.calendar-planner__cell-body .tag{text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden}.calendar-planner__more{font-family:var(--calendar-planner-font-family);font-size:var(--calendar-planner-more-font-size);color:var(--calendar-planner-more-color);cursor:pointer;text-align:start;transition-property:color;transition-duration:var(--calendar-planner-transition-duration);transition-timing-function:var(--calendar-planner-transition-easing);background:0 0;border:none;padding-block:0;padding-inline:0;display:inline-block}.calendar-planner__more:hover{color:var(--calendar-planner-more-hover-color)}.calendar-planner__more:focus-visible{outline:var(--calendar-planner-nav-focus-ring-width) solid var(--calendar-planner-more-focus-ring-color);outline-offset:var(--calendar-planner-nav-focus-ring-offset)}.calendar-planner.calendar-planner--sm .calendar-planner__cell{min-height:var(--calendar-planner-sm-cell-min-height)}.calendar-planner.calendar-planner--lg .calendar-planner__cell{min-height:var(--calendar-planner-lg-cell-min-height)}.calendar-planner__modal-events{gap:var(--calendar-planner-items-gap);flex-direction:column;display:flex}
+.calendar-planner{gap:var(--calendar-planner-gap);font-family:var(--calendar-planner-font-family);flex-direction:column;width:100%;display:flex}.calendar-planner__header{justify-content:space-between;align-items:center;gap:var(--calendar-planner-items-gap);display:flex}.calendar-planner__title{text-align:center;font-family:var(--calendar-planner-font-family);font-size:var(--calendar-planner-title-font-size);font-weight:var(--calendar-planner-title-font-weight);color:var(--calendar-planner-title-color);flex:1;margin-block:0}.calendar-planner__nav{padding-block:var(--calendar-planner-items-gap);padding-inline:var(--calendar-planner-items-gap);border-radius:var(--calendar-planner-nav-radius);color:var(--calendar-planner-nav-color);cursor:pointer;transition-property:box-shadow;transition-duration:var(--calendar-planner-transition-duration);transition-timing-function:var(--calendar-planner-transition-easing);background-color:#0000;border:none;justify-content:center;align-items:center;display:inline-flex}.calendar-planner__nav:hover{box-shadow:inset 0 calc(-1 * var(--calendar-planner-hover-line-width)) 0 0 var(--calendar-planner-hover-line-color)}.calendar-planner__nav:focus-visible{outline:var(--calendar-planner-nav-focus-ring-width) solid var(--calendar-planner-nav-focus-ring-color);outline-offset:var(--calendar-planner-nav-focus-ring-offset)}.calendar-planner__chevron--prev{transform:rotate(180deg)}.calendar-planner__grid{border-block-start:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);border-inline-start:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);grid-template-columns:1fr;display:grid}.calendar-planner__row{grid-template-columns:repeat(7,1fr);display:grid}.calendar-planner__weekday abbr{cursor:inherit;text-decoration:none}.calendar-planner__weekday{padding-block:var(--calendar-planner-weekday-padding-block);padding-inline:var(--calendar-planner-cell-padding-inline);font-size:var(--calendar-planner-weekday-font-size);font-weight:var(--calendar-planner-weekday-font-weight);color:var(--calendar-planner-weekday-color);text-align:center;border-block-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);border-inline-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);font-family:var(--calendar-planner-font-family)}.calendar-planner__cell{gap:var(--calendar-planner-items-gap);min-height:var(--calendar-planner-cell-min-height);min-width:0;padding-block:var(--calendar-planner-cell-padding-block);padding-inline:var(--calendar-planner-cell-padding-inline);background-color:var(--calendar-planner-cell-bg);border-block-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);border-inline-end:var(--calendar-planner-grid-border-width) solid var(--calendar-planner-grid-border-color);flex-direction:column;display:flex;overflow:hidden}.calendar-planner__cell.calendar-planner__cell--outside{background-color:var(--calendar-planner-cell-outside-bg)}.calendar-planner__cell.calendar-planner__cell--clickable{cursor:pointer}.calendar-planner__cell.calendar-planner__cell--clickable:hover{box-shadow:inset 0 calc(-1 * var(--calendar-planner-hover-line-width)) 0 0 var(--calendar-planner-hover-line-color)}.calendar-planner__cell.calendar-planner__cell--clickable:focus-visible{outline:var(--calendar-planner-cell-focus-ring-width) solid var(--calendar-planner-cell-focus-ring-color);outline-offset:var(--calendar-planner-cell-focus-ring-offset)}.calendar-planner__day-number{width:var(--calendar-planner-day-number-size);height:var(--calendar-planner-day-number-size);border-radius:var(--calendar-planner-day-number-radius);font-size:var(--calendar-planner-day-number-font-size);font-weight:var(--calendar-planner-day-number-font-weight);color:var(--calendar-planner-day-number-color);font-family:var(--calendar-planner-font-family);flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;display:inline-flex}.calendar-planner__day-number.calendar-planner__day-number--outside{color:var(--calendar-planner-day-number-outside-color)}.calendar-planner__day-number.calendar-planner__day-number--today{background-color:var(--calendar-planner-cell-today-number-bg);color:var(--calendar-planner-cell-today-number-color)}.calendar-planner__cell-body{gap:var(--calendar-planner-items-gap);flex-direction:column;min-width:0;display:flex;overflow:hidden}.calendar-planner__cell-body .tag{text-overflow:ellipsis;max-width:100%;display:block;overflow:hidden}.calendar-planner__more{font-family:var(--calendar-planner-font-family);font-size:var(--calendar-planner-more-font-size);color:var(--calendar-planner-more-color);cursor:pointer;text-align:start;transition-property:color;transition-duration:var(--calendar-planner-transition-duration);transition-timing-function:var(--calendar-planner-transition-easing);background:0 0;border:none;padding-block:0;padding-inline:0;display:inline-block}.calendar-planner__more:hover{color:var(--calendar-planner-more-hover-color)}.calendar-planner__more:focus-visible{outline:var(--calendar-planner-nav-focus-ring-width) solid var(--calendar-planner-more-focus-ring-color);outline-offset:var(--calendar-planner-nav-focus-ring-offset)}.calendar-planner.calendar-planner--sm .calendar-planner__cell{min-height:var(--calendar-planner-sm-cell-min-height)}.calendar-planner.calendar-planner--lg .calendar-planner__cell{min-height:var(--calendar-planner-lg-cell-min-height)}.calendar-planner__modal-events{gap:var(--calendar-planner-items-gap);flex-direction:column;display:flex}.calendar-planner__weekday.calendar-planner__weekday--dated{justify-content:center;align-items:center;gap:var(--calendar-planner-weekday-gap);display:flex}.calendar-planner__cell.calendar-planner__cell--week{min-height:var(--calendar-planner-week-cell-min-height)}.calendar-planner.calendar-planner--sm .calendar-planner__cell.calendar-planner__cell--week{min-height:var(--calendar-planner-sm-week-cell-min-height)}.calendar-planner.calendar-planner--lg .calendar-planner__cell.calendar-planner__cell--week{min-height:var(--calendar-planner-lg-week-cell-min-height)}.calendar-planner__event{align-items:baseline;gap:var(--calendar-planner-items-gap);min-width:0;display:flex}.calendar-planner__event-time{font-size:var(--calendar-planner-event-time-font-size);color:var(--calendar-planner-event-time-color);font-variant-numeric:tabular-nums;flex-shrink:0}.calendar-planner__event .tag{text-overflow:ellipsis;min-width:0;overflow:hidden}

package/dist/calendar-planner.js

@@ -3,115 +3,211 @@ import './calendar-planner.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { VisuallyHidden as t } from "./visually-hidden.js";
 import { Tag as n } from "./tag.js";
-import { Modal as r } from "./modal.js";
-import { c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d } from "./_shared/calendargrid.js";
-import { useCallback as f, useId as ee, useState as p } from "react";
-import { Fragment as te, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { Toggle as r } from "./toggle.js";
+import { ToggleGroup as i } from "./toggle-group.js";
+import { Modal as a } from "./modal.js";
+import { a as o, c as s, d as c, f as ee, i as te, l, n as u, o as ne, p as re, r as d, s as ie, t as ae, u as f } from "./_shared/calendargrid.js";
+import { useCallback as p, useId as oe, useState as m } from "react";
+import { Fragment as se, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/stories/molecules/CalendarPlanner/CalendarPlanner.tsx
-function g({ events: g = [], renderDay: _, maxItemsPerDay: v = 3, onMoreClick: y, showMoreDialog: b, onDayClick: x, month: S, defaultMonth: C, onMonthChange: w, navigable: T = !0, locale: E = "es-ES", previousMonthLabel: D, nextMonthLabel: O, gridLabel: k, moreLabel: ne, size: A = "md", className: j }) {
-	let [M, N] = p(() => S ?? C ?? /* @__PURE__ */ new Date()), [P, F] = p(null), I = b ?? !y, L = f(() => F(null), []), R = S ?? M, z = f((e) => {
-		N(e), w?.(e);
-	}, [w]), B = e("calendar"), V = e("calendarPlanner"), H = /* @__PURE__ */ new Date(), U = A === "sm" ? "xs" : A === "lg" ? "md" : "sm", W = new Intl.DateTimeFormat(E, {
+function _(e) {
+	return e.allDay === void 0 ? e.date.getHours() !== 0 || e.date.getMinutes() !== 0 : !e.allDay;
+}
+function ce(e) {
+	return [...e].sort((e, t) => {
+		let n = Number(_(e)) - Number(_(t));
+		return n === 0 ? e.date.getTime() - t.date.getTime() : n;
+	});
+}
+function v({ events: v = [], renderDay: y, maxItemsPerDay: le = 3, onMoreClick: b, showMoreDialog: x, onDayClick: S, month: C, defaultMonth: w, onMonthChange: T, view: E, defaultView: ue, onViewChange: D, viewSwitcher: de = !1, week: O, defaultWeek: fe, onWeekChange: k, navigable: A = !0, locale: j = "es-ES", previousMonthLabel: pe, nextMonthLabel: me, previousWeekLabel: he = "Semana anterior", nextWeekLabel: ge = "Semana siguiente", monthViewLabel: _e = "Mes", weekViewLabel: ve = "Semana", viewSwitcherLabel: ye = "Vista del calendario", gridLabel: M, moreLabel: N, size: P = "md", className: be }) {
+	let [xe, Se] = m(() => C ?? w ?? /* @__PURE__ */ new Date()), [Ce, we] = m(() => c(O ?? fe ?? C ?? w ?? /* @__PURE__ */ new Date())), [Te, Ee] = m(() => E ?? ue ?? "month"), [F, I] = m(null), De = x ?? !b, Oe = p(() => I(null), []), L = C ?? xe, R = c(O ?? Ce), z = E ?? Te, B = z === "week", V = p((e) => {
+		Se(e), T?.(e);
+	}, [T]), H = p((e) => {
+		let t = c(e);
+		we(t), k?.(t);
+	}, [k]), ke = p((e) => {
+		let t = d(R).some(({ date: e }) => ne(e, L));
+		!t && e === "week" && H(new Date(L.getFullYear(), L.getMonth(), 1)), !t && e === "month" && V(new Date(R.getFullYear(), R.getMonth(), 1)), Ee(e), D?.(e);
+	}, [
+		L,
+		R,
+		V,
+		H,
+		D
+	]), U = e("calendar"), Ae = e("calendarPlanner"), W = /* @__PURE__ */ new Date(), je = P === "sm" ? "xs" : P === "lg" ? "md" : "sm", Me = new Intl.DateTimeFormat(j, {
+		month: "long",
+		year: "numeric"
+	}), Ne = new Intl.DateTimeFormat(j, {
+		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}).format(R), G = new Intl.DateTimeFormat(E, {
+	}), Pe = new Date(R.getFullYear(), R.getMonth(), R.getDate() + 6), Fe = Ne.formatRange(R, Pe), Ie = B ? Fe : Me.format(L), G = new Intl.DateTimeFormat(j, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), K = new Intl.DateTimeFormat(E, {
+	}), Le = new Intl.DateTimeFormat(j, {
+		hour: "2-digit",
+		minute: "2-digit"
+	}), Re = new Intl.DateTimeFormat(j, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), q = l(E, "short"), J = d(s(R)), Y = i(R, -1), X = i(R, 1), Z = (e) => g.filter((t) => a(t.date, e)), Q = o({
-		month: R,
-		onMonthChange: z,
-		onActivate: x ? (e) => x(e, Z(e)) : void 0
-	}), $ = `${ee()}-planner-title-${R.getFullYear()}-${R.getMonth()}`;
-	return /* @__PURE__ */ h("div", {
-		className: [
-			"calendar-planner",
-			`calendar-planner--${A}`,
-			j
-		].filter(Boolean).join(" "),
+	}), K = te(j, "short"), ze = ae(u(L)), q = d(R), J = l(L, -1), Be = l(L, 1), Y = (e) => v.filter((t) => o(t.date, e)), Ve = ee({
+		month: L,
+		onMonthChange: V,
+		onActivate: S ? (e) => S(e, Y(e)) : void 0
+	}), He = re({
+		weekStart: R,
+		onWeekChange: H,
+		onActivate: S ? (e) => S(e, Y(e)) : void 0
+	}), X = B ? He : Ve, Z = oe(), Q = B ? `${Z}-planner-title-week-${R.getFullYear()}-${R.getMonth()}-${R.getDate()}` : `${Z}-planner-title-${L.getFullYear()}-${L.getMonth()}`, Ue = [
+		"calendar-planner",
+		`calendar-planner--${P}`,
+		B ? "calendar-planner--week" : "",
+		be
+	].filter(Boolean).join(" "), We = (e, t) => {
+		if (y) return y(e, t);
+		let r = B ? ce(t) : t, i = B ? r : r.slice(0, le), a = r.length - i.length;
+		return /* @__PURE__ */ g(se, { children: [i.map((e) => B ? /* @__PURE__ */ g("div", {
+			className: "calendar-planner__event",
+			children: [_(e) && /* @__PURE__ */ h("span", {
+				className: "calendar-planner__event-time",
+				children: Le.format(e.date)
+			}), /* @__PURE__ */ h(n, {
+				variant: e.variant ?? "neutral",
+				children: e.label
+			})]
+		}, e.id) : /* @__PURE__ */ h(n, {
+			variant: e.variant ?? "neutral",
+			children: e.label
+		}, e.id)), a > 0 && /* @__PURE__ */ h("button", {
+			type: "button",
+			className: "calendar-planner__more",
+			onClick: (n) => {
+				n.stopPropagation(), De && I({
+					date: e,
+					events: t
+				}), b?.(e, t);
+			},
+			children: Ae("more", N)(a)
+		})] });
+	}, $ = ({ date: e, outside: n }) => {
+		let r = o(e, W), i = Y(e), a = [
+			"calendar-planner__cell",
+			B ? "calendar-planner__cell--week" : "",
+			n && "calendar-planner__cell--outside",
+			r && "calendar-planner__cell--today",
+			S ? "calendar-planner__cell--clickable" : ""
+		].filter(Boolean).join(" "), s = [
+			"calendar-planner__day-number",
+			r && "calendar-planner__day-number--today",
+			n && "calendar-planner__day-number--outside"
+		].filter(Boolean).join(" ");
+		return /* @__PURE__ */ g("div", {
+			ref: S ? X.cellRef(e) : void 0,
+			role: "gridcell",
+			className: a,
+			"aria-current": r ? "date" : void 0,
+			tabIndex: S ? X.isTabbable(e) ? 0 : -1 : void 0,
+			onFocus: S ? () => X.onCellFocus(e) : void 0,
+			onClick: S ? () => S(e, i) : void 0,
+			children: [!B && /* @__PURE__ */ g("span", {
+				className: s,
+				children: [/* @__PURE__ */ h(t, { children: G.format(e) }), /* @__PURE__ */ h("span", {
+					"aria-hidden": "true",
+					children: e.getDate()
+				})]
+			}), /* @__PURE__ */ h("div", {
+				className: "calendar-planner__cell-body",
+				children: We(e, i)
+			})]
+		}, e.toISOString());
+	};
+	return /* @__PURE__ */ g("div", {
+		className: Ue,
 		children: [
-			c({
+			ie({
 				block: "calendar-planner",
-				title: W,
-				titleId: $,
-				navigable: T,
-				previousLabel: T ? B("previousMonth", D) : void 0,
-				nextLabel: T ? B("nextMonth", O) : void 0,
-				onPrev: () => z(Y),
-				onNext: () => z(X),
-				chevronSize: U
+				title: Ie,
+				titleId: Q,
+				navigable: A,
+				previousLabel: A ? B ? he : U("previousMonth", pe) : void 0,
+				nextLabel: A ? B ? ge : U("nextMonth", me) : void 0,
+				onPrev: () => B ? H(f(R, -1)) : V(J),
+				onNext: () => B ? H(f(R, 1)) : V(Be),
+				chevronSize: je,
+				children: de ? /* @__PURE__ */ g(i, {
+					className: "calendar-planner__views",
+					"aria-label": ye,
+					size: P,
+					value: [z],
+					onValueChange: (e) => {
+						let t = e[0];
+						t && ke(t);
+					},
+					children: [/* @__PURE__ */ h(r, {
+						value: "month",
+						children: _e
+					}), /* @__PURE__ */ h(r, {
+						value: "week",
+						children: ve
+					})]
+				}) : void 0
 			}),
-			/* @__PURE__ */ h("div", {
-				className: "calendar-planner__grid",
+			/* @__PURE__ */ g("div", {
+				className: ["calendar-planner__grid", B ? "calendar-planner__grid--week" : ""].filter(Boolean).join(" "),
 				role: "grid",
-				"aria-label": k,
-				"aria-labelledby": k ? void 0 : $,
-				onKeyDown: x ? Q.onKeyDown : void 0,
-				children: [u({
-					block: "calendar-planner",
-					rowModifier: "header",
-					weekdays: q
-				}), J.map((e, r) => /* @__PURE__ */ m("div", {
+				"aria-label": M,
+				"aria-labelledby": M ? void 0 : Q,
+				onKeyDown: S ? X.onKeyDown : void 0,
+				children: [B ? /* @__PURE__ */ h("div", {
 					role: "row",
-					className: "calendar-planner__row",
-					children: e.map(({ date: e, outside: r }) => {
-						let i = a(e, H), o = Z(e), s = o.slice(0, v), c = o.length - s.length, l = [
-							"calendar-planner__cell",
-							r && "calendar-planner__cell--outside",
-							i && "calendar-planner__cell--today"
-						].filter(Boolean).join(" "), u = [
-							"calendar-planner__day-number",
-							i && "calendar-planner__day-number--today",
-							r && "calendar-planner__day-number--outside"
-						].filter(Boolean).join(" ");
-						return /* @__PURE__ */ h("div", {
-							ref: x ? Q.cellRef(e) : void 0,
-							role: "gridcell",
-							className: [l, x ? "calendar-planner__cell--clickable" : ""].filter(Boolean).join(" "),
-							"aria-current": i ? "date" : void 0,
-							tabIndex: x ? Q.isTabbable(e) ? 0 : -1 : void 0,
-							onFocus: x ? () => Q.onCellFocus(e) : void 0,
-							onClick: x ? () => x(e, o) : void 0,
-							children: [/* @__PURE__ */ h("span", {
-								className: u,
-								children: [/* @__PURE__ */ m(t, { children: G.format(e) }), /* @__PURE__ */ m("span", {
-									"aria-hidden": "true",
-									children: e.getDate()
-								})]
-							}), /* @__PURE__ */ m("div", {
-								className: "calendar-planner__cell-body",
-								children: _ ? _(e, o) : /* @__PURE__ */ h(te, { children: [s.map((e) => /* @__PURE__ */ m(n, {
-									variant: e.variant ?? "neutral",
-									children: e.label
-								}, e.id)), c > 0 && /* @__PURE__ */ m("button", {
-									type: "button",
-									className: "calendar-planner__more",
-									onClick: (t) => {
-										t.stopPropagation(), I && F({
-											date: e,
-											events: o
-										}), y?.(e, o);
-									},
-									children: V("more", ne)(c)
-								})] })
+					className: "calendar-planner__row calendar-planner__row--header",
+					children: q.map(({ date: e }, t) => {
+						let n = o(e, W);
+						return /* @__PURE__ */ g("div", {
+							role: "columnheader",
+							className: [
+								"calendar-planner__weekday",
+								"calendar-planner__weekday--dated",
+								n && "calendar-planner__weekday--today"
+							].filter(Boolean).join(" "),
+							"aria-label": G.format(e),
+							"aria-current": n ? "date" : void 0,
+							children: [/* @__PURE__ */ h("abbr", {
+								"aria-hidden": "true",
+								title: K[t].long,
+								children: K[t].short
+							}), /* @__PURE__ */ h("span", {
+								"aria-hidden": "true",
+								className: ["calendar-planner__day-number", n && "calendar-planner__day-number--today"].filter(Boolean).join(" "),
+								children: e.getDate()
 							})]
 						}, e.toISOString());
 					})
-				}, r))]
+				}) : s({
+					block: "calendar-planner",
+					rowModifier: "header",
+					weekdays: K
+				}), B ? /* @__PURE__ */ h("div", {
+					role: "row",
+					className: "calendar-planner__row",
+					children: q.map((e) => $(e))
+				}) : ze.map((e, t) => /* @__PURE__ */ h("div", {
+					role: "row",
+					className: "calendar-planner__row",
+					children: e.map((e) => $(e))
+				}, t))]
 			}),
-			/* @__PURE__ */ m(r, {
-				open: P !== null,
-				onClose: L,
-				title: P ? K.format(P.date) : void 0,
-				children: /* @__PURE__ */ m("div", {
+			/* @__PURE__ */ h(a, {
+				open: F !== null,
+				onClose: Oe,
+				title: F ? Re.format(F.date) : void 0,
+				children: /* @__PURE__ */ h("div", {
 					className: "calendar-planner__modal-events",
-					children: P?.events.map((e) => /* @__PURE__ */ m(n, {
+					children: F?.events.map((e) => /* @__PURE__ */ h(n, {
 						variant: e.variant ?? "neutral",
 						children: e.label
 					}, e.id))
@@ -121,4 +217,4 @@ function g({ events: g = [], renderDay: _, maxItemsPerDay: v = 3, onMoreClick: y
 	});
 }
 //#endregion
-export { g as CalendarPlanner };
+export { v as CalendarPlanner };

package/dist/calendar-roster.js

@@ -3,7 +3,7 @@ import './calendar-roster.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
 import { Tag as t } from "./tag.js";
 import { PrevNextNav as n } from "./prev-next-nav.js";
-import { c as r, i } from "./_shared/calendargrid.js";
+import { a as r, l as i } from "./_shared/calendargrid.js";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/molecules/CalendarRoster/CalendarRoster.tsx
 function c(e) {
@@ -50,7 +50,7 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 	let D = e("calendar"), O = e("calendarRoster"), k = S ?? (b ? d.map(({ type: e, key: t }) => ({
 		type: e,
 		label: O(t)
-	})) : []), A = /* @__PURE__ */ new Date(), j = l(p), M = r(p, -1), N = r(p, 1), P = new Intl.DateTimeFormat(x, {
+	})) : []), A = /* @__PURE__ */ new Date(), j = l(p), M = i(p, -1), N = i(p, 1), P = new Intl.DateTimeFormat(x, {
 		month: "long",
 		year: "numeric"
 	}).format(p), F = new Intl.DateTimeFormat(x, { weekday: "narrow" }), I = new Intl.DateTimeFormat(x, { weekday: "long" }), L = m ? (e) => (t) => {
@@ -83,17 +83,17 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 						scope: "col",
 						children: O("name", v)
 					}), j.map((e) => {
-						let t = i(e, A), n = [
+						let t = r(e, A), n = [
 							"calendar-roster__th-day",
 							c(e) && "calendar-roster__th-day--weekend",
 							t && "calendar-roster__th-day--today"
-						].filter(Boolean).join(" "), r = String(e.getDate()).padStart(2, "0"), a = F.format(e), l = I.format(e);
+						].filter(Boolean).join(" "), i = String(e.getDate()).padStart(2, "0"), a = F.format(e), l = I.format(e);
 						return /* @__PURE__ */ s("th", {
 							className: n,
 							scope: "col",
 							children: [/* @__PURE__ */ o("div", {
 								className: "calendar-roster__th-day-number",
-								children: r
+								children: i
 							}), /* @__PURE__ */ o("div", {
 								className: "calendar-roster__th-day-sub",
 								children: /* @__PURE__ */ o("abbr", {
@@ -108,7 +108,7 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 						title: e.name,
 						children: e.name
 					}), j.map((n) => {
-						let r = n.getDate(), l = e.cells[r] ?? null, d = c(n), f = i(n, A), p = l?.type === "holiday", m = l?.type === "non-working";
+						let i = n.getDate(), l = e.cells[i] ?? null, d = c(n), f = r(n, A), p = l?.type === "holiday", m = l?.type === "non-working";
 						return /* @__PURE__ */ o("td", {
 							className: [
 								"calendar-roster__cell",
@@ -117,14 +117,14 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 								m && "calendar-roster__cell--non-working",
 								f && "calendar-roster__cell--today"
 							].filter(Boolean).join(" "),
-							children: _ ? _(r, n, l) : /* @__PURE__ */ s(a, { children: [l?.type === "schedule" && /* @__PURE__ */ o("span", {
+							children: _ ? _(i, n, l) : /* @__PURE__ */ s(a, { children: [l?.type === "schedule" && /* @__PURE__ */ o("span", {
 								className: "calendar-roster__schedule",
 								children: l.label
 							}), l && l.type !== "schedule" && l.type !== "non-working" && /* @__PURE__ */ o(t, {
 								variant: u[l.type],
 								children: l.type === "birthday" ? `${y}${l.label}` : l.label
 							})] })
-						}, r);
+						}, i);
 					})] }, e.id)) })]
 				})
 			}),

package/dist/calendar.js

@@ -1,54 +1,54 @@
 'use client';
 import './calendar.css';
 import { n as e } from "./_shared/brandmessagescontext.js";
-import { a as t, c as n, i as r, l as i, n as a, o, r as ee, s as te, t as ne } from "./_shared/calendargrid.js";
-import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { a as t, c as n, f as r, i, l as a, n as o, o as s, s as c, t as ee } from "./_shared/calendargrid.js";
+import { useCallback as l, useEffect as u, useId as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/stories/molecules/Calendar/Calendar.tsx
-var m = 12, h = 4;
-function g(e) {
-	return Math.floor(e / m) * m;
+var g = 12, _ = 4;
+function v(e) {
+	return Math.floor(e / g) * g;
 }
-function _({ value: _, onChange: re, defaultMonth: ie, month: v, onMonthChange: y, navigable: b = !0, disabledDates: x, minDate: S, maxDate: C, locale: w = "es-ES", previousMonthLabel: ae, nextMonthLabel: oe, previousYearsLabel: T, nextYearsLabel: E, yearGridLabel: D, gridLabel: O, size: k = "md", className: A }) {
-	let j = e("calendar"), [se, ce] = d(() => v ?? ie ?? (_ instanceof Date ? _ : /* @__PURE__ */ new Date())), M = v ?? se, N = s((e) => {
-		ce(e), y?.(e);
-	}, [y]), P = /* @__PURE__ */ new Date(), le = s((e) => S && e < S || C && e > C ? !0 : Array.isArray(x) ? x.some((t) => r(t, e)) : typeof x == "function" ? x(e) : !1, [
-		x,
-		S,
-		C
-	]), F = i({
+function y({ value: y, onChange: te, defaultMonth: ne, month: b, onMonthChange: x, navigable: S = !0, disabledDates: C, minDate: w, maxDate: T, locale: E = "es-ES", previousMonthLabel: re, nextMonthLabel: ie, previousYearsLabel: ae, nextYearsLabel: oe, yearGridLabel: D, gridLabel: O, size: k = "md", className: A }) {
+	let j = e("calendar"), [se, ce] = p(() => b ?? ne ?? (y instanceof Date ? y : /* @__PURE__ */ new Date())), M = b ?? se, N = l((e) => {
+		ce(e), x?.(e);
+	}, [x]), P = /* @__PURE__ */ new Date(), le = l((e) => w && e < w || T && e > T ? !0 : Array.isArray(C) ? C.some((n) => t(n, e)) : typeof C == "function" ? C(e) : !1, [
+		C,
+		w,
+		T
+	]), F = r({
 		month: M,
 		onMonthChange: N,
-		selected: _ ?? null,
-		minDate: S,
-		maxDate: C
-	}), [I, L] = d("days"), [R, z] = d(() => g(M.getFullYear())), [B, V] = d(() => M.getFullYear()), H = u(null), U = u(/* @__PURE__ */ new Map()), W = u(null), ue = s(() => {
+		selected: y ?? null,
+		minDate: w,
+		maxDate: T
+	}), [I, L] = p("days"), [R, z] = p(() => v(M.getFullYear())), [B, V] = p(() => M.getFullYear()), H = f(null), U = f(/* @__PURE__ */ new Map()), W = f(null), ue = l(() => {
 		let e = M.getFullYear();
-		z(g(e)), V(e), W.current = "year", L("years");
-	}, [M]), G = s(() => {
+		z(v(e)), V(e), W.current = "year", L("years");
+	}, [M]), G = l(() => {
 		W.current = "title", L("days");
-	}, []), de = s((e) => {
+	}, []), de = l((e) => {
 		N(new Date(e, M.getMonth(), 1)), G();
 	}, [
 		G,
 		M,
 		N
 	]);
-	c(() => {
+	u(() => {
 		if (!W.current) return;
 		let e = W.current;
 		W.current = null, e === "title" ? H.current?.focus() : U.current.get(B)?.focus();
 	}, [I, B]);
-	let fe = k === "sm" ? "xs" : k === "lg" ? "md" : "sm", pe = new Intl.DateTimeFormat(w, {
+	let fe = k === "sm" ? "xs" : k === "lg" ? "md" : "sm", pe = new Intl.DateTimeFormat(E, {
 		month: "long",
 		year: "numeric"
-	}).format(M), me = new Intl.DateTimeFormat(w, { year: "numeric" }), K = (e) => me.format(new Date(e, 0, 1)), he = Array.from({ length: m }, (e, t) => R + t), ge = `${K(R)}–${K(R + m - 1)}`, _e = new Intl.DateTimeFormat(w, {
+	}).format(M), me = new Intl.DateTimeFormat(E, { year: "numeric" }), K = (e) => me.format(new Date(e, 0, 1)), he = Array.from({ length: g }, (e, t) => R + t), ge = `${K(R)}–${K(R + g - 1)}`, _e = new Intl.DateTimeFormat(E, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), ve = ee(w, "narrow"), ye = ne(a(M)), q = n(M, -1), J = n(M, 1), be = S ? !t(q, S) && q < S : !1, xe = C ? !t(J, C) && J > C : !1, Se = (e) => (S ? e < S.getFullYear() : !1) || (C ? e > C.getFullYear() : !1), Ce = S ? R - 1 < S.getFullYear() : !1, we = C ? R + m > C.getFullYear() : !1, Y = I === "years", X = B >= R && B <= R + m - 1 ? B : R, Te = (e) => {
-		(e < R || e > R + m - 1) && z(g(e)), W.current = "year", V(e);
+	}), ve = i(E, "narrow"), ye = ee(o(M)), q = a(M, -1), J = a(M, 1), be = w ? !s(q, w) && q < w : !1, xe = T ? !s(J, T) && J > T : !1, Se = (e) => (w ? e < w.getFullYear() : !1) || (T ? e > T.getFullYear() : !1), Ce = w ? R - 1 < w.getFullYear() : !1, we = T ? R + g > T.getFullYear() : !1, Y = I === "years", X = B >= R && B <= R + g - 1 ? B : R, Te = (e) => {
+		(e < R || e > R + g - 1) && z(v(e)), W.current = "year", V(e);
 	}, Z = (e) => {
 		let t = null;
 		switch (e.key) {
@@ -59,22 +59,22 @@ function _({ value: _, onChange: re, defaultMonth: ie, month: v, onMonthChange:
 				t = X + 1;
 				break;
 			case "ArrowUp":
-				t = X - h;
+				t = X - _;
 				break;
 			case "ArrowDown":
-				t = X + h;
+				t = X + _;
 				break;
 			case "Home":
 				t = R;
 				break;
 			case "End":
-				t = R + m - 1;
+				t = R + g - 1;
 				break;
 			case "PageUp":
-				t = X - m;
+				t = X - g;
 				break;
 			case "PageDown":
-				t = X + m;
+				t = X + g;
 				break;
 			case "Escape":
 				e.preventDefault(), G();
@@ -82,39 +82,39 @@ function _({ value: _, onChange: re, defaultMonth: ie, month: v, onMonthChange:
 			default: return;
 		}
 		e.preventDefault(), Te(t);
-	}, Q = l(), $ = Y ? `${Q}-calendar-title-${R}` : `${Q}-calendar-title-${M.getFullYear()}-${M.getMonth()}`;
-	return /* @__PURE__ */ p("div", {
+	}, Q = d(), $ = Y ? `${Q}-calendar-title-${R}` : `${Q}-calendar-title-${M.getFullYear()}-${M.getMonth()}`;
+	return /* @__PURE__ */ h("div", {
 		className: [
 			"calendar",
 			`calendar--${k}`,
 			A
 		].filter(Boolean).join(" "),
-		children: [o({
+		children: [c({
 			block: "calendar",
 			title: Y ? ge : pe,
 			titleId: $,
-			navigable: b,
-			previousLabel: b ? Y ? j("previousYears", T) : j("previousMonth", ae) : void 0,
-			nextLabel: b ? Y ? j("nextYears", E) : j("nextMonth", oe) : void 0,
+			navigable: S,
+			previousLabel: S ? Y ? j("previousYears", ae) : j("previousMonth", re) : void 0,
+			nextLabel: S ? Y ? j("nextYears", oe) : j("nextMonth", ie) : void 0,
 			prevDisabled: Y ? Ce : be,
 			nextDisabled: Y ? we : xe,
-			onPrev: Y ? () => z(R - m) : () => N(q),
-			onNext: Y ? () => z(R + m) : () => N(J),
+			onPrev: Y ? () => z(R - g) : () => N(q),
+			onNext: Y ? () => z(R + g) : () => N(J),
 			chevronSize: fe,
 			onTitleClick: Y ? G : ue,
 			titleExpanded: Y,
 			titleRef: H
-		}), Y ? /* @__PURE__ */ f("div", {
+		}), Y ? /* @__PURE__ */ m("div", {
 			className: "calendar__years",
 			role: "grid",
 			"aria-label": j("yearGrid", D),
 			onKeyDown: Z,
-			children: Array.from({ length: m / h }, (e, t) => /* @__PURE__ */ f("div", {
+			children: Array.from({ length: g / _ }, (e, t) => /* @__PURE__ */ m("div", {
 				role: "row",
 				className: "calendar__row",
-				children: he.slice(t * h, t * h + h).map((e) => {
-					let t = Se(e), n = e === P.getFullYear(), r = _ instanceof Date ? _.getFullYear() === e : !1;
-					return /* @__PURE__ */ f("button", {
+				children: he.slice(t * _, t * _ + _).map((e) => {
+					let t = Se(e), n = e === P.getFullYear(), r = y instanceof Date ? y.getFullYear() === e : !1;
+					return /* @__PURE__ */ m("button", {
 						ref: (t) => {
 							t ? U.current.set(e, t) : U.current.delete(e);
 						},
@@ -136,44 +136,44 @@ function _({ value: _, onChange: re, defaultMonth: ie, month: v, onMonthChange:
 					}, e);
 				})
 			}, t))
-		}) : /* @__PURE__ */ p("div", {
+		}) : /* @__PURE__ */ h("div", {
 			className: "calendar__grid",
 			role: "grid",
 			"aria-label": O,
 			"aria-labelledby": O ? void 0 : $,
 			onKeyDown: F.onKeyDown,
-			children: [te({
+			children: [n({
 				block: "calendar",
 				weekdays: ve
-			}), ye.map((e, t) => /* @__PURE__ */ f("div", {
+			}), ye.map((e, n) => /* @__PURE__ */ m("div", {
 				role: "row",
 				className: "calendar__row",
-				children: e.map(({ date: e, outside: t }) => {
-					let n = le(e), i = r(e, P), a = _ instanceof Date ? r(e, _) : !1, o = [
+				children: e.map(({ date: e, outside: n }) => {
+					let r = le(e), i = t(e, P), a = y instanceof Date ? t(e, y) : !1, o = [
 						"calendar__day",
-						t && "calendar__day--outside",
+						n && "calendar__day--outside",
 						i && "calendar__day--today",
 						a && "calendar__day--selected",
-						n && "calendar__day--disabled"
+						r && "calendar__day--disabled"
 					].filter(Boolean).join(" ");
-					return /* @__PURE__ */ f("button", {
+					return /* @__PURE__ */ m("button", {
 						ref: F.cellRef(e),
 						type: "button",
 						role: "gridcell",
 						className: o,
 						"aria-label": _e.format(e),
 						"aria-selected": a,
-						"aria-disabled": n ? "true" : void 0,
+						"aria-disabled": r ? "true" : void 0,
 						"aria-current": i ? "date" : void 0,
 						tabIndex: F.isTabbable(e) ? 0 : -1,
 						onFocus: () => F.onCellFocus(e),
-						onClick: n ? void 0 : () => re?.(e),
+						onClick: r ? void 0 : () => te?.(e),
 						children: e.getDate()
 					}, e.toISOString());
 				})
-			}, t))]
+			}, n))]
 		})]
 	});
 }
 //#endregion
-export { _ as Calendar };
+export { y as Calendar };