@stackcraftmx/calcita 0.0.0-stage → 0.25.0

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

@@ -0,0 +1,20 @@
+/**
+ * @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
+ * @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, texts }: {
+    title: string;
+    description?: import('react').ReactNode;
+    breadcrumbs?: Array<{
+        label: string;
+        to?: string;
+    }> | false;
+    actions?: import('react').ReactNode;
+    documentTitle?: string;
+    texts?: object;
+}): 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,25 @@
+/**
+ * @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]
+ * @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, texts, defaultView, onViewChange }: {
+    items: Array<{
+        key: string;
+        label: string;
+        value: number;
+        detail?: string;
+        tooltip?: string;
+    }>;
+    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

@@ -0,0 +1,34 @@
+/**
+ * @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]
+ * @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, texts, defaultView, onViewChange }: {
+    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';
+    defaultView?: 'chart' | 'table';
+    onViewChange?: (view: 'chart' | 'table') => void;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +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?: boolean;
+    payload?: Array<{
+        payload: any;
+    }>;
+    render: (item: any) => import('react').ReactNode;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,47 @@
+/**
+ * @param {object} props
+ * @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 (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] 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, 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;
+        label: string;
+        tone?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    }>;
+    ariaLabel: string;
+    emptyLabel: string;
+    height?: number;
+    tone?: 'primary' | 'success' | 'warning' | 'error' | 'info';
+    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

@@ -0,0 +1,39 @@
+/** 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)
+ * @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, icon, children, onClick, texts, }: {
+    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;
+    };
+    icon?: import('react').ReactNode;
+    children?: import('react').ReactNode;
+    onClick?: () => void;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +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, texts?: object}} props texts: los textos que cambian, con la forma de
+ *     `common` ({charts: {viewAsTable, viewAsChart}})
+ */
+export default function TableToggle({ asTable, onToggle, texts }: {
+    asTable: boolean;
+    onToggle: () => void;
+    texts?: object;
+}): 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/chartParts.d.ts

@@ -0,0 +1,112 @@
+/** Los colores de las series, en orden, cuando la pantalla no dice el suyo: los del tema. */
+export declare const CHART_SERIES_TONES: readonly string[];
+/** El trazo de cada serie de líneas, en orden (continuo, rayado, punteado): así no se distinguen solo por el color. */
+export declare const CHART_LINE_DASHES: readonly string[];
+/**
+ * Los colores de las gráficas, leídos del tema: con variables CSS salen como var(--su-prefijo-palette-…) y sirven en claro y
+ * en oscuro sin volver a pintar; sin ellas, el color de la paleta.
+ *
+ * @returns {{palette: object, axis: string, axisText: {fill: string, fontSize: number}, grid: string, text: string, muted: string, hover: string}}
+ */
+export declare function useChartColors(): {
+    palette: object;
+    axis: string;
+    axisText: {
+        fill: string;
+        fontSize: number;
+    };
+    grid: string;
+    text: string;
+    muted: string;
+    hover: string;
+};
+/**
+ * Ancho del eje de valores para que quepa su número más largo.
+ *
+ * @param {number} highestValue el valor más alto que se dibuja
+ * @param {(value: number) => string} formatValue cómo se escribe un valor
+ * @returns {number} pixeles
+ */
+export declare function valueAxisWidthOf(highestValue: number, formatValue: (value: number) => string): number;
+/**
+ * Las series con su color y su trazo resueltos (lo que la pantalla no dijo, por su lugar en la lista).
+ *
+ * @param {Array<{key: string, label: string, tone?: string, dash?: string}>} series
+ * @param {object} palette la del tema (useChartColors().palette)
+ * @returns {Array<{key: string, label: string, tone: string, color: string, dash: string}>}
+ */
+export declare function resolvedSeriesOf(series: Array<{
+    key: string;
+    label: string;
+    tone?: string;
+    dash?: string;
+}>, palette: object): Array<{
+    key: string;
+    label: string;
+    tone: string;
+    color: string;
+    dash: string;
+}>;
+/**
+ * El valor más alto de todas las series (y de la línea de referencia), para el ancho del eje.
+ *
+ * @param {Array<Record<string, any>>} data
+ * @param {Array<{key: string}>} series
+ * @param {{value: number}|undefined} referenceLine
+ * @returns {number}
+ */
+export declare function highestValueOf(data: Array<Record<string, any>>, series: Array<{
+    key: string;
+}>, referenceLine: {
+    value: number;
+} | undefined): number;
+/**
+ * La vista de tabla: un renglón por periodo y una columna por serie.
+ *
+ * @param {object} props
+ * @param {Array<Record<string, any>>} props.data
+ * @param {Array<{key: string, label: string}>} props.series
+ * @param {string} props.periodLabel
+ * @param {(value: number) => string} props.formatValue
+ * @param {number} props.height
+ */
+export declare function ChartTable({ data, series, periodLabel, formatValue, height }: {
+    data: Array<Record<string, any>>;
+    series: Array<{
+        key: string;
+        label: string;
+    }>;
+    periodLabel: string;
+    formatValue: (value: number) => string;
+    height: number;
+}): import("react").JSX.Element;
+/**
+ * La leyenda: solo con dos series o más. Cada una con su muestra (su color y, en líneas, su trazo).
+ *
+ * @param {object} props
+ * @param {Array<{key: string, label: string, color: string, dash: string}>} props.series ya resueltas
+ * @param {boolean} [props.showsDash] la muestra con el trazo de su línea (LineChart); sin él, un cuadro de color
+ * @param {string} props.ariaLabel
+ */
+export declare function ChartLegend({ series, showsDash, ariaLabel }: {
+    series: Array<{
+        key: string;
+        label: string;
+        color: string;
+        dash: string;
+    }>;
+    showsDash?: boolean;
+    ariaLabel: string;
+}): import("react").JSX.Element | null;
+/**
+ * El rótulo de la línea de referencia (la meta), debajo de la gráfica: sobre la línea se encimaba con la última columna, y
+ * así también lo lee quien ve la tabla.
+ *
+ * @param {{referenceLine?: {value: number, label: string}}} props
+ */
+export declare function ReferenceCaption({ referenceLine }: {
+    referenceLine?: {
+        value: number;
+        label: string;
+    };
+}): import("react").JSX.Element | null;

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,13 @@
+/**
+ * @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
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
+ */
+export default function BackButton({ fallbackTo, listKey, label, texts, ...buttonProps }: {
+    fallbackTo: string;
+    listKey?: string;
+    label?: string;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/**
+ * @param {object} [props]
+ * @param {'small'|'medium'} [props.size]
+ * @param {boolean} [props.inverted] ícono blanco para fondos oscuros
+ * @param {(mode: 'light'|'dark'|'system') => void} [props.onChange] la persona cambió el modo (para guardarlo en su servidor)
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
+ */
+export default function ColorSchemeToggle({ size, inverted, onChange, texts }?: {
+    size?: 'small' | 'medium';
+    inverted?: boolean;
+    onChange?: (mode: 'light' | 'dark' | 'system') => void;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,6 @@
+/**
+ * @param {{title: string}} props texto ya traducido
+ */
+export default function DocumentTitle({ title }: {
+    title: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+/**
+ * @param {object} [props]
+ * @param {'small'|'medium'} [props.size]
+ * @param {(level: string) => void} [props.onChange] la persona eligió otro tamaño (FONT_SIZE_LEVELS; para guardarlo en su servidor)
+ * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
+ */
+export default function FontSizeToggle({ size, onChange, texts }?: {
+    size?: 'small' | 'medium';
+    onChange?: (level: string) => void;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,13 @@
+/** Los idiomas que traen los textos del paquete. */
+export declare const LANGUAGES: readonly ("en" | "es")[];
+/**
+ * @param {object} [props]
+ * @param {boolean} [props.inverted] texto blanco para fondos oscuros
+ * @param {(language: string) => void} [props.onChange] además de avisar a ToolkitProvider, cada que se elige un idioma
+ * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {language: {switchToNamed, choose}}
+ */
+export default function LanguageToggle({ inverted, onChange, texts }?: {
+    inverted?: boolean;
+    onChange?: (language: string) => void;
+    texts?: object;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+/**
+ * @param {object} props
+ * @param {Array<{label: string, to?: string}>} props.items textos ya traducidos
+ * @param {object} [props.texts] los textos que cambian, con la forma de `layout` en los textos del paquete
+ */
+export default function PageBreadcrumbs({ items, texts }: {
+    items: Array<{
+        label: string;
+        to?: string;
+    }>;
+    texts?: object;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,18 @@
+/**
+ * El modo que SE ESTÁ viendo. Con mode 'system' manda lo que diga el sistema operativo; antes de montar en el cliente
+ * MUI todavía no sabe el modo y regresa undefined.
+ *
+ * @param {string|undefined} mode 'light' | 'dark' | 'system' (useColorScheme de MUI)
+ * @param {string|undefined} systemMode 'light' | 'dark' (lo que dice el sistema operativo)
+ * @returns {'light'|'dark'} el modo visible; 'light' si todavía no se sabe
+ */
+export declare function resolvedColorModeOf(mode: string | undefined, systemMode: string | undefined): 'light' | 'dark';
+/**
+ * El modo al que lleva el interruptor: siempre el contrario del que se ve. Dos estados y no tres: un «Sistema» en la
+ * barra le agrega una decisión al usuario sin resolverle nada.
+ *
+ * @param {string|undefined} mode 'light' | 'dark' | 'system'
+ * @param {string|undefined} systemMode 'light' | 'dark'
+ * @returns {'light'|'dark'}
+ */
+export declare function nextColorModeOf(mode: string | undefined, systemMode: string | undefined): 'light' | 'dark';

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

@@ -0,0 +1,25 @@
+/** La letra de la raíz del navegador: la base de los rem. Con menos de 16 px el iPhone hace zoom al entrar a un campo. */
+export declare const ROOT_FONT_SIZE_PIXELS = 16;
+/** Dónde se recuerda la elección en este navegador. */
+export declare const FONT_SIZE_STORAGE_KEY = "calcita:fontSize";
+/** Los niveles: su llave, cuánto crece la letra y su texto. */
+export declare const FONT_SIZE_LEVELS: readonly {
+    key: string;
+    multiplier: number;
+    labelKey: string;
+}[];
+export declare const DEFAULT_FONT_SIZE_LEVEL = "normal";
+/**
+ * La letra de la raíz para un nivel; con una llave que no existe, la normal.
+ *
+ * @param {string} levelKey
+ * @returns {string} p. ej. '18.4px'
+ */
+export declare function rootFontSizeOf(levelKey: string): string;
+/**
+ * ¿Es un nivel que existe? (lo guardado en el navegador puede venir de otra versión).
+ *
+ * @param {unknown} levelKey
+ * @returns {boolean}
+ */
+export declare function isFontSizeLevel(levelKey: unknown): boolean;

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

@@ -0,0 +1,10 @@
+import { FONT_SIZE_LEVELS } from './fontSizeLevels.js';
+/**
+ * @returns {{level: string, setLevel: (levelKey: string) => void, isMounted: boolean, levels: typeof FONT_SIZE_LEVELS}}
+ */
+export declare function useFontSize(): {
+    level: string;
+    setLevel: (levelKey: string) => void;
+    isMounted: boolean;
+    levels: typeof FONT_SIZE_LEVELS;
+};