# Expandable Card

Card de resumo que cresce pros lados e pra baixo ao abrir, e rola só a palavra que mudou no resumo.

- Nome no registry: `expandable-card`
- Tipo: componente
- Dependências npm: lucide-react, motion
- Demo: https://ui.visantlabs.com/c/expandable-card
- Categorias: conteudo, card, expandir, detalhe, resumo, layout

## Quando usar

- Use quando: Card de resumo que abre no lugar pra mostrar detalhe, como pedido, plano ou tarefa
- Evite quando: Detalhe que pede foco total: mist-dialog; recibo dobrável com total à vista, folding-bill

## Instalar

```bash
npx shadcn@latest add @visant/expandable-card
```

## Usar

```tsx
<ExpandableCard
  expandedWidth={440}
  width={340}
  title="Pedido 2048"
/>
```

## API

### ExpandableCard

- `children: any` — O detalhe revelado ao abrir.
- `title: string` — Título do card, dentro do botão que abre.
- `defaultExpanded?: boolean = false` — Começa aberto.
- `description?: string` — Linha de resumo. Quando muda, só as palavras novas rolam.
- `expandedWidth?: number` — Teto da largura aberto, em px, para crescer para os lados. Padrão: `width`.
- `width?: number` — Teto da largura fechado, em px. Sem ele o card ocupa o container.