componente · @solu30/ui-kit/display

InlineStat

Cifra con su etiqueta en un solo renglón, con plural automático, para meter dentro de otra línea.

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

gestorsalon
luigi

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 { InlineStat, InlineStatGroup } from '@solu30/ui-kit/display'

<InlineStatGroup>
  <InlineStat label="Confirmadas" value={12} />
  <InlineStat label="Con seña" value={4} />
</InlineStatGroup>

Anatomía

Las partes que componen InlineStat se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

InlineStat
└── InlineStatGroup

Props

5 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`string \| number`	Cifra. Se renderiza con `tabular-nums` para que varias no bailen al actualizarse.
label	sí	`string`	Etiqueta de la cifra. Es la forma que se usa cuando `value` es exactamente `1` (o cuando no se pasa `labelPlural`).
labelPlural	opcional	`string`	Forma plural opcional. Con ella, el componente elige: `value === 1` → `label`, cualquier otro valor (incluido `0` y los strings ya formateados) → `labelPlural`.
icon	opcional	`ReactNode`	Ícono decorativo (`aria-hidden`). Pasalo sin clases de tamaño.
className	opcional	`string`	—

En línea

Cuando la cifra acompaña a otro contenido —el header de una tarjeta, una fila de filtros— y no puede ocupar el espacio de una tarjeta entera. «labelPlural» cambia el rótulo sólo cuando el valor no es 1.

Cargando el espécimen…

export function InlineStatComposicion() {
  return (
    <InlineStatGroup>
      <InlineStat
        value={180}
        label="invitado"
        labelPlural="invitados"
        icon={<IconTeam className="h-4 w-4" />}
      />
      <InlineStat value={3} label="salida" labelPlural="salidas" />
      <InlineStat value={1} label="pote" labelPlural="potes" />
    </InlineStatGroup>
  )
}

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

Ejemplo del paquete

// `labelPlural` es lo que evita el "1 reservas": lo elige contra `value`.
<InlineStat value={12} label="reserva" labelPlural="reservas" icon={<CalendarDays className="size-4" />} />

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.