componente · @solu30/ui-kit/display

InlineStatGroup

Contenedor canónico de varias InlineStat — un solo renglón que wrapea, con el espaciado ya resuelto. Existe para que ningún consumidor vuelva a escribir el flex flex-wrap items-center gap-x-3 gap-y-1 a mano.

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

gestorsalon
luigi

La parte, adentro de su padre

Cargando el espécimen…

export function CompactMetricsMatrix() {
  return (
    <Stage label="StatCard, MetricRow e InlineStat — tres formas de la misma cifra" tall wide>
      <div className="flex w-full flex-col gap-4">
        <StatCardEjemplo />
        <MetricRowEjemplo />
        <InlineStatComposicion />
      </div>
    </Stage>
  )
}

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

InlineStatGroup es una parte de InlineStat: sola no significa nada. Así que el escenario monta el padre completo, y lo que se ve incluye más piezas que la de esta ficha.

Cómo se usa

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

Props

2 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
children	sí	`ReactNode`	—
className	opcional	`string`	—

Ejemplo del paquete

<InlineStatGroup align="start">
  <InlineStat value={12} label="reserva" labelPlural="reservas" />
  <InlineStat value={180} label="invitado" labelPlural="invitados" />
</InlineStatGroup>

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.