@sfperusacdev/sf-ui 0.1.35 → 0.1.36

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

@@ -1,4 +1,4 @@
-import { MetricBarItem } from './types';
+import { MetricBarFootnote, MetricBarItem } from './types';
 type MetricBarRowProps = {
     item: MetricBarItem;
     small?: boolean;
@@ -8,6 +8,10 @@ type MetricBarListProps = {
     metrics: MetricBarItem[];
     small?: boolean;
     className?: string;
+    /** Nota destacada debajo de las barras (ej. "56% con menos de 3 meses"), en una caja tintada.
+     * Por defecto no se muestra nada (acabado actual). No es una conclusión calculada — el texto es
+     * responsabilidad de quien arma los datos. */
+    footnote?: MetricBarFootnote;
 };
-export declare const MetricBarList: ({ metrics, small, className }: 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/index.d.ts

@@ -14,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, MetricBarThresholds, MetricBarItem, SplitBarTone, SplitBarSegment, EntityCardStatus, EntityCardVariant, RecommendationPriority, RecommendationImpact, ModuleCardVariant, ModuleCardDensity, } from './types';
+export type { BadgeVariant, BadgeSize, BadgeShape, MetricBarTone, MetricBarThresholds, MetricBarItem, MetricBarFootnote, SplitBarTone, SplitBarSegment, EntityCardStatus, EntityCardVariant, RecommendationPriority, RecommendationImpact, ModuleCardVariant, ModuleCardDensity, } from './types';

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

@@ -38,6 +38,10 @@ export type MetricBarItem = {
      * dimensiona la barra — eso siempre es `value` (crudo si hay `max`, 0-100 si no lo hay). */
     valueLabel?: string;
 };
+export type MetricBarFootnote = {
+    text: string;
+    tone?: MetricBarTone;
+};
 export type SplitBarTone = MetricBarTone;
 export type SplitBarSegment = {
     label: string;

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

@@ -12,6 +12,9 @@ export type AlertSummaryRowItem = {
     /** 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[];
+    /** Icono propio para esta fila (sustituye al glifo automático por `tone`). Solo se renderiza si
+     * `showIcon` está activo en la lista. */
+    icon?: ReactNode;
 };
 type AlertSummaryListProps = {
     items: AlertSummaryRowItem[];
@@ -20,6 +23,10 @@ type AlertSummaryListProps = {
     density?: AlertDensity;
     /** Contenido cuando `items` está vacío. Por defecto "Sin alertas". */
     emptyMessage?: ReactNode;
+    /** Muestra un glifo de severidad a la izquierda de cada fila (círculo con "i"/"!", coloreado por
+     * `tone`). Por defecto `false` — preserva el acabado actual sin icono. Cada fila puede pasar su
+     * propio `icon` para sustituir el automático. */
+    showIcon?: boolean;
 };
 /**
  * Lista de filas de ancho completo con fondo tintado por severidad y un valor grande
@@ -27,5 +34,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 }: AlertSummaryListProps) => import("react").JSX.Element;
+export declare const AlertSummaryList: ({ items, className, density, emptyMessage, showIcon, }: AlertSummaryListProps) => import("react").JSX.Element;
 export {};

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

@@ -0,0 +1,25 @@
+import { DonutGaugeSize } from './types';
+export type DonutBreakdownSegment = {
+    label: string;
+    value: number;
+    /** Color CSS (token o hex). Si se omite, se usa la paleta por defecto según el índice del segmento. */
+    color?: string;
+};
+export type DonutBreakdownProps = {
+    segments: DonutBreakdownSegment[];
+    /** Contenido central grande (ej. el total). Si se omite, se autocalcula como la suma de `segments`. */
+    centerValue?: string | number;
+    centerLabel?: string;
+    size?: DonutGaugeSize;
+    strokeWidth?: number;
+    /** Leyenda con nombre, cantidad y porcentaje debajo del donut. Por defecto `true`. */
+    showLegend?: boolean;
+    className?: string;
+};
+/**
+ * Donut de distribución (2+ segmentos, ej. Sexo M/F), con valor central y leyenda.
+ * Distinto de `DonutGauge`: ese representa UN indicador 0-100 (progreso/salud); este representa
+ * 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;

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

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

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

@@ -8,6 +8,8 @@ export { Calendar } from './Calendar';
 export { MONTH_NAMES, WEEKDAY_LABELS, toLocalYMD, parseYMD, buildMonthGrid } from './calendarUtils';
 export { DonutGauge, DonutGaugeRow } from './DonutGauge';
 export type { DonutGaugeProps, DonutGaugeRowItem } from './DonutGauge';
+export { DonutBreakdown } from './DonutBreakdown';
+export type { DonutBreakdownProps, DonutBreakdownSegment } from './DonutBreakdown';
 export { EventLog, AlertRowList, AlertLane } from './EventLog';
 export type { AlertLaneItem } from './EventLog';
 export { AlertSummaryList } from './AlertSummaryList';

package/package.json

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