Props & Modifiers

Props são os parâmetros que você passa para componentes. Modifiers são grupos nomeados de classes CSS que alteram aspectos independentes de um componente — como aparência, tamanho ou comportamento.

Props reservadas

A prop as

A prop as é uma válvula de escape: força o Seed a renderizar o componente como uma tag HTML pura, ignorando completamente o registro de componentes (YAML, template, classes). Útil quando o nome do componente conflita com uma tag HTML que você quer usar diretamente.

```seed
@nav as=nav
  @ul
    @li
      Item 1
    @li
      Item 2
```

Sem as=nav, o Seed procuraria um componente nav no registro. Com as=nav, ele renderiza diretamente como <nav>:

```html
<nav>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</nav>
```

Você pode usar qualquer tag HTML válida como valor — as=section, as=article, as=aside, etc. Props como class e href continuam funcionando normalmente.

Modifiers

Qualquer chave do YAML que não seja tag, class ou template é um modifier group — um conjunto nomeado de opções que mapeiam para classes CSS. Ao usar o componente, você passa o nome do grupo como prop e o valor seleciona as classes.

Exemplo de definição YAML:

```yaml
avatar:
  tag: img
  class: w-12 h-12 rounded-full
  variant:
    rounded: rounded-full
    square: rounded-none
  size:
    small: w-8 h-8
    medium: w-12 h-12
    large: w-16 h-16
```

Uso no .seed:

```seed
@avatar src=https://exemplo.com/foto.jpg, size=small
@avatar src=https://exemplo.com/foto.jpg, variant=square, size=large
```

Os modifiers variant e size não viram atributos HTML — apenas modificam as classes CSS aplicadas. HTML gerado:

```html
<img class="rounded-full w-8 h-8" src="https://exemplo.com/foto.jpg" />
<img class="rounded-none w-16 h-16" src="https://exemplo.com/foto.jpg" />
```

Props HTML passthrough

Qualquer prop que não seja reservada e não corresponda a um modifier group do componente é passada como atributo HTML:

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

@avatar src=foto.jpg, alt=Minha foto, size=small
```

Como as classes são montadas

Quando você usa um componente, o Seed monta a lista de classes em três camadas, nessa ordem:

```
1. classes base    →  definidas em class: no YAML
2. classes modifier →  adicionadas por cada variante/size/etc. que você passou
3. classes custom  →  passadas via class= no .seed
```

A regra é simples: a camada mais alta vence. Se uma classe de modifier conflita com a base, a do modifier fica. Se você passa class=, ela tem a palavra final.

Exemplo com o componente avatar definido assim:

```yaml
avatar:
  tag: img
  class: w-12 h-12 rounded-full object-cover
  size:
    small: w-8 h-8
    large: w-16 h-16
```

Ao usar @avatar size=small, class=border-2:

```
base:     w-12  h-12  rounded-full  object-cover
size:     w-8   h-8
class:                              border-2
          ↓     ↓     ↓             ↓
resultado: w-8  h-8  rounded-full  object-cover  border-2
```

w-12 e h-12 da base foram substituídos por w-8 e h-8 do modifier size=small — porque w- e h- são o mesmo "tipo" de classe. rounded-full e object-cover não tiveram concorrentes, então permaneceram. border-2 foi acrescentado no final.

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>

Feito com ❤️ e Seed