fokus-styles 2.4.0 → 2.6.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 (212) hide show
  1. package/dist/css/components.css +561 -83
  2. package/dist/css/components.min.css +1 -1
  3. package/dist/css/fokus-components.css +561 -83
  4. package/dist/css/fokus-components.min.css +1 -1
  5. package/dist/css/fokus-rtl.css +697 -83
  6. package/dist/css/fokus-rtl.min.css +1 -1
  7. package/dist/css/fokus-utilities.css +136 -0
  8. package/dist/css/fokus-utilities.min.css +1 -1
  9. package/dist/css/fokus.css +996 -258
  10. package/dist/css/fokus.min.css +1 -1
  11. package/dist/css/forms.css +300 -176
  12. package/dist/css/forms.min.css +1 -1
  13. package/dist/css/helpers.css +136 -0
  14. package/dist/css/helpers.min.css +1 -1
  15. package/dist/js/fokus.js +270 -25
  16. package/dist/js/fokus.min.js +18 -18
  17. package/package.json +17 -15
  18. package/packages/fokus-components/scss/components/_alerts.scss +128 -6
  19. package/packages/fokus-components/scss/components/_badges.scss +26 -10
  20. package/packages/fokus-components/scss/components/_index.scss +1 -0
  21. package/packages/fokus-components/scss/components/_popover.scss +131 -21
  22. package/packages/fokus-components/scss/components/_responsive.scss +23 -0
  23. package/packages/fokus-components/scss/components/_tag.scss +37 -14
  24. package/packages/fokus-components/scss/components/_toasts.scss +156 -11
  25. package/packages/fokus-components/scss/components/_tooltips.scss +70 -18
  26. package/packages/fokus-components/scss/forms/_check-radio-switch.scss +313 -215
  27. package/packages/fokus-components/scss/forms/_forms.scss +16 -0
  28. package/packages/fokus-js/js/carousel.d.ts +4 -0
  29. package/packages/fokus-js/js/carousel.js +8 -0
  30. package/packages/fokus-js/js/core/positioning.js +18 -9
  31. package/packages/fokus-js/js/dropdown.d.ts +4 -0
  32. package/packages/fokus-js/js/dropdown.js +7 -0
  33. package/packages/fokus-js/js/popover.js +26 -1
  34. package/packages/fokus-js/js/tabs.d.ts +3 -0
  35. package/packages/fokus-js/js/tabs.js +5 -0
  36. package/packages/fokus-js/js/tag.js +17 -0
  37. package/packages/fokus-js/js/toast.js +77 -3
  38. package/packages/fokus-js/js/tooltip.d.ts +8 -1
  39. package/packages/fokus-js/js/tooltip.js +106 -13
  40. package/packages/fokus-utilities/scss/utilities/_api.scss +48 -0
  41. package/CHANGELOG.md +0 -910
  42. package/dist/css/components.css.map +0 -1
  43. package/dist/css/components.min.css.map +0 -1
  44. package/dist/css/fokus-components.css.map +0 -1
  45. package/dist/css/fokus-components.min.css.map +0 -1
  46. package/dist/css/fokus-core.css.map +0 -1
  47. package/dist/css/fokus-core.min.css.map +0 -1
  48. package/dist/css/fokus-dark.css.map +0 -1
  49. package/dist/css/fokus-dark.min.css.map +0 -1
  50. package/dist/css/fokus-rtl.css.map +0 -1
  51. package/dist/css/fokus-rtl.min.css.map +0 -1
  52. package/dist/css/fokus-utilities.css.map +0 -1
  53. package/dist/css/fokus-utilities.min.css.map +0 -1
  54. package/dist/css/fokus.css.map +0 -1
  55. package/dist/css/fokus.min.css.map +0 -1
  56. package/dist/css/fonts.css.map +0 -1
  57. package/dist/css/fonts.min.css.map +0 -1
  58. package/dist/css/forms.css.map +0 -1
  59. package/dist/css/forms.min.css.map +0 -1
  60. package/dist/css/helpers.css.map +0 -1
  61. package/dist/css/helpers.min.css.map +0 -1
  62. package/dist/css/layout.css.map +0 -1
  63. package/dist/css/layout.min.css.map +0 -1
  64. package/dist/js/fokus.js.map +0 -7
  65. package/dist/js/fokus.min.js.map +0 -7
  66. package/docs/README.md +0 -86
  67. package/docs/comparison.md +0 -124
  68. package/docs/components/accordion.md +0 -104
  69. package/docs/components/alert-dialog.md +0 -99
  70. package/docs/components/alert.md +0 -59
  71. package/docs/components/avatar.md +0 -13
  72. package/docs/components/badge.md +0 -82
  73. package/docs/components/breadcrumb.md +0 -93
  74. package/docs/components/button-group.md +0 -13
  75. package/docs/components/button.md +0 -98
  76. package/docs/components/card.md +0 -111
  77. package/docs/components/carousel.md +0 -167
  78. package/docs/components/checkbox.md +0 -97
  79. package/docs/components/close-button.md +0 -13
  80. package/docs/components/code.md +0 -13
  81. package/docs/components/collapse.md +0 -78
  82. package/docs/components/combobox.md +0 -123
  83. package/docs/components/command-palette.md +0 -131
  84. package/docs/components/datatable.md +0 -173
  85. package/docs/components/datepicker.md +0 -137
  86. package/docs/components/divider.md +0 -57
  87. package/docs/components/dropdown.md +0 -103
  88. package/docs/components/empty-state.md +0 -65
  89. package/docs/components/file-upload-advanced.md +0 -116
  90. package/docs/components/file-upload.md +0 -93
  91. package/docs/components/icon-link.md +0 -13
  92. package/docs/components/input-group.md +0 -73
  93. package/docs/components/input.md +0 -90
  94. package/docs/components/list-group.md +0 -13
  95. package/docs/components/modal.md +0 -120
  96. package/docs/components/navbar.md +0 -74
  97. package/docs/components/nested-menu.md +0 -90
  98. package/docs/components/notification-center.md +0 -116
  99. package/docs/components/offcanvas.md +0 -102
  100. package/docs/components/pagination.md +0 -145
  101. package/docs/components/placeholder.md +0 -13
  102. package/docs/components/popover.md +0 -105
  103. package/docs/components/progress.md +0 -126
  104. package/docs/components/radio.md +0 -70
  105. package/docs/components/range.md +0 -83
  106. package/docs/components/rating.md +0 -91
  107. package/docs/components/ratio.md +0 -13
  108. package/docs/components/scrollspy.md +0 -13
  109. package/docs/components/segmented-control.md +0 -82
  110. package/docs/components/select.md +0 -89
  111. package/docs/components/skeleton.md +0 -70
  112. package/docs/components/stepper.md +0 -107
  113. package/docs/components/switch.md +0 -75
  114. package/docs/components/table.md +0 -90
  115. package/docs/components/tabs.md +0 -104
  116. package/docs/components/tag.md +0 -129
  117. package/docs/components/tile.md +0 -112
  118. package/docs/components/timeline.md +0 -78
  119. package/docs/components/toast.md +0 -95
  120. package/docs/components/tooltip.md +0 -77
  121. package/docs/components/tree-view.md +0 -118
  122. package/docs/contributing/contributing.md +0 -18
  123. package/docs/getting-started/installation.md +0 -70
  124. package/docs/getting-started/usage.md +0 -105
  125. package/docs/guides/accessibility.md +0 -102
  126. package/docs/guides/charts.md +0 -73
  127. package/docs/guides/dark-mode.md +0 -90
  128. package/docs/guides/icons.md +0 -99
  129. package/docs/guides/javascript-api.md +0 -9
  130. package/docs/guides/layout-advanced.md +0 -118
  131. package/docs/guides/migration-clarus-to-fokus.md +0 -48
  132. package/docs/guides/migration-external.md +0 -123
  133. package/docs/guides/migration-v1.md +0 -63
  134. package/docs/guides/print.md +0 -30
  135. package/docs/guides/rtl-and-system-preferences.md +0 -28
  136. package/docs/guides/theming.md +0 -140
  137. package/docs/guides/utility-api.md +0 -9
  138. package/docs/prompts/prompt-plan.md +0 -45
  139. package/docs/reference/accessibility-matrix.md +0 -77
  140. package/docs/reference/browser-support.md +0 -75
  141. package/docs/reference/contrast-report.md +0 -50
  142. package/docs/reference/definitions.md +0 -864
  143. package/docs/reference/design-tokens.md +0 -194
  144. package/docs/reference/scss-architecture.md +0 -227
  145. package/docs/reference/size-baseline.json +0 -34
  146. package/docs/reference/stability.md +0 -89
  147. package/docs/showcase.md +0 -25
  148. package/mockup/README.md +0 -41
  149. package/mockup/assets/carousel-planning.png +0 -0
  150. package/mockup/assets/carousel-workspace.png +0 -0
  151. package/mockup/assets/example-theme.css +0 -8
  152. package/mockup/assets/example-theme.js +0 -11
  153. package/mockup/assets/showcase-contracts.js +0 -84
  154. package/mockup/assets/showcase.css +0 -91
  155. package/mockup/assets/showcase.js +0 -724
  156. package/mockup/content-data.html +0 -9
  157. package/mockup/examples/accordion-tabs-toast.html +0 -149
  158. package/mockup/examples/alert-dialog.html +0 -84
  159. package/mockup/examples/alerts.html +0 -41
  160. package/mockup/examples/badges-alerts.html +0 -77
  161. package/mockup/examples/buttons.html +0 -58
  162. package/mockup/examples/cards.html +0 -132
  163. package/mockup/examples/carousel.html +0 -126
  164. package/mockup/examples/charts.html +0 -102
  165. package/mockup/examples/check-radio-switch.html +0 -144
  166. package/mockup/examples/collapse.html +0 -69
  167. package/mockup/examples/combobox.html +0 -60
  168. package/mockup/examples/command-palette.html +0 -64
  169. package/mockup/examples/datatable.html +0 -113
  170. package/mockup/examples/datepicker.html +0 -62
  171. package/mockup/examples/divider.html +0 -45
  172. package/mockup/examples/dropdown-tooltip.html +0 -77
  173. package/mockup/examples/empty-state.html +0 -56
  174. package/mockup/examples/file-drop.html +0 -74
  175. package/mockup/examples/file-upload-advanced.html +0 -68
  176. package/mockup/examples/forms-advanced.html +0 -77
  177. package/mockup/examples/hover-card.html +0 -86
  178. package/mockup/examples/icons.html +0 -157
  179. package/mockup/examples/input-group.html +0 -74
  180. package/mockup/examples/js-foundation.html +0 -215
  181. package/mockup/examples/layout.html +0 -134
  182. package/mockup/examples/modal-select.html +0 -127
  183. package/mockup/examples/nested-menu.html +0 -73
  184. package/mockup/examples/notification-center.html +0 -86
  185. package/mockup/examples/offcanvas-popover.html +0 -133
  186. package/mockup/examples/pagination-breadcrumbs.html +0 -92
  187. package/mockup/examples/range.html +0 -69
  188. package/mockup/examples/rating.html +0 -103
  189. package/mockup/examples/segmented-control.html +0 -96
  190. package/mockup/examples/skeletons.html +0 -82
  191. package/mockup/examples/spinner-progress.html +0 -130
  192. package/mockup/examples/stepper.html +0 -119
  193. package/mockup/examples/tables-navbar.html +0 -89
  194. package/mockup/examples/tag.html +0 -105
  195. package/mockup/examples/theming.html +0 -68
  196. package/mockup/examples/tile.html +0 -107
  197. package/mockup/examples/timeline.html +0 -108
  198. package/mockup/examples/tree-view.html +0 -68
  199. package/mockup/feedback-actions.html +0 -9
  200. package/mockup/forms.html +0 -13
  201. package/mockup/foundations.html +0 -7
  202. package/mockup/kitchen-sink.html +0 -696
  203. package/mockup/navigation-disclosure.html +0 -11
  204. package/mockup/overlays-commands.html +0 -12
  205. package/mockup/templates/README.md +0 -20
  206. package/mockup/templates/admin.html +0 -334
  207. package/mockup/templates/auth.html +0 -234
  208. package/mockup/templates/dashboard.html +0 -442
  209. package/mockup/templates/landing.html +0 -397
  210. package/packages/fokus-icons/package.json +0 -46
  211. package/scripts/migrate-fokus-map.json +0 -1366
  212. 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>