componente · @solu30/ui-kit/display
KPICardGrid
Grilla de tarjetas de indicador con ícono, valor, color semántico y sparkline opcional.
19 sitios de import en 5 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- TheCharterPanel
- cmp-packages
- elliot
- gestorsalon
- luigi
La pieza, con lugar de pantalla
Cargando el espécimen…
export function KPICardGridMatrix() {
return (
<Stage label="KPICardGrid · 6 colores, con y sin sparkline" tall wide>
<div className="w-full">
<KPICardGrid cards={KPI_CARDS} columns={3} />
</div>
</Stage>
)
}De specimens/display.tsx · KPICardGridMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.
Cómo se usa
import { KPICardGrid } from '@solu30/ui-kit/display'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| cards | sí | KPICardItem[] | — |
| columns | opcional | 2 | 3 | 4 | 5 | 6 | Number of columns on desktop (default: cards.length clamped to 4) |
| isLoading | opcional | boolean | Show skeleton loading state |
| className | opcional | string | — |
| resolveIcon | opcional | (name: string) => IconComponent | undefined | Resolver para `card.icon` cuando es un string — inyectado por el consumidor, NUNCA importado acá (ADR-194). Para la resolución "cualquier ícono de Lucide por nombre" ya existente, pasar `resolveLucideIcon` de `@solu30/ui-kit/dynamic-icon`. Sin `resolveIcon`, un `icon: string` no renderiza ningún ícono (no rompe, solo no muestra nada en `iconWrap`). |
Ejemplo del paquete
// El ícono puede ser el componente o su nombre; por nombre hace falta `resolveIcon`.
<KPICardGrid columns={4} isLoading={cargando} cards={[
{ label: 'Reservas', value: '128', icon: 'calendar', color: 'primary', sparkline: [3, 8, 5, 12] },
]} resolveIcon={resolveLucideIcon} />Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.