fokus-styles 2.5.0 → 2.6.1

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 (181) hide show
  1. package/README.md +20 -2
  2. package/package.json +19 -16
  3. package/packages/fokus-cli/README.md +5 -0
  4. package/packages/fokus-icons/README.md +5 -0
  5. package/packages/fokus-react/README.md +5 -0
  6. package/CHANGELOG.md +0 -940
  7. package/dist/css/components.css.map +0 -1
  8. package/dist/css/components.min.css.map +0 -1
  9. package/dist/css/fokus-components.css.map +0 -1
  10. package/dist/css/fokus-components.min.css.map +0 -1
  11. package/dist/css/fokus-core.css.map +0 -1
  12. package/dist/css/fokus-core.min.css.map +0 -1
  13. package/dist/css/fokus-dark.css.map +0 -1
  14. package/dist/css/fokus-dark.min.css.map +0 -1
  15. package/dist/css/fokus-rtl.css.map +0 -1
  16. package/dist/css/fokus-rtl.min.css.map +0 -1
  17. package/dist/css/fokus-utilities.css.map +0 -1
  18. package/dist/css/fokus-utilities.min.css.map +0 -1
  19. package/dist/css/fokus.css.map +0 -1
  20. package/dist/css/fokus.min.css.map +0 -1
  21. package/dist/css/fonts.css.map +0 -1
  22. package/dist/css/fonts.min.css.map +0 -1
  23. package/dist/css/forms.css.map +0 -1
  24. package/dist/css/forms.min.css.map +0 -1
  25. package/dist/css/helpers.css.map +0 -1
  26. package/dist/css/helpers.min.css.map +0 -1
  27. package/dist/css/layout.css.map +0 -1
  28. package/dist/css/layout.min.css.map +0 -1
  29. package/dist/js/fokus.js.map +0 -7
  30. package/dist/js/fokus.min.js.map +0 -7
  31. package/docs/README.md +0 -86
  32. package/docs/comparison.md +0 -124
  33. package/docs/components/accordion.md +0 -104
  34. package/docs/components/alert-dialog.md +0 -99
  35. package/docs/components/alert.md +0 -104
  36. package/docs/components/avatar.md +0 -13
  37. package/docs/components/badge.md +0 -101
  38. package/docs/components/breadcrumb.md +0 -93
  39. package/docs/components/button-group.md +0 -13
  40. package/docs/components/button.md +0 -98
  41. package/docs/components/card.md +0 -111
  42. package/docs/components/carousel.md +0 -167
  43. package/docs/components/checkbox.md +0 -110
  44. package/docs/components/close-button.md +0 -13
  45. package/docs/components/code.md +0 -13
  46. package/docs/components/collapse.md +0 -78
  47. package/docs/components/combobox.md +0 -123
  48. package/docs/components/command-palette.md +0 -131
  49. package/docs/components/datatable.md +0 -173
  50. package/docs/components/datepicker.md +0 -137
  51. package/docs/components/divider.md +0 -57
  52. package/docs/components/dropdown.md +0 -103
  53. package/docs/components/empty-state.md +0 -65
  54. package/docs/components/file-upload-advanced.md +0 -116
  55. package/docs/components/file-upload.md +0 -93
  56. package/docs/components/icon-link.md +0 -13
  57. package/docs/components/input-group.md +0 -73
  58. package/docs/components/input.md +0 -90
  59. package/docs/components/list-group.md +0 -13
  60. package/docs/components/modal.md +0 -120
  61. package/docs/components/navbar.md +0 -74
  62. package/docs/components/nested-menu.md +0 -90
  63. package/docs/components/notification-center.md +0 -116
  64. package/docs/components/offcanvas.md +0 -102
  65. package/docs/components/pagination.md +0 -145
  66. package/docs/components/placeholder.md +0 -13
  67. package/docs/components/popover.md +0 -118
  68. package/docs/components/progress.md +0 -126
  69. package/docs/components/radio.md +0 -80
  70. package/docs/components/range.md +0 -83
  71. package/docs/components/rating.md +0 -91
  72. package/docs/components/ratio.md +0 -13
  73. package/docs/components/responsive.md +0 -19
  74. package/docs/components/scrollspy.md +0 -13
  75. package/docs/components/segmented-control.md +0 -82
  76. package/docs/components/select.md +0 -89
  77. package/docs/components/skeleton.md +0 -70
  78. package/docs/components/stepper.md +0 -107
  79. package/docs/components/switch.md +0 -97
  80. package/docs/components/table.md +0 -90
  81. package/docs/components/tabs.md +0 -104
  82. package/docs/components/tag.md +0 -144
  83. package/docs/components/tile.md +0 -112
  84. package/docs/components/timeline.md +0 -78
  85. package/docs/components/toast.md +0 -108
  86. package/docs/components/tooltip.md +0 -113
  87. package/docs/components/tree-view.md +0 -118
  88. package/docs/contributing/contributing.md +0 -18
  89. package/docs/getting-started/installation.md +0 -70
  90. package/docs/getting-started/usage.md +0 -105
  91. package/docs/guides/accessibility.md +0 -109
  92. package/docs/guides/charts.md +0 -73
  93. package/docs/guides/dark-mode.md +0 -90
  94. package/docs/guides/icons.md +0 -99
  95. package/docs/guides/javascript-api.md +0 -9
  96. package/docs/guides/layout-advanced.md +0 -118
  97. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  98. package/docs/guides/migration-external.md +0 -123
  99. package/docs/guides/migration-v1.md +0 -63
  100. package/docs/guides/print.md +0 -30
  101. package/docs/guides/rtl-and-system-preferences.md +0 -28
  102. package/docs/guides/theming.md +0 -140
  103. package/docs/guides/utility-api.md +0 -9
  104. package/docs/prompts/prompt-plan.md +0 -45
  105. package/docs/reference/accessibility-matrix.md +0 -77
  106. package/docs/reference/browser-support.md +0 -75
  107. package/docs/reference/contrast-report.md +0 -54
  108. package/docs/reference/definitions.md +0 -868
  109. package/docs/reference/design-tokens.md +0 -208
  110. package/docs/reference/scss-architecture.md +0 -227
  111. package/docs/reference/size-baseline.json +0 -34
  112. package/docs/reference/stability.md +0 -89
  113. package/docs/showcase.md +0 -25
  114. package/mockup/README.md +0 -41
  115. package/mockup/assets/carousel-planning.png +0 -0
  116. package/mockup/assets/carousel-workspace.png +0 -0
  117. package/mockup/assets/example-theme.css +0 -19
  118. package/mockup/assets/example-theme.js +0 -11
  119. package/mockup/assets/showcase-contracts.js +0 -84
  120. package/mockup/assets/showcase.css +0 -91
  121. package/mockup/assets/showcase.js +0 -724
  122. package/mockup/content-data.html +0 -9
  123. package/mockup/examples/accordion-tabs-toast.html +0 -149
  124. package/mockup/examples/alert-dialog.html +0 -84
  125. package/mockup/examples/alerts.html +0 -115
  126. package/mockup/examples/badges-alerts.html +0 -109
  127. package/mockup/examples/buttons.html +0 -58
  128. package/mockup/examples/cards.html +0 -132
  129. package/mockup/examples/carousel.html +0 -126
  130. package/mockup/examples/charts.html +0 -102
  131. package/mockup/examples/check-radio-switch.html +0 -620
  132. package/mockup/examples/collapse.html +0 -69
  133. package/mockup/examples/combobox.html +0 -60
  134. package/mockup/examples/command-palette.html +0 -64
  135. package/mockup/examples/datatable.html +0 -113
  136. package/mockup/examples/datepicker.html +0 -62
  137. package/mockup/examples/divider.html +0 -45
  138. package/mockup/examples/dropdown-tooltip.html +0 -77
  139. package/mockup/examples/empty-state.html +0 -56
  140. package/mockup/examples/file-drop.html +0 -74
  141. package/mockup/examples/file-upload-advanced.html +0 -68
  142. package/mockup/examples/forms-advanced.html +0 -77
  143. package/mockup/examples/hover-card.html +0 -86
  144. package/mockup/examples/icons.html +0 -157
  145. package/mockup/examples/input-group.html +0 -74
  146. package/mockup/examples/js-foundation.html +0 -215
  147. package/mockup/examples/layout.html +0 -134
  148. package/mockup/examples/modal-select.html +0 -127
  149. package/mockup/examples/nested-menu.html +0 -73
  150. package/mockup/examples/notification-center.html +0 -86
  151. package/mockup/examples/offcanvas-popover.html +0 -133
  152. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  153. package/mockup/examples/popover.html +0 -81
  154. package/mockup/examples/range.html +0 -69
  155. package/mockup/examples/rating.html +0 -103
  156. package/mockup/examples/segmented-control.html +0 -96
  157. package/mockup/examples/skeletons.html +0 -82
  158. package/mockup/examples/spinner-progress.html +0 -130
  159. package/mockup/examples/stepper.html +0 -119
  160. package/mockup/examples/tables-navbar.html +0 -89
  161. package/mockup/examples/tag.html +0 -115
  162. package/mockup/examples/theming.html +0 -68
  163. package/mockup/examples/tile.html +0 -107
  164. package/mockup/examples/timeline.html +0 -108
  165. package/mockup/examples/toast.html +0 -113
  166. package/mockup/examples/tooltip.html +0 -68
  167. package/mockup/examples/tree-view.html +0 -68
  168. package/mockup/feedback-actions.html +0 -9
  169. package/mockup/forms.html +0 -13
  170. package/mockup/foundations.html +0 -7
  171. package/mockup/kitchen-sink.html +0 -696
  172. package/mockup/navigation-disclosure.html +0 -11
  173. package/mockup/overlays-commands.html +0 -12
  174. package/mockup/templates/README.md +0 -20
  175. package/mockup/templates/admin.html +0 -334
  176. package/mockup/templates/auth.html +0 -234
  177. package/mockup/templates/dashboard.html +0 -442
  178. package/mockup/templates/landing.html +0 -397
  179. package/packages/fokus-icons/package.json +0 -46
  180. package/scripts/migrate-fokus-map.json +0 -1366
  181. package/scripts/migrate-fokus.mjs +0 -97
package/mockup/templates/dashboard.html DELETED
@@ -1,442 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Template - Dashboard | Fokus Styles</title>
7
-
8
- <!-- STYLES IMPORT -->
9
- <link rel="stylesheet" href="../../dist/css/fonts.css">
10
- <link rel="stylesheet" href="../../dist/css/layout.css">
11
- <link rel="stylesheet" href="../../dist/css/forms.css">
12
- <link rel="stylesheet" href="../../dist/css/components.css">
13
- <link rel="stylesheet" href="../../dist/css/helpers.css">
14
- <style>
15
- body {
16
- margin: 0;
17
- background-color: var(--fs-color-subtle);
18
- }
19
-
20
- .app-shell {
21
- min-height: 100vh;
22
- align-items: stretch;
23
- }
24
-
25
- .app-nav {
26
- background-color: var(--fs-color-surface);
27
- border-right: 1px solid var(--fs-color-border);
28
- display: flex;
29
- flex-direction: column;
30
- padding: 20px 16px;
31
- }
32
-
33
- @media (min-width: 768px) {
34
- .app-nav {
35
- position: sticky;
36
- top: 0;
37
- height: 100vh;
38
- overflow-y: auto;
39
- }
40
- }
41
-
42
- .app-brand {
43
- display: flex;
44
- align-items: center;
45
- gap: 10px;
46
- padding: 4px 12px 20px;
47
- color: var(--fs-color-text);
48
- text-decoration: none;
49
- }
50
-
51
- .app-nav-footer {
52
- margin-top: auto;
53
- padding-top: 16px;
54
- }
55
-
56
- .app-topbar {
57
- position: sticky;
58
- top: 0;
59
- z-index: 10;
60
- display: flex;
61
- align-items: center;
62
- gap: 16px;
63
- padding: 12px 24px;
64
- background-color: var(--fs-color-surface);
65
- border-bottom: 1px solid var(--fs-color-border);
66
- }
67
-
68
- .app-topbar-search {
69
- flex: 1;
70
- max-width: 320px;
71
- }
72
-
73
- .app-main {
74
- padding: 24px;
75
- max-width: 1200px;
76
- }
77
-
78
- .kpi-icon {
79
- display: inline-flex;
80
- align-items: center;
81
- justify-content: center;
82
- width: 40px;
83
- height: 40px;
84
- border-radius: var(--fs-radius-md);
85
- }
86
-
87
- .kpi-value {
88
- font-size: var(--fs-font-size-xxl, 28px);
89
- font-weight: 600;
90
- line-height: 1.2;
91
- }
92
-
93
- .chart-demo {
94
- display: flex;
95
- align-items: flex-end;
96
- gap: 16px;
97
- height: 160px;
98
- border-bottom: 1px solid var(--fs-chart-axis);
99
- padding: 0 4px;
100
- margin-top: 16px;
101
- }
102
-
103
- .chart-demo-bar {
104
- flex: 1;
105
- border-radius: 4px 4px 0 0;
106
- max-width: 32px;
107
- margin: 0 auto;
108
- }
109
-
110
- .chart-demo-labels {
111
- display: flex;
112
- gap: 16px;
113
- padding: 0 4px;
114
- margin-top: 8px;
115
- }
116
-
117
- .chart-demo-labels span {
118
- flex: 1;
119
- text-align: center;
120
- max-width: 40px;
121
- margin: 0 auto;
122
- }
123
-
124
- .activity-item {
125
- display: flex;
126
- align-items: flex-start;
127
- gap: 12px;
128
- }
129
-
130
- .activity-icon {
131
- display: inline-flex;
132
- align-items: center;
133
- justify-content: center;
134
- width: 32px;
135
- height: 32px;
136
- border-radius: 50%;
137
- background-color: var(--fs-color-subtle);
138
- flex-shrink: 0;
139
- }
140
- </style>
141
- </head>
142
- <body>
143
-
144
- <!--
145
- Template "Dashboard" — ponto de partida real para um painel administrativo
146
- com navegação lateral, KPIs, gráfico (tokens --fs-chart-*) e DataTable.
147
- Montado só com componentes/utilitários já publicados do Fokus Styles — sem
148
- nenhuma classe nova. Ver docs/README.md#templates-prontos.
149
- -->
150
-
151
- <div class="fs-sidebar fs-sidebar-gap-0 fs-sidebar-width-sm app-shell">
152
- <aside class="fs-sidebar-aside app-nav">
153
- <a href="#" class="app-brand">
154
- <svg class="fs-icon fs-icon-lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
155
- <span class="fs-u-fs-lg fs-u-fw-medium">FokusStyles Admin</span>
156
- </a>
157
-
158
- <nav class="fs-stack fs-stack-gap-1" aria-label="Navegação principal">
159
- <a href="#" class="fs-nav-link is-active">
160
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/></svg>
161
- Dashboard
162
- </a>
163
- <a href="#" class="fs-nav-link">
164
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg>
165
- Usuários
166
- </a>
167
- <a href="#" class="fs-nav-link">
168
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
169
- Pedidos
170
- <span class="fs-badge fs-badge-primary fs-badge-sm">12</span>
171
- </a>
172
- <a href="#" class="fs-nav-link">
173
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 21v-6"/><path d="M12 21V9"/><path d="M19 21V3"/></svg>
174
- Relatórios
175
- </a>
176
- <div class="fs-divider fs-u-my-2"></div>
177
- <a href="#" class="fs-nav-link">
178
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
179
- Configurações
180
- </a>
181
- </nav>
182
-
183
- <div class="app-nav-footer">
184
- <div class="fs-dropdown">
185
- <button type="button" class="fs-btn fs-dropdown-toggle" style="width: 100%; justify-content: flex-start;" data-fs="dropdown" data-fs-target="#user-menu">
186
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
187
- Jorge Reis
188
- </button>
189
- <div class="fs-dropdown-menu" id="user-menu">
190
- <a href="#" class="fs-dropdown-item">Perfil</a>
191
- <a href="#" class="fs-dropdown-item">Configurações</a>
192
- <div class="fs-dropdown-divider"></div>
193
- <button type="button" class="fs-dropdown-item">Sair</button>
194
- </div>
195
- </div>
196
- </div>
197
- </aside>
198
-
199
- <div class="fs-sidebar-content">
200
- <header class="app-topbar">
201
- <div class="fs-input-group app-topbar-search">
202
- <span class="fs-input-group-text">
203
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
204
- </span>
205
- <input type="search" class="fs-form-control" placeholder="Buscar…" aria-label="Buscar">
206
- </div>
207
-
208
- <div style="margin-left: auto;">
209
- <button type="button" class="fs-btn" id="theme-toggle" aria-label="Alternar tema escuro">
210
- <svg class="fs-icon" id="theme-toggle-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
211
- </button>
212
- </div>
213
- </header>
214
-
215
- <main class="app-main">
216
- <ol class="fs-breadcrumb fs-u-mb-2">
217
- <li class="fs-breadcrumb-item"><a href="#">Início</a></li>
218
- <li class="fs-breadcrumb-item is-active">Dashboard</li>
219
- </ol>
220
-
221
- <div class="fs-u-d-flex fs-u-justify-content-between fs-u-align-items-center fs-u-mb-3">
222
- <div>
223
- <h1 class="fs-u-fs-h3 fs-u-fw-medium fs-u-mb-0">Visão geral</h1>
224
- <p class="fs-card-subtitle fs-u-mb-0">Resumo das últimas 4 semanas</p>
225
- </div>
226
- <button type="button" class="fs-btn fs-btn-primary">
227
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
228
- Novo relatório
229
- </button>
230
- </div>
231
-
232
- <div class="fs-row fs-u-g-3 fs-u-mb-3">
233
- <div class="fs-col-sm-6 fs-col-lg-3">
234
- <div class="fs-card">
235
- <div class="fs-card-body">
236
- <div class="fs-u-d-flex fs-u-justify-content-between fs-u-align-items-center fs-u-mb-2">
237
- <span class="kpi-icon" style="background-color: var(--fs-alert-primary-bg); color: var(--fs-alert-primary-text);">
238
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" x2="12" y1="2" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
239
- </span>
240
- <span class="fs-badge fs-badge-success fs-badge-sm">
241
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/></svg>
242
- 12%
243
- </span>
244
- </div>
245
- <p class="kpi-value">R$ 48.2k</p>
246
- <p class="fs-card-subtitle fs-u-mb-0">Receita no mês</p>
247
- </div>
248
- </div>
249
- </div>
250
- <div class="fs-col-sm-6 fs-col-lg-3">
251
- <div class="fs-card">
252
- <div class="fs-card-body">
253
- <div class="fs-u-d-flex fs-u-justify-content-between fs-u-align-items-center fs-u-mb-2">
254
- <span class="kpi-icon" style="background-color: var(--fs-alert-info-bg); color: var(--fs-alert-info-text);">
255
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><path d="M16 3.128a4 4 0 0 1 0 7.744"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><circle cx="9" cy="7" r="4"/></svg>
256
- </span>
257
- <span class="fs-badge fs-badge-success fs-badge-sm">
258
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/></svg>
259
- 4%
260
- </span>
261
- </div>
262
- <p class="kpi-value">1.204</p>
263
- <p class="fs-card-subtitle fs-u-mb-0">Novos usuários</p>
264
- </div>
265
- </div>
266
- </div>
267
- <div class="fs-col-sm-6 fs-col-lg-3">
268
- <div class="fs-card">
269
- <div class="fs-card-body">
270
- <div class="fs-u-d-flex fs-u-justify-content-between fs-u-align-items-center fs-u-mb-2">
271
- <span class="kpi-icon" style="background-color: var(--fs-alert-warning-bg); color: var(--fs-alert-warning-text);">
272
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
273
- </span>
274
- <span class="fs-badge fs-badge-danger fs-badge-sm">
275
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 17h6v-6"/><path d="m22 17-8.5-8.5-5 5L2 7"/></svg>
276
- 3%
277
- </span>
278
- </div>
279
- <p class="kpi-value">342</p>
280
- <p class="fs-card-subtitle fs-u-mb-0">Pedidos em aberto</p>
281
- </div>
282
- </div>
283
- </div>
284
- <div class="fs-col-sm-6 fs-col-lg-3">
285
- <div class="fs-card">
286
- <div class="fs-card-body">
287
- <div class="fs-u-d-flex fs-u-justify-content-between fs-u-align-items-center fs-u-mb-2">
288
- <span class="kpi-icon" style="background-color: var(--fs-alert-success-bg); color: var(--fs-alert-success-text);">
289
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
290
- </span>
291
- <span class="fs-badge fs-badge-success fs-badge-sm">
292
- <svg class="fs-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h6v6"/><path d="m22 7-8.5 8.5-5-5L2 17"/></svg>
293
- 2%
294
- </span>
295
- </div>
296
- <p class="kpi-value">98,4%</p>
297
- <p class="fs-card-subtitle fs-u-mb-0">Taxa de conclusão</p>
298
- </div>
299
- </div>
300
- </div>
301
- </div>
302
-
303
- <div class="fs-row fs-u-g-3 fs-u-mb-3">
304
- <div class="fs-col-lg-8">
305
- <div class="fs-card">
306
- <div class="fs-card-header">
307
- <h3 class="fs-card-title">Receita mensal</h3>
308
- </div>
309
- <div class="fs-card-body">
310
- <div class="chart-demo">
311
- <div class="chart-demo-bar" style="height: 45%; background-color: var(--fs-chart-series-1);"></div>
312
- <div class="chart-demo-bar" style="height: 60%; background-color: var(--fs-chart-series-1);"></div>
313
- <div class="chart-demo-bar" style="height: 52%; background-color: var(--fs-chart-series-1);"></div>
314
- <div class="chart-demo-bar" style="height: 70%; background-color: var(--fs-chart-series-1);"></div>
315
- <div class="chart-demo-bar" style="height: 66%; background-color: var(--fs-chart-series-1);"></div>
316
- <div class="chart-demo-bar" style="height: 85%; background-color: var(--fs-chart-series-2);"></div>
317
- <div class="chart-demo-bar" style="height: 78%; background-color: var(--fs-chart-series-1);"></div>
318
- </div>
319
- <div class="chart-demo-labels">
320
- <span class="fs-u-fs-xs">Fev</span>
321
- <span class="fs-u-fs-xs">Mar</span>
322
- <span class="fs-u-fs-xs">Abr</span>
323
- <span class="fs-u-fs-xs">Mai</span>
324
- <span class="fs-u-fs-xs">Jun</span>
325
- <span class="fs-u-fs-xs">Jul</span>
326
- <span class="fs-u-fs-xs">Ago</span>
327
- </div>
328
- </div>
329
- </div>
330
- </div>
331
- <div class="fs-col-lg-4">
332
- <div class="fs-card">
333
- <div class="fs-card-header">
334
- <h3 class="fs-card-title">Atividade recente</h3>
335
- </div>
336
- <div class="fs-card-body">
337
- <div class="fs-stack">
338
- <div class="activity-item">
339
- <span class="activity-icon" aria-hidden="true">
340
- <svg class="fs-icon fs-icon-sm" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>
341
- </span>
342
- <div>
343
- <p class="fs-u-mb-0 fs-u-fs-sm">Novo pedido <strong>#4821</strong> recebido</p>
344
- <p class="fs-u-mb-0 fs-u-fs-xs fs-card-subtitle">há 12 minutos</p>
345
- </div>
346
- </div>
347
- <div class="fs-divider"></div>
348
- <div class="activity-item">
349
- <span class="activity-icon" aria-hidden="true">
350
- <svg class="fs-icon fs-icon-sm" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg>
351
- </span>
352
- <div>
353
- <p class="fs-u-mb-0 fs-u-fs-sm">Novo usuário cadastrado</p>
354
- <p class="fs-u-mb-0 fs-u-fs-xs fs-card-subtitle">há 48 minutos</p>
355
- </div>
356
- </div>
357
- <div class="fs-divider"></div>
358
- <div class="activity-item">
359
- <span class="activity-icon" aria-hidden="true">
360
- <svg class="fs-icon fs-icon-sm" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/></svg>
361
- </span>
362
- <div>
363
- <p class="fs-u-mb-0 fs-u-fs-sm">Pedido <strong>#4790</strong> marcado como concluído</p>
364
- <p class="fs-u-mb-0 fs-u-fs-xs fs-card-subtitle">há 2 horas</p>
365
- </div>
366
- </div>
367
- </div>
368
- </div>
369
- </div>
370
- </div>
371
- </div>
372
-
373
- <div class="fs-card">
374
- <div class="fs-card-header">
375
- <h3 class="fs-card-title">Pedidos recentes</h3>
376
- </div>
377
- <div class="fs-card-body">
378
- <div class="fs-datatable" id="orders-table" data-fs="datatable" data-fs-page-size="5">
379
- <div class="fs-datatable-toolbar">
380
- <input type="search" class="fs-form-control" data-fs-datatable-filter placeholder="Filtrar por cliente…">
381
- </div>
382
- <div class="fs-table-responsive">
383
- <table class="fs-table fs-table-striped fs-table-hover">
384
- <thead>
385
- <tr>
386
- <th scope="col" data-fs-sort="order">Pedido</th>
387
- <th scope="col" data-fs-sort="client">Cliente</th>
388
- <th scope="col" data-fs-sort="status">Status</th>
389
- <th scope="col" data-fs-sort="total">Total</th>
390
- </tr>
391
- </thead>
392
- <tbody>
393
- <tr><td>#4821</td><td>Ana Beatriz</td><td><span class="fs-badge fs-badge-warning fs-badge-sm">Pendente</span></td><td>R$ 349,90</td></tr>
394
- <tr><td>#4820</td><td>Bruno Costa</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Concluído</span></td><td>R$ 129,00</td></tr>
395
- <tr><td>#4819</td><td>Carla Dias</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Concluído</span></td><td>R$ 899,00</td></tr>
396
- <tr><td>#4818</td><td>Diego Alves</td><td><span class="fs-badge fs-badge-danger fs-badge-sm">Cancelado</span></td><td>R$ 59,90</td></tr>
397
- <tr><td>#4817</td><td>Elisa Nunes</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Concluído</span></td><td>R$ 210,00</td></tr>
398
- <tr><td>#4816</td><td>Fábio Souza</td><td><span class="fs-badge fs-badge-warning fs-badge-sm">Pendente</span></td><td>R$ 149,90</td></tr>
399
- <tr><td>#4815</td><td>Giulia Rocha</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Concluído</span></td><td>R$ 429,00</td></tr>
400
- <tr><td>#4814</td><td>Hugo Martins</td><td><span class="fs-badge fs-badge-success fs-badge-sm">Concluído</span></td><td>R$ 79,90</td></tr>
401
- </tbody>
402
- </table>
403
- </div>
404
- <div class="fs-empty-state" data-fs-datatable-empty hidden>
405
- <p class="fs-empty-state-title">Nenhum pedido encontrado.</p>
406
- </div>
407
- </div>
408
- </div>
409
- </div>
410
- </main>
411
- </div>
412
- </div>
413
-
414
- <!-- SCRIPTS IMPORT -->
415
- <script src="../../dist/js/fokus.js"></script>
416
- <script>
417
- // Alternância de tema — mesmo mecanismo de docs/guides/dark-mode.md,
418
- // só trocando o gatilho (checkbox) por um botão com ícone sol/lua.
419
- const sunIcon = '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/>';
420
- const moonIcon = '<path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"/>';
421
-
422
- const toggle = document.getElementById("theme-toggle");
423
- const icon = document.getElementById("theme-toggle-icon");
424
-
425
- function applyTheme(theme) {
426
- document.documentElement.setAttribute("data-theme", theme);
427
- icon.innerHTML = theme === "dark" ? moonIcon : sunIcon;
428
- }
429
-
430
- const stored = localStorage.getItem("theme") ||
431
- (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
432
- applyTheme(stored);
433
-
434
- toggle.addEventListener("click", () => {
435
- const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
436
- applyTheme(next);
437
- localStorage.setItem("theme", next);
438
- });
439
- </script>
440
-
441
- </body>
442
- </html>