Progress Bar

O mk-progress-bar comunica o progresso de operações em andamento — uploads, processamento de arquivos, etapas de onboarding. Suporta dois layouts (stacked e inline), três variantes semânticas (info, success, error), dois tamanhos e um modo indeterminado para operações de duração desconhecida. É um componente display-only: não responde a nenhuma interação e não participa de formulários.

Padrão

Estado padrão: variante info, layout stacked, tamanho md, com label, valor percentual e helper text.

import { MkProgressBar } from '@db1/makuco-ui-react';

<MkProgressBar value={50} label="Enviando arquivo" helperText="50 MB de 100 MB" />

<mk-progress-bar value="50" label="Enviando arquivo" helper-text="50 MB de 100 MB"></mk-progress-bar>

Variantes

Use variant para comunicar o estado semântico da operação.

import { MkProgressBar } from '@db1/makuco-ui-react';

<MkProgressBar value={50} variant="info" label="Em andamento" helperText="50 MB de 100 MB" />
<MkProgressBar value={100} variant="success" label="Upload concluído" helperText="Arquivo enviado com sucesso" />
<MkProgressBar value={40} variant="error" label="Falha no upload" helperText="Tente novamente" />

<mk-progress-bar value="50" variant="info" label="Em andamento" helper-text="50 MB de 100 MB"></mk-progress-bar>
<mk-progress-bar value="100" variant="success" label="Upload concluído" helper-text="Arquivo enviado com sucesso"></mk-progress-bar>
<mk-progress-bar value="40" variant="error" label="Falha no upload" helper-text="Tente novamente"></mk-progress-bar>

Tamanhos

size="sm" reduz a altura da trilha de 8 px para 4 px. Use em contextos compactos onde o espaço vertical é limitado.

import { MkProgressBar } from '@db1/makuco-ui-react';

<MkProgressBar value={60} size="md" label="Tamanho md (padrão)" />
<MkProgressBar value={60} size="sm" label="Tamanho sm" />

<mk-progress-bar value="60" size="md" label="Tamanho md (padrão)"></mk-progress-bar>
<mk-progress-bar value="60" size="sm" label="Tamanho sm"></mk-progress-bar>

Layout inline

layout="inline" coloca label, trilha e valor em uma única linha horizontal. Ideal para listas de itens com progresso individual.

import { MkProgressBar } from '@db1/makuco-ui-react';

<MkProgressBar value={30} layout="inline" label="Relatório.xlsx" />
<MkProgressBar value={70} layout="inline" label="Arquivo.pdf" />
<MkProgressBar value={100} layout="inline" variant="success" label="Foto.png" />

<mk-progress-bar value="30" layout="inline" label="Relatório.xlsx"></mk-progress-bar>
<mk-progress-bar value="70" layout="inline" label="Arquivo.pdf"></mk-progress-bar>
<mk-progress-bar value="100" layout="inline" variant="success" label="Foto.png"></mk-progress-bar>

Indeterminado

indeterminate ativa uma animação de vai-e-volta infinita. Use quando a duração da operação for desconhecida. O valor percentual não é exibido e aria-valuenow é omitido.

import { MkProgressBar } from '@db1/makuco-ui-react';

<MkProgressBar indeterminate label="Processando..." />

<mk-progress-bar indeterminate label="Processando..."></mk-progress-bar>

Props — mk-progress-bar

Prop	Tipo	Padrão	Descrição
`value`	`number`	`0`	Valor atual no intervalo `[min, max]`. Clampado internamente — valores fora do intervalo não causam erro.
`min`	`number`	`0`	Limite inferior da escala.
`max`	`number`	`100`	Limite superior da escala.
`variant`	`"info" \| "success" \| "error"`	`"info"`	Cor semântica da barra, do valor percentual e do `helperText`.
`size`	`"sm" \| "md"`	`"md"`	Altura da trilha: `sm` = 4 px, `md` = 8 px.
`layout`	`"stacked" \| "inline"`	`"stacked"`	`stacked` empilha label, trilha e helper text verticalmente. `inline` coloca tudo em uma única linha.
`indeterminate`	`boolean`	`false`	Ativa animação de vai-e-volta infinita. Ignora `value`. `aria-valuenow` é omitido quando ativo.
`label`	`string`	—	Texto descritivo exibido acima da trilha (`stacked`) ou à esquerda (`inline`). Também popula `aria-label` automaticamente.
`showValue`	`boolean`	`true`	Exibe o percentual calculado formatado via `Intl.NumberFormat`. Ignorado no modo indeterminado.
`helperText`	`string`	—	Texto de apoio exibido abaixo da trilha (`stacked`) ou à direita do valor (`inline`). A cor segue `variant`.

Acessibilidade

O host recebe role="progressbar" — papel WAI-ARIA padrão para operações de progresso.
aria-valuenow reflete o valor clampado ao intervalo [min, max]. É omitido quando indeterminate está ativo, sinalizando ao leitor de tela que a duração é desconhecida.
aria-valuemin e aria-valuemax refletem min e max.
aria-valuetext expõe o percentual formatado (ex.: "50%") usando Intl.NumberFormat com a localidade resolvida automaticamente. É omitido no modo indeterminado.
aria-label é definido automaticamente a partir de label quando não há aria-labelledby externo — passe aria-labelledby diretamente no host para sobrescrever.
O componente nunca recebe foco e não responde a teclado — é estritamente display-only.
A animação indeterminada respeita prefers-reduced-motion: em dispositivos com esta preferência ativa, a animação é desabilitada.