# Magnetic Select

Um cacho de opções redondas em que a escolhida incha e empurra as outras, e o cursor puxa a opção que está debaixo dele.

- Nome no registry: `magnetic-select`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/magnetic-select
- Categorias: controles, selecao, radio, ima, hover, escolha

## Quando usar

- Use quando: Escolha única lúdica entre poucas opções redondas, como humor, cor ou objetivo no onboarding
- Evite quando: Formulário sério ou muitas opções: morph-select; opções em linha, segmented-control

## Instalar

```bash
npx shadcn@latest add @visant/magnetic-select
```

## Usar

```tsx
<MagneticSelect
  label="Como está o seu dia?"
/>
```

## API

### MagneticSelect

- `options: MagneticOption[]`
- `bounce?: number = 55` — 0–100. Balanço da mola ao assentar.
- `defaultValue?: string`
- `label?: string = "Escolha uma opção"` — Nome do grupo para leitor de tela.
- `onValueChange?: (value: string) => void`
- `pull?: number = 55` — 0–100. Quanto a opção sob o cursor é puxada até ele.
- `size?: "sm" | "lg" = "lg"` — Diâmetro das opções em repouso.
- `stroke?: boolean = false` — Contorno nas opções em repouso, para fundos onde `bg-card` some.
- `swell?: number = 50` — 0–100. O quanto a escolhida incha (e empurra as outras).
- `value?: string`