# Expanding Search

Busca que fica guardada num ícone de lupa e só abre o campo quando alguém vai mesmo buscar.

- Nome no registry: `expanding-search`
- Tipo: componente
- Dependências npm: lucide-react, motion
- Demo: https://ui.visantlabs.com/c/expanding-search
- Categorias: controles, busca, search, combobox, cabecalho, barra-de-ferramentas

## Quando usar

- Use quando: Busca no cabeçalho ou barra de ferramentas que fica num ícone até alguém ir buscar
- Evite quando: Busca é a ação principal da tela: campo sempre aberto; lógica de filtro local, use-local-search

## Instalar

```bash
npx shadcn@latest add @visant/expanding-search
```

## Usar

```tsx
<ExpandingSearch
  expandedWidth={280}
  label="Buscar projetos e documentos"
/>
```

## API

### ExpandingSearch

- `items: ExpandingSearchItem[]`
- `label: string` — Dá nome ao botão, ao campo e à lista, como "Buscar projetos".
- `anchor?: "start" | "end" = "end"` — A borda onde o botão mora; o campo cresce pra longe dela.
- `className?: string`
- `expandedWidth?: number = 320` — Largura máxima do campo aberto, em px. Nunca passa do container.
- `maxResults?: number = 6` — Quantos resultados no máximo.
- `onExpandedChange?: (expanded: boolean) => void`
- `onSelect?: (item: ExpandingSearchItem) => void`
- `placeholder?: string`
- `suggestions?: ExpandingSearchItem[] = []` — Mostrados antes de digitar, como buscas recentes.
- `suggestionsLabel?: string = "Recentes"` — Título dos sugeridos.