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/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
- }