# Compass

Bússola em camadas: a agulha vai até o ponteiro, passa e volta, e o mostrador inclina em direção à mão.

- Nome no registry: `compass`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/compass
- Categorias: controles, bussola, mostrador, 3d, mola, direcao

## Quando usar

- Use quando: Mostrar ou escolher uma direção, ou dar um objeto vivo a uma página que fala de rumo
- Evite quando: Alinhar com um alvo: sensor-dial; escolher uma hora: time-dial

## Instalar

```bash
npx shadcn@latest add @visant/compass
```

## Usar

```tsx
<Compass />
```

## API

### Compass

Bússola: a agulha vai até o ponteiro como uma de verdade vai ao norte, passa, volta e para. O mostrador inclina em direção à mão, e a distância entre as camadas é que dá a profundidade.

- `bearing?: number` — Para onde a agulha aponta, em graus (0 = norte, sentido horário). Passando esta prop, quem manda é você.
- `defaultBearing?: number = -62` — Onde a agulha nasce quando a peça é livre.
- `depth?: number = 18` — Quanto o mostrador inclina em direção ao ponteiro, em graus.
- `idle?: boolean = true` — Sozinha na tela, a agulha procura o norte de tempos em tempos.
- `label?: string = "Direção"` — Nome do controle para leitor de tela.
- `north?: string = "N"` — A letra do topo do mostrador.
- `onBearingChange?: (bearing: number) => void`