ui-optago 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +136 -0
  2. package/package.json +26 -0
  3. package/ui-optago.css +1917 -0
  4. package/ui-optago.html +1209 -0
  5. package/ui-optago.js +446 -0
package/README.md ADDED
@@ -0,0 +1,136 @@
1
+ # UI Óptago
2
+
3
+ Design System da **Óptago** — componentes UI em **CSS puro** + **JS vanilla**, sem Tailwind e sem build obrigatório. Tema escuro por padrão, tema claro automático, verde-lima `#C0FF6B` como cor de destaque e o octógono da marca como motivo visual.
4
+
5
+ ## Instalação
6
+
7
+ **Via npm:**
8
+
9
+ ```bash
10
+ npm install ui-optago
11
+ ```
12
+
13
+ ```html
14
+ <link rel="stylesheet" href="node_modules/ui-optago/ui-optago.css">
15
+ <script src="node_modules/ui-optago/ui-optago.js"></script>
16
+ ```
17
+
18
+ **Via CDN (após publicado no npm):**
19
+
20
+ ```html
21
+ <link rel="stylesheet" href="https://unpkg.com/ui-optago/ui-optago.css">
22
+ <script src="https://unpkg.com/ui-optago/ui-optago.js"></script>
23
+ ```
24
+
25
+ **Ou copie os arquivos direto** (`ui-optago.css` e `ui-optago.js`) para o seu projeto:
26
+
27
+ ```html
28
+ <head>
29
+ <link rel="stylesheet" href="ui-optago.css">
30
+ <!-- Carregue no <head> SEM defer: o JS aplica o tema salvo antes do
31
+ primeiro paint (evita flash de tema errado) e injeta sozinho as
32
+ Google Fonts e os ícones Phosphor. -->
33
+ <script src="ui-optago.js"></script>
34
+ </head>
35
+ ```
36
+
37
+ ## Showcase
38
+
39
+ Abra **`ui-optago.html`** no navegador: todos os componentes com botões **Copiar** (HTML pronto) e **Ver código**.
40
+
41
+ ## Estrutura de layout (app shell)
42
+
43
+ Header, footer e sidebar (à direita) fixos — só o `.op-main` rola. A sidebar colapsa no desktop (só ícones + tooltip) e vira drawer no mobile.
44
+
45
+ ```html
46
+ <body class="op-app">
47
+ <div class="op-app-body">
48
+ <header class="op-header">...</header>
49
+ <main class="op-main">CONTEÚDO ROLÁVEL</main>
50
+ <footer class="op-footer">...</footer>
51
+ </div>
52
+ <aside class="op-sidebar">
53
+ <nav class="op-sidebar-nav">
54
+ <a class="op-nav-item" href="#secao">
55
+ <i class="ph ph-palette"></i>
56
+ <span class="op-nav-text">Título</span>
57
+ <span class="op-nav-tooltip">Título</span>
58
+ </a>
59
+ </nav>
60
+ </aside>
61
+ </body>
62
+ ```
63
+
64
+ ## Componentes
65
+
66
+ Todas as classes usam o prefixo `op-`; estados usam `is-` (`is-open`, `is-active`, `is-error`...).
67
+
68
+ | Grupo | Classes principais |
69
+ |---|---|
70
+ | 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` |
71
+ | Badges | `op-badge` + `op-badge-brand/info/success/warning/danger`, `op-badge-pill`, `op-dot` |
72
+ | Alertas | `op-alert` + `op-alert-info/success/warning/danger`, `data-op-dismiss` |
73
+ | 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` |
74
+ | Tabelas | `op-table` (+ `op-table-hover/striped`) e Tabulator com tema Óptago via `OptagoUI.tabulator()` |
75
+ | Cards | `op-card`, `op-card-hover`, `op-stat` (KPI) |
76
+ | Feedback | `op-progress`, `op-spinner`, `op-skeleton` (+ `-thumb/-title/-btn/-badge/-row`), toasts |
77
+ | Navegação | `op-tabs` (linha, `op-tabs-pills`, `op-tabs-vertical`), `op-accordion`, `op-breadcrumb`, `op-pagination`, `op-dropdown` |
78
+ | Overlays | `op-modal` (+ `op-modal-drawer`, `op-modal-centered`, `op-modal-sm/lg`), tooltip via `data-op-tip` |
79
+ | Extras | `op-timeline` (marcadores octogonais), `op-glow` (manchas verde-lima desfocadas de fundo), `op-avatar` |
80
+
81
+ ## Comportamentos via atributos `data-op-*`
82
+
83
+ Nenhum JS manual necessário — basta o atributo:
84
+
85
+ | Atributo | Ação |
86
+ |---|---|
87
+ | `data-op-theme-toggle` | Alterna tema claro/escuro (persiste em `localStorage`) |
88
+ | `data-op-sidebar-toggle` | Colapsa/expande a sidebar |
89
+ | `data-op-sidebar-mobile` | Abre/fecha o drawer no mobile |
90
+ | `data-op-modal-open="#id"` | Abre o modal |
91
+ | `data-op-modal-close` | Fecha o modal (dentro dele; ESC e clique no fundo também fecham) |
92
+ | `data-op-tab="nome"` | Botão de aba (com `data-op-tab-group` no container) |
93
+ | `data-op-dropdown-toggle` | Abre/fecha o `.op-dropdown` |
94
+ | `data-op-dismiss` | Remove o `.op-alert` pai |
95
+ | `data-op-tip="texto"` | Tooltip em CSS puro (variante `.op-tip-bottom`) |
96
+ | `data-op-copy="#sel"` / `data-op-code="#sel"` | Copiar HTML / ver código (showcase) |
97
+
98
+ ## API JavaScript (`window.OptagoUI`)
99
+
100
+ ```js
101
+ OptagoUI.toast('Deploy concluído!', 'success'); // 'success' | 'error' | 'warning' | 'info'
102
+ OptagoUI.openModal('#meuModal');
103
+ OptagoUI.closeModal('#meuModal');
104
+ OptagoUI.setTheme('light'); // 'dark' | 'light'
105
+ OptagoUI.toggleSidebar();
106
+
107
+ // Tabela avançada (carrega o Tabulator do CDN sob demanda, já com tema Óptago)
108
+ OptagoUI.tabulator('#minhaTabela', {
109
+ layout: 'fitColumns',
110
+ pagination: true,
111
+ data: [...],
112
+ columns: [...]
113
+ }).then(tabela => { /* instância Tabulator */ });
114
+ ```
115
+
116
+ ## Tokens (CSS Custom Properties)
117
+
118
+ Personalize sobrescrevendo as variáveis no seu próprio CSS:
119
+
120
+ ```css
121
+ :root {
122
+ --op-accent: #C0FF6B; /* verde-lima da marca */
123
+ --op-info: #3B82F6;
124
+ --op-success: #10B981;
125
+ --op-warning: #F59E0B;
126
+ --op-danger: #EF4444;
127
+ --op-radius: 12px;
128
+ /* superfícies: --op-bg, --op-panel, --op-border, --op-text, --op-muted... */
129
+ }
130
+ ```
131
+
132
+ Tema claro = classe `light` no `<html>` (gerenciada automaticamente pelo JS).
133
+
134
+ ## Dependências em runtime
135
+
136
+ 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.
package/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "ui-optago",
3
+ "version": "1.0.0",
4
+ "description": "Design System Óptago — componentes UI em CSS puro + JS vanilla, com tema claro/escuro, verde-lima (#C0FF6B) e app shell com sidebar colapsável.",
5
+ "author": "Óptago <cowork@optago.com.br> (https://optago.com.br)",
6
+ "license": "MIT",
7
+ "homepage": "https://optago.com.br",
8
+ "keywords": [
9
+ "design-system",
10
+ "ui",
11
+ "css",
12
+ "components",
13
+ "dark-mode",
14
+ "vanilla-js",
15
+ "optago"
16
+ ],
17
+ "main": "ui-optago.js",
18
+ "style": "ui-optago.css",
19
+ "unpkg": "ui-optago.js",
20
+ "jsdelivr": "ui-optago.js",
21
+ "files": [
22
+ "ui-optago.css",
23
+ "ui-optago.js",
24
+ "ui-optago.html"
25
+ ]
26
+ }