# Wavy Divider

Divisor ondulado decorativo (SVG) para separar seções longas.

> Documentação do Sinapse DS. Snippets shadcn usam os componentes do seu projeto (`@/components/ui/*`); snippets HTML usam as classes `itps-*` do CSS Sinapse (`/css/<versão>/`, veja `/comecar.md`). Componentes do site de documentação não fazem parte do DS.

- Categoria: Layout
- Status: stable

## Em cada stack

- HTML e Astro: Classes `itps-*` do CSS Sinapse, com todas as variantes desta página.
- React e Vue: Componentes padrão do shadcn (`separator`) com o tema Sinapse: cores, fonte e raio vêm do tema, e as variantes `itps-*` desta página existem só no HTML.

**React/Next (shadcn/ui)**

```tsx
import { Separator } from '@/components/ui/separator'

export function DividerExample() {
  return (
    <div className="grid gap-6">
      <section>
        <h3 className="text-lg font-semibold">Fundamentos</h3>
        <p className="text-sm text-muted-foreground">
          Layout, grid e movimento para compor a página.
        </p>
      </section>

      <Separator className="my-8" />

      <section>
        <h3 className="text-lg font-semibold">Componentes</h3>
        <p className="text-sm text-muted-foreground">
          Contratos visuais prontos para copiar e adaptar.
        </p>
      </section>
    </div>
  )
}
```

**Vue 3/Nuxt 4 (shadcn-vue)**

```vue
<script setup lang="ts">
import { Separator } from '@/components/ui/separator'
</script>

<template>
  <div class="grid gap-6">
    <section>
      <h3 class="text-lg font-semibold">Fundamentos</h3>
      <p class="text-sm text-muted-foreground">
        Layout, grid e movimento para compor a página.
      </p>
    </section>

    <Separator class="my-8" />

    <section>
      <h3 class="text-lg font-semibold">Componentes</h3>
      <p class="text-sm text-muted-foreground">
        Contratos visuais prontos para copiar e adaptar.
      </p>
    </section>
  </div>
</template>
```

**HTML (copy-first)**

```html
<div class="itps-wavy-divider" aria-hidden="true">
  <svg width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="itps-wavy-divider-pattern" width="91" height="8" patternUnits="userSpaceOnUse">
        <path d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0" stroke="currentColor" stroke-linecap="square" fill="none" />
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#itps-wavy-divider-pattern)" />
  </svg>
</div>
```

## Instalação

O comando instala o Separator da sua stack com o tema Sinapse. Configure o registry uma vez por projeto em [Comece por aqui](/comecar).

**terminal · React/Next**

```sh
pnpm dlx shadcn@latest add @sinapse/wavy-divider
```

**terminal · Vue 3/Nuxt 4**

```sh
pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/wavy-divider.json
```

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

## Uso

Use Wavy Divider como ornamento entre seções extensas de páginas institucionais, landing pages e documentos longos. Ele não comunica estrutura por si só; headings, landmarks e ordem do conteúdo precisam continuar claros sem a onda.

Em React/Next com shadcn/ui e Vue 3/Nuxt 4 com shadcn-vue, use `Separator` quando a necessidade for um divisor simples ou semântico. O shadcn não fornece um componente primitivo ondulado padrão; para a onda Sinapse, copie o HTML/SVG copy-first.

## Exemplos

### Estrutura

| Peça | React/Next e Vue 3/Nuxt 4 | HTML |
|------|--------------------------|------|
| Separador simples | `Separator` | borda/linha do layout |
| Separador ondulado | composição própria | `itps-wavy-divider` |
| SVG | não aplicável | `<svg width="100%" height="8">` |
| Padrão | não aplicável | `<pattern patternUnits="userSpaceOnUse">` |
| Cor | tokens do `Separator` | `currentColor` herdado da classe |
| Acessibilidade | semântica do componente primitivo | `aria-hidden="true"` decorativo |

### Entre seções

Use a onda com espaçamento generoso e mantenha o conteúdo em seções reais. Se o divisor precisa ser anunciado por leitor de tela, ele deixou de ser decorativo; nesse caso prefira heading, landmark ou `Separator` semântico na stack.

**HTML (copy-first)**

```html
<div class="grid w-full gap-6">
  <section class="grid gap-3">
    <h3 class="text-lg font-semibold text-foreground">Fundamentos</h3>
    <p class="max-w-prose text-sm text-muted-foreground">
      Layout, grid, movimento e acessibilidade orientam a estrutura da página.
    </p>
  </section>

  <div class="itps-wavy-divider" aria-hidden="true">
    <svg width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="itps-wavy-divider-pattern-sections" width="91" height="8" patternUnits="userSpaceOnUse">
          <path d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0" stroke="currentColor" stroke-linecap="square" fill="none" />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill="url(#itps-wavy-divider-pattern-sections)" />
    </svg>
  </div>

  <section class="grid gap-3">
    <h3 class="text-lg font-semibold text-foreground">Componentes</h3>
    <p class="max-w-prose text-sm text-muted-foreground">
      Botão, cards, feedback e overlays seguem os tokens publicados pelo sistema.
    </p>
  </section>
</div>
```

## API copy-first

| Classe/atributo | Uso |
|-----------------|-----|
| `itps-wavy-divider` | Contêiner decorativo da onda, com largura total e margem vertical. |
| `svg[width="100%"][height="8"]` | Mantém a onda responsiva e baixa. |
| `patternUnits="userSpaceOnUse"` | Preserva a repetição horizontal do desenho. |
| `currentColor` | Herda a cor definida pela classe/tema. |
| `aria-hidden="true"` | Esconde a onda quando ela é decorativa. |

## Acessibilidade

Mantenha `aria-hidden="true"` no contêiner decorativo e não use a onda como único indicador de mudança de assunto. Se a página precisa comunicar uma nova região, use um título visível e uma estrutura semântica independente do SVG.