# Folding Bill

Uma conta que dobra em três como papel e abre quando você puxa ou toca, com o total sempre à vista no cabeçalho.

- Nome no registry: `folding-bill`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/folding-bill
- Categorias: conteudo, recibo, pedido, 3d, arrastar, acordeao

## Quando usar

- Use quando: Recibo ou resumo de pedido que dobra em três como papel, com o total sempre à vista
- Evite quando: Card genérico que expande: expandable-card; lista longa de itens, tabela do tema

## Instalar

```bash
npx shadcn@latest add @visant/folding-bill
```

## Usar

```tsx
<FoldingBill
  defaultFolded={false}
/>
```

## API

### FoldingBill

- `defaultFolded?: boolean = true`
- `folded?: boolean` — Controlado: `true` = dobrada.
- `items?: BillItem[] = "[
  { label: "Café coado", value: "R$ 9,00" },
  { label: "Pão de queijo", value: "R$ 7,50" },
  { label: "Suco de caju", value: "R$ 11,00" },
]"`
- `meta?: string = "Hoje, 19h42"` — Linha de apoio do cabeçalho (data, número do pedido).
- `onFoldedChange?: (folded: boolean) => void`
- `panelHeight?: number = 92` — Altura de cada uma das três dobras, em px.
- `settle?: number = 0` — 0–100. Balanço antes de assentar.
- `stiffness?: number = 40` — 0–100. Rigidez da mola ao soltar.
- `title?: string = "Mesa 12"` — Nome no cabeçalho (loja, mesa, pedido).
- `total?: BillItem = { label: "Total", value: "R$ 27,50" }`