# Time Dial

Mostrador de 24 horas que você gira com o dedo ou com as setas, com a faixa do expediente desenhada no aro.

- Nome no registry: `time-dial`
- Tipo: componente
- Dependências npm: motion
- Demo: https://ui.visantlabs.com/c/time-dial
- Categorias: controles, hora, relogio, fuso, seletor, agenda

## Quando usar

- Use quando: Escolher hora num mostrador de 24h com o expediente marcado, em agenda ou conversão de fuso
- Evite quando: Escolher data: date-reel; mostrar se a loja está aberta agora, store-status

## Instalar

```bash
npx shadcn@latest add @visant/time-dial
```

## Usar

```tsx
<TimeDial
  value={780}
  label="Horário da reunião"
/>
```

## API

### TimeDial

- `band?: [number, number]` — Faixa destacada no aro, em minutos: `[540, 1080]` = 9h às 18h.
- `caption?: any` — Linha pequena embaixo da hora: a cidade, o dia.
- `className?: string`
- `defaultValue?: number = 540` — Valor inicial quando não controlado.
- `label?: string = "Hora"` — Nome acessível do ponteiro.
- `onValueChange?: (minutes: number) => void`
- `size?: number = 240` — Diâmetro em px.
- `step?: number = 15` — Passo em minutos, no gesto e nas setas.
- `value?: number` — Minutos desde 00:00 (0 a 1439). Controlado.