style(ui): refresh em badges de tipo, radio buttons e antecipação

- TransactionTypeBadge: substitui StatusDot por ícones direcionais
  (RiArrowRightDownLine receita, RiArrowRightUpLine despesa,
  RiArrowLeftRightLine transferência), adiciona borda e shadow sutil
  e dessaturação no dark mode; rótulo "Transferência" abreviado
  para "Transf."
- RadioGroup: indicador trocado de RiCircleLine por RiCheckLine com
  fundo sólido primary no estado selecionado
- Tabela de seleção de parcelas no dialog de antecipação reduzida
  para três colunas (estabelecimento, fatura, valor); coluna de
  vencimento removida e nome do estabelecimento absorve a parcela
- Inter agora carrega explicitamente os pesos 500, 600 e 700

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

public/fonts/font_index.ts

@@ -5,5 +5,6 @@ export const inter = Inter({
 	display: "swap",
 	variable: "--font-inter",
 	fallback: ["ui-sans-serif", "system-ui"],
+	weight: ["500", "600", "700"],
 	preload: true,
 });

src/features/transactions/components/dialogs/anticipate-installments-dialog/installment-selection-table.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { format } from "date-fns";
-import { ptBR } from "date-fns/locale";
 import MoneyValues from "@/shared/components/money-values";
 import { Badge } from "@/shared/components/ui/badge";
 import { Checkbox } from "@/shared/components/ui/checkbox";
@@ -44,11 +42,6 @@ export function InstallmentSelectionTable({
 		}
 	};
 
-	const formatDate = (date: Date | null) => {
-		if (!date) return "—";
-		return format(date, "dd/MM/yyyy", { locale: ptBR });
-	};
-
 	if (installments.length === 0) {
 		return (
 			<div className="rounded-lg border border-dashed p-8 text-center">
@@ -63,11 +56,11 @@ export function InstallmentSelectionTable({
 	}
 
 	return (
-		<div className="overflow-hidden rounded-lg border">
+		<div className="overflow-hidden">
 			<Table>
 				<TableHeader>
 					<TableRow>
-						<TableHead className="w-12">
+						<TableHead>
 							<Checkbox
 								checked={
 									selectedIds.length === installments.length &&
@@ -77,9 +70,8 @@ export function InstallmentSelectionTable({
 								aria-label="Selecionar todas as parcelas"
 							/>
 						</TableHead>
-						<TableHead>Parcela</TableHead>
-						<TableHead>Período</TableHead>
-						<TableHead>Vencimento</TableHead>
+						<TableHead>Estabelecimento</TableHead>
+						<TableHead>Fatura</TableHead>
 						<TableHead className="text-right">Valor</TableHead>
 					</TableRow>
 				</TableHeader>
@@ -103,6 +95,7 @@ export function InstallmentSelectionTable({
 									/>
 								</TableCell>
 								<TableCell>
+									{inst.name}{" "}
 									<Badge variant="outline">
 										{formatCurrentInstallment(
 											inst.currentInstallment ?? 0,
@@ -110,12 +103,11 @@ export function InstallmentSelectionTable({
 										)}
 									</Badge>
 								</TableCell>
+
 								<TableCell className="font-medium">
 									{formatShortPeriodLabel(inst.period)}
 								</TableCell>
-								<TableCell className="text-muted-foreground">
-									{formatDate(inst.dueDate)}
-								</TableCell>
+
 								<TableCell className="text-right font-medium">
 									<MoneyValues amount={Number(inst.amount)} />
 								</TableCell>

src/shared/components/transaction-type-badge.tsx

@@ -1,6 +1,11 @@
+import {
+	type RemixiconComponentType,
+	RiArrowLeftRightLine,
+	RiArrowRightDownLine,
+	RiArrowRightUpLine,
+} from "@remixicon/react";
 import { Badge } from "@/shared/components/ui/badge";
 import { cn } from "@/shared/utils/ui";
-import StatusDot from "./status-dot";
 
 type FinancialKind =
 	| "receita"
@@ -26,29 +31,33 @@ type TransactionTypeBadgeProps = {
 type BadgeConfig = {
 	label: string;
 	className: string;
-	dotClassName: string;
+	Icon: RemixiconComponentType;
 };
 
 const BADGE_CONFIG: Record<FinancialKindKey, BadgeConfig> = {
 	receita: {
 		label: "Receita",
-		className: "bg-success/10 text-success dark:bg-success/10",
-		dotClassName: "bg-success/80",
+		className:
+			"border-success/30 bg-success/5 text-success dark:saturate-90 dark:border-success/50 dark:bg-transparent",
+		Icon: RiArrowRightDownLine,
 	},
 	despesa: {
 		label: "Despesa",
-		className: "bg-destructive/10 text-destructive dark:bg-destructive/10",
-		dotClassName: "bg-destructive/80",
+		className:
+			"border-destructive/30 bg-destructive/5 text-destructive dark:saturate-90 dark:border-destructive/50 dark:bg-transparent",
+		Icon: RiArrowRightUpLine,
 	},
 	transferência: {
-		label: "Transferência",
-		className: "bg-info/10 text-info dark:bg-info/10",
-		dotClassName: "bg-info/80",
+		label: "Transf.",
+		className:
+			"border-info/30 bg-info/5 text-info dark:saturate-90 dark:border-info/50 dark:bg-transparent",
+		Icon: RiArrowLeftRightLine,
 	},
 	"saldo inicial": {
 		label: "Saldo Inicial",
-		className: "bg-success/10 text-success dark:bg-success/10",
-		dotClassName: "bg-success/80",
+		className:
+			"border-success/30 bg-success/5 text-success dark:saturate-90 dark:border-success/50 dark:bg-transparent",
+		Icon: RiArrowRightDownLine,
 	},
 };
 
@@ -66,22 +75,20 @@ export function TransactionTypeBadge({
 	const normalizedKind = normalizeKind(kind);
 	const config = normalizedKind ? BADGE_CONFIG[normalizedKind] : null;
 	const label = config?.label ?? kind;
+	const Icon = config?.Icon;
 
 	return (
 		<Badge
 			variant="outline"
 			data-kind={normalizedKind ?? "custom"}
 			className={cn(
-				"h-6 gap-1 border-none rounded-md px-2 py-0 text-xs shadow-none",
+				"h-6 gap-1 rounded-sm border px-2 py-0 text-xs font-medium shadow-xs",
 				config?.className ??
-					"bg-muted/30 text-muted-foreground dark:bg-muted/20",
+					"border-muted-foreground/30 bg-muted/20 text-muted-foreground dark:bg-transparent",
 				className,
 			)}
 		>
-			<StatusDot
-				color={config?.dotClassName ?? "bg-muted-foreground/60"}
-				className="size-1.5"
-			/>
+			{Icon ? <Icon className="size-3.5" /> : null}
 			<span>{label}</span>
 		</Badge>
 	);

src/shared/components/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { RiCircleLine } from "@remixicon/react";
+import { RiCheckLine } from "@remixicon/react";
 import type * as React from "react";
 import { cn } from "@/shared/utils/ui";
 
@@ -26,16 +26,16 @@ function RadioGroupItem({
 		<RadioGroupPrimitive.Item
 			data-slot="radio-group-item"
 			className={cn(
-				"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
 		>
 			<RadioGroupPrimitive.Indicator
 				data-slot="radio-group-indicator"
-				className="relative flex items-center justify-center"
+				className="grid place-content-center text-current transition-none"
 			>
-				<RiCircleLine className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+				<RiCheckLine className="size-3.5" />
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
 	);