# Rail

Trilho horizontal com snap: anda por arrasto, Shift + roda, setas e teclado. As setas somem nas pontas.

- Nome no registry: `rail`
- Tipo: componente
- Dependências npm: nenhuma
- Demo: https://ui.visantlabs.com/c/rail
- Categorias: controles, carrossel, snap

## Quando usar

- Use quando: Trilho horizontal de cards ou produtos com snap, arrasto e teclado, em loja ou catálogo
- Evite quando: Vídeos verticais: reels-rail; capas em perspectiva, cover-flow; fotos em mosaico, masonry-gallery

## Instalar

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

## Usar

```tsx
<Rail
  fade
  progress
  gap={16}
  itemWidth={248}
  label="Coleção outono"
/>
```

## API

### Rail

- `arrows?: boolean = true` — Setas de navegação (só aparecem onde há ponteiro).
- `bleed?: number | false = false` — Quantos px o trilho sangra pra fora do container, de cada lado.
- `fade?: boolean = false` — Esmaece as pontas onde a lista continua. Segue o estado real das bordas.
- `gap?: number = 20`
- `gridUpTo?: number | false = false` — Com até N itens, o trilho vira GRADE: colunas iguais dividindo a faixa, sem rolagem, sem setas, sem máscara e sem tabindex rotativo (com três itens, três paradas de Tab é a ordem natural — o defeito das 21 paradas era outro).
- `heading?: any` — O nome da lista, na fileira das setas.
- `hint?: any` — O qualificador ao lado do nome: "12 peças", "atualizado hoje".
- `itemWidth?: number = 240` — Largura mínima de cada item.
- `label?: string = "Scrollable list"`
- `progress?: boolean = false` — Régua embaixo: quanto da lista cabe na vista e onde ela está.
- `remainder?: boolean = false` — `+N` na ponta que continua. Clicar anda um item.