@stackcraftmx/calcita 0.0.0-stage → 0.23.0

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

@@ -0,0 +1,16 @@
+/**
+ * @param {object} props
+ * @param {string} [props.from] AAAA-MM-DD o '' si no hay
+ * @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"
+ */
+export default function DateRangeFilter({ from, to, onChange, label }: {
+    from?: string;
+    to?: string;
+    onChange: (range: {
+        from: string;
+        to: string;
+    }) => void;
+    label?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+/**
+ * @param {object} props
+ * @param {string} props.id prefijo de los id de las dos listas (accesibilidad)
+ * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options en orden; ya
+ *     traducidas
+ * @param {string|null} props.from
+ * @param {string|null} props.to
+ * @param {string} props.fromLabel ya traducido
+ * @param {string} props.toLabel ya traducido
+ * @param {(range: {from: string, to: string}) => void} props.onChange
+ */
+export default function PeriodRangeSelector({ id, options, from, to, fromLabel, toLabel, onChange }: {
+    id: string;
+    options: Array<{
+        value: string;
+        label: string;
+        disabled: boolean;
+        hint?: string;
+    }>;
+    from: string | null;
+    to: string | null;
+    fromLabel: string;
+    toLabel: string;
+    onChange: (range: {
+        from: string;
+        to: string;
+    }) => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,21 @@
+/**
+ * @param {object} props
+ * @param {string} props.value opción activa ('' = todas)
+ * @param {(value: string) => void} props.onChange
+ * @param {Array<{value: string, label: import('react').ReactNode, count?: number}>} [props.options]
+ * @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)
+ */
+export default function QuickFilters({ value, onChange, options, caption, ariaLabel, extra }: {
+    value: string;
+    onChange: (value: string) => void;
+    options?: Array<{
+        value: string;
+        label: import('react').ReactNode;
+        count?: number;
+    }>;
+    caption?: import('react').ReactNode;
+    ariaLabel?: string;
+    extra?: import('react').ReactNode;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,44 @@
+export declare const SEGMENTED_CONTROL_SX: {
+    gap: number;
+    p: number;
+    border: number;
+    borderColor: string;
+    borderRadius: number;
+    flexWrap: string;
+    flex: string;
+    '& .MuiToggleButton-root': {
+        fontSize: string;
+        letterSpacing: string;
+        border: number;
+        borderRadius: string;
+        px: number;
+        py: number;
+        m: string;
+        fontWeight: number;
+        textTransform: string;
+        color: string;
+        whiteSpace: string;
+    };
+    '& .MuiToggleButton-root.Mui-selected, & .MuiToggleButton-root.Mui-selected:hover': {
+        bgcolor: string;
+        color: string;
+    };
+};
+/**
+ * @param {object} props
+ * @param {Array<{value: string, label: string, disabled?: boolean}>} props.options en el orden en que se pintan; ya
+ *     traducidas
+ * @param {string|null} props.value
+ * @param {(value: string) => void} props.onChange
+ * @param {string} props.ariaLabel ya traducido
+ */
+export default function SegmentedControl({ options, value, onChange, ariaLabel }: {
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    value: string | null;
+    onChange: (value: string) => void;
+    ariaLabel: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+export { APP_BAR_HEIGHT_CSS_VARIABLE, SCROLL_MARGIN_BELOW_APP_BAR, useAppBarHeightPublisher } from './layout/appBarHeight.js';
+export { default as CollapsibleSection } from './layout/CollapsibleSection.js';
+export { default as ContentDialog } from './layout/ContentDialog.js';
+export { default as DefinitionList } from './layout/DefinitionList.js';
+export { default as DetailHeader } from './layout/DetailHeader.js';
+export { default as FullPageLoader } from './layout/FullPageLoader.js';
+export { default as GlassLensFilter } from './layout/GlassLensFilter.js';
+export { default as GlassPanel } from './layout/GlassPanel.js';
+export { default as PageHeader } from './layout/PageHeader.js';
+export { default as PageHeading } from './layout/PageHeading.js';
+export { default as ProfileHeader } from './layout/ProfileHeader.js';
+export { default as ScrollableRow, scrollableRow } from './layout/ScrollableRow.js';
+export { default as SectionCard } from './layout/SectionCard.js';
+export { default as BackButton } from './navigation/BackButton.js';
+export { default as ColorSchemeToggle } from './navigation/ColorSchemeToggle.js';
+export { default as DocumentTitle } from './navigation/DocumentTitle.js';
+export { LANGUAGES, default as LanguageToggle } from './navigation/LanguageToggle.js';
+export { default as FontSizeToggle } from './navigation/FontSizeToggle.js';
+export { FONT_SIZE_LEVELS } from './navigation/fontSizeLevels.js';
+export { default as PageBreadcrumbs } from './navigation/PageBreadcrumbs.js';
+export { default as DateRangeFilter } from './filters/DateRangeFilter.js';
+export { default as PeriodRangeSelector } from './filters/PeriodRangeSelector.js';
+export { default as QuickFilters } from './filters/QuickFilters.js';
+export { default as SegmentedControl, SEGMENTED_CONTROL_SX } from './filters/SegmentedControl.js';
+export { default as DictionaryText } from './labels/DictionaryText.js';
+export { default as StatusChip } from './labels/StatusChip.js';
+export { default as Tag } from './labels/Tag.js';
+export { default as CopyButton } from './actions/CopyButton.js';
+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';

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

@@ -0,0 +1,7 @@
+/**
+ * @param {{dictionary: Record<string, object>, value: string|null|undefined}} props
+ */
+export default function DictionaryText({ dictionary, value }: {
+    dictionary: Record<string, object>;
+    value: string | null | undefined;
+}): string;

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

@@ -0,0 +1,21 @@
+/**
+ * @param {object} props
+ * @param {Record<string, object>} props.dictionary p. ej. BATCH_STATUS
+ * @param {string|null|undefined} props.value código del API
+ * @param {'dot'|'chip'} [props.variant]
+ * @param {boolean} [props.short] pinta la palabra corta de la entrada (shortLabelKey), para una columna angosta; el
+ *     nombre completo queda en el tooltip, antes de su explicación
+ * @param {string} [props.suffix] texto que va después de la etiqueta con " · " (p. ej. un conteo ya formateado)
+ * @param {import('react').ReactNode} [props.tooltip] SUSTITUYE al tooltip del diccionario; úsalo cuando el renglón tiene algo más
+ *     que decir. OJO: no envuelvas este componente en otro Tooltip, porque el suyo sigue ahí y se ven los dos encimados
+ * @param {object} [props.sx] ajustes de estilo del Chip (solo variant="chip")
+ */
+export default function StatusChip({ dictionary, value, variant, short, suffix, tooltip: customTooltip, sx }: {
+    dictionary: Record<string, object>;
+    value: string | null | undefined;
+    variant?: 'dot' | 'chip';
+    short?: boolean;
+    suffix?: string;
+    tooltip?: import('react').ReactNode;
+    sx?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+/**
+ * @param {object} props
+ * @param {import('react').ReactNode} props.label texto visible, ya traducido
+ * @param {string} [props.tooltip] qué significa (aparece al pasar el cursor)
+ * @param {string} [props.color] color del tema de MUI
+ * @param {'filled'|'outlined'} [props.variant]
+ * @param {'small'|'medium'} [props.size]
+ * @param {() => void} [props.onDelete]
+ * @param {object} [props.sx]
+ */
+export default function Tag({ label, tooltip, color, variant, size, onDelete, sx, ...chipProps }: {
+    label: import('react').ReactNode;
+    tooltip?: string;
+    color?: string;
+    variant?: 'filled' | 'outlined';
+    size?: 'small' | 'medium';
+    onDelete?: () => void;
+    sx?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+/**
+ * @param {object} props
+ * @param {string} props.collapsedTitle lo que dice plegada, ya traducido («Ver el detalle de la validación»)
+ * @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 {import('react').ReactNode} props.children
+ */
+export default function CollapsibleSection({ collapsedTitle, expandedTitle, hint, defaultExpanded, children }: {
+    collapsedTitle: string;
+    expandedTitle: string;
+    hint?: string;
+    defaultExpanded?: boolean;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {() => void} props.onClose
+ * @param {string} props.title texto ya traducido
+ * @param {import('react').ReactNode} props.children
+ */
+export default function ContentDialog({ open, onClose, title, children }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+/**
+ * @param {object} props
+ * @param {Array<{label: string, value: import('react').ReactNode}>} props.entries en el orden en que se pintan; el label es la
+ *     llave
+ * @param {'columns'|'stacked'} [props.layout]
+ * @param {number} [props.labelWidth] ancho en px de la columna del dato (solo columns)
+ */
+export default function DefinitionList({ entries, layout, labelWidth }: {
+    entries: Array<{
+        label: string;
+        value: import('react').ReactNode;
+    }>;
+    layout?: 'columns' | 'stacked';
+    labelWidth?: number;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+/**
+ * @param {object} props
+ * @param {string} props.title texto ya traducido
+ * @param {string} [props.eyebrow] contexto arriba del título (p. ej. el producto)
+ * @param {import('react').ReactNode} [props.badges] insignias junto al título (chips de estatus, intento...)
+ * @param {import('react').ReactNode} [props.actions] botones a la derecha
+ * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
+ */
+export default function DetailHeader({ title, eyebrow, badges, actions, documentTitle }: {
+    title: string;
+    eyebrow?: string;
+    badges?: import('react').ReactNode;
+    actions?: import('react').ReactNode;
+    documentTitle?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+/** Los errores que tiene pantalla propia. */
+export declare const ERROR_PAGE_KIND: Readonly<{
+    notFound: "notFound";
+    forbidden: "forbidden";
+    serverError: "serverError";
+    newVersion: "newVersion";
+}>;
+/**
+ * @param {object} props
+ * @param {string} props.kind uno de ERROR_PAGE_KIND
+ * @param {string} [props.title] ya traducido; por omisión el del paquete
+ * @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»
+ */
+export default function ErrorPage({ kind, title, text, homePath, onRetry }: {
+    kind: string;
+    title?: string;
+    text?: import('react').ReactNode;
+    homePath?: string;
+    onRetry?: () => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export default function FullPageLoader(): import("react").JSX.Element;

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

@@ -0,0 +1 @@
+export default function GlassLensFilter(): import("react").JSX.Element | null;

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

@@ -0,0 +1,11 @@
+/**
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children
+ * @param {object|Function|Array} [props.sx] estilos propios: se suman y ganan
+ * @param {import('react').ElementType} [props.component] por omisión 'div'
+ */
+export default function GlassPanel({ children, sx, ...paperProps }: {
+    children: import('react').ReactNode;
+    sx?: object | Function | any[];
+    component?: import('react').ElementType;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+/**
+ * @param {object} props
+ * @param {string} props.title texto ya traducido
+ * @param {string} [props.eyebrow]
+ * @param {import('react').ReactNode} [props.subtitle]
+ * @param {import('react').ReactNode} [props.action] normalmente un <Button variant="contained" shape="pill">
+ * @param {string} [props.documentTitle] título de la pestaña si difiere del visible
+ */
+export default function PageHeader({ title, eyebrow, subtitle, action, documentTitle }: {
+    title: string;
+    eyebrow?: string;
+    subtitle?: import('react').ReactNode;
+    action?: import('react').ReactNode;
+    documentTitle?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+/**
+ * @param {object} props
+ * @param {string} props.title texto ya traducido
+ * @param {import('react').ReactNode} [props.description]
+ * @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
+ */
+export default function PageHeading({ title, description, breadcrumbs, actions, documentTitle }: {
+    title: string;
+    description?: import('react').ReactNode;
+    breadcrumbs?: Array<{
+        label: string;
+        to?: string;
+    }> | false;
+    actions?: import('react').ReactNode;
+    documentTitle?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+/**
+ * @param {object} props
+ * @param {string} props.name el nombre de la persona
+ * @param {string} [props.email]
+ * @param {string} [props.subtitle] el renglón de abajo (puesto · sucursal)
+ * @param {string} [props.avatarUrl] su foto; sin ella, sus iniciales
+ * @param {string[]} [props.chips] sus perfiles o etiquetas, ya traducidos
+ * @param {import('react').ReactNode} [props.actions] los botones de la derecha
+ */
+export default function ProfileHeader({ name, email, subtitle, avatarUrl, chips, actions }: {
+    name: string;
+    email?: string;
+    subtitle?: string;
+    avatarUrl?: string;
+    chips?: string[];
+    actions?: import('react').ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+/** El mixin sin arrastre, para cuando no se puede envolver el elemento. */
+export declare const scrollableRow: {
+    display: string;
+    flexWrap: string;
+    overflowX: string;
+    overflowY: string;
+    scrollbarWidth: string;
+    msOverflowStyle: string;
+    '&::-webkit-scrollbar': {
+        display: string;
+    };
+};
+/**
+ * @param {object} props
+ * @param {import('react').ReactNode} props.children
+ * @param {number} [props.gap]
+ * @param {number} [props.py]
+ * @param {object} [props.sx]
+ * @param {boolean} [props.enableDragScroll]
+ * @param {boolean} [props.enableWheelToX]
+ * @param {boolean} [props.fadeEdges]
+ * @param {import('react').Ref<HTMLElement>} [props.ref]
+ */
+export default function ScrollableRow({ children, gap, py, sx, enableDragScroll, enableWheelToX, fadeEdges, ref, ...boxProps }: {
+    children: import('react').ReactNode;
+    gap?: number;
+    py?: number;
+    sx?: object;
+    enableDragScroll?: boolean;
+    enableWheelToX?: boolean;
+    fadeEdges?: boolean;
+    ref?: import('react').Ref<HTMLElement>;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+/**
+ * @param {object} props
+ * @param {string} props.title texto ya traducido
+ * @param {import('react').ReactNode} [props.action] botón o liga a la derecha del título
+ * @param {import('react').ReactNode} props.children
+ */
+export default function SectionCard({ title, action, children }: {
+    title: string;
+    action?: import('react').ReactNode;
+    children: import('react').ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/** Nombre de la variable CSS con el alto de la barra superior, en px. */
+export declare const APP_BAR_HEIGHT_CSS_VARIABLE = "--app-bar-height";
+/** El alto real de la barra, como valor de CSS: para lo que se acomoda justo debajo de ella (el diálogo de contenido). */
+export declare const APP_BAR_HEIGHT = "var(--app-bar-height, 56px)";
+/** Valor de scroll-margin-top para una sección a la que se llega con un ancla: el alto real de la barra más un respiro. */
+export declare const SCROLL_MARGIN_BELOW_APP_BAR = "calc(var(--app-bar-height, 56px) + 16px)";
+/**
+ * Mide la barra superior y publica su alto en la variable CSS cada vez que cambia (aparece o se cierra un aviso, se
+ * gira el teléfono, cambia el ancho de la ventana).
+ *
+ * @returns {import('react').RefObject<HTMLElement>} la referencia que se le pone a la barra
+ */
+export declare function useAppBarHeightPublisher(): import('react').RefObject<HTMLElement>;

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

@@ -0,0 +1,19 @@
+/**
+ * @param {object} props
+ * @param {Array<{key: string, label: string, value: number, detail?: string, tooltip?: string}>} props.items
+ * @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]
+ */
+export default function BarList({ items, onSelect, emptyLabel, tone }: {
+    items: Array<{
+        key: string;
+        label: string;
+        value: number;
+        detail?: string;
+        tooltip?: string;
+    }>;
+    onSelect?: (item: any) => void;
+    emptyLabel: string;
+    tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+}): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+/**
+ * @param {object} props
+ * @param {string} props.startsOn primer día del rango ("2025-09-16"), fecha de calendario
+ * @param {string} props.endsOn último día del rango ("2026-09-15")
+ * @param {Array<{date: string, value: number, detail?: string}>} props.days solo los días con actividad; el resto vale
+ *     0
+ * @param {string} props.ariaLabel qué muestra el calendario, ya traducido
+ * @param {string} props.valueLabel encabezado de la columna de valor en la tabla ("Registros leídos")
+ * @param {(value: number) => string} props.describeValue el valor en palabras para el tooltip ("120 registros leídos")
+ * @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]
+ */
+export default function CalendarHeatmap({ startsOn, endsOn, days, ariaLabel, valueLabel, describeValue, summary, emptyLabel, tone }: {
+    startsOn: string;
+    endsOn: string;
+    days: Array<{
+        date: string;
+        value: number;
+        detail?: string;
+    }>;
+    ariaLabel: string;
+    valueLabel: string;
+    describeValue: (value: number) => string;
+    summary?: import('react').ReactNode;
+    emptyLabel?: string;
+    tone?: 'primary' | 'info' | 'success' | 'warning' | 'error';
+}): import("react").JSX.Element;

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

@@ -0,0 +1,5 @@
+export default function ChartTooltip({ active, payload, render }: {
+    active: any;
+    payload: any;
+    render: any;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,35 @@
+/**
+ * @param {object} props
+ * @param {Array<{key: string, value: number, label: string, tooltip?: string}>} props.data
+ * @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.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 {(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 %»)
+ */
+export default function ColumnChart({ data, periodLabel, valueLabel, ariaLabel, emptyLabel, height, tone, onSelect, formatValue, referenceLine, }: {
+    data: Array<{
+        key: string;
+        value: number;
+        label: string;
+        tooltip?: string;
+    }>;
+    periodLabel: string;
+    valueLabel: string;
+    ariaLabel: string;
+    emptyLabel: string;
+    height?: number;
+    tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    onSelect?: (item: any) => void;
+    formatValue?: (value: number) => string;
+    referenceLine?: {
+        value: number;
+        label: string;
+    };
+}): import("react").JSX.Element;

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

@@ -0,0 +1,31 @@
+/** Hacia dónde se movió el número. */
+export declare const TREND_DIRECTION: Readonly<{
+    up: "up";
+    down: "down";
+    flat: "flat";
+}>;
+/**
+ * @param {object} props
+ * @param {string} props.label texto ya traducido
+ * @param {import('react').ReactNode} props.value ya formateado (formatNumber)
+ * @param {import('react').ReactNode} [props.caption]
+ * @param {'info'|'success'|'warning'|'error'} [props.tone]
+ * @param {string} [props.valueColor] color del número si no debe ir del tono (p. ej. un total en texto normal)
+ * @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)
+ */
+export default function MetricCard({ label, value, caption, tone, valueColor, isLoading, to, trend }: {
+    label: string;
+    value: import('react').ReactNode;
+    caption?: import('react').ReactNode;
+    tone?: 'info' | 'success' | 'warning' | 'error';
+    valueColor?: string;
+    isLoading?: boolean;
+    to?: string;
+    trend?: {
+        label: string;
+        direction: 'up' | 'down' | 'flat';
+        isGood?: boolean;
+    };
+}): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+/**
+ * @param {{asTable: boolean, onToggle: () => void}} props
+ */
+export default function TableToggle({ asTable, onToggle }: {
+    asTable: boolean;
+    onToggle: () => void;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,17 @@
+/** Ancho mínimo (px) de una barra: con 0 Recharts la descarta y la etiqueta desaparece o se corre de renglón. */
+export declare const BAR_MIN_POINT_SIZE = 1;
+/**
+ * valueAccessor de LabelList: el número y el detalle del MISMO renglón de la barra.
+ *
+ * @param {{payload: {value: number, detail?: string}}} barEntry rectángulo que arma Recharts (payload = renglón de items)
+ * @returns {{value: number, detail: string|undefined}}
+ */
+export declare function barLabelValueOf(barEntry: {
+    payload: {
+        value: number;
+        detail?: string;
+    };
+}): {
+    value: number;
+    detail: string | undefined;
+};

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

@@ -0,0 +1,45 @@
+/** Nivel 0 = sin actividad; 1 a 4 = el tono cada vez más lleno. */
+export declare const HEATMAP_LEVELS: number[];
+/**
+ * Cortes de los cuartiles de los valores con actividad.
+ *
+ * @param {number[]} values un valor por día (los ceros no cuentan)
+ * @returns {[number, number, number]} q1, q2 y q3
+ */
+export declare function quantileThresholds(values: number[]): [number, number, number];
+/**
+ * Nivel de color de un valor.
+ *
+ * @param {number} value
+ * @param {[number, number, number]} thresholds lo que regresa quantileThresholds
+ * @returns {0|1|2|3|4}
+ */
+export declare function levelOf(value: number, [firstQuartile, median, thirdQuartile]: [number, number, number]): 0 | 1 | 2 | 3 | 4;
+/**
+ * Semanas del calendario: columnas de lunes a domingo desde la semana de startsOn hasta la de endsOn.
+ *
+ * Los días fuera del rango (antes de startsOn en la primera semana o después de endsOn en la última) van en null para
+ * que la rejilla deje su hueco sin pintarlos como "sin actividad".
+ *
+ * @param {{startsOn: string, endsOn: string, days: Array<{date: string, value: number, detail?: string}>}} calendar
+ *        days solo trae los días con actividad (el resto vale 0)
+ * @returns {{weeks: Array<Array<{date: string, value: number, detail?: string}|null>>, monthMarks: Array<number|null>, thresholds: [number, number, number]}}
+ *          monthMarks: el mes (1 a 12) que empieza en cada semana, o null
+ */
+export declare function calendarWeeksOf({ startsOn, endsOn, days }: {
+    startsOn: string;
+    endsOn: string;
+    days: Array<{
+        date: string;
+        value: number;
+        detail?: string;
+    }>;
+}): {
+    weeks: Array<Array<{
+        date: string;
+        value: number;
+        detail?: string;
+    } | null>>;
+    monthMarks: Array<number | null>;
+    thresholds: [number, number, number];
+};

package/dist/types/ui/navigation/BackButton.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @param {object} props
+ * @param {string} props.fallbackTo ruta de la lista sin filtros (último respaldo)
+ * @param {string} [props.listKey] la misma llave que usa useRememberListUrl en la lista
+ * @param {string} [props.label] ya traducido; se usa cuando la página anterior no anotó su nombre o no hay historial
+ */
+export default function BackButton({ fallbackTo, listKey, label, ...buttonProps }: {
+    fallbackTo: string;
+    listKey?: string;
+    label?: string;
+}): import("react").JSX.Element;

package/dist/types/ui/navigation/ColorSchemeToggle.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @param {{size?: 'small'|'medium', inverted?: boolean}} props inverted = icono blanco para fondos oscuros
+ */
+export default function ColorSchemeToggle({ size, inverted }: {
+    size?: 'small' | 'medium';
+    inverted?: boolean;
+}): import("react").JSX.Element;