# Filter Bar

Busca e filtro numa peça só: campo, menu de facetas, chips aplicados e a contagem que some quando nada foi filtrado.

- Nome no registry: `filter-bar`
- Tipo: componente
- Dependências npm: @radix-ui/react-dropdown-menu, motion, react
- Demo: https://ui.visantlabs.com/c/filter-bar
- Categorias: controles, filtro, busca, chips

## Instalar

```bash
npx shadcn@latest add @visant/filter-bar
```

## Usar

```tsx
<FilterBar />
```

## API

### FilterBar

- `chips?: FilterBarChip[] = []` — Filtros já aplicados. Já vêm formatados: a barra não traduz domínio.
- `clearAllLabel?: string = "Limpar tudo"`
- `countLabel?: (filtered: number, total: number) => string = "(filtered, total) => `${filtered} de ${total}`"` — `(filtrados, total) => texto`. Trocável para plural, idioma ou substantivo.
- `extras?: any`
- `filteredCount?: number`
- `filters?: any`
- `filtersLabel?: string`
- `groups?: FilterGroup[]` — Facetas. Com `selected` e `onToggle`, a barra monta o menu e os chips sozinha.
- `onClearAll?: () => void`
- `onQueryChange?: (query: string) => void`
- `onToggle?: (groupKey: string, optionId: string) => void`
- `query?: string` — Texto da busca. Com `onQueryChange`, a barra monta o campo sozinha.
- `queryPlaceholder?: string = "Buscar..."`
- `search?: any`
- `selected?: Record<string, string[]> = {}`
- `size?: "md" | "lg" = "md"` — `lg` junta busca e filtro numa cápsula centrada.
- `sort?: any`
- `totalCount?: number`
- `view?: any`