Componentes

Balance Pill

Indicador na TopBar que aparece assim que o cartão do usuário é lido. Dois estados de valor: OK (verde) e Low (vermelho, abaixo de R$ 4,70, o preço da passagem). Presente tanto nas telas light quanto nas telas de painel dark (onboarding, value-selection, screen-saver). Alterne o preview acima para comparar.

Estados de saldo

OK · Low

Balance R$ 50,00

Balance R$ 2,50

Low balance

Balance R$ 50,00

Balance R$ 2,50

Low balance

BG light: --color-surface · 95%
BG dark: white · 6%
Borda light: 1.5px · --color-border
Borda dark: 1.5px · white · 15%
Radius: --radius-md · 10px
Rótulo: 11px · 500 · --color-text-secondary
Valor OK: 18px · 800 · --color-primary
Valor Low: 18px · 800 · --color-error

Uso

---
import BalancePill from '@/components/kiosk/BalancePill.astro';
---

{/* Estado ok — acima do preço da passagem (R$ 4,70) */}
<BalancePill value="R$ 50,00" surface="light" state="ok" size="md" />
<BalancePill value="R$ 50,00" surface="dark"  state="ok" size="md" />

{/* Estado low — abaixo do preço da passagem; o app exibe um aviso ao lado */}
<BalancePill value="R$ 2,50" surface="light" state="low" size="md" />
<BalancePill value="R$ 2,50" surface="dark"  state="low" size="md" />

{/* Label customizado (padrão: "Available balance") */}
<BalancePill label="Saldo"  value="R$ 50,00" surface="light" />

Props

Prop	Tipo	Padrão	Descrição
`value` obrigatório	`string`	`—`	Valor monetário pré-formatado — ex.: `"R$ 50,00"`. Usa tabular-nums para alinhar os dígitos.
`label`	`string`	`'Available balance'`	Label em maiúsculas acima do valor. Mantido curto; truncar é responsabilidade do consumidor.
`surface`	`'light' \| 'dark'`	`'light'`	Fundo sobre o qual o pill assenta — controla a borda inativa + backdrop blur.
`state`	`'ok' \| 'low'`	`'ok'`	ok → valor verde; low → valor vermelho (o chamador exibe o aviso de "Low balance" ao lado).
`size`	`'sm' \| 'md'`	`'md'`	md = kiosk completo (label 13 · valor 22) · sm = preview compacto (label 11 · valor 18).
`class`	`string`	`—`	Classes extras anexadas ao elemento raiz.

value obrigatório

Tipo

string

Padrão

—

Desc

Valor monetário pré-formatado — ex.: `"R$ 50,00"`. Usa tabular-nums para alinhar os dígitos.
label

Tipo

string

Padrão

'Available balance'

Desc

Label em maiúsculas acima do valor. Mantido curto; truncar é responsabilidade do consumidor.
surface

Tipo

'light' | 'dark'

Padrão

'light'

Desc

Fundo sobre o qual o pill assenta — controla a borda inativa + backdrop blur.
state

Tipo

'ok' | 'low'

Padrão

'ok'

Desc

ok → valor verde; low → valor vermelho (o chamador exibe o aviso de "Low balance" ao lado).
size

Tipo

'sm' | 'md'

Padrão

'md'

Desc

md = kiosk completo (label 13 · valor 22) · sm = preview compacto (label 11 · valor 18).
class

Tipo

string

Padrão

—

Desc

Classes extras anexadas ao elemento raiz.