@studiolxd/brand 42.0.0 → 44.0.0

package/CHANGELOG.md

@@ -7,6 +7,119 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [44.0.0] — 2026-09-15
+
+> **Major.** Quinta familia al proveedor de textos: las subidas. `FileUpload`,
+> `AvatarUpload` e `ImageCropDialog` dejan de traer castellano puesto, el peso de un
+> archivo lo escribe el `locale`, y una lista de formatos lleva la conjunción de su idioma.
+
+### Las subidas leen del proveedor
+
+Tres espacios nuevos en `BrandMessages`: **`fileUpload`**, **`imageCropDialog`** y
+**`avatarUpload`**, veintidós claves. `CalendarPlanner` y `CalendarRoster` no estrenan
+espacio: sus dos flechas leen `calendar.previousMonth` y `calendar.nextMonth`, que es
+literalmente el mismo texto que el del `Calendar`. Mismo orden —**prop → proveedor →
+error**— y misma naturaleza: incompatible **en tiempo de compilación**.
+
+Un cambio incompatible más, de props: `AvatarUpload.cropTitle` pasa a **obligatorio**. El
+diálogo no sabe qué se recorta —«Recorta tu foto», «Recorta tu logo»—, y eso es contenido de
+la pantalla, no del sistema.
+
+### «2,5 MB» tiene dos mitades
+
+`formatBytes` hacía `toFixed(1) + ' KB'`: punto decimal inglés cableado, en todos los
+idiomas. Ahora el peso lo escribe `Intl.NumberFormat` con `style: 'unit'` en el `locale`
+del componente, y al catálogo va solo la plantilla que lo envuelve («máx. {size}»). Con el
+mismo catálogo inglés, `es-ES` escribe «max. 2,5 MB» y `en-US` «max. 2.5 MB». Es la regla
+de la v43 aplicada a otra cosa: *si cambia al cambiar de idioma es cromo; si cambia al
+cambiar de país es formato.*
+
+Efecto de asumir CLDR: las unidades son las suyas —«kB» y no «KB»— y por debajo de un
+kilobyte un `en-US` escribe «500 byte». La alternativa era volver a decidir a mano la
+colocación del sufijo, que es justo lo que la regla prohíbe.
+
+### Dos textos que no se pueden traducir por separado
+
+`AvatarUpload` tiene un botón con texto visible («Subir») y un nombre accesible («Subir el
+logo»), y WCAG 2.5.3 exige que el segundo **contenga** al primero. Traducirlos en dos
+sitios distintos es dejar que una traducción los despareje sin que falle nada; concatenarlos
+en el componente es castellano disfrazado, porque el orden es del idioma —«Subir el logo»
+lleva el verbo delante, «das Logo hochladen» lo lleva detrás—. Así que van los dos al
+catálogo, `avatarUpload.button` y `avatarUpload.buttonFor(subject)`, con la regla escrita
+al lado; la pantalla solo aporta el sujeto. El aviso de consola en desarrollo sigue
+vigilando la contención.
+
+### Una lista lleva la conjunción de su idioma
+
+Los formatos admitidos se unían con `join(', ')` y no ponían conjunción en ningún idioma:
+«JPEG, PNG, WEBP». Ahora es `Intl.ListFormat` con `type: 'disjunction'`: «JPEG, PNG o
+WEBP», «JPEG, PNG, or WEBP», «JPEG, PNG oder WEBP».
+
+### Lo que se queda como prop
+
+`ImageCropDialog.title`, `cancelLabel` y `confirmLabel` eran ya obligatorias y sin default,
+y son el modelo de toda la ola: el diálogo no sabe qué se recorta ni qué pasa al confirmar.
+En `AvatarUpload`, en cambio, `cropCancel` y `cropConfirm` sí salen del catálogo, y no es
+incoherencia: esa subida sí sabe lo que confirma —se guarda un recorte—, y vale igual en
+todas las pantallas.
+
+Quedan dos reenvíos puros a una pieza sin migrar: `ImageCropDialog.closeLabel` y
+`AvatarUpload.cropCloseLabel` van al `Modal`, que aún trae su «Cerrar». Es la deuda que
+esta ola deja apuntada, y es por donde sigue la siguiente.
+
+## [43.0.0] — 2026-09-15
+
+> **Major.** Cuarta familia al proveedor de textos: fecha y hora. `Calendar`, `DatePicker`
+> y `TimeSelect` dejan de traer castellano puesto, y con ellos se cierran los reenvíos que
+> las olas anteriores dejaron inventariados.
+
+### Fecha y hora leen del proveedor
+
+Tres espacios nuevos en `BrandMessages`: **`calendar`** (previousMonth, nextMonth,
+previousYears, nextYears, yearGrid), **`datePicker`** (openCalendar, invalid, calendar y
+las letras de la máscara) y **`timeSelect`** (hours, minutes y sus máscaras). Los campos
+que los envuelven —`DatePickerField`, `DateTimeField`, `TimeField`— no pierden props: sus
+reenvíos quedan como anulación puntual, pero ya no hay que enhebrar nada para traducir,
+porque el proveedor llega por contexto a la pieza que pinta el texto. Se ha retirado
+`SPANISH_MASK_LETTERS`, el último juego de letras castellanas vivo en el código.
+
+Mismo orden que en las tres olas anteriores —**prop → proveedor → error**— y misma
+naturaleza: incompatible **en tiempo de compilación**. El texto que no se pinta no se
+exige: un `Calendar` sin navegación no pide las flechas, un `DatePicker` con fecha válida no
+pide el aviso, un `TimeSelect` con hora no pide las máscaras.
+
+### Una máscara tiene dos mitades
+
+`dd/mm/aaaa` no es una cosa, son dos decididas en sitios distintos. **El orden y el
+separador son formato**: salen del `locale` vía `Intl.DateTimeFormat`, y una aplicación en
+inglés que enseñe fechas españolas las quiere en orden español. **Las letras son idioma**:
+`aaaa` es «año», `yyyy` es *year*, `jjjj` es *Jahr* — la abreviatura de una palabra, y se
+traduce. Por eso el catálogo guarda las tres letras sueltas y nunca la máscara montada: la
+arma el componente poniendo las letras en el orden del `locale`.
+
+Lo mismo con `HH/MM`: parecen notación técnica, pero son la inicial de una palabra, y en
+alemán son `SS/MM`. Lo que no se traduce es el dibujo —dos cifras, la hora antes que el
+minuto, dos puntos en medio—.
+
+La regla, en una frase, escrita en `Foundations › Internacionalización`: **si cambia al
+cambiar de idioma es cromo; si cambia al cambiar de país es formato.**
+
+### Lo que se queda como prop
+
+`label`, `helperText` y `errorMessage` de los tres campos; `gridLabel` del `Calendar`, que
+nombra a ESE calendario («Fecha de alta») y sin el cual la rejilla toma el título del mes,
+que ya viene del `locale`; `calendarLabel` cuando lo pone un campo, porque es su etiqueta;
+y el `placeholder` del `DatePicker` cuando dice algo del campo («Desde»), que sustituye a la
+máscara entera.
+
+### Pendiente, anotado
+
+`CalendarPlanner` y `CalendarRoster` siguen con «Mes anterior» y «Mes siguiente» cableados:
+es el mismo texto que `Calendar` y pueden leer de `calendar.*` tal cual. Y `TimeSelect` es
+de 24 horas por construcción; el reloj de 12 con AM/PM es cosa del `locale`, no del idioma,
+y hoy una aplicación en inglés americano ve las horas en formato militar. No es un texto,
+y queda por decidir.
+
 ## [42.0.0] — 2026-09-15
 
 > **Major.** Tercera familia al proveedor de textos: los átomos y moléculas de formulario

package/dist/_shared/datepicker.js

@@ -1,16 +1,13 @@
 import '../datepicker.css';
-import { Icon as e } from "../icon.js";
-import { Input as t } from "../input.js";
-import { Popover as n } from "../popover.js";
-import { Calendar as r } from "../calendar.js";
-import { forwardRef as i, useCallback as a, useId as o, useMemo as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { n as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { Input as n } from "../input.js";
+import { Popover as r } from "../popover.js";
+import { Calendar as i } from "../calendar.js";
+import { forwardRef as a, useCallback as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/stories/molecules/DatePicker/dateMask.ts
-var f = {
-	day: "dd",
-	month: "mm",
-	year: "aaaa"
-}, p = /[‎‏؜]/g, m = new Date(2026, 8, 25);
+var p = /[‎‏؜]/g, m = new Date(2026, 8, 25);
 function h(e, t) {
 	return String(e).padStart(t, "0");
 }
@@ -60,110 +57,110 @@ function g(e) {
 function _(e) {
 	return `${String(e.getFullYear()).padStart(4, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-var v = i(function({ value: i, onChange: p, placeholder: m, maskLetters: h = f, invalidMessage: v = "Escribe una fecha completa, con el día, el mes y el año.", openCalendarLabel: y = "Abrir calendario", minDate: b, maxDate: ee, disabledDates: x, size: S = "md", disabled: C, readOnly: w, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: k, "aria-describedby": te, "aria-label": ne, calendarLabel: A = "Calendario", previousMonthLabel: re, nextMonthLabel: j, previousYearsLabel: M, nextYearsLabel: N, yearGridLabel: P, gridLabel: F, onBlur: I, className: L }, R) {
-	let [z, B] = l(!1), V = s(() => g(E), [E]), H = i instanceof Date ? V.format(i) : "", [U, W] = l(H), [G, K] = l(H);
-	H !== G && (K(H), W(H));
-	let q = c(null), J = a((e) => {
-		q.current = e, typeof R == "function" ? R(e) : R && (R.current = e);
-	}, [R]), Y = U.trim(), X = Y ? V.parse(U) : null, Z = Y !== "" && !X, ie = T || Z, Q = `${o()}-date-picker-invalid`, ae = [k ?? te, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, oe = a((e) => {
-		(w || C) && e || B(e);
-	}, [C, w]), $ = a((e) => {
+var v = a(function({ value: a, onChange: p, placeholder: m, maskLetters: h, invalidMessage: v, openCalendarLabel: y, minDate: b, maxDate: x, disabledDates: S, size: C = "md", disabled: w, readOnly: T, error: E = !1, locale: D = "es-ES", id: O, name: k, describedBy: ee, "aria-describedby": te, "aria-label": ne, calendarLabel: re, previousMonthLabel: ie, nextMonthLabel: ae, previousYearsLabel: A, nextYearsLabel: j, yearGridLabel: M, gridLabel: N, onBlur: P, className: F }, I) {
+	let L = e("datePicker"), [R, z] = u(!1), B = c(() => g(D), [D]), V = a instanceof Date ? B.format(a) : "", [H, U] = u(V), [W, G] = u(V);
+	V !== W && (G(V), U(V));
+	let K = l(null), q = o((e) => {
+		K.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
+	}, [I]), J = H.trim(), Y = J ? B.parse(H) : null, X = J !== "" && !Y, oe = E || X, Z = `${s()}-date-picker-invalid`, se = [ee ?? te, X ? Z : void 0].filter(Boolean).join(" ") || void 0, ce = o((e) => {
+		(T || w) && e || z(e);
+	}, [w, T]), le = o((e) => {
 		let t = e.target.value;
-		if (W(t), t.trim() === "") {
+		if (U(t), t.trim() === "") {
 			p?.(null);
 			return;
 		}
-		let n = V.parse(t);
+		let n = B.parse(t);
 		n && p?.(n);
-	}, [V, p]), se = a((e) => {
-		if (e.key === "ArrowDown" && !w && !C) {
-			e.preventDefault(), B(!0);
+	}, [B, p]), ue = o((e) => {
+		if (e.key === "ArrowDown" && !T && !w) {
+			e.preventDefault(), z(!0);
 			return;
 		}
-		e.key === "Escape" && z && (e.preventDefault(), B(!1));
+		e.key === "Escape" && R && (e.preventDefault(), z(!1));
 	}, [
-		C,
-		z,
-		w
-	]), ce = a((e) => {
-		W(V.format(e)), p?.(e), B(!1), requestAnimationFrame(() => q.current?.focus());
-	}, [V, p]), le = /* @__PURE__ */ u("button", {
+		w,
+		R,
+		T
+	]), Q = o((e) => {
+		U(B.format(e)), p?.(e), z(!1), requestAnimationFrame(() => K.current?.focus());
+	}, [B, p]), de = /* @__PURE__ */ d("button", {
 		type: "button",
 		className: "date-picker__button",
-		"aria-label": y,
+		"aria-label": L("openCalendar", y),
 		"aria-haspopup": "dialog",
-		"aria-expanded": z,
-		disabled: C,
-		tabIndex: w ? -1 : void 0,
-		children: /* @__PURE__ */ u(e, {
+		"aria-expanded": R,
+		disabled: w,
+		tabIndex: T ? -1 : void 0,
+		children: /* @__PURE__ */ d(t, {
 			name: "calendar",
 			size: "sm",
 			className: "date-picker__glyph"
 		})
-	});
-	return /* @__PURE__ */ d("div", {
+	}), $ = L("calendar", re);
+	return /* @__PURE__ */ f("div", {
 		className: [
 			"date-picker",
-			S === "md" ? "" : `date-picker--${S}`,
-			L ?? ""
+			C === "md" ? "" : `date-picker--${C}`,
+			F ?? ""
 		].filter(Boolean).join(" "),
 		children: [
-			O && /* @__PURE__ */ u("input", {
+			k && /* @__PURE__ */ d("input", {
 				type: "hidden",
-				name: O,
-				value: i instanceof Date ? _(i) : ""
+				name: k,
+				value: a instanceof Date ? _(a) : ""
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: "date-picker__control",
-				children: [/* @__PURE__ */ u(t, {
-					ref: J,
-					id: D,
+				children: [/* @__PURE__ */ d(n, {
+					ref: q,
+					id: O,
 					className: "date-picker__input",
 					type: "text",
 					inputMode: "numeric",
 					autoComplete: "off",
-					size: S,
-					error: ie,
-					value: U,
-					placeholder: m ?? V.mask(h),
-					disabled: C,
-					readOnly: w,
+					size: C,
+					error: oe,
+					value: H,
+					placeholder: m ?? B.mask(L("maskLetters", h)),
+					disabled: w,
+					readOnly: T,
 					"aria-label": ne,
-					"aria-describedby": ae,
-					onChange: $,
-					onKeyDown: se,
-					onBlur: I
-				}), /* @__PURE__ */ u(n, {
-					trigger: le,
-					label: A,
-					open: z,
-					onOpenChange: oe,
+					"aria-describedby": se,
+					onChange: le,
+					onKeyDown: ue,
+					onBlur: P
+				}), /* @__PURE__ */ d(r, {
+					trigger: de,
+					label: $,
+					open: R,
+					onOpenChange: ce,
 					side: "bottom",
 					align: "end",
 					sideOffset: -1,
 					className: "date-picker__popover",
-					children: /* @__PURE__ */ u(r, {
-						value: X ?? i ?? null,
-						onChange: ce,
-						gridLabel: F ?? A,
-						previousMonthLabel: re,
-						nextMonthLabel: j,
-						previousYearsLabel: M,
-						nextYearsLabel: N,
-						yearGridLabel: P,
+					children: /* @__PURE__ */ d(i, {
+						value: Y ?? a ?? null,
+						onChange: Q,
+						gridLabel: N ?? $,
+						previousMonthLabel: ie,
+						nextMonthLabel: ae,
+						previousYearsLabel: A,
+						nextYearsLabel: j,
+						yearGridLabel: M,
 						minDate: b,
-						maxDate: ee,
-						disabledDates: x,
-						locale: E,
-						size: S
+						maxDate: x,
+						disabledDates: S,
+						locale: D,
+						size: C
 					})
 				})]
 			}),
-			Z && /* @__PURE__ */ u("span", {
-				id: Q,
+			X && /* @__PURE__ */ d("span", {
+				id: Z,
 				className: "date-picker__message",
 				role: "alert",
-				children: v
+				children: L("invalid", v)
 			})
 		]
 	});