zark-design 1.0.0 → 3.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 (66) hide show
  1. package/bin/cli.js +364 -90
  2. package/package.json +2 -2
  3. package/templates/README.md.hbs +264 -0
  4. package/templates/_shared/ASSETS-README.md.hbs +39 -0
  5. package/templates/_shared/tokens.css.hbs +202 -0
  6. package/templates/_shared/tokens.js.hbs +34 -0
  7. package/templates/html/components.css +740 -0
  8. package/templates/html/index.html +135 -0
  9. package/templates/html/showcase.html +3550 -0
  10. package/templates/jsx/App.example.jsx +229 -0
  11. package/templates/jsx/components/AlertCritical.jsx +43 -0
  12. package/templates/jsx/components/Avatar.jsx +41 -0
  13. package/templates/jsx/components/Badge.jsx +12 -0
  14. package/templates/jsx/components/Banner.jsx +42 -0
  15. package/templates/jsx/components/Button.jsx +43 -0
  16. package/templates/jsx/components/Chip.jsx +28 -0
  17. package/templates/jsx/components/CodeBlock.jsx +42 -0
  18. package/templates/jsx/components/EmptyState.jsx +27 -0
  19. package/templates/jsx/components/Funnel.jsx +55 -0
  20. package/templates/jsx/components/Input.jsx +53 -0
  21. package/templates/jsx/components/KanbanColumn.jsx +51 -0
  22. package/templates/jsx/components/Kbd.jsx +11 -0
  23. package/templates/jsx/components/LeadCard.jsx +79 -0
  24. package/templates/jsx/components/Modal.jsx +57 -0
  25. package/templates/jsx/components/Panel.jsx +25 -0
  26. package/templates/jsx/components/Section.jsx +28 -0
  27. package/templates/jsx/components/Segmented.jsx +26 -0
  28. package/templates/jsx/components/Sidebar.jsx +49 -0
  29. package/templates/jsx/components/Spec.jsx +19 -0
  30. package/templates/jsx/components/StatCard.jsx +44 -0
  31. package/templates/jsx/components/TableActions.jsx +34 -0
  32. package/templates/jsx/components/Tag.jsx +21 -0
  33. package/templates/jsx/components/TagDot.jsx +26 -0
  34. package/templates/jsx/components/Toast.jsx +25 -0
  35. package/templates/jsx/components/Toggle.jsx +29 -0
  36. package/templates/jsx/components.css +740 -0
  37. package/templates/{icons.jsx → jsx/icons.jsx} +20 -9
  38. package/templates/jsx/index.js +31 -0
  39. package/templates/presets/zark/preset.json +26 -0
  40. package/templates/REFERENCE.md +0 -376
  41. package/templates/SHOWCASE.html +0 -254
  42. package/templates/brand.jsx +0 -89
  43. package/templates/components.jsx +0 -385
  44. package/templates/design-canvas.jsx +0 -789
  45. package/templates/foundations.jsx +0 -363
  46. package/templates/layouts.jsx +0 -232
  47. package/templates/patterns.jsx +0 -268
  48. package/templates/primitives.jsx +0 -306
  49. package/templates/tokens.css +0 -306
  50. package/templates/visual-references/icon-zark.png +0 -0
  51. package/templates/visual-references/logo-zark-principal.png +0 -0
  52. package/templates/visual-references/pasted-1777605750385-0.png +0 -0
  53. package/templates/visual-references/pasted-1777605766298-0.png +0 -0
  54. package/templates/visual-references/pasted-1777605775820-0.png +0 -0
  55. package/templates/visual-references/pasted-1777605789833-0.png +0 -0
  56. package/templates/visual-references/pasted-1777605802420-0.png +0 -0
  57. package/templates/visual-references/pasted-1777605812470-0.png +0 -0
  58. package/templates/visual-references/pasted-1777605817688-0.png +0 -0
  59. package/templates/visual-references/pasted-1777605828485-0.png +0 -0
  60. package/templates/visual-references/pasted-1777605837137-0.png +0 -0
  61. package/templates/visual-references/pasted-1777605849789-0.png +0 -0
  62. package/templates/visual-references/pasted-1777605864942-0.png +0 -0
  63. package/templates/visual-references/pasted-1777605877920-0.png +0 -0
  64. package/templates/visual-references/pasted-1777605897353-0.png +0 -0
  65. /package/templates/{assets/zark-logo.png → presets/zark/assets/logo-zark-laranja.png} +0 -0
  66. /package/templates/{assets → presets/zark/assets}/zark-icon.png +0 -0
package/templates/html/index.html ADDED
@@ -0,0 +1,135 @@
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR" data-theme="light">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>ZARK · Exemplo mínimo</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com"/>
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"/>
10
+ <link rel="stylesheet" href="tokens.css"/>
11
+ <link rel="stylesheet" href="components.css"/>
12
+ </head>
13
+ <body>
14
+
15
+ <!-- App shell -->
16
+ <div style="display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh">
17
+
18
+ <!-- SIDEBAR -->
19
+ <aside class="zk-sidebar">
20
+ <div class="zk-sidebar-brand">
21
+ <img src="assets/logo-zark-laranja.png" alt="ZARK" class="zk-sidebar-logo"/>
22
+ </div>
23
+
24
+ <div class="zk-sidebar-eyebrow">Workspace</div>
25
+ <a class="zk-sidebar-link active" href="#">Dashboard</a>
26
+ <a class="zk-sidebar-link" href="#">Pipeline</a>
27
+ <a class="zk-sidebar-link" href="#">Painel de Equipe</a>
28
+ <a class="zk-sidebar-link" href="#">Financeiro</a>
29
+ </aside>
30
+
31
+ <!-- MAIN -->
32
+ <main style="padding:32px 48px">
33
+
34
+ <!-- Page header -->
35
+ <div style="margin-bottom:32px">
36
+ <div class="eyebrow">Hoje · 05 mai 2026</div>
37
+ <h1 style="font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:700; margin:0; color:var(--ink-700); letter-spacing:var(--ls-tight)">Olá, Renan</h1>
38
+ </div>
39
+
40
+ <!-- Stats row -->
41
+ <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:32px">
42
+ <div class="stat">
43
+ <div class="stat-head">
44
+ <span class="stat-label">CONCLUÍDAS · SEMANA</span>
45
+ <span class="stat-icon green">✓</span>
46
+ </div>
47
+ <div class="stat-value">8</div>
48
+ <div class="stat-sub">+18% vs anterior</div>
49
+ </div>
50
+ <div class="stat">
51
+ <div class="stat-head">
52
+ <span class="stat-label">CRIADAS · SEMANA</span>
53
+ <span class="stat-icon orange">+</span>
54
+ </div>
55
+ <div class="stat-value">19</div>
56
+ <div class="stat-sub">média 2.7/dia</div>
57
+ </div>
58
+ <div class="stat">
59
+ <div class="stat-head">
60
+ <span class="stat-label">ATIVAS · TOTAL</span>
61
+ <span class="stat-icon blue">●</span>
62
+ </div>
63
+ <div class="stat-value">45</div>
64
+ <div class="stat-sub">12 esta semana</div>
65
+ </div>
66
+ <div class="stat is-critical">
67
+ <div class="stat-head">
68
+ <span class="stat-label" style="color:var(--danger-700)">ATRASADAS</span>
69
+ <span class="stat-icon red">!</span>
70
+ </div>
71
+ <div class="stat-value">8</div>
72
+ <div class="stat-sub" style="color:var(--danger-700)">requer ação imediata</div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Critical alert -->
77
+ <div class="alert-critical" style="margin-bottom:32px">
78
+ <div class="alert-critical-head">⚠ 8 tarefas em atraso</div>
79
+ <div class="alert-critical-list">
80
+ <div class="alert-critical-row">
81
+ <span class="tag-dot p-urgent">URGENTE</span>
82
+ <span style="font-weight:500">Enviar proposta para TR PAULO</span>
83
+ <span class="src">ZARK · Tarefas</span>
84
+ <span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
85
+ </div>
86
+ <div class="alert-critical-row">
87
+ <span class="tag-dot p-urgent">URGENTE</span>
88
+ <span style="font-weight:500">CHAMANDO O HEXA!</span>
89
+ <span class="src">VIPCAR · Acompanhamento</span>
90
+ <span style="font-family:var(--font-mono); font-weight:600">3 dias</span>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Tasks panel -->
96
+ <div class="panel" style="margin-bottom:32px">
97
+ <div class="panel-head">
98
+ <div class="panel-title">Tarefas ativas</div>
99
+ <div class="panel-kicker">10 itens</div>
100
+ </div>
101
+ <div class="panel-body">
102
+ <div style="display:flex; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-100)">
103
+ <span style="flex:1">Indexar a página no Google</span>
104
+ <span class="tag-dot sp sp-limppe">LIMPPE TEC</span>
105
+ <span class="tag-dot s-progress">EM PROGRESSO</span>
106
+ <span class="tag-dot p-high">ALTA</span>
107
+ </div>
108
+ <div style="display:flex; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line-100)">
109
+ <span style="flex:1">Post Dia das mães</span>
110
+ <span class="tag-dot sp sp-vipseg">VIPSEG</span>
111
+ <span class="tag-dot s-todo">A FAZER</span>
112
+ <span class="tag-dot p-med">MÉDIA</span>
113
+ </div>
114
+ <div style="display:flex; gap:8px; align-items:center; padding:8px 0">
115
+ <span style="flex:1">Otimizar site</span>
116
+ <span class="tag-dot sp sp-vipseg">VIPSEG</span>
117
+ <span class="tag-dot s-overdue">ATRASADA</span>
118
+ <span class="tag-dot p-urgent">URGENTE</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Buttons playground -->
124
+ <div style="display:flex; gap:8px">
125
+ <button class="btn btn-primary btn-md">+ Nova Tarefa</button>
126
+ <button class="btn btn-secondary btn-md">Filtrar</button>
127
+ <button class="btn btn-soft btn-md">Try with AI</button>
128
+ <button class="btn btn-ghost btn-md">Cancelar</button>
129
+ </div>
130
+
131
+ </main>
132
+ </div>
133
+
134
+ </body>
135
+ </html>