Componentes
MetricWidget
Métrica: rótulo de máquina, número em Sora tabular, contexto embaixo. O tom é luz, não faixa. Bar mostra proporção.
Exemplos#
Liquidado
Últimos 30 dias
Aguardando
Decisões
Custo do agente
3.520 tokens
Conciliado
Tom é luz · delta ok e aviso · barra no rodapé
Bar · tons
Importar#
import { MetricWidget, Bar } from "@hiboupay/react";
import type { MetricWidgetProps, BarProps, MetricTone } from "@hiboupay/react";Quando usar#
Use quando
- Número-chave de painel com contexto.
- Progresso contra meta (Bar no footer).
Não use quando
- Série temporal: gráfico.
- Mais de 4 por linha.
Anatomia#
- 01Ponto do tom + rótulo hb-label
- 02Valor 26–30 hb-num
- 03Delta mono
- 04Sub
- 05Rodapé opcional (Bar)
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label* | string | O que é medido. | |
| value* | ReactNode | Valor formatado pelo app. | |
| sub | ReactNode | Contexto. | |
| delta | { label: string; ok: boolean } | null | Variação. ok=false pinta aviso, não perigo. | |
| tone | "primary" | "secondary" | "success" | "warning" | "danger" | Luz do cartão. | |
| footer | ReactNode | Área abaixo com divisor. | |
| Bar.value / Bar.max* | number | Proporção (limitada a 100%). | |
| Bar.tone | MetricTone | "muted" | "primary" | Primário usa degradê Graffiti → Vivid Blue. |
| Bar.label | ReactNode | Linha acima da barra. |
Acessibilidade#
Teclado
Leitor de tela
- —Bar é role=meter com aria-valuenow em %.
- —Leia rótulo e valor juntos; evite abreviações sem contexto.
Boas práticas#
Faça
- Valor com unidade.
- Delta curto: "+4 pp".
Evite
- Delta ruim em danger.
- Faixa colorida no topo.
Conteúdo#
- —Rótulo curto, substantivo: "Liquidado", "Custo".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Superfície
Card
Superfície. Quatro materiais: papel guarda dado e decisão, rebaixado abriga prévia, vidro só no que flutua, noite é a superfície da marca.
Estado
Progress
Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.
Superfície
Grid
1 a 6 colunas. Gap da escala (8 · 12 · 16 · 24 · 32) e os cortes da margem (md 768, xl 1280).