# Wallet Stack

Carteira de cartões empilhados em que um sobe pra mostrar saldo e movimento e os outros se recolhem no pé.

- Nome no registry: `wallet-stack`
- Tipo: componente
- Dependências npm: lucide-react, motion
- Demo: https://ui.visantlabs.com/c/wallet-stack
- Categorias: conteudo, carteira, cartoes, fintech, pilha, saldo

## Quando usar

- Use quando: Carteira de cartões em app fintech: um sobe com saldo e movimento, os outros recolhem
- Evite quando: Pilha de depoimentos ou dicas: card-stack; recibo de pedido, folding-bill

## Instalar

```bash
npx shadcn@latest add @visant/wallet-stack
```

## Usar

```tsx
<WalletStack
  label="Cartões da Marina"
/>
```

## API

### WalletStack

- `cards: WalletCard[]`
- `className?: string`
- `defaultIndex?: number = 0` — Cartão da frente ao montar.
- `height?: number = 440` — Altura da caixa dos cartões em px. Menor, o detalhe aberto tem menos espaço. Sem valor, 440px.
- `label?: string = "Carteira"` — Título da carteira, no cabeçalho e no rótulo acessível.
- `onActiveChange?: (card: WalletCard) => void` — Avisa quando o cartão da frente muda.
- `onOpenChange?: (card: WalletCard) => void` — Avisa quando um cartão abre (com ele) ou fecha (`null`).
- `renderDetail?: (card: WalletCard) => any` — O que aparece embaixo do cartão aberto. Sem isto, o cartão não abre.