@sfperusacdev/sf-ui 0.1.30 → 0.1.31

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

@@ -1,11 +1,14 @@
+import { ReactNode } from 'react';
 import { BadgeShape, BadgeSize, BadgeVariant } from './types';
-type BadgeProps = {
+export type BadgeProps = {
     label: string;
     variant?: BadgeVariant;
     dot?: boolean;
     size?: BadgeSize;
     shape?: BadgeShape;
     className?: string;
+    /** Icono antes del label (`.sf-badge__icon`). Compatible con `dot`: si vienen ambos, primero el punto y
+     * 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, }: BadgeProps) => import("react").JSX.Element;
-export {};
+export declare const Badge: ({ label, variant, dot, size, shape, className, icon, }: BadgeProps) => import("react").JSX.Element;

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

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

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

@@ -1,12 +1,15 @@
 import { ReactNode } from 'react';
 export type KPICardAccentTone = "emerald" | "blue" | "amber" | "red" | "teal" | "slate";
 export type KPICardLayout = "stacked" | "leading-icon";
+/** 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";
 export type KPICardProgress = {
     value: number;
     max: number;
     label?: string;
 };
-type KPICardProps = {
+export type KPICardProps = {
     label: string;
     value: string | number;
     sublabel?: string;
@@ -22,10 +25,13 @@ type KPICardProps = {
     /** 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;
+    /** Solo aplica a `layout="leading-icon"` (el tile `.sf-kpi-tile`). En "stacked" el icono va en
+     * `.sf-card-icon`, que no depende del tono, y esta prop se ignora. Por defecto "solid" = aspecto actual. */
+    iconStyle?: KPICardIconStyle;
     className?: string;
     onClick?: () => void;
 };
-export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, layout, accentBar, className, onClick, }: KPICardProps) => import("react").JSX.Element;
+export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, layout, accentBar, iconStyle, className, onClick, }: KPICardProps) => import("react").JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;

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

@@ -1,7 +1,8 @@
 export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
 export { badgeClassName, badgeDotClassName } from './badgeClassName';
 export { KPICard, KPIGrid } from './KPICard';
-export type { KPICardAccentTone, KPICardProgress, KPICardLayout } from './KPICard';
+export type { KPICardAccentTone, KPICardProgress, KPICardLayout, KPICardIconStyle, KPICardProps } from './KPICard';
 export { QuickActionTile, QuickActionGrid } from './QuickActionTile';
 export type { QuickActionTileProps, QuickActionGridProps } from './QuickActionTile';
 export { MetricBarRow, MetricBarList } from './MetricBar';

package/dist/types/src/components/dashboard/AlertRowList.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, EventItem, EventStatus } from './types';
+import { AlertRowItem, AlertRowListHeaderLabels, EventItem, EventStatus } from './types';
 type EventLogProps = {
     events: EventItem[];
     title?: string;
@@ -15,8 +15,13 @@ type AlertRowListProps = {
     items: AlertRowItem[];
     maxHeight?: number;
     className?: string;
+    /** Modo columnas (Torre de control): cabecera "Hora · Vehículo · Descripción" y cada fila en grid
+     * `punto | hora | vehículo | descripción`. Por defecto `false` = render actual sin cambios. */
+    columns?: boolean;
+    /** Textos de la cabecera en modo `columns`. Por defecto en español. */
+    headerLabels?: AlertRowListHeaderLabels;
 };
-export declare const AlertRowList: ({ items, maxHeight, className }: AlertRowListProps) => import("react").JSX.Element;
+export declare const AlertRowList: ({ items, maxHeight, className, columns, headerLabels }: AlertRowListProps) => import("react").JSX.Element;
 export type AlertLaneItem = {
     id?: string;
     title: ReactNode;

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

@@ -13,4 +13,4 @@ export { DashboardCard, DashboardGrid, DashboardSection, DashboardStatBar, Dashb
 export type { DashboardCardProps } from './DashboardCard';
 export { DetailSidePanel } from './DetailSidePanel';
 export type { DetailSidePanelProps, DetailSidePanelRow, DetailSidePanelSecondaryItem } from './DetailSidePanel';
-export type { StepStatus, StepItem, CalendarBadgeVariant, CalendarDayBadge, DonutGaugeSize, DashboardCardVariant, EventStatus, EventItem, AlertRowItem, StatBarItem, } from './types';
+export type { StepStatus, StepItem, CalendarBadgeVariant, CalendarDayBadge, DonutGaugeSize, DashboardCardVariant, EventStatus, EventItem, AlertRowItem, AlertRowSeverity, AlertRowListHeaderLabels, StatBarItem, } from './types';

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

@@ -24,14 +24,27 @@ export type EventItem = {
     actionLabel?: string;
     onAction?: () => void;
 };
+/** Severidad de una alerta (solo se pinta con `AlertRowList columns`): crítico = círculo rojo con "×",
+ * warning = círculo ámbar con "!", info = sin icono. */
+export type AlertRowSeverity = "critical" | "warning" | "info";
 export type AlertRowItem = {
     label: string;
     status?: EventStatus;
     meta?: string;
     time?: string;
     icon?: string;
+    /** Placa/unidad. Solo se muestra como columna propia con `AlertRowList columns`. */
+    vehicle?: string;
+    /** Icono de severidad antes de la placa. Solo se muestra con `AlertRowList columns`. */
+    severity?: AlertRowSeverity;
     onClick?: () => void;
 };
+/** Textos de la cabecera de `AlertRowList columns` (por defecto "Hora", "Vehículo", "Descripción"). */
+export type AlertRowListHeaderLabels = {
+    time?: string;
+    vehicle?: string;
+    description?: string;
+};
 export type StatBarItem = {
     label: string;
     value: string | number;

package/dist/types/src/components/layout/FilterBar.d.ts

@@ -50,5 +50,8 @@ export type FilterBarTextProps = {
     className?: string;
     id?: string;
     "aria-label"?: string;
+    /** Icono a la izquierda del texto (p.ej. lupa). Sin esta prop el DOM sigue siendo el `<input>` pelado;
+     * con ella el input se envuelve en `.sf-filter-bar__text--with-icon` y recibe padding-left. */
+    leadingIcon?: ReactNode;
 };
-export declare const FilterBarText: ({ value, defaultValue, onChange, placeholder, disabled, className, id, "aria-label": ariaLabel, }: FilterBarTextProps) => import("react").JSX.Element;
+export declare const FilterBarText: ({ value, defaultValue, onChange, placeholder, disabled, className, id, "aria-label": ariaLabel, leadingIcon, }: FilterBarTextProps) => import("react").JSX.Element;

package/package.json

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