@sfperusacdev/sf-ui 0.1.26 → 0.1.28

package/dist/theme/sf-tokens.css

@@ -341,6 +341,20 @@
   --sf-module-tile-radius: 18%;
   --sf-module-row-radius: 0.875rem;
   --sf-module-icon-radius-ratio: 0.3;
+  /* Tamano del pozo del icono en la teja. Era `width:45%; max-width:3.5rem`
+     escrito a pelo en sf-card.css, y ese tope fijo era el problema: la grilla
+     es minmax(--sf-module-tile-min, 1fr), asi que el 1fr estira la teja para
+     llenar el ancho disponible mientras el icono se quedaba clavado en 56px.
+     En una pantalla ancha la tarjeta salia enorme con el logo minusculo.
+     Ahora son tokens: quien monte una grilla mas ancha escala el icono con
+     ella, y quien quiera el tope de antes escribe
+     --sf-module-icon-max: 3.5rem. */
+  --sf-module-icon-size: 56%;
+  --sf-module-icon-max: none;
+  --sf-module-icon-min: 2.875rem;
+  /* Relleno del pozo cuando lleva logo. Con 0.5rem sobre un pozo de 56px el
+     dibujo quedaba en 40px: mas marco que logo. */
+  --sf-module-icon-logo-padding: 0.375rem;
   --sf-module-body-min-height-tile: 2.375rem;
   --sf-module-body-min-height-tile-compact: 2.125rem;
   --sf-module-transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;

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

@@ -1,5 +1,10 @@
 import { ReactNode } from 'react';
 export type KPICardAccentTone = "emerald" | "blue" | "amber" | "red" | "teal" | "slate";
+export type KPICardProgress = {
+    value: number;
+    max: number;
+    label?: string;
+};
 type KPICardProps = {
     label: string;
     value: string | number;
@@ -9,10 +14,11 @@ type KPICardProps = {
     trend?: number;
     trendLabel?: string;
     accentTone?: KPICardAccentTone;
+    progress?: KPICardProgress;
     className?: string;
     onClick?: () => void;
 };
-export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, className, onClick, }: KPICardProps) => import("react").JSX.Element;
+export declare const KPICard: ({ label, value, sublabel, icon, iconClassName, trend, trendLabel, accentTone, progress, className, onClick, }: KPICardProps) => import("react").JSX.Element;
 type KPIGridProps = {
     children: ReactNode;
     cols?: 2 | 3 | 4 | 5;

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

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

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

@@ -1,7 +1,7 @@
 export { Badge } from './Badge';
 export { badgeClassName, badgeDotClassName } from './badgeClassName';
 export { KPICard, KPIGrid } from './KPICard';
-export type { KPICardAccentTone } from './KPICard';
+export type { KPICardAccentTone, KPICardProgress } from './KPICard';
 export { MetricBarRow, MetricBarList } from './MetricBar';
 export { EntityCard, EntityCardGrid } from './EntityCard';
 export type { EntityCardProps } from './EntityCard';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.1.26",
-  "description": "SF UI \u2014 librer\u00eda de componentes React (inputs, tablas, hooks) para aplicaciones SF Per\u00fa.",
+  "version": "0.1.28",
+  "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",
   "module": "./dist/sf-ui.js",