@sfperusacdev/sf-ui 0.1.33 → 0.1.35

package/dist/theme/sf-tokens.css

@@ -451,6 +451,7 @@
   --sf-chart-tooltip-bg: var(--sf-card-bg);
   --sf-chart-tooltip-border: var(--sf-card-border);
   --sf-chart-tooltip-text: var(--sf-text);
+  --sf-chart-reference: var(--sf-text-subtle);
 
   /* Network map (Fase 13 / 25) */
   --sf-network-panel-bg: rgb(255 255 255 / 0.95);

package/dist/types/src/components/cards/KPICard.d.ts

@@ -1,14 +1,41 @@
 import { ReactNode } from 'react';
+import { ChartDataPoint } from '../charts/types';
 export type KPICardAccentTone = "emerald" | "blue" | "amber" | "red" | "teal" | "slate";
 export type KPICardLayout = "stacked" | "leading-icon";
+export type KPICardVariant = "default" | "filled";
 /** Acabado del tile de icono en `layout="leading-icon"`: "solid" (por defecto) = fondo sólido del tono con
  * glifo blanco; "soft" = fondo tenue del tono (color-mix 14 % sobre --sf-surface) y glifo del color del tono. */
 export type KPICardIconStyle = "solid" | "soft";
+/** Tamaño general de la tarjeta (padding + tipografía del valor). "md" (por defecto) = acabado actual. */
+export type KPICardSize = "sm" | "md" | "lg";
+/** Densidad de los espacios internos entre label/valor/sublabel. "comfortable" (por defecto) = acabado
+ * actual. "compact" reduce los márgenes verticales, para tableros con muchas tarjetas por fila. */
+export type KPICardDensity = "comfortable" | "compact";
+/** Sentido en que se interpreta `trend` para decidir el color (no cambia la flecha, que siempre refleja
+ * el signo real): "up-good" (por defecto, acabado actual) = positivo es verde; "down-good" = negativo es
+ * verde (ej. "tiempo de atención", "incidentes"); "neutral" = siempre color neutro, sin connotación. */
+export type KPICardTrendDirection = "up-good" | "down-good" | "neutral";
+export type KPICardValueFormat = "number" | "currency" | "percent";
+export type KPICardFormatOptions = {
+    /** Por defecto "es-PE". */
+    locale?: string;
+    /** Solo aplica a `valueFormat="currency"`. Por defecto "PEN". */
+    currency?: string;
+    /** Máximo de decimales. Por defecto 0. */
+    decimals?: number;
+    /** Notación compacta para valores grandes (1.2K, 3.4M). Por defecto `false`. */
+    compact?: boolean;
+};
 export type KPICardProgress = {
     value: number;
     max: number;
     label?: string;
 };
+export type KPICardSparkline = {
+    data: ChartDataPoint[];
+    dataKey: string;
+    color?: string;
+};
 export type KPICardProps = {
     label: string;
     value: string | number;
@@ -17,11 +44,27 @@ export type KPICardProps = {
     iconClassName?: string;
     trend?: number;
     trendLabel?: string;
+    /** Ver `KPICardTrendDirection`. Por defecto "up-good" (acabado actual). */
+    trendDirection?: KPICardTrendDirection;
     accentTone?: KPICardAccentTone;
     progress?: KPICardProgress;
+    /** Formato del `value` cuando es numérico. Puede ser uno de los presets o una función propia
+     * `(value: number) => string`. Si `value` es un string, se ignora (se muestra tal cual, como hoy). */
+    valueFormat?: KPICardValueFormat | ((value: number) => string);
+    formatOptions?: KPICardFormatOptions;
+    /** Minigráfico opcional debajo del valor (reutiliza `Sparkline`). Se ignora si hay `progress`
+     * (ambos compiten por el mismo espacio; `progress` tiene prioridad porque ya existía). */
+    sparkline?: KPICardSparkline;
     /** Disposición visual. "stacked" (por defecto) reproduce el acabado actual; "leading-icon" pone el icono a la
      * izquierda en un tile de color sólido con label/valor en columna, como en el mockup de Torre de control. */
     layout?: KPICardLayout;
+    /** "default" (por defecto) = tarjeta blanca normal; "filled" = fondo sólido `--sf-primary` con texto
+     * blanco (tarjeta destacada, ej. KPI principal del tablero). Ignora `accentBar`/`accentTone`. */
+    variant?: KPICardVariant;
+    /** Tamaño de la tarjeta. Por defecto "md" (acabado actual). */
+    size?: KPICardSize;
+    /** Densidad de los espacios internos. Por defecto "comfortable" (acabado actual). */
+    density?: KPICardDensity;
     /** Controla el borde superior de 3px (.sf-kpi-card). Por defecto true en "stacked" (como hoy) y false en
      * "leading-icon" (el mockup no lo tiene). */
     accentBar?: boolean;
@@ -34,7 +77,7 @@ export type KPICardProps = {
     className?: string;
     onClick?: () => void;
 };
-export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, layout, accentBar, iconStyle, labelWrap, className, onClick, }: KPICardProps) => import("react").JSX.Element;
+export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, trendDirection, accentTone, progress, valueFormat, formatOptions, sparkline, layout, variant, size, density, accentBar, iconStyle, labelWrap, className, onClick, }: KPICardProps) => import("react").JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;

package/dist/types/src/components/cards/MetricBar.test.d.ts

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

package/dist/types/src/components/cards/SplitBar.d.ts

@@ -0,0 +1,17 @@
+import { SplitBarSegment } from './types';
+export type SplitBarSize = "sm" | "md";
+type SplitBarProps = {
+    /** 2 o más segmentos: la barra se reparte proporcional a `value` entre todos. Con exactamente 2
+     * (el caso de siempre, ej. sexo M/F), el render es idéntico al de antes. */
+    segments: SplitBarSegment[];
+    /** Grosor de la barra. "md" (por defecto) = 1.5rem, como KPI destacado. "sm" = 0.625rem, para
+     * usos más compactos (ej. dentro de una fila junto a otros elementos). */
+    size?: SplitBarSize;
+    className?: string;
+};
+/**
+ * Una sola barra dividida en 2+ segmentos proporcionales (ej. sexo M/F, o una distribución con más
+ * categorías), con labels debajo. Distinto de `MetricBarList`, que apila una barra por fila.
+ */
+export declare const SplitBar: ({ segments, size, className }: SplitBarProps) => import("react").JSX.Element;
+export {};

package/dist/types/src/components/cards/SplitBar.test.d.ts

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

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

@@ -2,7 +2,9 @@ export { Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { badgeClassName, badgeDotClassName } from './badgeClassName';
 export { KPICard, KPIGrid } from './KPICard';
-export type { KPICardAccentTone, KPICardProgress, KPICardLayout, KPICardIconStyle, KPICardProps } from './KPICard';
+export type { KPICardAccentTone, KPICardProgress, KPICardLayout, KPICardVariant, KPICardIconStyle, KPICardSize, KPICardDensity, KPICardTrendDirection, KPICardValueFormat, KPICardFormatOptions, KPICardSparkline, KPICardProps, } from './KPICard';
+export { SplitBar } from './SplitBar';
+export type { SplitBarSize } from './SplitBar';
 export { QuickActionTile, QuickActionGrid } from './QuickActionTile';
 export type { QuickActionTileProps, QuickActionGridProps } from './QuickActionTile';
 export { MetricBarRow, MetricBarList } from './MetricBar';
@@ -12,4 +14,4 @@ export { RecommendationCard } from './RecommendationCard';
 export type { RecommendationCardProps } from './RecommendationCard';
 export { ModuleCard, ModuleCardGrid } from './ModuleCard';
 export type { ModuleCardProps } from './ModuleCard';
-export type { BadgeVariant, BadgeSize, BadgeShape, MetricBarTone, MetricBarItem, EntityCardStatus, EntityCardVariant, RecommendationPriority, RecommendationImpact, ModuleCardVariant, ModuleCardDensity, } from './types';
+export type { BadgeVariant, BadgeSize, BadgeShape, MetricBarTone, MetricBarThresholds, MetricBarItem, SplitBarTone, SplitBarSegment, EntityCardStatus, EntityCardVariant, RecommendationPriority, RecommendationImpact, ModuleCardVariant, ModuleCardDensity, } from './types';

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

@@ -2,11 +2,47 @@ export type BadgeVariant = "neutral" | "primary" | "success" | "warning" | "dang
 export type BadgeSize = "sm" | "md";
 export type BadgeShape = "pill" | "circle";
 export type MetricBarTone = "slate" | "emerald" | "amber" | "red" | "blue";
+export type MetricBarThresholds = {
+    /** A partir de este valor (inclusive) la barra pasa a tono ámbar (o esmeralda si `inverse`). */
+    warning: number;
+    /** A partir de este valor (inclusive) la barra pasa a tono rojo (o esmeralda si `inverse`). */
+    critical: number;
+};
 export type MetricBarItem = {
     label: string;
+    /** Sin `max`: valor ya expresado 0-100, como hoy (compatibilidad total con el uso actual).
+     * Con `max`: valor crudo en la escala de `max` — el ancho de la barra se calcula como `value/max*100`. */
     value: number;
+    /** Escala del valor. Si se omite, `value` se interpreta como ya siendo 0-100 (comportamiento actual,
+     * sin cambios). Si se define, habilita mostrar valor/máximo reales y calcular `target` en la misma escala. */
+    max?: number;
+    /** Meta independiente de `max` (ej. objetivo del mes vs. el máximo posible del período). Se dibuja como
+     * un marcador vertical sobre la barra en `target/(max ?? 100)`. No participa en el ancho de la barra. */
+    target?: number;
+    /** Muestra el marcador de `target`. Por defecto `true` si `target` está definido. Permite pasar `target`
+     * solo para cálculos propios (ej. en `valueFormat`) sin dibujar el marcador. */
+    showTargetMarker?: boolean;
     tone?: MetricBarTone;
+    /** Colorea automáticamente la barra según el PORCENTAJE resultante (0-100, tras aplicar `max` si lo
+     * hay) comparado con estos umbrales — igual criterio que `DonutGauge`. Se ignora si `tone` viene
+     * explícito (`tone` siempre gana). */
+    thresholds?: MetricBarThresholds;
     inverse?: boolean;
+    /** Unidad que se anexa al texto autogenerado del lado derecho (ej. "kg", "pts"). No aplica si
+     * `valueLabel` viene explícito — ese texto ya es responsabilidad de quien lo arma. */
+    unit?: string;
+    /** Formatea el texto del lado derecho a partir del valor crudo y `max`. Se ignora si `valueLabel`
+     * viene explícito (`valueLabel` siempre gana, mismo criterio que hoy). */
+    valueFormat?: (value: number, max?: number) => string;
+    /** Texto a mostrar a la derecha en vez del autogenerado (ej. un conteo real: "442"). NUNCA es lo que
+     * dimensiona la barra — eso siempre es `value` (crudo si hay `max`, 0-100 si no lo hay). */
+    valueLabel?: string;
+};
+export type SplitBarTone = MetricBarTone;
+export type SplitBarSegment = {
+    label: string;
+    value: number;
+    tone?: SplitBarTone;
 };
 export type EntityCardStatus = "default" | "featured" | "warning";
 export type EntityCardVariant = "entity" | "group";

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

@@ -1,3 +1,3 @@
 import { ChartProps } from './types';
 export type { ChartProps } from './types';
-export declare const Chart: ({ type, data, xKey, series, height, ariaLabel, emptyMessage, className, showGrid, showTooltip, showLegend, }: ChartProps) => import("react").JSX.Element;
+export declare const Chart: ({ type, data, xKey, series, height, ariaLabel, emptyMessage, className, showGrid, showTooltip, showLegend, orientation, stacking, unit, yDomain, xAxisFormat, yAxisFormat, tooltipFormat, valueLabelFormat, showValueLabels, referenceLines, onDataPointClick, }: ChartProps) => import("react").JSX.Element;

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

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

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

@@ -0,0 +1,7 @@
+import { DeviationBandProps } from './types';
+/**
+ * Valor puntual contra su rango esperado (promedio ± margen), con marcador de desviación — ej.
+ * "producción -27% respecto al promedio del lote". Distinto de `MetricBar` (que dimensiona 0-100
+ * contra un `max`, no contra un promedio) y de `Chart` (que es una serie, no un punto).
+ */
+export declare const DeviationBand: ({ value, average, min, max, unit, label, valueFormat, direction, className, }: DeviationBandProps) => import("react").JSX.Element;

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

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

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

@@ -0,0 +1,12 @@
+import { DiagnosticRadarProps } from './types';
+export type { DiagnosticRadarProps, RadarMetric } from './types';
+/**
+ * Radar/diagnóstico multi-eje: representa varias métricas reales (0-`max`) sobre un mismo gráfico
+ * polar, ej. Digitalización/Integración/Analítica/Automatización/Calidad de datos. Cada eje viene de
+ * `data` — no hay nada hardcodeado ni puramente decorativo, el polígono se recalcula solo con las
+ * métricas reales.
+ *
+ * Reutiliza los mismos tokens/formatters que `Chart` (`chartAxisTick`, `chartTooltipStyle`,
+ * `buildDefaultFormatter`) para que se vea como parte del mismo sistema, no como un componente aparte.
+ */
+export declare const DiagnosticRadar: ({ data, max, color, height, ariaLabel, emptyMessage, className, showTooltip, showLegend, showValues, valueFormat, }: DiagnosticRadarProps) => import("react").JSX.Element;

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

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

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

@@ -1,2 +1,2 @@
 import { SparklineProps } from './types';
-export declare const Sparkline: ({ data, dataKey, height, width, color, ariaLabel, emptyMessage, className, }: SparklineProps) => import("react").JSX.Element;
+export declare const Sparkline: ({ data, dataKey, type, height, width, color, ariaLabel, emptyMessage, className, }: SparklineProps) => import("react").JSX.Element;

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

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

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

@@ -1,4 +1,5 @@
 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)"];
 export declare const resolveSeriesColor: (series: {
     color?: string;
@@ -12,3 +13,18 @@ export declare const chartLegendStyle: {
     fontSize: string;
     color: string;
 };
+export declare const chartValueLabelStyle: CSSProperties;
+/** Formatter por defecto cuando no se pasa uno explícito: número en es-PE + unidad opcional. */
+export declare const buildDefaultFormatter: (unit?: string) => ChartValueFormatter;
+/** Prefijo interno para guardar el valor real de una serie cuando el dato visible se normalizó
+ * (ej. `stacking="stacked-100"`). No es parte del contrato público de `ChartDataPoint`. */
+export declare const RAW_VALUE_PREFIX = "__sfRaw_";
+export declare const rawValueKey: (key: string) => string;
+/**
+ * Normaliza cada punto de `data` para que la suma de `series` dé 100, conservando el valor real bajo
+ * `rawValueKey(key)` (usado por el tooltip). NO muta `data`: retorna un array nuevo.
+ * Total 0 o ausente en un punto → todas las series de ese punto quedan en 0 (no se dibuja nada, no NaN).
+ * Valores negativos se tratan como 0 para el cálculo del total (una serie negativa no "resta" espacio
+ * a las demás en una barra apilada al 100%, que no tiene forma de representar eso).
+ */
+export declare const toStacked100Data: (data: ChartDataPoint[], series: ChartSeries[]) => ChartDataPoint[];

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

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

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

@@ -1,5 +1,7 @@
 export { Chart } from './Chart';
 export type { ChartProps } from './Chart';
 export { Sparkline } from './Sparkline';
-export { CHART_SERIES_COLORS, resolveSeriesColor } from './chartUtils';
-export type { BaseChartProps, ChartDataPoint, ChartSeries, ChartType, SparklineProps } from './types';
+export { DiagnosticRadar } from './DiagnosticRadar';
+export { DeviationBand } from './DeviationBand';
+export { CHART_SERIES_COLORS, 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

@@ -1,10 +1,37 @@
 export type ChartType = "bar" | "line" | "area";
+/** Solo aplica a `type="bar"`. "vertical" (por defecto) = barras verticales de siempre.
+ * "horizontal" = barras horizontales (categoría en el eje Y, valor en el eje X) — útil para
+ * rankings con etiquetas largas. Se ignora en "line"/"area". */
+export type ChartOrientation = "vertical" | "horizontal";
+/** Solo aplica a `type="bar"`/`"area"` (Line no se apila, recharts no lo soporta con sentido).
+ * "none" (por defecto) = series lado a lado si hay más de una (comportamiento actual, sin cambios).
+ * "stacked" = todas las series se apilan por su valor real, una sobre otra.
+ * "stacked-100" = igual que "stacked" pero normalizado a 100% por punto — el dato original
+ * (`data`) NUNCA se modifica; el tooltip sigue mostrando el valor real vía `tooltipFormat`. */
+export type ChartStacking = "none" | "stacked" | "stacked-100";
 export type ChartSeries = {
     key: string;
     label?: string;
     color?: string;
+    /** 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;
 };
 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
+ * serie/eje que se está formateando, por si el formato depende de cuál es (ej. unidades distintas). */
+export type ChartValueFormatter = (value: number, key?: string) => string;
+export type ChartReferenceLine = {
+    /** Valor en el dominio del eje que recibe la línea (ver `axis`). */
+    value: number;
+    label?: string;
+    color?: string;
+    /** Eje sobre el que se traza: "y" (por defecto) = línea horizontal (típico para una meta);
+     * "x" = línea vertical. Con `orientation="horizontal"` los ejes están intercambiados en pantalla,
+     * pero `axis` sigue refiriéndose al eje lógico (y = valor, x = categoría). */
+    axis?: "x" | "y";
+    strokeDasharray?: string;
+};
 export type BaseChartProps = {
     data: ChartDataPoint[];
     xKey: string;
@@ -16,13 +43,81 @@ export type BaseChartProps = {
     showGrid?: boolean;
     showTooltip?: boolean;
     showLegend?: boolean;
+    /** Ver `ChartOrientation`. Por defecto "vertical". */
+    orientation?: ChartOrientation;
+    /** Ver `ChartStacking`. Por defecto "none" (comportamiento actual). */
+    stacking?: ChartStacking;
+    /** Unidad a anexar en los formatos por defecto de eje/tooltip cuando no se pasa un formatter propio
+     * (ej. "kg", "%", "S/"). No afecta si `xAxisFormat`/`yAxisFormat`/`tooltipFormat` ya están definidos. */
+    unit?: string;
+    /** Dominio del eje de valores. Por defecto Recharts calcula `[0, "auto"]`. */
+    yDomain?: [number | "auto" | "dataMin" | "dataMax", number | "auto" | "dataMin" | "dataMax"];
+    xAxisFormat?: ChartValueFormatter;
+    yAxisFormat?: ChartValueFormatter;
+    /** Formatea el valor mostrado en el tooltip. En `stacking="stacked-100"` recibe el valor ORIGINAL
+     * (no el porcentaje normalizado) — el porcentaje es solo un artificio visual de la barra. */
+    tooltipFormat?: ChartValueFormatter;
+    /** Formatea las etiquetas de valor sobre cada barra/punto cuando `showValueLabels` está activo. */
+    valueLabelFormat?: ChartValueFormatter;
+    /** Muestra el valor de cada punto/barra como etiqueta encima. Por defecto `false`. */
+    showValueLabels?: boolean;
+    /** Líneas de referencia (ej. una meta) dibujadas sobre el chart. */
+    referenceLines?: ChartReferenceLine[];
+    /** Se dispara al hacer clic sobre el área del chart con el punto de datos más cercano bajo el cursor
+     * (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;
 };
 export type ChartProps = BaseChartProps & {
     type: ChartType;
 };
+export type RadarMetric = {
+    key: string;
+    label: string;
+    value: number;
+};
+export type DiagnosticRadarProps = {
+    /** Un punto por eje del radar (ej. Digitalización, Integración, Analítica...). Mínimo 3 para que el
+     * radar tenga forma — con 1-2 puntos Recharts igual renderiza, pero no se lee como un radar. */
+    data: RadarMetric[];
+    /** Máximo compartido por TODOS los ejes (Recharts exige un solo dominio radial). Por defecto 100 —
+     * pensado para métricas ya expresadas en porcentaje, como las del resto de la librería (`MetricBar`,
+     * `DonutGauge`). Si tus métricas usan otra escala, pásalas ya normalizadas o ajusta `max`. */
+    max?: number;
+    color?: string;
+    height?: number;
+    ariaLabel?: string;
+    emptyMessage?: string;
+    className?: string;
+    showTooltip?: boolean;
+    showLegend?: boolean;
+    /** Muestra el valor numérico junto a cada eje (además del tooltip). Por defecto `false`. */
+    showValues?: boolean;
+    valueFormat?: ChartValueFormatter;
+};
+export type DeviationBandDirection = "up-good" | "down-good" | "neutral";
+export type DeviationBandProps = {
+    value: number;
+    average: number;
+    /** Extremos del track. Si se omiten, se calculan a partir de `value`/`average` con margen — para el
+     * caso típico ("¿cuánto se desvía este valor de lo normal?") no hace falta pasarlos. */
+    min?: number;
+    max?: number;
+    unit?: string;
+    label?: string;
+    valueFormat?: ChartValueFormatter;
+    /** Igual criterio que `KPICardTrendDirection`: cómo interpretar el signo de la desviación para
+     * colorearla. Por defecto "down-good" (bajar respecto al promedio es la lectura más común: costo,
+     * incidencias, tiempo de atención). */
+    direction?: DeviationBandDirection;
+    className?: string;
+};
 export type SparklineProps = {
     data: ChartDataPoint[];
     dataKey: string;
+    /** "line" (por defecto, acabado actual) o "bar" — mini gráfico de barras en vez de línea, para el
+     * mismo caso de uso (una tendencia diminuta dentro de una KPICard u otra pieza compacta). */
+    type?: "line" | "bar";
     height?: number;
     width?: number | string;
     color?: string;

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { AlertActionItem, AlertDensity, EventStatus } from './types';
+export type AlertSummaryRowItem = {
+    label: string;
+    description?: string;
+    value: ReactNode;
+    /** Fondo/texto tintado según severidad. "default" = neutro (sin tinte). */
+    tone?: EventStatus;
+    /** Si viene, la fila es clickeable (cursor pointer, hover) — ej. drill-down a una lista filtrada.
+     * Se ignora si `actions` viene con elementos (ver `AlertActionItem`). */
+    onClick?: () => void;
+    /** Acciones explícitas de la fila (ej. "Ver lista", "Descartar"), renderizadas como botones propios.
+     * Cuando vienen, la fila entera deja de ser `role="button"` (evita botón-dentro-de-botón). */
+    actions?: AlertActionItem[];
+};
+type AlertSummaryListProps = {
+    items: AlertSummaryRowItem[];
+    className?: string;
+    /** Ver `AlertDensity`. Por defecto "comfortable" (acabado actual). */
+    density?: AlertDensity;
+    /** Contenido cuando `items` está vacío. Por defecto "Sin alertas". */
+    emptyMessage?: ReactNode;
+};
+/**
+ * Lista de filas de ancho completo con fondo tintado por severidad y un valor grande
+ * a la derecha (ej. "Alertas y pendientes de regularizar" del tablero de Contratos).
+ * 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 }: AlertSummaryListProps) => import("react").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,24 @@
+export type ComparisonRow = {
+    key: string;
+    label: string;
+    plan: number;
+    real: number;
+    unit?: string;
+    /** Igual criterio que `DeviationBandDirection`: cómo interpretar el signo de la desviación para
+     * colorearla. Por defecto "up-good" (superar el plan es bueno — típico de ventas/producción). */
+    direction?: "up-good" | "down-good" | "neutral";
+    valueFormat?: (value: number) => string;
+};
+export type ComparisonTableProps = {
+    rows: ComparisonRow[];
+    planLabel?: string;
+    realLabel?: string;
+    className?: string;
+};
+/**
+ * Tabla Plan vs. Real con la desviación calculada por fila — cada fila muestra plan, real y el delta
+ * (absoluto y %) coloreado según si esa desviación es buena o mala para esa métrica en particular.
+ * 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;

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

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

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

@@ -1,27 +1,54 @@
 import { ReactNode } from 'react';
-import { DashboardCardVariant, StatBarItem } from './types';
+import { DashboardCardState, DashboardCardVariant, StatBarItem } from './types';
 export type DashboardCardProps = {
     title?: string;
     subtitle?: string;
     icon?: ReactNode;
     headerAction?: ReactNode;
     variant?: DashboardCardVariant;
-    span?: 1 | 2 | 3 | 4;
+    span?: 1 | 2 | 3 | 4 | 5 | 6;
     padding?: "sm" | "md" | "lg" | "none";
     /** Tamaño de la cabecera. "sm" (por defecto) reproduce el acabado actual; "md" usa el título 15px, icono en
      * círculo de 28px y padding más generoso del mockup de Torre de control. */
     headerSize?: "sm" | "md";
+    /** Permite que la cabecera pase a 2 líneas (título arriba, subtítulo/acción abajo) cuando no entran en
+     * una sola fila, en vez de recortar con `truncate` (acabado actual, `false` por defecto). Útil con
+     * títulos largos + `headerAction` ancho (ej. un selector de rango de fechas). */
+    headerWrap?: boolean;
+    /** Contenido opcional bajo el cuerpo, separado por un borde — ej. un resumen o un link "ver todo". */
+    footer?: ReactNode;
+    /** Estado del cuerpo. "idle" (por defecto) = `children` tal cual. Ver `DashboardCardState`. */
+    state?: DashboardCardState;
+    loadingMessage?: ReactNode;
+    errorMessage?: ReactNode;
+    emptyMessage?: ReactNode;
+    /** Si viene junto a `state="error"`, el estado de error muestra un botón para reintentar. */
+    onRetry?: () => void;
+    retryLabel?: string;
+    /** Alto mínimo del cuerpo (px si es número). Útil para que los estados de carga/error/vacío no
+     * "colapsen" la tarjeta a una línea dentro de un `DashboardGrid` con `alignItems="start"`. */
+    minHeight?: number | string;
+    /** Comportamiento de desbordamiento del cuerpo. "visible" (por defecto) = acabado actual (sin regla,
+     * el contenido puede desbordar). "auto" agrega scroll; "hidden" recorta. */
+    bodyOverflow?: "visible" | "auto" | "hidden";
     className?: string;
     children?: ReactNode;
 };
-export declare const DashboardCard: ({ title, subtitle, icon, headerAction, variant, span, padding, headerSize, className, children, }: DashboardCardProps) => import("react").JSX.Element;
+export declare const DashboardCard: ({ title, subtitle, icon, headerAction, variant, span, padding, headerSize, headerWrap, 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";
+    /** "stretch" (por defecto, acabado actual) estira todas las tarjetas de la fila a la altura de la
+     * más alta. "start" deja que cada tarjeta ocupe solo el alto de su propio contenido — útil cuando
+     * las tarjetas de una fila tienen cantidades de contenido muy distintas (ej. Sexo vs Edad). */
+    alignItems?: "stretch" | "start";
+    /** Si se define, reemplaza `cols` por una grilla `auto-fit` con ancho mínimo por tarjeta (ej. "16rem")
+     * — cada tarjeta ocupa lo que necesite y la fila ajusta cuántas entran, sin puntos de quiebre fijos. */
+    minColWidth?: string;
     className?: string;
     children?: ReactNode;
 };
-export declare const DashboardGrid: ({ cols, gap, 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;

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

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

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export type DetailSectionTone = "default" | "info" | "danger" | "warning" | "success";
+export type DetailSectionDensity = "sm" | "md";
+export type DetailSectionRow = {
+    label: string;
+    value: ReactNode;
+    /** Línea de 12px bajo el valor — p.ej. "Vencido hace 72 días". El color lo decide el consumidor en el nodo. */
+    hint?: ReactNode;
+};
+export type DetailSectionProps = {
+    /** Título de la cabecera, 14px/600 — p.ej. "Carnet del conductor". */
+    title: string;
+    /** Icono a la izquierda del título (inline-flex). */
+    icon?: ReactNode;
+    /** "default": cabecera `--sf-surface-alt`. Los demás: fondo tenue del tono e icono/título en su color
+     * (mockup 0402 Conductores: "Carnet del conductor" en `danger` cuando está vencido). */
+    tone?: DetailSectionTone;
+    /** Filas label/valor separadas por línea `--sf-border`; el valor va alineado a la izquierda de su columna. */
+    rows?: DetailSectionRow[];
+    /** Contenido libre bajo las filas. */
+    children?: ReactNode;
+    className?: string;
+    /** "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;

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

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

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { AlertRowItem, AlertRowListHeaderLabels, EventItem, EventStatus } from './types';
+import { AlertDensity, AlertRowItem, AlertRowListHeaderLabels, EventItem, EventStatus } from './types';
 type EventLogProps = {
     events: EventItem[];
     title?: string;
@@ -20,8 +20,12 @@ type AlertRowListProps = {
     columns?: boolean;
     /** Textos de la cabecera en modo `columns`. Por defecto en español. */
     headerLabels?: AlertRowListHeaderLabels;
+    /** Ver `AlertDensity`. Por defecto "comfortable" (acabado actual). */
+    density?: AlertDensity;
+    /** Contenido cuando `items` está vacío. Por defecto "Sin alertas" (acabado actual). */
+    emptyMessage?: ReactNode;
 };
-export declare const AlertRowList: ({ items, maxHeight, className, columns, headerLabels }: 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;

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

@@ -0,0 +1,19 @@
+export type EvidenceFootnoteItem = {
+    label: string;
+    value: string;
+};
+export type EvidenceFootnoteProps = {
+    /** Datos de procedencia, ej. `{ label: "Período", value: "14 meses" }`. Se pintan separados por "·". */
+    items: EvidenceFootnoteItem[];
+    /** Nivel de confianza 0-100. Se omite el badge si no se pasa — nunca inventar un número. */
+    confidence?: number;
+    /** Texto de última actualización, ya formateado (ej. "21 sep 2026"). */
+    updatedAt?: string;
+    className?: string;
+};
+/**
+ * Pie de procedencia de datos reutilizable — "¿de dónde salió esto?" (período analizado, registros,
+ * 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;

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

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

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+export type StatCardSize = "sm" | "md" | "lg";
 type StatCardProps = {
     value: ReactNode;
     label: ReactNode;
@@ -6,6 +7,9 @@ type StatCardProps = {
     accent?: string;
     /** icono opcional; se pinta dentro de un halo del color del acento */
     icon?: ReactNode;
+    /** Tamaño de la tarjeta (padding, icono y tipografía del valor). Por defecto "md" — idéntico al
+     * acabado actual, sin cambios visuales para quien no pasa esta prop. */
+    size?: StatCardSize;
     className?: string;
 };
 /**
@@ -13,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, 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/StatCard.test.d.ts

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

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

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