@sfperusacdev/sf-ui 0.1.35 → 0.1.37

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

@@ -76,8 +76,16 @@ export type KPICardProps = {
     iconStyle?: KPICardIconStyle;
     className?: string;
     onClick?: () => void;
+    /** Marca la tarjeta como seleccionada: borde/anillo destacado + una línea "Seleccionado" con check,
+     * debajo del `sublabel`. Pensado para KPIs que funcionan como filtro/selector (ej. clic para ver el
+     * detalle de ese indicador). Por defecto `false` — sin cambio de acabado. */
+    selected?: boolean;
+    /** Solo aplica a `layout="leading-icon"` con `onClick`. Por defecto `true` (acabado actual: dibuja
+     * `FiChevronRight` a la derecha). `false` la oculta — para grillas de KPIs seleccionables donde el
+     * 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, }: 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;

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/dist/types/src/components/table/CustomTable.d.ts

@@ -96,6 +96,8 @@ type CustomTableProps<TData extends Record<string, unknown>, TDetail extends Rec
     }) => ReactNode;
     onSelectionChange?: (selectedRows: TData[]) => void;
     headerVariant?: TableHeaderVariant;
+    /** Placeholder del buscador integrado (`enableFiltering`). Por defecto "Buscar..." (acabado actual). */
+    searchPlaceholder?: string;
     /** Oculta título, toolbar y chrome exterior — para uso dentro de ExpandableTableSection u otros contenedores. */
     embedded?: boolean;
     /**
@@ -105,5 +107,5 @@ type CustomTableProps<TData extends Record<string, unknown>, TDetail extends Rec
     detail?: CustomTableDetail<TData, TDetail>;
     controller?: CustomTableController<TData>;
 };
-export declare function CustomTable<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, embedded, detail, controller, }: CustomTableProps<TData, TDetail>): import("react").JSX.Element;
+export declare function CustomTable<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, searchPlaceholder, embedded, detail, controller, }: CustomTableProps<TData, TDetail>): import("react").JSX.Element;
 export type { CustomColumn, CustomTableDetail, CustomTableProps, TableAggregation };

package/dist/types/src/components/table/CustomTable.search.test.d.ts

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

package/package.json

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