# Skeleton Rail

Esqueletos com as medidas do que substituem (trilho, card, lista, texto, mídia), em quatro movimentos: pulse, shimmer, wave ou parado.

- Nome no registry: `skeleton-rail`
- Tipo: componente
- Dependências npm: nenhuma
- Demo: https://ui.visantlabs.com/c/skeleton-rail
- Categorias: feedback, skeleton, carregando, trilho, espera

## Quando usar

- Use quando: Placeholder com a medida exata de cards, listas ou mídia enquanto o conteúdo carrega
- Evite quando: Lista que voltou vazia: empty-state; operação longa em segundo plano, status-ticker

## Instalar

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

## Usar

```tsx
<SkeletonRail
  motion="pulse"
  heading={false}
  cards={3}
  gap={16}
  itemWidth={140}
  ratio="4 / 5"
/>
```

## API

### SkeletonRail

- `cards?: number = 5` — Quantos cards fantasma. Default 5.
- `gap?: number = 20`
- `heading?: boolean = true` — Reserva a fileira de controle que o `@visant/rail` desenha acima do trilho (as duas setas, a partir de `lg`). Antes isto desenhava uma barra de título — que o trilho não tem — e era metade do salto de altura.
- `itemWidth?: number = 240` — Os mesmos valores do `@visant/rail` que este esqueleto representa.
- `label?: string | false = "Carregando a lista"` — O que o leitor de tela ouve enquanto a lista não chegou. `false` cala a peça — pra quando quem anuncia é o container que embrulha vários.
- `motion?: "pulse" | "shimmer" | "wave" | "none"` — Como o bloco espera: `pulse` (default), `shimmer`, `wave` ou `none`. Ver a tabela no topo.
- `ratio?: string = "4 / 3"` — Proporção da arte, ex. `"4 / 3"`.

### SkeletonCard

SkeletonCard — mídia em cima, título e apoio embaixo.

- `delay?: number = 0`
- `label?: string | false = "Carregando"`
- `lines?: number = 2` — Quantas linhas de texto abaixo da mídia.
- `motion?: "pulse" | "shimmer" | "wave" | "none"` — Como o bloco espera: `pulse` (default), `shimmer`, `wave` ou `none`. Ver a tabela no topo.
- `ratio?: string | false = "4 / 3"` — Proporção da mídia, ex. `"4 / 3"`. `false` desenha um card sem mídia.

### SkeletonText

SkeletonText — o parágrafo que ainda não chegou.

- `delay?: number = 0`
- `gap?: number = 8` — Respiro entre linhas em px. O resto da entrelinha, na prática.
- `label?: string | false = "Carregando o texto"`
- `lineHeight?: number = 14` — Altura da linha em px. Use a MESMA `line-height` do texto que vai entrar.
- `lines?: number = 3`
- `motion?: "pulse" | "shimmer" | "wave" | "none"` — Como o bloco espera: `pulse` (default), `shimmer`, `wave` ou `none`. Ver a tabela no topo.

### SkeletonList

SkeletonList — a fileira vertical de registros.

- `delay?: number = 0`
- `label?: string | false = "Carregando a lista"`
- `meta?: boolean = true` — A coluna miúda da direita: valor, data, contagem.
- `motion?: "pulse" | "shimmer" | "wave" | "none"` — Como o bloco espera: `pulse` (default), `shimmer`, `wave` ou `none`. Ver a tabela no topo.
- `rowHeight?: number = 56` — Altura de cada linha em px. A mesma da linha real, sempre.
- `rows?: number = 4`
- `thumb?: boolean = true` — O quadrado à esquerda: avatar, capa, ícone. `false` tira.

### SkeletonMedia

SkeletonMedia — o retângulo da foto, do vídeo, do mapa, do gráfico.

- `delay?: number = 0`
- `label?: string | false = "Carregando a mídia"`
- `motion?: "pulse" | "shimmer" | "wave" | "none"` — Como o bloco espera: `pulse` (default), `shimmer`, `wave` ou `none`. Ver a tabela no topo.
- `radius?: string = "var(--r-surface, 0.875rem)"` — Cantos da mídia real. Passe o mesmo raio, senão a troca "estala".
- `ratio?: string = "16 / 9"`