Sistema de Componentes

O Seed oferece dois tipos de componentes: componentes simples (baseados em YAML) e componentes com design templates (que encapsulam estrutura HTML complexa).

Componentes simples

Definidos por um arquivo YAML, mapeiam um nome para uma tag HTML, classes base e variantes:

```yaml
button:
  tag: button
  class: inline-flex items-center justify-center rounded-lg font-semibold
  variants:
    primary: bg-indigo-600 text-white hover:bg-indigo-700
    secondary: bg-gray-200 text-gray-900 hover:bg-gray-300
```

Uso:

```seed
@button variant=primary
  Clique
```

Resultado:

```html
<button class="inline-flex items-center ... bg-indigo-600 text-white ...">
  Clique
</button>
```

Componentes com Design Templates

Componentes mais complexos usam arquivos .design para definir sua estrutura interna. Você preenche slots nomeados:

```seed
@hero
  @title
    Título principal
  @description
    Subtítulo da página.
  @cta
    @button variant=primary
      Ação
  @image src=/img.jpg, alt=Imagem
```

O arquivo hero.design define como esses slots são organizados no HTML:

```seed
@div class=flex flex-col lg:flex-row items-center gap-12
  @div class=flex-1
    {image}
  @div class=flex-1
    @h1 class=text-5xl font-bold
      {title}
    @p class=py-6 text-lg opacity-80
      {description}
    @div class=flex gap-4
      {cta}
```

Slots não preenchidos não geram HTML. Se você não passar @image, não haverá elemento de imagem no output.

Variantes CSS vs. Design

São conceitos independentes:

• variant=dark — altera as classes CSS do elemento raiz (cor, fundo, etc.)
• design=center — altera o template de estrutura HTML (layout, slots, organização)

```seed
@hero variant=dark, design=center
  @title
    Centrado e escuro
```

Componentes personalizados

Você pode criar componentes próprios em src/components/. O Seed carrega automaticamente qualquer .yaml e .design dessa pasta:

```yaml
# src/components/meu-card/meu-card.yaml
meu-card:
  tag: div
  class: bg-white rounded-xl shadow-md p-6
  variants:
    destaque: ring-2 ring-indigo-500

# src/components/meu-badge/meu-badge.yaml
meu-badge:
  tag: span
  class: inline-block px-2 py-0.5 rounded text-xs font-bold
  variants:
    verde: bg-green-100 text-green-800
    vermelho: bg-red-100 text-red-800
```

Uso:

```seed
@meu-card variant=destaque
  Conteúdo do card

@meu-badge variant=verde
  Novo
```

Prop class para customização pontual

Qualquer componente aceita class para adicionar classes extras sem criar uma variante:

```seed
@button variant=primary, class=w-full text-lg
  Botão cheio
```