@studiolxd/brand 48.0.0 → 49.0.0

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/filter-bar.css

@@ -1 +1 @@
-.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);grid-template-columns:1fr;display:grid}.filter-bar__filters{display:contents}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;min-inline-size:0;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__row{grid-template-columns:repeat(auto-fill, minmax(min(var(--filter-bar-column-min-inline-size), 100%), 1fr))}.filter-bar__actions{flex-flow:wrap;align-items:center}.filter-bar__actions>*{inline-size:auto}:is(.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))),.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions){align-self:start;padding-block-start:var(--filter-bar-label-offset)}.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))){block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size));flex-direction:column;justify-content:center;display:flex}.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions{min-block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size))}}
+.filter-bar{gap:var(--filter-bar-gap);flex-direction:column;display:flex}.filter-bar__search{inline-size:100%}.filter-bar__row{column-gap:var(--filter-bar-column-gap);row-gap:var(--filter-bar-row-gap);grid-template-columns:1fr;display:grid}.filter-bar__filters{display:contents}.filter-bar__filter{min-inline-size:0}.filter-bar__actions{align-items:stretch;gap:var(--filter-bar-actions-gap);flex-direction:column;min-inline-size:0;display:flex}.filter-bar__actions>*{inline-size:100%}@media (width>=768px){.filter-bar__row{grid-template-columns:repeat(auto-fit, minmax(calc((100% - var(--filter-bar-column-gap)) / 2), 1fr))}.filter-bar__actions{flex-flow:wrap;align-items:center}.filter-bar__actions>*{inline-size:auto}:is(.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))),.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions){align-self:start;padding-block-start:var(--filter-bar-label-offset)}.filter-bar__row:has(.label:not(.visually-hidden)) .filter-bar__filter:not(:has(.label:not(.visually-hidden))){block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size));flex-direction:column;justify-content:center;display:flex}.filter-bar__row:has(.label:not(.visually-hidden))>.filter-bar__actions{min-block-size:calc(var(--filter-bar-label-offset) + var(--filter-bar-control-block-size))}}@media (width>=1024px){.filter-bar__row{grid-template-columns:repeat(auto-fit, minmax(calc((100% - 3 * var(--filter-bar-column-gap)) / 4), 1fr))}}

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/pagination.js

@@ -48,7 +48,7 @@ function o(e, t) {
 		"..."
 	];
 }
-function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSize: d = 10, hrefs: f, previousHref: p, nextHref: m, onPrevious: h, onNext: g, onPageChange: _, hrefBuilder: v, linkComponent: y, onPageSizeChange: b, pageSizeOptions: x, afterPageSize: S, showTotal: C = !1, size: w = "md", ariaLabel: T, pageLabel: E, previousLabel: D, nextLabel: O, pagesGroupLabel: k, pageSizeLabel: A, totalLabel: j, className: M }) {
+function s({ mode: s = "pages", total: c, pageCount: l, page: u = 1, pageSize: d = 10, hrefs: f, previousHref: p, nextHref: m, onPrevious: h, onNext: g, onPageChange: _, hrefBuilder: v, linkComponent: y, onPageSizeChange: b, pageSizeOptions: x, afterPageSize: S, showTotal: C = !1, size: w = "md", ariaLabel: T, pageLabel: E, previousLabel: D, nextLabel: O, pagesGroupLabel: k, pageSizeLabel: A, totalLabel: j, className: M }) {
 	let N = e("pagination"), P = v ?? (f ? (e) => f[e] : void 0), F = y ?? "a";
 	if (s === "cursor") {
 		let e = w === "sm" ? "xs" : w === "lg" ? "md" : "sm", n = (n) => {
@@ -86,9 +86,9 @@ function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSiz
 			})
 		});
 	}
-	if (l === void 0 && c === 0 && !S) return null;
-	let I = l ?? (d === "all" ? 1 : Math.ceil(c / d)), L = I > 1 ? o(u, I) : [];
-	function R(e, t) {
+	if (c === 0 || l === 0 || c === void 0 && (l ?? 1) <= 1 && !S) return null;
+	let I = c ?? 0, L = l ?? (d === "all" ? 1 : Math.ceil(I / d)), R = L > 1 ? o(u, L) : [];
+	function z(e, t) {
 		if (e === "...") return /* @__PURE__ */ r("span", {
 			className: "pagination__ellipsis",
 			"aria-hidden": "true",
@@ -112,7 +112,7 @@ function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSiz
 			children: e
 		}, e);
 	}
-	function z(e, n, i) {
+	function B(e, n, i) {
 		let a = n === "prev" ? N("previous", D) : N("next", O), o = /* @__PURE__ */ r(t, {
 			name: "chevron",
 			size: w === "sm" ? "xs" : w === "lg" ? "md" : "sm",
@@ -135,7 +135,7 @@ function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSiz
 			children: o
 		});
 	}
-	let B = C || !!b || !!S;
+	let V = C || !!b || !!S;
 	return /* @__PURE__ */ i("nav", {
 		className: [
 			"pagination",
@@ -143,12 +143,12 @@ function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSiz
 			M
 		].filter(Boolean).join(" "),
 		"aria-label": N("label", T),
-		children: [B && /* @__PURE__ */ i("div", {
+		children: [V && /* @__PURE__ */ i("div", {
 			className: "pagination__meta",
 			children: [
 				C && /* @__PURE__ */ r("span", {
 					className: "pagination__summary",
-					children: N("total", j)(c)
+					children: N("total", j)(I)
 				}),
 				b && /* @__PURE__ */ r("div", {
 					className: "pagination__size-selector",
@@ -165,14 +165,14 @@ function s({ mode: s = "pages", total: c = 0, pageCount: l, page: u = 1, pageSiz
 					children: S
 				})
 			]
-		}), I > 1 && /* @__PURE__ */ i("div", {
+		}), L > 1 && /* @__PURE__ */ i("div", {
 			className: "pagination__controls",
 			role: "group",
 			"aria-label": N("pagesGroup", k),
 			children: [
-				z(u - 1, "prev", u <= 1),
-				L.map((e, t) => R(e, t)),
-				z(u + 1, "next", u >= I)
+				B(u - 1, "prev", u <= 1),
+				R.map((e, t) => z(e, t)),
+				B(u + 1, "next", u >= L)
 			]
 		})]
 	});