@stackcraftmx/calcita 0.23.0 → 0.26.0

package/dist/formatting.js

@@ -1,162 +1,189 @@
 import { parseInstant, parsePlainDate } from "./dates.js";
-import { toolkitSettings, intlLocaleOf } from "./toolkit/toolkitSettings.js";
+import { intlLocaleOf, toolkitSettings } from "./toolkit/toolkitSettings.js";
 const formatterCache = /* @__PURE__ */ new Map();
-function activeLocale() {
-  return intlLocaleOf(toolkitSettings().language);
-}
-function cachedFormatter(kind, options, createFormatter) {
-  const locale = activeLocale();
-  const cacheKey = `${kind}|${locale}|${JSON.stringify(options)}`;
-  if (!formatterCache.has(cacheKey)) {
-    formatterCache.set(cacheKey, createFormatter(locale, options));
+function formattersOf(settingsOf) {
+  function cachedFormatter(kind, options, createFormatter) {
+    const settings = settingsOf();
+    const locale = intlLocaleOf(settings.language, settings.languages);
+    const cacheKey = `${kind}|${locale}|${JSON.stringify(options)}`;
+    if (!formatterCache.has(cacheKey)) {
+      formatterCache.set(cacheKey, createFormatter(locale, options));
+    }
+    return formatterCache.get(cacheKey);
   }
-  return formatterCache.get(cacheKey);
-}
-function formatNumber(value, fallback = "—") {
-  if (value === null || value === void 0 || value === "" || Number.isNaN(Number(value))) {
-    return fallback;
+  function formatNumber2(value, fallback = "—") {
+    if (value === null || value === void 0 || value === "" || Number.isNaN(Number(value))) {
+      return fallback;
+    }
+    const formatter = cachedFormatter(
+      "number",
+      { maximumFractionDigits: 0 },
+      (locale, options) => new Intl.NumberFormat(locale, options)
+    );
+    return formatter.format(Number(value));
   }
-  const formatter = cachedFormatter(
-    "number",
-    { maximumFractionDigits: 0 },
-    (locale, options) => new Intl.NumberFormat(locale, options)
-  );
-  return formatter.format(Number(value));
-}
-function formatList(items) {
-  const formatter = cachedFormatter(
-    "list",
-    { style: "long", type: "conjunction" },
-    (locale, options) => new Intl.ListFormat(locale, options)
-  );
-  return formatter.format(items);
-}
-function formatCurrency(value, fallback = "—") {
-  if (value === null || value === void 0 || value === "" || Number.isNaN(Number(value))) {
-    return fallback;
+  function formatList2(items) {
+    const formatter = cachedFormatter(
+      "list",
+      { style: "long", type: "conjunction" },
+      (locale, options) => new Intl.ListFormat(locale, options)
+    );
+    return formatter.format(items);
   }
-  const formatter = cachedFormatter("currency", {
-    style: "currency",
-    currency: toolkitSettings().currency,
-    currencyDisplay: "narrowSymbol",
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
-  }, (locale, options) => new Intl.NumberFormat(locale, options));
-  return formatter.format(Number(value));
-}
-function formatFileSize(bytes, fallback = "—") {
-  if (bytes === null || bytes === void 0 || Number.isNaN(Number(bytes))) {
-    return fallback;
+  function formatCurrency2(value, fallback = "—") {
+    if (value === null || value === void 0 || value === "" || Number.isNaN(Number(value))) {
+      return fallback;
+    }
+    const formatter = cachedFormatter("currency", {
+      style: "currency",
+      currency: settingsOf().currency,
+      currencyDisplay: "narrowSymbol",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }, (locale, options) => new Intl.NumberFormat(locale, options));
+    return formatter.format(Number(value));
   }
-  const units = [["gigabyte", 1e9], ["megabyte", 1e6], ["kilobyte", 1e3]];
-  for (const [unit, unitBytes] of units) {
-    if (Number(bytes) >= unitBytes) {
-      const formatter2 = cachedFormatter(
-        `fileSize-${unit}`,
-        { style: "unit", unit, maximumFractionDigits: 1 },
-        (locale, options) => new Intl.NumberFormat(locale, options)
-      );
-      return formatter2.format(Number(bytes) / unitBytes);
+  function formatFileSize2(bytes, fallback = "—") {
+    if (bytes === null || bytes === void 0 || Number.isNaN(Number(bytes))) {
+      return fallback;
+    }
+    const units = [["gigabyte", 1e9], ["megabyte", 1e6], ["kilobyte", 1e3]];
+    for (const [unit, unitBytes] of units) {
+      if (Number(bytes) >= unitBytes) {
+        const formatter2 = cachedFormatter(
+          `fileSize-${unit}`,
+          { style: "unit", unit, maximumFractionDigits: 1 },
+          (locale, options) => new Intl.NumberFormat(locale, options)
+        );
+        return formatter2.format(Number(bytes) / unitBytes);
+      }
     }
+    const formatter = cachedFormatter(
+      "fileSize-byte",
+      { style: "unit", unit: "byte", unitDisplay: "long", maximumFractionDigits: 0 },
+      (locale, options) => new Intl.NumberFormat(locale, options)
+    );
+    return formatter.format(Number(bytes));
   }
-  const formatter = cachedFormatter(
-    "fileSize-byte",
-    { style: "unit", unit: "byte", unitDisplay: "long", maximumFractionDigits: 0 },
-    (locale, options) => new Intl.NumberFormat(locale, options)
-  );
-  return formatter.format(Number(bytes));
-}
-function formatPercent(value, { fractionDigits = 2, isRatio = false, fallback = "—" } = {}) {
-  if (value === null || value === void 0 || Number.isNaN(Number(value))) {
-    return fallback;
+  function formatPercent2(value, { fractionDigits = 2, isRatio = false, fallback = "—" } = {}) {
+    if (value === null || value === void 0 || Number.isNaN(Number(value))) {
+      return fallback;
+    }
+    const ratio = isRatio ? Number(value) : Number(value) / 100;
+    const formatter = cachedFormatter(
+      "percent",
+      { style: "percent", minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits },
+      (locale, options) => new Intl.NumberFormat(locale, options)
+    );
+    return formatter.format(ratio);
   }
-  const ratio = isRatio ? Number(value) : Number(value) / 100;
-  const formatter = cachedFormatter(
-    "percent",
-    { style: "percent", minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits },
-    (locale, options) => new Intl.NumberFormat(locale, options)
-  );
-  return formatter.format(ratio);
-}
-function formatDateTime(value, { fallback = "—" } = {}) {
-  const instant = parseInstant(value);
-  if (!instant) {
-    return fallback;
+  function formatDateTime2(value, { fallback = "—" } = {}) {
+    const instant = parseInstant(value);
+    if (!instant) {
+      return fallback;
+    }
+    const options = {
+      timeZone: settingsOf().timeZone,
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      hourCycle: "h23"
+    };
+    const formatter = cachedFormatter("dateTime", options, (locale, formatOptions) => new Intl.DateTimeFormat(locale, formatOptions));
+    return formatter.format(instant);
   }
-  const options = {
-    timeZone: toolkitSettings().timeZone,
-    day: "numeric",
-    month: "short",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    hourCycle: "h23"
-  };
-  const formatter = cachedFormatter("dateTime", options, (locale, formatOptions) => new Intl.DateTimeFormat(locale, formatOptions));
-  return formatter.format(instant);
-}
-function formatDate(value, { fallback = "—" } = {}) {
-  const calendarDate = parsePlainDate(value);
-  if (calendarDate) {
-    const formatter2 = cachedFormatter(
-      "plainDate",
-      { timeZone: "UTC", day: "numeric", month: "short", year: "numeric" },
+  function formatDate2(value, { fallback = "—" } = {}) {
+    const calendarDate = parsePlainDate(value);
+    if (calendarDate) {
+      const formatter2 = cachedFormatter(
+        "plainDate",
+        { timeZone: "UTC", day: "numeric", month: "short", year: "numeric" },
+        (locale, options) => new Intl.DateTimeFormat(locale, options)
+      );
+      return formatter2.format(new Date(Date.UTC(calendarDate.year, calendarDate.month - 1, calendarDate.day, 12)));
+    }
+    const instant = parseInstant(value);
+    if (!instant) {
+      return fallback;
+    }
+    const formatter = cachedFormatter(
+      "date",
+      { timeZone: settingsOf().timeZone, day: "numeric", month: "short", year: "numeric" },
       (locale, options) => new Intl.DateTimeFormat(locale, options)
     );
-    return formatter2.format(new Date(Date.UTC(calendarDate.year, calendarDate.month - 1, calendarDate.day, 12)));
+    return formatter.format(instant);
   }
-  const instant = parseInstant(value);
-  if (!instant) {
-    return fallback;
+  function formatTime2(value, { fallback = "—" } = {}) {
+    const instant = parseInstant(value);
+    if (!instant) {
+      return fallback;
+    }
+    const formatter = cachedFormatter(
+      "time",
+      { timeZone: settingsOf().timeZone, hour: "2-digit", minute: "2-digit", hourCycle: "h23" },
+      (locale, options) => new Intl.DateTimeFormat(locale, options)
+    );
+    return formatter.format(instant);
   }
-  const formatter = cachedFormatter(
-    "date",
-    { timeZone: toolkitSettings().timeZone, day: "numeric", month: "short", year: "numeric" },
-    (locale, options) => new Intl.DateTimeFormat(locale, options)
-  );
-  return formatter.format(instant);
-}
-function formatTime(value, { fallback = "—" } = {}) {
-  const instant = parseInstant(value);
-  if (!instant) {
-    return fallback;
+  function formatMonthName2(year, month, { style = "long", capitalize = false } = {}) {
+    if (!Number.isInteger(Number(year)) || !Number.isInteger(Number(month))) {
+      return "—";
+    }
+    const formatter = cachedFormatter(
+      "monthName",
+      { timeZone: "UTC", month: style },
+      (locale, options) => new Intl.DateTimeFormat(locale, options)
+    );
+    const monthName = formatter.format(new Date(Date.UTC(Number(year), Number(month) - 1, 15, 12))).replace(/\.$/, "");
+    const label = `${monthName} ${year}`;
+    return capitalize ? label.charAt(0).toUpperCase() + label.slice(1) : label;
   }
-  const formatter = cachedFormatter(
-    "time",
-    { timeZone: toolkitSettings().timeZone, hour: "2-digit", minute: "2-digit", hourCycle: "h23" },
-    (locale, options) => new Intl.DateTimeFormat(locale, options)
-  );
-  return formatter.format(instant);
-}
-function formatMonthName(year, month, { style = "long", capitalize = false } = {}) {
-  if (!Number.isInteger(Number(year)) || !Number.isInteger(Number(month))) {
-    return "—";
+  function formatMonthShortName2(month) {
+    const formatter = cachedFormatter(
+      "monthShortName",
+      { timeZone: "UTC", month: "short" },
+      (locale, options) => new Intl.DateTimeFormat(locale, options)
+    );
+    return formatter.format(new Date(Date.UTC(2024, Number(month) - 1, 15, 12))).replace(/\.$/, "");
   }
-  const formatter = cachedFormatter(
-    "monthName",
-    { timeZone: "UTC", month: style },
-    (locale, options) => new Intl.DateTimeFormat(locale, options)
-  );
-  const monthName = formatter.format(new Date(Date.UTC(Number(year), Number(month) - 1, 15, 12))).replace(/\.$/, "");
-  const label = `${monthName} ${year}`;
-  return capitalize ? label.charAt(0).toUpperCase() + label.slice(1) : label;
-}
-function formatMonthShortName(month) {
-  const formatter = cachedFormatter(
-    "monthShortName",
-    { timeZone: "UTC", month: "short" },
-    (locale, options) => new Intl.DateTimeFormat(locale, options)
-  );
-  return formatter.format(new Date(Date.UTC(2024, Number(month) - 1, 15, 12))).replace(/\.$/, "");
-}
-function formatWeekdayShortName(isoWeekday) {
-  const formatter = cachedFormatter(
-    "weekdayShortName",
-    { timeZone: "UTC", weekday: "short" },
-    (locale, options) => new Intl.DateTimeFormat(locale, options)
-  );
-  return formatter.format(new Date(Date.UTC(2024, 0, Number(isoWeekday), 12))).replace(/\.$/, "");
+  function formatWeekdayShortName2(isoWeekday) {
+    const formatter = cachedFormatter(
+      "weekdayShortName",
+      { timeZone: "UTC", weekday: "short" },
+      (locale, options) => new Intl.DateTimeFormat(locale, options)
+    );
+    return formatter.format(new Date(Date.UTC(2024, 0, Number(isoWeekday), 12))).replace(/\.$/, "");
+  }
+  return Object.freeze({
+    formatNumber: formatNumber2,
+    formatList: formatList2,
+    formatCurrency: formatCurrency2,
+    formatFileSize: formatFileSize2,
+    formatPercent: formatPercent2,
+    formatDateTime: formatDateTime2,
+    formatDate: formatDate2,
+    formatTime: formatTime2,
+    formatMonthName: formatMonthName2,
+    formatMonthShortName: formatMonthShortName2,
+    formatWeekdayShortName: formatWeekdayShortName2
+  });
 }
+const currentFormatters = formattersOf(toolkitSettings);
+const {
+  formatNumber,
+  formatList,
+  formatCurrency,
+  formatFileSize,
+  formatPercent,
+  formatDateTime,
+  formatDate,
+  formatTime,
+  formatMonthName,
+  formatMonthShortName,
+  formatWeekdayShortName
+} = currentFormatters;
 function dayOfPlainDate(value) {
   return parsePlainDate(value)?.day ?? null;
 }
@@ -172,6 +199,7 @@ export {
   formatNumber,
   formatPercent,
   formatTime,
-  formatWeekdayShortName
+  formatWeekdayShortName,
+  formattersOf
 };
 //# sourceMappingURL=formatting.js.map

package/dist/formatting.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatting.js","sources":["../src/formatting.js"],"sourcesContent":["// Cómo se escriben números, porcentajes y fechas en pantalla.\n//\n// Siempre en el idioma activo (es-MX o en-US), las fechas en la zona y los montos en la moneda del proveedor\n// (ToolkitProvider). Cuando una hora necesita rótulo, la pantalla lo escribe con su propio texto («hora del centro de\n// México») y no con la abreviatura de Intl (GMT-6), que no le dice nada a la persona.\n//\n// Los Intl.* se memorizan por idioma: crear un formateador por celda en una tabla de cientos de filas se nota.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {parseInstant, parsePlainDate} from '@/dates.js';\nimport {intlLocaleOf, toolkitSettings} from '@/toolkit/toolkitSettings.js';\n\nconst formatterCache = new Map();\n\nfunction activeLocale() {\n    return intlLocaleOf(toolkitSettings().language);\n}\n\nfunction cachedFormatter(kind, options, createFormatter) {\n    const locale = activeLocale();\n    const cacheKey = `${kind}|${locale}|${JSON.stringify(options)}`;\n    if (!formatterCache.has(cacheKey)) {\n        formatterCache.set(cacheKey, createFormatter(locale, options));\n    }\n    return formatterCache.get(cacheKey);\n}\n\n/**\n * Número con separador de miles: 321,540.\n *\n * @param {number|string|null|undefined} value\n * @param {string} [fallback] lo que se pinta si no hay dato\n */\nexport function formatNumber(value, fallback = '—') {\n    if (value === null || value === undefined || value === '' || Number.isNaN(Number(value))) {\n        return fallback;\n    }\n    const formatter = cachedFormatter('number', {maximumFractionDigits: 0},\n        (locale, options) => new Intl.NumberFormat(locale, options));\n    return formatter.format(Number(value));\n}\n\n/**\n * Una lista en una frase, con su «y» antes de la última parte: «resumen, motivos de rechazo y descargas».\n *\n * @param {string[]} items las partes de la lista, ya traducidas\n * @returns {string} la frase; '' si la lista viene vacía\n */\nexport function formatList(items) {\n    const formatter = cachedFormatter('list', {style: 'long', type: 'conjunction'},\n        (locale, options) => new Intl.ListFormat(locale, options));\n    return formatter.format(items);\n}\n\n\n/**\n * Monto en la moneda del proveedor con dos decimales: $2,567,951.00. Recibe el texto que manda el API (numeric de la base) o un número;\n * solo pinta, nunca suma (las sumas las hace el backend al centavo).\n *\n * @param {number|string|null|undefined} value\n * @param {string} [fallback] lo que se pinta si no hay dato\n */\nexport function formatCurrency(value, fallback = '—') {\n    if (value === null || value === undefined || value === '' || Number.isNaN(Number(value))) {\n        return fallback;\n    }\n    const formatter = cachedFormatter('currency', {\n        style: 'currency', currency: toolkitSettings().currency, currencyDisplay: 'narrowSymbol', minimumFractionDigits: 2, maximumFractionDigits: 2,\n    }, (locale, options) => new Intl.NumberFormat(locale, options));\n    return formatter.format(Number(value));\n}\n\n/**\n * Tamaño de un archivo en la unidad que se lee mejor: 950 B, 12.4 kB, 60.1 MB, 2.3 GB.\n *\n * @param {number|null|undefined} bytes\n * @param {string} [fallback] lo que se pinta si no hay dato\n */\nexport function formatFileSize(bytes, fallback = '—') {\n    if (bytes === null || bytes === undefined || Number.isNaN(Number(bytes))) {\n        return fallback;\n    }\n    // unidades de Intl en base 1000, igual que las que enseña el navegador en sus descargas\n    const units = [['gigabyte', 1e9], ['megabyte', 1e6], ['kilobyte', 1e3]];\n    for (const [unit, unitBytes] of units) {\n        if (Number(bytes) >= unitBytes) {\n            const formatter = cachedFormatter(`fileSize-${unit}`, {style: 'unit', unit, maximumFractionDigits: 1},\n                (locale, options) => new Intl.NumberFormat(locale, options));\n            return formatter.format(Number(bytes) / unitBytes);\n        }\n    }\n    // OJO: con la forma corta Intl no pone plural («74 byte», y «1 B» con el uno); la larga dice «74 bytes» y «1 byte»,\n    // como lo enseña la Mac. Las demás unidades se quedan cortas (kB, MB): ahí la abreviatura sí se lee bien.\n    const formatter = cachedFormatter('fileSize-byte', {style: 'unit', unit: 'byte', unitDisplay: 'long', maximumFractionDigits: 0},\n        (locale, options) => new Intl.NumberFormat(locale, options));\n    return formatter.format(Number(bytes));\n}\n\n/**\n * Porcentaje a partir de una proporción o de un número ya en porcentaje.\n *\n * @param {number|null|undefined} value 99.58 (con isRatio false) o 0.9958 (con isRatio true)\n * @param {{fractionDigits?: number, isRatio?: boolean, fallback?: string}} [options]\n */\nexport function formatPercent(value, {fractionDigits = 2, isRatio = false, fallback = '—'} = {}) {\n    if (value === null || value === undefined || Number.isNaN(Number(value))) {\n        return fallback;\n    }\n    const ratio = isRatio ? Number(value) : Number(value) / 100;\n    const formatter = cachedFormatter('percent', {style: 'percent', minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits},\n        (locale, options) => new Intl.NumberFormat(locale, options));\n    return formatter.format(ratio);\n}\n\n/**\n * Fecha y hora de un instante ISO en la zona del negocio.\n *\n * @param {string|null|undefined} value instante ISO con desfase\n * @param {{fallback?: string}} [options]\n */\nexport function formatDateTime(value, {fallback = '—'} = {}) {\n    const instant = parseInstant(value);\n    if (!instant) {\n        return fallback;\n    }\n    const options = {\n        timeZone: toolkitSettings().timeZone,\n        day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hourCycle: 'h23',\n    };\n    const formatter = cachedFormatter('dateTime', options, (locale, formatOptions) => new Intl.DateTimeFormat(locale, formatOptions));\n    return formatter.format(instant);\n}\n\n/**\n * Solo la fecha. Acepta un instante ISO (se pasa a la zona del negocio) o una fecha de calendario \"2026-08-16\"\n * (se pinta tal cual, sin moverla de día).\n *\n * @param {string|null|undefined} value\n * @param {{fallback?: string}} [options]\n */\nexport function formatDate(value, {fallback = '—'} = {}) {\n    const calendarDate = parsePlainDate(value);\n    if (calendarDate) {\n        const formatter = cachedFormatter('plainDate', {timeZone: 'UTC', day: 'numeric', month: 'short', year: 'numeric'},\n            (locale, options) => new Intl.DateTimeFormat(locale, options));\n        // mediodía UTC y Intl en UTC: el mismo día en cualquier zona\n        return formatter.format(new Date(Date.UTC(calendarDate.year, calendarDate.month - 1, calendarDate.day, 12)));\n    }\n    const instant = parseInstant(value);\n    if (!instant) {\n        return fallback;\n    }\n    const formatter = cachedFormatter('date', {timeZone: toolkitSettings().timeZone, day: 'numeric', month: 'short', year: 'numeric'},\n        (locale, options) => new Intl.DateTimeFormat(locale, options));\n    return formatter.format(instant);\n}\n\n/**\n * Solo la hora (24 h) de un instante ISO en la zona del negocio: \"07:00\".\n *\n * Existe aparte de formatDateTime porque las pantallas escriben \"16 ago 2026 · 07:00\" con punto medio, y Intl une\n * fecha y hora con coma: se arma formatDate + formatTime.\n *\n * @param {string|null|undefined} value instante ISO con desfase\n * @param {{fallback?: string}} [options]\n */\nexport function formatTime(value, {fallback = '—'} = {}) {\n    const instant = parseInstant(value);\n    if (!instant) {\n        return fallback;\n    }\n    const formatter = cachedFormatter('time', {timeZone: toolkitSettings().timeZone, hour: '2-digit', minute: '2-digit', hourCycle: 'h23'},\n        (locale, options) => new Intl.DateTimeFormat(locale, options));\n    return formatter.format(instant);\n}\n\n/**\n * Nombre de un mes de calendario: \"agosto 2026\" (long) o \"ago 2026\" (short).\n *\n * OJO: no se usa Intl con {month, year} juntos porque en español sale \"agosto de 2026\" y las pantallas dicen\n * \"agosto 2026\"; se pide solo el mes y se pega el año.\n *\n * @param {number} year\n * @param {number} month 1 a 12\n * @param {{style?: 'long'|'short', capitalize?: boolean}} [options] capitalize: \"Agosto 2026\" (fila de mes)\n */\nexport function formatMonthName(year, month, {style = 'long', capitalize = false} = {}) {\n    if (!Number.isInteger(Number(year)) || !Number.isInteger(Number(month))) {\n        return '—';\n    }\n    const formatter = cachedFormatter('monthName', {timeZone: 'UTC', month: style},\n        (locale, options) => new Intl.DateTimeFormat(locale, options));\n    // día 15 a mediodía UTC: el mismo mes en cualquier zona\n    const monthName = formatter.format(new Date(Date.UTC(Number(year), Number(month) - 1, 15, 12))).replace(/\\.$/, '');\n    const label = `${monthName} ${year}`;\n    return capitalize ? label.charAt(0).toUpperCase() + label.slice(1) : label;\n}\n\n/**\n * Nombre corto de un mes sin año: \"ene\", \"feb\" (rótulos de columnas de calendario y rejillas por periodo).\n *\n * @param {number} month 1 a 12\n * @returns {string}\n */\nexport function formatMonthShortName(month) {\n    const formatter = cachedFormatter('monthShortName', {timeZone: 'UTC', month: 'short'},\n        (locale, options) => new Intl.DateTimeFormat(locale, options));\n    // 2024 empieza en lunes y es bisiesto: da igual, solo se pide el mes a mediodía UTC\n    return formatter.format(new Date(Date.UTC(2024, Number(month) - 1, 15, 12))).replace(/\\.$/, '');\n}\n\n/**\n * Nombre corto de un día de la semana: \"lun\", \"mié\" (renglones del calendario de actividad).\n *\n * @param {number} isoWeekday 1 = lunes ... 7 = domingo\n * @returns {string}\n */\nexport function formatWeekdayShortName(isoWeekday) {\n    const formatter = cachedFormatter('weekdayShortName', {timeZone: 'UTC', weekday: 'short'},\n        (locale, options) => new Intl.DateTimeFormat(locale, options));\n    // el 1 de enero de 2024 fue lunes: lunes + (isoWeekday - 1) días\n    return formatter.format(new Date(Date.UTC(2024, 0, Number(isoWeekday), 12))).replace(/\\.$/, '');\n}\n\n/**\n * Día del mes de una fecha de calendario (\"2026-08-16\" → 16), sin moverla de zona.\n *\n * @param {string|null|undefined} value\n * @returns {number|null}\n */\nexport function dayOfPlainDate(value) {\n    return parsePlainDate(value)?.day ?? null;\n}\n"],"names":["formatter"],"mappings":"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"}
+{"version":3,"file":"formatting.js","sources":["../src/formatting.js"],"sourcesContent":["// Cómo se escriben números, porcentajes y fechas en pantalla.\n//\n// Siempre en el idioma activo (es-MX o en-US), las fechas en la zona y los montos en la moneda del proveedor\n// (ToolkitProvider). Cuando una hora necesita rótulo, la pantalla lo escribe con su propio texto («hora del centro de\n// México») y no con la abreviatura de Intl (GMT-6), que no le dice nada a la persona.\n//\n// Los Intl.* se memorizan por idioma: crear un formateador por celda en una tabla de cientos de filas se nota.\n//\n// Dos formas de usarlos:\n//   - sueltos (formatDate, formatNumber…): con la configuración vigente, la del ToolkitProvider de la raíz. Para lo que no\n//     es componente (un aviso, un Excel);\n//   - dentro de un componente, useFormatters() (toolkit/useFormatters.js): con la del proveedor MÁS CERCANO. Con dos\n//     proveedores (una parte de la app en otro idioma, o dos islas de React en una página vieja) cada parte escribe con\n//     el suyo; con los sueltos, el último proveedor que se pintaba le cambiaba el idioma a todos.\n// Los dos salen de formattersOf: una sola versión de cada formato.\n//\n// Funciones puras, no renderizan: function (regla de la casa).\nimport {parseInstant, parsePlainDate} from '@/dates.js';\nimport {intlLocaleOf, toolkitSettings} from '@/toolkit/toolkitSettings.js';\n\nconst formatterCache = new Map();\n\n/**\n * Los formatos con la configuración que da settingsOf (se lee en cada llamada: si cambia el idioma, el siguiente formato ya\n * sale en el nuevo).\n *\n * @param {() => {language: string, languages?: Array<{code: string, locale?: string}>, timeZone: string, currency: string}} settingsOf\n */\nexport function formattersOf(settingsOf) {\n    function cachedFormatter(kind, options, createFormatter) {\n        const settings = settingsOf();\n        const locale = intlLocaleOf(settings.language, settings.languages);\n        const cacheKey = `${kind}|${locale}|${JSON.stringify(options)}`;\n        if (!formatterCache.has(cacheKey)) {\n            formatterCache.set(cacheKey, createFormatter(locale, options));\n        }\n        return formatterCache.get(cacheKey);\n    }\n\n    /**\n     * Número con separador de miles: 321,540.\n     *\n     * @param {number|string|null|undefined} value\n     * @param {string} [fallback] lo que se pinta si no hay dato\n     * @returns {string}\n     */\n    function formatNumber(value, fallback = '—') {\n        if (value === null || value === undefined || value === '' || Number.isNaN(Number(value))) {\n            return fallback;\n        }\n        const formatter = cachedFormatter('number', {maximumFractionDigits: 0},\n            (locale, options) => new Intl.NumberFormat(locale, options));\n        return formatter.format(Number(value));\n    }\n\n    /**\n     * Una lista en una frase, con su «y» antes de la última parte: «resumen, motivos de rechazo y descargas».\n     *\n     * @param {string[]} items las partes de la lista, ya traducidas\n     * @returns {string} la frase; '' si la lista viene vacía\n     */\n    function formatList(items) {\n        const formatter = cachedFormatter('list', {style: 'long', type: 'conjunction'},\n            (locale, options) => new Intl.ListFormat(locale, options));\n        return formatter.format(items);\n    }\n\n\n    /**\n     * Monto en la moneda del proveedor con dos decimales: $2,567,951.00. Recibe el texto que manda el API (numeric de la base) o un número;\n     * solo pinta, nunca suma (las sumas las hace el backend al centavo).\n     *\n     * @param {number|string|null|undefined} value\n     * @param {string} [fallback] lo que se pinta si no hay dato\n     * @returns {string}\n     */\n    function formatCurrency(value, fallback = '—') {\n        if (value === null || value === undefined || value === '' || Number.isNaN(Number(value))) {\n            return fallback;\n        }\n        const formatter = cachedFormatter('currency', {\n            style: 'currency', currency: settingsOf().currency, currencyDisplay: 'narrowSymbol', minimumFractionDigits: 2, maximumFractionDigits: 2,\n        }, (locale, options) => new Intl.NumberFormat(locale, options));\n        return formatter.format(Number(value));\n    }\n\n    /**\n     * Tamaño de un archivo en la unidad que se lee mejor: 950 B, 12.4 kB, 60.1 MB, 2.3 GB.\n     *\n     * @param {number|null|undefined} bytes\n     * @param {string} [fallback] lo que se pinta si no hay dato\n     * @returns {string}\n     */\n    function formatFileSize(bytes, fallback = '—') {\n        if (bytes === null || bytes === undefined || Number.isNaN(Number(bytes))) {\n            return fallback;\n        }\n        // unidades de Intl en base 1000, igual que las que enseña el navegador en sus descargas\n        const units = [['gigabyte', 1e9], ['megabyte', 1e6], ['kilobyte', 1e3]];\n        for (const [unit, unitBytes] of units) {\n            if (Number(bytes) >= unitBytes) {\n                const formatter = cachedFormatter(`fileSize-${unit}`, {style: 'unit', unit, maximumFractionDigits: 1},\n                    (locale, options) => new Intl.NumberFormat(locale, options));\n                return formatter.format(Number(bytes) / unitBytes);\n            }\n        }\n        // OJO: con la forma corta Intl no pone plural («74 byte», y «1 B» con el uno); la larga dice «74 bytes» y «1 byte»,\n        // como lo enseña la Mac. Las demás unidades se quedan cortas (kB, MB): ahí la abreviatura sí se lee bien.\n        const formatter = cachedFormatter('fileSize-byte', {style: 'unit', unit: 'byte', unitDisplay: 'long', maximumFractionDigits: 0},\n            (locale, options) => new Intl.NumberFormat(locale, options));\n        return formatter.format(Number(bytes));\n    }\n\n    /**\n     * Porcentaje a partir de una proporción o de un número ya en porcentaje.\n     *\n     * @param {number|null|undefined} value 99.58 (con isRatio false) o 0.9958 (con isRatio true)\n     * @param {{fractionDigits?: number, isRatio?: boolean, fallback?: string}} [options]\n     * @returns {string}\n     */\n    function formatPercent(value, {fractionDigits = 2, isRatio = false, fallback = '—'} = {}) {\n        if (value === null || value === undefined || Number.isNaN(Number(value))) {\n            return fallback;\n        }\n        const ratio = isRatio ? Number(value) : Number(value) / 100;\n        const formatter = cachedFormatter('percent', {style: 'percent', minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits},\n            (locale, options) => new Intl.NumberFormat(locale, options));\n        return formatter.format(ratio);\n    }\n\n    /**\n     * Fecha y hora de un instante ISO en la zona del negocio.\n     *\n     * @param {string|null|undefined} value instante ISO con desfase\n     * @param {{fallback?: string}} [options]\n     * @returns {string}\n     */\n    function formatDateTime(value, {fallback = '—'} = {}) {\n        const instant = parseInstant(value);\n        if (!instant) {\n            return fallback;\n        }\n        const options = {\n            timeZone: settingsOf().timeZone,\n            day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hourCycle: 'h23',\n        };\n        const formatter = cachedFormatter('dateTime', options, (locale, formatOptions) => new Intl.DateTimeFormat(locale, formatOptions));\n        return formatter.format(instant);\n    }\n\n    /**\n     * Solo la fecha. Acepta un instante ISO (se pasa a la zona del negocio) o una fecha de calendario \"2026-08-16\"\n     * (se pinta tal cual, sin moverla de día).\n     *\n     * @param {string|null|undefined} value\n     * @param {{fallback?: string}} [options]\n     * @returns {string}\n     */\n    function formatDate(value, {fallback = '—'} = {}) {\n        const calendarDate = parsePlainDate(value);\n        if (calendarDate) {\n            const formatter = cachedFormatter('plainDate', {timeZone: 'UTC', day: 'numeric', month: 'short', year: 'numeric'},\n                (locale, options) => new Intl.DateTimeFormat(locale, options));\n            // mediodía UTC y Intl en UTC: el mismo día en cualquier zona\n            return formatter.format(new Date(Date.UTC(calendarDate.year, calendarDate.month - 1, calendarDate.day, 12)));\n        }\n        const instant = parseInstant(value);\n        if (!instant) {\n            return fallback;\n        }\n        const formatter = cachedFormatter('date', {timeZone: settingsOf().timeZone, day: 'numeric', month: 'short', year: 'numeric'},\n            (locale, options) => new Intl.DateTimeFormat(locale, options));\n        return formatter.format(instant);\n    }\n\n    /**\n     * Solo la hora (24 h) de un instante ISO en la zona del negocio: \"07:00\".\n     *\n     * Existe aparte de formatDateTime porque las pantallas escriben \"16 ago 2026 · 07:00\" con punto medio, y Intl une\n     * fecha y hora con coma: se arma formatDate + formatTime.\n     *\n     * @param {string|null|undefined} value instante ISO con desfase\n     * @param {{fallback?: string}} [options]\n     * @returns {string}\n     */\n    function formatTime(value, {fallback = '—'} = {}) {\n        const instant = parseInstant(value);\n        if (!instant) {\n            return fallback;\n        }\n        const formatter = cachedFormatter('time', {timeZone: settingsOf().timeZone, hour: '2-digit', minute: '2-digit', hourCycle: 'h23'},\n            (locale, options) => new Intl.DateTimeFormat(locale, options));\n        return formatter.format(instant);\n    }\n\n    /**\n     * Nombre de un mes de calendario: \"agosto 2026\" (long) o \"ago 2026\" (short).\n     *\n     * OJO: no se usa Intl con {month, year} juntos porque en español sale \"agosto de 2026\" y las pantallas dicen\n     * \"agosto 2026\"; se pide solo el mes y se pega el año.\n     *\n     * @param {number} year\n     * @param {number} month 1 a 12\n     * @param {{style?: 'long'|'short', capitalize?: boolean}} [options] capitalize: \"Agosto 2026\" (fila de mes)\n     */\n    function formatMonthName(year, month, {style = 'long', capitalize = false} = {}) {\n        if (!Number.isInteger(Number(year)) || !Number.isInteger(Number(month))) {\n            return '—';\n        }\n        const formatter = cachedFormatter('monthName', {timeZone: 'UTC', month: style},\n            (locale, options) => new Intl.DateTimeFormat(locale, options));\n        // día 15 a mediodía UTC: el mismo mes en cualquier zona\n        const monthName = formatter.format(new Date(Date.UTC(Number(year), Number(month) - 1, 15, 12))).replace(/\\.$/, '');\n        const label = `${monthName} ${year}`;\n        return capitalize ? label.charAt(0).toUpperCase() + label.slice(1) : label;\n    }\n\n    /**\n     * Nombre corto de un mes sin año: \"ene\", \"feb\" (rótulos de columnas de calendario y rejillas por periodo).\n     *\n     * @param {number} month 1 a 12\n     * @returns {string}\n     */\n    function formatMonthShortName(month) {\n        const formatter = cachedFormatter('monthShortName', {timeZone: 'UTC', month: 'short'},\n            (locale, options) => new Intl.DateTimeFormat(locale, options));\n        // 2024 empieza en lunes y es bisiesto: da igual, solo se pide el mes a mediodía UTC\n        return formatter.format(new Date(Date.UTC(2024, Number(month) - 1, 15, 12))).replace(/\\.$/, '');\n    }\n\n    /**\n     * Nombre corto de un día de la semana: \"lun\", \"mié\" (renglones del calendario de actividad).\n     *\n     * @param {number} isoWeekday 1 = lunes ... 7 = domingo\n     * @returns {string}\n     */\n    function formatWeekdayShortName(isoWeekday) {\n        const formatter = cachedFormatter('weekdayShortName', {timeZone: 'UTC', weekday: 'short'},\n            (locale, options) => new Intl.DateTimeFormat(locale, options));\n        // el 1 de enero de 2024 fue lunes: lunes + (isoWeekday - 1) días\n        return formatter.format(new Date(Date.UTC(2024, 0, Number(isoWeekday), 12))).replace(/\\.$/, '');\n    }\n\n    return Object.freeze({\n        formatNumber, formatList, formatCurrency, formatFileSize, formatPercent, formatDateTime, formatDate, formatTime, formatMonthName,\n        formatMonthShortName, formatWeekdayShortName,\n    });\n}\n\n// los sueltos: con la configuración vigente (la del proveedor de la raíz)\nconst currentFormatters = formattersOf(toolkitSettings);\nexport const {\n    formatNumber, formatList, formatCurrency, formatFileSize, formatPercent, formatDateTime, formatDate, formatTime, formatMonthName,\n    formatMonthShortName, formatWeekdayShortName,\n} = currentFormatters;\n\n/**\n * Día del mes de una fecha de calendario (\"2026-08-16\" → 16), sin moverla de zona.\n *\n * @param {string|null|undefined} value\n * @returns {number|null}\n */\nexport function dayOfPlainDate(value) {\n    return parsePlainDate(value)?.day ?? null;\n}\n"],"names":["formatNumber","formatList","formatCurrency","formatFileSize","formatter","formatPercent","formatDateTime","formatDate","formatTime","formatMonthName","formatMonthShortName","formatWeekdayShortName"],"mappings":"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"}

package/dist/forms/FormWizard.js

@@ -1,28 +1,19 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { useFormikContext, getIn } from "formik";
-import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import Stack from "@mui/material/Stack";
-import Step from "@mui/material/Step";
-import StepLabel from "@mui/material/StepLabel";
-import Stepper from "@mui/material/Stepper";
-import Typography from "@mui/material/Typography";
 import FormProblemAlert from "./FormProblemAlert.js";
 import SubmitButton from "./SubmitButton.js";
+import WizardLayout from "../inputs/WizardLayout.js";
 function firstStepWithErrorOf(steps, errors) {
   return steps.findIndex((step) => (step.fields ?? []).some((field) => getIn(errors, field)));
 }
-function FormWizard({ steps, submitLabel }) {
-  const { t } = useToolkitTranslation("common");
+function FormWizard({ steps, submitLabel, texts }) {
   const { validateForm, setFieldTouched, setFieldValue, initialValues, errors, isSubmitting } = useFormikContext();
   const [activeIndex, setActiveIndex] = useState(0);
   const [skippedKeys, setSkippedKeys] = useState(() => /* @__PURE__ */ new Set());
   const wasSubmitting = useRef(false);
   const activeStep = steps[activeIndex];
-  const isLastStep = activeIndex === steps.length - 1;
   useEffect(() => {
     if (wasSubmitting.current && !isSubmitting) {
       const errorStepIndex = firstStepWithErrorOf(steps, errors);
@@ -50,39 +41,21 @@ function FormWizard({ steps, submitLabel }) {
     setSkippedKeys((currentKeys) => /* @__PURE__ */ new Set([...currentKeys, activeStep.key]));
     setActiveIndex((currentIndex) => currentIndex + 1);
   };
-  return /* @__PURE__ */ jsxs(Stack, { spacing: 3, children: [
-    /* @__PURE__ */ jsx(Stepper, { activeStep: activeIndex, alternativeLabel: true, sx: { display: { xs: "none", sm: "flex" } }, children: steps.map((step) => {
-      let caption;
-      if (skippedKeys.has(step.key)) {
-        caption = t("wizard.skipped");
-      } else if (step.optional) {
-        caption = t("wizard.optional");
-      }
-      return /* @__PURE__ */ jsx(Step, { completed: skippedKeys.has(step.key) ? false : void 0, children: /* @__PURE__ */ jsx(StepLabel, { optional: caption && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: caption }), children: step.label }) }, step.key);
-    }) }),
-    /* @__PURE__ */ jsxs(Box, { sx: { display: { xs: "block", sm: "none" } }, children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "text.secondary", children: t("wizard.stepOf", { current: activeIndex + 1, total: steps.length }) }),
-      /* @__PURE__ */ jsx(Typography, { variant: "h6", children: activeStep.label })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { children: activeStep.content }),
-    isLastStep && /* @__PURE__ */ jsx(FormProblemAlert, {}),
-    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column-reverse", sm: "row" }, spacing: 1.5, sx: { justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "text",
-          color: "inherit",
-          disabled: activeIndex === 0 || isSubmitting,
-          onClick: () => setActiveIndex((currentIndex) => currentIndex - 1),
-          children: t("wizard.back")
-        }
-      ),
-      /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column-reverse", sm: "row" }, spacing: 1.5, children: [
-        activeStep.optional && !isLastStep && /* @__PURE__ */ jsx(Button, { variant: "text", onClick: skipStep, children: t("wizard.skip") }),
-        isLastStep ? /* @__PURE__ */ jsx(SubmitButton, { children: submitLabel }) : /* @__PURE__ */ jsx(Button, { variant: "contained", size: "large", onClick: goNext, children: t("wizard.next") })
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(
+    WizardLayout,
+    {
+      steps,
+      activeIndex,
+      skippedKeys,
+      isSubmitting,
+      onBack: () => setActiveIndex((currentIndex) => currentIndex - 1),
+      onNext: goNext,
+      onSkip: skipStep,
+      submitButton: /* @__PURE__ */ jsx(SubmitButton, { children: submitLabel }),
+      problemAlert: /* @__PURE__ */ jsx(FormProblemAlert, {}),
+      texts
+    }
+  );
 }
 export {
   FormWizard as default

package/dist/forms/FormWizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormWizard.js","sources":["../../src/forms/FormWizard.jsx"],"sourcesContent":["// Formulario por pasos (wizard) con formik: un solo formulario partido en pasos, con pasos opcionales que se pueden omitir.\n//\n// Cómo se porta, para que la pantalla solo declare sus pasos:\n//   - «Siguiente» revisa SOLO los campos del paso (fields) y no avanza si alguno tiene error; los marca como tocados para\n//     que se vea por qué;\n//   - «Omitir este paso» (solo en los opcionales) regresa sus campos a como empezaron: omitir es no dar ese dato, no dejar\n//     lo que se escribió a medias;\n//   - el último paso envía TODO el formulario (el esquema de yup completo vale para todos los pasos);\n//   - si el envío falla por un campo de un paso anterior (yup o el 422 del servidor con applyServerProblem), el wizard\n//     regresa solo a ese paso: un error que no se ve no se puede corregir.\n//\n// Va DENTRO de <Formik> y <Form>:\n//   <Formik initialValues={…} validationSchema={…} onSubmit={…}>\n//       <Form noValidate>\n//           <FormWizard submitLabel=\"Enviar solicitud\" steps={[\n//               {key: 'datos', label: 'Sus datos', fields: ['name', 'email'], content: <>…campos…</>},\n//               {key: 'aval', label: 'Aval', optional: true, fields: ['guarantor'], content: <>…</>},\n//           ]} />\n//       </Form>\n//   </Formik>\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport {getIn, useFormikContext} from 'formik';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Step from '@mui/material/Step';\nimport StepLabel from '@mui/material/StepLabel';\nimport Stepper from '@mui/material/Stepper';\nimport Typography from '@mui/material/Typography';\n\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\n\n/**\n * El primer paso que tiene un campo con error; -1 si ninguno.\n *\n * @param {Array<{fields?: string[]}>} steps\n * @param {object} errors los de formik\n * @returns {number}\n */\nfunction firstStepWithErrorOf(steps, errors) {\n    return steps.findIndex((step) => (step.fields ?? []).some((field) => getIn(errors, field)));\n}\n\n/**\n * @param {object} props\n * @param {Object[]} props.steps en orden\n * @param {string} props.steps[].key\n * @param {string} props.steps[].label ya traducido\n * @param {string[]} [props.steps[].fields] los campos del paso (los que revisa «Siguiente»)\n * @param {boolean} [props.steps[].optional] se puede omitir\n * @param {import('react').ReactNode} props.steps[].content los campos del paso\n * @param {string} props.submitLabel ya traducido: el botón del último paso\n */\nexport default function FormWizard({steps, submitLabel}) {\n    const {t} = useToolkitTranslation('common');\n    const {validateForm, setFieldTouched, setFieldValue, initialValues, errors, isSubmitting} = useFormikContext();\n    const [activeIndex, setActiveIndex] = useState(0);\n    const [skippedKeys, setSkippedKeys] = useState(() => new Set());\n    const wasSubmitting = useRef(false);\n    const activeStep = steps[activeIndex];\n    const isLastStep = activeIndex === steps.length - 1;\n\n    // al terminar un envío fallido, regresa al paso con el primer error (solo en ese momento: escribir en otro paso no\n    // debe jalar a la persona de regreso)\n    useEffect(() => {\n        if (wasSubmitting.current && !isSubmitting) {\n            const errorStepIndex = firstStepWithErrorOf(steps, errors);\n            if (errorStepIndex >= 0) {\n                setActiveIndex(errorStepIndex);\n            }\n        }\n        wasSubmitting.current = isSubmitting;\n    }, [isSubmitting, errors, steps]);\n\n    const goNext = async () => {\n        const stepFields = activeStep.fields ?? [];\n        const formErrors = await validateForm();\n        stepFields.forEach((field) => setFieldTouched(field, true, false));\n        // guard clause: el paso tiene errores; se queda para que se corrijan\n        if (stepFields.some((field) => getIn(formErrors, field))) {\n            return;\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys].filter((key) => key !== activeStep.key)));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    const skipStep = () => {\n        for (const field of activeStep.fields ?? []) {\n            setFieldValue(field, getIn(initialValues, field), false);\n            setFieldTouched(field, false, false);\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys, activeStep.key]));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    return (\n        <Stack spacing={3}>\n            {/* en el teléfono los nombres de los pasos no caben: se dice en qué paso va */}\n            <Stepper activeStep={activeIndex} alternativeLabel sx={{display: {xs: 'none', sm: 'flex'}}}>\n                {steps.map((step) => {\n                    let caption;\n                    if (skippedKeys.has(step.key)) {\n                        caption = t('wizard.skipped');\n                    } else if (step.optional) {\n                        caption = t('wizard.optional');\n                    }\n                    return (\n                        <Step key={step.key} completed={skippedKeys.has(step.key) ? false : undefined}>\n                            <StepLabel optional={caption && <Typography variant=\"caption\" color=\"text.secondary\">{caption}</Typography>}>\n                                {step.label}\n                            </StepLabel>\n                        </Step>\n                    );\n                })}\n            </Stepper>\n            <Box sx={{display: {xs: 'block', sm: 'none'}}}>\n                <Typography variant=\"overline\" color=\"text.secondary\">{t('wizard.stepOf', {current: activeIndex + 1, total: steps.length})}</Typography>\n                <Typography variant=\"h6\">{activeStep.label}</Typography>\n            </Box>\n\n            <Box>{activeStep.content}</Box>\n\n            {isLastStep && <FormProblemAlert />}\n\n            <Stack direction={{xs: 'column-reverse', sm: 'row'}} spacing={1.5} sx={{justifyContent: 'space-between'}}>\n                <Button variant=\"text\" color=\"inherit\" disabled={activeIndex === 0 || isSubmitting}\n                        onClick={() => setActiveIndex((currentIndex) => currentIndex - 1)}>\n                    {t('wizard.back')}\n                </Button>\n                <Stack direction={{xs: 'column-reverse', sm: 'row'}} spacing={1.5}>\n                    {activeStep.optional && !isLastStep && (\n                        <Button variant=\"text\" onClick={skipStep}>{t('wizard.skip')}</Button>\n                    )}\n                    {isLastStep\n                        ? <SubmitButton>{submitLabel}</SubmitButton>\n                        : <Button variant=\"contained\" size=\"large\" onClick={goNext}>{t('wizard.next')}</Button>}\n                </Stack>\n            </Stack>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FormWizard.js","sources":["../../src/forms/FormWizard.jsx"],"sourcesContent":["// Formulario por pasos (wizard) con formik: un solo formulario partido en pasos, con pasos opcionales que se pueden omitir.\n//\n// Cómo se porta, para que la pantalla solo declare sus pasos:\n//   - «Siguiente» revisa SOLO los campos del paso (fields) y no avanza si alguno tiene error; los marca como tocados para\n//     que se vea por qué;\n//   - «Omitir este paso» (solo en los opcionales) regresa sus campos a como empezaron: omitir es no dar ese dato, no dejar\n//     lo que se escribió a medias;\n//   - el último paso envía TODO el formulario (el esquema de yup completo vale para todos los pasos);\n//   - si el envío falla por un campo de un paso anterior (yup o el 422 del servidor con applyServerProblem), el wizard\n//     regresa solo a ese paso: un error que no se ve no se puede corregir.\n//\n// Va DENTRO de <Formik> y <Form>:\n//   <Formik initialValues={…} validationSchema={…} onSubmit={…}>\n//       <Form noValidate>\n//           <FormWizard submitLabel=\"Enviar solicitud\" steps={[\n//               {key: 'datos', label: 'Sus datos', fields: ['name', 'email'], content: <>…campos…</>},\n//               {key: 'aval', label: 'Aval', optional: true, fields: ['guarantor'], content: <>…</>},\n//           ]} />\n//       </Form>\n//   </Formik>\n//\n// Lo que se ve vive en WizardLayout (inputs/), el mismo del FormWizard de react-hook-form. Los textos («Siguiente»,\n// «Anterior»…) se cambian con `texts`: {wizard: {next: 'Continuar'}}.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\nimport {getIn, useFormikContext} from 'formik';\n\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport WizardLayout from '@/inputs/WizardLayout.jsx';\n\n/**\n * El primer paso que tiene un campo con error; -1 si ninguno.\n *\n * @param {Array<{fields?: string[]}>} steps\n * @param {object} errors los de formik\n * @returns {number}\n */\nfunction firstStepWithErrorOf(steps, errors) {\n    return steps.findIndex((step) => (step.fields ?? []).some((field) => getIn(errors, field)));\n}\n\n/**\n * @param {object} props\n * @param {Object[]} props.steps en orden\n * @param {string} props.steps[].key\n * @param {string} props.steps[].label ya traducido\n * @param {string[]} [props.steps[].fields] los campos del paso (los que revisa «Siguiente»)\n * @param {boolean} [props.steps[].optional] se puede omitir\n * @param {import('react').ReactNode} props.steps[].content los campos del paso\n * @param {string} props.submitLabel ya traducido: el botón del último paso\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {wizard: {next, back, skip, optional, skipped, stepOf}}\n */\nexport default function FormWizard({steps, submitLabel, texts}) {\n    const {validateForm, setFieldTouched, setFieldValue, initialValues, errors, isSubmitting} = useFormikContext();\n    const [activeIndex, setActiveIndex] = useState(0);\n    const [skippedKeys, setSkippedKeys] = useState(() => new Set());\n    const wasSubmitting = useRef(false);\n    const activeStep = steps[activeIndex];\n\n    // al terminar un envío fallido, regresa al paso con el primer error (solo en ese momento: escribir en otro paso no\n    // debe jalar a la persona de regreso)\n    useEffect(() => {\n        if (wasSubmitting.current && !isSubmitting) {\n            const errorStepIndex = firstStepWithErrorOf(steps, errors);\n            if (errorStepIndex >= 0) {\n                setActiveIndex(errorStepIndex);\n            }\n        }\n        wasSubmitting.current = isSubmitting;\n    }, [isSubmitting, errors, steps]);\n\n    const goNext = async () => {\n        const stepFields = activeStep.fields ?? [];\n        const formErrors = await validateForm();\n        stepFields.forEach((field) => setFieldTouched(field, true, false));\n        // guard clause: el paso tiene errores; se queda para que se corrijan\n        if (stepFields.some((field) => getIn(formErrors, field))) {\n            return;\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys].filter((key) => key !== activeStep.key)));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    const skipStep = () => {\n        for (const field of activeStep.fields ?? []) {\n            setFieldValue(field, getIn(initialValues, field), false);\n            setFieldTouched(field, false, false);\n        }\n        setSkippedKeys((currentKeys) => new Set([...currentKeys, activeStep.key]));\n        setActiveIndex((currentIndex) => currentIndex + 1);\n    };\n\n    return (\n        <WizardLayout steps={steps} activeIndex={activeIndex} skippedKeys={skippedKeys} isSubmitting={isSubmitting}\n                      onBack={() => setActiveIndex((currentIndex) => currentIndex - 1)} onNext={goNext} onSkip={skipStep}\n                      submitButton={<SubmitButton>{submitLabel}</SubmitButton>} problemAlert={<FormProblemAlert />} texts={texts} />\n    );\n}\n"],"names":[],"mappings":";;;;;;;AAuCA,SAAS,qBAAqB,OAAO,QAAQ;AACzC,SAAO,MAAM,UAAU,CAAC,UAAU,KAAK,UAAU,CAAA,GAAI,KAAK,CAAC,UAAU,MAAM,QAAQ,KAAK,CAAC,CAAC;AAC9F;AAaA,SAAwB,WAAW,EAAC,OAAO,aAAa,SAAQ;AAC5D,QAAM,EAAC,cAAc,iBAAiB,eAAe,eAAe,QAAQ,aAAA,IAAgB,iBAAA;AAC5F,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,MAAM,oBAAI,KAAK;AAC9D,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,MAAM,WAAW;AAIpC,YAAU,MAAM;AACZ,QAAI,cAAc,WAAW,CAAC,cAAc;AACxC,YAAM,iBAAiB,qBAAqB,OAAO,MAAM;AACzD,UAAI,kBAAkB,GAAG;AACrB,uBAAe,cAAc;AAAA,MACjC;AAAA,IACJ;AACA,kBAAc,UAAU;AAAA,EAC5B,GAAG,CAAC,cAAc,QAAQ,KAAK,CAAC;AAEhC,QAAM,SAAS,YAAY;AACvB,UAAM,aAAa,WAAW,UAAU,CAAA;AACxC,UAAM,aAAa,MAAM,aAAA;AACzB,eAAW,QAAQ,CAAC,UAAU,gBAAgB,OAAO,MAAM,KAAK,CAAC;AAEjE,QAAI,WAAW,KAAK,CAAC,UAAU,MAAM,YAAY,KAAK,CAAC,GAAG;AACtD;AAAA,IACJ;AACA,mBAAe,CAAC,gBAAgB,IAAI,IAAI,CAAC,GAAG,WAAW,EAAE,OAAO,CAAC,QAAQ,QAAQ,WAAW,GAAG,CAAC,CAAC;AACjG,mBAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,EACrD;AAEA,QAAM,WAAW,MAAM;AACnB,eAAW,SAAS,WAAW,UAAU,CAAA,GAAI;AACzC,oBAAc,OAAO,MAAM,eAAe,KAAK,GAAG,KAAK;AACvD,sBAAgB,OAAO,OAAO,KAAK;AAAA,IACvC;AACA,mBAAe,CAAC,gBAAgB,oBAAI,IAAI,CAAC,GAAG,aAAa,WAAW,GAAG,CAAC,CAAC;AACzE,mBAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,EACrD;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MAAa;AAAA,MAAc;AAAA,MAA0B;AAAA,MAA0B;AAAA,MAClE,QAAQ,MAAM,eAAe,CAAC,iBAAiB,eAAe,CAAC;AAAA,MAAG,QAAQ;AAAA,MAAQ,QAAQ;AAAA,MAC1F,cAAc,oBAAC,cAAA,EAAc,UAAA,YAAA,CAAY;AAAA,MAAiB,kCAAe,kBAAA,EAAiB;AAAA,MAAI;AAAA,IAAA;AAAA,EAAA;AAEpH;"}

package/dist/forms/auth/ChangePasswordForm.js

@@ -12,8 +12,9 @@ import FormTextField from "../FormTextField.js";
 import SubmitButton from "../SubmitButton.js";
 import { applyServerProblem } from "../applyServerProblem.js";
 import * as Yup from "yup";
-function ChangePasswordForm({ onSubmit, requireCurrentPassword = true, policy = DEFAULT_PASSWORD_POLICY }) {
-  const { t } = useToolkitTranslation("auth");
+import ComponentTexts from "../../toolkit/ComponentTexts.js";
+function ChangePasswordForm({ onSubmit, requireCurrentPassword = true, policy = DEFAULT_PASSWORD_POLICY, texts }) {
+  const { t } = useToolkitTranslation("auth", texts);
   const [isDone, setIsDone] = useState(false);
   const schema = useMemo(() => Yup.object({
     currentPassword: requireCurrentPassword ? Yup.string().required() : Yup.string(),
@@ -30,7 +31,7 @@ function ChangePasswordForm({ onSubmit, requireCurrentPassword = true, policy =
       applyServerProblem(error, { ...formikHelpers, values });
     }
   };
-  return /* @__PURE__ */ jsx(Formik, { initialValues: { currentPassword: "", newPassword: "", confirmPassword: "" }, validationSchema: schema, onSubmit: submit, children: ({ values }) => /* @__PURE__ */ jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+  return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "auth", texts, children: /* @__PURE__ */ jsx(Formik, { initialValues: { currentPassword: "", newPassword: "", confirmPassword: "" }, validationSchema: schema, onSubmit: submit, children: ({ values }) => /* @__PURE__ */ jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
     isDone && /* @__PURE__ */ jsx(Alert, { severity: "success", role: "status", children: t("changePassword.done") }),
     /* @__PURE__ */ jsx(FormProblemAlert, {}),
     requireCurrentPassword && /* @__PURE__ */ jsx(FormTextField, { name: "currentPassword", label: t("changePassword.current"), type: "password", autoComplete: "current-password" }),
@@ -38,7 +39,7 @@ function ChangePasswordForm({ onSubmit, requireCurrentPassword = true, policy =
     /* @__PURE__ */ jsx(PasswordChecklist, { password: values.newPassword, policy }),
     /* @__PURE__ */ jsx(FormTextField, { name: "confirmPassword", label: t("changePassword.confirm"), type: "password", autoComplete: "new-password" }),
     /* @__PURE__ */ jsx(SubmitButton, { sx: { alignSelf: "flex-start" }, children: t("changePassword.submit") })
-  ] }) }) });
+  ] }) }) }) });
 }
 export {
   ChangePasswordForm as default