@sfperusacdev/sf-ui 0.2.7 → 0.2.8

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

@@ -0,0 +1,14 @@
+export type ChartLegendItem = {
+    label: string;
+    /** Color CSS (token o hex), el mismo de la serie del gráfico. */
+    color: string;
+};
+export type ChartLegendProps = {
+    items: ChartLegendItem[];
+    className?: string;
+};
+/**
+ * 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;

package/dist/types/src/components/charts/ChartLegend.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 { ChartLegend } from './ChartLegend';
+export type { ChartLegendItem, ChartLegendProps } from './ChartLegend';
 export { Sparkline } from './Sparkline';
 export { DiagnosticRadar } from './DiagnosticRadar';
 export { DeviationBand } from './DeviationBand';

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

@@ -29,6 +29,11 @@ export type DashboardPageFrameProps = {
     error?: string | null;
     /** Hay consultas en curso: el botón «Aplicar» gira y el chip de estado cuenta los segundos. */
     loading?: boolean;
+    /**
+     * Lo que se ve todavía es del rango anterior mientras llega el nuevo: el contenido se atenúa y no responde a clics
+     * (para no abrir detalles viejos), pero la página se sigue desplazando y no vuelve arriba.
+     */
+    stale?: boolean;
     /** Momento (epoch ms) del dato más antiguo en pantalla; alimenta el chip «datos de las HH:MM». */
     updatedAt?: number | null;
     /** El corte es el día de hoy: el chip dice «datos en vivo». */
@@ -53,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, 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/DonutBreakdown.d.ts

@@ -14,6 +14,13 @@ export type DonutBreakdownProps = {
     strokeWidth?: number;
     /** Leyenda con nombre, cantidad y porcentaje debajo del donut. Por defecto `true`. */
     showLegend?: boolean;
+    /**
+     * `list` (por defecto): una fila por segmento. `stat`: la cantidad en grande y, debajo, «nombre · porcentaje»;
+     * para una dona que ocupa la tarjeta, con pocos segmentos.
+     */
+    legendVariant?: "list" | "stat";
+    /** Texto del porcentaje de cada segmento en la leyenda (recibe la fracción 0–1). Por defecto, entero: «51%». */
+    formatPct?: (fraction: number) => string;
     className?: string;
 };
 /**
@@ -22,4 +29,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, 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/detailTypes.d.ts

@@ -1,7 +1,12 @@
-/** Columna del panel de detalle: `key` indexa la fila ya aplanada (ver `DetailPanel.rowMapper`). */
+/**
+ * Columna del panel de detalle: `key` indexa la fila ya aplanada (ver `DetailPanel.rowMapper`). `exportKey`, si se
+ * da, es el campo que se escribe en el Excel en lugar de `key`: sirve para mostrar un resumen en pantalla y el dato
+ * completo al exportar (p. ej. «25 días: 01–03/09, … y 2 tramos más» en pantalla, todos los tramos en el Excel).
+ */
 export type DetailColumn = {
     key: string;
     header: string;
+    exportKey?: string;
 };
 /** Un caso distinto dentro de la misma cifra: su pestaña, la acción que se sugiere y sus filas. */
 export type DetailGroup<Row> = {

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

@@ -16,7 +16,7 @@ export type CalendarDayBadge = {
     count: number;
     variant?: CalendarBadgeVariant;
 };
-export type DonutGaugeSize = "xs" | "sm" | "md" | "lg";
+export type DonutGaugeSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type DashboardCardVariant = "default" | "accent" | "critical" | "warning" | "success";
 /** Estado del contenido de `DashboardCard`. "idle" (por defecto) = renderiza `children` tal cual (acabado
  * actual). Precedencia cuando se combinan por error del consumidor: "error" > "loading" > "empty" > "idle". */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",