# Design System — Componentes Base

Componentes em `src/components/base/`. São a base de toda a UI — sempre prefira esses componentes a elementos HTML nativos.

---

## BaseButton

**Arquivo:** `src/components/base/BaseButton.vue`

Botão com suporte a variantes, tamanhos e estado de carregamento.

### Props

| Prop | Tipo | Padrão | Valores aceitos |
|---|---|---|---|
| `variant` | `String` | `"primary"` | `"primary"` · `"secondary"` · `"ghost"` · `"danger"` |
| `size` | `String` | `"md"` | `"sm"` · `"md"` · `"lg"` |
| `type` | `String` | `"button"` | `"button"` · `"submit"` · `"reset"` |
| `disabled` | `Boolean` | `false` | — |
| `loading` | `Boolean` | `false` | Exibe spinner e bloqueia cliques |

### Variantes

| Variante | Uso |
|---|---|
| `primary` | Ação principal da tela (submit, confirmar) |
| `secondary` | Ação secundária, menos destaque |
| `ghost` | Ação discreta, sem borda ou fundo visível |
| `danger` | Ações destrutivas (excluir, revogar) |

### Exemplos

```vue
<BaseButton>Salvar</BaseButton>

<BaseButton variant="secondary" size="sm">Cancelar</BaseButton>

<BaseButton variant="danger" :loading="salvando" @click="excluir">
  Excluir
</BaseButton>

<BaseButton type="submit" :disabled="!formValido">Enviar</BaseButton>
```

---

## BaseInput

**Arquivo:** `src/components/base/BaseInput.vue`

Campo de texto com suporte a label, hint e mensagem de erro. Compatível com `v-model`.

### Props

| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| `modelValue` | `String` | `""` | Valor do campo (use com `v-model`) |
| `label` | `String` | `""` | Rótulo exibido acima do input |
| `hint` | `String` | `""` | Texto de ajuda abaixo do campo |
| `error` | `String` | `""` | Mensagem de erro (substitui hint quando preenchida) |
| `id` | `String` | `""` | ID do input; gerado automaticamente se omitido |

Aceita todos os atributos HTML nativos de `<input>` via `v-bind="$attrs"` (ex: `placeholder`, `type`, `autocomplete`).

### Exemplos

```vue
<BaseInput v-model="nome" label="Nome completo" placeholder="Ex: João Silva" />

<BaseInput
  v-model="email"
  label="E-mail"
  type="email"
  hint="Usado para login no sistema"
  :error="erros.email"
/>

<BaseInput v-model="senha" label="Senha" type="password" />
```

---

## BaseBadge

**Arquivo:** `src/components/base/BaseBadge.vue`

Chip/etiqueta para exibir status, categorias ou contadores.

### Props

| Prop | Tipo | Padrão | Valores aceitos |
|---|---|---|---|
| `variant` | `String` | `"default"` | `"default"` · `"success"` · `"danger"` · `"info"` · `"warning"` · `"violet"` |

### Variantes

| Variante | Cor | Uso sugerido |
|---|---|---|
| `default` | Cinza | Status genérico, neutro |
| `success` | Verde | Ativo, aprovado, concluído |
| `danger` | Vermelho | Inativo, erro, bloqueado |
| `info` | Azul | Informação, em andamento |
| `warning` | Âmbar | Alerta, pendente |
| `violet` | Violeta | Destaque especial, admin |

### Exemplos

```vue
<BaseBadge variant="success">Ativo</BaseBadge>

<BaseBadge variant="danger">Inativo</BaseBadge>

<BaseBadge variant="violet">Admin</BaseBadge>

<BaseBadge>Padrão</BaseBadge>
```

---

## Skeletons

**Pasta:** `src/components/skeletons/`

| Componente | Uso |
|---|---|
| `SkeletonConversation.vue` | Placeholder de item de conversa na sidebar |
| `SkeletonDocumentCard.vue` | Placeholder de card de documento na listagem |

Exibidos durante o carregamento assíncrono, substituídos pelo conteúdo real quando os dados chegam.