Aula 4: Variantes e Composição — Um Componente, Muitas Formas
Você tem `PrimaryButton`, `SecondaryButton`, `GhostButton` — três componentes com o mesmo markup copiado e colado. O PM pede cantos arredondados em todos eles, e você edita três arquivos. Esta aula ensina a construir um único `Button` com uma prop `variant` que mapeia para classes baseadas em tokens
Variantes são como um cardápio de café: existe uma máquina, e você escolhe o tamanho e o tipo de leite. Você não compra uma máquina separada para cada bebida — você compõe o que precisa a partir das mesmas peças.
- component variant
- Uma entre várias formas do mesmo componente — `primary`, `secondary`, `ghost` — selecionada por meio de uma prop em vez de um componente separado para cada forma.
- variant map
- Um objeto que mapeia cada valor de prop para suas classes (geralmente via `cva`) — uma única fonte de verdade para todas as formas do componente.
- composition
- Construir comportamento a partir de partes combináveis (props, variantes) em vez de duplicar código — adicionar uma forma é uma nova entrada no mapa, não um novo arquivo.
- prop-driven styling
- Escolher o estilo a partir de valores de prop (`variant`, `size`) traduzidos em classes — de modo que a API do componente descreva intenção, não uma lista de classes.
