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 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
- export { Button, IconRoundedButton, SelectionButton, Text };
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
- export { Button, IconRoundedButton, SelectionButton, Text };
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.10",
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
  },