feat(budgets, cards): progress bar em cor destructive quando limite excedido

Adiciona prop indicatorClassName ao componente Progress. Orçamentos
estourados e cartões com 100% do limite utilizado exibem a barra
com indicador e fundo na cor destructive.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-05-04 15:42:39 +00:00
parent 57ac326c2a
commit 6288f5f8d4
3 changed files with 12 additions and 3 deletions

View File

@@ -90,6 +90,7 @@ export function BudgetCard({ budget, onEdit, onRemove }: BudgetCardProps) {
<Progress
value={usagePercent}
className={cn("h-2.5", exceeded && "bg-destructive/20!")}
indicatorClassName={cn(exceeded && "bg-destructive")}
aria-label={`${usagePercent.toFixed(1)}% do orçamento utilizado`}
/>
<span className="text-xs text-muted-foreground">