@studiolxd/brand 47.0.0 → 48.0.0

package/dist/calendar-planner.js

@@ -6,62 +6,62 @@ 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 m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Fragment as te, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/stories/molecules/CalendarPlanner/CalendarPlanner.tsx
-function _({ events: _ = [], renderDay: v, maxItemsPerDay: y = 3, onMoreClick: b, showMoreDialog: x, onDayClick: S, month: C, defaultMonth: w, onMonthChange: T, navigable: E = !0, locale: D = "es-ES", previousMonthLabel: O, nextMonthLabel: k, gridLabel: A, moreLabel: te = (e) => `+${e} más`, size: j = "md", className: M }) {
-	let [N, P] = p(() => C ?? w ?? /* @__PURE__ */ new Date()), [F, I] = p(null), L = x ?? !b, R = f(() => I(null), []), z = C ?? N, B = f((e) => {
-		P(e), T?.(e);
-	}, [T]), V = e("calendar"), H = /* @__PURE__ */ new Date(), U = j === "sm" ? "xs" : j === "lg" ? "md" : "sm", W = new Intl.DateTimeFormat(D, {
+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, {
 		month: "long",
 		year: "numeric"
-	}).format(z), G = new Intl.DateTimeFormat(D, {
+	}).format(R), G = new Intl.DateTimeFormat(E, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), K = new Intl.DateTimeFormat(D, {
+	}), K = new Intl.DateTimeFormat(E, {
 		weekday: "long",
 		day: "numeric",
 		month: "long",
 		year: "numeric"
-	}), q = l(D, "short"), J = d(s(z)), Y = i(z, -1), X = i(z, 1), Z = (e) => _.filter((t) => a(t.date, e)), Q = o({
-		month: z,
-		onMonthChange: B,
-		onActivate: S ? (e) => S(e, Z(e)) : void 0
-	}), $ = `${ee()}-planner-title-${z.getFullYear()}-${z.getMonth()}`;
-	return /* @__PURE__ */ g("div", {
+	}), 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--${j}`,
-			M
+			`calendar-planner--${A}`,
+			j
 		].filter(Boolean).join(" "),
 		children: [
 			c({
 				block: "calendar-planner",
 				title: W,
 				titleId: $,
-				navigable: E,
-				previousLabel: E ? V("previousMonth", O) : void 0,
-				nextLabel: E ? V("nextMonth", k) : void 0,
-				onPrev: () => B(Y),
-				onNext: () => B(X),
+				navigable: T,
+				previousLabel: T ? B("previousMonth", D) : void 0,
+				nextLabel: T ? B("nextMonth", O) : void 0,
+				onPrev: () => z(Y),
+				onNext: () => z(X),
 				chevronSize: U
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ h("div", {
 				className: "calendar-planner__grid",
 				role: "grid",
-				"aria-label": A,
-				"aria-labelledby": A ? void 0 : $,
-				onKeyDown: S ? Q.onKeyDown : void 0,
+				"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__ */ h("div", {
+				}), J.map((e, r) => /* @__PURE__ */ m("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, y), c = o.length - s.length, l = [
+						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"
@@ -70,48 +70,48 @@ function _({ events: _ = [], renderDay: v, maxItemsPerDay: y = 3, onMoreClick: b
 							i && "calendar-planner__day-number--today",
 							r && "calendar-planner__day-number--outside"
 						].filter(Boolean).join(" ");
-						return /* @__PURE__ */ g("div", {
-							ref: S ? Q.cellRef(e) : void 0,
+						return /* @__PURE__ */ h("div", {
+							ref: x ? Q.cellRef(e) : void 0,
 							role: "gridcell",
-							className: [l, S ? "calendar-planner__cell--clickable" : ""].filter(Boolean).join(" "),
+							className: [l, x ? "calendar-planner__cell--clickable" : ""].filter(Boolean).join(" "),
 							"aria-current": i ? "date" : void 0,
-							tabIndex: S ? Q.isTabbable(e) ? 0 : -1 : void 0,
-							onFocus: S ? () => Q.onCellFocus(e) : void 0,
-							onClick: S ? () => S(e, o) : void 0,
-							children: [/* @__PURE__ */ g("span", {
+							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__ */ h(t, { children: G.format(e) }), /* @__PURE__ */ h("span", {
+								children: [/* @__PURE__ */ m(t, { children: G.format(e) }), /* @__PURE__ */ m("span", {
 									"aria-hidden": "true",
 									children: e.getDate()
 								})]
-							}), /* @__PURE__ */ h("div", {
+							}), /* @__PURE__ */ m("div", {
 								className: "calendar-planner__cell-body",
-								children: v ? v(e, o) : /* @__PURE__ */ g(m, { children: [s.map((e) => /* @__PURE__ */ h(n, {
+								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__ */ h("button", {
+								}, e.id)), c > 0 && /* @__PURE__ */ m("button", {
 									type: "button",
 									className: "calendar-planner__more",
 									onClick: (t) => {
-										t.stopPropagation(), L && I({
+										t.stopPropagation(), I && F({
 											date: e,
 											events: o
-										}), b?.(e, o);
+										}), y?.(e, o);
 									},
-									children: te(c)
+									children: V("more", ne)(c)
 								})] })
 							})]
 						}, e.toISOString());
 					})
 				}, r))]
 			}),
-			/* @__PURE__ */ h(r, {
-				open: F !== null,
-				onClose: R,
-				title: F ? K.format(F.date) : void 0,
-				children: /* @__PURE__ */ h("div", {
+			/* @__PURE__ */ m(r, {
+				open: P !== null,
+				onClose: L,
+				title: P ? K.format(P.date) : void 0,
+				children: /* @__PURE__ */ m("div", {
 					className: "calendar-planner__modal-events",
-					children: F?.events.map((e) => /* @__PURE__ */ h(n, {
+					children: P?.events.map((e) => /* @__PURE__ */ m(n, {
 						variant: e.variant ?? "neutral",
 						children: e.label
 					}, e.id))
@@ -121,4 +121,4 @@ function _({ events: _ = [], renderDay: v, maxItemsPerDay: y = 3, onMoreClick: b
 	});
 }
 //#endregion
-export { _ as CalendarPlanner };
+export { g as CalendarPlanner };

package/dist/calendar-roster.js

@@ -23,48 +23,51 @@ var u = {
 }, d = [
 	{
 		type: "holiday",
-		label: "Festivo"
+		key: "holiday"
 	},
 	{
 		type: "vacation",
-		label: "Vacaciones"
+		key: "vacation"
 	},
 	{
 		type: "absence",
-		label: "Ausencia"
+		key: "absence"
 	},
 	{
 		type: "recovery",
-		label: "Recuperación"
+		key: "recovery"
 	},
 	{
 		type: "birthday",
-		label: "Cumpleaños"
+		key: "birthday"
 	},
 	{
 		type: "non-working",
-		label: "No laborable"
+		key: "nonWorking"
 	}
 ];
-function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent: g, renderCell: _, nameLabel: v = "Empleado", birthdayPrefix: y = "🎂 ", showLegend: b = !0, locale: x = "es-ES", legendItems: S = d, legendLabel: C = "Leyenda", previousMonthLabel: w, nextMonthLabel: T, className: E }) {
-	let D = e("calendar"), O = /* @__PURE__ */ new Date(), k = l(p), A = r(p, -1), j = r(p, 1), M = new Intl.DateTimeFormat(x, {
+function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent: g, renderCell: _, nameLabel: v, birthdayPrefix: y = "🎂 ", showLegend: b = !0, locale: x = "es-ES", legendItems: S, legendLabel: C, previousMonthLabel: w, nextMonthLabel: T, className: E }) {
+	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, {
 		month: "long",
 		year: "numeric"
-	}).format(p), N = new Intl.DateTimeFormat(x, { weekday: "narrow" }), P = new Intl.DateTimeFormat(x, { weekday: "long" }), F = m ? (e) => (t) => {
+	}).format(p), F = new Intl.DateTimeFormat(x, { weekday: "narrow" }), I = new Intl.DateTimeFormat(x, { weekday: "long" }), L = m ? (e) => (t) => {
 		h && t.preventDefault(), m(e);
-	} : void 0, I = `roster-title-${p.getFullYear()}-${p.getMonth()}`;
+	} : void 0, R = `roster-title-${p.getFullYear()}-${p.getMonth()}`;
 	return /* @__PURE__ */ s("div", {
 		className: ["calendar-roster", E].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ o("div", {
 				className: "calendar-roster__nav",
 				children: /* @__PURE__ */ o(n, {
-					label: M,
-					labelId: I,
-					prevHref: h?.(A),
-					nextHref: h?.(j),
-					prevOnClick: F?.(A),
-					nextOnClick: F?.(j),
+					label: P,
+					labelId: R,
+					prevHref: h?.(M),
+					nextHref: h?.(N),
+					prevOnClick: L?.(M),
+					nextOnClick: L?.(N),
 					prevLabel: D("previousMonth", w),
 					nextLabel: D("nextMonth", T),
 					linkComponent: g
@@ -74,17 +77,17 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 				className: "calendar-roster__wrap",
 				children: /* @__PURE__ */ s("table", {
 					className: "calendar-roster__table",
-					"aria-labelledby": I,
+					"aria-labelledby": R,
 					children: [/* @__PURE__ */ o("thead", { children: /* @__PURE__ */ s("tr", { children: [/* @__PURE__ */ o("th", {
 						className: "calendar-roster__th-name",
 						scope: "col",
-						children: v
-					}), k.map((e) => {
-						let t = i(e, O), n = [
+						children: O("name", v)
+					}), j.map((e) => {
+						let t = i(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 = N.format(e), l = P.format(e);
+						].filter(Boolean).join(" "), r = String(e.getDate()).padStart(2, "0"), a = F.format(e), l = I.format(e);
 						return /* @__PURE__ */ s("th", {
 							className: n,
 							scope: "col",
@@ -104,8 +107,8 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 						className: "calendar-roster__th-name-row",
 						title: e.name,
 						children: e.name
-					}), k.map((n) => {
-						let r = n.getDate(), l = e.cells[r] ?? null, d = c(n), f = i(n, O), p = l?.type === "holiday", m = l?.type === "non-working";
+					}), 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";
 						return /* @__PURE__ */ o("td", {
 							className: [
 								"calendar-roster__cell",
@@ -128,8 +131,8 @@ function f({ rows: f, month: p, onMonthChange: m, hrefBuilder: h, linkComponent:
 			b && /* @__PURE__ */ o("div", {
 				className: "calendar-roster__legend",
 				role: "group",
-				"aria-label": C,
-				children: S.map(({ type: e, label: n }) => /* @__PURE__ */ o("span", {
+				"aria-label": O("legend", C),
+				children: k.map(({ type: e, label: n }) => /* @__PURE__ */ o("span", {
 					className: "calendar-roster__legend-item",
 					children: e === "non-working" ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", { className: "calendar-roster__legend-swatch calendar-roster__legend-swatch--non-working" }), n] }) : /* @__PURE__ */ o(t, {
 						variant: u[e],

package/dist/carousel.js

@@ -1,17 +1,18 @@
 'use client';
 import './carousel.css';
-import { Icon as e } from "./icon.js";
-import { VisuallyHidden as t } from "./visually-hidden.js";
-import { Button as n } from "./button.js";
-import { t as r } from "./_shared/css-properties.js";
-import { Children as i, useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { VisuallyHidden as n } from "./visually-hidden.js";
+import { Button as r } from "./button.js";
+import { t as i } from "./_shared/css-properties.js";
+import { Children as a, useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/stories/molecules/Carousel/Carousel.tsx
-function f({ children: f, label: p = "Carrusel", roleDescription: m = "carrusel", trackLabel: h = "Diapositivas", slideSize: g, controls: _ = !0, indicators: v = !1, autoplay: y, prevLabel: b = "Anterior", nextLabel: x = "Siguiente", indicatorLabel: S = (e) => `Ir a la diapositiva ${e + 1}`, pauseLabel: C = "Pausar", playLabel: w = "Reproducir", slideStatusLabel: T = (e, t) => `Diapositiva ${e + 1} de ${t}`, className: E, id: D }) {
-	let O = s(null), [k, A] = c(0), j = s(0), [M, N] = c(!1), [P, F] = c(!1), I = i.count(f), L = y !== void 0 && !P, R = (e) => Array.from(e.children), z = a((e) => {
-		let t = O.current;
+function p({ children: p, label: m, roleDescription: h, trackLabel: g, slideSize: _, controls: v = !0, indicators: y = !1, autoplay: b, prevLabel: x, nextLabel: S, indicatorLabel: C, pauseLabel: w, playLabel: T, slideStatusLabel: E, className: D, id: O }) {
+	let k = e("carousel"), A = c(null), [j, M] = l(0), N = c(0), [P, F] = l(!1), [I, L] = l(!1), R = a.count(p), z = b !== void 0 && !I, B = (e) => Array.from(e.children), V = o((e) => {
+		let t = A.current;
 		if (!t) return;
-		let n = R(t);
+		let n = B(t);
 		if (n.length === 0) return;
 		let r = n[(e + n.length) % n.length], i = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 		t.scrollTo({
@@ -19,106 +20,107 @@ function f({ children: f, label: p = "Carrusel", roleDescription: m = "carrusel"
 			behavior: i ? "auto" : "smooth"
 		});
 	}, []);
-	o(() => {
-		let e = O.current;
+	s(() => {
+		let e = A.current;
 		if (!e) return;
 		let t = () => {
-			let t = R(e);
+			let t = B(e);
 			if (t.length === 0) return;
 			let n = t[0].offsetLeft, r = 0, i = Infinity;
 			t.forEach((t, a) => {
 				let o = Math.abs(t.offsetLeft - n - e.scrollLeft);
 				o < i && (i = o, r = a);
-			}), j.current = r, A(r);
+			}), N.current = r, M(r);
 		};
 		return t(), e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
-	}, [f]), o(() => {
-		if (!y || P || M || I < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-		let e = window.setInterval(() => z(j.current + 1), y);
+	}, [p]), s(() => {
+		if (!b || I || P || R < 2 || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		let e = window.setInterval(() => V(N.current + 1), b);
 		return () => window.clearInterval(e);
 	}, [
-		y,
-		P,
-		M,
+		b,
 		I,
-		z
+		P,
+		R,
+		V
 	]);
-	let B = (e) => {
-		e.key === "ArrowRight" ? (e.preventDefault(), z(k + 1)) : e.key === "ArrowLeft" && (e.preventDefault(), z(k - 1));
+	let H = (e) => {
+		e.key === "ArrowRight" ? (e.preventDefault(), V(j + 1)) : e.key === "ArrowLeft" && (e.preventDefault(), V(j - 1));
 	};
-	return /* @__PURE__ */ d("div", {
-		id: D,
-		ref: r({ "--carousel-slide-size": g }),
-		className: ["carousel", E].filter(Boolean).join(" "),
+	return /* @__PURE__ */ f("div", {
+		id: O,
+		ref: i({ "--carousel-slide-size": _ }),
+		className: ["carousel", D].filter(Boolean).join(" "),
 		role: "region",
-		"aria-roledescription": m,
-		"aria-label": p,
-		onMouseEnter: () => N(!0),
-		onMouseLeave: () => N(!1),
-		onFocus: () => N(!0),
-		onBlur: () => N(!1),
+		"aria-roledescription": k("roleDescription", h),
+		"aria-label": k("label", m),
+		onMouseEnter: () => F(!0),
+		onMouseLeave: () => F(!1),
+		onFocus: () => F(!0),
+		onBlur: () => F(!1),
 		children: [
-			/* @__PURE__ */ u("div", {
-				ref: O,
+			/* @__PURE__ */ d("div", {
+				ref: A,
 				className: "carousel__track",
 				tabIndex: 0,
 				role: "group",
-				"aria-label": h,
-				onKeyDown: B,
-				children: f
+				"aria-label": k("track", g),
+				onKeyDown: H,
+				children: p
 			}),
-			/* @__PURE__ */ u(t, {
+			/* @__PURE__ */ d(n, {
 				as: "div",
 				role: "status",
-				"aria-live": L ? "off" : "polite",
+				"aria-live": z ? "off" : "polite",
 				"aria-atomic": "true",
-				children: T(k, I)
+				children: k("slideStatus", E)(j, R)
 			}),
-			(_ || v || y !== void 0) && /* @__PURE__ */ d("div", {
+			(v || y || b !== void 0) && /* @__PURE__ */ f("div", {
 				className: "carousel__controls",
-				children: [v && /* @__PURE__ */ u("div", {
+				children: [y && /* @__PURE__ */ d("div", {
 					className: "carousel__indicators",
-					children: Array.from({ length: I }, (e, t) => /* @__PURE__ */ u("button", {
+					children: Array.from({ length: R }, (e, t) => /* @__PURE__ */ d("button", {
 						type: "button",
 						className: "carousel__indicator",
-						"aria-label": S(t),
-						"aria-current": t === k ? "true" : void 0,
-						onClick: () => z(t)
+						"aria-label": k("indicator", C)(t),
+						"aria-current": t === j ? "true" : void 0,
+						onClick: () => V(t)
 					}, t))
-				}), (_ || y !== void 0) && /* @__PURE__ */ d("div", {
+				}), (v || b !== void 0) && /* @__PURE__ */ f("div", {
 					className: "carousel__buttons",
-					children: [y !== void 0 && /* @__PURE__ */ u(n, {
+					children: [b !== void 0 && /* @__PURE__ */ d(r, {
 						variant: "ghost",
 						iconOnly: !0,
-						"aria-label": L ? C : w,
-						onClick: () => F((e) => !e),
-						children: /* @__PURE__ */ u(e, { name: L ? "pause" : "play" })
-					}), _ && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(n, {
+						"aria-label": z ? k("pause", w) : k("play", T),
+						onClick: () => L((e) => !e),
+						children: /* @__PURE__ */ d(t, { name: z ? "pause" : "play" })
+					}), v && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(r, {
 						variant: "ghost",
 						iconOnly: !0,
-						"aria-label": b,
-						onClick: () => z(k - 1),
-						children: /* @__PURE__ */ u(e, { name: "arrow-left" })
-					}), /* @__PURE__ */ u(n, {
+						"aria-label": k("previous", x),
+						onClick: () => V(j - 1),
+						children: /* @__PURE__ */ d(t, { name: "arrow-left" })
+					}), /* @__PURE__ */ d(r, {
 						variant: "ghost",
 						iconOnly: !0,
-						"aria-label": x,
-						onClick: () => z(k + 1),
-						children: /* @__PURE__ */ u(e, { name: "arrow" })
+						"aria-label": k("next", S),
+						onClick: () => V(j + 1),
+						children: /* @__PURE__ */ d(t, { name: "arrow" })
 					})] })]
 				})]
 			})
 		]
 	});
 }
-function p({ roleDescription: e = "diapositiva", className: t, children: n, ...r }) {
-	return /* @__PURE__ */ u("div", {
-		className: ["carousel__slide", t].filter(Boolean).join(" "),
+function m({ roleDescription: t, className: n, children: r, ...i }) {
+	let a = e("carousel");
+	return /* @__PURE__ */ d("div", {
+		className: ["carousel__slide", n].filter(Boolean).join(" "),
 		role: "group",
-		"aria-roledescription": e,
-		...r,
-		children: n
+		"aria-roledescription": a("slideRoleDescription", t),
+		...i,
+		children: r
 	});
 }
 //#endregion
-export { f as Carousel, p as CarouselSlide };
+export { p as Carousel, m as CarouselSlide };