@studiolxd/brand 49.28.0 → 51.0.0

package/LICENSE

@@ -0,0 +1,61 @@
+MIT License
+
+Copyright (c) 2026 Studio LXD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-------------------------------------------------------------------------------
+
+BRAND ASSETS ARE NOT INCLUDED
+
+This license covers the source code, styles, design tokens and documentation.
+It does NOT grant any right to use the name "Studio LXD", its logo, logomark,
+favicons, app icons or any other brand asset. These remain the exclusive
+property of Studio LXD, all rights reserved. They include, among others, the
+files under dist/assets/ (logo.svg, logomark.svg, logomark-safe.svg, icons/,
+email/logo-*.png), the Logo and Logomark components and their drawings, and
+the files under public/brand/, public/logo.svg and public/favicon.svg.
+
+You may not use the brand assets to identify your own products or services,
+or in a way that suggests endorsement by Studio LXD, without prior written
+permission.
+
+THIRD-PARTY COMPONENTS
+
+Some files keep their own license:
+
+- Fonts under dist/assets/fonts/ and src/assets/fonts/ (Google Sans Flex,
+  Google Sans Code, Libre Bodoni): SIL Open Font License 1.1. Each family
+  ships its LICENSE.txt next to the font files.
+- src/vendor/normalize.css: MIT License, Copyright (c) Nicolas Gallagher and
+  Jonathan Neal.
+
+-------------------------------------------------------------------------------
+
+LOS ACTIVOS DE MARCA NO ESTÁN INCLUIDOS
+
+Esta licencia cubre el código, los estilos, los tokens de diseño y la
+documentación. NO concede ningún derecho de uso sobre el nombre «Studio LXD»,
+su logotipo, su isotipo, los favicons, los iconos de aplicación ni ningún otro
+activo de marca, que son propiedad exclusiva de Studio LXD, con todos los
+derechos reservados. Quedan excluidos, entre otros, los ficheros de
+dist/assets/ citados arriba, los componentes Logo y Logomark y sus dibujos, y
+los ficheros de public/brand/, public/logo.svg y public/favicon.svg.
+
+Las fuentes y normalize.css conservan su propia licencia, indicada arriba.

package/README.md

@@ -11,10 +11,18 @@ y el catálogo de Storybook es su fuente de verdad.
 pnpm add @studiolxd/brand
 ```
 
-El paquete declara como peer dependencies `react` y `react-dom` (>=18). Hay
-dos peers **opcionales**, que solo hacen falta si se consume el subpath que
-los importa: `react-hook-form` (>=7) para `@studiolxd/brand/form-field`, y
-`react-email` (>=6) para `@studiolxd/brand/email`.
+El paquete declara como peer dependencies `react` y `react-dom` (>=19). Hay
+peers **opcionales**, que solo hacen falta si se consume el subpath que los
+importa:
+
+| Peer | Lo pide |
+| --- | --- |
+| `react-hook-form` (>=7) | `@studiolxd/brand/form-field` |
+| `react-email` (>=6) | `@studiolxd/brand/email` |
+| `@tanstack/react-table` (^8.21) | `@studiolxd/brand/data-table` |
+| `react-image-crop` (^11.1) | `@studiolxd/brand/image-crop-dialog` y `@studiolxd/brand/avatar-upload` |
+
+Pide Node 20 o superior.
 
 ## Uso
 
@@ -138,3 +146,17 @@ paleta, la escala tipográfica, las variantes de cada componente y las reglas
 que las gobiernan responden a la marca de Studio LXD y se deciden aquí
 dentro. Si el sistema le sirve tal cual a alguien más, encantados; si hace
 falta que sea otra cosa, un fork es mejor camino que una petición.
+
+## Cambios
+
+El historial de versiones está en
+[`CHANGELOG.md`](https://github.com/studiolxd/brand/blob/main/CHANGELOG.md), en el
+repositorio. No viaja en el paquete de npm.
+
+## Licencia
+
+El código, los estilos, los tokens y la documentación se publican con licencia
+[MIT](./LICENSE). El nombre «Studio LXD», el logotipo, el isotipo y el resto de
+activos de marca **no** están incluidos: son propiedad de Studio LXD y no se
+pueden usar sin permiso. Las fuentes conservan su licencia SIL Open Font License
+1.1, que viaja junto a cada familia. El detalle, en [`LICENSE`](./LICENSE).

package/dist/_shared/alert.js

@@ -0,0 +1,98 @@
+import '../alert.css';
+import { n as e } from "./env.js";
+import { r as t } from "./brandmessagescontext.js";
+import { t as n } from "./closebutton.js";
+import { forwardRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/stories/messages/es/alert.ts
+var s = { close: "Cerrar" }, c = {
+	default: "status",
+	success: "status",
+	error: "alert",
+	warning: "alert"
+}, l = {
+	default: " surface-invert",
+	warning: " surface-light",
+	success: "",
+	error: ""
+}, u = r(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ a("p", {
+		ref: r,
+		className: ["alert__title", e ?? ""].filter(Boolean).join(" "),
+		...n,
+		children: t
+	});
+}), d = r(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ a("div", {
+		ref: r,
+		className: ["alert__description", e ?? ""].filter(Boolean).join(" "),
+		...n,
+		children: t
+	});
+}), f = r(function({ className: e, children: t, ...n }, r) {
+	return /* @__PURE__ */ a("div", {
+		ref: r,
+		className: ["alert__actions", e ?? ""].filter(Boolean).join(" "),
+		...n,
+		children: t
+	});
+}), p = r(function({ tone: r, variant: u, title: d, description: f, actions: p, dismissible: m = !1, onDismiss: h, finalFocus: g, closeLabel: _, className: v, children: y, role: b, ...x }, S) {
+	let C = t("alert", s);
+	u !== void 0 && e("Alert", "variant", "`tone`");
+	let w = r ?? u ?? "default", [T, E] = i(!1);
+	if (T) return null;
+	let D = [
+		"alert",
+		w === "default" ? "" : `alert--${w}`,
+		w === "success" || w === "error" ? "surface-dark" : "",
+		m ? "alert--dismissible" : "",
+		v ?? ""
+	].filter(Boolean).join(" "), O = l[w];
+	function k() {
+		if (typeof document > "u") return;
+		let e = g?.current;
+		if (e) {
+			e.focus();
+			return;
+		}
+		let t = document.body, n = t.hasAttribute("tabindex");
+		n || t.setAttribute("tabindex", "-1"), t.focus(), n || t.removeAttribute("tabindex");
+	}
+	function A() {
+		k(), h ? h() : E(!0);
+	}
+	return /* @__PURE__ */ o("div", {
+		ref: S,
+		role: b ?? c[w],
+		className: D,
+		...x,
+		children: [/* @__PURE__ */ o("div", {
+			className: `alert__content${O}`,
+			children: [
+				d && /* @__PURE__ */ a("p", {
+					className: "alert__title",
+					children: d
+				}),
+				f && /* @__PURE__ */ a("div", {
+					className: "alert__description",
+					children: f
+				}),
+				y,
+				p && /* @__PURE__ */ a("div", {
+					className: "alert__actions",
+					children: p
+				})
+			]
+		}), m && /* @__PURE__ */ a(n, {
+			className: `alert__close${O}`,
+			label: C("close", _),
+			onClick: A
+		})]
+	});
+}), m = Object.assign(p, {
+	Title: u,
+	Description: d,
+	Actions: f
+});
+//#endregion
+export { u as i, f as n, d as r, m as t };

package/dist/_shared/assign-ref.js

@@ -0,0 +1,6 @@
+//#region src/stories/constants/assign-ref.ts
+function e(e, t) {
+	typeof e == "function" ? e(t) : e && (e.current = t);
+}
+//#endregion
+export { e as t };

package/dist/_shared/asyncmultiselect.js

@@ -0,0 +1,133 @@
+import '../asyncmultiselect.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { VisuallyHidden as n } from "../visually-hidden.js";
+import { Spinner as r } from "../spinner.js";
+import { t as i } from "./useasyncoptions.js";
+import { n as a } from "./portal-container.js";
+import { forwardRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Combobox as u } from "@base-ui/react/combobox";
+//#region src/stories/messages/es/asyncMultiSelect.ts
+var d = {
+	placeholder: "Buscar…",
+	empty: "Sin resultados",
+	loading: "Buscando…",
+	remove: (e) => `Quitar ${e}`
+}, f = [], p = (e, t) => e.value === t.value, m = o(function({ onSearch: o, value: m, defaultValue: h = [], onValueChange: g, selectedOptions: ee, placeholder: _, disabled: v, readOnly: y, size: b = "md", debounceMs: x = 300, id: S, name: C, error: w = !1, required: T, onBlur: E, className: D, "aria-label": O, "aria-describedby": k, removeLabel: A, emptyMessage: j, loadingLabel: M, container: N }, P) {
+	let F = e("asyncMultiSelect", d), I = a(N), { results: L, loading: R, hasSearched: z, search: B, schedule: V } = i(o, x), [H, U] = s(!1), [W, G] = s(""), [K, q] = s(h), [J, Y] = s([]), X = m === void 0 ? K : m, Z = X.map((e) => ee?.find((t) => t.value === e) ?? J.find((t) => t.value === e) ?? {
+		value: e,
+		label: e
+	});
+	function Q(e) {
+		Y((t) => {
+			let n = e.filter((e) => !t.some((t) => t.value === e.value));
+			return n.length ? [...t, ...n] : t;
+		});
+		let t = e.map((e) => e.value);
+		m === void 0 && q(t), g?.(t);
+	}
+	function $(e, t) {
+		e !== H && (U(e), !(e && t.reason === "input-change") && (G(""), e && B("")));
+	}
+	function te(e) {
+		e.key === "Escape" && !H && e.preventBaseUIHandler?.();
+	}
+	let ne = [
+		"async-multi-select",
+		b === "md" ? "" : `async-multi-select--${b}`,
+		v ? "async-multi-select--disabled" : "",
+		H ? "async-multi-select--open" : "",
+		w ? "async-multi-select--error" : "",
+		D ?? ""
+	].filter(Boolean).join(" "), re = ["async-multi-select__content", b === "md" ? "" : `async-multi-select__content--${b}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l(u.Root, {
+		multiple: !0,
+		items: R ? f : L,
+		filter: null,
+		value: Z,
+		onValueChange: Q,
+		isItemEqualToValue: p,
+		inputValue: W,
+		onInputValueChange: (e, t) => {
+			t.reason === "input-change" && (G(e), V(e));
+		},
+		open: H,
+		onOpenChange: $,
+		name: C,
+		disabled: v,
+		readOnly: y,
+		children: [/* @__PURE__ */ l(u.InputGroup, {
+			className: ne,
+			children: [/* @__PURE__ */ l(u.Chips, {
+				className: "async-multi-select__input-area",
+				children: [Z.map((e) => /* @__PURE__ */ l(u.Chip, {
+					className: "async-multi-select__pill",
+					children: [/* @__PURE__ */ c("span", {
+						className: "async-multi-select__pill-label",
+						children: e.label
+					}), !v && !y && /* @__PURE__ */ c(u.ChipRemove, {
+						className: "async-multi-select__pill-remove",
+						"aria-label": F("remove", A)(e.label),
+						children: /* @__PURE__ */ c(t, {
+							name: "close",
+							size: "xs"
+						})
+					})]
+				}, e.value)), /* @__PURE__ */ c(u.Input, {
+					ref: P,
+					id: S,
+					className: "async-multi-select__input",
+					onKeyDown: te,
+					placeholder: X.length === 0 ? F("placeholder", _) : void 0,
+					"aria-label": O,
+					"aria-describedby": k,
+					"aria-invalid": w || void 0,
+					"aria-required": T || void 0,
+					onBlur: E
+				})]
+			}), R && /* @__PURE__ */ c(r, {
+				size: "sm",
+				"aria-hidden": !0
+			})]
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: I,
+			children: /* @__PURE__ */ c(u.Positioner, {
+				className: "async-multi-select__positioner",
+				align: "start",
+				sideOffset: -1,
+				children: /* @__PURE__ */ l(u.Popup, {
+					className: re,
+					"aria-busy": R || void 0,
+					children: [
+						/* @__PURE__ */ c(u.Status, { children: R && /* @__PURE__ */ l("div", {
+							className: "async-multi-select__loading",
+							children: [/* @__PURE__ */ c(r, {
+								size: "sm",
+								"aria-hidden": !0
+							}), /* @__PURE__ */ c(n, { children: F("loading", M) })]
+						}) }),
+						/* @__PURE__ */ c(u.Empty, { children: !R && z && /* @__PURE__ */ c("div", {
+							className: "async-multi-select__empty",
+							children: F("empty", j)
+						}) }),
+						/* @__PURE__ */ c(u.List, {
+							"aria-label": O ?? F("placeholder", _),
+							children: (e) => /* @__PURE__ */ l(u.Item, {
+								value: e,
+								className: "async-multi-select__item",
+								children: [/* @__PURE__ */ c("span", {
+									className: "async-multi-select__item-check",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ c("span", { className: "async-multi-select__item-check-mark" })
+								}), /* @__PURE__ */ c("span", { children: e.label })]
+							}, e.value)
+						})
+					]
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { m as t };

package/dist/_shared/asyncselect.js

@@ -0,0 +1,122 @@
+import '../asyncselect.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { VisuallyHidden as n } from "../visually-hidden.js";
+import { Spinner as r } from "../spinner.js";
+import { t as i } from "./useasyncoptions.js";
+import { n as a } from "./portal-container.js";
+import { forwardRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Combobox as u } from "@base-ui/react/combobox";
+//#region src/stories/messages/es/asyncSelect.ts
+var d = {
+	placeholder: "Buscar…",
+	empty: "Sin resultados",
+	loading: "Buscando…",
+	clear: "Limpiar selección"
+}, f = [], p = (e, t) => e.value === t.value, m = o(function({ onSearch: o, value: m, onValueChange: h, selectedOption: g, placeholder: _, disabled: v, readOnly: y, size: b = "md", debounceMs: x = 300, id: S, name: C, error: w = !1, required: T, onBlur: E, className: ee, "aria-label": D, "aria-describedby": O, emptyMessage: k, loadingLabel: A, clearLabel: j, container: M }, N) {
+	let P = e("asyncSelect", d), F = a(M), { results: I, loading: L, hasSearched: R, search: z, schedule: B, clear: V } = i(o, x), [H, U] = s(!1), [W, G] = s(""), [K, q] = s(null), [J, Y] = s(null), X = m === void 0 ? K : m, Z = (g === void 0 ? J : g)?.label ?? "", Q = X ? {
+		value: X,
+		label: Z
+	} : null;
+	function $(e) {
+		m === void 0 && (q(e?.value ?? null), Y(e)), h?.(e?.value ?? null, e);
+	}
+	function te() {
+		$(null), G(""), V();
+	}
+	function ne(e, t) {
+		e !== H && (U(e), !(e && t.reason === "input-change") && (G(""), e && z("")));
+	}
+	function re(e) {
+		v || y || (e.key === "Escape" && !H ? e.preventBaseUIHandler?.() : (e.key === "Backspace" || e.key === "Delete") && W === "" && X ? (e.preventDefault(), e.preventBaseUIHandler?.(), te()) : !H && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), e.preventBaseUIHandler?.(), U(!0), G(e.key), V(), B(e.key)));
+	}
+	let ie = [
+		"async-select",
+		b === "md" ? "" : `async-select--${b}`,
+		v ? "async-select--disabled" : "",
+		w ? "async-select--error" : "",
+		ee ?? ""
+	].filter(Boolean).join(" "), ae = ["async-select__content", b === "md" ? "" : `async-select__content--${b}`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ l(u.Root, {
+		items: L ? f : I,
+		filter: null,
+		value: Q,
+		onValueChange: (e) => {
+			$(e), G("");
+		},
+		isItemEqualToValue: p,
+		inputValue: H ? W : Z,
+		onInputValueChange: (e, t) => {
+			t.reason === "input-change" && (G(e), B(e));
+		},
+		open: H,
+		onOpenChange: ne,
+		name: C,
+		disabled: v,
+		readOnly: y,
+		children: [/* @__PURE__ */ l(u.InputGroup, {
+			className: ie,
+			children: [
+				/* @__PURE__ */ c(u.Input, {
+					ref: N,
+					id: S,
+					className: "async-select__input",
+					onKeyDown: re,
+					placeholder: P("placeholder", _),
+					"aria-label": D,
+					"aria-describedby": O,
+					"aria-invalid": w || void 0,
+					"aria-required": T || void 0,
+					onBlur: E
+				}),
+				L && /* @__PURE__ */ c(r, {
+					size: "sm",
+					"aria-hidden": !0
+				}),
+				!L && !v && !y && /* @__PURE__ */ c(u.Clear, {
+					className: "async-select__clear",
+					"aria-label": P("clear", j),
+					children: /* @__PURE__ */ c(t, {
+						name: "close",
+						size: "xs"
+					})
+				})
+			]
+		}), /* @__PURE__ */ c(u.Portal, {
+			container: F,
+			children: /* @__PURE__ */ c(u.Positioner, {
+				className: "async-select__positioner",
+				align: "start",
+				sideOffset: -1,
+				children: /* @__PURE__ */ l(u.Popup, {
+					className: ae,
+					"aria-busy": L || void 0,
+					children: [
+						/* @__PURE__ */ c(u.Status, { children: L && /* @__PURE__ */ l("div", {
+							className: "async-select__loading",
+							children: [/* @__PURE__ */ c(r, {
+								size: "sm",
+								"aria-hidden": !0
+							}), /* @__PURE__ */ c(n, { children: P("loading", A) })]
+						}) }),
+						/* @__PURE__ */ c(u.Empty, { children: !L && R && /* @__PURE__ */ c("div", {
+							className: "async-select__empty",
+							children: P("empty", k)
+						}) }),
+						/* @__PURE__ */ c(u.List, {
+							"aria-label": D ?? P("placeholder", _),
+							children: (e) => /* @__PURE__ */ c(u.Item, {
+								value: e,
+								className: "async-select__item",
+								children: e.label
+							}, e.value)
+						})
+					]
+				})
+			})
+		})]
+	});
+});
+//#endregion
+export { m as t };

package/dist/_shared/brandmessagescontext.js

@@ -1,15 +1,31 @@
-import { createContext as e, useContext as t } from "react";
+import { t as e } from "./env.js";
+import { createContext as t, useContext as n } from "react";
 //#region src/stories/messages/BrandMessagesContext.ts
-var n = e(null);
-function r(e) {
-	let r = t(n);
-	return function(t, n) {
-		if (n != null) return n;
-		if (!r) throw Error(`@studiolxd/brand: falta el texto «${String(e)}.${String(t)}» y no hay catálogo montado. Monta <BrandMessagesProvider> en la raíz de la aplicación con los textos del idioma vigente, o pasa la prop suelta en este uso concreto.`);
-		let i = r[e]?.[t];
-		if (i == null) throw Error(`@studiolxd/brand: el catálogo montado no trae «${String(e)}.${String(t)}».`);
-		return i;
+var r = t(null), i = t(!1), a = /* @__PURE__ */ new Set();
+function o(t, n) {
+	n || a.has(t) || !e() || (a.add(t), console.warn(`@studiolxd/brand: falta «${t}» en el catálogo; sale en castellano.`));
+}
+function s(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e);
+}
+function c(e, t, n, r) {
+	if (!s(e) || !s(t)) return e;
+	let i = { ...t };
+	for (let a of Object.keys(t)) {
+		let s = e[a];
+		s == null ? o(`${n}.${a}`, r) : i[a] = c(s, t[a], `${n}.${a}`, r);
+	}
+	return i;
+}
+function l(e, t) {
+	let a = n(r), s = n(i);
+	return function(n, r) {
+		if (r != null) return r;
+		let i = `${String(e)}.${String(n)}`, l = a?.[e]?.[n], u = t?.[n];
+		if (l != null) return c(l, u, i, s);
+		if (u !== void 0) return o(i, s), u;
+		throw Error(`@studiolxd/brand: falta el texto «${i}», no hay catálogo que lo traiga y este lector no tiene castellano de respaldo. Pasa el espacio de respaldo como segundo argumento de useBrandMessages, monta <BrandMessagesProvider> con el texto o pasa la prop.`);
 	};
 }
 //#endregion
-export { r as n, n as t };
+export { i as n, l as r, r as t };