Sistema de Componentes

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

Ver todos os componentes

Se a sua pergunta é qual componente usar, comece pelo cheatsheet: todos os componentes do tema renderizados numa página só, cada um ao lado do código que o produziu.

Se a pergunta é quais props um componente aceita, use o Component Explorer — ele lista tag, variantes e slots de cada um, direto do registry.

O resto desta página explica como o sistema funciona por dentro: como declarar, como sobrescrever e em que ordem os componentes são carregados.

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
  variant:
    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 Templates

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

```seed
@card
  @title
    Título do card
  @description
    Subtítulo descritivo.
  @actions
    @button variant=primary
      Saiba mais
```

O arquivo card.template define como esses slots são organizados no HTML:

```seed
@div class=p-6
  @h3 class=text-xl font-semibold mb-2
    {title}
  @p class=text-gray-600 mb-4
    {?description}
  @div class=flex gap-2
    {?actions}
```

Slots opcionais ({?slot}) são omitidos silenciosamente se não preenchidos. Slots obrigatórios ({slot}) geram um bloco de erro amarelo no output se não preenchidos.

Variantes CSS vs. Templates

São conceitos independentes:

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

```seed
@card variant=featured, template=horizontal
  @title
    Card horizontal e destacado
```

Componentes personalizados

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

```yaml
# src/components/meu-card/meu-card.yaml
meu-card:
  tag: div
  class: bg-white rounded-xl shadow-md p-6
  variant:
    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
  variant:
    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
```

Prioridade de carregamento

Os componentes são carregados em duas camadas, da menor para a maior prioridade:

```
themes/<nome>/components/   ← camada base (tema)
src/components/             ← camada do projeto (sobrescreve o tema)
```

Se o mesmo nome existir nas duas camadas, a versão de src/components/ prevalece silenciosamente. Isso permite personalizar qualquer componente do tema sem modificá-lo — basta criar uma versão local com o mesmo nome:

```yaml
# src/components/button/button.yaml
# Substitui o @button do tema com bordas arredondadas e fonte maior
button:
  tag: button
  class: inline-flex items-center justify-center rounded-full font-bold text-base
  variant:
    primary: bg-indigo-600 text-white hover:bg-indigo-700
    secondary: bg-gray-100 text-gray-900 hover:bg-gray-200
```

Duplicata dentro da mesma camada (dois arquivos YAML no tema definindo o mesmo componente) gera um erro explícito no build.

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
```

Component Explorer

Durante o desenvolvimento (seed dev), pressione h no browser para abrir o Component Explorer — um painel que lista todos os componentes disponíveis no projeto, com suas props, variantes e slots.

Para cada componente o explorer exibe:

• Tag HTML gerada
• Modifier groups disponíveis (variant, size, etc.) com todos os valores válidos
• Slots do template, indicando quais são obrigatórios e quais são opcionais
• Templates alternativos disponíveis via template=
• Origem — se o componente vem do tema ou do projeto (src/components/)

Use a busca para filtrar por nome, modifier ou slot. Use os botões de camada para ver apenas componentes do tema ou apenas do projeto.

Feche com Esc ou clicando fora do painel. A tecla h também fecha.

Feito com ❤️ e Seed