@stackcraftmx/calcita 0.23.0 → 0.26.0

package/dist/types/toolkit/navigationPaths.d.ts

@@ -0,0 +1,43 @@
+/**
+ * El prefijo limpio: '' sin prefijo; si no, empieza con / y no termina con / ('portal/' → '/portal').
+ *
+ * @param {string|null|undefined} basePath
+ * @returns {string}
+ */
+export declare function normalizedBasePath(basePath: string | null | undefined): string;
+/**
+ * La dirección real de una ruta de la app con el prefijo puesto: '/pedidos' → '/portal/pedidos'. Lo que no es ruta de la
+ * app se queda como viene.
+ *
+ * @param {string} basePath
+ * @param {string} destination
+ * @returns {string}
+ */
+export declare function pathWithBase(basePath: string, destination: string): string;
+/**
+ * La ruta de la app de una dirección real, sin el prefijo: '/portal/pedidos' → '/pedidos'; el prefijo solo → '/'. Una
+ * dirección de fuera del prefijo se queda como viene.
+ *
+ * @param {string} basePath
+ * @param {string} pathname
+ * @returns {string}
+ */
+export declare function pathWithoutBase(basePath: string, pathname: string): string;
+/**
+ * La página de la app que va después del # ('#/pedidos?estado=pendiente' → {pathname: '/pedidos', search: '?estado=pendiente'}).
+ * Sin nada después del #, el inicio.
+ *
+ * @param {string} hash el de la dirección (location.hash), con o sin #
+ * @returns {{pathname: string, search: string}}
+ */
+export declare function hashLocationOf(hash: string): {
+    pathname: string;
+    search: string;
+};
+/**
+ * El enlace de una ruta de la app con # ('/pedidos' → '#/pedidos'). Lo que no es ruta de la app se queda como viene.
+ *
+ * @param {string} destination
+ * @returns {string}
+ */
+export declare function hashHrefOf(destination: string): string;

package/dist/types/toolkit/toolkitSettings.d.ts

@@ -1,5 +1,19 @@
 export declare const DEFAULT_LANGUAGE = "es";
 export declare const DEFAULT_CURRENCY = "MXN";
+/**
+ * Los idiomas que ofrece la app cuando el proyecto no dice otros: su código, su nombre en su propio idioma (así lo busca quien
+ * lo habla) y cómo se escriben sus números y fechas (Intl). El proyecto agrega los suyos en ToolkitProvider `languages` y pone
+ * sus traducciones en `texts` (lo que no traduzca sale en español); los textos del paquete solo vienen en español e inglés.
+ */
+export declare const DEFAULT_LANGUAGES: readonly (Readonly<{
+    code: "es";
+    label: "Español";
+    locale: "es-MX";
+}> | Readonly<{
+    code: "en";
+    label: "English";
+    locale: "en-US";
+}>)[];
 /**
  * La zona horaria del navegador; si el navegador no la sabe, la de la Ciudad de México.
  *
@@ -10,7 +24,7 @@ export declare function browserTimeZone(): string;
  * Cambia la configuración que leen las funciones del paquete. La llama ToolkitProvider; un proyecto sin React (o una
  * prueba) la puede llamar directo.
  *
- * @param {{language?: string, texts?: object, translate?: Function|null, timeZone?: string, currency?: string, appName?: string, buildId?: string}} settings
+ * @param {{language?: string, texts?: object, translate?: Function|null, timeZone?: string, currency?: string, appName?: string, buildId?: string, languages?: Array<{code: string, label: string, locale?: string}>}} settings
  * @returns {void}
  */
 export declare function configureToolkit(settings: {
@@ -21,11 +35,16 @@ export declare function configureToolkit(settings: {
     currency?: string;
     appName?: string;
     buildId?: string;
+    languages?: Array<{
+        code: string;
+        label: string;
+        locale?: string;
+    }>;
 }): void;
 /**
  * La configuración vigente.
  *
- * @returns {{language: string, texts: object, translate: Function|null, timeZone: string, currency: string, appName: string, buildId: string}}
+ * @returns {{language: string, texts: object, translate: Function|null, timeZone: string, currency: string, appName: string, buildId: string, languages: Array<{code: string, label: string, locale?: string}>}}
  */
 export declare function toolkitSettings(): {
     language: string;
@@ -35,14 +54,40 @@ export declare function toolkitSettings(): {
     currency: string;
     appName: string;
     buildId: string;
+    languages: Array<{
+        code: string;
+        label: string;
+        locale?: string;
+    }>;
 };
 /**
- * El locale de Intl del idioma (es → es-MX, en → en-US).
+ * El locale de Intl del idioma: el que dice su lista de idiomas (es → es-MX, pt → pt-BR) o, si no dice, el código mismo
+ * (Intl entiende «pt»). OJO: antes un idioma que no fuera es ni en salía con los números y las fechas de México.
  *
  * @param {string} language
+ * @param {Array<{code: string, locale?: string}>} [languages] por omisión los de la configuración vigente
  * @returns {string}
  */
-export declare function intlLocaleOf(language: string): string;
+export declare function intlLocaleOf(language: string, languages?: Array<{
+    code: string;
+    locale?: string;
+}>): string;
+/**
+ * El texto de una llave en los textos propios de los componentes (la prop `texts` de un componente y los de ComponentTexts
+ * de afuera), si alguno la trae. Cada capa es {namespace, texts} con la misma forma que ese namespace en los textos del
+ * paquete (es.js): plurales con _one/_other y {{variables}}. La primera capa que trae la llave gana.
+ *
+ * @param {Array<{namespace: string, texts: object|undefined}>} layers de la más cercana a la más lejana
+ * @param {string} namespace el de la llave
+ * @param {string} key la llave sin namespace
+ * @param {object|undefined} values
+ * @param {string} language para elegir el plural
+ * @returns {string|undefined} el texto ya con sus variables, o undefined si ninguna capa lo trae
+ */
+export declare function componentTextOf(layers: Array<{
+    namespace: string;
+    texts: object | undefined;
+}>, namespace: string, key: string, values: object | undefined, language: string): string | undefined;
 /**
  * El texto de una llave con una configuración dada (la del proveedor o la vigente).
  *

package/dist/types/toolkit/useFormatters.d.ts

@@ -0,0 +1,6 @@
+import { formattersOf } from '../formatting.js';
+/**
+ * @returns {ReturnType<typeof formattersOf>} formatNumber, formatList, formatCurrency, formatFileSize, formatPercent,
+ *     formatDateTime, formatDate, formatTime, formatMonthName, formatMonthShortName y formatWeekdayShortName
+ */
+export declare function useFormatters(): ReturnType<typeof formattersOf>;

package/dist/types/toolkit/useToolkitTranslation.d.ts

@@ -1,9 +1,10 @@
 /**
  * @param {string|string[]} [namespace] el namespace de las llaves sin prefijo; con una lista, el primero. Sin él, cada
  *     llave lleva el suyo ('orders:list.title')
+ * @param {object} [ownTexts] los textos propios del componente (su prop `texts`), con la forma de ese namespace
  * @returns {{t: (key: string, values?: object) => string, language: string, changeLanguage: (language: string) => void}}
  */
-export declare function useToolkitTranslation(namespace?: string | string[]): {
+export declare function useToolkitTranslation(namespace?: string | string[], ownTexts?: object): {
     t: (key: string, values?: object) => string;
     language: string;
     changeLanguage: (language: string) => void;

package/dist/types/ui/actions/ActionsMenu.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @param {object} props
+ * @param {string} props.label el nombre del botón (lector de pantalla y su tooltip), ya traducido
+ * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.actions]
+ * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)
+ * @param {'small'|'medium'} [props.size]
+ */
+export default function ActionsMenu({ label, actions, icon, size }: {
+    label: string;
+    actions?: Array<{
+        key: string;
+        label: string;
+        icon?: import('react').ReactNode;
+        color?: string;
+        disabled?: boolean;
+        onClick: () => void;
+    }>;
+    icon?: import('react').ReactNode;
+    size?: 'small' | 'medium';
+}): import("react").JSX.Element | null;

package/dist/types/ui/actions/CopyButton.d.ts

@@ -4,10 +4,12 @@
  * @param {string} [props.label] ya traducido; por omisión «Copiar»
  * @param {'small'|'medium'} [props.size]
  * @param {() => void} [props.onCopied]
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function CopyButton({ value, label, size, onCopied }: {
+export default function CopyButton({ value, label, size, onCopied, texts }: {
     value: string;
     label?: string;
     size?: 'small' | 'medium';
     onCopied?: () => void;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/actions/DownloadMenu.d.ts

@@ -1,6 +1,7 @@
 /**
  * @param {object} props
- * @param {Array<'pdf'|'xlsx'|'csv'>} props.formats
+ * @param {string[]} props.formats los tipos de archivo, en orden: los de la casa (xlsx, csv, pdf) y los que el proyecto declare
+ *     en ToolkitProvider fileTypes (zip, xml…)
  * @param {(format: string, transferOptions: {signal: AbortSignal, onDownloadProgress: (progress: {loaded: number, total?: number|null}) => void}) => Promise<{blob: Blob, fileName: string}>} props.download
  * @param {string} [props.label] ya traducido; por defecto "Descargar"
  * @param {string} [props.downloadLabel] ya traducido; lo que se ve en el panel de descargas antes de saber el nombre
@@ -9,6 +10,8 @@
  * @param {(format: string) => {title: string, description: import('react').ReactNode, confirmLabel?: string}} [props.confirmation]
  * @param {(format: string) => void} [props.onDownloaded] p. ej. volver a pedir la tabla (si la descarga cambia algo en
  *     el servidor)
+ * @param {(format: string, error: unknown) => void} [props.onFailed] cuando la descarga no se pudo (el panel ya lo dice)
+ * @param {(format: string) => void} [props.onCanceled] cuando la persona la canceló desde el panel
  * @param {'button'|'icon'} [props.variant] icon = solo el icono (columna de acciones de una tabla)
  * @param {string} [props.ariaLabel] ya traducido; obligatorio en la variante icon
  * @param {(format: string) => void} [props.onChooseFormat] quien llama se encarga de confirmar y descargar
@@ -22,8 +25,8 @@
  * virtualiza y vuelve a pintar sus celdas; el diálogo se perdía al elegir el formato). Ahí el menú solo avisa qué formato
  * se eligió y la pantalla abre SU confirmación (useConfirmAction) fuera de la tabla.
  */
-export default function DownloadMenu({ formats, download, label, downloadLabel, disabled, confirmation, onDownloaded, variant, ariaLabel, onChooseFormat, icon: ButtonIcon, }: {
-    formats: Array<'pdf' | 'xlsx' | 'csv'>;
+export default function DownloadMenu({ formats, download, label, downloadLabel, disabled, confirmation, onDownloaded, onFailed, onCanceled, variant, ariaLabel, onChooseFormat, icon: ButtonIcon, }: {
+    formats: string[];
     download: (format: string, transferOptions: {
         signal: AbortSignal;
         onDownloadProgress: (progress: {
@@ -43,6 +46,8 @@ export default function DownloadMenu({ formats, download, label, downloadLabel,
         confirmLabel?: string;
     };
     onDownloaded?: (format: string) => void;
+    onFailed?: (format: string, error: unknown) => void;
+    onCanceled?: (format: string) => void;
     variant?: 'button' | 'icon';
     ariaLabel?: string;
     onChooseFormat?: (format: string) => void;

package/dist/types/ui/actions/SecretField.d.ts

@@ -4,10 +4,14 @@
  * @param {string} props.label ya traducido
  * @param {string} [props.helperText] p. ej. «Guárdela: no se vuelve a enseñar»
  * @param {() => void} [props.onCopied]
+ * @param {(isRevealed: boolean) => void} [props.onRevealChange] se destapó o se tapó (para registrar quién vio el secreto)
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function SecretField({ value, label, helperText, onCopied }: {
+export default function SecretField({ value, label, helperText, onCopied, onRevealChange, texts }: {
     value: string;
     label: string;
     helperText?: string;
     onCopied?: () => void;
+    onRevealChange?: (isRevealed: boolean) => void;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/actions/SelectionActions.d.ts

@@ -0,0 +1,39 @@
+/** Dónde van las acciones de lo elegido en el teléfono con barra de pestañas abajo: todo arriba o divididas (iOS). */
+export declare const SELECTION_PHONE_LAYOUT: Readonly<{
+    top: "top";
+    split: "split";
+}>;
+/**
+ * ¿En el teléfono lo elegido sale de su renglón (arriba o abajo)? La misma regla que la barra de pestañas de abajo: con ella,
+ * el renglón de la pantalla se queda con lo suyo (el conteo de la tabla) y las acciones flotan.
+ *
+ * @param {object} theme
+ * @returns {boolean}
+ */
+export declare function selectionFloatsOnPhone(theme: object): boolean;
+/**
+ * @param {object} props
+ * @param {string} props.countText «5 pedidos elegidos», ya traducido. La pieza se pinta mientras la pantalla la ponga: con
+ *     nada elegido, no la ponga
+ * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: 'inherit'|'primary'|'secondary'|'error'|'info'|'success'|'warning', disabled?: boolean, onClick: () => unknown}>} [props.actions]
+ *     label ya traducido; en el teléfono se ve el ícono (sin él, el texto). onClick puede regresar una promesa
+ * @param {() => void} props.onClear quitar la selección
+ * @param {'top'|'split'} [props.phoneLayout] SELECTION_PHONE_LAYOUT; por omisión todo arriba
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {selection: {clear, actionsLabel, summaryLabel}}
+ * @param {object} [props.sx] estilos del renglón
+ */
+export default function SelectionActions({ countText, actions, onClear, phoneLayout, texts, sx }: {
+    countText: string;
+    actions?: Array<{
+        key: string;
+        label: string;
+        icon?: import('react').ReactNode;
+        color?: 'inherit' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+        disabled?: boolean;
+        onClick: () => unknown;
+    }>;
+    onClear: () => void;
+    phoneLayout?: 'top' | 'split';
+    texts?: object;
+    sx?: object;
+}): import("react").JSX.Element;

package/dist/types/ui/filters/DateRangeFilter.d.ts

@@ -4,8 +4,9 @@
  * @param {string} [props.to] AAAA-MM-DD o '' si no hay
  * @param {(range: {from: string, to: string}) => void} props.onChange '' para quitar
  * @param {string} [props.label] ya traducido; por defecto "Personalizado"
+ * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function DateRangeFilter({ from, to, onChange, label }: {
+export default function DateRangeFilter({ from, to, onChange, label, texts }: {
     from?: string;
     to?: string;
     onChange: (range: {
@@ -13,4 +14,5 @@ export default function DateRangeFilter({ from, to, onChange, label }: {
         to: string;
     }) => void;
     label?: string;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/filters/QuickFilters.d.ts

@@ -6,8 +6,9 @@
  * @param {import('react').ReactNode} [props.caption]
  * @param {string} [props.ariaLabel]
  * @param {import('react').ReactNode} [props.extra] al final de la tira (p. ej. un rango de fechas)
+ * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete
  */
-export default function QuickFilters({ value, onChange, options, caption, ariaLabel, extra }: {
+export default function QuickFilters({ value, onChange, options, caption, ariaLabel, extra, texts }: {
     value: string;
     onChange: (value: string) => void;
     options?: Array<{
@@ -18,4 +19,5 @@ export default function QuickFilters({ value, onChange, options, caption, ariaLa
     caption?: import('react').ReactNode;
     ariaLabel?: string;
     extra?: import('react').ReactNode;
+    texts?: object;
 }): import("react").JSX.Element | null;

package/dist/types/ui/index.d.ts

@@ -30,4 +30,4 @@ export { default as DownloadMenu } from './actions/DownloadMenu.js';
 export { default as SecretField } from './actions/SecretField.js';
 export { default as CalendarHeatmap } from './metrics/CalendarHeatmap.js';
 export { TREND_DIRECTION, default as MetricCard } from './metrics/MetricCard.js';
-export { default as TableToggle } from './metrics/TableToggle.js';
+export { CHART_VIEW, default as TableToggle } from './metrics/TableToggle.js';

package/dist/types/ui/labels/tagOf.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Una etiqueta como la pintan la tarjeta y el mensaje: un texto suelto o {label, color} (un color del tema: error, warning, info…).
+ *
+ * @param {string|{label: string, color?: string}} tag
+ * @returns {{label: string, color: string}}
+ */
+export declare function tagOf(tag: string | {
+    label: string;
+    color?: string;
+}): {
+    label: string;
+    color: string;
+};

package/dist/types/ui/layout/CollapsibleSection.d.ts

@@ -4,12 +4,15 @@
  * @param {string} props.expandedTitle lo que dice abierta («Ocultar el detalle de la validación»)
  * @param {string} [props.hint] plegada, qué hay adentro («Incluye resumen, motivos de rechazo y descargas.»)
  * @param {boolean} [props.defaultExpanded] si empieza abierta; por omisión empieza plegada
+ * @param {(isExpanded: boolean) => void} [props.onExpandedChange] la persona la abrió o la plegó (por ejemplo, para pedir lo de
+ *     adentro hasta que se abre)
  * @param {import('react').ReactNode} props.children
  */
-export default function CollapsibleSection({ collapsedTitle, expandedTitle, hint, defaultExpanded, children }: {
+export default function CollapsibleSection({ collapsedTitle, expandedTitle, hint, defaultExpanded, onExpandedChange, children }: {
     collapsedTitle: string;
     expandedTitle: string;
     hint?: string;
     defaultExpanded?: boolean;
+    onExpandedChange?: (isExpanded: boolean) => void;
     children: import('react').ReactNode;
 }): import("react").JSX.Element;

package/dist/types/ui/layout/ContentDialog.d.ts

@@ -4,10 +4,12 @@
  * @param {() => void} props.onClose
  * @param {string} props.title texto ya traducido
  * @param {import('react').ReactNode} props.children
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function ContentDialog({ open, onClose, title, children }: {
+export default function ContentDialog({ open, onClose, title, children, texts }: {
     open: boolean;
     onClose: () => void;
     title: string;
     children: import('react').ReactNode;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/layout/ErrorPage.d.ts

@@ -12,11 +12,24 @@ export declare const ERROR_PAGE_KIND: Readonly<{
  * @param {import('react').ReactNode} [props.text] ya traducido; por omisión el del paquete
  * @param {string} [props.homePath] a dónde lleva «Ir al inicio» (por omisión '/')
  * @param {() => void} [props.onRetry] con él sale «Intentar de nuevo»
+ * @param {() => void} [props.onGoHome] al picar «Ir al inicio», antes de ir (para avisar o limpiar algo)
+ * @param {import('react').ReactNode} [props.extraActions] botones suyos junto a los de la casa
+ * @param {import('react').ReactNode} [props.actions] botones suyos EN LUGAR de los de la casa
+ * @param {import('react').ReactNode} [props.icon] otro ícono; por omisión el de cada error
+ * @param {import('react').ReactNode} [props.children] algo debajo del texto (el teléfono de soporte, un folio)
+ * @param {object} [props.texts] los textos que cambian, con la forma de `errorPage` en los textos del paquete:
+ *     {goHome: 'Volver al tablero', notFound: {title: '…'}}
  */
-export default function ErrorPage({ kind, title, text, homePath, onRetry }: {
+export default function ErrorPage({ kind, title, text, homePath, onRetry, onGoHome, extraActions, actions, icon, children, texts, }: {
     kind: string;
     title?: string;
     text?: import('react').ReactNode;
     homePath?: string;
     onRetry?: () => void;
+    onGoHome?: () => void;
+    extraActions?: import('react').ReactNode;
+    actions?: import('react').ReactNode;
+    icon?: import('react').ReactNode;
+    children?: import('react').ReactNode;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/layout/FullPageLoader.d.ts

@@ -1 +1,7 @@
-export default function FullPageLoader(): import("react").JSX.Element;
+/**
+ * @param {object} [props]
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
+ */
+export default function FullPageLoader({ texts }?: {
+    texts?: object;
+}): import("react").JSX.Element;

package/dist/types/ui/layout/PageHeading.d.ts

@@ -5,8 +5,9 @@
  * @param {Array<{label: string, to?: string}>|false} [props.breadcrumbs] por omisión, las del menú
  * @param {import('react').ReactNode} [props.actions] botones a la derecha (en el teléfono, abajo y a lo ancho)
  * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
+ * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
  */
-export default function PageHeading({ title, description, breadcrumbs, actions, documentTitle }: {
+export default function PageHeading({ title, description, breadcrumbs, actions, documentTitle, texts }: {
     title: string;
     description?: import('react').ReactNode;
     breadcrumbs?: Array<{
@@ -15,4 +16,5 @@ export default function PageHeading({ title, description, breadcrumbs, actions,
     }> | false;
     actions?: import('react').ReactNode;
     documentTitle?: string;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/metrics/BarList.d.ts

@@ -4,8 +4,11 @@
  * @param {(item: any) => void} [props.onSelect] recibe el renglón de items que se picó
  * @param {string} props.emptyLabel ya traducido
  * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone]
+ * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada
+ * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function BarList({ items, onSelect, emptyLabel, tone }: {
+export default function BarList({ items, onSelect, emptyLabel, tone, texts, defaultView, onViewChange }: {
     items: Array<{
         key: string;
         label: string;
@@ -16,4 +19,7 @@ export default function BarList({ items, onSelect, emptyLabel, tone }: {
     onSelect?: (item: any) => void;
     emptyLabel: string;
     tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    defaultView?: 'chart' | 'table';
+    onViewChange?: (view: 'chart' | 'table') => void;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/metrics/CalendarHeatmap.d.ts

@@ -10,8 +10,11 @@
  * @param {import('react').ReactNode} [props.summary] renglón de resumen arriba del calendario
  * @param {string} [props.emptyLabel] qué decir si ningún día tiene actividad
  * @param {'primary'|'info'|'success'|'warning'|'error'} [props.tone]
+ * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada
+ * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
-export default function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone }: {
+export default function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone, texts, defaultView, onViewChange }: {
     startsOn: string;
     endsOn: string;
     days: Array<{
@@ -25,4 +28,7 @@ export default function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, val
     summary?: import('react').ReactNode;
     emptyLabel?: string;
     tone?: 'primary' | 'info' | 'success' | 'warning' | 'error';
+    defaultView?: 'chart' | 'table';
+    onViewChange?: (view: 'chart' | 'table') => void;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/metrics/ChartTooltip.d.ts

@@ -1,5 +1,11 @@
+/**
+ * @param {{active?: boolean, payload?: Array<{payload: any}>, render: (item: any) => import('react').ReactNode}} props
+ *     active y payload los pone recharts; render recibe el renglón de data del punto o la columna
+ */
 export default function ChartTooltip({ active, payload, render }: {
-    active: any;
-    payload: any;
-    render: any;
+    active?: boolean;
+    payload?: Array<{
+        payload: any;
+    }>;
+    render: (item: any) => import('react').ReactNode;
 }): import("react").JSX.Element | null;

package/dist/types/ui/metrics/ColumnChart.d.ts

@@ -1,35 +1,47 @@
 /**
  * @param {object} props
- * @param {Array<{key: string, value: number, label: string, tooltip?: string}>} props.data
+ * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, value, tooltip?} con una serie, o
+ *     {key, label, [llave de cada serie]: número} con varias
  * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido
- * @param {string} props.valueLabel cómo se llama lo que se cuenta, ya traducido
+ * @param {string} [props.valueLabel] cómo se llama lo que se cuenta, ya traducido (una serie)
+ * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info'}>} [props.series]
+ *     varias series agrupadas: la llave de cada una en data, su nombre ya traducido y su color (por omisión, en orden)
  * @param {string} props.ariaLabel
  * @param {string} props.emptyLabel
  * @param {number} [props.height]
- * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone]
- * @param {(item: any) => void} [props.onSelect] recibe el renglón de data que se picó
+ * @param {'primary'|'success'|'warning'|'error'|'info'} [props.tone] el color de una sola serie
+ * @param {(item: any, seriesKey: string) => void} [props.onSelect] recibe el renglón de data que se picó y la serie
  * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el
  *     tooltip)
  * @param {{value: number, label: string}} [props.referenceLine] línea de referencia con su rótulo ya traducido («Meta:
  *     10 %»)
+ * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su
+ *     nombre y el valor de cada serie
+ * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada
+ * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}
  */
-export default function ColumnChart({ data, periodLabel, valueLabel, ariaLabel, emptyLabel, height, tone, onSelect, formatValue, referenceLine, }: {
-    data: Array<{
+export default function ColumnChart({ data, periodLabel, valueLabel, series, ariaLabel, emptyLabel, height, tone, onSelect, formatValue: formatValueProp, referenceLine, renderTooltip, texts, defaultView, onViewChange, }: {
+    data: Array<Record<string, any>>;
+    periodLabel: string;
+    valueLabel?: string;
+    series?: Array<{
         key: string;
-        value: number;
         label: string;
-        tooltip?: string;
+        tone?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
     }>;
-    periodLabel: string;
-    valueLabel: string;
     ariaLabel: string;
     emptyLabel: string;
     height?: number;
     tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
-    onSelect?: (item: any) => void;
+    onSelect?: (item: any, seriesKey: string) => void;
     formatValue?: (value: number) => string;
     referenceLine?: {
         value: number;
         label: string;
     };
+    renderTooltip?: (row: any) => import('react').ReactNode;
+    defaultView?: 'chart' | 'table';
+    onViewChange?: (view: 'chart' | 'table') => void;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/metrics/LineChart.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @param {object} props
+ * @param {Array<Record<string, any>>} props.data un renglón por periodo: {key, label, [llave de cada serie]: número}
+ * @param {Array<{key: string, label: string, tone?: 'primary'|'secondary'|'success'|'warning'|'error'|'info', dash?: string}>} props.series
+ *     la llave de cada serie en data, su nombre ya traducido, su color y su trazo (por omisión, en orden)
+ * @param {string} props.periodLabel encabezado de la primera columna de la tabla («Mes»), ya traducido
+ * @param {string} props.ariaLabel
+ * @param {string} props.emptyLabel
+ * @param {number} [props.height]
+ * @param {(value: number) => string} [props.formatValue] cómo se escribe un valor (en el eje, en la tabla y en el globo)
+ * @param {{value: number, label: string}} [props.referenceLine] línea de referencia (la meta) con su rótulo ya traducido
+ * @param {(row: any) => void} [props.onSelect] recibe el renglón de data del periodo que se picó
+ * @param {(row: any) => import('react').ReactNode} [props.renderTooltip] lo que dice el globo de un periodo; por omisión su
+ *     nombre y el valor de cada serie
+ * @param {'chart'|'table'} [props.defaultView] cómo se ve al abrir (CHART_VIEW); por omisión dibujada
+ * @param {(view: 'chart'|'table') => void} [props.onViewChange] la persona cambió a la tabla o a la gráfica
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {charts: {viewAsTable, viewAsChart, legend}}
+ */
+export default function LineChart({ data, series, periodLabel, ariaLabel, emptyLabel, height, formatValue: formatValueProp, referenceLine, onSelect, renderTooltip, texts, defaultView, onViewChange, }: {
+    data: Array<Record<string, any>>;
+    series: Array<{
+        key: string;
+        label: string;
+        tone?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+        dash?: string;
+    }>;
+    periodLabel: string;
+    ariaLabel: string;
+    emptyLabel: string;
+    height?: number;
+    formatValue?: (value: number) => string;
+    referenceLine?: {
+        value: number;
+        label: string;
+    };
+    onSelect?: (row: any) => void;
+    renderTooltip?: (row: any) => import('react').ReactNode;
+    defaultView?: 'chart' | 'table';
+    onViewChange?: (view: 'chart' | 'table') => void;
+    texts?: object;
+}): import("react").JSX.Element;

package/dist/types/ui/metrics/MetricCard.d.ts

@@ -14,8 +14,12 @@ export declare const TREND_DIRECTION: Readonly<{
  * @param {boolean} [props.isLoading]
  * @param {string} [props.to] ruta interna a la que lleva la tarjeta
  * @param {{label: string, direction: 'up'|'down'|'flat', isGood?: boolean}} [props.trend] cuánto cambió (TREND_DIRECTION)
+ * @param {import('react').ReactNode} [props.icon] junto al título, del color del tono (<ShoppingBagOutlinedIcon />)
+ * @param {import('react').ReactNode} [props.children] contenido propio debajo de la nota (una barra de avance, un desglose)
+ * @param {() => void} [props.onClick] la tarjeta entera como botón, cuando no lleva a otra pantalla (to)
+ * @param {object} [props.texts] los textos que cambian, con la forma de `metricCard`: {trend: {up: 'subió'}}
  */
-export default function MetricCard({ label, value, caption, tone, valueColor, isLoading, to, trend }: {
+export default function MetricCard({ label, value, caption, tone, valueColor, isLoading, to, trend, icon, children, onClick, texts, }: {
     label: string;
     value: import('react').ReactNode;
     caption?: import('react').ReactNode;
@@ -28,4 +32,8 @@ export default function MetricCard({ label, value, caption, tone, valueColor, is
         direction: 'up' | 'down' | 'flat';
         isGood?: boolean;
     };
+    icon?: import('react').ReactNode;
+    children?: import('react').ReactNode;
+    onClick?: () => void;
+    texts?: object;
 }): import("react").JSX.Element;

package/dist/types/ui/metrics/TableToggle.d.ts

@@ -1,7 +1,14 @@
+/** Cómo se ve una gráfica: dibujada o en su tabla (defaultView y onViewChange de BarList, ColumnChart, LineChart y CalendarHeatmap). */
+export declare const CHART_VIEW: Readonly<{
+    chart: "chart";
+    table: "table";
+}>;
 /**
- * @param {{asTable: boolean, onToggle: () => void}} props
+ * @param {{asTable: boolean, onToggle: () => void, texts?: object}} props texts: los textos que cambian, con la forma de
+ *     `common` ({charts: {viewAsTable, viewAsChart}})
  */
-export default function TableToggle({ asTable, onToggle }: {
+export default function TableToggle({ asTable, onToggle, texts }: {
     asTable: boolean;
     onToggle: () => void;
+    texts?: object;
 }): import("react").JSX.Element;