componente · @solu30/ui-kit/display

MetricCard

Tarjeta de métrica con valor, texto secundario y tendencia, teñida por un color semántico cerrado.

20 sitios de import en 6 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
dietaly
elliot
gestorsalon
luigi
raquetea

El componente, montado

Cargando el espécimen…

export function MetricSpecimen() {
  return (
    <Stage label="MetricCard · con tendencia" tall wide>
      <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-3">
        <MetricCard
          label="Ocupación"
          value="87%"
          sub="vs. mes anterior"
          icon={IconChart}
          color="success"
          trend="up"
          trendValue="+12%"
        />
        <MetricCard
          label="Reservas"
          value={148}
          sub="agosto"
          icon={IconTarget}
          color="accent"
          trend="up"
          trendValue="+9"
        />
        <MetricCard
          label="Cancelaciones"
          value={6}
          sub="agosto"
          icon={IconClock}
          color="error"
          trend="down"
          trendValue="-2"
        />
      </div>
    </Stage>
  )
}

De specimens/display.tsx · MetricSpecimen: 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 { MetricCard } from '@solu30/ui-kit/display'

Props

9 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	sí	`string`	Metric label — shown above the value in uppercase
value	sí	`string \| number`	Main value — already-formatted string or raw number
sub	opcional	`string`	Secondary text shown below the value (e.g. "vs. mes anterior")
icon	opcional	`React.ComponentType<{ className?: string; }>`	Optional lucide-compatible icon component
color	opcional	`MetricCardColor`	Semantic color — drives icon bg, icon text, and trend badge
trend	opcional	`"up" \| "down" \| "neutral"`	Trend direction — renders a directional glyph before trendValue
trendValue	opcional	`string`	Pre-formatted trend label — e.g. "+12%" or "3 productos"
size	opcional	`"sm" \| "md"`	Card size — sm for dense grids, md for standalone cards
className	opcional	`string`	—

Ejemplo del paquete

// `value` y `trendValue` llegan YA formateados: la tarjeta no formatea nada.
<MetricCard label="Ingresos" value={formatCurrency(482300)} sub="vs. mes anterior"
  icon={TrendingUp} color="success" trend="up" trendValue="+12%" />

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.