Progress

Em @zexon/ui/components/progress. Passa value entre 0 e 100 (ou conforme o max do Radix).

Uso

Variante HUD

variant="hud" envolve a barra (ou os segmentos) numa moldura com colchetes.

Segmentado

Passe a prop segments para renderizar blocos discretos em vez da barra contínua. Útil para interfaces com estética de terminal ou HUD.

Segmentado automático

Com segments="auto", a barra mede a largura disponível e gera tantos segmentos quantos couberem (grosso modo um segmento w-1 + gap-1 por unidade). O contentor precisa de largura definida (por exemplo w-full dentro de um pai com largura fixa ou máxima).

Nos modos segmentados pode usar filledSegmentClassName e trackSegmentClassName para classes Tailwind, ou filledSegmentColor / trackSegmentColor com uma cor CSS em string — aplicam backgroundColor em linha e evitam classes que o Tailwind possa não gerar no pacote de UI.