# CourseFilterSidebar
> Componentes / Cursos e matrícula · Estado: **Em andamento** — Implementado e utilizável, mas ainda sem a validação completa de acessibilidade.
Painel de filtros do catálogo: busca por nome, tipo de curso, modalidade e áreas de conhecimento (oito à mostra, o resto em "Ver mais"), sobre os controles do sistema (E73). Os filtros só valem ao apertar "Pesquisar".
- Função: Cursos e matrícula
- Também chamado de: filtros, barra de filtros, painel de busca, sidebar
- Mora em: `app/components/organisms/CourseFilterSidebar.tsx`
- Página: [https://phorte-design-system.vercel.app/styleguide/peca/CourseFilterSidebar](https://phorte-design-system.vercel.app/styleguide/peca/CourseFilterSidebar)
- Ficha no Storybook: [components-complex-coursefiltersidebar](https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/components-complex-coursefiltersidebar--docs)
- Prévia ao vivo, sozinha: [https://phorte-design-system.vercel.app/previa/CourseFilterSidebar/0](https://phorte-design-system.vercel.app/previa/CourseFilterSidebar/0)
- Todas as peças: [https://phorte-design-system.vercel.app/llms.txt](https://phorte-design-system.vercel.app/llms.txt)
## Como usar no código
```tsx
import { CourseFilterSidebar } from '@/app/components/organisms/CourseFilterSidebar';
```
O `…` marca as props obrigatórias — ver *Propriedades*.
## Uso
### Variantes na ficha
1. [Padrão](https://phorte-design-system.vercel.app/previa/CourseFilterSidebar/0)
2. [Interativo](https://phorte-design-system.vercel.app/previa/CourseFilterSidebar/1)
Ao lado da grade do catálogo de cursos, com os filtros vindos da URL.
### Quando não usar
Para um filtro rápido acima de uma lista, use o FilterGroup. Para só a busca, o SearchBar.
### Faça
- Passe os filtros atuais (`query`, `category`, `modality`, `area`) e trate o `onUpdate`: o painel só sobe os valores ao pesquisar.
- Passe `isSearching` durante a busca: o botão fica em carregando ("Pesquisando cursos…" para o leitor) e bloqueia novo envio, sem perder o foco.
### Evite
- Aplicar a cada clique: o painel foi feito para juntar os filtros e pesquisar uma vez.
### Anatomia
1. **Busca** — O Input do sistema, `type="search"`, limpável.
2. **Pesquisar e Limpar** — Button `secondary` grande e, com filtro ativo, Button `outline` "Limpar filtros" (E73).
3. **Tipo de Curso e Modalidade** — RadioGroup com o Radio do sistema: `fieldset` com `legend`, um `name` só, linha de 44px (E73).
4. **Área de conhecimento** — Checkbox do sistema em ordem alfabética; oito à mostra e "Ver mais N áreas" / "Ver menos áreas".
### Estados
| Estado | O que muda |
| --- | --- |
| Filtro ativo | Aparece "Limpar filtros". |
| Pesquisando | `isSearching`: Pesquisar em `isLoading` (focável, `aria-busy`), Limpar desabilitado. |
| Todas as áreas | Depois de "Ver mais", as 34 áreas; "Ver menos áreas" recolhe (E73). |
### Comportamento
| Situação | O que acontece |
| --- | --- |
| Pesquisar | Chama `onUpdate` com `q`, `categoria`, `modalidade` e `area` (as escolhidas, separadas por vírgula). |
| Filtros mudam por fora | O painel reespelha os valores sem perder o que se digita. |
| Ver mais / Ver menos | Mostra e esconde as áreas, com `aria-expanded` e `aria-controls` — conferido no teste da ficha. |
### Relacionados
- [FilterGroup](https://phorte-design-system.vercel.app/styleguide/md/FilterGroup.md) — Filtro rápido acima de uma lista.
- [Radio](https://phorte-design-system.vercel.app/styleguide/md/Radio.md) — Os grupos de escolha única.
- [Checkbox](https://phorte-design-system.vercel.app/styleguide/md/Checkbox.md) — As áreas.
## Especificação
### Propriedades
| Prop | Tipo | Padrão | Obrigatória | Descrição |
| --- | --- | --- | --- | --- |
| `query` | `string` | — | sim | |
| `category` | `string` | — | sim | |
| `modality` | `string` | — | sim | |
| `area` | `string` | — | sim | |
| `isSearching` | `boolean` | `false` | não | |
| `onUpdate` | `(params: Record) => void` | — | sim | |
| `onClear` | `() => void` | — | não | |
### Tokens de cor
| Token | Valor | Usado como |
| --- | --- | --- |
| `--border` | #E5E5E5 | `border-border` |
| `--foreground` | #1A1A1A | `text-ink` |
## Acessibilidade
### Teclado
| Tecla | Faz |
| --- | --- |
| Tab | Busca, Pesquisar, (Limpar filtros), o grupo Tipo de Curso, o grupo Modalidade, cada área e "Ver mais". Cada grupo de rádio é uma parada; cada caixa, uma. |
| ↑ / ↓ / ← / → | Dentro de um grupo de rádio, trocam a opção (as do rádio nativo). |
| Espaço | Marca a caixa de área em foco. |
### Leitor de tela
- Cada grupo é um `