# Atualizacao de Componentes de Formulario

**Data:** 2025-12-26
**Projeto:** PHD_CURANS
**Autor:** Desenvolvimento

## Resumo

Durante a implementacao do modulo Organizations no PHD_CURANS, identificamos que os componentes nativos de formulario HTML (especialmente `<select>`) tinham UX muito inferior ao esperado pelo Design System PharmData.

Este documento descreve as implementacoes realizadas para que sejam incorporadas ao Design System oficial.

---

## 1. Componentes Criados

### 1.1 `.form-input`

Input de texto estilizado com feedback visual aprimorado.

```css
.form-input {
  width: 100%;
  padding: 0.625rem 1rem;  /* py-2.5 px-4 */
  border-radius: 0.5rem;   /* rounded-lg */
  transition: all 0.2s;
  background: white;
  border: 1.5px solid rgba(183, 228, 213, 0.4);  /* mint-signal translucido */
  color: var(--graphite-depth);
  font-size: 0.9375rem;    /* 15px */
}

.form-input:hover {
  border-color: var(--teal-intense);
}

.form-input:focus {
  outline: none;
  border-color: var(--teal-intense);
  box-shadow:
    0 0 0 3px rgba(42, 161, 152, 0.12),  /* ring teal translucido */
    0 2px 8px rgba(42, 161, 152, 0.08);  /* sombra sutil */
}

.form-input::placeholder {
  color: var(--soft-steel);
  opacity: 0.6;
}
```

**Caracteristicas:**
- Borda sutil usando mint-signal translucido (nao cinza)
- Hover mostra intencao de interacao
- Focus com ring duplo (glow + shadow) para destaque claro
- Placeholder discreto mas legivel

---

### 1.2 `.form-select`

Select customizado que substitui o visual nativo do browser.

```css
.form-select {
  width: 100%;
  padding: 0.625rem 1rem;
  padding-right: 2.75rem;  /* espaco para seta */
  border-radius: 0.5rem;
  transition: all 0.2s;
  cursor: pointer;
  background: white;
  border: 1.5px solid rgba(183, 228, 213, 0.4);
  color: var(--graphite-depth);
  font-size: 0.9375rem;
  appearance: none;        /* remove seta nativa */

  /* Seta customizada em SVG inline (cor teal-intense) */
  background-image: url("data:image/svg+xml,...chevron-down...");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}

.form-select:hover {
  border-color: var(--teal-intense);
  background-color: rgba(183, 228, 213, 0.03);  /* hint de hover */
}

.form-select:focus {
  outline: none;
  border-color: var(--teal-intense);
  box-shadow:
    0 0 0 3px rgba(42, 161, 152, 0.12),
    0 2px 8px rgba(42, 161, 152, 0.08);
}
```

**Caracteristicas:**
- Seta chevron-down em SVG inline (cor teal-intense)
- Remove `appearance: none` para esconder seta nativa
- Padding direito extra para acomodar seta
- Hover com background hint sutil
- Mesmos estados de focus que `.form-input`

**Icone SVG da seta:**
```svg
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'
     fill='none' stroke='#2AA198' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
  <polyline points='6 9 12 15 18 9'></polyline>
</svg>
```

---

### 1.3 `.form-label`

Label padronizado para campos de formulario.

```css
.form-label {
  display: block;
  font-size: 0.75rem;        /* text-xs */
  font-weight: 600;          /* semibold */
  text-transform: uppercase;
  letter-spacing: 0.05em;    /* tracking-wider */
  margin-bottom: 0.5rem;
  color: var(--emerald-abyss);
}

.form-label i {
  margin-right: 0.375rem;
  opacity: 0.6;
}
```

**Caracteristicas:**
- Uppercase com tracking para hierarquia clara
- Cor emerald-abyss (primaria) para peso visual
- Icone opcional com opacidade reduzida

---

### 1.4 `.form-input-icon`

Container para input com icone a esquerda.

```css
.form-input-icon {
  position: relative;
}

.form-input-icon .form-input {
  padding-left: 2.75rem;  /* espaco para icone */
}

.form-input-icon i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--teal-intense);
}
```

**Uso:**
```html
<div class="form-input-icon">
  <i class="fas fa-search"></i>
  <input type="text" class="form-input" placeholder="Buscar...">
</div>
```

---

### 1.5 `.form-group`

Container para agrupamento de label + input.

```css
.form-group {
  margin-bottom: 1rem;
}
```

---

## 2. Padroes de Uso

### 2.1 Input de Busca com Icone

```html
<div class="form-group">
  <label class="form-label">
    <i class="fas fa-search"></i> Buscar
  </label>
  <div class="form-input-icon">
    <i class="fas fa-search"></i>
    <input type="text" class="form-input" placeholder="Nome, CNPJ...">
  </div>
</div>
```

### 2.2 Select de Filtro

```html
<div class="form-group">
  <label class="form-label">
    <i class="fas fa-tag"></i> Categoria
  </label>
  <select class="form-select">
    <option value="">Todas as categorias</option>
    <option value="1">Industria Farmaceutica</option>
    <option value="2">Distribuidora</option>
  </select>
</div>
```

### 2.3 Formulario Inline (Filtros)

```html
<form class="flex flex-wrap gap-4 items-end">
  <div class="flex-1 min-w-[280px]">
    <label class="form-label">Buscar</label>
    <input type="text" class="form-input">
  </div>
  <div class="w-56">
    <label class="form-label">Filtro</label>
    <select class="form-select">...</select>
  </div>
  <button type="submit" class="btn-primary">Filtrar</button>
</form>
```

---

## 3. Estados

| Estado | Borda | Background | Sombra |
|--------|-------|------------|--------|
| Default | `rgba(183, 228, 213, 0.4)` | white | none |
| Hover | `var(--teal-intense)` | white (select: hint) | none |
| Focus | `var(--teal-intense)` | white | ring + shadow |
| Disabled | `rgba(183, 228, 213, 0.2)` | `var(--arctic-mist)` | none |

---

## 4. Tokens de Cor Utilizados

| Token | Valor | Uso |
|-------|-------|-----|
| `--emerald-abyss` | `#0B2D2A` | Labels |
| `--graphite-depth` | `#1F2937` | Texto dos inputs |
| `--soft-steel` | `#374151` | Placeholders |
| `--teal-intense` | `#2AA198` | Bordas ativas, icones |
| `--mint-signal` | `#B7E4D5` | Bordas default (translucido) |

---

## 5. Recomendacoes para o Design System

1. **Adicionar secao "Forms" no Design System** com estes componentes
2. **Criar variantes de tamanho**: `.form-input-sm`, `.form-input-lg`
3. **Adicionar estados de erro**: `.form-input-error` com borda `var(--error)`
4. **Considerar dropdown customizado** com JavaScript para melhor UX em selects com muitas opcoes
5. **Documentar grid de formulario** para layouts consistentes

---

## 6. Arquivos Modificados

- `/app/static/css/input.css` - Definicoes dos componentes
- `/app/templates/organizations/list.html` - Exemplo de uso

---

## 7. Preview Visual

```
+----------------------------------------------+
| BUSCAR                                       |
| +------------------------------------------+ |
| | [Q] Nome, CNPJ ou nome fantasia...       | |
| +------------------------------------------+ |
|                                              |
| CATEGORIA                                    |
| +------------------------------------------+ |
| | Todas as categorias                   [v]| |
| +------------------------------------------+ |
+----------------------------------------------+
```

Onde:
- `[Q]` = icone de busca (teal-intense)
- `[v]` = chevron-down customizado (teal-intense)
- Bordas com mint-signal translucido
- Focus mostra ring teal ao redor