@studiolxd/brand 49.11.0 → 49.12.0

package/dist/clock-widget.css

@@ -0,0 +1 @@
+.clock-widget{gap:var(--clock-widget-gap);font-family:var(--clock-widget-font-family);flex-direction:column;display:flex}.clock-widget__header{gap:var(--clock-widget-header-gap);flex-direction:column;display:flex}.clock-widget__date{font-size:var(--clock-widget-date-font-size);color:var(--clock-widget-date-color);margin-block:0}.clock-widget__status{align-items:center;gap:var(--clock-widget-status-gap);font-size:var(--clock-widget-status-font-size);color:var(--clock-widget-status-color);margin-block:0;display:flex}.clock-widget__dot{inline-size:var(--clock-widget-status-dot-size);block-size:var(--clock-widget-status-dot-size);border-radius:var(--clock-widget-status-dot-radius);background-color:var(--clock-widget-status-dot-closed-bg);flex-shrink:0}.clock-widget__dot.clock-widget__dot--open{background-color:var(--clock-widget-status-dot-open-bg)}.clock-widget__elapsed{gap:var(--clock-widget-header-gap);flex-direction:column;display:flex}.clock-widget__elapsed-value{font-size:var(--clock-widget-elapsed-font-size);font-weight:var(--clock-widget-elapsed-font-weight);line-height:var(--clock-widget-elapsed-line-height);color:var(--clock-widget-elapsed-color);font-variant-numeric:tabular-nums;margin-block:0}.clock-widget__elapsed-label{font-size:var(--clock-widget-elapsed-label-font-size);color:var(--clock-widget-elapsed-label-color)}.clock-widget__actions{display:flex}.clock-widget__footer{margin-block-start:var(--clock-widget-footer-margin-block-start)}

package/dist/clock-widget.js

@@ -0,0 +1,126 @@
+'use client';
+import './clock-widget.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Button as t } from "./button.js";
+import { Heading as n } from "./heading.js";
+import { Alert as r } from "./alert.js";
+import { Table as i, TableBody as a, TableCell as o, TableFooter as s, TableHead as c, TableHeader as l, TableRow as u } from "./table.js";
+import { forwardRef as d, useEffect as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+//#region src/stories/molecules/ClockWidget/clockDuration.ts
+function _(e, t) {
+	let n = e.end ?? t;
+	return Math.max(0, Math.round((n.getTime() - e.start.getTime()) / 6e4));
+}
+function v(e, t) {
+	return e.reduce((e, n) => e + _(n, t), 0);
+}
+function y(e) {
+	return e.some((e) => e.end === null || e.end === void 0);
+}
+//#endregion
+//#region src/stories/molecules/ClockWidget/ClockWidget.tsx
+var b = d(function({ entries: d, date: b, dayState: x = "working", onClockIn: S, onClockOut: C, pending: w = !1, disabled: T = !1, error: E, now: D, locale: O = "es-ES", timeZone: k, headingLevel: A = 2, showEntries: j = !0, footer: M, titleLabel: N, clockInLabel: P, clockOutLabel: F, pendingLabel: I, elapsedLabel: L, dayStateLabel: R, formatDuration: z, className: B, ...V }, H) {
+	let U = e("clockWidget"), W = y(d), G = W && D === void 0, [K, q] = p(() => Date.now());
+	f(() => {
+		if (!G) return;
+		let e = setInterval(() => q(Date.now()), 1e3);
+		return () => clearInterval(e);
+	}, [G]);
+	let J = D ?? new Date(K), Y = new Intl.DateTimeFormat(O, {
+		hour: "2-digit",
+		minute: "2-digit",
+		timeZone: k
+	}), X = (e) => (z ?? U("durationValue"))(Math.floor(e / 60), e % 60), Z = v(d, J), Q = x === "working", $ = R ?? (Q ? null : U(x === "vacation" ? "vacation" : x === "absence" ? "absence" : "nonWorking"));
+	return /* @__PURE__ */ g("section", {
+		ref: H,
+		className: ["clock-widget", B].filter(Boolean).join(" "),
+		...V,
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "clock-widget__header",
+				children: [
+					/* @__PURE__ */ h(n, {
+						level: A,
+						children: U("title", N)
+					}),
+					b ? /* @__PURE__ */ h("p", {
+						className: "clock-widget__date",
+						children: b
+					}) : null,
+					$ ? /* @__PURE__ */ g("p", {
+						className: "clock-widget__status",
+						children: [/* @__PURE__ */ h("span", {
+							className: ["clock-widget__dot", W ? "clock-widget__dot--open" : ""].filter(Boolean).join(" "),
+							"aria-hidden": "true"
+						}), $]
+					}) : null
+				]
+			}),
+			E ? /* @__PURE__ */ h(r, {
+				variant: "error",
+				children: E
+			}) : null,
+			Q ? /* @__PURE__ */ g(m, { children: [
+				/* @__PURE__ */ g("p", {
+					className: "clock-widget__elapsed",
+					children: [/* @__PURE__ */ h("span", {
+						className: "clock-widget__elapsed-value",
+						role: "timer",
+						children: X(Z)
+					}), /* @__PURE__ */ h("span", {
+						className: "clock-widget__elapsed-label",
+						children: U("elapsed", L)
+					})]
+				}),
+				W && C ? /* @__PURE__ */ h("p", {
+					className: "clock-widget__actions",
+					children: /* @__PURE__ */ h(t, {
+						type: "button",
+						variant: "outline",
+						destructive: !0,
+						disabled: w || T,
+						onClick: C,
+						children: w ? U("pending", I) : U("clockOut", F)
+					})
+				}) : null,
+				!W && S ? /* @__PURE__ */ h("p", {
+					className: "clock-widget__actions",
+					children: /* @__PURE__ */ h(t, {
+						type: "button",
+						variant: "primary",
+						disabled: w || T,
+						onClick: S,
+						children: w ? U("pending", I) : U("clockIn", P)
+					})
+				}) : null,
+				j && d.length > 0 ? /* @__PURE__ */ g(i, {
+					caption: U("entries"),
+					size: "sm",
+					children: [
+						/* @__PURE__ */ h(c, { children: /* @__PURE__ */ g(u, { children: [
+							/* @__PURE__ */ h(l, { children: U("in") }),
+							/* @__PURE__ */ h(l, { children: U("out") }),
+							/* @__PURE__ */ h(l, { children: U("duration") })
+						] }) }),
+						/* @__PURE__ */ h(a, { children: d.map((e) => /* @__PURE__ */ g(u, { children: [
+							/* @__PURE__ */ h(o, { children: Y.format(e.start) }),
+							/* @__PURE__ */ h(o, { children: e.end ? Y.format(e.end) : U("running") }),
+							/* @__PURE__ */ h(o, { children: X(_(e, J)) })
+						] }, e.id)) }),
+						d.length > 1 ? /* @__PURE__ */ h(s, { children: /* @__PURE__ */ g(u, { children: [/* @__PURE__ */ h(o, {
+							colSpan: 2,
+							children: U("total")
+						}), /* @__PURE__ */ h(o, { children: X(Z) })] }) }) : null
+					]
+				}) : null
+			] }) : null,
+			M ? /* @__PURE__ */ h("div", {
+				className: "clock-widget__footer",
+				children: M
+			}) : null
+		]
+	});
+});
+//#endregion
+export { b as ClockWidget };

package/dist/heatmap.css

@@ -0,0 +1 @@
+.heatmap{font-family:var(--heatmap-font-family)}.heatmap__wrap{border:var(--heatmap-border-width) solid var(--heatmap-border-color);border-radius:var(--heatmap-radius);overflow:auto visible}.heatmap__table{border-collapse:collapse;inline-size:100%}.heatmap__group{padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-group-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-group-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__corner,.heatmap__row-header{z-index:1;min-inline-size:var(--heatmap-row-header-width);max-inline-size:var(--heatmap-row-header-width);padding-block:var(--heatmap-row-header-padding-block);padding-inline:var(--heatmap-row-header-padding-inline);text-align:start;background-color:var(--heatmap-row-header-bg);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);position:sticky;inset-inline-start:0}.heatmap__corner{z-index:2;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__row-header{font-size:var(--heatmap-row-header-font-size);font-weight:var(--heatmap-row-header-font-weight);color:var(--heatmap-row-header-color)}.heatmap__column-header{min-inline-size:var(--heatmap-column-header-width);padding-block:var(--heatmap-column-header-padding-block);padding-inline:var(--heatmap-column-header-padding-inline);font-size:var(--heatmap-column-header-font-size);font-weight:var(--heatmap-column-header-font-weight);color:var(--heatmap-column-header-color);background-color:var(--heatmap-column-header-bg);text-align:center;vertical-align:bottom;border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell{padding-block:var(--heatmap-cell-padding-block);padding-inline:var(--heatmap-cell-padding-inline);font-size:var(--heatmap-cell-font-size);font-weight:var(--heatmap-cell-font-weight);text-align:center;font-variant-numeric:tabular-nums;border-inline-end:var(--heatmap-border-width) solid var(--heatmap-border-color);border-block-end:var(--heatmap-border-width) solid var(--heatmap-border-color)}.heatmap__cell.heatmap__cell--step-1{background-color:var(--heatmap-step-1-bg);color:var(--heatmap-step-1-color)}.heatmap__cell.heatmap__cell--step-2{background-color:var(--heatmap-step-2-bg);color:var(--heatmap-step-2-color)}.heatmap__cell.heatmap__cell--step-3{background-color:var(--heatmap-step-3-bg);color:var(--heatmap-step-3-color)}.heatmap__cell.heatmap__cell--step-4{background-color:var(--heatmap-step-4-bg);color:var(--heatmap-step-4-color)}.heatmap__cell.heatmap__cell--step-5{background-color:var(--heatmap-step-5-bg);color:var(--heatmap-step-5-color)}.heatmap__cell.heatmap__cell--step-6{background-color:var(--heatmap-step-6-bg);color:var(--heatmap-step-6-color)}.heatmap__cell.heatmap__cell--empty{background-color:var(--heatmap-empty-bg);background-image:repeating-linear-gradient(45deg, var(--heatmap-empty-pattern-color) 0, var(--heatmap-empty-pattern-color) var(--heatmap-empty-pattern-width), transparent var(--heatmap-empty-pattern-width), transparent calc(var(--heatmap-empty-pattern-width) * 2))}.heatmap__legend{align-items:center;gap:var(--heatmap-legend-gap);font-size:var(--heatmap-legend-font-size);color:var(--heatmap-legend-color);flex-wrap:wrap;margin-block-start:var(--heatmap-margin-block-start);display:flex}.heatmap__ramp{gap:var(--heatmap-legend-swatch-gap);display:flex}.heatmap__swatch{inline-size:var(--heatmap-legend-swatch-size);block-size:var(--heatmap-legend-swatch-size)}.heatmap__swatch.heatmap__swatch--step-1{background-color:var(--heatmap-step-1-bg)}.heatmap__swatch.heatmap__swatch--step-2{background-color:var(--heatmap-step-2-bg)}.heatmap__swatch.heatmap__swatch--step-3{background-color:var(--heatmap-step-3-bg)}.heatmap__swatch.heatmap__swatch--step-4{background-color:var(--heatmap-step-4-bg)}.heatmap__swatch.heatmap__swatch--step-5{background-color:var(--heatmap-step-5-bg)}.heatmap__swatch.heatmap__swatch--step-6{background-color:var(--heatmap-step-6-bg)}

package/dist/heatmap.js

@@ -0,0 +1,104 @@
+'use client';
+import './heatmap.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { forwardRef as n, useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+function o(e, t) {
+	if (e == null || !Number.isFinite(e)) return null;
+	let n = Math.max(2, Math.min(6, Math.round(t.steps)));
+	if (t.max <= t.min) return n;
+	let r = (Math.max(t.min, Math.min(t.max, e)) - t.min) / (t.max - t.min);
+	return Math.min(n, Math.floor(r * n) + 1);
+}
+function s(e, t) {
+	let n = Math.max(2, Math.min(6, Math.round(t)));
+	return Math.round((Math.max(1, Math.min(n, Math.round(e))) - 1) * 5 / (n - 1)) + 1;
+}
+//#endregion
+//#region src/stories/molecules/Heatmap/Heatmap.tsx
+var c = (e, t) => `${e}\u0000${t}`, l = n(function({ rows: n, columns: l, cells: u, min: d = 0, max: f, steps: p = 5, rowHeader: m, showValues: h = !0, formatValue: g, locale: _ = "es-ES", showLegend: v = !0, minLabel: y, maxLabel: b, label: x, emptyLabel: S, scaleLabel: C, className: w, ...T }, E) {
+	let D = e("heatmap"), O = r(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of u) e.set(c(t.rowId, t.columnKey), t.value);
+		return e;
+	}, [u]), k = r(() => {
+		if (f !== void 0) return f;
+		let e = u.map((e) => e.value).filter((e) => e !== null && Number.isFinite(e));
+		return e.length > 0 ? Math.max(...e) : d + 1;
+	}, [
+		u,
+		f,
+		d
+	]), A = Math.max(2, Math.min(6, Math.round(p))), j = {
+		min: d,
+		max: k,
+		steps: A
+	}, M = r(() => new Intl.NumberFormat(_, { maximumFractionDigits: 1 }), [_]), N = g ?? ((e) => M.format(e)), P = r(() => {
+		let e = [];
+		for (let t of l) {
+			let n = e[e.length - 1];
+			n && n.group === t.group ? n.span += 1 : e.push({
+				group: t.group,
+				span: 1
+			});
+		}
+		return e;
+	}, [l]), F = l.some((e) => e.group !== void 0);
+	return /* @__PURE__ */ a("div", {
+		ref: E,
+		className: ["heatmap", w].filter(Boolean).join(" "),
+		...T,
+		children: [/* @__PURE__ */ i("div", {
+			className: "heatmap__wrap",
+			children: /* @__PURE__ */ a("table", {
+				className: "heatmap__table",
+				children: [
+					/* @__PURE__ */ i("caption", {
+						className: "visually-hidden",
+						children: D("label", x)
+					}),
+					/* @__PURE__ */ a("thead", { children: [F ? /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("td", { className: "heatmap__corner" }), P.map((e, t) => /* @__PURE__ */ i("th", {
+						className: "heatmap__group",
+						scope: "colgroup",
+						colSpan: e.span,
+						children: e.group
+					}, `${e.group ?? ""}-${t}`))] }) : null, /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("th", {
+						className: "heatmap__corner",
+						scope: "col",
+						children: m
+					}), l.map((e) => /* @__PURE__ */ i("th", {
+						className: "heatmap__column-header",
+						scope: "col",
+						children: e.label
+					}, e.key))] })] }),
+					/* @__PURE__ */ i("tbody", { children: n.map((e) => /* @__PURE__ */ a("tr", { children: [/* @__PURE__ */ i("th", {
+						className: "heatmap__row-header",
+						scope: "row",
+						children: e.label
+					}), l.map((n) => {
+						let r = O.get(c(e.id, n.key)) ?? null, a = o(r, j), l = ["heatmap__cell", a === null ? "heatmap__cell--empty" : `heatmap__cell--step-${s(a, A)}`].join(" "), u = r === null ? D("empty", S) : N(r);
+						return /* @__PURE__ */ i("td", {
+							className: l,
+							children: h && r !== null ? u : /* @__PURE__ */ i(t, { children: u })
+						}, n.key);
+					})] }, e.id)) })
+				]
+			})
+		}), v ? /* @__PURE__ */ a("p", {
+			className: "heatmap__legend",
+			children: [
+				/* @__PURE__ */ i("span", { children: y ?? N(d) }),
+				/* @__PURE__ */ i("span", {
+					className: "heatmap__ramp",
+					role: "img",
+					"aria-label": D("scale", C),
+					children: Array.from({ length: A }, (e, t) => /* @__PURE__ */ i("span", { className: `heatmap__swatch heatmap__swatch--step-${s(t + 1, A)}` }, t))
+				}),
+				/* @__PURE__ */ i("span", { children: b ?? N(k) })
+			]
+		}) : null]
+	});
+});
+//#endregion
+export { l as Heatmap };

package/dist/org-chart.css

@@ -0,0 +1 @@
+.org-chart{gap:var(--org-chart-gap);font-family:var(--org-chart-font-family);flex-direction:column;display:flex}.org-chart__toolbar{align-items:center;gap:var(--org-chart-gap);display:flex}.org-chart__viewport{max-block-size:var(--org-chart-viewport-block-size);padding-block:var(--org-chart-viewport-padding);padding-inline:var(--org-chart-viewport-padding);background-color:var(--org-chart-viewport-bg);border:var(--org-chart-viewport-border-width) solid var(--org-chart-viewport-border-color);border-radius:var(--org-chart-viewport-radius);overflow:auto}.org-chart__viewport:focus-visible{outline:var(--org-chart-focus-ring-width) solid var(--org-chart-focus-ring-color);outline-offset:var(--org-chart-focus-ring-offset)}.org-chart__canvas{zoom:var(--org-chart-zoom,1);justify-content:center;min-inline-size:max-content;display:flex}.org-chart__level{justify-content:center;gap:var(--org-chart-sibling-gap);margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none;display:flex}.org-chart__level--children{padding-block-start:var(--org-chart-connector-length);position:relative}.org-chart__level--children:before{content:"";inline-size:var(--org-chart-connector-width);block-size:calc(var(--org-chart-connector-length) / 2);background-color:var(--org-chart-connector-color);position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translate(-50%)}.org-chart__node{flex-direction:column;align-items:center;display:flex;position:relative}.org-chart__level--children>.org-chart__node:before{content:"";inline-size:var(--org-chart-connector-width);block-size:calc(var(--org-chart-connector-length) / 2);background-color:var(--org-chart-connector-color);position:absolute;inset-block-start:calc(-1 * var(--org-chart-connector-length) / 2);inset-inline-start:50%;transform:translate(-50%)}.org-chart__level--children>.org-chart__node:after{content:"";inline-size:100%;block-size:var(--org-chart-connector-width);background-color:var(--org-chart-connector-color);position:absolute;inset-block-start:calc(-1 * var(--org-chart-connector-length) / 2);inset-inline-start:0}.org-chart__level--children>.org-chart__node:first-child:after{inline-size:50%;inset-inline-start:50%}.org-chart__level--children>.org-chart__node:last-child:after{inline-size:50%;inset-inline-start:0}.org-chart__level--children>.org-chart__node:only-child:after{content:none}.org-chart__card{gap:var(--org-chart-card-gap);inline-size:var(--org-chart-card-inline-size);padding-block:var(--org-chart-card-padding-block);padding-inline:var(--org-chart-card-padding-inline);background-color:var(--org-chart-card-bg);border:var(--org-chart-card-border-width) solid var(--org-chart-card-border-color);border-radius:var(--org-chart-card-radius);text-align:start;flex-direction:column;display:flex}.org-chart__header{justify-content:space-between;align-items:center;gap:var(--org-chart-group-gap);display:flex}.org-chart__name{font-size:var(--org-chart-name-font-size);font-weight:var(--org-chart-name-font-weight);color:var(--org-chart-name-color);margin-block:0}.org-chart__group+.org-chart__group{margin-block-start:var(--org-chart-group-margin-block-start)}.org-chart__group-label{font-size:var(--org-chart-group-font-size);color:var(--org-chart-group-color);margin-block-end:var(--org-chart-group-gap);display:block}.org-chart__people{gap:var(--org-chart-person-gap);flex-direction:column;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none;display:flex}.org-chart__person{font-size:var(--org-chart-person-font-size);color:var(--org-chart-person-color)}.org-chart__role{font-size:var(--org-chart-person-role-font-size);color:var(--org-chart-person-role-color);display:block}.org-chart__empty{font-size:var(--org-chart-person-font-size);color:var(--org-chart-empty-color)}

package/dist/org-chart.js

@@ -0,0 +1,122 @@
+'use client';
+import './org-chart.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { Button as n } from "./button.js";
+import { t as r } from "./_shared/css-properties.js";
+import { forwardRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/stories/organisms/OrgChart/OrgChart.tsx
+var l = (e, t, n) => Math.min(n, Math.max(t, e)), u = i(function({ nodes: i, collapsed: u, defaultCollapsed: d, onCollapsedChange: f, zoom: p, defaultZoom: m = 1, onZoomChange: h, minZoom: g = .5, maxZoom: _ = 1.5, zoomStep: v = .1, showZoom: y = !0, toolbar: b, showPeople: x = !0, label: S, managersLabel: C, membersLabel: w, className: T, ...E }, D) {
+	let O = e("orgChart"), [k, A] = a(d ?? []), j = u ?? k, [M, N] = a(m), P = l(p ?? M, g, _), F = r({ "--org-chart-zoom": String(P) }), I = (e) => {
+		let t = j.includes(e) ? j.filter((t) => t !== e) : [...j, e];
+		u === void 0 && A(t), f?.(t);
+	}, L = (e) => {
+		let t = l(Number(e.toFixed(4)), g, _);
+		p === void 0 && N(t), h?.(t);
+	}, R = (e, t, n) => /* @__PURE__ */ c("div", {
+		className: "org-chart__group",
+		children: [/* @__PURE__ */ s("span", {
+			className: "org-chart__group-label",
+			children: t
+		}), e && e.length > 0 ? /* @__PURE__ */ s("ul", {
+			className: "org-chart__people",
+			children: e.map((e) => /* @__PURE__ */ c("li", {
+				className: "org-chart__person",
+				children: [e.label ?? e.name, e.role ? /* @__PURE__ */ s("span", {
+					className: "org-chart__role",
+					children: e.role
+				}) : null]
+			}, e.id))
+		}) : /* @__PURE__ */ s("span", {
+			className: "org-chart__empty",
+			children: n
+		})]
+	}), z = (e, r) => /* @__PURE__ */ s("ul", {
+		className: ["org-chart__level", r ? "org-chart__level--root" : "org-chart__level--children"].join(" "),
+		children: e.map((e) => {
+			let r = e.children ?? [], i = j.includes(e.id), a = r.length > 0 && !i;
+			return /* @__PURE__ */ c("li", {
+				className: "org-chart__node",
+				children: [/* @__PURE__ */ c("div", {
+					className: "org-chart__card",
+					children: [/* @__PURE__ */ c("div", {
+						className: "org-chart__header",
+						children: [/* @__PURE__ */ s("p", {
+							className: "org-chart__name",
+							children: e.label ?? e.name
+						}), r.length > 0 ? /* @__PURE__ */ s(n, {
+							type: "button",
+							variant: "ghost",
+							size: "sm",
+							iconOnly: !0,
+							"aria-label": i ? O("expand")(e.name) : O("collapse")(e.name),
+							"aria-expanded": !i,
+							onClick: () => I(e.id),
+							children: /* @__PURE__ */ s(t, {
+								name: i ? "chevron-right" : "chevron-down",
+								size: "sm"
+							})
+						}) : null]
+					}), x ? /* @__PURE__ */ c("div", { children: [R(e.managers, O("managers", C), O("noManagers")), R(e.members, O("members", w), O("noMembers"))] }) : null]
+				}), a ? z(r, !1) : null]
+			}, e.id);
+		})
+	});
+	return /* @__PURE__ */ c("div", {
+		ref: D,
+		className: ["org-chart", T].filter(Boolean).join(" "),
+		...E,
+		children: [y || b ? /* @__PURE__ */ c("div", {
+			className: "org-chart__toolbar",
+			children: [y ? /* @__PURE__ */ c(o, { children: [
+				/* @__PURE__ */ s(n, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					iconOnly: !0,
+					"aria-label": O("zoomOut"),
+					disabled: P <= g,
+					onClick: () => L(P - v),
+					children: /* @__PURE__ */ s(t, {
+						name: "zoom-out",
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ s(n, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					iconOnly: !0,
+					"aria-label": O("zoomIn"),
+					disabled: P >= _,
+					onClick: () => L(P + v),
+					children: /* @__PURE__ */ s(t, {
+						name: "zoom-in",
+						size: "sm"
+					})
+				}),
+				/* @__PURE__ */ s(n, {
+					type: "button",
+					variant: "text",
+					size: "sm",
+					disabled: P === 1,
+					onClick: () => L(1),
+					children: O("zoomReset")
+				})
+			] }) : null, b]
+		}) : null, /* @__PURE__ */ s("div", {
+			className: "org-chart__viewport",
+			tabIndex: 0,
+			role: "group",
+			"aria-label": O("label", S),
+			children: /* @__PURE__ */ s("div", {
+				className: "org-chart__canvas",
+				ref: F,
+				children: z(i, !0)
+			})
+		})]
+	});
+});
+//#endregion
+export { u as OrgChart };

package/dist/planning-grid.css

@@ -0,0 +1 @@
+.planning-grid{font-family:var(--planning-grid-font-family)}.planning-grid__wrap{border:var(--planning-grid-border-width) solid var(--planning-grid-border-color);border-radius:var(--planning-grid-radius);overflow:auto visible}.planning-grid__table{border-collapse:collapse;inline-size:100%}.planning-grid__corner,.planning-grid__row-header,.planning-grid__footer-header{z-index:1;min-inline-size:var(--planning-grid-row-header-width);max-inline-size:var(--planning-grid-row-header-width);padding-block:var(--planning-grid-row-header-padding-block);padding-inline:var(--planning-grid-row-header-padding-inline);text-align:start;background-color:var(--planning-grid-row-header-bg);border-inline-end:var(--planning-grid-border-width) solid var(--planning-grid-border-color);position:sticky;inset-inline-start:0}.planning-grid__corner{z-index:2;background-color:var(--planning-grid-column-header-bg);border-block-end:var(--planning-grid-border-width) solid var(--planning-grid-border-color)}.planning-grid__row-header{font-size:var(--planning-grid-row-header-font-size);font-weight:var(--planning-grid-row-header-font-weight);color:var(--planning-grid-row-header-color)}.planning-grid__footer-header{background-color:var(--planning-grid-footer-bg);font-size:var(--planning-grid-row-header-font-size);font-weight:var(--planning-grid-footer-font-weight);color:var(--planning-grid-footer-color)}.planning-grid__column-header{min-inline-size:var(--planning-grid-column-width);padding-block:var(--planning-grid-column-header-padding-block);padding-inline:var(--planning-grid-cell-padding-inline);background-color:var(--planning-grid-column-header-bg);font-size:var(--planning-grid-column-header-font-size);font-weight:var(--planning-grid-column-header-font-weight);color:var(--planning-grid-column-header-color);text-align:center;border-block-end:var(--planning-grid-border-width) solid var(--planning-grid-border-color);border-inline-end:var(--planning-grid-border-width) solid var(--planning-grid-border-color)}.planning-grid__column-sub{font-size:var(--planning-grid-column-header-sub-font-size);font-weight:var(--planning-grid-row-header-font-weight);color:var(--planning-grid-column-header-sub-color);display:block}.planning-grid__column-header.planning-grid__column-header--current{outline:var(--planning-grid-current-outline-width) solid var(--planning-grid-current-outline-color);outline-offset:calc(-1 * var(--planning-grid-current-outline-width))}.planning-grid__cell{padding-block:var(--planning-grid-cell-padding-block);padding-inline:var(--planning-grid-cell-padding-inline);font-size:var(--planning-grid-cell-font-size);color:var(--planning-grid-cell-color);text-align:center;font-variant-numeric:tabular-nums;border-inline-end:var(--planning-grid-border-width) solid var(--planning-grid-border-color);border-block-end:var(--planning-grid-border-width) solid var(--planning-grid-border-color)}.planning-grid__cell.planning-grid__cell--readonly{background-color:var(--planning-grid-cell-readonly-bg);color:var(--planning-grid-cell-readonly-color)}.planning-grid__cell.planning-grid__cell--pending{opacity:var(--planning-grid-pending-opacity)}.planning-grid__input{inline-size:var(--planning-grid-cell-input-width);text-align:center}.planning-grid__footer-cell{padding-block:var(--planning-grid-cell-padding-block);padding-inline:var(--planning-grid-cell-padding-inline);background-color:var(--planning-grid-footer-bg);font-size:var(--planning-grid-cell-font-size);font-weight:var(--planning-grid-footer-font-weight);color:var(--planning-grid-footer-color);text-align:center;font-variant-numeric:tabular-nums;border-inline-end:var(--planning-grid-border-width) solid var(--planning-grid-border-color)}.planning-grid__footer-cell.planning-grid__footer-cell--over{color:var(--planning-grid-over-color)}

package/dist/planning-grid.js

@@ -0,0 +1,167 @@
+'use client';
+import './planning-grid.css';
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { Input as n } from "./input.js";
+import { forwardRef as r, useId as i, useMemo as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/stories/organisms/PlanningGrid/planningHours.ts
+function u(e) {
+	let t = e.trim().replace(",", ".");
+	if (t === "") return 0;
+	if (!/^\d*\.?\d*$/.test(t)) return null;
+	let n = Number(t);
+	return Number.isFinite(n) && n >= 0 ? n : null;
+}
+//#endregion
+//#region src/stories/organisms/PlanningGrid/PlanningGrid.tsx
+var d = (e, t) => `${e}\u0000${t}`, f = r(function({ rows: n, columns: r, cells: i, onCellChange: o, readOnly: s = !1, rowHeader: u, showRowTotals: f = !0, showColumnTotals: m = !0, showCapacity: h = !1, showRemaining: g = !0, max: _ = 999, locale: v = "es-ES", formatHours: y, size: b = "sm", label: x, cellLabel: S, className: C, ...w }, T) {
+	let E = e("planningGrid"), D = a(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of i) e.set(d(t.rowId, t.columnKey), t);
+		return e;
+	}, [i]), O = a(() => new Intl.NumberFormat(v, { maximumFractionDigits: 2 }), [v]), k = y ?? ((e) => `${O.format(e)} h`), A = (e, t) => D.get(d(e, t))?.value ?? 0, j = (e) => r.reduce((t, n) => t + A(e, n.key), 0), M = (e) => n.reduce((t, n) => t + A(n.id, e), 0), N = r.some((e) => e.capacity !== void 0), P = !s && o !== void 0, F = S ?? E("cellLabel");
+	return /* @__PURE__ */ c("div", {
+		ref: T,
+		className: ["planning-grid", C].filter(Boolean).join(" "),
+		...w,
+		children: /* @__PURE__ */ c("div", {
+			className: "planning-grid__wrap",
+			children: /* @__PURE__ */ l("table", {
+				className: "planning-grid__table",
+				children: [
+					/* @__PURE__ */ c("caption", {
+						className: "visually-hidden",
+						children: E("label", x)
+					}),
+					/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ l("tr", { children: [
+						/* @__PURE__ */ c("th", {
+							className: "planning-grid__corner",
+							scope: "col",
+							children: u
+						}),
+						r.map((e) => /* @__PURE__ */ l("th", {
+							scope: "col",
+							className: ["planning-grid__column-header", e.current ? "planning-grid__column-header--current" : ""].filter(Boolean).join(" "),
+							children: [e.label ?? e.name, e.sublabel ? /* @__PURE__ */ c("span", {
+								className: "planning-grid__column-sub",
+								children: e.sublabel
+							}) : null]
+						}, e.key)),
+						f ? /* @__PURE__ */ c("th", {
+							className: "planning-grid__column-header",
+							scope: "col",
+							children: E("rowTotal")
+						}) : null
+					] }) }),
+					/* @__PURE__ */ c("tbody", { children: n.map((e) => /* @__PURE__ */ l("tr", { children: [
+						/* @__PURE__ */ c("th", {
+							className: "planning-grid__row-header",
+							scope: "row",
+							children: e.label ?? e.name
+						}),
+						r.map((t) => {
+							let n = D.get(d(e.id, t.key)), r = s || e.readOnly || t.readOnly || n?.readOnly || !P, i = n?.value ?? null;
+							return /* @__PURE__ */ c("td", {
+								className: [
+									"planning-grid__cell",
+									r ? "planning-grid__cell--readonly" : "",
+									n?.pending ? "planning-grid__cell--pending" : ""
+								].filter(Boolean).join(" "),
+								children: r ? i ? k(i) : null : /* @__PURE__ */ c(p, {
+									value: i,
+									max: _,
+									size: b,
+									locale: v,
+									error: n?.error,
+									label: F(e.name, t.name),
+									onCommit: (n) => o?.(e.id, t.key, n)
+								}, `${e.id}-${t.key}-${i ?? ""}`)
+							}, t.key);
+						}),
+						f ? /* @__PURE__ */ c("td", {
+							className: "planning-grid__footer-cell",
+							children: k(j(e.id))
+						}) : null
+					] }, e.id)) }),
+					m || (g || h) && N ? /* @__PURE__ */ l("tfoot", { children: [
+						m ? /* @__PURE__ */ l("tr", { children: [
+							/* @__PURE__ */ c("th", {
+								className: "planning-grid__footer-header",
+								scope: "row",
+								children: E("columnTotal")
+							}),
+							r.map((e) => /* @__PURE__ */ c("td", {
+								className: "planning-grid__footer-cell",
+								children: k(M(e.key))
+							}, e.key)),
+							f ? /* @__PURE__ */ c("td", {
+								className: "planning-grid__footer-cell",
+								children: k(n.reduce((e, t) => e + j(t.id), 0))
+							}) : null
+						] }) : null,
+						h && N ? /* @__PURE__ */ l("tr", { children: [
+							/* @__PURE__ */ c("th", {
+								className: "planning-grid__footer-header",
+								scope: "row",
+								children: E("capacity")
+							}),
+							r.map((e) => /* @__PURE__ */ c("td", {
+								className: "planning-grid__footer-cell",
+								children: e.capacity === void 0 ? null : k(e.capacity)
+							}, e.key)),
+							f ? /* @__PURE__ */ c("td", { className: "planning-grid__footer-cell" }) : null
+						] }) : null,
+						g && N ? /* @__PURE__ */ l("tr", { children: [
+							/* @__PURE__ */ c("th", {
+								className: "planning-grid__footer-header",
+								scope: "row",
+								children: E("remaining")
+							}),
+							r.map((e) => {
+								if (e.capacity === void 0) return /* @__PURE__ */ c("td", { className: "planning-grid__footer-cell" }, e.key);
+								let n = e.capacity - M(e.key), r = n < 0;
+								return /* @__PURE__ */ l("td", {
+									className: ["planning-grid__footer-cell", r ? "planning-grid__footer-cell--over" : ""].filter(Boolean).join(" "),
+									children: [k(n), r ? /* @__PURE__ */ c(t, { children: ` (${E("over")})` }) : null]
+								}, e.key);
+							}),
+							f ? /* @__PURE__ */ c("td", { className: "planning-grid__footer-cell" }) : null
+						] }) : null
+					] }) : null
+				]
+			})
+		})
+	});
+});
+function p({ value: e, max: r, size: a, locale: d, error: f, label: p, onCommit: m }) {
+	let h = e === null ? "" : new Intl.NumberFormat(d, { maximumFractionDigits: 2 }).format(e), [g, _] = o(h), v = i(), y = () => {
+		let t = u(g);
+		if (t === null) {
+			_(h);
+			return;
+		}
+		let n = Math.min(r, t);
+		n !== (e ?? 0) && m(n);
+	};
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
+		className: "planning-grid__input",
+		size: a,
+		inputMode: "decimal",
+		"aria-label": p,
+		"aria-describedby": f ? v : void 0,
+		error: !!f,
+		value: g,
+		onChange: (e) => _(e.target.value),
+		onBlur: y,
+		onKeyDown: (e) => {
+			e.key === "Enter" && (e.preventDefault(), e.currentTarget.blur());
+		}
+	}), f ? /* @__PURE__ */ c(t, {
+		id: v,
+		role: "alert",
+		children: f
+	}) : null] });
+}
+//#endregion
+export { f as PlanningGrid };

package/dist/recurrence-field.css

@@ -0,0 +1 @@
+.recurrence-field{gap:var(--recurrence-field-gap);flex-direction:column;display:flex}.recurrence-field__row{gap:var(--recurrence-field-row-gap);flex-wrap:wrap;display:flex}.recurrence-field__interval{inline-size:var(--recurrence-field-interval-width);flex:none}.recurrence-field__end{flex:12rem;min-inline-size:0}.recurrence-field__weekdays-label{font-size:var(--recurrence-field-legend-font-size);font-weight:var(--recurrence-field-legend-font-weight);color:var(--recurrence-field-legend-color);margin-block-end:var(--recurrence-field-legend-margin-block-end);display:block}.recurrence-field__weekdays{gap:var(--recurrence-field-weekdays-gap);flex-wrap:wrap;display:flex}