@studiolxd/brand 50.0.0 → 51.0.0

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/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 };

package/dist/_shared/{calendargrid.js → calendar.js}

@@ -1,3 +1,4 @@
+import '../calendar.css';
 import { Icon as e } from "../icon.js";
 import { useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
@@ -277,4 +278,13 @@ function T({ weekStart: e, onWeekChange: o, today: s, onActivate: l, minDate: u,
 	};
 }
 //#endregion
-export { c as a, _ as c, f as d, w as f, g as i, u as l, S as m, d as n, l as o, T as p, m as r, v as s, h as t, p as u };
+//#region src/stories/messages/es/calendar.ts
+var E = {
+	previousMonth: "Mes anterior",
+	nextMonth: "Mes siguiente",
+	previousYears: "Años anteriores",
+	nextYears: "Años siguientes",
+	yearGrid: "Elegir año"
+};
+//#endregion
+export { g as a, v as c, p as d, f, S as h, m as i, _ as l, T as m, h as n, c as o, w as p, d as r, l as s, E as t, u };

package/dist/_shared/closebutton.js

@@ -0,0 +1,34 @@
+import '../closebutton.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { t as n } from "./focusable-when-disabled.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/stories/messages/es/closeButton.ts
+var a = { label: "Cerrar" }, o = r(function({ label: n, size: r = "md", className: o, disabled: s, focusableWhenDisabled: c = !1, onClick: l, ...u }, d) {
+	let f = e("closeButton", a), p = [
+		"close-button",
+		r === "md" ? "" : `close-button--${r}`,
+		o
+	].filter(Boolean).join(" "), m = !!s && c;
+	return /* @__PURE__ */ i("button", {
+		ref: d,
+		type: "button",
+		className: p,
+		"aria-label": f("label", n),
+		disabled: m ? void 0 : s,
+		"aria-disabled": m ? !0 : void 0,
+		onClick: (e) => {
+			if (m) {
+				e.preventDefault(), e.stopPropagation();
+				return;
+			}
+			l?.(e);
+		},
+		...u,
+		children: /* @__PURE__ */ i(t, { name: "close" })
+	});
+});
+n(o);
+//#endregion
+export { o as t };