componente · @solu30/ui-kit/display

MetricRow

Fila de ancho completo con la etiqueta contra un borde y el valor contra el otro, con tendencia opcional.

Seguir leyendo — 1 párrafo más

Fila de métrica de ancho completo: label pegado a un borde, valor al otro. Para cifras que tienen que entrar en el MISMO renglón que otro contenido (chips de un header, por ejemplo) usar InlineStat — ADR-253.

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

gestorsalon
raquetea

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { MetricRow } from '@solu30/ui-kit/display'

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
label	sí	`string`	—
value	sí	`string \| number`	—
trend	opcional	`number`	—
trendPositiveIsGood	opcional	`boolean`	—
icon	opcional	`ReactNode`	—
className	opcional	`string`	—

Compacta

Cuando varias métricas van apiladas en una columna angosta, dentro de otra tarjeta, sin lugar para el ícono de una `StatCard`. «trendPositiveIsGood» en false invierte el color cuando bajar es la buena noticia, como en las cancelaciones.

Cargando el espécimen…

export function MetricRowEjemplo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-1">
      <MetricRow
        label="Reservas del mes"
        value={148}
        trend={9}
        icon={<IconChart className="h-4 w-4" />}
      />
      <MetricRow label="Cancelaciones" value={6} trend={-2} trendPositiveIsGood={false} />
    </div>
  )
}

De specimens/display.tsx · MetricRowEjemplo: 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.