AmountDisplay

Componente para exibir valores monetários em reais (R$) com formatação pt-BR e coloração semântica opcional.

Distinção importante: Use AmountDisplay para valores contábeis/financeiros (em reais). Use PriceDisplay para preços de cardápio (em centavos — divide por 100).

Importação

import { AmountDisplay } from '../components/ui';

Props

Prop	Tipo	Padrão	Descrição
value	number	—	Valor em reais (não centavos)
size	'xs' | 'sm' | 'md' | 'lg'	'md'	Tamanho da fonte
color	'auto' | 'positive' | 'negative' | 'neutral' | 'inherit'	'inherit'	Esquema de cor
strikethrough	boolean	false	Texto tachado (preço riscado)
showSign	boolean	false	Prefixo + em valores positivos
className	string	''	Classes adicionais

color prop

Valor	Comportamento
auto	Negativo → vermelho, zero → cinza, positivo → texto padrão
positive	Sempre esmeralda (verde)
negative	Sempre vermelho
neutral	Cinza (text-gray-600 dark:text-gray-300)
inherit	Sem classe de cor — herda do pai ou usa className

Tamanhos

size	Classes aplicadas
xs	text-xs font-medium
sm	text-sm font-medium
md	text-sm font-semibold (padrão)
lg	text-base font-semibold

Exemplos

// Valor padrão — sem cor aplicada
<AmountDisplay value={1234.56} />
// → R$ 1.234,56

// Coloração automática — vermelho se negativo
<AmountDisplay value={row.balance} color="auto" />

// Coluna de débito — azul herdado do pai
<td className="text-blue-600 dark:text-blue-400">
  {line.debit > 0 ? <AmountDisplay value={line.debit} color="inherit" /> : '—'}
</td>

// KPI grande com cor controlada externamente
<p className={`text-2xl font-bold ${kpi.color}`}>
  <AmountDisplay value={kpi.value} size="lg" color="inherit" />
</p>

// Valor de variação com sinal
<AmountDisplay value={delta} color="auto" showSign size="sm" />
// → +R$ 450,00 (verde) ou -R$ 120,00 (vermelho)

// Preço riscado (desconto)
<AmountDisplay value={originalPrice} strikethrough color="neutral" size="sm" />

Localização

frontend-react/src/components/ui/AmountDisplay.tsx

Exportado de frontend-react/src/components/ui/index.ts.

Relacionados

• PriceDisplay — valores em centavos (menu/cardápio)
• MonoNumber — números monoespaçados com copy opcional
• API — Accounting