@studiolxd/brand 50.0.0 → 51.0.1

package/dist/autocomplete-field.js

@@ -2,57 +2,52 @@
 import './autocomplete-field.css';
 import { Autocomplete as e } from "./autocomplete.js";
 import { n as t } from "./_shared/form-size.js";
-import { ErrorText as n } from "./error-text.js";
-import { Label as r } from "./label.js";
-import { n as i } from "./_shared/field-labels.js";
-import { forwardRef as a, useId as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { n } from "./_shared/field-optional.js";
+import { n as r } from "./_shared/field-labels.js";
+import { a as i, n as a } from "./_shared/fieldshell.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/stories/molecules/AutocompleteField/AutocompleteField.tsx
-var l = a(function({ id: a, label: l, labelHidden: u, value: d, defaultValue: f, onValueChange: p, onSelect: m, options: h, onSearch: g, debounceMs: _, minChars: v, placeholder: y, name: b, disabled: x, readOnly: S, size: C, required: w, maxLength: T, error: E = !1, errorMessage: D, helperText: O, className: k, container: A, onBlur: j }, M) {
-	let N = i(u), P = t(C), F = o(), I = a ?? F, L = D ? `${I}-error` : void 0, R = O ? `${I}-helper` : void 0, z = [L, R].filter(Boolean).join(" ") || void 0, B = E || !!D;
-	return /* @__PURE__ */ c("div", {
-		className: ["autocomplete-field", k].filter(Boolean).join(" "),
-		children: [
-			/* @__PURE__ */ s(r, {
-				htmlFor: I,
-				hidden: N,
-				size: P,
-				children: l
-			}),
-			/* @__PURE__ */ s(e, {
-				ref: M,
-				id: I,
-				name: b,
-				value: d,
-				defaultValue: f,
-				onValueChange: p,
-				onSelect: m,
-				options: h,
-				onSearch: g,
-				debounceMs: _,
-				minChars: v,
-				placeholder: y,
-				disabled: x,
-				readOnly: S,
-				size: P,
-				required: w,
-				maxLength: T,
-				error: B,
-				container: A,
-				"aria-describedby": z,
-				onBlur: j
-			}),
-			D && /* @__PURE__ */ s(n, {
-				id: L,
-				children: D
-			}),
-			O && /* @__PURE__ */ s("span", {
-				id: R,
-				className: "autocomplete-field__helper",
-				children: O
-			})
-		]
+var c = o(function({ id: o, label: c, optional: l, optionalLabel: u, labelHidden: d, value: f, defaultValue: p, onValueChange: m, onSelect: h, options: g, onSearch: _, debounceMs: v, minChars: y, placeholder: b, name: x, disabled: S, readOnly: C, size: w, required: T, maxLength: E, error: D = !1, errorMessage: O, helperText: k, className: A, container: j, onBlur: M }, N) {
+	let P = r(d), F = t(w), I = n(l, T), L = i({
+		id: o,
+		error: D,
+		errorMessage: O,
+		helperText: k
+	}), { id: R } = L;
+	return /* @__PURE__ */ s(a, {
+		field: L,
+		block: "autocomplete-field",
+		className: A,
+		label: c,
+		optional: I,
+		optionalLabel: u,
+		labelHidden: P,
+		size: F,
+		children: /* @__PURE__ */ s(e, {
+			ref: N,
+			id: R,
+			name: x,
+			value: f,
+			defaultValue: p,
+			onValueChange: m,
+			onSelect: h,
+			options: g,
+			onSearch: _,
+			debounceMs: v,
+			minChars: y,
+			placeholder: b,
+			disabled: S,
+			readOnly: C,
+			size: F,
+			required: T,
+			maxLength: E,
+			error: L.hasError,
+			container: j,
+			"aria-describedby": L.describedBy,
+			onBlur: M
+		})
 	});
 });
 //#endregion
-export { l as AutocompleteField };
+export { c as AutocompleteField };

package/dist/avatar-upload.js

@@ -1,38 +1,49 @@
 'use client';
 import './avatar-upload.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { Icon as t } from "./icon.js";
-import { VisuallyHidden as n } from "./visually-hidden.js";
-import { n as r } from "./_shared/form-size.js";
-import { Button as i } from "./button.js";
-import { Avatar as a } from "./avatar.js";
-import { ErrorText as ee } from "./error-text.js";
-import { i as te, n as ne, r as o, t as re } from "./_shared/validate.js";
-import { t as ie } from "./_shared/env.js";
+import { t as e } from "./_shared/env.js";
+import { r as t } from "./_shared/brandmessagescontext.js";
+import { Icon as n } from "./icon.js";
+import { VisuallyHidden as r } from "./visually-hidden.js";
+import { n as i } from "./_shared/form-size.js";
+import { Button as ee } from "./button.js";
+import { Avatar as te } from "./avatar.js";
+import { ErrorText as ne } from "./error-text.js";
+import { i as a, n as re, r as o, t as ie } from "./_shared/validate.js";
 import { t as ae } from "./_shared/imagecropdialog.js";
 import { useCallback as oe, useEffect as s, useId as se, useRef as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-//#region src/stories/molecules/AvatarUpload/AvatarUpload.tsx
+//#region src/stories/messages/es/avatarUpload.ts
 var ce = {
+	button: "Subir",
+	buttonFor: (e) => `Subir ${e}`,
+	subject: "el avatar",
+	dropHint: (e) => `…o arrastra la imagen hasta ${e}`,
+	dropActive: (e) => `Suelta la imagen sobre ${e} para subirla`,
+	maxSize: (e) => `máx. ${e}`,
+	invalidType: (e) => `Formato no admitido. Se aceptan ${e}.`,
+	tooLarge: (e) => `El archivo pesa demasiado. El máximo es ${e}.`,
+	cropCancel: "Cancelar",
+	cropConfirm: "Guardar"
+}, le = {
 	sm: "2xl",
 	md: "3xl",
 	lg: "4xl"
-}, f = {
+}, ue = {
 	sm: "md",
 	md: "lg",
 	lg: "xl"
 };
-function le(e, t) {
+function de(e, t) {
 	return o(e.split(",").map((e) => e.trim()).filter(Boolean).map((e) => e.startsWith(".") ? e.slice(1) : e.split("/")[1] ?? e).map((e) => e.toUpperCase()), t);
 }
-function p({ src: o, name: p, alt: m, shape: h = "circle", size: ue, accept: g = "image/jpeg,image/png,image/webp", maxSize: _, outputMimeType: de = "image/jpeg", outputSize: v, disabled: fe = !1, busy: y = !1, errorMessage: b, onChange: pe, onSelect: x, onError: S, subject: me, buttonLabel: he, buttonAccessibleLabel: ge, hintLabel: _e, formatsLabel: ve, locale: C = re, maxSizeHint: ye, invalidTypeError: w, tooLargeError: T, dropActiveMessage: be, dropHintLabel: xe, cropTitle: Se, cropDescription: Ce, cropCancelLabel: E, cropConfirmLabel: D, cropCloseLabel: O, cropLoadingLabel: k, cropErrorMessage: A, className: we }) {
-	let j = e("avatarUpload"), M = r(ue), N = c(null), P = c(null), [F, I] = l(null), [L, R] = l(!1), [z, B] = l(!1), [Te, V] = l(null), H = se(), U = `${H}-hint`, W = `${H}-error`, G = j("subject", me), K = ve ?? le(g, C), q = _e ?? [K, _ === void 0 ? null : j("maxSize", ye)(ne(_, C))].filter(Boolean).join(" · "), J = Te ?? b, Y = fe || y, X = j("button", he), Z = ge ?? j("buttonFor")(G);
-	ie() && !Z.toLowerCase().includes(X.toLowerCase()) && console.warn(`[AvatarUpload] El nombre accesible del botón ("${Z}") no contiene su texto visible ("${X}"). WCAG 2.5.3 (Label in Name) lo exige: quien navega por voz dice lo que ve, y con estos textos no encontraría el control.`), s(() => {
+function f({ src: o, name: f, alt: p, shape: m = "circle", size: fe, accept: h = "image/jpeg,image/png,image/webp", maxSize: g, outputMimeType: _ = "image/jpeg", outputSize: v, disabled: pe = !1, busy: y = !1, errorMessage: me, onChange: he, onSelect: b, onError: x, subject: ge, buttonLabel: _e, buttonAccessibleLabel: ve, hintLabel: ye, formatsLabel: be, locale: S = ie, maxSizeHint: xe, invalidTypeError: C, tooLargeError: w, dropActiveMessage: Se, dropHintLabel: Ce, cropTitle: we, cropDescription: T, cropCancelLabel: E, cropConfirmLabel: D, cropCloseLabel: O, cropLoadingLabel: k, cropErrorMessage: A, className: Te }) {
+	let j = t("avatarUpload", ce), M = i(fe), N = c(null), P = c(null), [F, I] = l(null), [L, R] = l(!1), [Ee, z] = l(!1), [De, B] = l(null), V = se(), H = `${V}-hint`, U = `${V}-error`, W = j("subject", ge), G = be ?? de(h, S), K = ye ?? [G, g === void 0 ? null : j("maxSize", xe)(re(g, S))].filter(Boolean).join(" · "), q = De ?? me, J = pe || y, Y = j("button", _e), X = ve ?? j("buttonFor")(W);
+	e() && !X.toLowerCase().includes(Y.toLowerCase()) && console.warn(`[AvatarUpload] El nombre accesible del botón ("${X}") no contiene su texto visible ("${Y}"). WCAG 2.5.3 (Label in Name) lo exige: quien navega por voz dice lo que ve, y con estos textos no encontraría el control.`), s(() => {
 		P.current = F;
 	}, [F]), s(() => () => {
 		P.current && URL.revokeObjectURL(P.current.url);
 	}, []), s(() => {
-		if (Y) return;
+		if (J) return;
 		let e = 0, t = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"), n = (n) => {
 			t(n) && (e += 1, R(!0));
 		}, r = () => {
@@ -43,73 +54,73 @@ function p({ src: o, name: p, alt: m, shape: h = "circle", size: ue, accept: g =
 		return window.addEventListener("dragenter", n), window.addEventListener("dragleave", r), window.addEventListener("drop", i), window.addEventListener("dragend", i), () => {
 			window.removeEventListener("dragenter", n), window.removeEventListener("dragleave", r), window.removeEventListener("drop", i), window.removeEventListener("dragend", i), R(!1);
 		};
-	}, [Y]);
-	let Q = oe((e) => {
-		let t = te(e, g, _, j("tooLarge", T), j("invalidType", w)(K), C);
+	}, [J]);
+	let Z = oe((e) => {
+		let t = a(e, h, g, j("tooLarge", w), j("invalidType", C)(G), S);
 		if (t) {
-			V(t), S?.(t);
+			B(t), x?.(t);
 			return;
 		}
-		V(null), x?.(e), I({
+		B(null), b?.(e), I({
 			url: URL.createObjectURL(e),
 			file: e
 		});
 	}, [
+		h,
 		g,
-		_,
 		j,
-		T,
 		w,
-		K,
 		C,
+		G,
 		S,
-		x
-	]), Ee = () => {
+		x,
+		b
+	]), Oe = () => {
 		F && URL.revokeObjectURL(F.url), I(null);
-	}, De = async (e) => {
-		F && await pe(e, F.file);
-	}, $ = xe ?? j("dropHint")(G);
+	}, Q = async (e) => {
+		F && await he(e, F.file);
+	}, $ = Ce ?? j("dropHint")(W);
 	return /* @__PURE__ */ d("div", {
 		className: [
 			"avatar-upload",
-			h === "square" ? "avatar-upload--square" : "",
+			m === "square" ? "avatar-upload--square" : "",
 			L ? "avatar-upload--armed" : "",
-			z ? "avatar-upload--over" : "",
-			Y ? "avatar-upload--inert" : "",
-			we ?? ""
+			Ee ? "avatar-upload--over" : "",
+			J ? "avatar-upload--inert" : "",
+			Te ?? ""
 		].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ d("div", {
 				className: "avatar-upload__target",
 				onClick: () => {
-					Y || N.current?.click();
+					J || N.current?.click();
 				},
 				onDragEnter: (e) => {
-					e.preventDefault(), Y || B(!0);
+					e.preventDefault(), J || z(!0);
 				},
 				onDragOver: (e) => {
-					e.preventDefault(), !Y && (e.dataTransfer.dropEffect = "copy", B(!0));
+					e.preventDefault(), !J && (e.dataTransfer.dropEffect = "copy", z(!0));
 				},
 				onDragLeave: (e) => {
-					e.currentTarget.contains(e.relatedTarget) || B(!1);
+					e.currentTarget.contains(e.relatedTarget) || z(!1);
 				},
 				onDrop: (e) => {
-					if (e.preventDefault(), B(!1), R(!1), Y) return;
+					if (e.preventDefault(), z(!1), R(!1), J) return;
 					let t = e.dataTransfer.files?.[0];
-					t && Q(t);
+					t && Z(t);
 				},
-				children: [/* @__PURE__ */ u(a, {
+				children: [/* @__PURE__ */ u(te, {
 					src: o ?? void 0,
-					name: p,
-					...m === void 0 ? {} : { alt: m },
-					shape: h,
-					size: ce[M]
+					name: f,
+					...p === void 0 ? {} : { alt: p },
+					shape: m,
+					size: le[M]
 				}), /* @__PURE__ */ u("span", {
 					className: "avatar-upload__overlay",
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ u(t, {
+					children: /* @__PURE__ */ u(n, {
 						name: "upload",
-						size: f[M]
+						size: ue[M]
 					})
 				})]
 			}),
@@ -120,48 +131,48 @@ function p({ src: o, name: p, alt: m, shape: h = "circle", size: ue, accept: g =
 						ref: N,
 						type: "file",
 						className: "avatar-upload__input",
-						accept: g,
+						accept: h,
 						tabIndex: -1,
 						"aria-hidden": "true",
-						disabled: Y,
+						disabled: J,
 						onChange: (e) => {
 							let t = e.target.files?.[0];
-							t && Q(t), e.target.value = "";
+							t && Z(t), e.target.value = "";
 						}
 					}),
-					/* @__PURE__ */ u(i, {
+					/* @__PURE__ */ u(ee, {
 						variant: "outline",
 						size: M,
-						disabled: Y,
+						disabled: J,
 						onClick: () => N.current?.click(),
-						...Z === X ? {} : { "aria-label": Z },
-						"aria-describedby": [q ? U : null, J ? W : null].filter(Boolean).join(" ") || void 0,
-						children: X
+						...X === Y ? {} : { "aria-label": X },
+						"aria-describedby": [K ? H : null, q ? U : null].filter(Boolean).join(" ") || void 0,
+						children: Y
 					}),
-					q && /* @__PURE__ */ u(n, {
-						id: U,
-						children: q
+					K && /* @__PURE__ */ u(r, {
+						id: H,
+						children: K
 					}),
 					$ && /* @__PURE__ */ u("span", {
 						className: "avatar-upload__hint",
 						children: $
 					}),
-					J && /* @__PURE__ */ u(ee, {
-						id: W,
-						children: J
+					q && /* @__PURE__ */ u(ne, {
+						id: U,
+						children: q
 					})
 				]
 			}),
-			/* @__PURE__ */ u(n, {
+			/* @__PURE__ */ u(r, {
 				role: "status",
-				children: L ? be ?? j("dropActive")(G) : ""
+				children: L ? Se ?? j("dropActive")(W) : ""
 			}),
 			/* @__PURE__ */ u(ae, {
 				sourceUrl: F?.url ?? null,
-				title: Se,
-				description: Ce,
-				circularCrop: h === "circle",
-				outputMimeType: de,
+				title: we,
+				description: T,
+				circularCrop: m === "circle",
+				outputMimeType: _,
 				...v === void 0 ? {} : { outputSize: v },
 				busy: y,
 				cancelLabel: E ?? j("cropCancel"),
@@ -169,11 +180,13 @@ function p({ src: o, name: p, alt: m, shape: h = "circle", size: ue, accept: g =
 				...O === void 0 ? {} : { closeLabel: O },
 				...k === void 0 ? {} : { loadingLabel: k },
 				...A === void 0 ? {} : { errorMessage: A },
-				onConfirm: De,
-				onClose: Ee
+				onConfirm: Q,
+				onOpenChange: (e) => {
+					e || Oe();
+				}
 			})
 		]
 	});
 }
 //#endregion
-export { p as AvatarUpload };
+export { f as AvatarUpload };

package/dist/banner.js

@@ -1,44 +1,47 @@
 'use client';
 import './banner.css';
-import { n as e } from "./_shared/brandmessagescontext.js";
-import { CloseButton as t } from "./close-button.js";
-import { forwardRef as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/stories/molecules/Banner/Banner.tsx
-var a = {
+import { n as e } from "./_shared/env.js";
+import { r as t } from "./_shared/brandmessagescontext.js";
+import { t as n } from "./_shared/closebutton.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/stories/messages/es/banner.ts
+var o = { dismiss: "Descartar aviso" }, s = {
 	info: "status",
 	warning: "alert",
 	error: "alert"
-}, o = n(function({ variant: n = "info", children: o, actions: s, onDismiss: c, dismissLabel: l, className: u, role: d, "aria-live": f, ...p }, m) {
-	let h = e("banner"), g = d ?? a[n], _ = [
+}, c = r(function({ tone: r, variant: c, children: l, actions: u, onDismiss: d, dismissLabel: f, className: p, role: m, "aria-live": h, ...g }, _) {
+	let v = t("banner", o);
+	c !== void 0 && e("Banner", "variant", "`tone`");
+	let y = r ?? c ?? "info", b = m ?? s[y], x = [
 		"banner",
-		`banner--${n}`,
-		n === "info" || n === "error" ? "surface-dark" : "",
-		c ? "banner--dismissible" : "",
-		u ?? ""
-	].filter(Boolean).join(" "), v = n === "warning" ? " surface-light" : "";
-	return /* @__PURE__ */ i("div", {
-		ref: m,
-		role: g,
-		"aria-live": f ?? (g === "alert" ? "assertive" : "polite"),
-		className: _,
-		...p,
+		`banner--${y}`,
+		y === "info" || y === "error" ? "surface-dark" : "",
+		d ? "banner--dismissible" : "",
+		p ?? ""
+	].filter(Boolean).join(" "), S = y === "warning" ? " surface-light" : "";
+	return /* @__PURE__ */ a("div", {
+		ref: _,
+		role: b,
+		"aria-live": h ?? (b === "alert" ? "assertive" : "polite"),
+		className: x,
+		...g,
 		children: [
-			/* @__PURE__ */ r("div", {
-				className: `banner__content${v}`,
-				children: o
+			/* @__PURE__ */ i("div", {
+				className: `banner__content${S}`,
+				children: l
 			}),
-			s && /* @__PURE__ */ r("div", {
-				className: `banner__actions${v}`,
-				children: s
+			u && /* @__PURE__ */ i("div", {
+				className: `banner__actions${S}`,
+				children: u
 			}),
-			c && /* @__PURE__ */ r(t, {
-				className: `banner__close${v}`,
-				label: h("dismiss", l),
-				onClick: c
+			d && /* @__PURE__ */ i(n, {
+				className: `banner__close${S}`,
+				label: v("dismiss", f),
+				onClick: d
 			})
 		]
 	});
 });
 //#endregion
-export { o as Banner };
+export { c as Banner };