@sfperusacdev/sf-ui 0.2.9 → 0.3.0

package/dist/theme/dark.css

@@ -194,4 +194,17 @@
   --sf-ring-width: 2px;
   --sf-success: #16a34a;
   --sf-warning: #d97706;
+
+  /* Paleta de categorías sobre fondo oscuro: los mismos 10 tonos de sf-tokens.css, aclarados para dar al menos
+   * 3:1 sobre la tarjeta (#1e293b) y sobre la superficie alterna (#0f172a). */
+  --sf-cat-1: #7aa2f0;
+  --sf-cat-2: #ff9248;
+  --sf-cat-3: #9cc25e;
+  --sf-cat-4: #ec7a88;
+  --sf-cat-5: #4fc4ba;
+  --sf-cat-6: #e0ba4a;
+  --sf-cat-7: #b197e8;
+  --sf-cat-8: #d3966a;
+  --sf-cat-9: #56cdeb;
+  --sf-cat-10: #e58bc4;
 }

package/dist/theme/sf-tokens.css

@@ -457,6 +457,24 @@
   --sf-chart-tooltip-text: var(--sf-text);
   --sf-chart-reference: var(--sf-text-subtle);
 
+  /* Paleta de categorías: 10 colores para distinguir cosas que NO son un estado (dominios, etapas, dimensiones,
+   * series). Los --sf-chart-* son alias de los colores de estado y pintar una categoría con ellos comunica
+   * "éxito" o "peligro" donde no lo hay. El orden alterna tonos para que dos vecinas no se parezcan; cada color
+   * da al menos 3:1 sobre la tarjeta (paletaCategorias.test.ts lo mide). dark.css trae su versión clara. */
+  --sf-cat-1: #1f4e79;
+  --sf-cat-2: #ee6209;
+  --sf-cat-3: #668b37;
+  --sf-cat-4: #b23a48;
+  --sf-cat-5: #1f7f78;
+  --sf-cat-6: #b08a1e;
+  --sf-cat-7: #6d4c9f;
+  --sf-cat-8: #9a5b2b;
+  --sf-cat-9: #2e86c1;
+  --sf-cat-10: #b8478f;
+
+  /* Acento de marca SF Perú (naranja), disponible en cualquier tema sin cambiar --sf-accent. */
+  --sf-brand-accent: #f96810;
+
   /* Network map (Fase 13 / 25) */
   --sf-network-panel-bg: rgb(255 255 255 / 0.95);
   --sf-network-marker-label-text: var(--sf-btn-primary-text);

package/dist/types/src/components/advanced-inputs/CodeEditor.d.ts

@@ -16,5 +16,5 @@ type CodeEditorProps<TFormValues extends FieldValues> = {
     onChange?: (value: string) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const CodeEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, language, highlighted, readOnly, disabled, rows, small, className, onChange, onRefresh, }: CodeEditorProps<TFormValues>) => import("react").JSX.Element;
+export declare const CodeEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, language, highlighted, readOnly, disabled, rows, small, className, onChange, onRefresh, }: CodeEditorProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/MapGeocoderBar.d.ts

@@ -5,4 +5,4 @@ export type MapGeocoderBarProps = {
     className?: string;
     disabled?: boolean;
 };
-export declare const MapGeocoderBar: ({ onSelect, placeholder, className, disabled, }: MapGeocoderBarProps) => import("react").JSX.Element;
+export declare const MapGeocoderBar: ({ onSelect, placeholder, className, disabled, }: MapGeocoderBarProps) => import('react').JSX.Element;

package/dist/types/src/components/advanced-inputs/MapPicker.d.ts

@@ -18,5 +18,5 @@ type MapPickerProps<TFormValues extends FieldValues> = {
  * @deprecated Use `LocationPicker` or `SmartMapInput kind="coordinates"` from `components/maps/forms`.
  * This component remains for compatibility during migration.
  */
-export declare const MapPicker: <TFormValues extends FieldValues>({ form, name, label, info, required, zoom, readOnly, disabled, showGeocoder, className, onChange, onRefresh, }: MapPickerProps<TFormValues>) => import("react").JSX.Element;
+export declare const MapPicker: <TFormValues extends FieldValues>({ form, name, label, info, required, zoom, readOnly, disabled, showGeocoder, className, onChange, onRefresh, }: MapPickerProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/MapPickerMap.d.ts

@@ -6,5 +6,5 @@ type MapPickerMapProps = {
     showGeocoder?: boolean;
     onPick: (lat: string, lng: string) => void;
 };
-export declare const MapPickerMap: ({ lat, lng, zoom, readOnly, showGeocoder, onPick, }: MapPickerMapProps) => import("react").JSX.Element;
+export declare const MapPickerMap: ({ lat, lng, zoom, readOnly, showGeocoder, onPick, }: MapPickerMapProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/PhotoInput.d.ts

@@ -14,5 +14,5 @@ type PhotoInputProps<TFormValues extends FieldValues> = {
     onChange?: (file: File | null) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const PhotoInput: <TFormValues extends FieldValues>({ form, name, label, info, required, capture, maxSizeMb, readOnly, disabled, small, className, onChange, onRefresh, }: PhotoInputProps<TFormValues>) => import("react").JSX.Element;
+export declare const PhotoInput: <TFormValues extends FieldValues>({ form, name, label, info, required, capture, maxSizeMb, readOnly, disabled, small, className, onChange, onRefresh, }: PhotoInputProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/RichTextEditor.d.ts

@@ -12,5 +12,5 @@ type RichTextEditorProps<TFormValues extends FieldValues> = {
     onChange?: (html: string) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const RichTextEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, readOnly, disabled, height, className, onChange, onRefresh, }: RichTextEditorProps<TFormValues>) => import("react").JSX.Element;
+export declare const RichTextEditor: <TFormValues extends FieldValues>({ form, name, label, info, required, readOnly, disabled, height, className, onChange, onRefresh, }: RichTextEditorProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/advanced-inputs/SignaturePad.d.ts

@@ -13,5 +13,5 @@ type SignaturePadProps<TFormValues extends FieldValues> = {
     onChange?: (dataUrl: string) => void;
     onRefresh?: () => Promise<void> | void;
 };
-export declare const SignaturePad: <TFormValues extends FieldValues>({ form, name, label, info, required, width, height, readOnly, disabled, className, onChange, onRefresh, }: SignaturePadProps<TFormValues>) => import("react").JSX.Element;
+export declare const SignaturePad: <TFormValues extends FieldValues>({ form, name, label, info, required, width, height, readOnly, disabled, className, onChange, onRefresh, }: SignaturePadProps<TFormValues>) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/ActionButton.d.ts

@@ -7,5 +7,5 @@ type ActionButtonProps = {
     icon?: ReactNode;
     variant?: ActionButtonVariant;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
-export declare const ActionButton: ({ children, loading, disabled, icon, variant, className, type, ...rest }: ActionButtonProps) => import("react").JSX.Element;
+export declare const ActionButton: ({ children, loading, disabled, icon, variant, className, type, ...rest }: ActionButtonProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/Button.d.ts

@@ -8,5 +8,5 @@ type ButtonProps = {
     iconPosition?: "start" | "end";
     children: ReactNode;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
-export declare const Button: ({ variant, size, loading, disabled, icon, iconPosition, children, className, type, ...rest }: ButtonProps) => import("react").JSX.Element;
+export declare const Button: ({ variant, size, loading, disabled, icon, iconPosition, children, className, type, ...rest }: ButtonProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/ButtonGroup.d.ts

@@ -3,5 +3,5 @@ type ButtonGroupProps = {
     children: ReactNode;
     className?: string;
 };
-export declare const ButtonGroup: ({ children, className }: ButtonGroupProps) => import("react").JSX.Element;
+export declare const ButtonGroup: ({ children, className }: ButtonGroupProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/FormActions.d.ts

@@ -8,5 +8,5 @@ type FormActionsProps = {
     hideSave?: boolean;
     className?: string;
 };
-export declare const FormActions: import('react').MemoExoticComponent<({ cancelLabel, saveLabel, onCancel, onSave, cancelLoading, saveLoading, hideSave, className, }: FormActionsProps) => import("react").JSX.Element>;
+export declare const FormActions: import('react').MemoExoticComponent<({ cancelLabel, saveLabel, onCancel, onSave, cancelLoading, saveLoading, hideSave, className, }: FormActionsProps) => import('react').JSX.Element>;
 export {};

package/dist/types/src/components/buttons/RowActions.d.ts

@@ -6,5 +6,5 @@ type RowActionsProps = {
     deleteLabel?: string;
     className?: string;
 };
-export declare const RowActions: ({ onEdit, onDelete, disabled, editLabel, deleteLabel, className, }: RowActionsProps) => import("react").JSX.Element;
+export declare const RowActions: ({ onEdit, onDelete, disabled, editLabel, deleteLabel, className, }: RowActionsProps) => import('react').JSX.Element;
 export {};

package/dist/types/src/components/buttons/ToolbarButton.d.ts

@@ -6,5 +6,5 @@ type ToolbarButtonProps = {
     label?: string;
     loading?: boolean;
 } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
-export declare const ToolbarButton: ({ selected, small, icon, label, loading, disabled, className, type, ...rest }: ToolbarButtonProps) => import("react").JSX.Element;
+export declare const ToolbarButton: ({ selected, small, icon, label, loading, disabled, className, type, ...rest }: ToolbarButtonProps) => import('react').JSX.Element;
 export {};

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

@@ -11,4 +11,4 @@ export type BadgeProps = {
      * luego el icono. Solo aplica a `shape="pill"` (el círculo es de un solo carácter). */
     icon?: ReactNode;
 };
-export declare const Badge: ({ label, variant, dot, size, shape, className, icon, }: BadgeProps) => import("react").JSX.Element;
+export declare const Badge: ({ label, variant, dot, size, shape, className, icon, }: BadgeProps) => import('react').JSX.Element;

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

@@ -18,11 +18,11 @@ export type EntityCardProps = {
     onClick?: () => void;
     className?: string;
 };
-export declare const EntityCard: (props: EntityCardProps) => import("react").JSX.Element;
+export declare const EntityCard: (props: EntityCardProps) => import('react').JSX.Element;
 type EntityCardGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;
     className?: string;
 };
-export declare const EntityCardGrid: ({ children, cols, className }: EntityCardGridProps) => import("react").JSX.Element;
+export declare const EntityCardGrid: ({ children, cols, className }: EntityCardGridProps) => import('react').JSX.Element;
 export {};

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

@@ -85,11 +85,11 @@ export type KPICardProps = {
      * afordance de "clickeable" ya lo da `selected`/el borde, no un chevron de navegación. */
     showChevron?: boolean;
 };
-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, selected, showChevron, }: 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, selected, showChevron, }: KPICardProps) => import('react').JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;
     className?: string;
 };
-export declare const KPIGrid: ({ children, cols, className }: KPIGridProps) => import("react").JSX.Element;
+export declare const KPIGrid: ({ children, cols, className }: KPIGridProps) => import('react').JSX.Element;
 export {};

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

@@ -3,7 +3,7 @@ type MetricBarRowProps = {
     item: MetricBarItem;
     small?: boolean;
 };
-export declare const MetricBarRow: ({ item, small }: MetricBarRowProps) => import("react").JSX.Element;
+export declare const MetricBarRow: ({ item, small }: MetricBarRowProps) => import('react').JSX.Element;
 type MetricBarListProps = {
     metrics: MetricBarItem[];
     small?: boolean;
@@ -13,5 +13,5 @@ type MetricBarListProps = {
      * responsabilidad de quien arma los datos. */
     footnote?: MetricBarFootnote;
 };
-export declare const MetricBarList: ({ metrics, small, className, footnote }: MetricBarListProps) => import("react").JSX.Element;
+export declare const MetricBarList: ({ metrics, small, className, footnote }: MetricBarListProps) => import('react').JSX.Element;
 export {};

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

@@ -23,12 +23,12 @@ export type ModuleCardProps = {
     className?: string;
     "aria-label"?: string;
 };
-export declare const ModuleCard: ({ title, subtitle, icon, logoUrl, iconAccent, badge, isNew, favorite, onFavoriteToggle, onClick, variant, density, enterAnimation, enterAnimationOnce, enterDelay, className, "aria-label": ariaLabel, }: ModuleCardProps) => import("react").JSX.Element;
+export declare const ModuleCard: ({ title, subtitle, icon, logoUrl, iconAccent, badge, isNew, favorite, onFavoriteToggle, onClick, variant, density, enterAnimation, enterAnimationOnce, enterDelay, className, "aria-label": ariaLabel, }: ModuleCardProps) => import('react').JSX.Element;
 type ModuleCardGridProps = {
     children: ReactNode;
     variant?: ModuleCardVariant;
     density?: ModuleCardDensity;
     className?: string;
 };
-export declare const ModuleCardGrid: ({ children, variant, density, className, }: ModuleCardGridProps) => import("react").JSX.Element;
+export declare const ModuleCardGrid: ({ children, variant, density, className, }: ModuleCardGridProps) => import('react').JSX.Element;
 export {};

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

@@ -6,10 +6,10 @@ export type QuickActionTileProps = {
     disabled?: boolean;
     className?: string;
 };
-export declare const QuickActionTile: ({ label, icon, onClick, disabled, className }: QuickActionTileProps) => import("react").JSX.Element;
+export declare const QuickActionTile: ({ label, icon, onClick, disabled, className }: QuickActionTileProps) => import('react').JSX.Element;
 export type QuickActionGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4;
     className?: string;
 };
-export declare const QuickActionGrid: ({ children, cols, className }: QuickActionGridProps) => import("react").JSX.Element;
+export declare const QuickActionGrid: ({ children, cols, className }: QuickActionGridProps) => import('react').JSX.Element;

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

@@ -10,4 +10,4 @@ export type RecommendationCardProps = {
     onAction?: () => void;
     className?: string;
 };
-export declare const RecommendationCard: ({ title, description, tags, priority, impact, confidence, actionLabel, onAction, className, }: RecommendationCardProps) => import("react").JSX.Element;
+export declare const RecommendationCard: ({ title, description, tags, priority, impact, confidence, actionLabel, onAction, className, }: RecommendationCardProps) => import('react').JSX.Element;

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

@@ -13,5 +13,5 @@ type SplitBarProps = {
  * 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 declare const SplitBar: ({ segments, size, className }: SplitBarProps) => import('react').JSX.Element;
 export {};

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, orientation, stacking, unit, yDomain, xAxisFormat, yAxisFormat, tooltipFormat, valueLabelFormat, showValueLabels, referenceLines, onDataPointClick, }: 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/ChartLegend.d.ts

@@ -11,4 +11,4 @@ export type ChartLegendProps = {
  * Leyenda compacta en una línea, para la cabecera de una tarjeta (`DashboardCard.headerAction`) cuando el gráfico va
  * con `showLegend={false}`: deja el alto del gráfico para los datos.
  */
-export declare const ChartLegend: ({ items, className }: ChartLegendProps) => import("react").JSX.Element;
+export declare const ChartLegend: ({ items, className }: ChartLegendProps) => import('react').JSX.Element;

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

@@ -4,4 +4,4 @@ import { DeviationBandProps } from './types';
  * "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;
+export declare const DeviationBand: ({ value, average, min, max, unit, label, valueFormat, direction, className, }: DeviationBandProps) => import('react').JSX.Element;

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

@@ -9,4 +9,4 @@ export type { DiagnosticRadarProps, RadarMetric } from './types';
  * 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;
+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/Sparkline.d.ts

@@ -1,2 +1,2 @@
 import { SparklineProps } from './types';
-export declare const Sparkline: ({ data, dataKey, type, 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/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

@@ -5,5 +5,5 @@ export type { ChartLegendItem, 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/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.d.ts

@@ -16,12 +16,12 @@ export type DonutGaugeProps = {
     strokeWidth?: number;
     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, 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/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/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/Stepper.d.ts

@@ -10,5 +10,5 @@ type StepperProps = {
     onStepClick?: (key: string) => void;
     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, className, }: StepperProps) => import('react').JSX.Element;
 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/display/AuditTimeline.d.ts

@@ -17,4 +17,4 @@ export type AuditTimelineProps = {
     emptyMessage?: string;
     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, 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/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;