@studiolxd/brand 39.0.0 → 40.1.0

package/dist/tooltip.js

@@ -1,14 +1,14 @@
 'use client';
 import './tooltip.css';
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { forwardRef as n, useId as r, useState as i } from "react";
+import { forwardRef as e, useId as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Tooltip as a } from "@base-ui/react/tooltip";
 //#region src/stories/atoms/Tooltip/Tooltip.tsx
-function o({ children: t, delayDuration: n = 0, skipDelayDuration: r }) {
-	return /* @__PURE__ */ e(a.Provider, {
-		delay: n,
-		...r === void 0 ? {} : { timeout: r },
-		children: t
+function o({ children: e, delayDuration: t = 0, skipDelayDuration: n }) {
+	return /* @__PURE__ */ r(a.Provider, {
+		delay: t,
+		...n === void 0 ? {} : { timeout: n },
+		children: e
 	});
 }
 function s(e, t) {
@@ -19,37 +19,37 @@ function c() {
 	let e = document.documentElement;
 	return s(getComputedStyle(e).getPropertyValue("--tooltip-offset").trim(), e);
 }
-var l = n(function({ label: n, children: o, side: s = "top", align: l = "center", sideOffset: u, open: d, defaultOpen: f, onOpenChange: p, delayDuration: m, describe: h = !0, className: g, ..._ }, v) {
-	let y = r(), [b, x] = i(f ?? !1), S = d ?? b;
-	return /* @__PURE__ */ t(a.Root, {
+var l = e(function({ label: e, children: o, side: s = "top", align: l = "center", sideOffset: u, open: d, defaultOpen: f, onOpenChange: p, delayDuration: m, describe: h = !0, className: g, ..._ }, v) {
+	let y = t(), [b, x] = n(f ?? !1), S = d ?? b;
+	return /* @__PURE__ */ i(a.Root, {
 		open: d,
 		defaultOpen: f,
 		onOpenChange: (e) => {
 			d === void 0 && x(e), p?.(e);
 		},
-		children: [/* @__PURE__ */ e(a.Trigger, {
+		children: [/* @__PURE__ */ r(a.Trigger, {
 			ref: v,
 			render: o,
 			"aria-describedby": S && h ? y : void 0,
 			...m === void 0 ? {} : { delay: m },
 			..._
-		}), /* @__PURE__ */ e(a.Portal, { children: /* @__PURE__ */ e(a.Positioner, {
+		}), /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
 			className: "tooltip__positioner",
 			side: s,
 			align: l,
 			sideOffset: u ?? c,
-			children: /* @__PURE__ */ t(a.Popup, {
+			children: /* @__PURE__ */ i(a.Popup, {
 				id: y,
 				role: "tooltip",
 				className: ["tooltip", g].filter(Boolean).join(" "),
-				children: [n, /* @__PURE__ */ e(a.Arrow, {
+				children: [e, /* @__PURE__ */ r(a.Arrow, {
 					className: "tooltip__arrow",
-					children: /* @__PURE__ */ e("svg", {
+					children: /* @__PURE__ */ r("svg", {
 						width: "10",
 						height: "5",
 						viewBox: "0 0 30 10",
 						preserveAspectRatio: "none",
-						children: /* @__PURE__ */ e("polygon", { points: "0,0 30,0 15,10" })
+						children: /* @__PURE__ */ r("polygon", { points: "0,0 30,0 15,10" })
 					})
 				})]
 			})

package/dist/tree-view.js

@@ -1,8 +1,8 @@
 'use client';
 import './tree-view.css';
 import { Icon as e } from "./icon.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useCallback as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+import { useCallback as t, useId as n, useMemo as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/molecules/TreeView/TreeView.tsx
 var c = 500;
 function l(e, t, n = 1, r) {
@@ -13,18 +13,18 @@ function l(e, t, n = 1, r) {
 	}, ...e.children && t.has(e.id) ? l(e.children, t, n + 1, e.id) : []]);
 }
 function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, selected: m, defaultSelected: h, onSelectedChange: g, label: _ = "Árbol", truncateFromLevel: v = 4, nodeRef: y, className: b, ...x }) {
-	let S = i(), C = o(null), [w, T] = s(f ?? []), E = d !== void 0, D = E ? d : w, [O, k] = s(h), A = m !== void 0, j = A ? m : O, M = a(() => new Set(D), [D]), N = a(() => l(u, M), [u, M]), [P, F] = s(void 0), I = P && N.some((e) => e.node.id === P) ? P : j && N.some((e) => e.node.id === j) ? j : N[0]?.node.id, L = o(""), R = o(0), z = r((e) => {
+	let S = n(), C = i(null), [w, T] = a(f ?? []), E = d !== void 0, D = E ? d : w, [O, k] = a(h), A = m !== void 0, j = A ? m : O, M = r(() => new Set(D), [D]), N = r(() => l(u, M), [u, M]), [P, F] = a(void 0), I = P && N.some((e) => e.node.id === P) ? P : j && N.some((e) => e.node.id === j) ? j : N[0]?.node.id, L = i(""), R = i(0), z = t((e) => {
 		E || T(e), p?.(e);
-	}, [E, p]), B = r((e, t) => {
+	}, [E, p]), B = t((e, t) => {
 		let n = M.has(e), r = t ?? !n;
 		r !== n && z(r ? [...D, e] : D.filter((t) => t !== e));
 	}, [
 		D,
 		M,
 		z
-	]), V = r((e) => {
+	]), V = t((e) => {
 		A || k(e), g?.(e);
-	}, [A, g]), H = r((e) => {
+	}, [A, g]), H = t((e) => {
 		let t = N.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !M.has(e));
 		t.length !== 0 && z([...D, ...t]);
 	}, [
@@ -32,9 +32,9 @@ function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, sel
 		N,
 		M,
 		z
-	]), U = r((e) => `${S}-${e}`, [S]), W = r((e) => {
+	]), U = t((e) => `${S}-${e}`, [S]), W = t((e) => {
 		e && (F(e), C.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
-	}, []), G = r((e, t) => {
+	}, []), G = t((e, t) => {
 		let n = Date.now(), r = n - R.current > c ? e : L.current + e;
 		L.current = r, R.current = n;
 		let i = r.length === 1 ? t + 1 : Math.max(t, 0), a = r.toLowerCase();
@@ -79,80 +79,80 @@ function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, sel
 				break;
 		}
 	}
-	function q(r, i, a) {
-		return r.map((r) => {
-			let o = !!r.children?.length, s = o && M.has(r.id), c = j === r.id, l = s && r.iconExpanded || r.icon, u = i >= v, d = u && typeof r.label == "string" ? r.label : void 0, f = r.dropTarget ? "target" : r.dropDisabled ? "disabled" : void 0;
-			return /* @__PURE__ */ n("li", {
+	function q(t, n, r) {
+		return t.map((t) => {
+			let i = !!t.children?.length, a = i && M.has(t.id), c = j === t.id, l = a && t.iconExpanded || t.icon, u = n >= v, d = u && typeof t.label == "string" ? t.label : void 0, f = t.dropTarget ? "target" : t.dropDisabled ? "disabled" : void 0;
+			return /* @__PURE__ */ s("li", {
 				role: "treeitem",
-				"data-tree-item": r.id,
-				"aria-labelledby": U(r.id),
-				"aria-expanded": o ? s : void 0,
+				"data-tree-item": t.id,
+				"aria-labelledby": U(t.id),
+				"aria-expanded": i ? a : void 0,
 				"aria-selected": c,
-				"aria-level": i,
-				"aria-disabled": r.disabled || void 0,
+				"aria-level": n,
+				"aria-disabled": t.disabled || void 0,
 				"data-drop": f,
-				tabIndex: I === r.id ? 0 : -1,
+				tabIndex: I === t.id ? 0 : -1,
 				className: [
 					"tree-view__item",
 					c ? "tree-view__item--selected" : "",
-					r.disabled ? "tree-view__item--disabled" : "",
-					r.dropTarget ? "tree-view__item--drop-target" : "",
-					r.dropDisabled ? "tree-view__item--drop-disabled" : ""
+					t.disabled ? "tree-view__item--disabled" : "",
+					t.dropTarget ? "tree-view__item--drop-target" : "",
+					t.dropDisabled ? "tree-view__item--drop-disabled" : ""
 				].filter(Boolean).join(" "),
 				onKeyDown: (e) => {
 					e.target === e.currentTarget && K(e, {
-						node: r,
-						level: i,
-						parentId: a
+						node: t,
+						level: n,
+						parentId: r
 					});
 				},
 				onFocus: (e) => {
-					e.target === e.currentTarget && F(r.id);
+					e.target === e.currentTarget && F(t.id);
 				},
-				onClick: r.disabled ? void 0 : (e) => {
-					e.stopPropagation(), o && B(r.id), V(r.id), W(r.id);
+				onClick: t.disabled ? void 0 : (e) => {
+					e.stopPropagation(), i && B(t.id), V(t.id), W(t.id);
 				},
-				children: [/* @__PURE__ */ n("span", {
+				children: [/* @__PURE__ */ s("span", {
 					className: "tree-view__row",
-					ref: y ? (e) => y(r.id, e) : void 0,
+					ref: y ? (e) => y(t.id, e) : void 0,
 					children: [
-						/* @__PURE__ */ t("span", {
+						/* @__PURE__ */ o("span", {
 							className: "tree-view__chevron-slot",
 							"aria-hidden": "true",
-							children: o && /* @__PURE__ */ t(e, {
+							children: i && /* @__PURE__ */ o(e, {
 								name: "chevron",
 								className: "tree-view__chevron",
 								size: "sm"
 							})
 						}),
-						l && /* @__PURE__ */ t("span", {
+						l && /* @__PURE__ */ o("span", {
 							className: "tree-view__icon",
 							"aria-hidden": "true",
 							children: l
 						}),
-						/* @__PURE__ */ t("span", {
+						/* @__PURE__ */ o("span", {
 							className: ["tree-view__label", u ? "tree-view__label--truncated" : ""].filter(Boolean).join(" "),
-							id: U(r.id),
+							id: U(t.id),
 							title: d,
-							children: r.label
+							children: t.label
 						}),
-						r.actions && /* @__PURE__ */ t("span", {
+						t.actions && /* @__PURE__ */ o("span", {
 							className: "tree-view__actions",
 							onClick: (e) => e.stopPropagation(),
 							onKeyDown: (e) => e.stopPropagation(),
 							onKeyUp: (e) => e.stopPropagation(),
-							children: r.actions
+							children: t.actions
 						})
 					]
-				}), o && s && /* @__PURE__ */ t("ul", {
+				}), i && a && /* @__PURE__ */ o("ul", {
 					role: "group",
 					className: "tree-view__group",
-					children: q(r.children, i + 1, r.id)
+					children: q(t.children, n + 1, t.id)
 				})]
-			}, r.id);
+			}, t.id);
 		});
 	}
-	return /* @__PURE__ */ t("ul", {
+	return /* @__PURE__ */ o("ul", {
 		ref: C,
 		role: "tree",
 		"aria-label": _,

package/dist/uptime-bars.js

@@ -1,8 +1,8 @@
 'use client';
 import './uptime-bars.css';
 import { Tooltip as e } from "./tooltip.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { forwardRef as r, useRef as i, useState as a } from "react";
+import { forwardRef as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/stories/molecules/UptimeBars/uptimeStatus.ts
 var o = {
 	ok: 99.65,
@@ -13,11 +13,11 @@ function s(e, t) {
 }
 //#endregion
 //#region src/stories/molecules/UptimeBars/UptimeBars.tsx
-var c = r(function({ points: r, summary: c, label: l = "Disponibilidad", startLabel: u, endLabel: d, thresholds: f, locale: p = "es-ES", maximumFractionDigits: m = 2, pointLabel: h, noDataLabel: g = "sin datos", tooltips: _ = !0, className: v, ...y }, b) {
+var c = t(function({ points: t, summary: c, label: l = "Disponibilidad", startLabel: u, endLabel: d, thresholds: f, locale: p = "es-ES", maximumFractionDigits: m = 2, pointLabel: h, noDataLabel: g = "sin datos", tooltips: _ = !0, className: v, ...y }, b) {
 	let x = {
 		...o,
 		...f
-	}, S = i([]), [C, w] = a(0), T = new Intl.NumberFormat(p, {
+	}, S = n([]), [C, w] = r(0), T = new Intl.NumberFormat(p, {
 		style: "percent",
 		maximumFractionDigits: m
 	}), E = (e) => e === null || !Number.isFinite(e) ? null : T.format(e / 100), D = (e, t) => {
@@ -25,70 +25,70 @@ var c = r(function({ points: r, summary: c, label: l = "Disponibilidad", startLa
 		let n = `${e.label}: ${t ?? g}`;
 		return e.detail ? `${n}. ${e.detail}` : n;
 	}, O = (e) => {
-		let t = Math.max(0, Math.min(r.length - 1, e));
-		w(t), S.current[t]?.focus();
-	}, k = (e, t) => {
-		let n = {
+		let n = Math.max(0, Math.min(t.length - 1, e));
+		w(n), S.current[n]?.focus();
+	}, k = (e, n) => {
+		let r = {
 			ArrowRight: 1,
 			ArrowDown: 1,
 			ArrowLeft: -1,
 			ArrowUp: -1
 		}[e.key];
-		if (n) {
-			e.preventDefault(), O(t + n);
+		if (r) {
+			e.preventDefault(), O(n + r);
 			return;
 		}
-		e.key === "Home" ? (e.preventDefault(), O(0)) : e.key === "End" && (e.preventDefault(), O(r.length - 1));
-	}, A = Math.max(0, Math.min(C, r.length - 1));
-	return /* @__PURE__ */ n("div", {
+		e.key === "Home" ? (e.preventDefault(), O(0)) : e.key === "End" && (e.preventDefault(), O(t.length - 1));
+	}, A = Math.max(0, Math.min(C, t.length - 1));
+	return /* @__PURE__ */ a("div", {
 		ref: b,
 		className: ["uptime-bars", v].filter(Boolean).join(" "),
 		...y,
-		children: [/* @__PURE__ */ t("ol", {
+		children: [/* @__PURE__ */ i("ol", {
 			className: "uptime-bars__list",
 			"aria-label": l,
-			children: r.map((r, i) => {
-				let a = E(r.value), o = /* @__PURE__ */ t("span", {
-					className: `uptime-bars__bar uptime-bars__bar--${s(r.value, x)}`,
+			children: t.map((t, n) => {
+				let r = E(t.value), o = /* @__PURE__ */ i("span", {
+					className: `uptime-bars__bar uptime-bars__bar--${s(t.value, x)}`,
 					role: "img",
-					"aria-label": D(r, a),
-					tabIndex: _ ? i === A ? 0 : -1 : void 0,
-					onKeyDown: _ ? (e) => k(e, i) : void 0,
-					onFocus: _ ? () => w(i) : void 0
+					"aria-label": D(t, r),
+					tabIndex: _ ? n === A ? 0 : -1 : void 0,
+					onKeyDown: _ ? (e) => k(e, n) : void 0,
+					onFocus: _ ? () => w(n) : void 0
 				});
-				return /* @__PURE__ */ t("li", {
+				return /* @__PURE__ */ i("li", {
 					className: "uptime-bars__item",
-					children: _ ? /* @__PURE__ */ t(e, {
+					children: _ ? /* @__PURE__ */ i(e, {
 						ref: (e) => {
-							S.current[i] = e;
+							S.current[n] = e;
 						},
-						label: /* @__PURE__ */ n("span", {
+						label: /* @__PURE__ */ a("span", {
 							className: "uptime-bars__tooltip",
 							children: [
-								/* @__PURE__ */ t("span", {
+								/* @__PURE__ */ i("span", {
 									className: "uptime-bars__tooltip-label",
-									children: r.label
+									children: t.label
 								}),
-								/* @__PURE__ */ t("span", { children: a ?? g }),
-								r.detail ? /* @__PURE__ */ t("span", { children: r.detail }) : null
+								/* @__PURE__ */ i("span", { children: r ?? g }),
+								t.detail ? /* @__PURE__ */ i("span", { children: t.detail }) : null
 							]
 						}),
 						children: o
 					}) : o
-				}, `${r.label}-${i}`);
+				}, `${t.label}-${n}`);
 			})
-		}), /* @__PURE__ */ n("p", {
+		}), /* @__PURE__ */ a("p", {
 			className: "uptime-bars__footer",
 			children: [
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ i("span", {
 					className: "uptime-bars__edge",
 					children: u
 				}),
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ i("span", {
 					className: "uptime-bars__summary",
 					children: c
 				}),
-				/* @__PURE__ */ t("span", {
+				/* @__PURE__ */ i("span", {
 					className: "uptime-bars__edge uptime-bars__edge--end",
 					children: d
 				})

package/dist/user-message.js

@@ -1,25 +1,25 @@
 import './user-message.css';
 import { MessageBubble as e } from "./message-bubble.js";
 import { t } from "./_shared/messagetimestamp.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/molecules/UserMessage/UserMessage.tsx
-var a = i(function({ children: i, author: a, timestamp: o, locale: s, timestampFormat: c, className: l, ...u }, d) {
+var a = n(function({ children: n, author: a, timestamp: o, locale: s, timestampFormat: c, className: l, ...u }, d) {
 	let f = t(o, s, c);
-	return /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ i("div", {
 		ref: d,
 		className: `user-message${l ? ` ${l}` : ""}`,
 		...u,
 		children: [
-			a && /* @__PURE__ */ n("span", {
+			a && /* @__PURE__ */ r("span", {
 				className: "user-message__author",
 				children: a
 			}),
-			/* @__PURE__ */ n(e, {
+			/* @__PURE__ */ r(e, {
 				role: "user",
-				children: i
+				children: n
 			}),
-			f && /* @__PURE__ */ n("time", {
+			f && /* @__PURE__ */ r("time", {
 				className: "user-message__timestamp",
 				dateTime: f.dateTime,
 				children: f.label

package/dist/visually-hidden.js

@@ -1,13 +1,13 @@
 /* empty css                       */
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/stories/atoms/VisuallyHidden/VisuallyHidden.tsx
-var n = t(function({ children: t, as: n = "span", className: r, ...i }, a) {
-	return /* @__PURE__ */ e(n, {
+var n = e(function({ children: e, as: n = "span", className: r, ...i }, a) {
+	return /* @__PURE__ */ t(n, {
 		ref: a,
 		className: ["visually-hidden", r].filter(Boolean).join(" "),
 		...i,
-		children: t
+		children: e
 	});
 });
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "39.0.0",
+  "version": "40.1.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",
@@ -457,6 +457,10 @@
       "types": "./dist/_types/atoms/OtpInput/OtpInput.d.ts",
       "import": "./dist/otp-input.js"
     },
+    "./messages": {
+      "types": "./dist/_types/messages/index.d.ts",
+      "import": "./dist/messages.js"
+    },
     "./pagination": {
       "types": "./dist/_types/molecules/Pagination/Pagination.d.ts",
       "import": "./dist/pagination.js"

package/src/tokens/molecules/annotation-thread.css

@@ -12,6 +12,7 @@
   --annotation-thread-item-gap: var(--spacing-2); /** Separación entre la cabecera, el cuerpo y las acciones de una anotación */
   --annotation-thread-items-gap: var(--spacing-4); /** Separación entre anotaciones */
   --annotation-thread-header-gap: var(--spacing-2); /** Separación entre autor, fecha y marca de editada */
+  --annotation-thread-acknowledged-opacity: var(--opacity-muted); /** Un hilo atendido da un paso atrás: sigue vivo, pero ya no es lo primero que hay que mirar */
   --annotation-thread-resolved-opacity: var(--opacity-disabled); /** Un hilo resuelto se retira: baja de intensidad sin desaparecer */
   --annotation-thread-border-width: var(--border-width-default); /** Grosor del borde del hilo */
   --annotation-thread-border-color: var(--color-border-default-on-light); /** Borde del hilo */

package/src/tokens/scss/molecules/_annotation-thread.scss

@@ -25,4 +25,5 @@ $lxd-annotation-thread-body-line-height: 1.5; // Interlineado del cuerpo
 $lxd-annotation-thread-body-color: #111e30; // Tinta del cuerpo
 $lxd-annotation-thread-replies-label-font-size: 0.875rem; // Tamaño del rótulo que cuenta las respuestas
 $lxd-annotation-thread-replies-label-color: #4a4a4a; // Tinta del rótulo que cuenta las respuestas
+$lxd-annotation-thread-acknowledged-opacity: 0.7; // Un hilo atendido da un paso atrás: sigue vivo, pero ya no es lo primero que hay que mirar
 $lxd-annotation-thread-resolved-opacity: 0.4; // Un hilo resuelto se retira: baja de intensidad sin desaparecer

package/src/tokens/tokens.json

@@ -3102,6 +3102,7 @@
   "--annotation-thread-body-color": "#111e30",
   "--annotation-thread-replies-label-font-size": "0.875rem",
   "--annotation-thread-replies-label-color": "#4a4a4a",
+  "--annotation-thread-acknowledged-opacity": "0.7",
   "--annotation-thread-resolved-opacity": "0.4",
   "--chart-series-1": "#1e7ff6",
   "--chart-series-2": "#f16123",