Props & Variantes

Props são os parâmetros que você passa para componentes. Variantes são conjuntos predefinidos de classes CSS que alteram a aparência de um componente.

Props reservadas

Prop	Tipo	Descrição
`variant`	string	Seleciona variante CSS do componente (`primary`, `dark`, etc.)
`design`	string	Seleciona design template (`default`, `center`, `cards`, etc.)
`class`	string	Classes CSS extras adicionadas após as classes base e de variante
`href`	string	` se não for tag `a` data-node-id="380620ab">
`target`	string	Atributo `target` para o link (`_blank`, `_self`, etc.)
`rel`	string

Props HTML passthrough

Qualquer prop não reservada é passada como atributo HTML do elemento:

```seed
@button variant=primary, type=submit, form=meu-form, aria-label=Enviar
  Enviar

@image src=/foto.jpg, alt=Minha foto, loading=lazy, width=800, height=600
```

Prioridade de classes

A ordem de aplicação das classes é:

1. Classes base (definidas no YAML, ex: inline-flex items-center)
2. Classes de variante (selecionadas por variant=, ex: bg-indigo-600)
3. Classes custom (passadas via class=, ex: w-full mt-4)

Quando duas classes têm o mesmo prefixo CSS (ex: bg-), a de maior prioridade vence. Isso permite sobrescrever a cor de fundo de uma variante sem duplicar classes.

Múltiplas variantes

Você pode combinar múltiplas variantes separadas por espaço:

```seed
@button variant=primary large
  Botão grande primário
```

Deduplicação de classes

O Seed deduplica classes com o mesmo prefixo CSS automaticamente. Por exemplo, se a base tem bg-gray-200 e a variante tem bg-indigo-600, o output final usa apenas bg-indigo-600.

⚠️

A deduplicação funciona para prefixos conhecidos do Tailwind. Classes customizadas sem prefixo reconhecido não são deduplicadas e podem gerar conflitos.

Flags booleanas

Props sem valor e sem = são tratadas como flags booleanas true:

```seed
@button variant=primary, disabled
  Desabilitado
```

Gera: <button class="..." disabled>Desabilitado</button>