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/landing.html DELETED
@@ -1,397 +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 - Landing Page | 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
- }
18
-
19
- .landing-header {
20
- position: sticky;
21
- top: 0;
22
- z-index: 10;
23
- background-color: var(--fs-color-surface);
24
- border-bottom: 1px solid var(--fs-color-border);
25
- }
26
-
27
- .landing-header .fs-navbar {
28
- max-width: 1140px;
29
- margin: 0 auto;
30
- padding: 12px 24px;
31
- }
32
-
33
- section {
34
- padding: 72px 24px;
35
- }
36
-
37
- .section-inner {
38
- max-width: 1140px;
39
- margin: 0 auto;
40
- }
41
-
42
- .landing-hero {
43
- text-align: center;
44
- padding-top: 96px;
45
- padding-bottom: 96px;
46
- }
47
-
48
- .landing-hero h1 {
49
- max-width: 720px;
50
- margin: 0 auto 16px;
51
- }
52
-
53
- .landing-hero p {
54
- max-width: 560px;
55
- margin: 0 auto 32px;
56
- }
57
-
58
- .feature-icon {
59
- display: inline-flex;
60
- align-items: center;
61
- justify-content: center;
62
- width: 44px;
63
- height: 44px;
64
- border-radius: var(--fs-radius-md);
65
- background-color: var(--fs-alert-primary-bg);
66
- color: var(--fs-alert-primary-text);
67
- margin-bottom: 12px;
68
- }
69
-
70
- .stats-strip {
71
- background-color: var(--fs-color-subtle);
72
- }
73
-
74
- .stat-value {
75
- font-size: var(--fs-font-size-h2);
76
- font-weight: 600;
77
- line-height: 1.2;
78
- }
79
-
80
- .pricing-card {
81
- height: 100%;
82
- display: flex;
83
- flex-direction: column;
84
- }
85
-
86
- .pricing-card .fs-card-body {
87
- flex: 1;
88
- display: flex;
89
- flex-direction: column;
90
- }
91
-
92
- .pricing-price {
93
- font-size: var(--fs-font-size-h2);
94
- font-weight: 600;
95
- }
96
-
97
- .pricing-features {
98
- flex: 1;
99
- margin: 16px 0 0;
100
- padding: 0;
101
- list-style: none;
102
- }
103
-
104
- .pricing-features li {
105
- display: flex;
106
- align-items: center;
107
- gap: 8px;
108
- margin-bottom: 8px;
109
- }
110
-
111
- .cta-banner {
112
- text-align: center;
113
- background-color: var(--fs-color-primary);
114
- color: #fff;
115
- border-radius: var(--fs-radius-lg);
116
- padding: 56px 24px;
117
- }
118
-
119
- .landing-footer {
120
- background-color: var(--fs-color-subtle);
121
- padding: 48px 24px 24px;
122
- }
123
- </style>
124
- </head>
125
- <body>
126
-
127
- <!--
128
- Template "Landing Page" — página de marketing genérica (hero, recursos,
129
- preços, CTA, rodapé), com marca fictícia "Orbit" só pra ilustrar o
130
- conteúdo — não é a página oficial do Fokus Styles. Montada só com
131
- componentes/utilitários já publicados. Ver docs/README.md#templates-prontos.
132
- -->
133
-
134
- <header class="landing-header">
135
- <nav class="fs-navbar">
136
- <a href="#" class="fs-navbar-brand">
137
- <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="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
138
- Orbit
139
- </a>
140
- <ul class="fs-navbar-nav">
141
- <li><a href="#features" class="fs-nav-link">Recursos</a></li>
142
- <li><a href="#pricing" class="fs-nav-link">Preços</a></li>
143
- <li><a href="#" class="fs-nav-link">FAQ</a></li>
144
- </ul>
145
- <button type="button" class="fs-btn" id="theme-toggle" aria-label="Alternar tema escuro">
146
- <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>
147
- </button>
148
- <button type="button" class="fs-btn fs-btn-primary">Começar grátis</button>
149
- </nav>
150
- </header>
151
-
152
- <main>
153
- <section class="landing-hero">
154
- <div class="section-inner">
155
- <span class="fs-badge fs-badge-primary fs-u-mb-3">Novo — v1.0</span>
156
- <h1 class="fs-u-fs-h1 fs-u-fw-medium">Organize sua equipe em um só lugar</h1>
157
- <p class="fs-u-fs-lg fs-card-subtitle">Orbit reúne tarefas, prazos e comunicação da sua equipe numa interface rápida e sem distração.</p>
158
- <div class="fs-cluster" style="justify-content: center;">
159
- <button type="button" class="fs-btn fs-btn-primary fs-btn-lg">Começar grátis</button>
160
- <a href="#" class="fs-btn fs-btn-outline-primary fs-btn-lg">
161
- Ver no GitHub
162
- <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="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
163
- </a>
164
- </div>
165
- </div>
166
- </section>
167
-
168
- <section id="features">
169
- <div class="section-inner">
170
- <div class="fs-u-text-center fs-u-mb-4">
171
- <h2 class="fs-u-fs-h2 fs-u-fw-medium">Tudo que sua equipe precisa</h2>
172
- <p class="fs-card-subtitle">Sem plugins extras, sem configuração complicada.</p>
173
- </div>
174
- <div class="fs-row fs-u-g-3">
175
- <div class="fs-col-md-4">
176
- <div class="feature-icon">
177
- <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="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
178
- </div>
179
- <h3 class="fs-u-fs-lg fs-u-fw-medium">Rápido por padrão</h3>
180
- <p class="fs-card-subtitle">Interface responde instantaneamente, mesmo com times grandes e milhares de tarefas.</p>
181
- </div>
182
- <div class="fs-col-md-4">
183
- <div class="feature-icon">
184
- <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="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>
185
- </div>
186
- <h3 class="fs-u-fs-lg fs-u-fw-medium">Segurança em primeiro lugar</h3>
187
- <p class="fs-card-subtitle">Permissões por time e por projeto, com histórico completo de alterações.</p>
188
- </div>
189
- <div class="fs-col-md-4">
190
- <div class="feature-icon">
191
- <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>
192
- </div>
193
- <h3 class="fs-u-fs-lg fs-u-fw-medium">Feito pra colaborar</h3>
194
- <p class="fs-card-subtitle">Comentários, menções e notificações em tempo real, sem sair da tarefa.</p>
195
- </div>
196
- <div class="fs-col-md-4">
197
- <div class="feature-icon">
198
- <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>
199
- </div>
200
- <h3 class="fs-u-fs-lg fs-u-fw-medium">Relatórios claros</h3>
201
- <p class="fs-card-subtitle">Veja o progresso da equipe em painéis simples, sem planilha manual.</p>
202
- </div>
203
- <div class="fs-col-md-4">
204
- <div class="feature-icon">
205
- <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="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
206
- </div>
207
- <h3 class="fs-u-fs-lg fs-u-fw-medium">Disponível em qualquer lugar</h3>
208
- <p class="fs-card-subtitle">Web, desktop e mobile, sempre sincronizados.</p>
209
- </div>
210
- <div class="fs-col-md-4">
211
- <div class="feature-icon">
212
- <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>
213
- </div>
214
- <h3 class="fs-u-fs-lg fs-u-fw-medium">Se adapta ao seu fluxo</h3>
215
- <p class="fs-card-subtitle">Automatize etapas repetitivas com regras simples, sem escrever código.</p>
216
- </div>
217
- </div>
218
- </div>
219
- </section>
220
-
221
- <section class="stats-strip">
222
- <div class="section-inner">
223
- <div class="fs-row fs-u-g-3 fs-u-text-center">
224
- <div class="fs-col-sm-3">
225
- <p class="stat-value fs-u-mb-0">12 mil+</p>
226
- <p class="fs-card-subtitle fs-u-mb-0">Equipes ativas</p>
227
- </div>
228
- <div class="fs-col-sm-3">
229
- <p class="stat-value fs-u-mb-0">99,95%</p>
230
- <p class="fs-card-subtitle fs-u-mb-0">Disponibilidade</p>
231
- </div>
232
- <div class="fs-col-sm-3">
233
- <p class="stat-value fs-u-mb-0">40+</p>
234
- <p class="fs-card-subtitle fs-u-mb-0">Integrações</p>
235
- </div>
236
- <div class="fs-col-sm-3">
237
- <p class="stat-value fs-u-mb-0">24/7</p>
238
- <p class="fs-card-subtitle fs-u-mb-0">Suporte</p>
239
- </div>
240
- </div>
241
- </div>
242
- </section>
243
-
244
- <section id="pricing">
245
- <div class="section-inner">
246
- <div class="fs-u-text-center fs-u-mb-4">
247
- <h2 class="fs-u-fs-h2 fs-u-fw-medium">Planos para equipes de qualquer tamanho</h2>
248
- <p class="fs-card-subtitle fs-u-mb-3">Comece grátis, faça upgrade quando precisar.</p>
249
-
250
- <div class="fs-segmented-control" id="billing-toggle">
251
- <div class="fs-segmented-item">
252
- <input type="radio" name="billing" id="billing-monthly" class="fs-segmented-input" value="monthly" checked>
253
- <label for="billing-monthly" class="fs-segmented-label">Mensal</label>
254
- </div>
255
- <div class="fs-segmented-item">
256
- <input type="radio" name="billing" id="billing-yearly" class="fs-segmented-input" value="yearly">
257
- <label for="billing-yearly" class="fs-segmented-label">Anual (2 meses grátis)</label>
258
- </div>
259
- </div>
260
- </div>
261
-
262
- <div class="fs-row fs-u-g-3">
263
- <div class="fs-col-md-4">
264
- <div class="fs-card pricing-card">
265
- <div class="fs-card-body">
266
- <h3 class="fs-card-title">Starter</h3>
267
- <p class="fs-card-subtitle">Para times pequenos começando agora.</p>
268
- <p class="pricing-price fs-u-mb-0">R$ 0</p>
269
- <p class="fs-card-subtitle">por usuário/mês</p>
270
- <ul class="pricing-features">
271
- <li><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> Até 5 usuários</li>
272
- <li><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> Projetos ilimitados</li>
273
- <li><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> Suporte via e-mail</li>
274
- </ul>
275
- <button type="button" class="fs-btn" style="width: 100%;">Começar grátis</button>
276
- </div>
277
- </div>
278
- </div>
279
- <div class="fs-col-md-4">
280
- <div class="fs-card pricing-card fs-u-shadow-lg" style="border-color: var(--fs-color-primary);">
281
- <div class="fs-card-header">
282
- <span class="fs-badge fs-badge-primary">Mais popular</span>
283
- </div>
284
- <div class="fs-card-body">
285
- <h3 class="fs-card-title">Pro</h3>
286
- <p class="fs-card-subtitle">Para equipes que precisam de mais controle.</p>
287
- <p class="pricing-price fs-u-mb-0"><span data-price-monthly="R$ 49" data-price-yearly="R$ 39">R$ 49</span></p>
288
- <p class="fs-card-subtitle">por usuário/mês</p>
289
- <ul class="pricing-features">
290
- <li><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> Usuários ilimitados</li>
291
- <li><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> Automações e integrações</li>
292
- <li><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> Suporte prioritário</li>
293
- </ul>
294
- <button type="button" class="fs-btn fs-btn-primary" style="width: 100%;">Assinar Pro</button>
295
- </div>
296
- </div>
297
- </div>
298
- <div class="fs-col-md-4">
299
- <div class="fs-card pricing-card">
300
- <div class="fs-card-body">
301
- <h3 class="fs-card-title">Empresarial</h3>
302
- <p class="fs-card-subtitle">Para organizações com necessidades específicas.</p>
303
- <p class="pricing-price fs-u-mb-0">Sob consulta</p>
304
- <p class="fs-card-subtitle">&nbsp;</p>
305
- <ul class="pricing-features">
306
- <li><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> SSO e SCIM</li>
307
- <li><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> SLA dedicado</li>
308
- <li><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> Gerente de conta</li>
309
- </ul>
310
- <button type="button" class="fs-btn" style="width: 100%;">Falar com vendas</button>
311
- </div>
312
- </div>
313
- </div>
314
- </div>
315
- </div>
316
- </section>
317
-
318
- <section>
319
- <div class="section-inner cta-banner">
320
- <h2 class="fs-u-fs-h2 fs-u-fw-medium">Pronto para organizar sua equipe?</h2>
321
- <p class="fs-u-fs-lg fs-u-mb-3" style="opacity: 0.9;">Grátis para começar, sem cartão de crédito.</p>
322
- <button type="button" class="fs-btn fs-btn-lg" style="background-color: #fff; color: var(--fs-color-primary); border-color: #fff;">Criar conta grátis</button>
323
- </div>
324
- </section>
325
- </main>
326
-
327
- <footer class="landing-footer">
328
- <div class="section-inner">
329
- <div class="fs-row fs-u-g-3">
330
- <div class="fs-col-md-4">
331
- <div class="fs-navbar-brand fs-u-mb-2" style="display: inline-flex;">
332
- <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="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
333
- Orbit
334
- </div>
335
- <p class="fs-card-subtitle">Construído com <a href="https://github.com/jorgewreis/fokus-styles">Fokus Styles</a>.</p>
336
- </div>
337
- <div class="fs-col-md-4">
338
- <p class="fs-u-fw-medium fs-u-mb-2">Produto</p>
339
- <div class="fs-stack fs-stack-gap-1">
340
- <a href="#features" class="fs-u-fs-sm">Recursos</a>
341
- <a href="#pricing" class="fs-u-fs-sm">Preços</a>
342
- <a href="#" class="fs-u-fs-sm">Changelog</a>
343
- </div>
344
- </div>
345
- <div class="fs-col-md-4">
346
- <p class="fs-u-fw-medium fs-u-mb-2">Empresa</p>
347
- <div class="fs-stack fs-stack-gap-1">
348
- <a href="#" class="fs-u-fs-sm">Sobre</a>
349
- <a href="#" class="fs-u-fs-sm">Contato</a>
350
- <a href="#" class="fs-u-fs-sm">Privacidade</a>
351
- </div>
352
- </div>
353
- </div>
354
- <div class="fs-divider fs-u-my-3"></div>
355
- <p class="fs-u-fs-sm fs-card-subtitle fs-u-mb-0">© 2026 Orbit. Conteúdo fictício de demonstração.</p>
356
- </div>
357
- </footer>
358
-
359
- <!-- SCRIPTS IMPORT -->
360
- <script src="../../dist/js/fokus.js"></script>
361
- <script>
362
- // Alternância de tema — mesmo mecanismo de docs/guides/dark-mode.md.
363
- 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"/>';
364
- 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"/>';
365
-
366
- const toggle = document.getElementById("theme-toggle");
367
- const icon = document.getElementById("theme-toggle-icon");
368
-
369
- function applyTheme(theme) {
370
- document.documentElement.setAttribute("data-theme", theme);
371
- icon.innerHTML = theme === "dark" ? moonIcon : sunIcon;
372
- }
373
-
374
- const stored = localStorage.getItem("theme") ||
375
- (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
376
- applyTheme(stored);
377
-
378
- toggle.addEventListener("click", () => {
379
- const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
380
- applyTheme(next);
381
- localStorage.setItem("theme", next);
382
- });
383
-
384
- // Toggle mensal/anual — troca só o texto do preço do plano Pro
385
- // (os outros planos não variam por período neste exemplo).
386
- document.querySelectorAll('input[name="billing"]').forEach((input) => {
387
- input.addEventListener("change", () => {
388
- const priceEl = document.querySelector("[data-price-monthly]");
389
- priceEl.textContent = input.value === "yearly"
390
- ? priceEl.dataset.priceYearly
391
- : priceEl.dataset.priceMonthly;
392
- });
393
- });
394
- </script>
395
-
396
- </body>
397
- </html>
package/packages/fokus-icons/package.json DELETED
@@ -1,46 +0,0 @@
1
- {
2
- "name": "fokus-icons",
3
- "version": "2.0.0",
4
- "private": true,
5
- "description": "Ícones SVG opcionais para o Fokus Styles, gerados a partir do conjunto Lucide (ISC) — tree-shakeable, zero dependências em runtime.",
6
- "keywords": [
7
- "icons",
8
- "svg",
9
- "fokus-styles",
10
- "lucide"
11
- ],
12
- "homepage": "https://github.com/jorgewreis/fokus-styles/tree/main/packages/fokus-icons#readme",
13
- "bugs": {
14
- "url": "https://github.com/jorgewreis/fokus-styles/issues"
15
- },
16
- "repository": {
17
- "type": "git",
18
- "url": "git+https://github.com/jorgewreis/fokus-styles.git",
19
- "directory": "packages/fokus-icons"
20
- },
21
- "license": "MIT",
22
- "author": "Jorge Reis",
23
- "type": "module",
24
- "main": "./index.js",
25
- "exports": {
26
- ".": "./index.js",
27
- "./icons/*": "./icons/*.js",
28
- "./svg/*": "./svg/*",
29
- "./package.json": "./package.json"
30
- },
31
- "sideEffects": false,
32
- "files": [
33
- "icons",
34
- "svg",
35
- "index.js",
36
- "LICENSE",
37
- "LICENSE-LUCIDE.txt",
38
- "README.md"
39
- ],
40
- "engines": {
41
- "node": ">=18"
42
- },
43
- "publishConfig": {
44
- "access": "restricted"
45
- }
46
- }