componente · @solu30/ui-kit/display

ProgressRing

Anillo de progreso de 0 a 100 con contenido centrado adentro, sea un porcentaje o un ícono.

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

cmp-packages

El componente, montado

Cargando el espécimen…

export function ProgressSpecimen() {
  return (
    <Stage label="ProgressRing" tall>
      <div className="flex flex-wrap items-center justify-center gap-6">
        <ProgressRing value={28} size={56}>
          <span className="text-xs font-medium tabular-nums text-content">28%</span>
        </ProgressRing>
        <ProgressRing value={64} size={56}>
          <span className="text-xs font-medium tabular-nums text-content">64%</span>
        </ProgressRing>
        <ProgressRing value={91} size={56}>
          <span className="text-xs font-medium tabular-nums text-content">91%</span>
        </ProgressRing>
      </div>
    </Stage>
  )
}

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

Props

6 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`number`	0-100.
size	opcional	`number`	Diameter in px. Default 40.
strokeWidth	opcional	`number`	—
className	opcional	`string`	Tokenized text-color class for the fill arc. Default `text-primary`.
trackClassName	opcional	`string`	Tokenized text-color class for the track. Default `text-content/10`.
children	opcional	`ReactNode`	Centered content (e.g. a percentage label or icon).

Ejemplo del paquete

<ProgressRing value={72} size={48}>
  <span className="text-xs font-semibold">72%</span>
</ProgressRing>

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.