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