pallote-react 0.16.1 → 0.16.3

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 (8) hide show
  1. package/dist/components/DataTable.d.ts +25 -0
  2. package/dist/components/Input.d.ts +1 -1
  3. package/dist/components/Table.d.ts +1 -2
  4. package/dist/components/TablePagination.d.ts +12 -0
  5. package/dist/index.d.ts +4 -2
  6. package/dist/index.js +341 -231
  7. package/dist/package.json +2 -1
  8. 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/Input.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
2
- type InputType = 'date' | 'email' | 'number' | 'tel' | 'text' | 'time' | 'password';
2
+ type InputType = 'date' | 'email' | 'number' | 'tel' | 'text' | 'time' | 'password' | 'color';
3
3
  export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> {
4
4
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
5
5
  type?: InputType;
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,9 @@
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';
6
7
  import SyntaxHighlighter from 'react-syntax-highlighter';
7
8
 
8
9
  const Color = ({ fill, stroke, customFill, customStroke, className, children, ...props }) => {
@@ -122,7 +123,7 @@ const Accordion = ({ size = 'md', allowMultiple = false, transparent, className,
122
123
  }) }) }));
123
124
  };
124
125
 
125
- const o$4 = createContext({
126
+ const o$6 = createContext({
126
127
  color: "currentColor",
127
128
  size: "1em",
128
129
  weight: "regular",
@@ -146,7 +147,7 @@ const p = e$9.forwardRef(
146
147
  weight: f = "regular",
147
148
  mirrored: g = false,
148
149
  ...w
149
- } = e$9.useContext(o$4);
150
+ } = e$9.useContext(o$6);
150
151
  return /* @__PURE__ */ e$9.createElement(
151
152
  "svg",
152
153
  {
@@ -234,7 +235,7 @@ const AccordionItem = ({ icon, label, disabled, className, children, isOpen = fa
234
235
  ]), ...props, children: [jsxs("button", { type: "button", id: headerId, className: classnames('accordion_control'), onClick: handleClick, onKeyDown: handleKeyDown, "aria-expanded": isOpen, "aria-controls": panelId, "aria-disabled": disabled ? true : undefined, disabled: disabled, children: [icon ? jsx("span", { className: "accordion_icon", "aria-hidden": "true", children: icon }) : null, jsx(Text, { className: "accordion_header", variant: labelVariant, weight: "bold", children: label }), jsx(e$8, { className: "accordion_icon accordion_icon-arrow", "aria-hidden": "true" })] }), jsx("div", { id: panelId, ref: contentRef, role: "region", "aria-labelledby": headerId, className: classnames('accordion_content'), style: { maxHeight }, hidden: !isOpen, children: children })] }));
235
236
  };
236
237
 
237
- const a$6 = /* @__PURE__ */ new Map([
238
+ const a$8 = /* @__PURE__ */ new Map([
238
239
  [
239
240
  "bold",
240
241
  /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z" }))
@@ -267,7 +268,7 @@ const a$6 = /* @__PURE__ */ new Map([
267
268
  ]
268
269
  ]);
269
270
 
270
- const e$7 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$6 }));
271
+ const e$7 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$8 }));
271
272
  e$7.displayName = "XIcon";
272
273
 
273
274
  const Alert = ({ color = 'success', variant = 'toast', title, subtitle, dense, noIcon, show, onClose, className, ...props }) => {
@@ -462,18 +463,267 @@ const Chip = ({ color = 'default', dense, avatar, disabled, onClose, className,
462
463
  ]), 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
464
  };
464
465
 
465
- const Divider = ({ direction = 'landscape', padding = 'md', className, ...props }) => {
466
- return (jsx("div", { className: classnames([
467
- 'divider',
466
+ const a$7 = /* @__PURE__ */ new Map([
467
+ [
468
+ "bold",
469
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z" }))
470
+ ],
471
+ [
472
+ "duotone",
473
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M208,160H48l80-80Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M213.66,154.34l-80-80a8,8,0,0,0-11.32,0l-80,80A8,8,0,0,0,48,168H208a8,8,0,0,0,5.66-13.66ZM67.31,152,128,91.31,188.69,152Z" }))
474
+ ],
475
+ [
476
+ "fill",
477
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M215.39,163.06A8,8,0,0,1,208,168H48a8,8,0,0,1-5.66-13.66l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,215.39,163.06Z" }))
478
+ ],
479
+ [
480
+ "light",
481
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M212.24,164.24a6,6,0,0,1-8.48,0L128,88.49,52.24,164.24a6,6,0,0,1-8.48-8.48l80-80a6,6,0,0,1,8.48,0l80,80A6,6,0,0,1,212.24,164.24Z" }))
482
+ ],
483
+ [
484
+ "regular",
485
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z" }))
486
+ ],
487
+ [
488
+ "thin",
489
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M210.83,162.83a4,4,0,0,1-5.66,0L128,85.66,50.83,162.83a4,4,0,0,1-5.66-5.66l80-80a4,4,0,0,1,5.66,0l80,80A4,4,0,0,1,210.83,162.83Z" }))
490
+ ]
491
+ ]);
492
+
493
+ const o$5 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$7 }));
494
+ o$5.displayName = "CaretUpIcon";
495
+
496
+ const a$6 = /* @__PURE__ */ new Map([
497
+ [
498
+ "bold",
499
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z" }))
500
+ ],
501
+ [
502
+ "duotone",
503
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M192,112a80,80,0,1,1-80-80A80,80,0,0,1,192,112Z", opacity: "0.2" }), /* @__PURE__ */ e$9.createElement("path", { d: "M229.66,218.34,179.6,168.28a88.21,88.21,0,1,0-11.32,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" }))
504
+ ],
505
+ [
506
+ "fill",
507
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M168,112a56,56,0,1,1-56-56A56,56,0,0,1,168,112Zm61.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88,88,0,1,1,11.32-11.31l50.06,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z" }))
508
+ ],
509
+ [
510
+ "light",
511
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M228.24,219.76l-51.38-51.38a86.15,86.15,0,1,0-8.48,8.48l51.38,51.38a6,6,0,0,0,8.48-8.48ZM38,112a74,74,0,1,1,74,74A74.09,74.09,0,0,1,38,112Z" }))
512
+ ],
513
+ [
514
+ "regular",
515
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z" }))
516
+ ],
517
+ [
518
+ "thin",
519
+ /* @__PURE__ */ e$9.createElement(e$9.Fragment, null, /* @__PURE__ */ e$9.createElement("path", { d: "M226.83,221.17l-52.7-52.7a84.1,84.1,0,1,0-5.66,5.66l52.7,52.7a4,4,0,0,0,5.66-5.66ZM36,112a76,76,0,1,1,76,76A76.08,76.08,0,0,1,36,112Z" }))
520
+ ]
521
+ ]);
522
+
523
+ const o$4 = e$9.forwardRef((s, n) => /* @__PURE__ */ e$9.createElement(p, { ref: n, ...s, weights: a$6 }));
524
+ o$4.displayName = "MagnifyingGlassIcon";
525
+
526
+ const DenseContext = createContext(false);
527
+ const Table = ({ striped, hasHover, dense, border, className, children, ...props }) => {
528
+ return (jsx(DenseContext.Provider, { value: dense ?? false, children: jsx("div", { className: classnames([
529
+ 'table',
530
+ {
531
+ 'table-striped': striped,
532
+ 'table-hasHover': hasHover,
533
+ 'table-dense': dense,
534
+ 'table-border': border
535
+ },
536
+ className
537
+ ]), children: jsx("table", { cellPadding: 0, cellSpacing: 0, className: classnames('table_content'), ...props, children: children }) }) }));
538
+ };
539
+
540
+ const TableCellComponentContext = createContext('td');
541
+ const TableHead = ({ className, children, ...props }) => {
542
+ return (jsx(TableCellComponentContext.Provider, { value: 'th', children: jsx("thead", { className: classnames([
543
+ 'table_head',
544
+ className
545
+ ]), ...props, children: children }) }));
546
+ };
547
+
548
+ const TableBody = ({ className, children, ...props }) => {
549
+ return (jsx("tbody", { className: classnames([
550
+ 'table_body',
551
+ className
552
+ ]), ...props, children: children }));
553
+ };
554
+
555
+ const TableRow = ({ className, children, ...props }) => {
556
+ return (jsx("tr", { className: classnames([
557
+ 'table_row',
558
+ className
559
+ ]), ...props, children: children }));
560
+ };
561
+
562
+ const TableCell = ({ kind = 'default', className, children, ...props }) => {
563
+ const Component = useContext(TableCellComponentContext);
564
+ return (jsx(Component, { className: classnames([
565
+ 'table_cell',
468
566
  {
469
- [`divider-${direction}`]: direction,
470
- [`divider-${padding}`]: padding
567
+ [`table_cell-${kind}`]: kind,
471
568
  },
472
569
  className
473
- ]), ...props }));
570
+ ]), ...props, children: children }));
474
571
  };
475
572
 
476
- const e$6 = /* @__PURE__ */ new Map([
573
+ const a$5 = /* @__PURE__ */ new Map([
574
+ [
575
+ "bold",
576
+ /* @__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" }))
577
+ ],
578
+ [
579
+ "duotone",
580
+ /* @__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" }))
581
+ ],
582
+ [
583
+ "fill",
584
+ /* @__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" }))
585
+ ],
586
+ [
587
+ "light",
588
+ /* @__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" }))
589
+ ],
590
+ [
591
+ "regular",
592
+ /* @__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" }))
593
+ ],
594
+ [
595
+ "thin",
596
+ /* @__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" }))
597
+ ]
598
+ ]);
599
+
600
+ const t$1 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: a$5 }));
601
+ t$1.displayName = "CaretLeftIcon";
602
+
603
+ const t = /* @__PURE__ */ new Map([
604
+ [
605
+ "bold",
606
+ /* @__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" }))
607
+ ],
608
+ [
609
+ "duotone",
610
+ /* @__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" }))
611
+ ],
612
+ [
613
+ "fill",
614
+ /* @__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" }))
615
+ ],
616
+ [
617
+ "light",
618
+ /* @__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" }))
619
+ ],
620
+ [
621
+ "regular",
622
+ /* @__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" }))
623
+ ],
624
+ [
625
+ "thin",
626
+ /* @__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" }))
627
+ ]
628
+ ]);
629
+
630
+ const e$6 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: t }));
631
+ e$6.displayName = "CaretRightIcon";
632
+
633
+ const e$5 = /* @__PURE__ */ new Map([
634
+ [
635
+ "bold",
636
+ /* @__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" }))
637
+ ],
638
+ [
639
+ "duotone",
640
+ /* @__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" }))
641
+ ],
642
+ [
643
+ "fill",
644
+ /* @__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" }))
645
+ ],
646
+ [
647
+ "light",
648
+ /* @__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" }))
649
+ ],
650
+ [
651
+ "regular",
652
+ /* @__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" }))
653
+ ],
654
+ [
655
+ "thin",
656
+ /* @__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" }))
657
+ ]
658
+ ]);
659
+
660
+ const o$3 = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: e$5 }));
661
+ o$3.displayName = "CaretDoubleLeftIcon";
662
+
663
+ const a$4 = /* @__PURE__ */ new Map([
664
+ [
665
+ "bold",
666
+ /* @__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" }))
667
+ ],
668
+ [
669
+ "duotone",
670
+ /* @__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" }))
671
+ ],
672
+ [
673
+ "fill",
674
+ /* @__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" }))
675
+ ],
676
+ [
677
+ "light",
678
+ /* @__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" }))
679
+ ],
680
+ [
681
+ "regular",
682
+ /* @__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" }))
683
+ ],
684
+ [
685
+ "thin",
686
+ /* @__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" }))
687
+ ]
688
+ ]);
689
+
690
+ const o$2 = e$9.forwardRef((t, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...t, weights: a$4 }));
691
+ o$2.displayName = "CaretDoubleRightIcon";
692
+
693
+ const Select = ({ onChange, id, label = 'Select', isFocused, error, disabled, optional, dense, hint, hideLabel, children, className, ...props }) => {
694
+ const inputRef = useRef(null);
695
+ useEffect(() => {
696
+ if (isFocused && inputRef.current) {
697
+ inputRef.current.focus();
698
+ }
699
+ }, [isFocused]);
700
+ return (jsxs("div", { className: classnames([
701
+ 'input',
702
+ 'select',
703
+ {
704
+ 'input-focused': isFocused,
705
+ 'js-error': error,
706
+ 'input-disabled': disabled,
707
+ 'input-optional': optional,
708
+ 'input-dense': dense,
709
+ },
710
+ className
711
+ ]), 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
712
+ ? {
713
+ 'aria-describedby': [hint ? `${id}-hint` : null, error ? `${id}-error` : null]
714
+ .filter(Boolean)
715
+ .join(' '),
716
+ }
717
+ : null), ...props, children: children })] }));
718
+ };
719
+
720
+ const TablePagination = ({ pageIndex, pageCount, pageSize, pageSizeOptions = [10, 25, 50, 100], totalRows, onPageChange, onPageSizeChange, className, ...props }) => {
721
+ const start = pageIndex * pageSize + 1;
722
+ const end = Math.min((pageIndex + 1) * pageSize, totalRows);
723
+ 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, {}) })] })] }));
724
+ };
725
+
726
+ const e$4 = /* @__PURE__ */ new Map([
477
727
  [
478
728
  "bold",
479
729
  /* @__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 +756,10 @@ const e$6 = /* @__PURE__ */ new Map([
506
756
  ]
507
757
  ]);
508
758
 
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";
759
+ const e$3 = e$9.forwardRef((o, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...o, weights: e$4 }));
760
+ e$3.displayName = "CalendarBlankIcon";
511
761
 
512
- const a$5 = /* @__PURE__ */ new Map([
762
+ const a$3 = /* @__PURE__ */ new Map([
513
763
  [
514
764
  "bold",
515
765
  /* @__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 +786,10 @@ const a$5 = /* @__PURE__ */ new Map([
536
786
  ]
537
787
  ]);
538
788
 
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";
789
+ const e$2 = e$9.forwardRef((r, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...r, weights: a$3 }));
790
+ e$2.displayName = "CaretUpDownIcon";
541
791
 
542
- const a$4 = /* @__PURE__ */ new Map([
792
+ const a$2 = /* @__PURE__ */ new Map([
543
793
  [
544
794
  "bold",
545
795
  /* @__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 +816,7 @@ const a$4 = /* @__PURE__ */ new Map([
566
816
  ]
567
817
  ]);
568
818
 
569
- const c = e$9.forwardRef((e, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...e, weights: a$4 }));
819
+ const c = e$9.forwardRef((e, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...e, weights: a$2 }));
570
820
  c.displayName = "ClockIcon";
571
821
 
572
822
  const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon, isFocused, error, disabled, optional, dense, hint, hideLabel, className, ...props }) => {
@@ -577,9 +827,9 @@ const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon
577
827
  }
578
828
  }, [isFocused]);
579
829
  const customIcon = icon ||
580
- (type === 'date' && jsx(e$5, {})) ||
830
+ (type === 'date' && jsx(e$3, {})) ||
581
831
  (type === 'time' && jsx(c, {})) ||
582
- (type === 'number' && jsx(e$4, {}));
832
+ (type === 'number' && jsx(e$2, {}));
583
833
  return (jsxs("div", { className: classnames([
584
834
  'input',
585
835
  {
@@ -599,7 +849,68 @@ const Input = ({ onChange, type = 'text', id, placeholder, label = 'Input', icon
599
849
  : null), ...props })] }));
600
850
  };
601
851
 
602
- const e$3 = /* @__PURE__ */ new Map([
852
+ function ColumnFilter({ header }) {
853
+ const columnDef = header.column.columnDef.meta;
854
+ const filterType = columnDef?.filterType ?? 'text';
855
+ const filterOptions = columnDef?.filterOptions ?? [];
856
+ const filterValue = header.column.getFilterValue() ?? '';
857
+ if (filterType === 'select') {
858
+ 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)))] }));
859
+ }
860
+ 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) }));
861
+ }
862
+ function DataTable({ data, columns: columnDefs, enableSearch, searchPlaceholder = 'Search...', pageSize: initialPageSize = 10, pageSizeOptions = [10, 25, 50, 100], striped, hasHover = true, dense, border, className, ...props }) {
863
+ const [sorting, setSorting] = useState([]);
864
+ const [columnFilters, setColumnFilters] = useState([]);
865
+ const [globalFilter, setGlobalFilter] = useState('');
866
+ const tanstackColumns = useMemo(() => columnDefs.map(col => ({
867
+ accessorKey: col.accessorKey,
868
+ header: col.header,
869
+ enableSorting: col.enableSorting ?? false,
870
+ enableColumnFilter: col.enableFiltering === true,
871
+ cell: col.cell
872
+ ? (info) => col.cell(info.getValue(), info.row.original)
873
+ : (info) => String(info.getValue() ?? ''),
874
+ meta: {
875
+ filterType: col.filterType ?? 'text',
876
+ filterOptions: col.filterOptions,
877
+ },
878
+ })), [columnDefs]);
879
+ const table = useReactTable({
880
+ data,
881
+ columns: tanstackColumns,
882
+ state: { sorting, columnFilters, globalFilter },
883
+ onSortingChange: setSorting,
884
+ onColumnFiltersChange: setColumnFilters,
885
+ onGlobalFilterChange: setGlobalFilter,
886
+ getCoreRowModel: getCoreRowModel(),
887
+ getSortedRowModel: getSortedRowModel(),
888
+ getFilteredRowModel: getFilteredRowModel(),
889
+ getPaginationRowModel: getPaginationRowModel(),
890
+ initialState: {
891
+ pagination: { pageSize: initialPageSize },
892
+ },
893
+ });
894
+ const hasFilters = columnDefs.some(col => col.enableFiltering === true);
895
+ 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(o$4, {}), 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({
896
+ 'datatable_sortable': header.column.getCanSort()
897
+ }), onClick: header.column.getToggleSortingHandler(), "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending'
898
+ : header.column.getIsSorted() === 'desc' ? 'descending'
899
+ : 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(e$8, { size: 12 })) : header.column.getIsSorted() === 'desc' ? (jsx(o$5, { size: 12 })) : (jsx(e$8, { 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) })] }));
900
+ }
901
+
902
+ const Divider = ({ direction = 'landscape', padding = 'md', className, ...props }) => {
903
+ return (jsx("div", { className: classnames([
904
+ 'divider',
905
+ {
906
+ [`divider-${direction}`]: direction,
907
+ [`divider-${padding}`]: padding
908
+ },
909
+ className
910
+ ]), ...props }));
911
+ };
912
+
913
+ const e$1 = /* @__PURE__ */ new Map([
603
914
  [
604
915
  "bold",
605
916
  /* @__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 +943,8 @@ const e$3 = /* @__PURE__ */ new Map([
632
943
  ]
633
944
  ]);
634
945
 
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";
946
+ const o$1 = e$9.forwardRef((e, t) => /* @__PURE__ */ e$9.createElement(p, { ref: t, ...e, weights: e$1 }));
947
+ o$1.displayName = "ArrowSquareOutIcon";
637
948
 
638
949
  const Link = ({ component = 'a', icon, color, isExternal, href, className, children, ...props }) => {
639
950
  const Component = component || 'a';
@@ -641,7 +952,7 @@ const Link = ({ component = 'a', icon, color, isExternal, href, className, child
641
952
  'link',
642
953
  { [`text-${color}`]: color },
643
954
  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, {}) })] }))] }));
955
+ ]), 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
956
  };
646
957
 
647
958
  const List = ({ dense, className, children, ...props }) => {
@@ -789,33 +1100,6 @@ const SectionContent = ({ align = 'left', className, children, ...props }) => {
789
1100
  ]), ...props, children: children }));
790
1101
  };
791
1102
 
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
1103
  var nnfxDark = {
820
1104
  "hljs": {
821
1105
  "display": "block",
@@ -956,7 +1240,7 @@ const Status = ({ color = 'inactive', dense, className, children = 'Status', ...
956
1240
  ]), ...props, children: children }));
957
1241
  };
958
1242
 
959
- const a$3 = /* @__PURE__ */ new Map([
1243
+ const a$1 = /* @__PURE__ */ new Map([
960
1244
  [
961
1245
  "bold",
962
1246
  /* @__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 +1273,8 @@ const a$3 = /* @__PURE__ */ new Map([
989
1273
  ]
990
1274
  ]);
991
1275
 
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";
1276
+ const o = e$9.forwardRef((c, r) => /* @__PURE__ */ e$9.createElement(p, { ref: r, ...c, weights: a$1 }));
1277
+ o.displayName = "CheckIcon";
994
1278
 
995
1279
  const StepperContext = createContext(null);
996
1280
  const Stepper = ({ showLabels, className, children, ...props }) => {
@@ -1031,7 +1315,7 @@ const Stepper = ({ showLabels, className, children, ...props }) => {
1031
1315
  }), "aria-current": isActive ? 'step' : undefined, children: [jsx("span", { className: classnames('stepper_icon', {
1032
1316
  'stepper_icon-active': isActive,
1033
1317
  '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));
1318
+ }), "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
1319
  }) }) }), jsx("div", { className: classnames('stepper_content'), children: Children.map(children, (child, index) => {
1036
1320
  if (index === activeStep && isValidElement(child)) {
1037
1321
  return child;
@@ -1135,180 +1419,6 @@ const Tab = ({ index, label, className, }) => {
1135
1419
  ]), role: "tab", "aria-selected": isSelected, "aria-controls": `tabpanel-${index}`, id: `tab-${index}`, tabIndex: isSelected ? 0 : -1, onClick: () => setActiveIndex(index), onKeyDown: handleKeyDown, children: label }));
1136
1420
  };
1137
1421
 
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
1422
  const TabsControl = ({ className, children, }) => {
1313
1423
  return (jsx("div", { role: 'tablist', className: classnames([
1314
1424
  'tabs_controls',
@@ -1408,4 +1518,4 @@ const Tooltip = ({ infoIcon, content, dense, className, children, ...props }) =>
1408
1518
  ]), children: content })] }));
1409
1519
  };
1410
1520
 
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 };
1521
+ 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.1",
3
+ "version": "0.16.3",
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.1",
3
+ "version": "0.16.3",
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",