analytica-frontend-lib 1.0.2 → 1.0.4
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.
- package/README.md +6 -1
- package/dist/index.css +810 -52
- package/dist/index.d.mts +57 -2
- package/dist/index.d.ts +57 -2
- package/dist/index.js +64 -6
- package/dist/index.mjs +62 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@ yarn add analytica-frontend-lib
|
|
|
21
21
|
1. Crie uma nova branch a partir da `main`.
|
|
22
22
|
2. Crie o componente na pasta `/src/components`.
|
|
23
23
|
3. Adicione testes unitários, com cobertura mínima de 80%.
|
|
24
|
-
4. Adicione o componente no
|
|
24
|
+
4. Adicione o componente no Ladle, contemplando todas as variações.
|
|
25
25
|
5. Atualize a versão no campo `version` do arquivo `package.json`.
|
|
26
26
|
6. Abra um Pull Request (PR) da sua branch para a `main`.
|
|
27
27
|
7. O GitHub Actions cuidará da publicação automática após o merge.
|
|
@@ -33,3 +33,8 @@ yarn add analytica-frontend-lib
|
|
|
33
33
|
- Os componentes devem ser totalmente compatíveis com Next.js versão 15+.
|
|
34
34
|
- Testes unitários são obrigatórios, com coverage mínimo de 80%.
|
|
35
35
|
- Siga o princípio da responsabilidade única (`single responsibility`): construa componentes compostos por componentes menores.
|
|
36
|
+
|
|
37
|
+
## Ladle
|
|
38
|
+
|
|
39
|
+
Link público:
|
|
40
|
+
https://landle.nyc3.cdn.digitaloceanspaces.com/index.html
|
package/dist/index.css
CHANGED
|
@@ -1,61 +1,817 @@
|
|
|
1
1
|
/* src/styles.css */
|
|
2
2
|
@layer properties;
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
3
|
+
@layer theme, base, components, utilities;
|
|
4
|
+
@layer theme {
|
|
5
|
+
:root,
|
|
6
|
+
:host {
|
|
7
|
+
--font-sans:
|
|
8
|
+
ui-sans-serif,
|
|
9
|
+
system-ui,
|
|
10
|
+
sans-serif,
|
|
11
|
+
"Apple Color Emoji",
|
|
12
|
+
"Segoe UI Emoji",
|
|
13
|
+
"Segoe UI Symbol",
|
|
14
|
+
"Noto Color Emoji";
|
|
15
|
+
--font-mono:
|
|
16
|
+
ui-monospace,
|
|
17
|
+
SFMono-Regular,
|
|
18
|
+
Menlo,
|
|
19
|
+
Monaco,
|
|
20
|
+
Consolas,
|
|
21
|
+
"Liberation Mono",
|
|
22
|
+
"Courier New",
|
|
23
|
+
monospace;
|
|
24
|
+
--spacing: 0.25rem;
|
|
25
|
+
--text-xs: 0.75rem;
|
|
26
|
+
--text-xs--line-height: calc(1 / 0.75);
|
|
27
|
+
--text-sm: 0.875rem;
|
|
28
|
+
--text-sm--line-height: calc(1.25 / 0.875);
|
|
29
|
+
--text-base: 1rem;
|
|
30
|
+
--text-base--line-height: calc(1.5 / 1);
|
|
31
|
+
--text-lg: 1.125rem;
|
|
32
|
+
--text-lg--line-height: calc(1.75 / 1.125);
|
|
33
|
+
--text-xl: 1.25rem;
|
|
34
|
+
--text-xl--line-height: calc(1.75 / 1.25);
|
|
35
|
+
--text-2xl: 1.5rem;
|
|
36
|
+
--text-2xl--line-height: calc(2 / 1.5);
|
|
37
|
+
--text-3xl: 1.875rem;
|
|
38
|
+
--text-3xl--line-height: calc(2.25 / 1.875);
|
|
39
|
+
--text-4xl: 2.25rem;
|
|
40
|
+
--text-4xl--line-height: calc(2.5 / 2.25);
|
|
41
|
+
--text-5xl: 3rem;
|
|
42
|
+
--text-5xl--line-height: 1;
|
|
43
|
+
--text-6xl: 3.75rem;
|
|
44
|
+
--text-6xl--line-height: 1;
|
|
45
|
+
--font-weight-light: 300;
|
|
46
|
+
--font-weight-normal: 400;
|
|
47
|
+
--font-weight-medium: 500;
|
|
48
|
+
--font-weight-semibold: 600;
|
|
49
|
+
--font-weight-bold: 700;
|
|
50
|
+
--font-weight-extrabold: 800;
|
|
51
|
+
--font-weight-black: 900;
|
|
52
|
+
--default-transition-duration: 150ms;
|
|
53
|
+
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
54
|
+
--default-font-family: var(--font-sans);
|
|
55
|
+
--default-mono-font-family: var(--font-mono);
|
|
56
|
+
--color-primary-600: #292929;
|
|
57
|
+
--color-primary-700: #1f1f1f;
|
|
58
|
+
--color-primary-950: #080808;
|
|
59
|
+
--color-secondary: #fdfdfd;
|
|
60
|
+
--color-secondary-200: #f2f2f2;
|
|
61
|
+
--color-secondary-300: #ededed;
|
|
62
|
+
--color-text: #fefeff;
|
|
63
|
+
--color-text-950: #171717;
|
|
64
|
+
--color-background: #ffffff;
|
|
65
|
+
--color-error-600: #dc2626;
|
|
66
|
+
--color-error-700: #b91c1c;
|
|
67
|
+
--font-weight-hairline: 100;
|
|
68
|
+
--text-2xs: 0.625rem;
|
|
69
|
+
--text-2xs--line-height: calc(1 / 0.625);
|
|
70
|
+
--text-md: 1rem;
|
|
71
|
+
--text-md--line-height: calc(1.5 / 1);
|
|
72
|
+
}
|
|
14
73
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
74
|
+
@layer base {
|
|
75
|
+
*,
|
|
76
|
+
::after,
|
|
77
|
+
::before,
|
|
78
|
+
::backdrop,
|
|
79
|
+
::file-selector-button {
|
|
80
|
+
box-sizing: border-box;
|
|
81
|
+
margin: 0;
|
|
82
|
+
padding: 0;
|
|
83
|
+
border: 0 solid;
|
|
84
|
+
}
|
|
85
|
+
html,
|
|
86
|
+
:host {
|
|
87
|
+
line-height: 1.5;
|
|
88
|
+
-webkit-text-size-adjust: 100%;
|
|
89
|
+
-moz-tab-size: 4;
|
|
90
|
+
-o-tab-size: 4;
|
|
91
|
+
tab-size: 4;
|
|
92
|
+
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
|
|
93
|
+
font-feature-settings: var(--default-font-feature-settings, normal);
|
|
94
|
+
font-variation-settings: var(--default-font-variation-settings, normal);
|
|
95
|
+
-webkit-tap-highlight-color: transparent;
|
|
96
|
+
}
|
|
97
|
+
hr {
|
|
98
|
+
height: 0;
|
|
99
|
+
color: inherit;
|
|
100
|
+
border-top-width: 1px;
|
|
101
|
+
}
|
|
102
|
+
abbr:where([title]) {
|
|
103
|
+
-webkit-text-decoration: underline dotted;
|
|
104
|
+
text-decoration: underline dotted;
|
|
105
|
+
}
|
|
106
|
+
h1,
|
|
107
|
+
h2,
|
|
108
|
+
h3,
|
|
109
|
+
h4,
|
|
110
|
+
h5,
|
|
111
|
+
h6 {
|
|
112
|
+
font-size: inherit;
|
|
113
|
+
font-weight: inherit;
|
|
114
|
+
}
|
|
115
|
+
a {
|
|
116
|
+
color: inherit;
|
|
117
|
+
-webkit-text-decoration: inherit;
|
|
118
|
+
text-decoration: inherit;
|
|
119
|
+
}
|
|
120
|
+
b,
|
|
121
|
+
strong {
|
|
122
|
+
font-weight: bolder;
|
|
123
|
+
}
|
|
124
|
+
code,
|
|
125
|
+
kbd,
|
|
126
|
+
samp,
|
|
127
|
+
pre {
|
|
128
|
+
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
|
|
129
|
+
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
|
130
|
+
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
|
131
|
+
font-size: 1em;
|
|
132
|
+
}
|
|
133
|
+
small {
|
|
134
|
+
font-size: 80%;
|
|
135
|
+
}
|
|
136
|
+
sub,
|
|
137
|
+
sup {
|
|
138
|
+
font-size: 75%;
|
|
139
|
+
line-height: 0;
|
|
140
|
+
position: relative;
|
|
141
|
+
vertical-align: baseline;
|
|
142
|
+
}
|
|
143
|
+
sub {
|
|
144
|
+
bottom: -0.25em;
|
|
145
|
+
}
|
|
146
|
+
sup {
|
|
147
|
+
top: -0.5em;
|
|
148
|
+
}
|
|
149
|
+
table {
|
|
150
|
+
text-indent: 0;
|
|
151
|
+
border-color: inherit;
|
|
152
|
+
border-collapse: collapse;
|
|
153
|
+
}
|
|
154
|
+
:-moz-focusring {
|
|
155
|
+
outline: auto;
|
|
156
|
+
}
|
|
157
|
+
progress {
|
|
158
|
+
vertical-align: baseline;
|
|
159
|
+
}
|
|
160
|
+
summary {
|
|
161
|
+
display: list-item;
|
|
162
|
+
}
|
|
163
|
+
ol,
|
|
164
|
+
ul,
|
|
165
|
+
menu {
|
|
166
|
+
list-style: none;
|
|
167
|
+
}
|
|
168
|
+
img,
|
|
169
|
+
svg,
|
|
170
|
+
video,
|
|
171
|
+
canvas,
|
|
172
|
+
audio,
|
|
173
|
+
iframe,
|
|
174
|
+
embed,
|
|
175
|
+
object {
|
|
176
|
+
display: block;
|
|
177
|
+
vertical-align: middle;
|
|
178
|
+
}
|
|
179
|
+
img,
|
|
180
|
+
video {
|
|
181
|
+
max-width: 100%;
|
|
182
|
+
height: auto;
|
|
183
|
+
}
|
|
184
|
+
button,
|
|
185
|
+
input,
|
|
186
|
+
select,
|
|
187
|
+
optgroup,
|
|
188
|
+
textarea,
|
|
189
|
+
::file-selector-button {
|
|
190
|
+
font: inherit;
|
|
191
|
+
font-feature-settings: inherit;
|
|
192
|
+
font-variation-settings: inherit;
|
|
193
|
+
letter-spacing: inherit;
|
|
194
|
+
color: inherit;
|
|
195
|
+
border-radius: 0;
|
|
196
|
+
background-color: transparent;
|
|
197
|
+
opacity: 1;
|
|
198
|
+
}
|
|
199
|
+
:where(select:is([multiple], [size])) optgroup {
|
|
200
|
+
font-weight: bolder;
|
|
201
|
+
}
|
|
202
|
+
:where(select:is([multiple], [size])) optgroup option {
|
|
203
|
+
padding-inline-start: 20px;
|
|
204
|
+
}
|
|
205
|
+
::file-selector-button {
|
|
206
|
+
margin-inline-end: 4px;
|
|
207
|
+
}
|
|
208
|
+
::-moz-placeholder {
|
|
209
|
+
opacity: 1;
|
|
210
|
+
}
|
|
211
|
+
::placeholder {
|
|
212
|
+
opacity: 1;
|
|
213
|
+
}
|
|
214
|
+
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
|
215
|
+
::-moz-placeholder {
|
|
216
|
+
color: currentcolor;
|
|
217
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
218
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
::placeholder {
|
|
222
|
+
color: currentcolor;
|
|
223
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
224
|
+
color: color-mix(in oklab, currentcolor 50%, transparent);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
textarea {
|
|
229
|
+
resize: vertical;
|
|
230
|
+
}
|
|
231
|
+
::-webkit-search-decoration {
|
|
232
|
+
-webkit-appearance: none;
|
|
233
|
+
}
|
|
234
|
+
::-webkit-date-and-time-value {
|
|
235
|
+
min-height: 1lh;
|
|
236
|
+
text-align: inherit;
|
|
237
|
+
}
|
|
238
|
+
::-webkit-datetime-edit {
|
|
239
|
+
display: inline-flex;
|
|
240
|
+
}
|
|
241
|
+
::-webkit-datetime-edit-fields-wrapper {
|
|
242
|
+
padding: 0;
|
|
243
|
+
}
|
|
244
|
+
::-webkit-datetime-edit,
|
|
245
|
+
::-webkit-datetime-edit-year-field,
|
|
246
|
+
::-webkit-datetime-edit-month-field,
|
|
247
|
+
::-webkit-datetime-edit-day-field,
|
|
248
|
+
::-webkit-datetime-edit-hour-field,
|
|
249
|
+
::-webkit-datetime-edit-minute-field,
|
|
250
|
+
::-webkit-datetime-edit-second-field,
|
|
251
|
+
::-webkit-datetime-edit-millisecond-field,
|
|
252
|
+
::-webkit-datetime-edit-meridiem-field {
|
|
253
|
+
padding-block: 0;
|
|
254
|
+
}
|
|
255
|
+
:-moz-ui-invalid {
|
|
256
|
+
box-shadow: none;
|
|
257
|
+
}
|
|
258
|
+
button,
|
|
259
|
+
input:where([type=button], [type=reset], [type=submit]),
|
|
260
|
+
::file-selector-button {
|
|
261
|
+
-webkit-appearance: button;
|
|
262
|
+
-moz-appearance: button;
|
|
263
|
+
appearance: button;
|
|
264
|
+
}
|
|
265
|
+
::-webkit-inner-spin-button,
|
|
266
|
+
::-webkit-outer-spin-button {
|
|
267
|
+
height: auto;
|
|
268
|
+
}
|
|
269
|
+
[hidden]:where(:not([hidden=until-found])) {
|
|
270
|
+
display: none !important;
|
|
271
|
+
}
|
|
43
272
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
273
|
+
@layer utilities {
|
|
274
|
+
.flex {
|
|
275
|
+
display: flex;
|
|
276
|
+
}
|
|
277
|
+
.transform {
|
|
278
|
+
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
279
|
+
}
|
|
280
|
+
.flex-col {
|
|
281
|
+
flex-direction: column;
|
|
282
|
+
}
|
|
283
|
+
.flex-wrap {
|
|
284
|
+
flex-wrap: wrap;
|
|
285
|
+
}
|
|
286
|
+
.items-center {
|
|
287
|
+
align-items: center;
|
|
288
|
+
}
|
|
289
|
+
.gap-2 {
|
|
290
|
+
gap: calc(var(--spacing) * 2);
|
|
291
|
+
}
|
|
292
|
+
.gap-4 {
|
|
293
|
+
gap: calc(var(--spacing) * 4);
|
|
294
|
+
}
|
|
295
|
+
.gap-6 {
|
|
296
|
+
gap: calc(var(--spacing) * 6);
|
|
297
|
+
}
|
|
298
|
+
.rounded-full {
|
|
299
|
+
border-radius: calc(infinity * 1px);
|
|
300
|
+
}
|
|
301
|
+
.bg-background {
|
|
302
|
+
background-color: var(--color-background);
|
|
303
|
+
}
|
|
304
|
+
.bg-error-600 {
|
|
305
|
+
background-color: var(--color-error-600);
|
|
306
|
+
}
|
|
307
|
+
.bg-primary-600 {
|
|
308
|
+
background-color: var(--color-primary-600);
|
|
309
|
+
}
|
|
310
|
+
.bg-secondary-200 {
|
|
311
|
+
background-color: var(--color-secondary-200);
|
|
312
|
+
}
|
|
313
|
+
.p-4 {
|
|
314
|
+
padding: calc(var(--spacing) * 4);
|
|
315
|
+
}
|
|
316
|
+
.p-8 {
|
|
317
|
+
padding: calc(var(--spacing) * 8);
|
|
318
|
+
}
|
|
319
|
+
.px-3 {
|
|
320
|
+
padding-inline: calc(var(--spacing) * 3);
|
|
321
|
+
}
|
|
322
|
+
.px-4 {
|
|
323
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
324
|
+
}
|
|
325
|
+
.px-5 {
|
|
326
|
+
padding-inline: calc(var(--spacing) * 5);
|
|
327
|
+
}
|
|
328
|
+
.py-1\.5 {
|
|
329
|
+
padding-block: calc(var(--spacing) * 1.5);
|
|
330
|
+
}
|
|
331
|
+
.py-2 {
|
|
332
|
+
padding-block: calc(var(--spacing) * 2);
|
|
333
|
+
}
|
|
334
|
+
.py-3 {
|
|
335
|
+
padding-block: calc(var(--spacing) * 3);
|
|
336
|
+
}
|
|
337
|
+
.text-2xl {
|
|
338
|
+
font-size: var(--text-2xl);
|
|
339
|
+
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
340
|
+
}
|
|
341
|
+
.text-2xs {
|
|
342
|
+
font-size: var(--text-2xs);
|
|
343
|
+
line-height: var(--tw-leading, var(--text-2xs--line-height));
|
|
344
|
+
}
|
|
345
|
+
.text-3xl {
|
|
346
|
+
font-size: var(--text-3xl);
|
|
347
|
+
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
|
348
|
+
}
|
|
349
|
+
.text-4xl {
|
|
350
|
+
font-size: var(--text-4xl);
|
|
351
|
+
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
|
352
|
+
}
|
|
353
|
+
.text-5xl {
|
|
354
|
+
font-size: var(--text-5xl);
|
|
355
|
+
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
|
356
|
+
}
|
|
357
|
+
.text-6xl {
|
|
358
|
+
font-size: var(--text-6xl);
|
|
359
|
+
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
|
360
|
+
}
|
|
361
|
+
.text-base {
|
|
362
|
+
font-size: var(--text-base);
|
|
363
|
+
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
364
|
+
}
|
|
365
|
+
.text-lg {
|
|
366
|
+
font-size: var(--text-lg);
|
|
367
|
+
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
368
|
+
}
|
|
369
|
+
.text-md {
|
|
370
|
+
font-size: var(--text-md);
|
|
371
|
+
line-height: var(--tw-leading, var(--text-md--line-height));
|
|
372
|
+
}
|
|
373
|
+
.text-sm {
|
|
374
|
+
font-size: var(--text-sm);
|
|
375
|
+
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
376
|
+
}
|
|
377
|
+
.text-xl {
|
|
378
|
+
font-size: var(--text-xl);
|
|
379
|
+
line-height: var(--tw-leading, var(--text-xl--line-height));
|
|
380
|
+
}
|
|
381
|
+
.text-xs {
|
|
382
|
+
font-size: var(--text-xs);
|
|
383
|
+
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
384
|
+
}
|
|
385
|
+
.font-black {
|
|
386
|
+
--tw-font-weight: var(--font-weight-black);
|
|
387
|
+
font-weight: var(--font-weight-black);
|
|
388
|
+
}
|
|
389
|
+
.font-bold {
|
|
390
|
+
--tw-font-weight: var(--font-weight-bold);
|
|
391
|
+
font-weight: var(--font-weight-bold);
|
|
392
|
+
}
|
|
393
|
+
.font-extrabold {
|
|
394
|
+
--tw-font-weight: var(--font-weight-extrabold);
|
|
395
|
+
font-weight: var(--font-weight-extrabold);
|
|
396
|
+
}
|
|
397
|
+
.font-hairline {
|
|
398
|
+
--tw-font-weight: var(--font-weight-hairline);
|
|
399
|
+
font-weight: var(--font-weight-hairline);
|
|
400
|
+
}
|
|
401
|
+
.font-light {
|
|
402
|
+
--tw-font-weight: var(--font-weight-light);
|
|
403
|
+
font-weight: var(--font-weight-light);
|
|
404
|
+
}
|
|
405
|
+
.font-medium {
|
|
406
|
+
--tw-font-weight: var(--font-weight-medium);
|
|
407
|
+
font-weight: var(--font-weight-medium);
|
|
408
|
+
}
|
|
409
|
+
.font-normal {
|
|
410
|
+
--tw-font-weight: var(--font-weight-normal);
|
|
411
|
+
font-weight: var(--font-weight-normal);
|
|
412
|
+
}
|
|
413
|
+
.font-semibold {
|
|
414
|
+
--tw-font-weight: var(--font-weight-semibold);
|
|
415
|
+
font-weight: var(--font-weight-semibold);
|
|
416
|
+
}
|
|
417
|
+
.text-primary-950 {
|
|
418
|
+
color: var(--color-primary-950);
|
|
419
|
+
}
|
|
420
|
+
.text-secondary {
|
|
421
|
+
color: var(--color-secondary);
|
|
422
|
+
}
|
|
423
|
+
.text-text {
|
|
424
|
+
color: var(--color-text);
|
|
425
|
+
}
|
|
426
|
+
.text-text-950 {
|
|
427
|
+
color: var(--color-text-950);
|
|
428
|
+
}
|
|
429
|
+
.transition {
|
|
430
|
+
transition-property:
|
|
431
|
+
color,
|
|
432
|
+
background-color,
|
|
433
|
+
border-color,
|
|
434
|
+
outline-color,
|
|
435
|
+
text-decoration-color,
|
|
436
|
+
fill,
|
|
437
|
+
stroke,
|
|
438
|
+
--tw-gradient-from,
|
|
439
|
+
--tw-gradient-via,
|
|
440
|
+
--tw-gradient-to,
|
|
441
|
+
opacity,
|
|
442
|
+
box-shadow,
|
|
443
|
+
transform,
|
|
444
|
+
translate,
|
|
445
|
+
scale,
|
|
446
|
+
rotate,
|
|
447
|
+
filter,
|
|
448
|
+
-webkit-backdrop-filter,
|
|
449
|
+
backdrop-filter,
|
|
450
|
+
display,
|
|
451
|
+
visibility,
|
|
452
|
+
content-visibility,
|
|
453
|
+
overlay,
|
|
454
|
+
pointer-events;
|
|
455
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
456
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
457
|
+
}
|
|
458
|
+
.hover\:bg-error-700 {
|
|
459
|
+
&:hover {
|
|
460
|
+
@media (hover: hover) {
|
|
461
|
+
background-color: var(--color-error-700);
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
.hover\:bg-primary-700 {
|
|
466
|
+
&:hover {
|
|
467
|
+
@media (hover: hover) {
|
|
468
|
+
background-color: var(--color-primary-700);
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
.hover\:bg-secondary-300 {
|
|
473
|
+
&:hover {
|
|
474
|
+
@media (hover: hover) {
|
|
475
|
+
background-color: var(--color-secondary-300);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
.focus\:ring {
|
|
480
|
+
&:focus {
|
|
481
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
482
|
+
box-shadow:
|
|
483
|
+
var(--tw-inset-shadow),
|
|
484
|
+
var(--tw-inset-ring-shadow),
|
|
485
|
+
var(--tw-ring-offset-shadow),
|
|
486
|
+
var(--tw-ring-shadow),
|
|
487
|
+
var(--tw-shadow);
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
.focus\:outline-none {
|
|
491
|
+
&:focus {
|
|
492
|
+
--tw-outline-style: none;
|
|
493
|
+
outline-style: none;
|
|
494
|
+
}
|
|
53
495
|
}
|
|
54
496
|
}
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
--
|
|
58
|
-
|
|
497
|
+
@layer base {
|
|
498
|
+
[data-theme=dark] {
|
|
499
|
+
--color-primary: #a6a6a6;
|
|
500
|
+
--color-primary-50: #afafaf;
|
|
501
|
+
--color-primary-100: #bababa;
|
|
502
|
+
--color-primary-200: #c5c5c5;
|
|
503
|
+
--color-primary-300: #d4d4d4;
|
|
504
|
+
--color-primary-400: #dddddd;
|
|
505
|
+
--color-primary-500: #e6e6e6;
|
|
506
|
+
--color-primary-600: #f0f0f0;
|
|
507
|
+
--color-primary-700: #fafafa;
|
|
508
|
+
--color-primary-800: #fdfdfd;
|
|
509
|
+
--color-primary-900: #fef9f9;
|
|
510
|
+
--color-primary-950: #fdfcfc;
|
|
511
|
+
--color-secondary: #141414;
|
|
512
|
+
--color-secondary-50: #171717;
|
|
513
|
+
--color-secondary-100: #1f1f1f;
|
|
514
|
+
--color-secondary-200: #272727;
|
|
515
|
+
--color-secondary-300: #2c2c2c;
|
|
516
|
+
--color-secondary-400: #383939;
|
|
517
|
+
--color-secondary-500: #3f4040;
|
|
518
|
+
--color-secondary-600: #565656;
|
|
519
|
+
--color-secondary-700: #656565;
|
|
520
|
+
--color-secondary-800: #878787;
|
|
521
|
+
--color-secondary-900: #969696;
|
|
522
|
+
--color-secondary-950: #a4a4a4;
|
|
523
|
+
--color-tertiary: #543112;
|
|
524
|
+
--color-tertiary-50: #6c3d13;
|
|
525
|
+
--color-tertiary-100: #824917;
|
|
526
|
+
--color-tertiary-200: #b4621a;
|
|
527
|
+
--color-tertiary-300: #d7751f;
|
|
528
|
+
--color-tertiary-400: #e78128;
|
|
529
|
+
--color-tertiary-500: #fb9d4b;
|
|
530
|
+
--color-tertiary-600: #fdb474;
|
|
531
|
+
--color-tertiary-700: #fed1aa;
|
|
532
|
+
--color-tertiary-800: #ffe9d5;
|
|
533
|
+
--color-tertiary-900: #fff2e5;
|
|
534
|
+
--color-tertiary-950: #fffaf5;
|
|
535
|
+
--color-text: #171717;
|
|
536
|
+
--color-text-50: #262627;
|
|
537
|
+
--color-text-100: #404040;
|
|
538
|
+
--color-text-200: #525252;
|
|
539
|
+
--color-text-300: #737373;
|
|
540
|
+
--color-text-400: #8c8c8c;
|
|
541
|
+
--color-text-500: #a3a3a3;
|
|
542
|
+
--color-text-600: #d4d4d4;
|
|
543
|
+
--color-text-700: #dbdbdc;
|
|
544
|
+
--color-text-800: #e5e5e5;
|
|
545
|
+
--color-text-900: #f5f5f5;
|
|
546
|
+
--color-text-950: #fefeff;
|
|
547
|
+
--color-background: #121212;
|
|
548
|
+
--color-background-50: #272625;
|
|
549
|
+
--color-background-100: #414040;
|
|
550
|
+
--color-background-200: #535252;
|
|
551
|
+
--color-background-300: #747474;
|
|
552
|
+
--color-background-400: #8e8e8e;
|
|
553
|
+
--color-background-500: #a2a3a3;
|
|
554
|
+
--color-background-600: #d5d4d4;
|
|
555
|
+
--color-background-700: #e5e4e4;
|
|
556
|
+
--color-background-800: #f2f1f1;
|
|
557
|
+
--color-background-900: #f6f6f6;
|
|
558
|
+
--color-background-950: #ffffff;
|
|
559
|
+
--color-background-muted: #333333;
|
|
560
|
+
--color-border: #1a1717;
|
|
561
|
+
--color-border-50: #272624;
|
|
562
|
+
--color-border-100: #414141;
|
|
563
|
+
--color-border-200: #535252;
|
|
564
|
+
--color-border-300: #737474;
|
|
565
|
+
--color-border-400: #8c8d8d;
|
|
566
|
+
--color-border-500: #a5a3a3;
|
|
567
|
+
--color-border-600: #d3d3d3;
|
|
568
|
+
--color-border-700: #dddcdb;
|
|
569
|
+
--color-border-800: #e6e6e6;
|
|
570
|
+
--color-border-900: #f3f3f3;
|
|
571
|
+
--color-border-950: #fdfefe;
|
|
572
|
+
--color-success: #1b3224;
|
|
573
|
+
--color-success-50: #14532d;
|
|
574
|
+
--color-success-100: #166534;
|
|
575
|
+
--color-success-200: #206f3e;
|
|
576
|
+
--color-success-300: #2a7948;
|
|
577
|
+
--color-success-400: #348352;
|
|
578
|
+
--color-success-500: #489766;
|
|
579
|
+
--color-success-600: #66b584;
|
|
580
|
+
--color-success-700: #84d3a2;
|
|
581
|
+
--color-success-800: #a2f1c0;
|
|
582
|
+
--color-success-900: #caffe8;
|
|
583
|
+
--color-success-950: #e4fff4;
|
|
584
|
+
--color-success-background: #1c2b21;
|
|
585
|
+
--color-error: #531313;
|
|
586
|
+
--color-error-50: #7f1d1d;
|
|
587
|
+
--color-error-100: #991b1b;
|
|
588
|
+
--color-error-200: #b91c1c;
|
|
589
|
+
--color-error-300: #dc2626;
|
|
590
|
+
--color-error-400: #e63535;
|
|
591
|
+
--color-error-500: #ef4444;
|
|
592
|
+
--color-error-600: #f96160;
|
|
593
|
+
--color-error-700: #e55b5a;
|
|
594
|
+
--color-error-800: #fecaca;
|
|
595
|
+
--color-error-900: #fee2e2;
|
|
596
|
+
--color-error-950: #fee9e9;
|
|
597
|
+
--color-error-background: #422b2b;
|
|
598
|
+
--color-warning: #542d12;
|
|
599
|
+
--color-warning-50: #6c3813;
|
|
600
|
+
--color-warning-100: #824417;
|
|
601
|
+
--color-warning-200: #b45a1a;
|
|
602
|
+
--color-warning-300: #d76c1f;
|
|
603
|
+
--color-warning-400: #e77828;
|
|
604
|
+
--color-warning-500: #fb954b;
|
|
605
|
+
--color-warning-600: #fdad74;
|
|
606
|
+
--color-warning-700: #fecdaa;
|
|
607
|
+
--color-warning-800: #ffe7d5;
|
|
608
|
+
--color-warning-900: #fff4ed;
|
|
609
|
+
--color-warning-950: #fff9f5;
|
|
610
|
+
--color-warning-background: #412f23;
|
|
611
|
+
--color-info: #032638;
|
|
612
|
+
--color-info-50: #05405d;
|
|
613
|
+
--color-info-100: #075a83;
|
|
614
|
+
--color-info-200: #0973a8;
|
|
615
|
+
--color-info-300: #0b8dcd;
|
|
616
|
+
--color-info-400: #0da6f2;
|
|
617
|
+
--color-info-500: #32b4f4;
|
|
618
|
+
--color-info-600: #57c2f6;
|
|
619
|
+
--color-info-700: #7ccff8;
|
|
620
|
+
--color-info-800: #a2ddfa;
|
|
621
|
+
--color-info-900: #c7ebfc;
|
|
622
|
+
--color-info-950: #ecf8fe;
|
|
623
|
+
--color-info-background: #1a282e;
|
|
624
|
+
--color-indicator-primary: #f7f7f7;
|
|
625
|
+
--color-indicator-info: #a1c7f5;
|
|
626
|
+
--color-indicator-error: #e84645;
|
|
627
|
+
--color-exame-1: #e3f1fb;
|
|
628
|
+
--color-exame-2: #fde5fa;
|
|
629
|
+
--color-exame-3: #fff4d1;
|
|
630
|
+
--color-exame-4: #ddf5e5;
|
|
631
|
+
--color-subject-1: #b7dfff;
|
|
632
|
+
--color-subject-2: #fbd1a5;
|
|
633
|
+
--color-subject-3: #b2e7e8;
|
|
634
|
+
--color-subject-4: #a3d9b1;
|
|
635
|
+
--color-subject-5: #d4f1a8;
|
|
636
|
+
--color-subject-6: #cee5f1;
|
|
637
|
+
--color-subject-7: #b7cce9;
|
|
638
|
+
--color-subject-8: #f3b3c2;
|
|
639
|
+
--color-subject-9: #e9d4fa;
|
|
640
|
+
--color-subject-10: #fbd1e0;
|
|
641
|
+
--color-subject-11: #feec9c;
|
|
642
|
+
--color-subject-12: #e7bff1;
|
|
643
|
+
--color-subject-13: #f4d2c8;
|
|
644
|
+
--color-subject-14: #e7ec85;
|
|
645
|
+
--color-subject-15: #a2d7e2;
|
|
646
|
+
--color-subject-16: #badfc8;
|
|
647
|
+
--shadow-hard-shadow-1: -2px 2px 8px rgba(255, 255, 255, 0.1);
|
|
648
|
+
--shadow-hard-shadow-2: 0px 3px 10px rgba(255, 255, 255, 0.1);
|
|
649
|
+
--shadow-hard-shadow-3: 2px 2px 8px rgba(255, 255, 255, 0.1);
|
|
650
|
+
--shadow-hard-shadow-4: 0px -3px 10px rgba(255, 255, 255, 0.1);
|
|
651
|
+
--shadow-hard-shadow-5: 0px 2px 10px rgba(255, 255, 255, 0.05);
|
|
652
|
+
--shadow-soft-shadow-1: 0px 0px 10px rgba(255, 255, 255, 0.05);
|
|
653
|
+
--shadow-soft-shadow-2: 0px 0px 20px rgba(255, 255, 255, 0.05);
|
|
654
|
+
--shadow-soft-shadow-3: 0px 0px 30px rgba(255, 255, 255, 0.05);
|
|
655
|
+
--shadow-soft-shadow-4: 0px 0px 40px rgba(255, 255, 255, 0.1);
|
|
656
|
+
}
|
|
657
|
+
[data-theme=enem-parana-light] {
|
|
658
|
+
--color-primary: #f4faff;
|
|
659
|
+
--color-primary-50: #e3f1fb;
|
|
660
|
+
--color-primary-100: #bbdcf7;
|
|
661
|
+
--color-primary-200: #91c7f1;
|
|
662
|
+
--color-primary-300: #67b0eb;
|
|
663
|
+
--color-primary-400: #48a0e8;
|
|
664
|
+
--color-primary-500: #2d91e4;
|
|
665
|
+
--color-primary-600: #2883d7;
|
|
666
|
+
--color-primary-700: #2271c4;
|
|
667
|
+
--color-primary-800: #1c61b2;
|
|
668
|
+
--color-primary-900: #144ba4;
|
|
669
|
+
--color-primary-950: #124393;
|
|
670
|
+
--color-secondary: #fdfdfd;
|
|
671
|
+
--color-secondary-50: #fbfbfb;
|
|
672
|
+
--color-secondary-100: #f6f6f6;
|
|
673
|
+
--color-secondary-200: #f2f2f2;
|
|
674
|
+
--color-secondary-300: #ededed;
|
|
675
|
+
--color-secondary-400: #e6e6e7;
|
|
676
|
+
--color-secondary-500: #d9d9db;
|
|
677
|
+
--color-secondary-600: #c6c7c7;
|
|
678
|
+
--color-secondary-700: #bdbdbd;
|
|
679
|
+
--color-secondary-800: #b1b1b1;
|
|
680
|
+
--color-secondary-900: #a5a4a4;
|
|
681
|
+
--color-secondary-950: #9d9d9d;
|
|
682
|
+
--color-tertiary: #fffaf5;
|
|
683
|
+
--color-tertiary-50: #fff2e5;
|
|
684
|
+
--color-tertiary-100: #ffe9d5;
|
|
685
|
+
--color-tertiary-200: #fed1aa;
|
|
686
|
+
--color-tertiary-300: #fdb474;
|
|
687
|
+
--color-tertiary-400: #fb9d4b;
|
|
688
|
+
--color-tertiary-500: #e78128;
|
|
689
|
+
--color-tertiary-600: #d7751f;
|
|
690
|
+
--color-tertiary-700: #b4621a;
|
|
691
|
+
--color-tertiary-800: #824917;
|
|
692
|
+
--color-tertiary-900: #6c3d13;
|
|
693
|
+
--color-tertiary-950: #543112;
|
|
694
|
+
--color-text: #fefeff;
|
|
695
|
+
--color-text-50: #f5f5f5;
|
|
696
|
+
--color-text-100: #e5e5e5;
|
|
697
|
+
--color-text-200: #dbdbdc;
|
|
698
|
+
--color-text-300: #d4d4d4;
|
|
699
|
+
--color-text-400: #a3a3a3;
|
|
700
|
+
--color-text-500: #8c8c8c;
|
|
701
|
+
--color-text-600: #737373;
|
|
702
|
+
--color-text-700: #525252;
|
|
703
|
+
--color-text-800: #404040;
|
|
704
|
+
--color-text-900: #262627;
|
|
705
|
+
--color-text-950: #171717;
|
|
706
|
+
--color-background: #ffffff;
|
|
707
|
+
--color-background-50: #f6f6f6;
|
|
708
|
+
--color-background-100: #f2f1f1;
|
|
709
|
+
--color-background-200: #dcdbdb;
|
|
710
|
+
--color-background-300: #d5d4d4;
|
|
711
|
+
--color-background-400: #a2a3a3;
|
|
712
|
+
--color-background-500: #8e8e8e;
|
|
713
|
+
--color-background-600: #747474;
|
|
714
|
+
--color-background-700: #535252;
|
|
715
|
+
--color-background-800: #414040;
|
|
716
|
+
--color-background-900: #272625;
|
|
717
|
+
--color-background-950: #121212;
|
|
718
|
+
--color-background-muted: #f7f8f7;
|
|
719
|
+
--color-border: #fdfefe;
|
|
720
|
+
--color-border-50: #f3f3f3;
|
|
721
|
+
--color-border-100: #e6e6e6;
|
|
722
|
+
--color-border-200: #dddcdb;
|
|
723
|
+
--color-border-300: #d3d3d3;
|
|
724
|
+
--color-border-400: #a5a3a3;
|
|
725
|
+
--color-border-500: #8c8d8d;
|
|
726
|
+
--color-border-600: #737474;
|
|
727
|
+
--color-border-700: #535252;
|
|
728
|
+
--color-border-800: #414141;
|
|
729
|
+
--color-border-900: #272624;
|
|
730
|
+
--color-border-950: #1a1717;
|
|
731
|
+
--color-success: #e4fff4;
|
|
732
|
+
--color-success-50: #caffe8;
|
|
733
|
+
--color-success-100: #a2f1c0;
|
|
734
|
+
--color-success-200: #84d3a2;
|
|
735
|
+
--color-success-300: #66b584;
|
|
736
|
+
--color-success-400: #489766;
|
|
737
|
+
--color-success-500: #348352;
|
|
738
|
+
--color-success-600: #2a7948;
|
|
739
|
+
--color-success-700: #206f3e;
|
|
740
|
+
--color-success-800: #166534;
|
|
741
|
+
--color-success-900: #14532d;
|
|
742
|
+
--color-success-950: #1b3224;
|
|
743
|
+
--color-success-background: #edfcf2;
|
|
744
|
+
--color-error: #fee9e9;
|
|
745
|
+
--color-error-50: #fee2e2;
|
|
746
|
+
--color-error-100: #fecaca;
|
|
747
|
+
--color-error-200: #fca5a5;
|
|
748
|
+
--color-error-300: #f87171;
|
|
749
|
+
--color-error-400: #ef4444;
|
|
750
|
+
--color-error-500: #e63535;
|
|
751
|
+
--color-error-600: #dc2626;
|
|
752
|
+
--color-error-700: #b91c1c;
|
|
753
|
+
--color-error-800: #991b1b;
|
|
754
|
+
--color-error-900: #7f1d1d;
|
|
755
|
+
--color-error-950: #531313;
|
|
756
|
+
--color-error-background: #fef1f1;
|
|
757
|
+
--color-warning: #fff9f5;
|
|
758
|
+
--color-warning-50: #fff4ec;
|
|
759
|
+
--color-warning-100: #ffe7d5;
|
|
760
|
+
--color-warning-200: #fecdaa;
|
|
761
|
+
--color-warning-300: #fdad74;
|
|
762
|
+
--color-warning-400: #fb954b;
|
|
763
|
+
--color-warning-500: #e77828;
|
|
764
|
+
--color-warning-600: #d76c1f;
|
|
765
|
+
--color-warning-700: #b45a1a;
|
|
766
|
+
--color-warning-800: #824417;
|
|
767
|
+
--color-warning-900: #6c3813;
|
|
768
|
+
--color-warning-950: #542d12;
|
|
769
|
+
--color-warning-background: #fff3ea;
|
|
770
|
+
--color-info: #ecf8fe;
|
|
771
|
+
--color-info-50: #c7ebfc;
|
|
772
|
+
--color-info-100: #a2ddfa;
|
|
773
|
+
--color-info-200: #7ccff8;
|
|
774
|
+
--color-info-300: #57c2f6;
|
|
775
|
+
--color-info-400: #32b4f4;
|
|
776
|
+
--color-info-500: #0da6f2;
|
|
777
|
+
--color-info-600: #0b8dcd;
|
|
778
|
+
--color-info-700: #0973a8;
|
|
779
|
+
--color-info-800: #075a83;
|
|
780
|
+
--color-info-900: #05405d;
|
|
781
|
+
--color-info-950: #032638;
|
|
782
|
+
--color-info-background: #ebf8fe;
|
|
783
|
+
--color-indicator-primary: #373737;
|
|
784
|
+
--color-indicator-info: #5399ec;
|
|
785
|
+
--color-indicator-error: #b91c1c;
|
|
786
|
+
--color-exame-1: #e3f1fb;
|
|
787
|
+
--color-exame-2: #fde5fa;
|
|
788
|
+
--color-exame-3: #fff4d1;
|
|
789
|
+
--color-exame-4: #ddf5e5;
|
|
790
|
+
--color-subject-1: #b7dfff;
|
|
791
|
+
--color-subject-2: #fbd1a5;
|
|
792
|
+
--color-subject-3: #b2e7e8;
|
|
793
|
+
--color-subject-4: #a3d9b1;
|
|
794
|
+
--color-subject-5: #d4f1a8;
|
|
795
|
+
--color-subject-6: #cee5f1;
|
|
796
|
+
--color-subject-7: #b7cce9;
|
|
797
|
+
--color-subject-8: #f3b3c2;
|
|
798
|
+
--color-subject-9: #e9d4fa;
|
|
799
|
+
--color-subject-10: #fbd1e0;
|
|
800
|
+
--color-subject-11: #feec9c;
|
|
801
|
+
--color-subject-12: #e7bff1;
|
|
802
|
+
--color-subject-13: #f4d2c8;
|
|
803
|
+
--color-subject-14: #e7ec85;
|
|
804
|
+
--color-subject-15: #a2d7e2;
|
|
805
|
+
--color-subject-16: #badfc8;
|
|
806
|
+
--shadow-hard-shadow-1: -2px 2px 8px rgba(38, 38, 38, 0.2);
|
|
807
|
+
--shadow-hard-shadow-2: 0px 3px 10px rgba(38, 38, 38, 0.2);
|
|
808
|
+
--shadow-hard-shadow-3: 2px 2px 8px rgba(38, 38, 38, 0.2);
|
|
809
|
+
--shadow-hard-shadow-4: 0px -3px 10px rgba(38, 38, 38, 0.2);
|
|
810
|
+
--shadow-hard-shadow-5: 0px 2px 10px rgba(38, 38, 38, 0.1);
|
|
811
|
+
--shadow-soft-shadow-1: 0px 0px 10px rgba(38, 38, 38, 0.1);
|
|
812
|
+
--shadow-soft-shadow-2: 0px 0px 20px rgba(38, 38, 38, 0.1);
|
|
813
|
+
--shadow-soft-shadow-3: 0px 0px 30px rgba(38, 38, 38, 0.1);
|
|
814
|
+
--shadow-soft-shadow-4: 0px 0px 40px rgba(38, 38, 38, 0.2);
|
|
59
815
|
}
|
|
60
816
|
}
|
|
61
817
|
@property --tw-rotate-x { syntax: "*"; inherits: false; }
|
|
@@ -63,6 +819,7 @@
|
|
|
63
819
|
@property --tw-rotate-z { syntax: "*"; inherits: false; }
|
|
64
820
|
@property --tw-skew-x { syntax: "*"; inherits: false; }
|
|
65
821
|
@property --tw-skew-y { syntax: "*"; inherits: false; }
|
|
822
|
+
@property --tw-font-weight { syntax: "*"; inherits: false; }
|
|
66
823
|
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
67
824
|
@property --tw-shadow-color { syntax: "*"; inherits: false; }
|
|
68
825
|
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
|
|
@@ -88,6 +845,7 @@
|
|
|
88
845
|
--tw-rotate-z: initial;
|
|
89
846
|
--tw-skew-x: initial;
|
|
90
847
|
--tw-skew-y: initial;
|
|
848
|
+
--tw-font-weight: initial;
|
|
91
849
|
--tw-shadow: 0 0 #0000;
|
|
92
850
|
--tw-shadow-color: initial;
|
|
93
851
|
--tw-shadow-alpha: 100%;
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Button component props interface
|
|
@@ -36,4 +36,59 @@ type ButtonProps = {
|
|
|
36
36
|
*/
|
|
37
37
|
declare const Button: ({ children, variant, size, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
/**
|
|
40
|
+
* Base text component props
|
|
41
|
+
*/
|
|
42
|
+
type BaseTextProps = {
|
|
43
|
+
/** Content to be displayed */
|
|
44
|
+
children?: ReactNode;
|
|
45
|
+
/** Text size variant */
|
|
46
|
+
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
47
|
+
/** Font weight variant */
|
|
48
|
+
weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
49
|
+
/** Color variant - white for light backgrounds, black for dark backgrounds */
|
|
50
|
+
color?: 'white' | 'black';
|
|
51
|
+
/** Additional CSS classes to apply */
|
|
52
|
+
className?: string;
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Polymorphic text component props that ensures type safety based on the 'as' prop
|
|
56
|
+
*/
|
|
57
|
+
type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
58
|
+
/** HTML tag to render */
|
|
59
|
+
as?: T;
|
|
60
|
+
} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
|
|
61
|
+
/**
|
|
62
|
+
* Text component for Analytica Ensino platforms
|
|
63
|
+
*
|
|
64
|
+
* A flexible polymorphic text component with multiple sizes, weights, and colors.
|
|
65
|
+
* Automatically adapts to dark and light themes with full type safety.
|
|
66
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
67
|
+
*
|
|
68
|
+
* @param children - The content to display
|
|
69
|
+
* @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
|
|
70
|
+
* @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
|
|
71
|
+
* @param color - The color variant (white, black) - adapts to theme
|
|
72
|
+
* @param as - The HTML tag to render - determines allowed attributes via TypeScript
|
|
73
|
+
* @param className - Additional CSS classes
|
|
74
|
+
* @param props - HTML attributes valid for the chosen tag only
|
|
75
|
+
* @returns A styled text element with type-safe attributes
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```tsx
|
|
79
|
+
* <Text size="lg" weight="bold" color="black">
|
|
80
|
+
* This is a large, bold text
|
|
81
|
+
* </Text>
|
|
82
|
+
*
|
|
83
|
+
* <Text as="a" href="/link" target="_blank">
|
|
84
|
+
* Link with type-safe anchor attributes
|
|
85
|
+
* </Text>
|
|
86
|
+
*
|
|
87
|
+
* <Text as="button" onClick={handleClick} disabled>
|
|
88
|
+
* Button with type-safe button attributes
|
|
89
|
+
* </Text>
|
|
90
|
+
* ```
|
|
91
|
+
*/
|
|
92
|
+
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
93
|
+
|
|
94
|
+
export { Button, Text };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ReactNode, ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* Button component props interface
|
|
@@ -36,4 +36,59 @@ type ButtonProps = {
|
|
|
36
36
|
*/
|
|
37
37
|
declare const Button: ({ children, variant, size, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
38
38
|
|
|
39
|
-
|
|
39
|
+
/**
|
|
40
|
+
* Base text component props
|
|
41
|
+
*/
|
|
42
|
+
type BaseTextProps = {
|
|
43
|
+
/** Content to be displayed */
|
|
44
|
+
children?: ReactNode;
|
|
45
|
+
/** Text size variant */
|
|
46
|
+
size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
|
|
47
|
+
/** Font weight variant */
|
|
48
|
+
weight?: 'hairline' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
|
|
49
|
+
/** Color variant - white for light backgrounds, black for dark backgrounds */
|
|
50
|
+
color?: 'white' | 'black';
|
|
51
|
+
/** Additional CSS classes to apply */
|
|
52
|
+
className?: string;
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Polymorphic text component props that ensures type safety based on the 'as' prop
|
|
56
|
+
*/
|
|
57
|
+
type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
58
|
+
/** HTML tag to render */
|
|
59
|
+
as?: T;
|
|
60
|
+
} & Omit<ComponentPropsWithoutRef<T>, keyof BaseTextProps>;
|
|
61
|
+
/**
|
|
62
|
+
* Text component for Analytica Ensino platforms
|
|
63
|
+
*
|
|
64
|
+
* A flexible polymorphic text component with multiple sizes, weights, and colors.
|
|
65
|
+
* Automatically adapts to dark and light themes with full type safety.
|
|
66
|
+
* Fully compatible with Next.js 15 and React 19.
|
|
67
|
+
*
|
|
68
|
+
* @param children - The content to display
|
|
69
|
+
* @param size - The text size variant (2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl)
|
|
70
|
+
* @param weight - The font weight variant (hairline, light, normal, medium, semibold, bold, extrabold, black)
|
|
71
|
+
* @param color - The color variant (white, black) - adapts to theme
|
|
72
|
+
* @param as - The HTML tag to render - determines allowed attributes via TypeScript
|
|
73
|
+
* @param className - Additional CSS classes
|
|
74
|
+
* @param props - HTML attributes valid for the chosen tag only
|
|
75
|
+
* @returns A styled text element with type-safe attributes
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```tsx
|
|
79
|
+
* <Text size="lg" weight="bold" color="black">
|
|
80
|
+
* This is a large, bold text
|
|
81
|
+
* </Text>
|
|
82
|
+
*
|
|
83
|
+
* <Text as="a" href="/link" target="_blank">
|
|
84
|
+
* Link with type-safe anchor attributes
|
|
85
|
+
* </Text>
|
|
86
|
+
*
|
|
87
|
+
* <Text as="button" onClick={handleClick} disabled>
|
|
88
|
+
* Button with type-safe button attributes
|
|
89
|
+
* </Text>
|
|
90
|
+
* ```
|
|
91
|
+
*/
|
|
92
|
+
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
93
|
+
|
|
94
|
+
export { Button, Text };
|
package/dist/index.js
CHANGED
|
@@ -20,7 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/index.ts
|
|
21
21
|
var index_exports = {};
|
|
22
22
|
__export(index_exports, {
|
|
23
|
-
Button: () => Button
|
|
23
|
+
Button: () => Button,
|
|
24
|
+
Text: () => Text
|
|
24
25
|
});
|
|
25
26
|
module.exports = __toCommonJS(index_exports);
|
|
26
27
|
|
|
@@ -37,14 +38,14 @@ var Button = ({
|
|
|
37
38
|
let sizeClasses = "";
|
|
38
39
|
switch (variant) {
|
|
39
40
|
case "secondary":
|
|
40
|
-
variantClasses = "bg-
|
|
41
|
+
variantClasses = "bg-secondary-200 hover:bg-secondary-300 text-primary-950";
|
|
41
42
|
break;
|
|
42
43
|
case "danger":
|
|
43
|
-
variantClasses = "bg-
|
|
44
|
+
variantClasses = "bg-error-600 hover:bg-error-700 text-secondary";
|
|
44
45
|
break;
|
|
45
46
|
case "primary":
|
|
46
47
|
default:
|
|
47
|
-
variantClasses = "bg-
|
|
48
|
+
variantClasses = "bg-primary-600 hover:bg-primary-700 text-secondary";
|
|
48
49
|
break;
|
|
49
50
|
}
|
|
50
51
|
switch (size) {
|
|
@@ -59,7 +60,7 @@ var Button = ({
|
|
|
59
60
|
sizeClasses = "text-base px-4 py-2";
|
|
60
61
|
break;
|
|
61
62
|
}
|
|
62
|
-
const baseClasses = "rounded font-medium focus:outline-none focus:ring transition";
|
|
63
|
+
const baseClasses = "rounded-full font-medium focus:outline-none focus:ring transition";
|
|
63
64
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
65
|
"button",
|
|
65
66
|
{
|
|
@@ -69,7 +70,64 @@ var Button = ({
|
|
|
69
70
|
}
|
|
70
71
|
);
|
|
71
72
|
};
|
|
73
|
+
|
|
74
|
+
// src/components/Text/Text.tsx
|
|
75
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
76
|
+
var Text = ({
|
|
77
|
+
children,
|
|
78
|
+
size = "md",
|
|
79
|
+
weight = "normal",
|
|
80
|
+
color = "black",
|
|
81
|
+
as,
|
|
82
|
+
className = "",
|
|
83
|
+
...props
|
|
84
|
+
}) => {
|
|
85
|
+
let sizeClasses = "";
|
|
86
|
+
let weightClasses = "";
|
|
87
|
+
let colorClasses = "";
|
|
88
|
+
const sizeClassMap = {
|
|
89
|
+
"2xs": "text-2xs",
|
|
90
|
+
xs: "text-xs",
|
|
91
|
+
sm: "text-sm",
|
|
92
|
+
md: "text-md",
|
|
93
|
+
lg: "text-lg",
|
|
94
|
+
xl: "text-xl",
|
|
95
|
+
"2xl": "text-2xl",
|
|
96
|
+
"3xl": "text-3xl",
|
|
97
|
+
"4xl": "text-4xl",
|
|
98
|
+
"5xl": "text-5xl",
|
|
99
|
+
"6xl": "text-6xl"
|
|
100
|
+
};
|
|
101
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
102
|
+
const weightClassMap = {
|
|
103
|
+
hairline: "font-hairline",
|
|
104
|
+
light: "font-light",
|
|
105
|
+
normal: "font-normal",
|
|
106
|
+
medium: "font-medium",
|
|
107
|
+
semibold: "font-semibold",
|
|
108
|
+
bold: "font-bold",
|
|
109
|
+
extrabold: "font-extrabold",
|
|
110
|
+
black: "font-black"
|
|
111
|
+
};
|
|
112
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
113
|
+
const colorClassMap = {
|
|
114
|
+
white: "text-text",
|
|
115
|
+
black: "text-text-950"
|
|
116
|
+
};
|
|
117
|
+
colorClasses = colorClassMap[color] ?? colorClassMap.black;
|
|
118
|
+
const baseClasses = "font-primary";
|
|
119
|
+
const Component = as ?? "p";
|
|
120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
121
|
+
Component,
|
|
122
|
+
{
|
|
123
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
|
|
124
|
+
...props,
|
|
125
|
+
children
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
};
|
|
72
129
|
// Annotate the CommonJS export names for ESM import in node:
|
|
73
130
|
0 && (module.exports = {
|
|
74
|
-
Button
|
|
131
|
+
Button,
|
|
132
|
+
Text
|
|
75
133
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -11,14 +11,14 @@ var Button = ({
|
|
|
11
11
|
let sizeClasses = "";
|
|
12
12
|
switch (variant) {
|
|
13
13
|
case "secondary":
|
|
14
|
-
variantClasses = "bg-
|
|
14
|
+
variantClasses = "bg-secondary-200 hover:bg-secondary-300 text-primary-950";
|
|
15
15
|
break;
|
|
16
16
|
case "danger":
|
|
17
|
-
variantClasses = "bg-
|
|
17
|
+
variantClasses = "bg-error-600 hover:bg-error-700 text-secondary";
|
|
18
18
|
break;
|
|
19
19
|
case "primary":
|
|
20
20
|
default:
|
|
21
|
-
variantClasses = "bg-
|
|
21
|
+
variantClasses = "bg-primary-600 hover:bg-primary-700 text-secondary";
|
|
22
22
|
break;
|
|
23
23
|
}
|
|
24
24
|
switch (size) {
|
|
@@ -33,7 +33,7 @@ var Button = ({
|
|
|
33
33
|
sizeClasses = "text-base px-4 py-2";
|
|
34
34
|
break;
|
|
35
35
|
}
|
|
36
|
-
const baseClasses = "rounded font-medium focus:outline-none focus:ring transition";
|
|
36
|
+
const baseClasses = "rounded-full font-medium focus:outline-none focus:ring transition";
|
|
37
37
|
return /* @__PURE__ */ jsx(
|
|
38
38
|
"button",
|
|
39
39
|
{
|
|
@@ -43,6 +43,63 @@ var Button = ({
|
|
|
43
43
|
}
|
|
44
44
|
);
|
|
45
45
|
};
|
|
46
|
+
|
|
47
|
+
// src/components/Text/Text.tsx
|
|
48
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
49
|
+
var Text = ({
|
|
50
|
+
children,
|
|
51
|
+
size = "md",
|
|
52
|
+
weight = "normal",
|
|
53
|
+
color = "black",
|
|
54
|
+
as,
|
|
55
|
+
className = "",
|
|
56
|
+
...props
|
|
57
|
+
}) => {
|
|
58
|
+
let sizeClasses = "";
|
|
59
|
+
let weightClasses = "";
|
|
60
|
+
let colorClasses = "";
|
|
61
|
+
const sizeClassMap = {
|
|
62
|
+
"2xs": "text-2xs",
|
|
63
|
+
xs: "text-xs",
|
|
64
|
+
sm: "text-sm",
|
|
65
|
+
md: "text-md",
|
|
66
|
+
lg: "text-lg",
|
|
67
|
+
xl: "text-xl",
|
|
68
|
+
"2xl": "text-2xl",
|
|
69
|
+
"3xl": "text-3xl",
|
|
70
|
+
"4xl": "text-4xl",
|
|
71
|
+
"5xl": "text-5xl",
|
|
72
|
+
"6xl": "text-6xl"
|
|
73
|
+
};
|
|
74
|
+
sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
|
|
75
|
+
const weightClassMap = {
|
|
76
|
+
hairline: "font-hairline",
|
|
77
|
+
light: "font-light",
|
|
78
|
+
normal: "font-normal",
|
|
79
|
+
medium: "font-medium",
|
|
80
|
+
semibold: "font-semibold",
|
|
81
|
+
bold: "font-bold",
|
|
82
|
+
extrabold: "font-extrabold",
|
|
83
|
+
black: "font-black"
|
|
84
|
+
};
|
|
85
|
+
weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
|
|
86
|
+
const colorClassMap = {
|
|
87
|
+
white: "text-text",
|
|
88
|
+
black: "text-text-950"
|
|
89
|
+
};
|
|
90
|
+
colorClasses = colorClassMap[color] ?? colorClassMap.black;
|
|
91
|
+
const baseClasses = "font-primary";
|
|
92
|
+
const Component = as ?? "p";
|
|
93
|
+
return /* @__PURE__ */ jsx2(
|
|
94
|
+
Component,
|
|
95
|
+
{
|
|
96
|
+
className: `${baseClasses} ${sizeClasses} ${weightClasses} ${colorClasses} ${className}`,
|
|
97
|
+
...props,
|
|
98
|
+
children
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
};
|
|
46
102
|
export {
|
|
47
|
-
Button
|
|
103
|
+
Button,
|
|
104
|
+
Text
|
|
48
105
|
};
|
package/package.json
CHANGED