componente · @solu30/ui-kit/display

ProgressBar

Barra de progreso de 0 a 100; omitir el valor la pasa a indeterminada, que dice «en curso» sin cuánto falta.

Seguir leyendo — 2 párrafos más

ProgressBar component for displaying completion status.

Uses CSS variables for theming:

--ui-accent for default fill color
--ui-bg-hover for track background
--ui-success, --ui-warning, --ui-error for semantic colors

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

TheCharterPanel
carlosmartinpavon
cmp-packages
dietaly
gestorsalon
luigi
prepchat
raquetea
zentrya

El componente, montado

Cargando el espécimen…

export function ProgressBarMatrix() {
  return (
    <Stage label="ProgressBar · 4 colores × 3 tamaños — el hermano lineal de ProgressRing" tall wide>
      <div className="flex w-full flex-col gap-3">
        {PROGRESS_BAR_COLORS.map((c) => (
          <div key={c} className="flex w-full items-center gap-3">
            <span className="w-16 shrink-0 text-xs text-content/50">{c}</span>
            <div className="flex-1">
              <ProgressBar value={68} color={c} size="md" showLabel />
            </div>
          </div>
        ))}
        <Row>
          {PROGRESS_BAR_SIZES.map((s) => (
            <div key={s} className="w-32">
              <ProgressBar value={45} size={s} color="default" />
            </div>
          ))}
        </Row>
      </div>
    </Stage>
  )
}

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

Props

7 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	opcional	`number`	Progress value from 0 to 100. OMITIRLO = INDETERMINADO (2026-08-17): la barra pasa a un modo continuo que comunica "esto está en curso" sin afirmar cuánto falta. Es la semántica del `<progress>` nativo y de ARIA, donde la ausencia de `aria-valuenow` es precisamente lo que significa indeterminado — por eso se modela como opcional y no como un flag aparte: no hay que inventar un número para decir que no se sabe. El caso que lo pidió: Luigi necesitaba una barra de navegación global (ADR PERF-001 §R9) y una navegación no sabe cuánto le falta. Con `value` obligatorio, la única salida era inventar progreso con temporizadores, o sea mentirle al usuario; prefirieron quedarse sin indicador.
size	opcional	`ProgressBarSize`	Height of the bar
color	opcional	`ProgressBarColor`	Color variant
showLabel	opcional	`boolean`	Show percentage label
className	opcional	`string`	Additional CSS class
barClassName	opcional	`string`	Additional CSS class for the fill bar
trackClassName	opcional	`string`	Additional CSS class for the track (overrides bg and height defaults)

Ejemplo del paquete

<ProgressBar value={75} />
<ProgressBar value={100} color="success" size="lg" showLabel />
<ProgressBar value={30} color="warning" size="sm" />
<ProgressBar />                     // indeterminado: "en curso", sin cuánto falta
<ProgressBar aria-label="Cargando la página" />

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.