@studiolxd/brand 41.0.0 → 42.0.0

package/dist/_types/molecules/InputField/InputField.d.ts

@@ -1,5 +1,18 @@
 import { type ComponentPropsWithoutRef } from 'react';
 import './InputField.css';
+/**
+ * El único texto que el campo emite por su cuenta: el nombre accesible del
+ * aspa de borrado. Es cromo —dice la misma cosa en toda la suite—, así que
+ * sale del catálogo común y no de quien monta el campo.
+ *
+ * El `label`, el `placeholder`, el `helperText` y el `errorMessage` NO están
+ * aquí: son el contenido de ESTE campo, y ningún catálogo común puede saber
+ * qué dicen.
+ */
+export interface InputFieldMessages {
+    /** Nombre accesible del botón que vacía un campo de búsqueda. */
+    clear: string;
+}
 export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue'> {
     id: string;
     label: string;
@@ -33,8 +46,9 @@ export interface InputFieldProps extends Omit<ComponentPropsWithoutRef<'input'>,
      */
     clearable?: boolean;
     /**
-     * Nombre accesible del botón de borrado. Default castellano.
-     * @default 'Borrar'
+     * Nombre accesible del botón de borrado. **Sin default**: sale de
+     * `inputField.clear` del `BrandMessagesProvider`, y esta prop es la
+     * anulación puntual de un uso concreto.
      */
     clearLabel?: string;
     /** Se llama tras vaciar el campo desde el aspa, ya con el foco devuelto. */

package/dist/_types/molecules/MultiSelectField/MultiSelectField.d.ts

@@ -15,6 +15,11 @@ export interface MultiSelectFieldProps {
     options: MultiSelectOption[];
     value?: string[];
     defaultValue?: string[];
+    /**
+     * Marcador de sitio del control sin valor elegido. Reenvío puro al `MultiSelect`:
+     * sin él, el texto sale de `multiSelect.placeholder` del `BrandMessagesProvider`.
+     * Se pasa solo cuando el marcador dice algo de ESTE campo.
+     */
     placeholder?: string;
     /** Nombre del campo en el formulario: se monta un input oculto por valor elegido. */
     name?: string;
@@ -29,7 +34,10 @@ export interface MultiSelectFieldProps {
     size?: 'sm' | 'md' | 'lg';
     /** Se añade DESPUÉS de las clases propias (el consumidor añade, no sustituye). */
     className?: string;
-    /** aria-label del botón que quita un valor. Default: `Quitar ${etiqueta}` (castellano). */
+    /**
+     * aria-label del botón que quita un valor. Reenvío puro al `MultiSelect`:
+     * sin él, el texto sale de `multiSelect.remove` del `BrandMessagesProvider`.
+     */
     removeLabel?: (label: string) => string;
     onValueChange?: (value: string[]) => void;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;

package/dist/_types/molecules/PasswordField/PasswordField.d.ts

@@ -1,4 +1,18 @@
 import './PasswordField.css';
+/**
+ * Los dos textos que el campo emite por su cuenta: las dos caras del
+ * interruptor de mostrar/ocultar. Son cromo —dicen lo mismo en toda la
+ * suite—, y por eso salen del catálogo común.
+ *
+ * El `label`, el `placeholder`, el `helperText` y el `errorMessage` no están
+ * aquí: son el contenido de ESTE campo.
+ */
+export interface PasswordFieldMessages {
+    /** Nombre accesible del interruptor con la contraseña oculta. */
+    show: string;
+    /** Nombre accesible del interruptor con la contraseña a la vista. */
+    hide: string;
+}
 export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> {
     /**
      * Etiqueta del campo. **Opcional**: si se omite, el componente renderiza solo
@@ -18,9 +32,15 @@ export interface PasswordFieldProps extends Omit<React.ComponentPropsWithoutRef<
     action?: React.ReactNode;
     /** Tamaño del campo. */
     size?: 'sm' | 'md' | 'lg';
-    /** aria-label del toggle cuando la contraseña está oculta. Default: "Mostrar contraseña". */
+    /**
+     * aria-label del toggle cuando la contraseña está oculta. **Sin default**:
+     * sale de `passwordField.show` del `BrandMessagesProvider`.
+     */
     showPasswordLabel?: string;
-    /** aria-label del toggle cuando la contraseña es visible. Default: "Ocultar contraseña". */
+    /**
+     * aria-label del toggle cuando la contraseña es visible. **Sin default**:
+     * sale de `passwordField.hide` del `BrandMessagesProvider`.
+     */
     hidePasswordLabel?: string;
     /**
      * Se añade DESPUÉS de las clases propias, sobre el wrapper raíz `.password-field`.

package/dist/_types/molecules/SearchForm/SearchForm.d.ts

@@ -1,4 +1,17 @@
 import './SearchForm.css';
+/**
+ * Los tres textos que el buscador emite por su cuenta. Son cromo: el buscador
+ * de sitio se llama igual en toda la suite, y ni el rótulo ni la pista dicen
+ * nada de lo que se busca en ESTA pantalla.
+ */
+export interface SearchFormMessages {
+    /** Etiqueta del campo; nombra también el punto de referencia `search`. */
+    label: string;
+    /** Pista dentro del campo. */
+    placeholder: string;
+    /** Nombre accesible del botón de envío. */
+    submit: string;
+}
 export interface SearchFormProps {
     /** `id` del campo. Si no se pasa, el componente genera uno estable. */
     id?: string;
@@ -28,8 +41,7 @@ export interface SearchFormProps {
     method?: 'get' | 'post';
     /**
      * Etiqueta del campo. Nombra también el punto de referencia `search`.
-     * Default castellano.
-     * @default 'Buscar'
+     * **Sin default**: sale de `searchForm.label` del `BrandMessagesProvider`.
      */
     label?: string;
     /**
@@ -38,13 +50,13 @@ export interface SearchFormProps {
      */
     labelHidden?: boolean;
     /**
-     * Pista dentro del campo. Default castellano.
-     * @default 'Buscar…'
+     * Pista dentro del campo. **Sin default**: sale de
+     * `searchForm.placeholder`.
      */
     placeholder?: string;
     /**
-     * Nombre accesible del botón de envío. Default castellano.
-     * @default 'Buscar'
+     * Nombre accesible del botón de envío. **Sin default**: sale de
+     * `searchForm.submit`.
      */
     submitLabel?: string;
     /**

package/dist/_types/molecules/SelectField/SelectField.d.ts

@@ -19,6 +19,11 @@ export interface SelectFieldProps {
     options: SelectOptionOrGroup[];
     value?: string;
     defaultValue?: string;
+    /**
+     * Marcador de sitio del control sin valor elegido. Reenvío puro al `Select`:
+     * sin él, el texto sale de `select.placeholder` del `BrandMessagesProvider`.
+     * Se pasa solo cuando el marcador dice algo de ESTE campo.
+     */
     placeholder?: string;
     /** Nombre del campo en el formulario: Base UI monta un input oculto con el valor. */
     name?: string;

package/dist/_types/organisms/AnnotationThread/AnnotationThread.d.ts

@@ -43,7 +43,16 @@ export interface AnnotationThreadProps extends React.ComponentPropsWithoutRef<'a
      * `resolved` se retira visualmente sin desaparecer.
      */
     status?: AnnotationThreadStatus;
-    /** Acciones del hilo entero: resolver, reabrir, seguir. Van al pie. */
+    /**
+     * Acciones del hilo entero: resolver, reabrir, seguir. Van al pie, **una por
+     * línea y a la línea entera**, siempre: el hilo vive en un panel de revisión
+     * —una columna estrecha también en escritorio—, así que el ancho de la
+     * ventana no dice nada de lo que mide este hueco.
+     *
+     * Se pasan sueltas (`<><Button/><Button/></>`), sin envolverlas en un
+     * `Inline`: el envoltorio se llevaría la línea y los botones se quedarían a
+     * su ancho natural dentro de él.
+     */
     actions?: ReactNode;
     /** Con qué se responde: un `MessageComposer`, un `TextareaField`, un `Button`. */
     reply?: ReactNode;

package/dist/annotation-thread.css

@@ -1 +1 @@
-.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--acknowledged{opacity:var(--annotation-thread-acknowledged-opacity)}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}
+.annotation-thread{gap:var(--annotation-thread-gap);padding-block:var(--annotation-thread-padding-block);padding-inline:var(--annotation-thread-padding-inline);border:var(--annotation-thread-border-width) var(--annotation-thread-border-style) var(--annotation-thread-border-color);flex-direction:column;display:flex}.annotation-thread.annotation-thread--acknowledged{opacity:var(--annotation-thread-acknowledged-opacity)}.annotation-thread.annotation-thread--resolved{opacity:var(--annotation-thread-resolved-opacity)}.annotation-thread__status{display:flex}.annotation-thread__item{gap:var(--annotation-thread-item-gap);flex-direction:column;display:flex}.annotation-thread__header{align-items:center;gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__avatar{flex-shrink:0;display:inline-flex}.annotation-thread__author{font-family:var(--annotation-thread-author-font-family);font-size:var(--annotation-thread-author-font-size);font-weight:var(--annotation-thread-author-font-weight);color:var(--annotation-thread-author-color)}.annotation-thread__date,.annotation-thread__edited{font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color)}.annotation-thread__meta{align-items:center;gap:var(--annotation-thread-header-gap);overflow-wrap:anywhere;min-inline-size:0;font-size:var(--annotation-thread-meta-font-size);color:var(--annotation-thread-meta-color);flex-wrap:wrap;display:inline-flex}.annotation-thread__body{font-size:var(--annotation-thread-body-font-size);line-height:var(--annotation-thread-body-line-height);color:var(--annotation-thread-body-color)}.annotation-thread__item-actions{gap:var(--annotation-thread-header-gap);flex-wrap:wrap;display:flex}.annotation-thread__replies{gap:var(--annotation-thread-items-gap);border-inline-start:var(--annotation-thread-reply-guide-width) var(--annotation-thread-reply-guide-style) var(--annotation-thread-reply-guide-color);flex-direction:column;padding-inline-start:var(--annotation-thread-reply-indent);display:flex}.annotation-thread__replies-label{font-size:var(--annotation-thread-replies-label-font-size);color:var(--annotation-thread-replies-label-color);margin-block:0}.annotation-thread__actions{align-items:stretch;gap:var(--annotation-thread-actions-gap);flex-direction:column;display:flex}.annotation-thread__actions>*{inline-size:100%}

package/dist/async-multi-select.js

@@ -1,47 +1,48 @@
 'use client';
 import './async-multi-select.css';
-import { Icon as e } from "./icon.js";
-import { Spinner as t } from "./spinner.js";
-import { forwardRef as n, useCallback as r, useEffect as ee, useId as i, useRef as a, useState as o } from "react";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { Spinner as n } from "./spinner.js";
+import { forwardRef as r, useCallback as ee, useEffect as te, useId as i, useRef as a, useState as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Popover as l } from "@base-ui/react/popover";
 //#region src/stories/atoms/AsyncMultiSelect/AsyncMultiSelect.tsx
-function te(e, t) {
+function u(e, t) {
 	typeof e == "function" ? e(t) : e && (e.current = t);
 }
-var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange: f, selectedOptions: p, placeholder: m = "Buscar…", disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: y, name: b, error: x = !1, required: S, onBlur: C, className: w, "aria-label": T, "aria-describedby": ne, removeLabel: re = (e) => `Quitar ${e}`, emptyMessage: ie = "Sin resultados", loadingLabel: E = "Buscando…", container: D }, O) {
-	let [k, A] = o(!1), [j, M] = o(""), [N, P] = o(!1), [F, I] = o([]), [L, R] = o(!1), [z, B] = o(-1), [V, H] = o(d), [U, W] = o([]), G = a(null), K = a(0), q = a(null), J = a(null), Y = i(), ae = i(), X = u === void 0 ? V : u, oe = X.map((e) => p?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
+var d = r(function({ onSearch: r, value: d, defaultValue: f = [], onValueChange: p, selectedOptions: ne, placeholder: m, disabled: h, readOnly: g, size: _ = "md", debounceMs: v = 300, id: re, name: y, error: b = !1, required: ie, onBlur: ae, className: x, "aria-label": S, "aria-describedby": C, removeLabel: w, emptyMessage: T, loadingLabel: E, container: D }, oe) {
+	let O = e("asyncMultiSelect"), [k, A] = o(!1), [j, M] = o(""), [N, P] = o(!1), [F, I] = o([]), [L, R] = o(!1), [z, B] = o(-1), [V, H] = o(f), [U, W] = o([]), G = a(null), K = a(0), q = a(null), J = a(null), Y = i(), se = i(), X = d === void 0 ? V : d, ce = X.map((e) => ne?.find((t) => t.value === e) ?? U.find((t) => t.value === e) ?? {
 		value: e,
 		label: e
-	}), Z = (e) => `${ae}-opt-${e}`, Q = r(async (e) => {
+	}), Z = (e) => `${se}-opt-${e}`, Q = ee(async (e) => {
 		let t = ++K.current;
 		P(!0), R(!1);
 		try {
-			let r = await n(e);
+			let n = await r(e);
 			if (t !== K.current) return;
-			I(r), B(-1);
+			I(n), B(-1);
 		} catch {
 			if (t !== K.current) return;
 			I([]), B(-1);
 		} finally {
 			t === K.current && (P(!1), R(!0));
 		}
-	}, [n]);
-	ee(() => () => {
+	}, [r]);
+	te(() => () => {
 		K.current += 1, G.current && clearTimeout(G.current);
 	}, []);
-	function se(e) {
+	function le(e) {
 		let t = e.target.value;
 		M(t), k || A(!0), G.current && clearTimeout(G.current), G.current = setTimeout(() => void Q(t), v);
 	}
-	function ce(e) {
+	function ue(e) {
 		h || g || k || (e.preventDefault(), q.current?.focus(), B(-1), M(""), I([]), R(!1), A(!0), Q(""));
 	}
 	function $(e, t) {
 		let n = X.includes(e) ? X.filter((t) => t !== e) : [...X, e];
-		t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), u === void 0 && H(n), f?.(n);
+		t && W((e) => e.some((e) => e.value === t.value) ? e : [...e, t]), d === void 0 && H(n), p?.(n);
 	}
-	function le(e) {
+	function de(e) {
 		if (e.key === "ArrowDown") e.preventDefault(), k ? B((e) => Math.min(e + 1, F.length - 1)) : (A(!0), Q(j));
 		else if (e.key === "ArrowUp") e.preventDefault(), B((e) => Math.max(e - 1, -1));
 		else if (e.key === "Enter" && z >= 0 && F[z]) e.preventDefault(), $(F[z].value, F[z]), q.current?.focus();
@@ -52,7 +53,7 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
 			$(e);
 		}
 	}
-	function ue(e, t) {
+	function fe(e, t) {
 		if (!e) {
 			if (t.reason === "outside-press") {
 				let e = t.event?.target;
@@ -61,61 +62,61 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
 			A(!1), M(""), B(-1);
 		}
 	}
-	let de = [
+	let pe = [
 		"async-multi-select",
 		_ === "md" ? "" : `async-multi-select--${_}`,
 		h ? "async-multi-select--disabled" : "",
 		k ? "async-multi-select--open" : "",
-		x ? "async-multi-select--error" : "",
-		w ?? ""
-	].filter(Boolean).join(" "), fe = ["async-multi-select__content", _ === "md" ? "" : `async-multi-select__content--${_}`].filter(Boolean).join(" ");
+		b ? "async-multi-select--error" : "",
+		x ?? ""
+	].filter(Boolean).join(" "), me = ["async-multi-select__content", _ === "md" ? "" : `async-multi-select__content--${_}`].filter(Boolean).join(" ");
 	return /* @__PURE__ */ c(l.Root, {
 		open: k,
-		onOpenChange: ue,
+		onOpenChange: fe,
 		children: [/* @__PURE__ */ c("div", {
 			ref: J,
-			className: de,
+			className: pe,
 			"data-popup-open": k || void 0,
 			children: [/* @__PURE__ */ c("div", {
 				className: "async-multi-select__input-area",
 				children: [
-					oe.map((t) => /* @__PURE__ */ c("span", {
+					ce.map((e) => /* @__PURE__ */ c("span", {
 						className: "async-multi-select__pill",
 						children: [/* @__PURE__ */ s("span", {
 							className: "async-multi-select__pill-label",
-							children: t.label
+							children: e.label
 						}), !h && !g && /* @__PURE__ */ s("button", {
 							type: "button",
 							className: "async-multi-select__pill-remove",
-							"aria-label": re(t.label),
+							"aria-label": O("remove", w)(e.label),
 							tabIndex: -1,
-							onMouseDown: (e) => {
-								e.preventDefault(), $(t.value);
+							onMouseDown: (t) => {
+								t.preventDefault(), $(e.value);
 							},
-							children: /* @__PURE__ */ s(e, {
+							children: /* @__PURE__ */ s(t, {
 								name: "close",
 								size: "xs"
 							})
 						})]
-					}, t.value)),
+					}, e.value)),
 					/* @__PURE__ */ s("input", {
 						ref: (e) => {
-							q.current = e, te(O, e);
+							q.current = e, u(oe, e);
 						},
-						id: y,
+						id: re,
 						type: "text",
 						className: "async-multi-select__input",
 						value: j,
-						onChange: se,
-						onPointerDown: ce,
-						onKeyDown: le,
-						placeholder: X.length === 0 ? m : void 0,
+						onChange: le,
+						onPointerDown: ue,
+						onKeyDown: de,
+						placeholder: X.length === 0 ? O("placeholder", m) : void 0,
 						disabled: h,
 						readOnly: g,
-						"aria-label": T,
-						"aria-describedby": ne,
-						"aria-invalid": x || void 0,
-						"aria-required": S || void 0,
+						"aria-label": S,
+						"aria-describedby": C,
+						"aria-invalid": b || void 0,
+						"aria-required": ie || void 0,
 						"aria-expanded": k,
 						"aria-haspopup": "listbox",
 						"aria-controls": k ? Y : void 0,
@@ -123,15 +124,15 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
 						autoComplete: "off",
 						role: "combobox",
 						"aria-autocomplete": "list",
-						onBlur: C
+						onBlur: ae
 					}),
-					b && X.map((e) => /* @__PURE__ */ s("input", {
+					y && X.map((e) => /* @__PURE__ */ s("input", {
 						type: "hidden",
-						name: b,
+						name: y,
 						value: e
 					}, e))
 				]
-			}), N && /* @__PURE__ */ s(t, {
+			}), N && /* @__PURE__ */ s(n, {
 				size: "sm",
 				"aria-hidden": !0
 			})]
@@ -143,25 +144,25 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
 				align: "start",
 				sideOffset: -1,
 				children: /* @__PURE__ */ s(l.Popup, {
-					className: fe,
+					className: me,
 					initialFocus: !1,
 					finalFocus: !1,
 					children: /* @__PURE__ */ c("div", {
 						role: "listbox",
 						"aria-multiselectable": "true",
-						"aria-label": T ?? m,
+						"aria-label": S ?? O("placeholder", m),
 						id: Y,
 						children: [
 							N && /* @__PURE__ */ s("div", {
 								className: "async-multi-select__loading",
-								children: /* @__PURE__ */ s(t, {
+								children: /* @__PURE__ */ s(n, {
 									size: "sm",
-									label: E
+									label: O("loading", E)
 								})
 							}),
 							!N && L && F.length === 0 && /* @__PURE__ */ s("div", {
 								className: "async-multi-select__empty",
-								children: ie
+								children: O("empty", T)
 							}),
 							!N && F.map((e, t) => {
 								let n = X.includes(e.value), r = z === t;
@@ -193,4 +194,4 @@ var u = n(function({ onSearch: n, value: u, defaultValue: d = [], onValueChange:
 	});
 });
 //#endregion
-export { u as AsyncMultiSelect };
+export { d as AsyncMultiSelect };