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>

src/features/budgets/components/budget-card.tsx

@@ -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">

src/features/cards/components/card-item.tsx

@@ -69,6 +69,7 @@ export function CardItem({
 
 	const usagePercent =
 		limit > 0 ? Math.min(Math.max((used / limit) * 100, 0), 100) : 0;
+	const exceeded = usagePercent >= 100;
 
 	const logoPath = resolveLogoSrc(logo);
 	const brandAsset = resolveCardBrandAsset(brand);
@@ -194,7 +195,8 @@ export function CardItem({
 				<div className="flex flex-col gap-2">
 					<Progress
 						value={usagePercent}
-						className="h-2.5"
+						className={cn("h-2.5", exceeded && "bg-destructive/20!")}
+						indicatorClassName={cn(exceeded && "bg-destructive")}
 						aria-label={`${usagePercent.toFixed(0)}% do limite utilizado`}
 					/>
 					<span className="text-xs text-muted-foreground">

src/shared/components/ui/progress.tsx

@@ -7,9 +7,12 @@ import { cn } from "@/shared/utils/ui";
 
 function Progress({
 	className,
+	indicatorClassName,
 	value,
 	...props
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+}: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+	indicatorClassName?: string;
+}) {
 	return (
 		<ProgressPrimitive.Root
 			data-slot="progress"
@@ -21,7 +24,10 @@ function Progress({
 		>
 			<ProgressPrimitive.Indicator
 				data-slot="progress-indicator"
-				className="bg-primary h-full w-full flex-1 transition-all"
+				className={cn(
+					"bg-primary h-full w-full flex-1 transition-all",
+					indicatorClassName,
+				)}
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>