analytica-frontend-lib 1.0.4 → 1.0.6
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/dist/index.css +345 -64
- package/dist/index.d.mts +15 -8
- package/dist/index.d.ts +15 -8
- package/dist/index.js +42 -31
- package/dist/index.mjs +43 -32
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -26,8 +26,6 @@
|
|
|
26
26
|
--text-xs--line-height: calc(1 / 0.75);
|
|
27
27
|
--text-sm: 0.875rem;
|
|
28
28
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
29
|
-
--text-base: 1rem;
|
|
30
|
-
--text-base--line-height: calc(1.5 / 1);
|
|
31
29
|
--text-lg: 1.125rem;
|
|
32
30
|
--text-lg--line-height: calc(1.75 / 1.125);
|
|
33
31
|
--text-xl: 1.25rem;
|
|
@@ -49,21 +47,32 @@
|
|
|
49
47
|
--font-weight-bold: 700;
|
|
50
48
|
--font-weight-extrabold: 800;
|
|
51
49
|
--font-weight-black: 900;
|
|
52
|
-
--default-transition-duration: 150ms;
|
|
53
|
-
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
54
50
|
--default-font-family: var(--font-sans);
|
|
55
51
|
--default-mono-font-family: var(--font-mono);
|
|
52
|
+
--color-primary-400: #525252;
|
|
53
|
+
--color-primary-500: #333333;
|
|
56
54
|
--color-primary-600: #292929;
|
|
57
55
|
--color-primary-700: #1f1f1f;
|
|
56
|
+
--color-primary-800: #0d0d0d;
|
|
58
57
|
--color-primary-950: #080808;
|
|
59
|
-
--color-secondary: #fdfdfd;
|
|
60
|
-
--color-secondary-200: #f2f2f2;
|
|
61
|
-
--color-secondary-300: #ededed;
|
|
62
58
|
--color-text: #fefeff;
|
|
59
|
+
--color-text-700: #525252;
|
|
60
|
+
--color-text-900: #262627;
|
|
63
61
|
--color-text-950: #171717;
|
|
64
62
|
--color-background: #ffffff;
|
|
63
|
+
--color-background-50: #f6f6f6;
|
|
64
|
+
--color-background-200: #dcdbdb;
|
|
65
|
+
--color-success-300: #66b584;
|
|
66
|
+
--color-success-400: #489766;
|
|
67
|
+
--color-success-500: #348352;
|
|
68
|
+
--color-success-600: #2a7948;
|
|
69
|
+
--color-success-700: #206f3e;
|
|
70
|
+
--color-error-300: #f87171;
|
|
71
|
+
--color-error-400: #ef4444;
|
|
72
|
+
--color-error-500: #e63535;
|
|
65
73
|
--color-error-600: #dc2626;
|
|
66
74
|
--color-error-700: #b91c1c;
|
|
75
|
+
--color-indicator-info: #5399ec;
|
|
67
76
|
--font-weight-hairline: 100;
|
|
68
77
|
--text-2xs: 0.625rem;
|
|
69
78
|
--text-2xs--line-height: calc(1 / 0.625);
|
|
@@ -271,21 +280,63 @@
|
|
|
271
280
|
}
|
|
272
281
|
}
|
|
273
282
|
@layer utilities {
|
|
283
|
+
.mx-2 {
|
|
284
|
+
margin-inline: calc(var(--spacing) * 2);
|
|
285
|
+
}
|
|
286
|
+
.my-4 {
|
|
287
|
+
margin-block: calc(var(--spacing) * 4);
|
|
288
|
+
}
|
|
289
|
+
.mr-2 {
|
|
290
|
+
margin-right: calc(var(--spacing) * 2);
|
|
291
|
+
}
|
|
292
|
+
.mb-2 {
|
|
293
|
+
margin-bottom: calc(var(--spacing) * 2);
|
|
294
|
+
}
|
|
295
|
+
.ml-2 {
|
|
296
|
+
margin-left: calc(var(--spacing) * 2);
|
|
297
|
+
}
|
|
274
298
|
.flex {
|
|
275
299
|
display: flex;
|
|
276
300
|
}
|
|
301
|
+
.inline-flex {
|
|
302
|
+
display: inline-flex;
|
|
303
|
+
}
|
|
304
|
+
.table {
|
|
305
|
+
display: table;
|
|
306
|
+
}
|
|
307
|
+
.h-5 {
|
|
308
|
+
height: calc(var(--spacing) * 5);
|
|
309
|
+
}
|
|
310
|
+
.h-8 {
|
|
311
|
+
height: calc(var(--spacing) * 8);
|
|
312
|
+
}
|
|
313
|
+
.w-5 {
|
|
314
|
+
width: calc(var(--spacing) * 5);
|
|
315
|
+
}
|
|
316
|
+
.w-8 {
|
|
317
|
+
width: calc(var(--spacing) * 8);
|
|
318
|
+
}
|
|
277
319
|
.transform {
|
|
278
320
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
279
321
|
}
|
|
322
|
+
.cursor-pointer {
|
|
323
|
+
cursor: pointer;
|
|
324
|
+
}
|
|
280
325
|
.flex-col {
|
|
281
326
|
flex-direction: column;
|
|
282
327
|
}
|
|
328
|
+
.flex-row {
|
|
329
|
+
flex-direction: row;
|
|
330
|
+
}
|
|
283
331
|
.flex-wrap {
|
|
284
332
|
flex-wrap: wrap;
|
|
285
333
|
}
|
|
286
334
|
.items-center {
|
|
287
335
|
align-items: center;
|
|
288
336
|
}
|
|
337
|
+
.justify-center {
|
|
338
|
+
justify-content: center;
|
|
339
|
+
}
|
|
289
340
|
.gap-2 {
|
|
290
341
|
gap: calc(var(--spacing) * 2);
|
|
291
342
|
}
|
|
@@ -298,17 +349,46 @@
|
|
|
298
349
|
.rounded-full {
|
|
299
350
|
border-radius: calc(infinity * 1px);
|
|
300
351
|
}
|
|
352
|
+
.border {
|
|
353
|
+
border-style: var(--tw-border-style);
|
|
354
|
+
border-width: 1px;
|
|
355
|
+
}
|
|
356
|
+
.border-2 {
|
|
357
|
+
border-style: var(--tw-border-style);
|
|
358
|
+
border-width: 2px;
|
|
359
|
+
}
|
|
360
|
+
.border-background-200 {
|
|
361
|
+
border-color: var(--color-background-200);
|
|
362
|
+
}
|
|
363
|
+
.border-error-300 {
|
|
364
|
+
border-color: var(--color-error-300);
|
|
365
|
+
}
|
|
366
|
+
.border-error-500 {
|
|
367
|
+
border-color: var(--color-error-500);
|
|
368
|
+
}
|
|
369
|
+
.border-primary-950 {
|
|
370
|
+
border-color: var(--color-primary-950);
|
|
371
|
+
}
|
|
372
|
+
.border-success-300 {
|
|
373
|
+
border-color: var(--color-success-300);
|
|
374
|
+
}
|
|
375
|
+
.border-success-500 {
|
|
376
|
+
border-color: var(--color-success-500);
|
|
377
|
+
}
|
|
301
378
|
.bg-background {
|
|
302
379
|
background-color: var(--color-background);
|
|
303
380
|
}
|
|
304
|
-
.bg-error-
|
|
305
|
-
background-color: var(--color-error-
|
|
381
|
+
.bg-error-500 {
|
|
382
|
+
background-color: var(--color-error-500);
|
|
306
383
|
}
|
|
307
|
-
.bg-primary-
|
|
308
|
-
background-color: var(--color-primary-
|
|
384
|
+
.bg-primary-950 {
|
|
385
|
+
background-color: var(--color-primary-950);
|
|
309
386
|
}
|
|
310
|
-
.bg-
|
|
311
|
-
background-color: var(--color-
|
|
387
|
+
.bg-success-500 {
|
|
388
|
+
background-color: var(--color-success-500);
|
|
389
|
+
}
|
|
390
|
+
.bg-transparent {
|
|
391
|
+
background-color: transparent;
|
|
312
392
|
}
|
|
313
393
|
.p-4 {
|
|
314
394
|
padding: calc(var(--spacing) * 4);
|
|
@@ -316,8 +396,8 @@
|
|
|
316
396
|
.p-8 {
|
|
317
397
|
padding: calc(var(--spacing) * 8);
|
|
318
398
|
}
|
|
319
|
-
.px-3 {
|
|
320
|
-
padding-inline: calc(var(--spacing) * 3);
|
|
399
|
+
.px-3\.5 {
|
|
400
|
+
padding-inline: calc(var(--spacing) * 3.5);
|
|
321
401
|
}
|
|
322
402
|
.px-4 {
|
|
323
403
|
padding-inline: calc(var(--spacing) * 4);
|
|
@@ -325,15 +405,24 @@
|
|
|
325
405
|
.px-5 {
|
|
326
406
|
padding-inline: calc(var(--spacing) * 5);
|
|
327
407
|
}
|
|
328
|
-
.
|
|
329
|
-
padding-
|
|
408
|
+
.px-6 {
|
|
409
|
+
padding-inline: calc(var(--spacing) * 6);
|
|
410
|
+
}
|
|
411
|
+
.px-7 {
|
|
412
|
+
padding-inline: calc(var(--spacing) * 7);
|
|
330
413
|
}
|
|
331
414
|
.py-2 {
|
|
332
415
|
padding-block: calc(var(--spacing) * 2);
|
|
333
416
|
}
|
|
417
|
+
.py-2\.5 {
|
|
418
|
+
padding-block: calc(var(--spacing) * 2.5);
|
|
419
|
+
}
|
|
334
420
|
.py-3 {
|
|
335
421
|
padding-block: calc(var(--spacing) * 3);
|
|
336
422
|
}
|
|
423
|
+
.py-3\.5 {
|
|
424
|
+
padding-block: calc(var(--spacing) * 3.5);
|
|
425
|
+
}
|
|
337
426
|
.text-2xl {
|
|
338
427
|
font-size: var(--text-2xl);
|
|
339
428
|
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
@@ -358,10 +447,6 @@
|
|
|
358
447
|
font-size: var(--text-6xl);
|
|
359
448
|
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
|
360
449
|
}
|
|
361
|
-
.text-base {
|
|
362
|
-
font-size: var(--text-base);
|
|
363
|
-
line-height: var(--tw-leading, var(--text-base--line-height));
|
|
364
|
-
}
|
|
365
450
|
.text-lg {
|
|
366
451
|
font-size: var(--text-lg);
|
|
367
452
|
line-height: var(--tw-leading, var(--text-lg--line-height));
|
|
@@ -414,71 +499,179 @@
|
|
|
414
499
|
--tw-font-weight: var(--font-weight-semibold);
|
|
415
500
|
font-weight: var(--font-weight-semibold);
|
|
416
501
|
}
|
|
502
|
+
.text-error-500 {
|
|
503
|
+
color: var(--color-error-500);
|
|
504
|
+
}
|
|
417
505
|
.text-primary-950 {
|
|
418
506
|
color: var(--color-primary-950);
|
|
419
507
|
}
|
|
420
|
-
.text-
|
|
421
|
-
color: var(--color-
|
|
508
|
+
.text-success-500 {
|
|
509
|
+
color: var(--color-success-500);
|
|
422
510
|
}
|
|
423
511
|
.text-text {
|
|
424
512
|
color: var(--color-text);
|
|
425
513
|
}
|
|
514
|
+
.text-text-700 {
|
|
515
|
+
color: var(--color-text-700);
|
|
516
|
+
}
|
|
517
|
+
.text-text-900 {
|
|
518
|
+
color: var(--color-text-900);
|
|
519
|
+
}
|
|
426
520
|
.text-text-950 {
|
|
427
521
|
color: var(--color-text-950);
|
|
428
522
|
}
|
|
429
|
-
.
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
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 {
|
|
523
|
+
.outline {
|
|
524
|
+
outline-style: var(--tw-outline-style);
|
|
525
|
+
outline-width: 1px;
|
|
526
|
+
}
|
|
527
|
+
.hover\:border-error-400 {
|
|
459
528
|
&:hover {
|
|
460
529
|
@media (hover: hover) {
|
|
461
|
-
|
|
530
|
+
border-color: var(--color-error-400);
|
|
462
531
|
}
|
|
463
532
|
}
|
|
464
533
|
}
|
|
465
|
-
.hover\:
|
|
534
|
+
.hover\:border-error-600 {
|
|
466
535
|
&:hover {
|
|
467
536
|
@media (hover: hover) {
|
|
468
|
-
|
|
537
|
+
border-color: var(--color-error-600);
|
|
469
538
|
}
|
|
470
539
|
}
|
|
471
540
|
}
|
|
472
|
-
.hover\:
|
|
541
|
+
.hover\:border-primary-400 {
|
|
473
542
|
&:hover {
|
|
474
543
|
@media (hover: hover) {
|
|
475
|
-
|
|
544
|
+
border-color: var(--color-primary-400);
|
|
476
545
|
}
|
|
477
546
|
}
|
|
478
547
|
}
|
|
479
|
-
.
|
|
548
|
+
.hover\:border-primary-800 {
|
|
549
|
+
&:hover {
|
|
550
|
+
@media (hover: hover) {
|
|
551
|
+
border-color: var(--color-primary-800);
|
|
552
|
+
}
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
.hover\:border-success-400 {
|
|
556
|
+
&:hover {
|
|
557
|
+
@media (hover: hover) {
|
|
558
|
+
border-color: var(--color-success-400);
|
|
559
|
+
}
|
|
560
|
+
}
|
|
561
|
+
}
|
|
562
|
+
.hover\:border-success-600 {
|
|
563
|
+
&:hover {
|
|
564
|
+
@media (hover: hover) {
|
|
565
|
+
border-color: var(--color-success-600);
|
|
566
|
+
}
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
.hover\:bg-background-50 {
|
|
570
|
+
&:hover {
|
|
571
|
+
@media (hover: hover) {
|
|
572
|
+
background-color: var(--color-background-50);
|
|
573
|
+
}
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
.hover\:bg-error-600 {
|
|
577
|
+
&:hover {
|
|
578
|
+
@media (hover: hover) {
|
|
579
|
+
background-color: var(--color-error-600);
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
.hover\:bg-primary-800 {
|
|
584
|
+
&:hover {
|
|
585
|
+
@media (hover: hover) {
|
|
586
|
+
background-color: var(--color-primary-800);
|
|
587
|
+
}
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
.hover\:bg-success-600 {
|
|
591
|
+
&:hover {
|
|
592
|
+
@media (hover: hover) {
|
|
593
|
+
background-color: var(--color-success-600);
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
}
|
|
597
|
+
.hover\:text-error-400 {
|
|
598
|
+
&:hover {
|
|
599
|
+
@media (hover: hover) {
|
|
600
|
+
color: var(--color-error-400);
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
}
|
|
604
|
+
.hover\:text-primary-400 {
|
|
605
|
+
&:hover {
|
|
606
|
+
@media (hover: hover) {
|
|
607
|
+
color: var(--color-primary-400);
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
}
|
|
611
|
+
.hover\:text-success-400 {
|
|
612
|
+
&:hover {
|
|
613
|
+
@media (hover: hover) {
|
|
614
|
+
color: var(--color-success-400);
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
.hover\:shadow-hard-shadow-1 {
|
|
619
|
+
&:hover {
|
|
620
|
+
@media (hover: hover) {
|
|
621
|
+
--tw-shadow: -2px 2px 8px var(--tw-shadow-color, rgba(38, 38, 38, 0.2));
|
|
622
|
+
box-shadow:
|
|
623
|
+
var(--tw-inset-shadow),
|
|
624
|
+
var(--tw-inset-ring-shadow),
|
|
625
|
+
var(--tw-ring-offset-shadow),
|
|
626
|
+
var(--tw-ring-shadow),
|
|
627
|
+
var(--tw-shadow);
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
.focus\:border-2 {
|
|
632
|
+
&:focus {
|
|
633
|
+
border-style: var(--tw-border-style);
|
|
634
|
+
border-width: 2px;
|
|
635
|
+
}
|
|
636
|
+
}
|
|
637
|
+
.focus\:border-indicator-info {
|
|
638
|
+
&:focus {
|
|
639
|
+
border-color: var(--color-indicator-info);
|
|
640
|
+
}
|
|
641
|
+
}
|
|
642
|
+
.focus\:bg-error-500 {
|
|
643
|
+
&:focus {
|
|
644
|
+
background-color: var(--color-error-500);
|
|
645
|
+
}
|
|
646
|
+
}
|
|
647
|
+
.focus\:bg-primary-950 {
|
|
480
648
|
&:focus {
|
|
481
|
-
|
|
649
|
+
background-color: var(--color-primary-950);
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
.focus\:bg-success-500 {
|
|
653
|
+
&:focus {
|
|
654
|
+
background-color: var(--color-success-500);
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
.focus\:text-error-600 {
|
|
658
|
+
&:focus {
|
|
659
|
+
color: var(--color-error-600);
|
|
660
|
+
}
|
|
661
|
+
}
|
|
662
|
+
.focus\:text-primary-600 {
|
|
663
|
+
&:focus {
|
|
664
|
+
color: var(--color-primary-600);
|
|
665
|
+
}
|
|
666
|
+
}
|
|
667
|
+
.focus\:text-success-600 {
|
|
668
|
+
&:focus {
|
|
669
|
+
color: var(--color-success-600);
|
|
670
|
+
}
|
|
671
|
+
}
|
|
672
|
+
.focus\:shadow-hard-shadow-1 {
|
|
673
|
+
&:focus {
|
|
674
|
+
--tw-shadow: -2px 2px 8px var(--tw-shadow-color, rgba(38, 38, 38, 0.2));
|
|
482
675
|
box-shadow:
|
|
483
676
|
var(--tw-inset-shadow),
|
|
484
677
|
var(--tw-inset-ring-shadow),
|
|
@@ -487,10 +680,94 @@
|
|
|
487
680
|
var(--tw-shadow);
|
|
488
681
|
}
|
|
489
682
|
}
|
|
490
|
-
.
|
|
491
|
-
&:
|
|
492
|
-
--
|
|
493
|
-
|
|
683
|
+
.active\:border-error-700 {
|
|
684
|
+
&:active {
|
|
685
|
+
border-color: var(--color-error-700);
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
.active\:border-primary-700 {
|
|
689
|
+
&:active {
|
|
690
|
+
border-color: var(--color-primary-700);
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
.active\:border-success-700 {
|
|
694
|
+
&:active {
|
|
695
|
+
border-color: var(--color-success-700);
|
|
696
|
+
}
|
|
697
|
+
}
|
|
698
|
+
.active\:bg-error-700 {
|
|
699
|
+
&:active {
|
|
700
|
+
background-color: var(--color-error-700);
|
|
701
|
+
}
|
|
702
|
+
}
|
|
703
|
+
.active\:bg-primary-700 {
|
|
704
|
+
&:active {
|
|
705
|
+
background-color: var(--color-primary-700);
|
|
706
|
+
}
|
|
707
|
+
}
|
|
708
|
+
.active\:bg-success-700 {
|
|
709
|
+
&:active {
|
|
710
|
+
background-color: var(--color-success-700);
|
|
711
|
+
}
|
|
712
|
+
}
|
|
713
|
+
.active\:text-error-700 {
|
|
714
|
+
&:active {
|
|
715
|
+
color: var(--color-error-700);
|
|
716
|
+
}
|
|
717
|
+
}
|
|
718
|
+
.active\:text-primary-700 {
|
|
719
|
+
&:active {
|
|
720
|
+
color: var(--color-primary-700);
|
|
721
|
+
}
|
|
722
|
+
}
|
|
723
|
+
.active\:text-success-700 {
|
|
724
|
+
&:active {
|
|
725
|
+
color: var(--color-success-700);
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
.disabled\:cursor-not-allowed {
|
|
729
|
+
&:disabled {
|
|
730
|
+
cursor: not-allowed;
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
.disabled\:border-error-500 {
|
|
734
|
+
&:disabled {
|
|
735
|
+
border-color: var(--color-error-500);
|
|
736
|
+
}
|
|
737
|
+
}
|
|
738
|
+
.disabled\:border-primary-500 {
|
|
739
|
+
&:disabled {
|
|
740
|
+
border-color: var(--color-primary-500);
|
|
741
|
+
}
|
|
742
|
+
}
|
|
743
|
+
.disabled\:border-success-500 {
|
|
744
|
+
&:disabled {
|
|
745
|
+
border-color: var(--color-success-500);
|
|
746
|
+
}
|
|
747
|
+
}
|
|
748
|
+
.disabled\:bg-error-500 {
|
|
749
|
+
&:disabled {
|
|
750
|
+
background-color: var(--color-error-500);
|
|
751
|
+
}
|
|
752
|
+
}
|
|
753
|
+
.disabled\:bg-primary-500 {
|
|
754
|
+
&:disabled {
|
|
755
|
+
background-color: var(--color-primary-500);
|
|
756
|
+
}
|
|
757
|
+
}
|
|
758
|
+
.disabled\:bg-success-500 {
|
|
759
|
+
&:disabled {
|
|
760
|
+
background-color: var(--color-success-500);
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
.disabled\:opacity-40 {
|
|
764
|
+
&:disabled {
|
|
765
|
+
opacity: 40%;
|
|
766
|
+
}
|
|
767
|
+
}
|
|
768
|
+
.disabled\:opacity-50 {
|
|
769
|
+
&:disabled {
|
|
770
|
+
opacity: 50%;
|
|
494
771
|
}
|
|
495
772
|
}
|
|
496
773
|
}
|
|
@@ -819,7 +1096,9 @@
|
|
|
819
1096
|
@property --tw-rotate-z { syntax: "*"; inherits: false; }
|
|
820
1097
|
@property --tw-skew-x { syntax: "*"; inherits: false; }
|
|
821
1098
|
@property --tw-skew-y { syntax: "*"; inherits: false; }
|
|
1099
|
+
@property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
|
|
822
1100
|
@property --tw-font-weight { syntax: "*"; inherits: false; }
|
|
1101
|
+
@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
|
|
823
1102
|
@property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
|
|
824
1103
|
@property --tw-shadow-color { syntax: "*"; inherits: false; }
|
|
825
1104
|
@property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
|
|
@@ -845,7 +1124,9 @@
|
|
|
845
1124
|
--tw-rotate-z: initial;
|
|
846
1125
|
--tw-skew-x: initial;
|
|
847
1126
|
--tw-skew-y: initial;
|
|
1127
|
+
--tw-border-style: solid;
|
|
848
1128
|
--tw-font-weight: initial;
|
|
1129
|
+
--tw-outline-style: solid;
|
|
849
1130
|
--tw-shadow: 0 0 #0000;
|
|
850
1131
|
--tw-shadow-color: initial;
|
|
851
1132
|
--tw-shadow-alpha: 100%;
|
package/dist/index.d.mts
CHANGED
|
@@ -7,34 +7,41 @@ import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef
|
|
|
7
7
|
type ButtonProps = {
|
|
8
8
|
/** Content to be displayed inside the button */
|
|
9
9
|
children: ReactNode;
|
|
10
|
+
/** Ícone à esquerda do texto */
|
|
11
|
+
iconLeft?: ReactNode;
|
|
12
|
+
/** Ícone à direita do texto */
|
|
13
|
+
iconRight?: ReactNode;
|
|
14
|
+
/** Size of the button */
|
|
15
|
+
size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
10
16
|
/** Visual variant of the button */
|
|
11
|
-
variant?: '
|
|
12
|
-
/**
|
|
13
|
-
|
|
17
|
+
variant?: 'solid' | 'outline' | 'link';
|
|
18
|
+
/** Action type of the button */
|
|
19
|
+
action?: 'primary' | 'positive' | 'negative';
|
|
14
20
|
/** Additional CSS classes to apply */
|
|
15
21
|
className?: string;
|
|
16
22
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
17
23
|
/**
|
|
18
24
|
* Button component for Analytica Ensino platforms
|
|
19
25
|
*
|
|
20
|
-
* A flexible button component with multiple variants and
|
|
26
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
21
27
|
* Fully compatible with Next.js 15 and React 19.
|
|
22
28
|
*
|
|
23
29
|
* @param children - The content to display inside the button
|
|
24
|
-
* @param
|
|
25
|
-
* @param
|
|
30
|
+
* @param size - The size variant (extra-small, small, medium, large, extra-large)
|
|
31
|
+
* @param variant - The visual style variant (solid, outline, link)
|
|
32
|
+
* @param action - The action type (primary, positive, negative)
|
|
26
33
|
* @param className - Additional CSS classes
|
|
27
34
|
* @param props - All other standard button HTML attributes
|
|
28
35
|
* @returns A styled button element
|
|
29
36
|
*
|
|
30
37
|
* @example
|
|
31
38
|
* ```tsx
|
|
32
|
-
* <Button variant="primary" size="
|
|
39
|
+
* <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
|
|
33
40
|
* Click me
|
|
34
41
|
* </Button>
|
|
35
42
|
* ```
|
|
36
43
|
*/
|
|
37
|
-
declare const Button: ({ children,
|
|
44
|
+
declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
38
45
|
|
|
39
46
|
/**
|
|
40
47
|
* Base text component props
|
package/dist/index.d.ts
CHANGED
|
@@ -7,34 +7,41 @@ import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef
|
|
|
7
7
|
type ButtonProps = {
|
|
8
8
|
/** Content to be displayed inside the button */
|
|
9
9
|
children: ReactNode;
|
|
10
|
+
/** Ícone à esquerda do texto */
|
|
11
|
+
iconLeft?: ReactNode;
|
|
12
|
+
/** Ícone à direita do texto */
|
|
13
|
+
iconRight?: ReactNode;
|
|
14
|
+
/** Size of the button */
|
|
15
|
+
size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
|
|
10
16
|
/** Visual variant of the button */
|
|
11
|
-
variant?: '
|
|
12
|
-
/**
|
|
13
|
-
|
|
17
|
+
variant?: 'solid' | 'outline' | 'link';
|
|
18
|
+
/** Action type of the button */
|
|
19
|
+
action?: 'primary' | 'positive' | 'negative';
|
|
14
20
|
/** Additional CSS classes to apply */
|
|
15
21
|
className?: string;
|
|
16
22
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
|
17
23
|
/**
|
|
18
24
|
* Button component for Analytica Ensino platforms
|
|
19
25
|
*
|
|
20
|
-
* A flexible button component with multiple variants and
|
|
26
|
+
* A flexible button component with multiple variants, sizes and actions.
|
|
21
27
|
* Fully compatible with Next.js 15 and React 19.
|
|
22
28
|
*
|
|
23
29
|
* @param children - The content to display inside the button
|
|
24
|
-
* @param
|
|
25
|
-
* @param
|
|
30
|
+
* @param size - The size variant (extra-small, small, medium, large, extra-large)
|
|
31
|
+
* @param variant - The visual style variant (solid, outline, link)
|
|
32
|
+
* @param action - The action type (primary, positive, negative)
|
|
26
33
|
* @param className - Additional CSS classes
|
|
27
34
|
* @param props - All other standard button HTML attributes
|
|
28
35
|
* @returns A styled button element
|
|
29
36
|
*
|
|
30
37
|
* @example
|
|
31
38
|
* ```tsx
|
|
32
|
-
* <Button variant="primary" size="
|
|
39
|
+
* <Button variant="solid" action="primary" size="medium" onClick={() => console.log('clicked')}>
|
|
33
40
|
* Click me
|
|
34
41
|
* </Button>
|
|
35
42
|
* ```
|
|
36
43
|
*/
|
|
37
|
-
declare const Button: ({ children,
|
|
44
|
+
declare const Button: ({ children, iconLeft, iconRight, size, variant, action, className, disabled, type, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
|
|
38
45
|
|
|
39
46
|
/**
|
|
40
47
|
* Base text component props
|
package/dist/index.js
CHANGED
|
@@ -27,46 +27,57 @@ module.exports = __toCommonJS(index_exports);
|
|
|
27
27
|
|
|
28
28
|
// src/components/Button/Button.tsx
|
|
29
29
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var VARIANT_ACTION_CLASSES = {
|
|
31
|
+
solid: {
|
|
32
|
+
primary: "bg-primary-950 text-text border-2 border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus:bg-primary-950 focus:border-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
33
|
+
positive: "bg-success-500 text-text border-2 border-success-500 hover:bg-success-600 hover:border-success-600 focus:bg-success-500 focus:border-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
34
|
+
negative: "bg-error-500 text-text border-2 border-error-500 hover:bg-error-600 hover:border-error-600 focus:bg-error-500 focus:border-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
35
|
+
},
|
|
36
|
+
outline: {
|
|
37
|
+
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
38
|
+
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
39
|
+
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
40
|
+
},
|
|
41
|
+
link: {
|
|
42
|
+
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
43
|
+
positive: "bg-transparent text-success-500 hover:text-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
44
|
+
negative: "bg-transparent text-error-500 hover:text-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
var SIZE_CLASSES = {
|
|
48
|
+
"extra-small": "text-xs px-3.5 py-2",
|
|
49
|
+
small: "text-sm px-4 py-2.5",
|
|
50
|
+
medium: "text-md px-5 py-2.5",
|
|
51
|
+
large: "text-lg px-6 py-3",
|
|
52
|
+
"extra-large": "text-lg px-7 py-3.5"
|
|
53
|
+
};
|
|
30
54
|
var Button = ({
|
|
31
55
|
children,
|
|
32
|
-
|
|
33
|
-
|
|
56
|
+
iconLeft,
|
|
57
|
+
iconRight,
|
|
58
|
+
size = "medium",
|
|
59
|
+
variant = "solid",
|
|
60
|
+
action = "primary",
|
|
34
61
|
className = "",
|
|
62
|
+
disabled,
|
|
63
|
+
type = "button",
|
|
35
64
|
...props
|
|
36
65
|
}) => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
variantClasses = "bg-secondary-200 hover:bg-secondary-300 text-primary-950";
|
|
42
|
-
break;
|
|
43
|
-
case "danger":
|
|
44
|
-
variantClasses = "bg-error-600 hover:bg-error-700 text-secondary";
|
|
45
|
-
break;
|
|
46
|
-
case "primary":
|
|
47
|
-
default:
|
|
48
|
-
variantClasses = "bg-primary-600 hover:bg-primary-700 text-secondary";
|
|
49
|
-
break;
|
|
50
|
-
}
|
|
51
|
-
switch (size) {
|
|
52
|
-
case "sm":
|
|
53
|
-
sizeClasses = "text-sm px-3 py-1.5";
|
|
54
|
-
break;
|
|
55
|
-
case "lg":
|
|
56
|
-
sizeClasses = "text-lg px-5 py-3";
|
|
57
|
-
break;
|
|
58
|
-
case "md":
|
|
59
|
-
default:
|
|
60
|
-
sizeClasses = "text-base px-4 py-2";
|
|
61
|
-
break;
|
|
62
|
-
}
|
|
63
|
-
const baseClasses = "rounded-full font-medium focus:outline-none focus:ring transition";
|
|
64
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
66
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
67
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
68
|
+
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
65
70
|
"button",
|
|
66
71
|
{
|
|
67
72
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
73
|
+
disabled,
|
|
74
|
+
type,
|
|
68
75
|
...props,
|
|
69
|
-
children
|
|
76
|
+
children: [
|
|
77
|
+
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
78
|
+
children,
|
|
79
|
+
iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
80
|
+
]
|
|
70
81
|
}
|
|
71
82
|
);
|
|
72
83
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -1,45 +1,56 @@
|
|
|
1
1
|
// src/components/Button/Button.tsx
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
var VARIANT_ACTION_CLASSES = {
|
|
4
|
+
solid: {
|
|
5
|
+
primary: "bg-primary-950 text-text border-2 border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus:bg-primary-950 focus:border-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
6
|
+
positive: "bg-success-500 text-text border-2 border-success-500 hover:bg-success-600 hover:border-success-600 focus:bg-success-500 focus:border-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
7
|
+
negative: "bg-error-500 text-text border-2 border-error-500 hover:bg-error-600 hover:border-error-600 focus:bg-error-500 focus:border-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
8
|
+
},
|
|
9
|
+
outline: {
|
|
10
|
+
primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
11
|
+
positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
12
|
+
negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
13
|
+
},
|
|
14
|
+
link: {
|
|
15
|
+
primary: "bg-transparent text-primary-950 hover:text-primary-400 focus:text-primary-600 focus:border-2 focus:border-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
16
|
+
positive: "bg-transparent text-success-500 hover:text-success-400 focus:text-success-600 focus:border-2 focus:border-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
17
|
+
negative: "bg-transparent text-error-500 hover:text-error-400 focus:text-error-600 focus:border-2 focus:border-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
var SIZE_CLASSES = {
|
|
21
|
+
"extra-small": "text-xs px-3.5 py-2",
|
|
22
|
+
small: "text-sm px-4 py-2.5",
|
|
23
|
+
medium: "text-md px-5 py-2.5",
|
|
24
|
+
large: "text-lg px-6 py-3",
|
|
25
|
+
"extra-large": "text-lg px-7 py-3.5"
|
|
26
|
+
};
|
|
3
27
|
var Button = ({
|
|
4
28
|
children,
|
|
5
|
-
|
|
6
|
-
|
|
29
|
+
iconLeft,
|
|
30
|
+
iconRight,
|
|
31
|
+
size = "medium",
|
|
32
|
+
variant = "solid",
|
|
33
|
+
action = "primary",
|
|
7
34
|
className = "",
|
|
35
|
+
disabled,
|
|
36
|
+
type = "button",
|
|
8
37
|
...props
|
|
9
38
|
}) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
variantClasses = "bg-secondary-200 hover:bg-secondary-300 text-primary-950";
|
|
15
|
-
break;
|
|
16
|
-
case "danger":
|
|
17
|
-
variantClasses = "bg-error-600 hover:bg-error-700 text-secondary";
|
|
18
|
-
break;
|
|
19
|
-
case "primary":
|
|
20
|
-
default:
|
|
21
|
-
variantClasses = "bg-primary-600 hover:bg-primary-700 text-secondary";
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
switch (size) {
|
|
25
|
-
case "sm":
|
|
26
|
-
sizeClasses = "text-sm px-3 py-1.5";
|
|
27
|
-
break;
|
|
28
|
-
case "lg":
|
|
29
|
-
sizeClasses = "text-lg px-5 py-3";
|
|
30
|
-
break;
|
|
31
|
-
case "md":
|
|
32
|
-
default:
|
|
33
|
-
sizeClasses = "text-base px-4 py-2";
|
|
34
|
-
break;
|
|
35
|
-
}
|
|
36
|
-
const baseClasses = "rounded-full font-medium focus:outline-none focus:ring transition";
|
|
37
|
-
return /* @__PURE__ */ jsx(
|
|
39
|
+
const sizeClasses = SIZE_CLASSES[size];
|
|
40
|
+
const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
|
|
41
|
+
const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
|
|
42
|
+
return /* @__PURE__ */ jsxs(
|
|
38
43
|
"button",
|
|
39
44
|
{
|
|
40
45
|
className: `${baseClasses} ${variantClasses} ${sizeClasses} ${className}`,
|
|
46
|
+
disabled,
|
|
47
|
+
type,
|
|
41
48
|
...props,
|
|
42
|
-
children
|
|
49
|
+
children: [
|
|
50
|
+
iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
|
|
51
|
+
children,
|
|
52
|
+
iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
|
|
53
|
+
]
|
|
43
54
|
}
|
|
44
55
|
);
|
|
45
56
|
};
|
package/package.json
CHANGED