pallote-react 0.16.2 → 0.16.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.
Files changed (7) hide show
  1. package/dist/components/DataTable.d.ts +25 -0
  2. package/dist/components/Table.d.ts +1 -2
  3. package/dist/components/TablePagination.d.ts +12 -0
  4. package/dist/index.d.ts +4 -2
  5. package/dist/index.js +278 -227
  6. package/dist/package.json +2 -1
  7. package/package.json +3 -2
package/dist/components/DataTable.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { ReactNode, HTMLAttributes } from 'react';
2
+ export type DataTableFilterType = 'text' | 'select';
3
+ export interface DataTableColumnDef<TData> {
4
+ accessorKey: keyof TData & string;
5
+ header: string;
6
+ enableSorting?: boolean;
7
+ enableFiltering?: boolean;
8
+ filterType?: DataTableFilterType;
9
+ filterOptions?: string[];
10
+ cell?: (value: TData[keyof TData & string], row: TData) => ReactNode;
11
+ }
12
+ export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
13
+ data: TData[];
14
+ columns: DataTableColumnDef<TData>[];
15
+ enableSearch?: boolean;
16
+ searchPlaceholder?: string;
17
+ pageSize?: number;
18
+ pageSizeOptions?: number[];
19
+ striped?: boolean;
20
+ hasHover?: boolean;
21
+ dense?: boolean;
22
+ border?: boolean;
23
+ className?: string;
24
+ }
25
+ export declare function DataTable<TData extends Record<string, unknown>>({ data, columns: columnDefs, enableSearch, searchPlaceholder, pageSize: initialPageSize, pageSizeOptions, striped, hasHover, dense, border, className, ...props }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
package/dist/components/Table.d.ts CHANGED
@@ -5,8 +5,7 @@ export interface TableProps extends HTMLAttributes<HTMLDivElement> {
5
5
  hasHover?: boolean;
6
6
  dense?: boolean;
7
7
  border?: boolean;
8
- withFooter?: boolean;
9
8
  className?: string;
10
9
  children: ReactNode;
11
10
  }
12
- export declare const Table: ({ striped, hasHover, dense, border, withFooter, className, children, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
11
+ export declare const Table: ({ striped, hasHover, dense, border, className, children, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/TablePagination.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { HTMLAttributes } from 'react';
2
+ export interface TablePaginationProps extends HTMLAttributes<HTMLDivElement> {
3
+ pageIndex: number;
4
+ pageCount: number;
5
+ pageSize: number;
6
+ pageSizeOptions?: number[];
7
+ totalRows: number;
8
+ onPageChange: (page: number) => void;
9
+ onPageSizeChange: (size: number) => void;
10
+ className?: string;
11
+ }
12
+ export declare const TablePagination: ({ pageIndex, pageCount, pageSize, pageSizeOptions, totalRows, onPageChange, onPageSizeChange, className, ...props }: TablePaginationProps) => import("react/jsx-runtime").JSX.Element;
package/dist/index.d.ts CHANGED
@@ -16,6 +16,7 @@ export { CardMedia } from './components/CardMedia';
16
16
  export { Checkbox } from './components/Checkbox';
17
17
  export { Checkboxes } from './components/Checkboxes';
18
18
  export { Chip } from './components/Chip';
19
+ export { DataTable } from './components/DataTable';
19
20
  export { Divider } from './components/Divider';
20
21
  export { Input } from './components/Input';
21
22
  export { InputLabel } from './components/InputLabel';
@@ -40,7 +41,7 @@ export { Tab } from './components/Tab';
40
41
  export { Table } from './components/Table';
41
42
  export { TableBody } from './components/TableBody';
42
43
  export { TableCell } from './components/TableCell';
43
- export { TableFooter } from './components/TableFooter';
44
+ export { TablePagination } from './components/TablePagination';
44
45
  export { TableHead } from './components/TableHead';
45
46
  export { TableRow } from './components/TableRow';
46
47
  export { Tabs } from './components/Tabs';
@@ -67,6 +68,7 @@ export type { CardMediaProps } from './components/CardMedia';
67
68
  export type { CheckboxProps } from './components/Checkbox';
68
69
  export type { CheckboxesProps } from './components/Checkboxes';
69
70
  export type { ChipProps } from './components/Chip';
71
+ export type { DataTableProps, DataTableColumnDef, DataTableFilterType } from './components/DataTable';
70
72
  export type { DividerProps } from './components/Divider';
71
73
  export type { InputProps } from './components/Input';
72
74
  export type { InputLabelProps } from './components/InputLabel';
@@ -91,7 +93,7 @@ export type { TabProps } from './components/Tab';
91
93
  export type { TableProps } from './components/Table';
92
94
  export type { TableBodyProps } from './components/TableBody';
93
95
  export type { TableCellProps } from './components/TableCell';
94
- export type { TableFooterProps } from './components/TableFooter';
96
+ export type { TablePaginationProps } from './components/TablePagination';
95
97
  export type { TableHeadProps } from './components/TableHead';
96
98
  export type { TableRowProps } from './components/TableRow';
97
99
  export type { TabsProps } from './components/Tabs';
package/dist/index.js CHANGED
@@ -1,8 +1,10 @@
1
1
  import * as e$9 from 'react';
2
- import e__default, { useState, useEffect, createContext, Children, isValidElement, cloneElement, useContext, useRef, forwardRef, useId } from 'react';
2
+ import e__default, { useState, useEffect, createContext, Children, isValidElement, cloneElement, useContext, useRef, forwardRef, useId, useMemo } from 'react';
3
3
  import classnames from 'classnames';
4
4
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
5
5
  import { createPortal } from 'react-dom';
6
+ import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
7
+ import { MagnifyingGlassIcon, CaretDownIcon, CaretUpIcon } from '@phosphor-icons/react';
6
8
  import SyntaxHighlighter from 'react-syntax-highlighter';
7
9
 
8
10
  const Color = ({ fill, stroke, customFill, customStroke, className, children, ...props }) => {
@@ -462,18 +464,207 @@ const Chip = ({ color = 'default', dense, avatar, disabled, onClose, className,
462
464
  ]), role: "listitem", "aria-disabled": disabled ? true : undefined, ...props, children: [avatar ? (jsx("img", { className: classnames('chip_avatar'), src: avatar, alt: "", "aria-hidden": "true" })) : null, children, onClose ? (jsx("button", { type: "button", className: classnames('chip_close'), onClick: onClose, disabled: disabled, "aria-label": "Remove", children: jsx(e$7, { size: dense ? 16 : 20, "aria-hidden": "true" }) })) : null] }) }));
463
465
  };
464
466
 
465
- const Divider = ({ direction = 'landscape', padding = 'md', className, ...props }) => {
466
- return (jsx("div", { className: classnames([
467
- 'divider',
467
+ const DenseContext = createContext(false);
468
+ const Table = ({ striped, hasHover, dense, border, className, children, ...props }) => {
469
+ return (jsx(DenseContext.Provider, { value: dense ?? false, children: jsx("div", { className: classnames([
470
+ 'table',
471
+ {
472
+ 'table-striped': striped,
473
+ 'table-hasHover': hasHover,
474
+ 'table-dense': dense,
475
+ 'table-border': border
476
+ },
477
+ className
478
+ ]), children: jsx("table", { cellPadding: 0, cellSpacing: 0, className: classnames('table_content'), ...props, children: children }) }) }));
479
+ };
480
+
481
+ const TableCellComponentContext = createContext('td');
482
+ const TableHead = ({ className, children, ...props }) => {
483
+ return (jsx(TableCellComponentContext.Provider, { value: 'th', children: jsx("thead", { className: classnames([
484
+ 'table_head',
485
+ className
486
+ ]), ...props, children: children }) }));
487
+ };
488
+
489
+ const TableBody = ({ className, children, ...props }) => {
490
+ return (jsx("tbody", { className: classnames([
491
+ 'table_body',
492
+ className
493
+ ]), ...props, children: children }));
494
+ };
495
+
496
+ const TableRow = ({ className, children, ...props }) => {
497
+ return (jsx("tr", { className: classnames([
498
+ 'table_row',
499
+ className
500
+ ]), ...props, children: children }));
501
+ };
502
+
503
+ const TableCell = ({ kind = 'default', className, children, ...props }) => {
504
+ const Component = useContext(TableCellComponentContext);
505
+ return (jsx(Component, { className: classnames([
506
+ 'table_cell',
468
507
  {
469
- [`divider-${direction}`]: direction,
470
- [`divider-${padding}`]: padding
508
+ [`table_cell-${kind}`]: kind,
471
509
  },
472
510
  className
473
- ]), ...props }));
511
+ ]), ...props, children: children }));
474
512
  };
475
513
 
476
- const e$6 = /* @__PURE__ */ new Map([
514
+ const a$5 = /* @__PURE__ */ new Map([
515
+ [
516
+ "bold",
517
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z" }))
518
+ ],
519
+ [
520
+ "duotone",
521
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M160,48V208L80,128Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M163.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,168,208V48A8,8,0,0,0,163.06,40.61ZM152,188.69,91.31,128,152,67.31Z" }))
522
+ ],
523
+ [
524
+ "fill",
525
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z" }))
526
+ ],
527
+ [
528
+ "light",
529
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M164.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L88.49,128Z" }))
530
+ ],
531
+ [
532
+ "regular",
533
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" }))
534
+ ],
535
+ [
536
+ "thin",
537
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M162.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L85.66,128Z" }))
538
+ ]
539
+ ]);
540
+
541
+ const t$1 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: a$5 }));
542
+ t$1.displayName = "CaretLeftIcon";
543
+
544
+ const t = /* @__PURE__ */ new Map([
545
+ [
546
+ "bold",
547
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z" }))
548
+ ],
549
+ [
550
+ "duotone",
551
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M176,128,96,208V48Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34ZM104,188.69V67.31L164.69,128Z" }))
552
+ ],
553
+ [
554
+ "fill",
555
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z" }))
556
+ ],
557
+ [
558
+ "light",
559
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z" }))
560
+ ],
561
+ [
562
+ "regular",
563
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" }))
564
+ ],
565
+ [
566
+ "thin",
567
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M178.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L170.34,128,93.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,178.83,130.83Z" }))
568
+ ]
569
+ ]);
570
+
571
+ const e$6 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: t }));
572
+ e$6.displayName = "CaretRightIcon";
573
+
574
+ const e$5 = /* @__PURE__ */ new Map([
575
+ [
576
+ "bold",
577
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L137,128ZM57,128l71.52-71.51a12,12,0,0,0-17-17l-80,80a12,12,0,0,0,0,17l80,80a12,12,0,0,0,17-17Z" }))
578
+ ],
579
+ [
580
+ "duotone",
581
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M200,48V208l-80-80Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M203.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,208,208V48A8,8,0,0,0,203.06,40.61ZM192,188.69,131.31,128,192,67.31Zm-66.34,13.65a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L51.31,128Z" }))
582
+ ],
583
+ [
584
+ "fill",
585
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,48V208a8,8,0,0,1-13.66,5.66L128,147.31V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,128,48v60.69l66.34-66.35A8,8,0,0,1,208,48Z" }))
586
+ ],
587
+ [
588
+ "light",
589
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M204.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L128.49,128ZM48.49,128l75.75-75.76a6,6,0,0,0-8.48-8.48l-80,80a6,6,0,0,0,0,8.48l80,80a6,6,0,1,0,8.48-8.48Z" }))
590
+ ],
591
+ [
592
+ "regular",
593
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z" }))
594
+ ],
595
+ [
596
+ "thin",
597
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M202.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L125.66,128ZM45.66,128l77.17-77.17a4,4,0,0,0-5.66-5.66l-80,80a4,4,0,0,0,0,5.66l80,80a4,4,0,1,0,5.66-5.66Z" }))
598
+ ]
599
+ ]);
600
+
601
+ const o$3 = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: e$5 }));
602
+ o$3.displayName = "CaretDoubleLeftIcon";
603
+
604
+ const a$4 = /* @__PURE__ */ new Map([
605
+ [
606
+ "bold",
607
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M144.49,136.49l-80,80a12,12,0,0,1-17-17L119,128,47.51,56.49a12,12,0,0,1,17-17l80,80A12,12,0,0,1,144.49,136.49Zm80-17-80-80a12,12,0,1,0-17,17L199,128l-71.52,71.51a12,12,0,0,0,17,17l80-80A12,12,0,0,0,224.49,119.51Z" }))
608
+ ],
609
+ [
610
+ "duotone",
611
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M136,128,56,208V48Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M141.66,122.34l-80-80A8,8,0,0,0,48,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,141.66,122.34ZM64,188.69V67.31L124.69,128Zm157.66-55-80,80a8,8,0,0,1-11.32-11.32L204.69,128,130.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,221.66,133.66Z" }))
612
+ ],
613
+ [
614
+ "fill",
615
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M221.66,133.66l-80,80A8,8,0,0,1,128,208V147.31L61.66,213.66A8,8,0,0,1,48,208V48a8,8,0,0,1,13.66-5.66L128,108.69V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,221.66,133.66Z" }))
616
+ ],
617
+ [
618
+ "light",
619
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M140.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L127.51,128,51.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,140.24,132.24Zm80-8.48-80-80a6,6,0,0,0-8.48,8.48L207.51,128l-75.75,75.76a6,6,0,1,0,8.48,8.48l80-80A6,6,0,0,0,220.24,123.76Z" }))
620
+ ],
621
+ [
622
+ "regular",
623
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z" }))
624
+ ],
625
+ [
626
+ "thin",
627
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M138.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L130.34,128,53.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,138.83,130.83Zm80-5.66-80-80a4,4,0,0,0-5.66,5.66L210.34,128l-77.17,77.17a4,4,0,0,0,5.66,5.66l80-80A4,4,0,0,0,218.83,125.17Z" }))
628
+ ]
629
+ ]);
630
+
631
+ const o$2 = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: a$4 }));
632
+ o$2.displayName = "CaretDoubleRightIcon";
633
+
634
+ const Select = ({ onChange, id, label = 'Select', isFocused, error, disabled, optional, dense, hint, hideLabel, children, className, ...props }) => {
635
+ const inputRef = useRef(null);
636
+ useEffect(() => {
637
+ if (isFocused && inputRef.current) {
638
+ inputRef.current.focus();
639
+ }
640
+ }, [isFocused]);
641
+ return (jsxs("div", { className: classnames([
642
+ 'input',
643
+ 'select',
644
+ {
645
+ 'input-focused': isFocused,
646
+ 'js-error': error,
647
+ 'input-disabled': disabled,
648
+ 'input-optional': optional,
649
+ 'input-dense': dense,
650
+ },
651
+ className
652
+ ]), children: [jsx(InputLabel, { htmlFor: id, label: label, hint: hint, hideLabel: hideLabel }), jsx("select", { ref: inputRef, className: 'input_control', name: id, id: id, disabled: disabled, required: !(disabled || optional), "aria-invalid": error ? true : undefined, onChange: onChange, ...(hint || error
653
+ ? {
654
+ 'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
655
+ .filter(Boolean)
656
+ .join(' '),
657
+ }
658
+ : null), ...props, children: children })] }));
659
+ };
660
+
661
+ const TablePagination = ({ pageIndex, pageCount, pageSize, pageSizeOptions = [10, 25, 50, 100], totalRows, onPageChange, onPageSizeChange, className, ...props }) => {
662
+ const start = pageIndex * pageSize + 1;
663
+ const end = Math.min((pageIndex + 1) * pageSize, totalRows);
664
+ return (jsxs("div", { className: classnames('table_pagination', className), role: "navigation", "aria-label": "Table pagination", ...props, children: [jsxs("div", { className: "table_paginationInfo", children: [jsx(Select, { dense: true, id: "rows-per-page", label: "Rows per page", hideLabel: true, className: "table_rowSelect", value: String(pageSize), onChange: (e) => onPageSizeChange(Number(e.target.value)), children: pageSizeOptions.map(size => (jsx("option", { value: size, children: size }, size))) }), jsxs(Text, { variant: "caption", className: "table_paginationCount", children: [start, "\u2013", end, " of ", totalRows] })] }), jsxs(Buttons, { className: "table_paginationPages", children: [jsx(Button, { kind: "icon", variant: "transparent", size: "sm", onClick: () => onPageChange(0), disabled: pageIndex === 0, "aria-label": "First page", children: jsx(o$3, {}) }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", onClick: () => onPageChange(pageIndex - 1), disabled: pageIndex === 0, "aria-label": "Previous page", children: jsx(t$1, {}) }), jsxs(Text, { variant: "caption", className: "table_paginationPage", children: [pageIndex + 1, " / ", pageCount] }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", onClick: () => onPageChange(pageIndex + 1), disabled: pageIndex >= pageCount - 1, "aria-label": "Next page", children: jsx(e$6, {}) }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", onClick: () => onPageChange(pageCount - 1), disabled: pageIndex >= pageCount - 1, "aria-label": "Last page", children: jsx(o$2, {}) })] })] }));
665
+ };
666
+
667
+ const e$4 = /* @__PURE__ */ new Map([
477
668
  [
478
669
  "bold",
479
670
  /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,28H188V24a12,12,0,0,0-24,0v4H92V24a12,12,0,0,0-24,0v4H48A20,20,0,0,0,28,48V208a20,20,0,0,0,20,20H208a20,20,0,0,0,20-20V48A20,20,0,0,0,208,28ZM68,52a12,12,0,0,0,24,0h72a12,12,0,0,0,24,0h16V76H52V52ZM52,204V100H204V204Z" }))
@@ -506,10 +697,10 @@ const e$6 = /* @__PURE__ */ new Map([
506
697
  ]
507
698
  ]);
508
699
 
509
- const e$5 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: e$6 }));
510
- e$5.displayName = "CalendarBlankIcon";
700
+ const e$3 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: e$4 }));
701
+ e$3.displayName = "CalendarBlankIcon";
511
702
 
512
- const a$5 = /* @__PURE__ */ new Map([
703
+ const a$3 = /* @__PURE__ */ new Map([
513
704
  [
514
705
  "bold",
515
706
  /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M184.49,167.51a12,12,0,0,1,0,17l-48,48a12,12,0,0,1-17,0l-48-48a12,12,0,0,1,17-17L128,207l39.51-39.52A12,12,0,0,1,184.49,167.51Zm-96-79L128,49l39.51,39.52a12,12,0,0,0,17-17l-48-48a12,12,0,0,0-17,0l-48,48a12,12,0,0,0,17,17Z" }))
@@ -536,10 +727,10 @@ const a$5 = /* @__PURE__ */ new Map([
536
727
  ]
537
728
  ]);
538
729
 
539
- const e$4 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$5 }));
540
- e$4.displayName = "CaretUpDownIcon";
730
+ const e$2 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$3 }));
731
+ e$2.displayName = "CaretUpDownIcon";
541
732
 
542
- const a$4 = /* @__PURE__ */ new Map([
733
+ const a$2 = /* @__PURE__ */ new Map([
543
734
  [
544
735
  "bold",
545
736
  /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M128,20A108,108,0,1,0,236,128,108.12,108.12,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09,84.09,0,0,1,128,212Zm68-84a12,12,0,0,1-12,12H128a12,12,0,0,1-12-12V72a12,12,0,0,1,24,0v44h44A12,12,0,0,1,196,128Z" }))
@@ -566,7 +757,7 @@ const a$4 = /* @__PURE__ */ new Map([
566
757
  ]
567
758
  ]);
568
759
 
569
- const c = e$9.forwardRef((e, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...e, weights: a$4 }));
760
+ const c = e$9.forwardRef((e, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...e, weights: a$2 }));
570
761
  c.displayName = "ClockIcon";
571
762
 
572
763
  const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon, isFocused, error, disabled, optional, dense, hint, hideLabel, className, ...props }) => {
@@ -577,9 +768,9 @@ const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon
577
768
  }
578
769
  }, [isFocused]);
579
770
  const customIcon = icon ||
580
- (type === 'date' && jsx(e$5, {})) ||
771
+ (type === 'date' && jsx(e$3, {})) ||
581
772
  (type === 'time' && jsx(c, {})) ||
582
- (type === 'number' && jsx(e$4, {}));
773
+ (type === 'number' && jsx(e$2, {}));
583
774
  return (jsxs("div", { className: classnames([
584
775
  'input',
585
776
  {
@@ -599,7 +790,68 @@ const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon
599
790
  : null), ...props })] }));
600
791
  };
601
792
 
602
- const e$3 = /* @__PURE__ */ new Map([
793
+ function ColumnFilter({ header }) {
794
+ const columnDef = header.column.columnDef.meta;
795
+ const filterType = columnDef?.filterType ?? 'text';
796
+ const filterOptions = columnDef?.filterOptions ?? [];
797
+ const filterValue = header.column.getFilterValue() ?? '';
798
+ if (filterType === 'select') {
799
+ return (jsxs(Select, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined), children: [jsx("option", { value: "", children: "All" }), filterOptions.map(opt => (jsx("option", { value: opt, children: opt }, opt)))] }));
800
+ }
801
+ return (jsx(Input, { dense: true, id: `filter-${header.id}`, label: `Filter ${header.column.columnDef.header}`, hideLabel: true, placeholder: "Filter...", className: "datatable_filter", value: filterValue, onChange: (e) => header.column.setFilterValue(e.target.value || undefined) }));
802
+ }
803
+ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder = 'Search...', pageSize: initialPageSize = 10, pageSizeOptions = [10, 25, 50, 100], striped, hasHover = true, dense, border, className, ...props }) {
804
+ const [sorting, setSorting] = useState([]);
805
+ const [columnFilters, setColumnFilters] = useState([]);
806
+ const [globalFilter, setGlobalFilter] = useState('');
807
+ const tanstackColumns = useMemo(() => columnDefs.map(col => ({
808
+ accessorKey: col.accessorKey,
809
+ header: col.header,
810
+ enableSorting: col.enableSorting ?? false,
811
+ enableColumnFilter: col.enableFiltering === true,
812
+ cell: col.cell
813
+ ? (info) => col.cell(info.getValue(), info.row.original)
814
+ : (info) => String(info.getValue() ?? ''),
815
+ meta: {
816
+ filterType: col.filterType ?? 'text',
817
+ filterOptions: col.filterOptions,
818
+ },
819
+ })), [columnDefs]);
820
+ const table = useReactTable({
821
+ data,
822
+ columns: tanstackColumns,
823
+ state: { sorting, columnFilters, globalFilter },
824
+ onSortingChange: setSorting,
825
+ onColumnFiltersChange: setColumnFilters,
826
+ onGlobalFilterChange: setGlobalFilter,
827
+ getCoreRowModel: getCoreRowModel(),
828
+ getSortedRowModel: getSortedRowModel(),
829
+ getFilteredRowModel: getFilteredRowModel(),
830
+ getPaginationRowModel: getPaginationRowModel(),
831
+ initialState: {
832
+ pagination: { pageSize: initialPageSize },
833
+ },
834
+ });
835
+ const hasFilters = columnDefs.some(col => col.enableFiltering === true);
836
+ return (jsxs("div", { className: classnames('datatable', className), ...props, children: [enableSearch && (jsx("div", { className: "datatable_search", children: jsx(Input, { id: "datatable-search", label: "Search", hideLabel: true, placeholder: searchPlaceholder, icon: jsx(MagnifyingGlassIcon, {}), value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value) }) })), jsxs(Table, { striped: striped, hasHover: hasHover, dense: dense, border: border, children: [jsxs(TableHead, { children: [table.getHeaderGroups().map(headerGroup => (jsx(TableRow, { children: headerGroup.headers.map(header => (jsx(TableCell, { className: classnames({
837
+ 'datatable_sortable': header.column.getCanSort()
838
+ }), onClick: header.column.getToggleSortingHandler(), "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending'
839
+ : header.column.getIsSorted() === 'desc' ? 'descending'
840
+ : undefined, children: jsxs("span", { className: "datatable_headerContent", children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (jsx("span", { className: "datatable_sortIcon", "aria-hidden": "true", children: header.column.getIsSorted() === 'asc' ? (jsx(CaretDownIcon, { size: 12 })) : header.column.getIsSorted() === 'desc' ? (jsx(CaretUpIcon, { size: 12 })) : (jsx(CaretDownIcon, { size: 12, className: "datatable_sortIcon-inactive" })) }))] }) }, header.id))) }, headerGroup.id))), hasFilters && (jsx(TableRow, { className: "datatable_filterRow", children: table.getHeaderGroups()[0].headers.map(header => (jsx(TableCell, { children: header.column.getCanFilter() ? (jsx(ColumnFilter, { header: header })) : null }, `filter-${header.id}`))) }))] }), jsx(TableBody, { children: table.getRowModel().rows.length === 0 ? (jsx(TableRow, { children: jsx(TableCell, { colSpan: columnDefs.length, className: "datatable_empty", children: "No results found" }) })) : (table.getRowModel().rows.map(row => (jsx(TableRow, { children: row.getVisibleCells().map(cell => (jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] }), jsx(TablePagination, { pageIndex: table.getState().pagination.pageIndex, pageCount: table.getPageCount(), pageSize: table.getState().pagination.pageSize, pageSizeOptions: pageSizeOptions, totalRows: table.getFilteredRowModel().rows.length, onPageChange: (page) => table.setPageIndex(page), onPageSizeChange: (size) => table.setPageSize(size) })] }));
841
+ }
842
+
843
+ const Divider = ({ direction = 'landscape', padding = 'md', className, ...props }) => {
844
+ return (jsx("div", { className: classnames([
845
+ 'divider',
846
+ {
847
+ [`divider-${direction}`]: direction,
848
+ [`divider-${padding}`]: padding
849
+ },
850
+ className
851
+ ]), ...props }));
852
+ };
853
+
854
+ const e$1 = /* @__PURE__ */ new Map([
603
855
  [
604
856
  "bold",
605
857
  /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M228,104a12,12,0,0,1-24,0V69l-59.51,59.51a12,12,0,0,1-17-17L187,52H152a12,12,0,0,1,0-24h64a12,12,0,0,1,12,12Zm-44,24a12,12,0,0,0-12,12v64H52V84h64a12,12,0,0,0,0-24H48A20,20,0,0,0,28,80V208a20,20,0,0,0,20,20H176a20,20,0,0,0,20-20V140A12,12,0,0,0,184,128Z" }))
@@ -632,8 +884,8 @@ const e$3 = /* @__PURE__ */ new Map([
632
884
  ]
633
885
  ]);
634
886
 
635
- const o$3 = e$9.forwardRef((e, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...e, weights: e$3 }));
636
- o$3.displayName = "ArrowSquareOutIcon";
887
+ const o$1 = e$9.forwardRef((e, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...e, weights: e$1 }));
888
+ o$1.displayName = "ArrowSquareOutIcon";
637
889
 
638
890
  const Link = ({ component = 'a', icon, color, isExternal, href, className, children, ...props }) => {
639
891
  const Component = component || 'a';
@@ -641,7 +893,7 @@ const Link = ({ component = 'a', icon, color, isExternal, href, className, child
641
893
  'link',
642
894
  { [`text-${color}`]: color },
643
895
  className
644
- ]), href: isExternal ? href : undefined, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, ...props, children: [children, icon && !isExternal && jsx("span", { className: 'link_icon', "aria-hidden": "true", children: icon }), isExternal && (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: " (opens in new tab)" }), jsx("span", { className: 'link_icon', "aria-hidden": "true", children: jsx(o$3, {}) })] }))] }));
896
+ ]), href: isExternal ? href : undefined, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, ...props, children: [children, icon && !isExternal && jsx("span", { className: 'link_icon', "aria-hidden": "true", children: icon }), isExternal && (jsxs(Fragment, { children: [jsx("span", { className: "sr-only", children: " (opens in new tab)" }), jsx("span", { className: 'link_icon', "aria-hidden": "true", children: jsx(o$1, {}) })] }))] }));
645
897
  };
646
898
 
647
899
  const List = ({ dense, className, children, ...props }) => {
@@ -789,33 +1041,6 @@ const SectionContent = ({ align = 'left', className, children, ...props }) => {
789
1041
  ]), ...props, children: children }));
790
1042
  };
791
1043
 
792
- const Select = ({ onChange, id, label = 'Select', isFocused, error, disabled, optional, dense, hint, hideLabel, children, className, ...props }) => {
793
- const inputRef = useRef(null);
794
- useEffect(() => {
795
- if (isFocused && inputRef.current) {
796
- inputRef.current.focus();
797
- }
798
- }, [isFocused]);
799
- return (jsxs("div", { className: classnames([
800
- 'input',
801
- 'select',
802
- {
803
- 'input-focused': isFocused,
804
- 'js-error': error,
805
- 'input-disabled': disabled,
806
- 'input-optional': optional,
807
- 'input-dense': dense,
808
- },
809
- className
810
- ]), children: [jsx(InputLabel, { htmlFor: id, label: label, hint: hint, hideLabel: hideLabel }), jsx("select", { ref: inputRef, className: 'input_control', name: id, id: id, disabled: disabled, required: !(disabled || optional), "aria-invalid": error ? true : undefined, onChange: onChange, ...(hint || error
811
- ? {
812
- 'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
813
- .filter(Boolean)
814
- .join(' '),
815
- }
816
- : null), ...props, children: children })] }));
817
- };
818
-
819
1044
  var nnfxDark = {
820
1045
  "hljs": {
821
1046
  "display": "block",
@@ -956,7 +1181,7 @@ const Status = ({ color = 'inactive', dense, className, children = 'Status', ...
956
1181
  ]), ...props, children: children }));
957
1182
  };
958
1183
 
959
- const a$3 = /* @__PURE__ */ new Map([
1184
+ const a$1 = /* @__PURE__ */ new Map([
960
1185
  [
961
1186
  "bold",
962
1187
  /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }))
@@ -989,8 +1214,8 @@ const a$3 = /* @__PURE__ */ new Map([
989
1214
  ]
990
1215
  ]);
991
1216
 
992
- const o$2 = e$9.forwardRef((c, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...c, weights: a$3 }));
993
- o$2.displayName = "CheckIcon";
1217
+ const o = e$9.forwardRef((c, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...c, weights: a$1 }));
1218
+ o.displayName = "CheckIcon";
994
1219
 
995
1220
  const StepperContext = createContext(null);
996
1221
  const Stepper = ({ showLabels, className, children, ...props }) => {
@@ -1031,7 +1256,7 @@ const Stepper = ({ showLabels, className, children, ...props }) => {
1031
1256
  }), "aria-current": isActive ? 'step' : undefined, children: [jsx("span", { className: classnames('stepper_icon', {
1032
1257
  'stepper_icon-active': isActive,
1033
1258
  'stepper_icon-completed': isCompleted
1034
- }), "aria-hidden": "true", children: isCompleted ? jsx(o$2, { size: 16 }) : index + 1 }), showLabels ? (jsx(Text, { variant: "caption", weight: "bold", className: classnames('stepper_label'), children: label })) : (jsx("span", { className: "sr-only", children: label }))] }, index));
1259
+ }), "aria-hidden": "true", children: isCompleted ? jsx(o, { size: 16 }) : index + 1 }), showLabels ? (jsx(Text, { variant: "caption", weight: "bold", className: classnames('stepper_label'), children: label })) : (jsx("span", { className: "sr-only", children: label }))] }, index));
1035
1260
  }) }) }), jsx("div", { className: classnames('stepper_content'), children: Children.map(children, (child, index) => {
1036
1261
  if (index === activeStep && isValidElement(child)) {
1037
1262
  return child;
@@ -1135,180 +1360,6 @@ const Tab = ({ index, label, className, }) => {
1135
1360
  ]), role: "tab", "aria-selected": isSelected, "aria-controls": `tabpanel-${index}`, id: `tab-${index}`, tabIndex: isSelected ? 0 : -1, onClick: () => setActiveIndex(index), onKeyDown: handleKeyDown, children: label }));
1136
1361
  };
1137
1362
 
1138
- const a$2 = /* @__PURE__ */ new Map([
1139
- [
1140
- "bold",
1141
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L97,128Z" }))
1142
- ],
1143
- [
1144
- "duotone",
1145
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M160,48V208L80,128Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M163.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,168,208V48A8,8,0,0,0,163.06,40.61ZM152,188.69,91.31,128,152,67.31Z" }))
1146
- ],
1147
- [
1148
- "fill",
1149
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z" }))
1150
- ],
1151
- [
1152
- "light",
1153
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M164.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L88.49,128Z" }))
1154
- ],
1155
- [
1156
- "regular",
1157
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z" }))
1158
- ],
1159
- [
1160
- "thin",
1161
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M162.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L85.66,128Z" }))
1162
- ]
1163
- ]);
1164
-
1165
- const t$1 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: a$2 }));
1166
- t$1.displayName = "CaretLeftIcon";
1167
-
1168
- const t = /* @__PURE__ */ new Map([
1169
- [
1170
- "bold",
1171
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z" }))
1172
- ],
1173
- [
1174
- "duotone",
1175
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M176,128,96,208V48Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,122.34l-80-80A8,8,0,0,0,88,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,181.66,122.34ZM104,188.69V67.31L164.69,128Z" }))
1176
- ],
1177
- [
1178
- "fill",
1179
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z" }))
1180
- ],
1181
- [
1182
- "light",
1183
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M180.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L167.51,128,91.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,180.24,132.24Z" }))
1184
- ],
1185
- [
1186
- "regular",
1187
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z" }))
1188
- ],
1189
- [
1190
- "thin",
1191
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M178.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L170.34,128,93.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,178.83,130.83Z" }))
1192
- ]
1193
- ]);
1194
-
1195
- const e$2 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: t }));
1196
- e$2.displayName = "CaretRightIcon";
1197
-
1198
- const e$1 = /* @__PURE__ */ new Map([
1199
- [
1200
- "bold",
1201
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208.49,199.51a12,12,0,0,1-17,17l-80-80a12,12,0,0,1,0-17l80-80a12,12,0,0,1,17,17L137,128ZM57,128l71.52-71.51a12,12,0,0,0-17-17l-80,80a12,12,0,0,0,0,17l80,80a12,12,0,0,0,17-17Z" }))
1202
- ],
1203
- [
1204
- "duotone",
1205
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M200,48V208l-80-80Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M203.06,40.61a8,8,0,0,0-8.72,1.73l-80,80a8,8,0,0,0,0,11.32l80,80A8,8,0,0,0,208,208V48A8,8,0,0,0,203.06,40.61ZM192,188.69,131.31,128,192,67.31Zm-66.34,13.65a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L51.31,128Z" }))
1206
- ],
1207
- [
1208
- "fill",
1209
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,48V208a8,8,0,0,1-13.66,5.66L128,147.31V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,128,48v60.69l66.34-66.35A8,8,0,0,1,208,48Z" }))
1210
- ],
1211
- [
1212
- "light",
1213
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M204.24,203.76a6,6,0,1,1-8.48,8.48l-80-80a6,6,0,0,1,0-8.48l80-80a6,6,0,0,1,8.48,8.48L128.49,128ZM48.49,128l75.75-75.76a6,6,0,0,0-8.48-8.48l-80,80a6,6,0,0,0,0,8.48l80,80a6,6,0,1,0,8.48-8.48Z" }))
1214
- ],
1215
- [
1216
- "regular",
1217
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M205.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L131.31,128ZM51.31,128l74.35-74.34a8,8,0,0,0-11.32-11.32l-80,80a8,8,0,0,0,0,11.32l80,80a8,8,0,0,0,11.32-11.32Z" }))
1218
- ],
1219
- [
1220
- "thin",
1221
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M202.83,205.17a4,4,0,0,1-5.66,5.66l-80-80a4,4,0,0,1,0-5.66l80-80a4,4,0,1,1,5.66,5.66L125.66,128ZM45.66,128l77.17-77.17a4,4,0,0,0-5.66-5.66l-80,80a4,4,0,0,0,0,5.66l80,80a4,4,0,1,0,5.66-5.66Z" }))
1222
- ]
1223
- ]);
1224
-
1225
- const o$1 = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: e$1 }));
1226
- o$1.displayName = "CaretDoubleLeftIcon";
1227
-
1228
- const a$1 = /* @__PURE__ */ new Map([
1229
- [
1230
- "bold",
1231
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M144.49,136.49l-80,80a12,12,0,0,1-17-17L119,128,47.51,56.49a12,12,0,0,1,17-17l80,80A12,12,0,0,1,144.49,136.49Zm80-17-80-80a12,12,0,1,0-17,17L199,128l-71.52,71.51a12,12,0,0,0,17,17l80-80A12,12,0,0,0,224.49,119.51Z" }))
1232
- ],
1233
- [
1234
- "duotone",
1235
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M136,128,56,208V48Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M141.66,122.34l-80-80A8,8,0,0,0,48,48V208a8,8,0,0,0,13.66,5.66l80-80A8,8,0,0,0,141.66,122.34ZM64,188.69V67.31L124.69,128Zm157.66-55-80,80a8,8,0,0,1-11.32-11.32L204.69,128,130.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,221.66,133.66Z" }))
1236
- ],
1237
- [
1238
- "fill",
1239
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M221.66,133.66l-80,80A8,8,0,0,1,128,208V147.31L61.66,213.66A8,8,0,0,1,48,208V48a8,8,0,0,1,13.66-5.66L128,108.69V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,221.66,133.66Z" }))
1240
- ],
1241
- [
1242
- "light",
1243
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M140.24,132.24l-80,80a6,6,0,0,1-8.48-8.48L127.51,128,51.76,52.24a6,6,0,0,1,8.48-8.48l80,80A6,6,0,0,1,140.24,132.24Zm80-8.48-80-80a6,6,0,0,0-8.48,8.48L207.51,128l-75.75,75.76a6,6,0,1,0,8.48,8.48l80-80A6,6,0,0,0,220.24,123.76Z" }))
1244
- ],
1245
- [
1246
- "regular",
1247
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M141.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L124.69,128,50.34,53.66A8,8,0,0,1,61.66,42.34l80,80A8,8,0,0,1,141.66,133.66Zm80-11.32-80-80a8,8,0,0,0-11.32,11.32L204.69,128l-74.35,74.34a8,8,0,0,0,11.32,11.32l80-80A8,8,0,0,0,221.66,122.34Z" }))
1248
- ],
1249
- [
1250
- "thin",
1251
- /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M138.83,130.83l-80,80a4,4,0,0,1-5.66-5.66L130.34,128,53.17,50.83a4,4,0,0,1,5.66-5.66l80,80A4,4,0,0,1,138.83,130.83Zm80-5.66-80-80a4,4,0,0,0-5.66,5.66L210.34,128l-77.17,77.17a4,4,0,0,0,5.66,5.66l80-80A4,4,0,0,0,218.83,125.17Z" }))
1252
- ]
1253
- ]);
1254
-
1255
- const o = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: a$1 }));
1256
- o.displayName = "CaretDoubleRightIcon";
1257
-
1258
- const TableFooter = ({ className, ...props }) => {
1259
- return (jsxs("div", { className: classnames([
1260
- 'table_footer',
1261
- className
1262
- ]), ...props, children: [jsxs(Select, { dense: true, id: "rows", className: "table_rowSelect", children: [jsx("option", { value: "1", children: "10" }), jsx("option", { value: "2", children: "25" }), jsx("option", { value: "2", children: "50" }), jsx("option", { value: "2", children: "100" }), jsx("option", { value: "2", children: "All" })] }), jsxs(Buttons, { className: "table_pagination", children: [jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(o$1, {}) }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(t$1, {}) }), jsx(Button, { kind: "icon", size: "sm", children: "1" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "2" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "3" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "\u2026" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: "8" }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(e$2, {}) }), jsx(Button, { kind: "icon", variant: "transparent", size: "sm", children: jsx(o, {}) })] })] }));
1263
- };
1264
-
1265
- const DenseContext = createContext(false);
1266
- const Table = ({ striped, hasHover, dense, border, withFooter, className, children, ...props }) => {
1267
- return (jsx(DenseContext.Provider, { value: dense ?? false, children: jsxs("div", { className: classnames([
1268
- 'table',
1269
- {
1270
- 'table-striped': striped,
1271
- 'table-hasHover': hasHover,
1272
- 'table-dense': dense,
1273
- 'table-border': border
1274
- },
1275
- className
1276
- ]), children: [jsx("table", { cellPadding: 0, cellSpacing: 0, className: classnames('table_content'), ...props, children: children }), withFooter ? jsx(TableFooter, {}) : null] }) }));
1277
- };
1278
-
1279
- const TableBody = ({ className, children, ...props }) => {
1280
- return (jsx("tbody", { className: classnames([
1281
- 'table_body',
1282
- className
1283
- ]), ...props, children: children }));
1284
- };
1285
-
1286
- const TableCellComponentContext = createContext('td');
1287
- const TableHead = ({ className, children, ...props }) => {
1288
- return (jsx(TableCellComponentContext.Provider, { value: 'th', children: jsx("thead", { className: classnames([
1289
- 'table_head',
1290
- className
1291
- ]), ...props, children: children }) }));
1292
- };
1293
-
1294
- const TableCell = ({ kind = 'default', className, children, ...props }) => {
1295
- const Component = useContext(TableCellComponentContext);
1296
- return (jsx(Component, { className: classnames([
1297
- 'table_cell',
1298
- {
1299
- [`table_cell-${kind}`]: kind,
1300
- },
1301
- className
1302
- ]), ...props, children: children }));
1303
- };
1304
-
1305
- const TableRow = ({ className, children, ...props }) => {
1306
- return (jsx("tr", { className: classnames([
1307
- 'table_row',
1308
- className
1309
- ]), ...props, children: children }));
1310
- };
1311
-
1312
1363
  const TabsControl = ({ className, children, }) => {
1313
1364
  return (jsx("div", { role: 'tablist', className: classnames([
1314
1365
  'tabs_controls',
@@ -1408,4 +1459,4 @@ const Tooltip = ({ infoIcon, content, dense, className, children, ...props }) =>
1408
1459
  ]), children: content })] }));
1409
1460
  };
1410
1461
 
1411
- export { Accordion, AccordionContext, AccordionItem, Alert, Breadcrumbs, Button, Buttons, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Checkboxes, Chip, Color, Display, Divider, Grid, Input, InputLabel, Link, List, ListItem, Nav, NavBar, NavItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Step, Stepper, StepperContext, Switch, Tab, Table, TableBody, TableCell, TableFooter, TableHead, TableRow, Tabs, TabsControl, TabsPanel, Tag, Text, Textarea, Tooltip };
1462
+ export { Accordion, AccordionContext, AccordionItem, Alert, Breadcrumbs, Button, Buttons, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Checkboxes, Chip, Color, DataTable, Display, Divider, Grid, Input, InputLabel, Link, List, ListItem, Nav, NavBar, NavItem, Radio, RadioButtons, Section, SectionContent, SectionHeader, Select, Snippet, Status, Step, Stepper, StepperContext, Switch, Tab, Table, TableBody, TableCell, TableHead, TablePagination, TableRow, Tabs, TabsControl, TabsPanel, Tag, Text, Textarea, Tooltip };
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pallote-react",
3
- "version": "0.16.2",
3
+ "version": "0.16.4",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -25,6 +25,7 @@
25
25
  "dependencies": {
26
26
  "@phosphor-icons/react": "^2.1.10",
27
27
  "@rollup/plugin-json": "^6.1.0",
28
+ "@tanstack/react-table": "^8.21.3",
28
29
  "classnames": "^2.5.1",
29
30
  "pallote-css": "workspace:^",
30
31
  "react-syntax-highlighter": "^15.6.1",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pallote-react",
3
- "version": "0.16.2",
3
+ "version": "0.16.4",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -20,10 +20,11 @@
20
20
  "dependencies": {
21
21
  "@phosphor-icons/react": "^2.1.10",
22
22
  "@rollup/plugin-json": "^6.1.0",
23
+ "@tanstack/react-table": "^8.21.3",
23
24
  "classnames": "^2.5.1",
24
25
  "react-syntax-highlighter": "^15.6.1",
25
26
  "sass": "^1.71.1",
26
- "pallote-css": "^0.10.0"
27
+ "pallote-css": "^0.10.2"
27
28
  },
28
29
  "devDependencies": {
29
30
  "@chromatic-com/storybook": "^3.2.4",