@sfperusacdev/sf-ui 0.2.9 → 0.3.1

package/dist/types/src/components/charts/chartUtils.d.ts

@@ -1,6 +1,12 @@
 import { CSSProperties } from 'react';
 import { ChartDataPoint, ChartSeries, ChartValueFormatter } from './types';
 export declare const CHART_SERIES_COLORS: readonly ["var(--sf-chart-1)", "var(--sf-chart-2)", "var(--sf-chart-3)", "var(--sf-chart-4)", "var(--sf-chart-5)"];
+/** Paleta de categorías (`--sf-cat-1` … `--sf-cat-10`): para distinguir dominios, etapas o dimensiones, que no
+ * son un estado. Se pasa como `color` de una serie, de un ítem de leyenda o de un acento; el valor lo decide el
+ * tema. No cambia el color por defecto de `Chart`, que sigue siendo `CHART_SERIES_COLORS`. */
+export declare const CATEGORY_COLORS: readonly ["var(--sf-cat-1)", "var(--sf-cat-2)", "var(--sf-cat-3)", "var(--sf-cat-4)", "var(--sf-cat-5)", "var(--sf-cat-6)", "var(--sf-cat-7)", "var(--sf-cat-8)", "var(--sf-cat-9)", "var(--sf-cat-10)"];
+/** Color de la categoría en la posición `index` (0-based); pasada la décima, la paleta vuelve a empezar. */
+export declare const categoryColor: (index: number) => "var(--sf-cat-1)" | "var(--sf-cat-2)" | "var(--sf-cat-3)" | "var(--sf-cat-4)" | "var(--sf-cat-5)" | "var(--sf-cat-6)" | "var(--sf-cat-7)" | "var(--sf-cat-8)" | "var(--sf-cat-9)" | "var(--sf-cat-10)";
 export declare const resolveSeriesColor: (series: {
     color?: string;
 }, index: number) => string;

package/dist/types/src/components/charts/index.d.ts

@@ -1,9 +1,9 @@
 export { Chart } from './Chart';
 export type { ChartProps } from './Chart';
 export { ChartLegend } from './ChartLegend';
-export type { ChartLegendItem, ChartLegendProps } from './ChartLegend';
+export type { ChartLegendItem, ChartLegendOrientation, ChartLegendProps } from './ChartLegend';
 export { Sparkline } from './Sparkline';
 export { DiagnosticRadar } from './DiagnosticRadar';
 export { DeviationBand } from './DeviationBand';
-export { CHART_SERIES_COLORS, resolveSeriesColor, buildDefaultFormatter, toStacked100Data, rawValueKey } from './chartUtils';
+export { CHART_SERIES_COLORS, CATEGORY_COLORS, categoryColor, resolveSeriesColor, buildDefaultFormatter, toStacked100Data, rawValueKey } from './chartUtils';
 export type { BaseChartProps, ChartDataPoint, ChartOrientation, ChartReferenceLine, ChartSeries, ChartStacking, ChartType, ChartValueFormatter, DiagnosticRadarProps, DeviationBandDirection, DeviationBandProps, RadarMetric, SparklineProps, } from './types';

package/dist/types/src/components/charts/types.d.ts

@@ -16,6 +16,9 @@ export type ChartSeries = {
     /** Id de grupo de apilado explícito, para mezclar series apiladas y sueltas en un mismo chart.
      * Si se omite y `stacking` es "stacked"/"stacked-100", todas las series comparten un solo stack. */
     stackId?: string;
+    /** Solo en `line`: un color por punto, en el orden de `data`. Los puntos toman su color y la línea pasa por ellos
+     * en degradado. */
+    pointColors?: string[];
 };
 export type ChartDataPoint = Record<string, string | number | null | undefined>;
 /** Formatea un valor numérico de un chart (eje, tooltip o label de barra). `key` es la key de la
@@ -67,6 +70,8 @@ export type BaseChartProps = {
      * (comportamiento de Recharts: no es un hit-test exacto de la barra/punto individual, es el punto
      * activo del eje de categorías en esa posición). `series` es la primera serie definida, como referencia. */
     onDataPointClick?: (point: ChartDataPoint, series: ChartSeries) => void;
+    /** Barras apiladas: "all" (por defecto) redondea cada tramo; "top" solo el extremo de la pila. */
+    stackRadius?: "all" | "top";
 };
 export type ChartProps = BaseChartProps & {
     type: ChartType;

package/dist/types/src/components/dashboard/AlertSummaryList.d.ts

@@ -38,5 +38,5 @@ type AlertSummaryListProps = {
  * Distinto de `AlertRowList`: esa es una bitácora de eventos (icono + hora + meta);
  * esta es un resumen de conteos/alertas con el número como protagonista.
  */
-export declare const AlertSummaryList: ({ items, className, density, emptyMessage, showIcon, showChevron, }: AlertSummaryListProps) => import("react").JSX.Element;
+export declare const AlertSummaryList: ({ items, className, density, emptyMessage, showIcon, showChevron, }: AlertSummaryListProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/Calendar.d.ts

@@ -6,5 +6,5 @@ type CalendarProps = {
     compact?: boolean;
     className?: string;
 };
-export declare const Calendar: ({ value, onChange, badges, compact, className }: CalendarProps) => import("react").JSX.Element;
+export declare const Calendar: ({ value, onChange, badges, compact, className }: CalendarProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/CardNote.d.ts

@@ -10,4 +10,4 @@ export type CardNoteProps = {
  * Nota al pie de una tarjeta o de un panel: explica cómo leer el dato con el mismo tintado que el pie de
  * `MetricBarList`. Para procedencia de datos (período, fuentes, confianza) está `EvidenceFootnote`.
  */
-export declare const CardNote: ({ text, tone, className }: CardNoteProps) => import("react").JSX.Element;
+export declare const CardNote: ({ text, tone, className }: CardNoteProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/ComparisonTable.d.ts

@@ -21,4 +21,4 @@ export type ComparisonTableProps = {
  * Distinto de una tabla genérica: la columna de desviación es siempre calculada, nunca un dato que el
  * consumidor tenga que traer aparte.
  */
-export declare const ComparisonTable: ({ rows, planLabel, realLabel, className }: ComparisonTableProps) => import("react").JSX.Element;
+export declare const ComparisonTable: ({ rows, planLabel, realLabel, className }: ComparisonTableProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/DashboardBoard.d.ts

@@ -27,11 +27,11 @@ export type DashboardBoardProps = {
  * (principal y secundario) con la proporción 2/3 · 1/3 cuando la fila tiene dos bloques. Va dentro de
  * `DashboardLayout` o de `DashboardPageFrame`, que ponen el espacio vertical entre piezas.
  */
-export declare const DashboardBoard: ({ kpis, notes, hidden, hiddenTitle, detail, primary, secondary, }: DashboardBoardProps) => import("react").JSX.Element;
+export declare const DashboardBoard: ({ kpis, notes, hidden, hiddenTitle, detail, primary, secondary, }: DashboardBoardProps) => import('react').JSX.Element;
 export type DashboardCardRowProps = {
     /** Tarjetas de la fila; los `null`/`false` se descartan. Con tres o más van a 3 columnas, si no a 2. */
     children: ReactNode[];
     className?: string;
 };
 /** Tarjetas del mismo alto dentro de una sección (p. ej. Sexo · Edad · Antigüedad). */
-export declare const DashboardCardRow: ({ children, className }: DashboardCardRowProps) => import("react").JSX.Element;
+export declare const DashboardCardRow: ({ children, className }: DashboardCardRowProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/DashboardCard.d.ts

@@ -39,7 +39,7 @@ export type DashboardCardProps = {
     className?: string;
     children?: ReactNode;
 };
-export declare const DashboardCard: ({ title, subtitle, icon, headerAction, variant, span, padding, look, headerSize, headerWrap, headerDivider, footer, state, loadingMessage, errorMessage, emptyMessage, onRetry, retryLabel, minHeight, bodyOverflow, className, children, }: DashboardCardProps) => import("react").JSX.Element;
+export declare const DashboardCard: ({ title, subtitle, icon, headerAction, variant, span, padding, look, headerSize, headerWrap, headerDivider, footer, state, loadingMessage, errorMessage, emptyMessage, onRetry, retryLabel, minHeight, bodyOverflow, className, children, }: DashboardCardProps) => import('react').JSX.Element;
 type DashboardGridProps = {
     cols?: 2 | 3 | 4 | 5 | 6;
     gap?: "sm" | "md" | "lg";
@@ -53,7 +53,7 @@ type DashboardGridProps = {
     className?: string;
     children?: ReactNode;
 };
-export declare const DashboardGrid: ({ cols, gap, alignItems, minColWidth, className, children }: DashboardGridProps) => import("react").JSX.Element;
+export declare const DashboardGrid: ({ cols, gap, alignItems, minColWidth, className, children }: DashboardGridProps) => import('react').JSX.Element;
 type DashboardSectionProps = {
     title: string;
     subtitle?: string;
@@ -69,12 +69,12 @@ type DashboardSectionProps = {
     className?: string;
     children?: ReactNode;
 };
-export declare const DashboardSection: ({ title, subtitle, action, icon, iconSize, variant, className, children, }: DashboardSectionProps) => import("react").JSX.Element;
+export declare const DashboardSection: ({ title, subtitle, action, icon, iconSize, variant, className, children, }: DashboardSectionProps) => import('react').JSX.Element;
 type DashboardStatBarProps = {
     items: StatBarItem[];
     className?: string;
 };
-export declare const DashboardStatBar: ({ items, className }: DashboardStatBarProps) => import("react").JSX.Element;
+export declare const DashboardStatBar: ({ items, className }: DashboardStatBarProps) => import('react').JSX.Element;
 type DashboardLayoutProps = {
     header?: ReactNode;
     sidebar?: ReactNode;
@@ -82,5 +82,5 @@ type DashboardLayoutProps = {
     className?: string;
     children?: ReactNode;
 };
-export declare const DashboardLayout: ({ header, sidebar, statBar, className, children }: DashboardLayoutProps) => import("react").JSX.Element;
+export declare const DashboardLayout: ({ header, sidebar, statBar, className, children }: DashboardLayoutProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/DashboardPageFrame.d.ts

@@ -58,4 +58,4 @@ export type DashboardPageFrameProps = {
  * botón de actualizar y el filtro de rango de fechas con borrador y validación. Los hijos van dentro de
  * `DashboardLayout`, así que `DashboardBoard` encaja directamente.
  */
-export declare const DashboardPageFrame: ({ title, subtitle, mode, range, onApply, fromLabel, toLabel, dayLabel, compareFieldLabel, validate, error, loading, stale, updatedAt, live, cutoffLabel, onRefresh, refreshLabel, compareLabel, pendingLabel, applyLabel, filterAriaLabel, slowAfterSeconds, className, children, }: DashboardPageFrameProps) => import("react").JSX.Element;
+export declare const DashboardPageFrame: ({ title, subtitle, mode, range, onApply, fromLabel, toLabel, dayLabel, compareFieldLabel, validate, error, loading, stale, updatedAt, live, cutoffLabel, onRefresh, refreshLabel, compareLabel, pendingLabel, applyLabel, filterAriaLabel, slowAfterSeconds, className, children, }: DashboardPageFrameProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/DashboardPlaceholder.d.ts

@@ -15,4 +15,4 @@ export type DashboardPlaceholderProps = {
  * pieza (la de `shape="kpi"` mide lo mismo que `KPICard size="lg"`); en error muestra el mensaje y el botón de
  * reintento de `DashboardCard`.
  */
-export declare const DashboardPlaceholder: ({ title, shape, state, errorMessage, onRetry, className, }: DashboardPlaceholderProps) => import("react").JSX.Element;
+export declare const DashboardPlaceholder: ({ title, shape, state, errorMessage, onRetry, className, }: DashboardPlaceholderProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/DetailPanel.d.ts

@@ -35,4 +35,4 @@ export type DetailPanelProps<Row> = {
  * con su acción, las primeras filas en una `CustomTable` y la exportación completa a Excel. Se abre desde
  * `DrilldownKPICard`, `DrilldownAlertList` o cualquier pieza que llame a `detail.toggle(spec)`.
  */
-export declare const DetailPanel: <Row>({ detail, rowMapper, subtitle, countLabel, previewRows, previewNote, totalNote, emptyMessage, closeLabel, exportLabel, exportFilename, actions, }: DetailPanelProps<Row>) => import("react").JSX.Element | null;
+export declare const DetailPanel: <Row>({ detail, rowMapper, subtitle, countLabel, previewRows, previewNote, totalNote, emptyMessage, closeLabel, exportLabel, exportFilename, actions, }: DetailPanelProps<Row>) => import('react').JSX.Element | null;

package/dist/types/src/components/dashboard/DetailSection.d.ts

@@ -23,4 +23,4 @@ export type DetailSectionProps = {
     /** "md" (por defecto) o "sm" = padding y fuente menores para paneles laterales de 380px. */
     density?: DetailSectionDensity;
 };
-export declare const DetailSection: ({ title, icon, tone, rows, children, className, density }: DetailSectionProps) => import("react").JSX.Element;
+export declare const DetailSection: ({ title, icon, tone, rows, children, className, density }: DetailSectionProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/DetailSidePanel.d.ts

@@ -35,4 +35,4 @@ export type DetailSidePanelProps = {
     width?: number | string;
     className?: string;
 };
-export declare const DetailSidePanel: ({ title, onClose, headerAction, icon, iconSize, heading, badge, rows, align, actions, sectionTitle, items, width, className, }: DetailSidePanelProps) => import("react").JSX.Element;
+export declare const DetailSidePanel: ({ title, onClose, headerAction, icon, iconSize, heading, badge, rows, align, actions, sectionTitle, items, width, className, }: DetailSidePanelProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/DonutBreakdown.d.ts

@@ -31,4 +31,4 @@ export type DonutBreakdownProps = {
  * cómo se reparte un total entre categorías. SVG puro, mismo patrón de arcos que `DonutGauge`,
  * sin dependencia nueva.
  */
-export declare const DonutBreakdown: ({ segments, centerValue, centerLabel, size, strokeWidth, showLegend, legendVariant, formatPct, className, }: DonutBreakdownProps) => import("react").JSX.Element;
+export declare const DonutBreakdown: ({ segments, centerValue, centerLabel, size, strokeWidth, showLegend, legendVariant, formatPct, className, }: DonutBreakdownProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/DonutGauge.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/DonutGauge.d.ts

@@ -14,14 +14,18 @@ export type DonutGaugeProps = {
     showValue?: boolean;
     /** Grosor del anillo. Se acota a un quinto del diámetro para que el centro siempre tenga hueco. */
     strokeWidth?: number;
+    /** Trazo en degradado del primer color al segundo (gana sobre `color` y los umbrales). */
+    gradient?: [string, string];
+    /** Color de la etiqueta bajo la dona (ej. una calificación en verde). */
+    labelColor?: string;
     className?: string;
 };
-export declare const DonutGauge: ({ value, label, sublabel, size, color, thresholds, inverse, showValue, strokeWidth, className, }: DonutGaugeProps) => import("react").JSX.Element;
+export declare const DonutGauge: ({ value, label, sublabel, size, color, thresholds, inverse, showValue, strokeWidth, gradient, labelColor, className, }: DonutGaugeProps) => import('react').JSX.Element;
 export type DonutGaugeRowItem = Omit<DonutGaugeProps, "className">;
 type DonutGaugeRowProps = {
     gauges: DonutGaugeRowItem[];
     size?: DonutGaugeSize;
     className?: string;
 };
-export declare const DonutGaugeRow: ({ gauges, size, className }: DonutGaugeRowProps) => import("react").JSX.Element;
+export declare const DonutGaugeRow: ({ gauges, size, className }: DonutGaugeRowProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/DonutGauge.degradado.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/DrilldownCards.d.ts

@@ -22,7 +22,7 @@ export type DrilldownKPICardProps<Row> = {
     spec?: DetailSpec<Row> | null;
 };
 /** `KPICard` de tablero que abre su detalle en el `DetailPanel` compartido y se marca cuando está abierto. */
-export declare const DrilldownKPICard: <Row>({ label, value, sublabel, icon, accentTone, primary, trend, trendDirection, trendLabel, detail, spec, }: DrilldownKPICardProps<Row>) => import("react").JSX.Element;
+export declare const DrilldownKPICard: <Row>({ label, value, sublabel, icon, accentTone, primary, trend, trendDirection, trendLabel, detail, spec, }: DrilldownKPICardProps<Row>) => import('react').JSX.Element;
 export type DrilldownAlertItem<Row> = {
     label: string;
     /** Valor ya formateado; con `count` en 0 la fila toma `zeroTone`. */
@@ -40,7 +40,7 @@ export type DrilldownAlertListProps<Row> = {
     emptyMessage?: ReactNode;
 };
 /** Lista de pendientes en una tarjeta: cada fila abre su detalle en el `DetailPanel` compartido. */
-export declare const DrilldownAlertList: <Row>({ items, detail, zeroTone, emptyMessage, }: DrilldownAlertListProps<Row>) => import("react").JSX.Element;
+export declare const DrilldownAlertList: <Row>({ items, detail, zeroTone, emptyMessage, }: DrilldownAlertListProps<Row>) => import('react').JSX.Element;
 export type DetailPreviewItem = {
     key: string;
     /** Código o documento, en monoespaciada delante del texto principal. */
@@ -65,4 +65,4 @@ export type DetailPreviewListProps = {
     openLabel?: string;
 };
 /** Las primeras filas de una lista con su total y el acceso al detalle completo. */
-export declare const DetailPreviewList: ({ items, total, totalLabel, unit, previewCount, emptyText, onOpen, openLabel, }: DetailPreviewListProps) => import("react").JSX.Element;
+export declare const DetailPreviewList: ({ items, total, totalLabel, unit, previewCount, emptyText, onOpen, openLabel, }: DetailPreviewListProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/EventLog.d.ts

@@ -10,7 +10,7 @@ type EventLogProps = {
     onViewAll?: () => void;
     className?: string;
 };
-export declare const EventLog: ({ events, title, maxHeight, compact, showTimeline, viewAllLabel, onViewAll, className, }: EventLogProps) => import("react").JSX.Element;
+export declare const EventLog: ({ events, title, maxHeight, compact, showTimeline, viewAllLabel, onViewAll, className, }: EventLogProps) => import('react').JSX.Element;
 type AlertRowListProps = {
     items: AlertRowItem[];
     maxHeight?: number;
@@ -25,7 +25,7 @@ type AlertRowListProps = {
     /** Contenido cuando `items` está vacío. Por defecto "Sin alertas" (acabado actual). */
     emptyMessage?: ReactNode;
 };
-export declare const AlertRowList: ({ items, maxHeight, className, columns, headerLabels, density, emptyMessage, }: AlertRowListProps) => import("react").JSX.Element;
+export declare const AlertRowList: ({ items, maxHeight, className, columns, headerLabels, density, emptyMessage, }: AlertRowListProps) => import('react').JSX.Element;
 export type AlertLaneItem = {
     id?: string;
     title: ReactNode;
@@ -42,5 +42,5 @@ type AlertLaneProps = {
     className?: string;
 };
 /** Alertas como tarjetas horizontales con ícono + CTA (diseño torre/mockup). */
-export declare const AlertLane: ({ items, className }: AlertLaneProps) => import("react").JSX.Element;
+export declare const AlertLane: ({ items, className }: AlertLaneProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/EvidenceFootnote.d.ts

@@ -16,4 +16,4 @@ export type EvidenceFootnoteProps = {
  * fuentes, confianza, última actualización). Pensado como `footer` de `DashboardCard`/`KPICard` o
  * suelto al pie de cualquier tarjeta analítica, para no improvisar este patrón cada vez.
  */
-export declare const EvidenceFootnote: ({ items, confidence, updatedAt, className }: EvidenceFootnoteProps) => import("react").JSX.Element;
+export declare const EvidenceFootnote: ({ items, confidence, updatedAt, className }: EvidenceFootnoteProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/MetricTile.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type MetricTileLayout = "leading" | "centered";
+export type MetricTileProps = {
+    label: ReactNode;
+    value: ReactNode;
+    sublabel?: ReactNode;
+    /** Rótulo pequeño encima de todo (ej. «Estado actual»). */
+    eyebrow?: ReactNode;
+    icon?: ReactNode;
+    /** Color de categoría o de tono: tiñe el fondo, el borde y el ícono. Por defecto `--sf-accent`. */
+    color?: string;
+    /** Color de la cifra. Por defecto, en `leading` el mismo `color`; en `centered`, `--sf-success`. */
+    valueColor?: string;
+    /** `leading`: ícono a la izquierda, cifra arriba y etiqueta debajo. `centered`: ícono arriba, etiqueta y cifra
+     * centradas. */
+    layout?: MetricTileLayout;
+    /** Solo en `centered`: "value-first" pone la cifra antes de la etiqueta (ej. tipos de archivo). */
+    order?: "label-first" | "value-first";
+    /** Con `onClick` la baldosa es un botón (aria-pressed según `selected`). */
+    onClick?: () => void;
+    selected?: boolean;
+    className?: string;
+};
+export declare const MetricTile: ({ label, value, sublabel, eyebrow, icon, color, valueColor, layout, order, onClick, selected, className, }: MetricTileProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/MetricTile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/Seleccion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StageFlow.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StageFlow.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { BadgeVariant } from '../cards/types';
+export type StageFlowEffect = {
+    label: string;
+    variant?: BadgeVariant;
+};
+export type StageFlowItem = {
+    /** Identidad de la etapa, única en `items`. Es la que recibe `onSelect`. */
+    key: string;
+    title: string;
+    /** Rótulo superior (ej. una fecha). */
+    eyebrow?: string;
+    icon?: ReactNode;
+    /** Cifra grande de la etapa (ej. un conteo de un embudo). */
+    value?: string | number;
+    note?: string;
+    /** Efecto de la etapa (ej. "+ Competencia"), pintado con `Badge`. */
+    effect?: StageFlowEffect;
+    /** Color de categoría de la etapa (borde y ícono). Por defecto, la paleta de categorías en orden. */
+    color?: string;
+};
+export type StageFlowProps = {
+    items: StageFlowItem[];
+    /** Etapa seleccionada, controlada por el host. Una clave que no existe no marca nada. */
+    selectedKey?: string;
+    /** Pide seleccionar una etapa (no significa abrirla). Sin él no hay controles. */
+    onSelect?: (key: string) => void;
+    ariaLabel?: string;
+    emptyMessage?: string;
+    /** `card` (por defecto): tarjetas con borde superior del color. `ring`: sin tarjeta; ícono en anillo grande con halo,
+     * rótulo en el color, título centrado y el efecto como pastilla rellena del color (su `variant` no se usa). */
+    variant?: StageFlowVariant;
+    /** Ancho mínimo por etapa, en rem, para ir en fila. Por defecto 10 en `card` y 6.5 en `ring`. */
+    minStageWidth?: number;
+    className?: string;
+};
+export type StageFlowVariant = "card" | "ring";
+/**
+ * Etapas en tarjetas unidas por flechas, en el orden recibido. La flecha es decorativa y solo dice «la siguiente en
+ * este orden»: no es tiempo, causa ni avance (eso es `Stepper`). En fila si el contenedor da al menos 10rem por etapa;
+ * si no, en columna.
+ */
+export declare const StageFlow: ({ items, selectedKey, onSelect, ariaLabel, emptyMessage, variant, minStageWidth, className, }: StageFlowProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/StageFlow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StatCard.d.ts

@@ -17,5 +17,5 @@ type StatCardProps = {
  * icono con halo, valor grande y label. El halo se deriva del acento con
  * color-mix para no pedir dos colores.
  */
-export declare const StatCard: ({ value, label, accent, icon, size, className }: StatCardProps) => import("react").JSX.Element;
+export declare const StatCard: ({ value, label, accent, icon, size, className }: StatCardProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/StateChain.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+export type StateChainItem = {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    /** Color propio del estado. Por defecto, la paleta de categorías en orden. */
+    color?: string;
+    /** Texto bajo el estado (ej. «Desde 12 Mar 2021»). */
+    caption?: ReactNode;
+};
+/** `dot`: círculo relleno con el nombre debajo. `ring`: anillo grande con ícono y nombre dentro. */
+export type StateChainVariant = "dot" | "ring";
+export type StateChainProps = {
+    items: StateChainItem[];
+    /** Estado actual: se marca con `aria-current` y, en `ring`, con una insignia de verificación. */
+    currentKey?: string;
+    variant?: StateChainVariant;
+    /** Con `onSelect` cada estado es un botón (aria-pressed según `selectedKey`). */
+    onSelect?: (key: string) => void;
+    selectedKey?: string;
+    ariaLabel?: string;
+    className?: string;
+};
+/**
+ * Cadena de estados (máquina de estados): cada estado con su color y una flecha hacia el siguiente. No es
+ * un proceso con pasos completados (para eso, `Stepper`).
+ */
+export declare const StateChain: ({ items, currentKey, variant, onSelect, selectedKey, ariaLabel, className, }: StateChainProps) => import('react').JSX.Element;

package/dist/types/src/components/dashboard/StateChain.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/StateChain.vertical.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/Stepper.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/Stepper.d.ts

@@ -8,7 +8,9 @@ type StepperProps = {
     /** Subrayado de acento en el paso activo (wizard CEO / transporte). */
     variant?: StepperVariant;
     onStepClick?: (key: string) => void;
+    /** Nombre accesible de la lista de pasos. Por defecto "Progreso". */
+    ariaLabel?: string;
     className?: string;
 };
-export declare const Stepper: ({ steps, activeKey, orientation, size, variant, onStepClick, className, }: StepperProps) => import("react").JSX.Element;
+export declare const Stepper: ({ steps, activeKey, orientation, size, variant, onStepClick, ariaLabel, className, }: StepperProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/Stepper.icono.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/dashboard/TramoCard.d.ts

@@ -17,5 +17,5 @@ type TramoCardProps = {
  * header gris con icono direccional, título, hora y cupos; cuerpo libre.
  * Estilos en sf-dashboard.css — sin clases arbitrarias de Tailwind.
  */
-export declare const TramoCard: ({ tipo, hora, cupos, apto, aptoLabel, children, }: TramoCardProps) => import("react").JSX.Element;
+export declare const TramoCard: ({ tipo, hora, cupos, apto, aptoLabel, children, }: TramoCardProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/dashboard/index.d.ts

@@ -4,6 +4,10 @@ export { TramoCard } from './TramoCard';
 export type { TramoCardTipo } from './TramoCard';
 export { StatCard } from './StatCard';
 export type { StatCardSize } from './StatCard';
+export { StateChain } from './StateChain';
+export type { StateChainItem, StateChainProps, StateChainVariant } from './StateChain';
+export { MetricTile } from './MetricTile';
+export type { MetricTileLayout, MetricTileProps } from './MetricTile';
 export { Calendar } from './Calendar';
 export { MONTH_NAMES, WEEKDAY_LABELS, toLocalYMD, parseYMD, buildMonthGrid } from './calendarUtils';
 export { DonutGauge, DonutGaugeRow } from './DonutGauge';
@@ -37,3 +41,5 @@ export type { DrilldownKPICardProps, DrilldownAlertItem, DrilldownAlertListProps
 export { DetailSection } from './DetailSection';
 export type { DetailSectionProps, DetailSectionRow, DetailSectionTone, DetailSectionDensity } from './DetailSection';
 export type { StepStatus, StepItem, CalendarBadgeVariant, CalendarDayBadge, DonutGaugeSize, DashboardCardVariant, DashboardCardState, EventStatus, EventItem, AlertRowItem, AlertRowSeverity, AlertRowListHeaderLabels, AlertActionItem, AlertDensity, StatBarItem, } from './types';
+export { StageFlow } from './StageFlow';
+export type { StageFlowEffect, StageFlowItem, StageFlowProps, StageFlowVariant } from './StageFlow';

package/dist/types/src/components/dashboard/types.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 /** "warning" y "opportunity" son aditivos (ej. cadena de decisiones tipo Domino Flow: un paso puede
  * señalar un riesgo detectado o una oportunidad, no solo "hecho/pendiente/error"). */
 export type StepStatus = "completed" | "active" | "pending" | "error" | "warning" | "opportunity";
@@ -9,6 +10,9 @@ export type StepItem = {
     /** Valor o consecuencia de este paso (ej. "EXCEL", "+20 usuarios") — se pinta junto al label cuando
      * viene. Sin `value`, el render es idéntico al de antes. */
     value?: string;
+    /** Ícono decorativo en lugar del número. El estado se mantiene visible (marca en la esquina para completado, error,
+     * advertencia y oportunidad; anillo para el activo) y se agrega al nombre accesible del paso. */
+    icon?: ReactNode;
 };
 export type CalendarBadgeVariant = "primary" | "warning" | "danger" | "success" | "neutral";
 export type CalendarDayBadge = {

package/dist/types/src/components/display/AuditTimeline.cadena.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/AuditTimeline.caracterizacion.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/AuditTimeline.d.ts

@@ -8,13 +8,19 @@ export type AuditTimelineItem = {
     detail?: ReactNode;
     eventType?: AuditEventType;
     icon?: ReactNode;
+    /** Solo en `variant="chain"`: color del paso. Por defecto, la paleta de categorías en orden. */
+    color?: string;
 };
+/** `default`: historial de movimientos (publicado). `chain`: cadena de pasos con ícono grande en círculo de color,
+ * `actor` como título del paso, `action` y `detail` debajo, la hora a la derecha y una flecha de color entre pasos. */
+export type AuditTimelineVariant = "default" | "chain";
 export type AuditTimelineProps = {
     items: AuditTimelineItem[];
     sectionTitle?: string;
     eventCountLabel?: string;
     ariaLabel?: string;
     emptyMessage?: string;
+    variant?: AuditTimelineVariant;
     className?: string;
 };
-export declare const AuditTimeline: ({ items, sectionTitle, eventCountLabel, ariaLabel, emptyMessage, className, }: AuditTimelineProps) => import("react").JSX.Element;
+export declare const AuditTimeline: ({ items, sectionTitle, eventCountLabel, ariaLabel, emptyMessage, variant, className, }: AuditTimelineProps) => import('react').JSX.Element;

package/dist/types/src/components/display/Avatar.d.ts

@@ -12,11 +12,11 @@ export type AvatarProps = {
     className?: string;
     imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt">;
 };
-export declare const Avatar: ({ src, alt, fallback, size, variant, shape, className, imgProps, }: AvatarProps) => import("react").JSX.Element;
+export declare const Avatar: ({ src, alt, fallback, size, variant, shape, className, imgProps, }: AvatarProps) => import('react').JSX.Element;
 export type AvatarGroupProps = {
     children: ReactNode;
     max?: number;
     size?: AvatarSize;
     className?: string;
 };
-export declare const AvatarGroup: ({ children, max, size, className }: AvatarGroupProps) => import("react").JSX.Element;
+export declare const AvatarGroup: ({ children, max, size, className }: AvatarGroupProps) => import('react').JSX.Element;

package/dist/types/src/components/display/Carousel.d.ts

@@ -7,4 +7,4 @@ export type CarouselProps = {
     showArrows?: boolean;
     className?: string;
 };
-export declare const Carousel: ({ items, autoPlay, intervalMs, showDots, showArrows, className, }: CarouselProps) => import("react").JSX.Element | null;
+export declare const Carousel: ({ items, autoPlay, intervalMs, showDots, showArrows, className, }: CarouselProps) => import('react').JSX.Element | null;

package/dist/types/src/components/display/CheckList.d.ts

@@ -0,0 +1,19 @@
+export type CheckListItem = {
+    key: string;
+    label: string;
+    checked: boolean;
+};
+export type CheckListProps = {
+    items: CheckListItem[];
+    /** `inline` (por defecto): en una fila que pasa de línea si no cabe. `stacked`: una debajo de otra. */
+    layout?: "inline" | "stacked";
+    checkedLabel?: string;
+    uncheckedLabel?: string;
+    /** Con `onSelect` cada condición es un botón (aria-pressed según `selectedKey`). */
+    onSelect?: (key: string) => void;
+    selectedKey?: string;
+    ariaLabel?: string;
+    className?: string;
+};
+/** Lista de solo lectura de condiciones cumplidas o pendientes (no es un control de formulario). */
+export declare const CheckList: ({ items, layout, checkedLabel, uncheckedLabel, onSelect, selectedKey, ariaLabel, className, }: CheckListProps) => import('react').JSX.Element;

package/dist/types/src/components/display/CheckList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/display/LiveChip.d.ts

@@ -3,4 +3,4 @@ export type LiveChipProps = {
     pulse?: boolean;
     className?: string;
 };
-export declare const LiveChip: ({ label, pulse, className }: LiveChipProps) => import("react").JSX.Element;
+export declare const LiveChip: ({ label, pulse, className }: LiveChipProps) => import('react').JSX.Element;

package/dist/types/src/components/display/LiveStatusBar.d.ts

@@ -20,4 +20,4 @@ export type LiveStatusBarProps = {
     className?: string;
     ariaLabel?: string;
 };
-export declare const LiveStatusBar: ({ liveLabel, metrics, nextDeparture, className, ariaLabel, }: LiveStatusBarProps) => import("react").JSX.Element;
+export declare const LiveStatusBar: ({ liveLabel, metrics, nextDeparture, className, ariaLabel, }: LiveStatusBarProps) => import('react').JSX.Element;

package/dist/types/src/components/display/MediaGallery.d.ts

@@ -0,0 +1,41 @@
+export type MediaGalleryKind = "image" | "pdf" | "video" | "other";
+export type MediaGalleryItem = {
+    /** Identidad del archivo, única en `items`. El visor la sigue al cambiar `items`. */
+    key: string;
+    kind: MediaGalleryKind;
+    /** Texto alternativo de la imagen (o nombre del archivo si no es imagen). */
+    alt: string;
+    /** Archivo completo. Solo una imagen con `src` se abre en el visor interno. */
+    src?: string;
+    /** Miniatura propia (ej. la primera página de un PDF). Por defecto, el `src` de una imagen. */
+    thumbnailSrc?: string;
+    caption?: string;
+    sublabel?: string;
+};
+export type MediaGalleryProps = {
+    items: MediaGalleryItem[];
+    /** Abre las imágenes con `src` en el visor interno. Por defecto `true`. */
+    viewer?: boolean;
+    /** Abre todo lo que el visor no abre (PDF, vídeo, otros, imágenes sin `src` o todo si `viewer` es `false`). Lo
+     * reemplaza: la galería no hace nada más. Sin él, esos elementos no son accionables. */
+    onItemOpen?: (item: MediaGalleryItem) => void;
+    ariaLabel?: string;
+    viewerTitle?: string;
+    emptyMessage?: string;
+    /** Ancho mínimo de cada miniatura antes de pasar a menos columnas (longitud CSS). Por defecto 8rem. */
+    minThumbnailWidth?: string;
+    className?: string;
+};
+type Devolucion = {
+    clave: string;
+    generacion: number;
+};
+/** Una devolución de foco solo se evalúa con el visor cerrado y si es de la última apertura: una reapertura la descarta. */
+export declare const devolucionVigente: (devolucion: Devolucion | null, generacionVigente: number, visorAbierto: boolean) => devolucion is Devolucion;
+/**
+ * Cuadrícula de miniaturas con visor de imágenes. La galería no descarga ni llama servicios: lo que no abre el visor lo
+ * abre el host con `onItemOpen`. El visor usa `Modal` y su pila (Escape, capas, scroll); el foco lo gestiona la galería.
+ * Contrato completo: doc 184, Anexo B.3.
+ */
+export declare const MediaGallery: ({ items, viewer, onItemOpen, ariaLabel, viewerTitle, emptyMessage, minThumbnailWidth, className, }: MediaGalleryProps) => import('react').JSX.Element;
+export {};

package/dist/types/src/components/display/MediaGallery.test.d.ts

@@ -0,0 +1 @@
+export {};