UsageCard

Compact metric card with animated percentage, auto-segmented progress bar, and optional accent icon.

Cartão compacto para percentagem de utilização (0–100): número animado e barra Progress com segments="auto" (preenche a largura do cartão). Com percentage ≥ 75, a cor de destaque passa a vermelho (#ff2d55) para alerta. Respeita prefers-reduced-motion no contador.

O componente está em @zexon/ui/blocks/usage-card e usa motion/react e @zexon/ui/components/progress.

Importação

import {
	UsageCard,
	type UsageCardProps,
} from "@zexon/ui/blocks/usage-card";

Uso

Exemplo

Utilização

Alerta alto (≥ 75%)

Percentagem elevada

Carga

Props

Prop	Tipo	Predefinição	Notas
`title`	`string`	—	Rótulo curto (tipicamente em caixa alta no UI)
`percentage`	`number`	—	0–100; ≥ 75 usa cor de alerta no número e na barra
`accentColor`	`string`	`#00f5ff`	Cor base (hex ou CSS) quando `percentage` < 75
`icon`	`ReactNode`	—	Opcional, à esquerda do título

Demais props repassam-se ao div raiz (className, id, aria-*, etc.); não há children.

Use Case Card