@sfperusacdev/sf-ui 0.1.31 → 0.1.33

package/dist/theme/sf-tokens.css

@@ -392,6 +392,8 @@
   --sf-btn-warning-hover: #b45309;
   --sf-btn-info-bg: var(--sf-info);
   --sf-btn-info-bg-hover: #1d4ed8;
+  --sf-btn-danger-bg: var(--sf-danger);
+  --sf-btn-danger-hover: var(--sf-danger-strong);
 
   /* Gauge / calendar */
   --sf-gauge-track: #e2e8f0;

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

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

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

@@ -1,4 +1,4 @@
-export type ButtonVariant = "primary" | "secondary" | "outline" | "danger" | "ghost" | "accent";
+export type ButtonVariant = "primary" | "secondary" | "outline" | "danger" | "danger-solid" | "success" | "ghost" | "accent";
 export type ButtonSize = "sm" | "md";
 type Options = {
     variant?: ButtonVariant;

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

@@ -25,13 +25,16 @@ export 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;
+    /** Por defecto (false) el label se trunca en una línea (acabado actual). Con true se permite el salto de línea:
+     * para tarjetas angostas (5 KPI en la columna izquierda con la ficha abierta, mockup 031). */
+    labelWrap?: 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, iconStyle, className, onClick, }: KPICardProps) => import("react").JSX.Element;
+export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, layout, accentBar, iconStyle, labelWrap, className, onClick, }: KPICardProps) => import("react").JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;

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

@@ -18,6 +18,9 @@ export type DetailSidePanelProps = {
     headerAction?: ReactNode;
     /** Icono del bloque de identidad (tile 44px). */
     icon?: ReactNode;
+    /** Tamaño del tile de identidad. "sm" (por defecto) = 44px, el acabado actual. "lg" = 112×84px, para una foto
+     * de la entidad (mockup 031 Vehículos). No cambia nada más del bloque. */
+    iconSize?: "sm" | "lg";
     /** Encabezado del bloque de identidad, 18px bold — p.ej. la placa. */
     heading: string;
     /** Badge del bloque de identidad — p.ej. el estado operativo. */
@@ -32,4 +35,4 @@ export type DetailSidePanelProps = {
     width?: number | string;
     className?: string;
 };
-export declare const DetailSidePanel: ({ title, onClose, headerAction, icon, 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/package.json

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