# UI Óptago

[![npm](https://img.shields.io/npm/v/ui-optago.svg)](https://www.npmjs.com/package/ui-optago)
[![license](https://img.shields.io/npm/l/ui-optago.svg)](./LICENSE)

Design System da **[Óptago](https://optago.com.br)**: componentes UI em **CSS puro** + **JS vanilla**, sem build obrigatório. Tema escuro por padrão, tema claro automático, verde-lima `#C0FF6B` e ciano `#6BE0FF` como cores de destaque, e o octógono da marca como motivo visual.

## Instalação

**Via npm:**

```bash
npm install ui-optago
```

```html
<link rel="stylesheet" href="node_modules/ui-optago/ui-optago.css">
<script src="node_modules/ui-optago/ui-optago.js"></script>
```

**Via CDN** (não precisa instalar nada, adicione ao `<head>`):

```html
<link rel="stylesheet" href="https://unpkg.com/ui-optago/ui-optago.css">
<script src="https://unpkg.com/ui-optago/ui-optago.js"></script>
```

Em produção, fixe a versão para não sofrer quebras em atualizações:

```html
<link rel="stylesheet" href="https://unpkg.com/ui-optago@1.0.0/ui-optago.css">
<script src="https://unpkg.com/ui-optago@1.0.0/ui-optago.js"></script>
```

> Também funciona via jsDelivr: `https://cdn.jsdelivr.net/npm/ui-optago/ui-optago.css`

**Ou copie os arquivos direto** (`ui-optago.css` e `ui-optago.js`) para o seu projeto:

```html
<head>
    <link rel="stylesheet" href="ui-optago.css">
    <!-- Carregue no <head> SEM defer: o JS aplica o tema salvo antes do
         primeiro paint (evita flash de tema errado) e injeta sozinho as
         Google Fonts e os ícones Phosphor. -->
    <script src="ui-optago.js"></script>
</head>
```

## Showcase

Abra **`ui-optago.html`** no navegador: todos os componentes com botões **Copiar** (HTML pronto) e **Ver código**.

## Selo "Desenvolvido por Óptago"

Bloco pronto para o rodapé de qualquer site feito pela Óptago, mesmo sites que **não** usam o resto do design system. São dois arquivos HTML autocontidos (`<style>` + markup, sem depender de nada do site hospedeiro): `optago-credit-dark.html` (chip escuro translúcido, para fundos escuros ou neutros) e `optago-credit-light.html` (chip claro translúcido, para fundos claros). Escolha o que combina com o fundo onde o selo vai ficar.

**Via CDN**, sem copiar nada:

```html
<div id="optago-credit"></div>
<script>
  fetch('https://unpkg.com/ui-optago/optago-credit-dark.html')
    .then(r => r.text())
    .then(html => document.getElementById('optago-credit').innerHTML = html);
</script>
```

Fixe a versão em produção: `https://unpkg.com/ui-optago@1.2.3/optago-credit-dark.html` (troque `dark` por `light` conforme o caso). Também funciona via jsDelivr: `https://cdn.jsdelivr.net/npm/ui-optago/optago-credit-dark.html`.

**Ou copie o arquivo direto** para o seu projeto e sirva/inclua localmente (ex. `include` no PHP, import estático, etc.); cada arquivo já vem com essas instruções comentadas no topo.

## Estrutura de layout (app shell)

Header, footer e sidebar (à direita) fixos: só o `.op-main` rola. A sidebar colapsa no desktop (só ícones + tooltip) e vira drawer no mobile.

```html
<body class="op-app">
    <div class="op-app-body">
        <header class="op-header">...</header>
        <main class="op-main">CONTEÚDO ROLÁVEL</main>
        <footer class="op-footer">...</footer>
    </div>
    <aside class="op-sidebar">
        <nav class="op-sidebar-nav">
            <a class="op-nav-item" href="#secao">
                <i class="ph ph-palette"></i>
                <span class="op-nav-text">Título</span>
                <span class="op-nav-tooltip">Título</span>
            </a>
        </nav>
    </aside>
</body>
```

## Componentes

Todas as classes usam o prefixo `op-`; estados usam `is-` (`is-open`, `is-active`, `is-error`...).

| Grupo | Classes principais |
|---|---|
| Botões | `op-btn` + `op-btn-primary/secondary/success/danger/warning/info`, ghosts, `op-btn-sm/lg`, `op-btn-icon`, `op-btn-group`, `is-loading` |
| Badges | `op-badge` + `op-badge-brand/info/success/warning/danger`, `op-badge-pill`, `op-dot` |
| Alertas | `op-alert` + `op-alert-info/success/warning/danger`, `data-op-dismiss` |
| Formulários | `op-field`, `op-label`, `op-input`, `op-select`, `op-textarea`, `op-check`, `op-switch`, `op-range`, `op-input-group`, estados `is-error/is-success` |
| Tabelas | `op-table` (+ `op-table-hover/striped`) e Tabulator com tema Óptago via `OptagoUI.tabulator()` |
| Cards | `op-card`, `op-card-hover`, `op-stat` (KPI) |
| Feedback | `op-progress`, `op-spinner`, `op-skeleton` (+ `-thumb/-title/-btn/-badge/-row`), toasts |
| Navegação | `op-tabs` (linha, `op-tabs-pills`, `op-tabs-vertical`), `op-accordion`, `op-breadcrumb`, `op-pagination`, `op-dropdown` |
| Overlays | `op-modal` (+ `op-modal-drawer`, `op-modal-centered`, `op-modal-sm/lg`), tooltip via `data-op-tip` |
| Extras | `op-timeline` (marcadores octogonais), `op-glow` (manchas verde-lima desfocadas de fundo), `op-avatar` |

## Comportamentos via atributos `data-op-*`

Nenhum JS manual necessário, basta o atributo:

| Atributo | Ação |
|---|---|
| `data-op-theme-toggle` | Alterna tema claro/escuro (persiste em `localStorage`) |
| `data-op-sidebar-toggle` | Colapsa/expande a sidebar |
| `data-op-sidebar-mobile` | Abre/fecha o drawer no mobile |
| `data-op-modal-open="#id"` | Abre o modal |
| `data-op-modal-close` | Fecha o modal (dentro dele; ESC e clique no fundo também fecham) |
| `data-op-tab="nome"` | Botão de aba (com `data-op-tab-group` no container) |
| `data-op-dropdown-toggle` | Abre/fecha o `.op-dropdown` |
| `data-op-dismiss` | Remove o `.op-alert` pai |
| `data-op-tip="texto"` | Tooltip em CSS puro (variante `.op-tip-bottom`) |
| `data-op-copy="#sel"` / `data-op-code="#sel"` | Copiar HTML / ver código (showcase) |

## API JavaScript (`window.OptagoUI`)

```js
OptagoUI.toast('Deploy concluído!', 'success');   // 'success' | 'error' | 'warning' | 'info'
OptagoUI.openModal('#meuModal');
OptagoUI.closeModal('#meuModal');
OptagoUI.setTheme('light');                        // 'dark' | 'light'
OptagoUI.toggleSidebar();
OptagoUI.customize({ accent: '#FF6B00', radius: '6px' }); // sobrescreve tokens (--op-*) em runtime

// Tour guiado (carrega driver.js do CDN sob demanda, já com tema Óptago)
OptagoUI.tour([
  { element: '#meu-elemento', popover: { title: 'Passo 1', description: 'Texto explicativo.' } },
  { element: '#outro',        popover: { title: 'Passo 2', description: 'Continue aqui.'    } },
  { popover: { title: 'Pronto!', description: 'Tour concluído.' } } // sem element = modal central
]).then(d => { /* instância driver.js, opcional */ });

// Tabela avançada (carrega o Tabulator do CDN sob demanda, já com tema Óptago)
OptagoUI.tabulator('#minhaTabela', {
    layout: 'fitColumns',
    pagination: true,
    data: [...],
    columns: [...]
}).then(tabela => { /* instância Tabulator */ });
```

## Tokens (CSS Custom Properties)

Personalize sobrescrevendo as variáveis no seu próprio CSS:

```css
:root {
    --op-accent: #C0FF6B;   /* verde-lima da marca */
    --op-cyan: #6BE0FF;     /* ciano: cor secundária da marca */
    --op-info: #3B82F6;
    --op-success: #10B981;
    --op-warning: #F59E0B;
    --op-danger: #EF4444;
    --op-radius: 12px;
    /* superfícies: --op-bg, --op-panel, --op-border, --op-text, --op-muted... */
}
```

Ou em runtime via JS (ex.: cor por tenant/cliente vinda de uma API), sem precisar de `<style>` próprio:

```js
OptagoUI.customize({ accent: '#FF6B00', cyan: '#00B8D9', radius: '6px' });
// nomes curtos viram --op-*, mas o nome completo também funciona:
OptagoUI.customize({ '--op-accent': '#FF6B00' });
```

Lista completa de tokens e exemplos ao vivo: seção **Customizando** do [showcase](index.html#customizando).

Tema claro = classe `light` no `<html>` (gerenciada automaticamente pelo JS).

### Tema compartilhado entre subdomínios

Por padrão, a escolha de tema fica em `localStorage`, isolada por app. Para vários apps sob o mesmo domínio compartilharem a mesma escolha (ex.: `app1.seusite.com` e `app2.seusite.com`), adicione `data-op-theme-domain` no `<script>` da lib:

```html
<script src="ui-optago.js" data-op-theme-domain=".seusite.com"></script>
```

Com isso, o tema passa a ser salvo também num cookie com `Domain=.seusite.com` (além do `localStorage`, mantido como fallback), lido por qualquer subdomínio que carregue a lib com o mesmo atributo. Use um domínio de verdade, começando com `.`; não use o domínio de outro site.

## Dependências em runtime

Injetadas automaticamente pelo `ui-optago.js` (CDN): Google Fonts (Chakra Petch, Inter, JetBrains Mono) e Phosphor Icons. Tabulator só é baixado se `OptagoUI.tabulator()` for chamado.
