@studiolxd/brand 48.1.0 → 49.0.1

package/dist/conversation-list.js

@@ -1,95 +1,96 @@
 'use client';
 import './conversation-list.css';
-import { Icon as e } from "./icon.js";
-import { Button as t } from "./button.js";
-import { Skeleton as n } from "./skeleton.js";
-import { Tooltip as r } from "./tooltip.js";
-import { Alert as i } from "./alert.js";
-import { EmptyState as a } from "./empty-state.js";
-import { forwardRef as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { Button as n } from "./button.js";
+import { Skeleton as r } from "./skeleton.js";
+import { Tooltip as i } from "./tooltip.js";
+import { Alert as a } from "./alert.js";
+import { EmptyState as o } from "./empty-state.js";
+import { forwardRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/stories/molecules/ConversationList/ConversationList.tsx
-function u(e) {
+function d(e) {
 	return e.scrollWidth > e.clientWidth + 1;
 }
-var d = o(function({ conversations: o, activeId: d, onNew: f, onSelect: p, onDelete: m, newLabel: h = "Nueva conversación", navLabel: g = "Conversaciones", deleteLabel: _ = (e) => `Eliminar conversación "${e}"`, isLoading: v = !1, loadingCount: y = 4, error: b, emptyMessage: x = "Todavía no hay conversaciones", errorTitle: S = "No se pudieron cargar las conversaciones", className: C, ...w }, T) {
-	let [E, D] = s(null), O = b === void 0 ? v ? "loading" : o.length === 0 ? "empty" : "list" : "error";
-	return /* @__PURE__ */ l("div", {
-		ref: T,
-		className: `conversation-list${C ? ` ${C}` : ""}`,
-		...w,
-		children: [/* @__PURE__ */ c("div", {
+var f = s(function({ conversations: s, activeId: f, onNew: p, onSelect: m, onDelete: h, newLabel: g, navLabel: _, deleteLabel: v, isLoading: y = !1, loadingCount: b = 4, error: x, emptyMessage: S, errorTitle: C, className: w, ...T }, E) {
+	let [D, O] = c(null), k = e("conversationList"), A = x === void 0 ? y ? "loading" : s.length === 0 ? "empty" : "list" : "error";
+	return /* @__PURE__ */ u("div", {
+		ref: E,
+		className: `conversation-list${w ? ` ${w}` : ""}`,
+		...T,
+		children: [/* @__PURE__ */ l("div", {
 			className: "conversation-list__header",
-			children: /* @__PURE__ */ c(t, {
+			children: /* @__PURE__ */ l(n, {
 				variant: "outline",
 				block: !0,
-				onClick: f,
-				children: h
+				onClick: p,
+				children: k("new", g)
 			})
-		}), /* @__PURE__ */ l("nav", {
-			"aria-label": g,
+		}), /* @__PURE__ */ u("nav", {
+			"aria-label": k("nav", _),
 			className: "conversation-list__nav",
-			"aria-busy": v || void 0,
+			"aria-busy": y || void 0,
 			children: [
-				O === "error" && /* @__PURE__ */ c(i, {
+				A === "error" && /* @__PURE__ */ l(a, {
 					variant: "error",
-					title: S,
-					description: b,
+					title: k("error", C),
+					description: x,
 					className: "conversation-list__state"
 				}),
-				O === "loading" && /* @__PURE__ */ c("div", {
+				A === "loading" && /* @__PURE__ */ l("div", {
 					className: "conversation-list__loading",
-					children: Array.from({ length: y }, (e, t) => /* @__PURE__ */ c(n, {}, t))
+					children: Array.from({ length: b }, (e, t) => /* @__PURE__ */ l(r, {}, t))
 				}),
-				O === "empty" && /* @__PURE__ */ c(a, {
+				A === "empty" && /* @__PURE__ */ l(o, {
 					size: "sm",
-					title: x,
+					title: k("empty", S),
 					className: "conversation-list__state"
 				}),
-				O === "list" && /* @__PURE__ */ c("ul", {
+				A === "list" && /* @__PURE__ */ l("ul", {
 					className: "conversation-list__items",
 					role: "list",
-					children: o.map((n) => {
-						let i = n.id === d;
-						return /* @__PURE__ */ l("li", {
+					children: s.map((e) => {
+						let r = e.id === f;
+						return /* @__PURE__ */ u("li", {
 							className: "conversation-list__item",
-							children: [/* @__PURE__ */ c(r, {
-								label: n.label,
+							children: [/* @__PURE__ */ l(i, {
+								label: e.label,
 								describe: !1,
-								open: E === n.id,
+								open: D === e.id,
 								onOpenChange: (e) => {
-									e || D(null);
+									e || O(null);
 								},
-								onPointerEnter: (e) => {
-									u(e.currentTarget) && D(n.id);
+								onPointerEnter: (t) => {
+									d(t.currentTarget) && O(e.id);
 								},
-								onPointerLeave: () => D(null),
-								onFocus: (e) => {
-									u(e.currentTarget) && D(n.id);
+								onPointerLeave: () => O(null),
+								onFocus: (t) => {
+									d(t.currentTarget) && O(e.id);
 								},
-								onBlur: () => D(null),
-								children: /* @__PURE__ */ c("button", {
+								onBlur: () => O(null),
+								children: /* @__PURE__ */ l("button", {
 									type: "button",
-									className: `conversation-list__label${i ? " conversation-list__label--active" : ""}`,
-									"aria-current": i ? "page" : void 0,
-									onClick: () => p(n.id),
-									children: n.label
+									className: `conversation-list__label${r ? " conversation-list__label--active" : ""}`,
+									"aria-current": r ? "page" : void 0,
+									onClick: () => m(e.id),
+									children: e.label
 								})
-							}), /* @__PURE__ */ c(t, {
+							}), /* @__PURE__ */ l(n, {
 								variant: "ghost",
 								size: "sm",
 								iconOnly: !0,
-								"aria-label": _(n.label),
+								"aria-label": k("delete", v)(e.label),
 								className: "conversation-list__delete",
-								onClick: (e) => {
-									e.stopPropagation(), m(n.id);
+								onClick: (t) => {
+									t.stopPropagation(), h(e.id);
 								},
-								children: /* @__PURE__ */ c(e, {
+								children: /* @__PURE__ */ l(t, {
 									name: "close",
 									size: "sm"
 								})
 							})]
-						}, n.id);
+						}, e.id);
 					})
 				})
 			]
@@ -97,4 +98,4 @@ var d = o(function({ conversations: o, activeId: d, onNew: f, onSelect: p, onDel
 	});
 });
 //#endregion
-export { d as ConversationList };
+export { f as ConversationList };

package/dist/conversation-thread.js

@@ -1,42 +1,44 @@
 'use client';
 import './conversation-thread.css';
-import { UserMessage as e } from "./user-message.js";
-import { AssistantMessage as t } from "./assistant-message.js";
-import { forwardRef as n, useEffect as r, useRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { UserMessage as t } from "./user-message.js";
+import { AssistantMessage as n } from "./assistant-message.js";
+import { forwardRef as r, useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/stories/organisms/ConversationThread/ConversationThread.tsx
-function s() {
+function c() {
 	return typeof window > "u" || typeof window.matchMedia != "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
 }
-var c = n(function({ messages: n = [], children: c, streamingLabel: l, ariaLabel: u = "Conversación", locale: d, timestampFormat: f, className: p, ...m }, h) {
-	let g = i(null);
-	return r(() => {
-		g.current?.scrollIntoView({ behavior: s() });
-	}, [n, c]), /* @__PURE__ */ o("div", {
-		ref: h,
-		className: `conversation-thread${p ? ` ${p}` : ""}`,
+var l = r(function({ messages: r = [], children: l, streamingName: u, streamingLabel: d, ariaLabel: f, locale: p, timestampFormat: m, className: h, ...g }, _) {
+	let v = a(null), y = e("conversationThread");
+	return i(() => {
+		v.current?.scrollIntoView({ behavior: c() });
+	}, [r, l]), /* @__PURE__ */ s("div", {
+		ref: _,
+		className: `conversation-thread${h ? ` ${h}` : ""}`,
 		role: "log",
-		"aria-label": u,
-		"data-content": c == null ? "messages" : "children",
-		...m,
-		children: [c ?? n.map((n) => n.role === "user" ? /* @__PURE__ */ a(e, {
-			timestamp: n.timestamp,
-			locale: d,
-			timestampFormat: f,
-			children: n.content
-		}, n.id) : /* @__PURE__ */ a(t, {
-			model: n.model,
-			timestamp: n.timestamp,
-			locale: d,
-			timestampFormat: f,
-			isStreaming: n.isStreaming,
-			streamingLabel: l,
-			children: n.content
-		}, n.id)), /* @__PURE__ */ a("div", {
-			ref: g,
+		"aria-label": y("label", f),
+		"data-content": l == null ? "messages" : "children",
+		...g,
+		children: [l ?? r.map((e) => e.role === "user" ? /* @__PURE__ */ o(t, {
+			timestamp: e.timestamp,
+			locale: p,
+			timestampFormat: m,
+			children: e.content
+		}, e.id) : /* @__PURE__ */ o(n, {
+			model: e.model,
+			timestamp: e.timestamp,
+			locale: p,
+			timestampFormat: m,
+			isStreaming: e.isStreaming,
+			streamingName: u,
+			streamingLabel: d,
+			children: e.content
+		}, e.id)), /* @__PURE__ */ o("div", {
+			ref: v,
 			"aria-hidden": "true"
 		})]
 	});
 });
 //#endregion
-export { c as ConversationThread };
+export { l as ConversationThread };

package/dist/link.css

@@ -1 +1 @@
-:where(button.link){appearance:none;font:inherit;text-align:inherit;color:inherit;background:0 0;border:0;margin:0;padding:0}a:where(:not(.button)),:where(.link){color:var(--link-color);box-shadow:inset 0 calc(-1 * var(--link-underline-width)) 0 0 currentColor;cursor:var(--link-cursor);inline-size:fit-content;padding-block-end:var(--link-underline-offset);text-decoration:none}a:where(:not(.button)):hover,:where(.link):hover{color:var(--link-hover-color);box-shadow:inset 0 calc(-1 * var(--link-hover-underline-width)) 0 0 currentColor}a:focus-visible,:where(.link):focus-visible{outline:var(--link-focus-ring-width) solid var(--link-focus-ring-color);outline-offset:var(--link-focus-ring-offset)}.link--with-icon{align-items:center;gap:var(--link-icon-gap);display:inline-flex}.link__icon{flex-shrink:0}.link--ink{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.link--ink:hover{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.link--accent-1{color:var(--link-accent-1-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-underline-width)) 0 0 currentColor}.link--accent-1:hover{color:var(--link-accent-1-hover-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-hover-underline-width)) 0 0 currentColor}
+:where(button.link){appearance:none;font:inherit;text-align:inherit;color:inherit;background:0 0;border:0;margin:0;padding:0}a:where(:not(.button)),:where(.link){color:var(--link-color);box-shadow:inset 0 calc(-1 * var(--link-underline-width)) 0 0 currentColor;cursor:var(--link-cursor);padding-block-end:var(--link-underline-offset);text-decoration:none}:where(.link){inline-size:fit-content}a:where(:not(.button)):hover,:where(.link):hover{color:var(--link-hover-color);box-shadow:inset 0 calc(-1 * var(--link-hover-underline-width)) 0 0 currentColor}a:focus-visible,:where(.link):focus-visible{outline:var(--link-focus-ring-width) solid var(--link-focus-ring-color);outline-offset:var(--link-focus-ring-offset)}.link--with-icon{align-items:center;gap:var(--link-icon-gap);display:inline-flex}.link__icon{flex-shrink:0}.link--ink{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-underline-width)) 0 0 currentColor}.link--ink:hover{color:var(--link-ink-color);box-shadow:inset 0 calc(-1 * var(--link-ink-hover-underline-width)) 0 0 currentColor}.link--accent-1{color:var(--link-accent-1-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-underline-width)) 0 0 currentColor}.link--accent-1:hover{color:var(--link-accent-1-hover-color);box-shadow:inset 0 calc(-1 * var(--link-accent-1-hover-underline-width)) 0 0 currentColor}

package/dist/message-composer.js

@@ -1,57 +1,58 @@
 'use client';
 import './message-composer.css';
-import { Button as e } from "./button.js";
-import { Textarea as t } from "./textarea.js";
-import { forwardRef as n, useId as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Button as t } from "./button.js";
+import { Textarea as n } from "./textarea.js";
+import { forwardRef as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/stories/molecules/MessageComposer/MessageComposer.tsx
-var o = n(function({ value: n, onChange: o, onSend: s, placeholder: c = "Escribe un mensaje…", disabled: l, sendLabel: u = "Enviar", helperText: d, actions: f, inputId: p, inputLabel: m, inputLabelledBy: h, rows: g = 2, className: _, ...v }, y) {
-	let b = `${r()}-helper`;
-	function x() {
-		n.trim() && s();
+var s = r(function({ value: r, onChange: s, onSend: c, placeholder: l, disabled: u, sendLabel: d, helperText: f, actions: p, inputId: m, inputLabel: h, inputLabelledBy: g, rows: _ = 2, className: v, ...y }, b) {
+	let x = e("messageComposer"), S = `${i()}-helper`;
+	function C() {
+		r.trim() && c();
 	}
-	function S(e) {
-		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), x());
+	function w(e) {
+		e.key === "Enter" && !e.shiftKey && (e.preventDefault(), C());
 	}
-	return /* @__PURE__ */ a("div", {
-		ref: y,
+	return /* @__PURE__ */ o("div", {
+		ref: b,
 		className: [
 			"message-composer",
-			l ? "message-composer--disabled" : "",
-			_ ?? ""
+			u ? "message-composer--disabled" : "",
+			v ?? ""
 		].filter(Boolean).join(" "),
-		...v,
-		children: [/* @__PURE__ */ a("div", {
+		...y,
+		children: [/* @__PURE__ */ o("div", {
 			className: "message-composer__box",
-			children: [/* @__PURE__ */ i(t, {
+			children: [/* @__PURE__ */ a(n, {
 				bare: !0,
 				className: "message-composer__input",
-				id: p,
-				"aria-label": m,
-				"aria-labelledby": h,
-				"aria-describedby": d ? b : void 0,
-				placeholder: c,
-				value: n,
-				disabled: l,
-				rows: g,
-				onChange: (e) => o(e.target.value),
-				onKeyDown: S
-			}), /* @__PURE__ */ a("div", {
+				id: m,
+				"aria-label": h,
+				"aria-labelledby": g,
+				"aria-describedby": f ? S : void 0,
+				placeholder: x("placeholder", l),
+				value: r,
+				disabled: u,
+				rows: _,
+				onChange: (e) => s(e.target.value),
+				onKeyDown: w
+			}), /* @__PURE__ */ o("div", {
 				className: "message-composer__actions",
-				children: [/* @__PURE__ */ i(e, {
+				children: [/* @__PURE__ */ a(t, {
 					variant: "primary",
 					size: "md",
-					disabled: l || !n.trim(),
-					onClick: x,
-					children: u
-				}), f]
+					disabled: u || !r.trim(),
+					onClick: C,
+					children: x("send", d)
+				}), p]
 			})]
-		}), d && /* @__PURE__ */ i("p", {
+		}), f && /* @__PURE__ */ a("p", {
 			className: "message-composer__helper",
-			id: b,
-			children: d
+			id: S,
+			children: f
 		})]
 	});
 });
 //#endregion
-export { o as MessageComposer };
+export { s as MessageComposer };

package/dist/typing-indicator.js

@@ -1,27 +1,30 @@
+'use client';
 import './typing-indicator.css';
-import { VisuallyHidden as e } from "./visually-hidden.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/stories/atoms/TypingIndicator/TypingIndicator.tsx
-function r({ label: r = "El asistente está escribiendo…" }) {
-	return /* @__PURE__ */ n("span", {
+function i({ name: i, label: a }) {
+	let o = e("typingIndicator");
+	return /* @__PURE__ */ r("span", {
 		className: "typing-indicator",
 		role: "status",
 		children: [
-			/* @__PURE__ */ t("span", {
+			/* @__PURE__ */ n("span", {
 				className: "typing-indicator__dot",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ t("span", {
+			/* @__PURE__ */ n("span", {
 				className: "typing-indicator__dot",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ t("span", {
+			/* @__PURE__ */ n("span", {
 				className: "typing-indicator__dot",
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ t(e, { children: r })
+			/* @__PURE__ */ n(t, { children: a ?? o("typing")(i) })
 		]
 	});
 }
 //#endregion
-export { r as TypingIndicator };
+export { i as TypingIndicator };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "48.1.0",
+  "version": "49.0.1",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",