# Billing Toggle

Interruptor mensal e anual com o selo de desconto que vira recibo quando o anual é escolhido, e o preço rolando junto.

- Nome no registry: `billing-toggle`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/billing-toggle
- Categorias: controles, preco, pricing, toggle, assinatura, desconto, radiogroup

## Quando usar

- Use quando: Alternar mensal e anual numa página de preços, com selo de desconto e preço rolando junto
- Evite quando: Alternar opções que não são cobrança: segmented-control

## Instalar

```bash
npx shadcn@latest add @visant/billing-toggle
```

## Usar

```tsx
<BillingToggle
  value="mensal"
/>
```

## API

### BillingToggle

- `onValueChange: (value: string) => void`
- `value: string` — Período escolhido. Controlado: guarde no estado do pai.
- `className?: string`
- `label?: string = "Período de cobrança"` — Nome acessível do grupo.
- `options?: BillingToggleOption[] = "[
  { value: "mensal", label: "Mensal" },
  { value: "anual", label: "Anual", badge: "-20%", activeBadge: "2 meses grátis" },
]"`

### BillingPrice

O preço que rola pro valor novo: sobe quando aumenta, desce quando diminui.

- `amount: number` — O preço a mostrar. Mudou, rola.
- `className?: string`
- `currency?: string = "R$"` — Prefixo da moeda.
- `locale?: string = "pt-BR"` — Locale da formatação: agrupamento de milhar é decisão de mercado.
- `period?: string` — Texto depois do preço, como "/mês".
- `was?: number` — Preço antigo, riscado só quando é maior que `amount`.