analytica-frontend-lib 1.0.10 → 1.0.12
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 +237 -0
- package/dist/index.d.mts +15 -2
- package/dist/index.d.ts +15 -2
- package/dist/index.js +114 -0
- package/dist/index.mjs +106 -0
- package/package.json +2 -1
package/dist/index.css
CHANGED
|
@@ -47,7 +47,11 @@
|
|
|
47
47
|
--font-weight-bold: 700;
|
|
48
48
|
--font-weight-extrabold: 800;
|
|
49
49
|
--font-weight-black: 900;
|
|
50
|
+
--radius-sm: 0.25rem;
|
|
51
|
+
--radius-md: 0.375rem;
|
|
50
52
|
--radius-xl: 0.75rem;
|
|
53
|
+
--default-transition-duration: 150ms;
|
|
54
|
+
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
51
55
|
--default-font-family: var(--font-sans);
|
|
52
56
|
--default-mono-font-family: var(--font-mono);
|
|
53
57
|
--color-primary-400: #525252;
|
|
@@ -57,15 +61,20 @@
|
|
|
57
61
|
--color-primary-800: #0d0d0d;
|
|
58
62
|
--color-primary-950: #080808;
|
|
59
63
|
--color-text: #fefeff;
|
|
64
|
+
--color-text-400: #a3a3a3;
|
|
60
65
|
--color-text-600: #737373;
|
|
61
66
|
--color-text-700: #525252;
|
|
67
|
+
--color-text-800: #404040;
|
|
62
68
|
--color-text-900: #262627;
|
|
63
69
|
--color-text-950: #171717;
|
|
64
70
|
--color-background: #ffffff;
|
|
65
71
|
--color-background-50: #f6f6f6;
|
|
66
72
|
--color-background-100: #f2f1f1;
|
|
67
73
|
--color-background-200: #dcdbdb;
|
|
74
|
+
--color-background-muted: #f7f8f7;
|
|
68
75
|
--color-border-50: #f3f3f3;
|
|
76
|
+
--color-border-100: #e6e6e6;
|
|
77
|
+
--color-border-200: #dddcdb;
|
|
69
78
|
--color-success-300: #66b584;
|
|
70
79
|
--color-success-400: #489766;
|
|
71
80
|
--color-success-500: #348352;
|
|
@@ -76,7 +85,9 @@
|
|
|
76
85
|
--color-error-500: #e63535;
|
|
77
86
|
--color-error-600: #dc2626;
|
|
78
87
|
--color-error-700: #b91c1c;
|
|
88
|
+
--color-indicator-primary: #373737;
|
|
79
89
|
--color-indicator-info: #5399ec;
|
|
90
|
+
--color-indicator-error: #b91c1c;
|
|
80
91
|
--font-weight-hairline: 100;
|
|
81
92
|
--text-2xs: 0.625rem;
|
|
82
93
|
--text-2xs--line-height: calc(1 / 0.625);
|
|
@@ -284,9 +295,47 @@
|
|
|
284
295
|
}
|
|
285
296
|
}
|
|
286
297
|
@layer utilities {
|
|
298
|
+
.sr-only {
|
|
299
|
+
position: absolute;
|
|
300
|
+
width: 1px;
|
|
301
|
+
height: 1px;
|
|
302
|
+
padding: 0;
|
|
303
|
+
margin: -1px;
|
|
304
|
+
overflow: hidden;
|
|
305
|
+
clip: rect(0, 0, 0, 0);
|
|
306
|
+
white-space: nowrap;
|
|
307
|
+
border-width: 0;
|
|
308
|
+
}
|
|
309
|
+
.absolute {
|
|
310
|
+
position: absolute;
|
|
311
|
+
}
|
|
312
|
+
.relative {
|
|
313
|
+
position: relative;
|
|
314
|
+
}
|
|
315
|
+
.top-full {
|
|
316
|
+
top: 100%;
|
|
317
|
+
}
|
|
318
|
+
.right-0 {
|
|
319
|
+
right: calc(var(--spacing) * 0);
|
|
320
|
+
}
|
|
321
|
+
.bottom-full {
|
|
322
|
+
bottom: 100%;
|
|
323
|
+
}
|
|
324
|
+
.left-0 {
|
|
325
|
+
left: calc(var(--spacing) * 0);
|
|
326
|
+
}
|
|
327
|
+
.left-1\/2 {
|
|
328
|
+
left: calc(1/2 * 100%);
|
|
329
|
+
}
|
|
330
|
+
.z-50 {
|
|
331
|
+
z-index: 50;
|
|
332
|
+
}
|
|
287
333
|
.mx-2 {
|
|
288
334
|
margin-inline: calc(var(--spacing) * 2);
|
|
289
335
|
}
|
|
336
|
+
.my-1 {
|
|
337
|
+
margin-block: calc(var(--spacing) * 1);
|
|
338
|
+
}
|
|
290
339
|
.my-4 {
|
|
291
340
|
margin-block: calc(var(--spacing) * 4);
|
|
292
341
|
}
|
|
@@ -323,6 +372,12 @@
|
|
|
323
372
|
.h-8 {
|
|
324
373
|
height: calc(var(--spacing) * 8);
|
|
325
374
|
}
|
|
375
|
+
.h-10 {
|
|
376
|
+
height: calc(var(--spacing) * 10);
|
|
377
|
+
}
|
|
378
|
+
.h-px {
|
|
379
|
+
height: 1px;
|
|
380
|
+
}
|
|
326
381
|
.w-5 {
|
|
327
382
|
width: calc(var(--spacing) * 5);
|
|
328
383
|
}
|
|
@@ -332,9 +387,25 @@
|
|
|
332
387
|
.w-8 {
|
|
333
388
|
width: calc(var(--spacing) * 8);
|
|
334
389
|
}
|
|
390
|
+
.w-full {
|
|
391
|
+
width: 100%;
|
|
392
|
+
}
|
|
393
|
+
.min-w-\[210px\] {
|
|
394
|
+
min-width: 210px;
|
|
395
|
+
}
|
|
396
|
+
.caption-bottom {
|
|
397
|
+
caption-side: bottom;
|
|
398
|
+
}
|
|
399
|
+
.-translate-x-1\/2 {
|
|
400
|
+
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
401
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
402
|
+
}
|
|
335
403
|
.transform {
|
|
336
404
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
337
405
|
}
|
|
406
|
+
.cursor-not-allowed {
|
|
407
|
+
cursor: not-allowed;
|
|
408
|
+
}
|
|
338
409
|
.cursor-pointer {
|
|
339
410
|
cursor: pointer;
|
|
340
411
|
}
|
|
@@ -368,9 +439,21 @@
|
|
|
368
439
|
.gap-6 {
|
|
369
440
|
gap: calc(var(--spacing) * 6);
|
|
370
441
|
}
|
|
442
|
+
.gap-8 {
|
|
443
|
+
gap: calc(var(--spacing) * 8);
|
|
444
|
+
}
|
|
445
|
+
.overflow-hidden {
|
|
446
|
+
overflow: hidden;
|
|
447
|
+
}
|
|
371
448
|
.rounded-full {
|
|
372
449
|
border-radius: calc(infinity * 1px);
|
|
373
450
|
}
|
|
451
|
+
.rounded-md {
|
|
452
|
+
border-radius: var(--radius-md);
|
|
453
|
+
}
|
|
454
|
+
.rounded-sm {
|
|
455
|
+
border-radius: var(--radius-sm);
|
|
456
|
+
}
|
|
374
457
|
.rounded-xl {
|
|
375
458
|
border-radius: var(--radius-xl);
|
|
376
459
|
}
|
|
@@ -378,18 +461,42 @@
|
|
|
378
461
|
border-style: var(--tw-border-style);
|
|
379
462
|
border-width: 1px;
|
|
380
463
|
}
|
|
464
|
+
.border-t {
|
|
465
|
+
border-top-style: var(--tw-border-style);
|
|
466
|
+
border-top-width: 1px;
|
|
467
|
+
}
|
|
468
|
+
.border-b {
|
|
469
|
+
border-bottom-style: var(--tw-border-style);
|
|
470
|
+
border-bottom-width: 1px;
|
|
471
|
+
}
|
|
472
|
+
.border-b-2 {
|
|
473
|
+
border-bottom-style: var(--tw-border-style);
|
|
474
|
+
border-bottom-width: 2px;
|
|
475
|
+
}
|
|
381
476
|
.border-background-200 {
|
|
382
477
|
border-color: var(--color-background-200);
|
|
383
478
|
}
|
|
384
479
|
.border-border-50 {
|
|
385
480
|
border-color: var(--color-border-50);
|
|
386
481
|
}
|
|
482
|
+
.border-border-100 {
|
|
483
|
+
border-color: var(--color-border-100);
|
|
484
|
+
}
|
|
485
|
+
.border-border-200 {
|
|
486
|
+
border-color: var(--color-border-200);
|
|
487
|
+
}
|
|
387
488
|
.border-error-300 {
|
|
388
489
|
border-color: var(--color-error-300);
|
|
389
490
|
}
|
|
390
491
|
.border-error-500 {
|
|
391
492
|
border-color: var(--color-error-500);
|
|
392
493
|
}
|
|
494
|
+
.border-indicator-error {
|
|
495
|
+
border-color: var(--color-indicator-error);
|
|
496
|
+
}
|
|
497
|
+
.border-indicator-primary {
|
|
498
|
+
border-color: var(--color-indicator-primary);
|
|
499
|
+
}
|
|
393
500
|
.border-primary-950 {
|
|
394
501
|
border-color: var(--color-primary-950);
|
|
395
502
|
}
|
|
@@ -402,6 +509,15 @@
|
|
|
402
509
|
.bg-background {
|
|
403
510
|
background-color: var(--color-background);
|
|
404
511
|
}
|
|
512
|
+
.bg-background-50 {
|
|
513
|
+
background-color: var(--color-background-50);
|
|
514
|
+
}
|
|
515
|
+
.bg-background-muted {
|
|
516
|
+
background-color: var(--color-background-muted);
|
|
517
|
+
}
|
|
518
|
+
.bg-border-200 {
|
|
519
|
+
background-color: var(--color-border-200);
|
|
520
|
+
}
|
|
405
521
|
.bg-error-500 {
|
|
406
522
|
background-color: var(--color-error-500);
|
|
407
523
|
}
|
|
@@ -414,6 +530,15 @@
|
|
|
414
530
|
.bg-transparent {
|
|
415
531
|
background-color: transparent;
|
|
416
532
|
}
|
|
533
|
+
.p-1 {
|
|
534
|
+
padding: calc(var(--spacing) * 1);
|
|
535
|
+
}
|
|
536
|
+
.p-2 {
|
|
537
|
+
padding: calc(var(--spacing) * 2);
|
|
538
|
+
}
|
|
539
|
+
.p-3 {
|
|
540
|
+
padding: calc(var(--spacing) * 3);
|
|
541
|
+
}
|
|
417
542
|
.p-4 {
|
|
418
543
|
padding: calc(var(--spacing) * 4);
|
|
419
544
|
}
|
|
@@ -447,6 +572,18 @@
|
|
|
447
572
|
.py-3\.5 {
|
|
448
573
|
padding-block: calc(var(--spacing) * 3.5);
|
|
449
574
|
}
|
|
575
|
+
.pl-8 {
|
|
576
|
+
padding-left: calc(var(--spacing) * 8);
|
|
577
|
+
}
|
|
578
|
+
.text-left {
|
|
579
|
+
text-align: left;
|
|
580
|
+
}
|
|
581
|
+
.text-right {
|
|
582
|
+
text-align: right;
|
|
583
|
+
}
|
|
584
|
+
.align-middle {
|
|
585
|
+
vertical-align: middle;
|
|
586
|
+
}
|
|
450
587
|
.text-2xl {
|
|
451
588
|
font-size: var(--text-2xl);
|
|
452
589
|
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
|
@@ -535,18 +672,39 @@
|
|
|
535
672
|
.text-text {
|
|
536
673
|
color: var(--color-text);
|
|
537
674
|
}
|
|
675
|
+
.text-text-400 {
|
|
676
|
+
color: var(--color-text-400);
|
|
677
|
+
}
|
|
538
678
|
.text-text-600 {
|
|
539
679
|
color: var(--color-text-600);
|
|
540
680
|
}
|
|
541
681
|
.text-text-700 {
|
|
542
682
|
color: var(--color-text-700);
|
|
543
683
|
}
|
|
684
|
+
.text-text-800 {
|
|
685
|
+
color: var(--color-text-800);
|
|
686
|
+
}
|
|
544
687
|
.text-text-900 {
|
|
545
688
|
color: var(--color-text-900);
|
|
546
689
|
}
|
|
547
690
|
.text-text-950 {
|
|
548
691
|
color: var(--color-text-950);
|
|
549
692
|
}
|
|
693
|
+
.capitalize {
|
|
694
|
+
text-transform: capitalize;
|
|
695
|
+
}
|
|
696
|
+
.opacity-50 {
|
|
697
|
+
opacity: 50%;
|
|
698
|
+
}
|
|
699
|
+
.shadow-md {
|
|
700
|
+
--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
701
|
+
box-shadow:
|
|
702
|
+
var(--tw-inset-shadow),
|
|
703
|
+
var(--tw-inset-ring-shadow),
|
|
704
|
+
var(--tw-ring-offset-shadow),
|
|
705
|
+
var(--tw-ring-shadow),
|
|
706
|
+
var(--tw-shadow);
|
|
707
|
+
}
|
|
550
708
|
.shadow-none {
|
|
551
709
|
--tw-shadow: 0 0 #0000;
|
|
552
710
|
box-shadow:
|
|
@@ -585,6 +743,30 @@
|
|
|
585
743
|
outline-style: var(--tw-outline-style);
|
|
586
744
|
outline-width: 1px;
|
|
587
745
|
}
|
|
746
|
+
.transition-colors {
|
|
747
|
+
transition-property:
|
|
748
|
+
color,
|
|
749
|
+
background-color,
|
|
750
|
+
border-color,
|
|
751
|
+
outline-color,
|
|
752
|
+
text-decoration-color,
|
|
753
|
+
fill,
|
|
754
|
+
stroke,
|
|
755
|
+
--tw-gradient-from,
|
|
756
|
+
--tw-gradient-via,
|
|
757
|
+
--tw-gradient-to;
|
|
758
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
759
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
760
|
+
}
|
|
761
|
+
.outline-none {
|
|
762
|
+
--tw-outline-style: none;
|
|
763
|
+
outline-style: none;
|
|
764
|
+
}
|
|
765
|
+
.select-none {
|
|
766
|
+
-webkit-user-select: none;
|
|
767
|
+
-moz-user-select: none;
|
|
768
|
+
user-select: none;
|
|
769
|
+
}
|
|
588
770
|
.hover\:border-error-400 {
|
|
589
771
|
&:hover {
|
|
590
772
|
@media (hover: hover) {
|
|
@@ -641,6 +823,13 @@
|
|
|
641
823
|
}
|
|
642
824
|
}
|
|
643
825
|
}
|
|
826
|
+
.hover\:bg-background-200 {
|
|
827
|
+
&:hover {
|
|
828
|
+
@media (hover: hover) {
|
|
829
|
+
background-color: var(--color-background-200);
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
}
|
|
644
833
|
.hover\:bg-error-600 {
|
|
645
834
|
&:hover {
|
|
646
835
|
@media (hover: hover) {
|
|
@@ -905,6 +1094,48 @@
|
|
|
905
1094
|
opacity: 50%;
|
|
906
1095
|
}
|
|
907
1096
|
}
|
|
1097
|
+
.\[\&_tr\:first-child\]\:border-0 {
|
|
1098
|
+
& tr:first-child {
|
|
1099
|
+
border-style: var(--tw-border-style);
|
|
1100
|
+
border-width: 0px;
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
.\[\&_tr\:last-child\]\:border-0 {
|
|
1104
|
+
& tr:last-child {
|
|
1105
|
+
border-style: var(--tw-border-style);
|
|
1106
|
+
border-width: 0px;
|
|
1107
|
+
}
|
|
1108
|
+
}
|
|
1109
|
+
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
|
|
1110
|
+
&:has([role=checkbox]) {
|
|
1111
|
+
padding-right: calc(var(--spacing) * 0);
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\] {
|
|
1115
|
+
& > [role=checkbox] {
|
|
1116
|
+
--tw-translate-y: 2px;
|
|
1117
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
1118
|
+
}
|
|
1119
|
+
}
|
|
1120
|
+
.\[\&\>svg\]\:size-4 {
|
|
1121
|
+
& > svg {
|
|
1122
|
+
width: calc(var(--spacing) * 4);
|
|
1123
|
+
height: calc(var(--spacing) * 4);
|
|
1124
|
+
}
|
|
1125
|
+
}
|
|
1126
|
+
.\[\&\>svg\]\:shrink-0 {
|
|
1127
|
+
& > svg {
|
|
1128
|
+
flex-shrink: 0;
|
|
1129
|
+
}
|
|
1130
|
+
}
|
|
1131
|
+
.\[\&\>tr\]\:last\:border-b-0 {
|
|
1132
|
+
& > tr {
|
|
1133
|
+
&:last-child {
|
|
1134
|
+
border-bottom-style: var(--tw-border-style);
|
|
1135
|
+
border-bottom-width: 0px;
|
|
1136
|
+
}
|
|
1137
|
+
}
|
|
1138
|
+
}
|
|
908
1139
|
}
|
|
909
1140
|
@layer base {
|
|
910
1141
|
[data-theme=dark] {
|
|
@@ -1226,6 +1457,9 @@
|
|
|
1226
1457
|
--shadow-soft-shadow-4: 0px 0px 40px rgba(38, 38, 38, 0.2);
|
|
1227
1458
|
}
|
|
1228
1459
|
}
|
|
1460
|
+
@property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
|
|
1461
|
+
@property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
|
|
1462
|
+
@property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
|
|
1229
1463
|
@property --tw-rotate-x { syntax: "*"; inherits: false; }
|
|
1230
1464
|
@property --tw-rotate-y { syntax: "*"; inherits: false; }
|
|
1231
1465
|
@property --tw-rotate-z { syntax: "*"; inherits: false; }
|
|
@@ -1254,6 +1488,9 @@
|
|
|
1254
1488
|
::before,
|
|
1255
1489
|
::after,
|
|
1256
1490
|
::backdrop {
|
|
1491
|
+
--tw-translate-x: 0;
|
|
1492
|
+
--tw-translate-y: 0;
|
|
1493
|
+
--tw-translate-z: 0;
|
|
1257
1494
|
--tw-rotate-x: initial;
|
|
1258
1495
|
--tw-rotate-y: initial;
|
|
1259
1496
|
--tw-rotate-z: initial;
|
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Button component props interface
|
|
@@ -184,4 +184,17 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
|
184
184
|
*/
|
|
185
185
|
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
186
186
|
|
|
187
|
-
|
|
187
|
+
type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
|
|
188
|
+
interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
189
|
+
state?: TableRowState;
|
|
190
|
+
}
|
|
191
|
+
declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
|
|
192
|
+
declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
193
|
+
declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
194
|
+
declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
195
|
+
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
|
|
196
|
+
declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
197
|
+
declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
198
|
+
declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
|
|
199
|
+
|
|
200
|
+
export { Button, IconRoundedButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import { ReactNode, ButtonHTMLAttributes, ElementType, ComponentPropsWithoutRef, HTMLAttributes, TdHTMLAttributes } from 'react';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Button component props interface
|
|
@@ -184,4 +184,17 @@ type TextProps<T extends ElementType = 'p'> = BaseTextProps & {
|
|
|
184
184
|
*/
|
|
185
185
|
declare const Text: <T extends ElementType = "p">({ children, size, weight, color, as, className, ...props }: TextProps<T>) => react_jsx_runtime.JSX.Element;
|
|
186
186
|
|
|
187
|
-
|
|
187
|
+
type TableRowState = 'default' | 'selected' | 'invalid' | 'disabled';
|
|
188
|
+
interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
189
|
+
state?: TableRowState;
|
|
190
|
+
}
|
|
191
|
+
declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
|
|
192
|
+
declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
193
|
+
declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
194
|
+
declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
|
|
195
|
+
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
|
|
196
|
+
declare const TableHead: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
197
|
+
declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
|
|
198
|
+
declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
|
|
199
|
+
|
|
200
|
+
export { Button, IconRoundedButton, SelectionButton, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Text };
|
package/dist/index.js
CHANGED
|
@@ -23,6 +23,14 @@ __export(index_exports, {
|
|
|
23
23
|
Button: () => Button,
|
|
24
24
|
IconRoundedButton: () => IconRoundedButton,
|
|
25
25
|
SelectionButton: () => SelectionButton,
|
|
26
|
+
Table: () => Table,
|
|
27
|
+
TableBody: () => TableBody,
|
|
28
|
+
TableCaption: () => TableCaption,
|
|
29
|
+
TableCell: () => TableCell,
|
|
30
|
+
TableFooter: () => TableFooter,
|
|
31
|
+
TableHead: () => TableHead,
|
|
32
|
+
TableHeader: () => TableHeader,
|
|
33
|
+
TableRow: () => TableRow,
|
|
26
34
|
Text: () => Text
|
|
27
35
|
});
|
|
28
36
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -234,10 +242,116 @@ var Text = ({
|
|
|
234
242
|
}
|
|
235
243
|
);
|
|
236
244
|
};
|
|
245
|
+
|
|
246
|
+
// src/components/Table/Table.tsx
|
|
247
|
+
var import_react2 = require("react");
|
|
248
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
249
|
+
var Table = (0, import_react2.forwardRef)(
|
|
250
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
251
|
+
"table",
|
|
252
|
+
{
|
|
253
|
+
ref,
|
|
254
|
+
className: `w-full caption-bottom text-sm ${className ?? ""}`,
|
|
255
|
+
...props,
|
|
256
|
+
children: [
|
|
257
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)("caption", { className: "sr-only", children: "My Table" }),
|
|
258
|
+
children
|
|
259
|
+
]
|
|
260
|
+
}
|
|
261
|
+
) })
|
|
262
|
+
);
|
|
263
|
+
Table.displayName = "Table";
|
|
264
|
+
var TableHeader = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
265
|
+
"thead",
|
|
266
|
+
{
|
|
267
|
+
ref,
|
|
268
|
+
className: `[&_tr:first-child]:border-0 ${className}`,
|
|
269
|
+
...props
|
|
270
|
+
}
|
|
271
|
+
));
|
|
272
|
+
TableHeader.displayName = "TableHeader";
|
|
273
|
+
var TableBody = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
274
|
+
"tbody",
|
|
275
|
+
{
|
|
276
|
+
ref,
|
|
277
|
+
className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
|
|
278
|
+
...props
|
|
279
|
+
}
|
|
280
|
+
));
|
|
281
|
+
TableBody.displayName = "TableBody";
|
|
282
|
+
var TableFooter = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
283
|
+
"tfoot",
|
|
284
|
+
{
|
|
285
|
+
ref,
|
|
286
|
+
className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
|
|
287
|
+
...props
|
|
288
|
+
}
|
|
289
|
+
));
|
|
290
|
+
TableFooter.displayName = "TableFooter";
|
|
291
|
+
var VARIANT_STATES_ROW = {
|
|
292
|
+
default: "border-b border-border-200",
|
|
293
|
+
selected: "border-b-2 border-indicator-primary",
|
|
294
|
+
invalid: "border-b-2 border-indicator-error",
|
|
295
|
+
disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
|
|
296
|
+
};
|
|
297
|
+
var TableRow = (0, import_react2.forwardRef)(
|
|
298
|
+
({ state = "default", className, ...props }, ref) => {
|
|
299
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
300
|
+
"tr",
|
|
301
|
+
{
|
|
302
|
+
ref,
|
|
303
|
+
className: `
|
|
304
|
+
transition-colors
|
|
305
|
+
${state !== "disabled" ? "hover:bg-muted/50" : ""}
|
|
306
|
+
${VARIANT_STATES_ROW[state]}
|
|
307
|
+
${className}
|
|
308
|
+
`,
|
|
309
|
+
"aria-disabled": state === "disabled",
|
|
310
|
+
...props
|
|
311
|
+
}
|
|
312
|
+
);
|
|
313
|
+
}
|
|
314
|
+
);
|
|
315
|
+
TableRow.displayName = "TableRow";
|
|
316
|
+
var TableHead = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
317
|
+
"th",
|
|
318
|
+
{
|
|
319
|
+
ref,
|
|
320
|
+
className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
|
|
321
|
+
...props
|
|
322
|
+
}
|
|
323
|
+
));
|
|
324
|
+
TableHead.displayName = "TableHead";
|
|
325
|
+
var TableCell = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
326
|
+
"td",
|
|
327
|
+
{
|
|
328
|
+
ref,
|
|
329
|
+
className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
|
|
330
|
+
...props
|
|
331
|
+
}
|
|
332
|
+
));
|
|
333
|
+
TableCell.displayName = "TableCell";
|
|
334
|
+
var TableCaption = (0, import_react2.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
335
|
+
"caption",
|
|
336
|
+
{
|
|
337
|
+
ref,
|
|
338
|
+
className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
|
|
339
|
+
...props
|
|
340
|
+
}
|
|
341
|
+
));
|
|
342
|
+
TableCaption.displayName = "TableCaption";
|
|
237
343
|
// Annotate the CommonJS export names for ESM import in node:
|
|
238
344
|
0 && (module.exports = {
|
|
239
345
|
Button,
|
|
240
346
|
IconRoundedButton,
|
|
241
347
|
SelectionButton,
|
|
348
|
+
Table,
|
|
349
|
+
TableBody,
|
|
350
|
+
TableCaption,
|
|
351
|
+
TableCell,
|
|
352
|
+
TableFooter,
|
|
353
|
+
TableHead,
|
|
354
|
+
TableHeader,
|
|
355
|
+
TableRow,
|
|
242
356
|
Text
|
|
243
357
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -205,9 +205,115 @@ var Text = ({
|
|
|
205
205
|
}
|
|
206
206
|
);
|
|
207
207
|
};
|
|
208
|
+
|
|
209
|
+
// src/components/Table/Table.tsx
|
|
210
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
211
|
+
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
212
|
+
var Table = forwardRef2(
|
|
213
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx5("div", { className: "border border-border-200 rounded-xl relative w-full overflow-hidden", children: /* @__PURE__ */ jsxs3(
|
|
214
|
+
"table",
|
|
215
|
+
{
|
|
216
|
+
ref,
|
|
217
|
+
className: `w-full caption-bottom text-sm ${className ?? ""}`,
|
|
218
|
+
...props,
|
|
219
|
+
children: [
|
|
220
|
+
/* @__PURE__ */ jsx5("caption", { className: "sr-only", children: "My Table" }),
|
|
221
|
+
children
|
|
222
|
+
]
|
|
223
|
+
}
|
|
224
|
+
) })
|
|
225
|
+
);
|
|
226
|
+
Table.displayName = "Table";
|
|
227
|
+
var TableHeader = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
228
|
+
"thead",
|
|
229
|
+
{
|
|
230
|
+
ref,
|
|
231
|
+
className: `[&_tr:first-child]:border-0 ${className}`,
|
|
232
|
+
...props
|
|
233
|
+
}
|
|
234
|
+
));
|
|
235
|
+
TableHeader.displayName = "TableHeader";
|
|
236
|
+
var TableBody = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
237
|
+
"tbody",
|
|
238
|
+
{
|
|
239
|
+
ref,
|
|
240
|
+
className: `[&_tr:last-child]:border-0 border-t border-border-200 ${className}`,
|
|
241
|
+
...props
|
|
242
|
+
}
|
|
243
|
+
));
|
|
244
|
+
TableBody.displayName = "TableBody";
|
|
245
|
+
var TableFooter = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
246
|
+
"tfoot",
|
|
247
|
+
{
|
|
248
|
+
ref,
|
|
249
|
+
className: `border-t bg-background-50 border-border-200 font-medium [&>tr]:last:border-b-0 px-6 py-3.5 ${className}`,
|
|
250
|
+
...props
|
|
251
|
+
}
|
|
252
|
+
));
|
|
253
|
+
TableFooter.displayName = "TableFooter";
|
|
254
|
+
var VARIANT_STATES_ROW = {
|
|
255
|
+
default: "border-b border-border-200",
|
|
256
|
+
selected: "border-b-2 border-indicator-primary",
|
|
257
|
+
invalid: "border-b-2 border-indicator-error",
|
|
258
|
+
disabled: "border-b border-border-100 bg-background-50 opacity-50 cursor-not-allowed"
|
|
259
|
+
};
|
|
260
|
+
var TableRow = forwardRef2(
|
|
261
|
+
({ state = "default", className, ...props }, ref) => {
|
|
262
|
+
return /* @__PURE__ */ jsx5(
|
|
263
|
+
"tr",
|
|
264
|
+
{
|
|
265
|
+
ref,
|
|
266
|
+
className: `
|
|
267
|
+
transition-colors
|
|
268
|
+
${state !== "disabled" ? "hover:bg-muted/50" : ""}
|
|
269
|
+
${VARIANT_STATES_ROW[state]}
|
|
270
|
+
${className}
|
|
271
|
+
`,
|
|
272
|
+
"aria-disabled": state === "disabled",
|
|
273
|
+
...props
|
|
274
|
+
}
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
);
|
|
278
|
+
TableRow.displayName = "TableRow";
|
|
279
|
+
var TableHead = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
280
|
+
"th",
|
|
281
|
+
{
|
|
282
|
+
ref,
|
|
283
|
+
className: `h-10 px-6 py-3.5 bg-bg-secondary bg-muted/50 text-left align-middle font-bold text-text-800 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] ${className}`,
|
|
284
|
+
...props
|
|
285
|
+
}
|
|
286
|
+
));
|
|
287
|
+
TableHead.displayName = "TableHead";
|
|
288
|
+
var TableCell = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
289
|
+
"td",
|
|
290
|
+
{
|
|
291
|
+
ref,
|
|
292
|
+
className: `p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] text-md text-text-800 px-6 py-3.5 ${className}`,
|
|
293
|
+
...props
|
|
294
|
+
}
|
|
295
|
+
));
|
|
296
|
+
TableCell.displayName = "TableCell";
|
|
297
|
+
var TableCaption = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
298
|
+
"caption",
|
|
299
|
+
{
|
|
300
|
+
ref,
|
|
301
|
+
className: `border-t border-border-200 text-sm text-text-800 px-6 py-3.5 ${className}`,
|
|
302
|
+
...props
|
|
303
|
+
}
|
|
304
|
+
));
|
|
305
|
+
TableCaption.displayName = "TableCaption";
|
|
208
306
|
export {
|
|
209
307
|
Button,
|
|
210
308
|
IconRoundedButton,
|
|
211
309
|
SelectionButton,
|
|
310
|
+
Table,
|
|
311
|
+
TableBody,
|
|
312
|
+
TableCaption,
|
|
313
|
+
TableCell,
|
|
314
|
+
TableFooter,
|
|
315
|
+
TableHead,
|
|
316
|
+
TableHeader,
|
|
317
|
+
TableRow,
|
|
212
318
|
Text
|
|
213
319
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "analytica-frontend-lib",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.12",
|
|
4
4
|
"description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
|
|
5
5
|
"main": "dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
"url": "https://github.com/analytica-ensino/analytica-frontend-lib/issues"
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
+
"phosphor-react": "^1.4.1",
|
|
66
67
|
"react": "^19.1.0",
|
|
67
68
|
"react-dom": "^19.1.0"
|
|
68
69
|
},
|