@timmbr/ui 1.13.2 → 1.14.0

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.
@@ -0,0 +1,20 @@
1
+ import * as React from "react";
2
+ export type AttributeValueFieldType = "STRING" | "INTEGER" | "DECIMAL" | "LIST" | "BOOLEAN";
3
+ export interface AttributeValueFieldOption {
4
+ label: string;
5
+ slug: string;
6
+ swatchHex?: string | null;
7
+ }
8
+ export interface AttributeValueFieldProps {
9
+ type: AttributeValueFieldType;
10
+ value: unknown;
11
+ onChange: (value: unknown) => void;
12
+ options?: AttributeValueFieldOption[];
13
+ unit?: string | null;
14
+ disabled?: boolean;
15
+ size?: "sm" | "md";
16
+ className?: string;
17
+ id?: string;
18
+ }
19
+ export declare const AttributeValueField: React.FC<AttributeValueFieldProps>;
20
+ //# sourceMappingURL=AttributeValueField.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AttributeValueField.d.ts","sourceRoot":"","sources":["../../../src/components/AttributeValueField/AttributeValueField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,MAAM,uBAAuB,GAC/B,QAAQ,GACR,SAAS,GACT,SAAS,GACT,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,uBAAuB,CAAC;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiIlE,CAAC"}
@@ -0,0 +1,130 @@
1
+ "use client";
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
+ import { cn } from '@timmbr/utils';
4
+ import { Switch } from '../Switch/Switch.js';
5
+ import { Inline } from '../Inline/Inline.js';
6
+ import { Input } from '../Input/Input.js';
7
+ import { Text } from '../Text/Text.js';
8
+ import { Stack } from '../Stack/Stack.js';
9
+ import { Checkbox } from '../Checkbox/Checkbox.js';
10
+ import { Select } from '../Select/Select.js';
11
+
12
+ const AttributeValueField = ({
13
+ type,
14
+ value,
15
+ onChange,
16
+ options = [],
17
+ unit,
18
+ disabled,
19
+ size = "sm",
20
+ className,
21
+ id
22
+ }) => {
23
+ const inputSize = size === "sm" ? "sm" : "md";
24
+ if (type === "BOOLEAN") {
25
+ const checked = value === true || value === "true";
26
+ return /* @__PURE__ */ jsx(
27
+ Switch,
28
+ {
29
+ id,
30
+ checked,
31
+ onCheckedChange: (next) => onChange(next),
32
+ disabled,
33
+ className
34
+ }
35
+ );
36
+ }
37
+ if (type === "INTEGER" || type === "DECIMAL") {
38
+ return /* @__PURE__ */ jsxs(Inline, { gap: 2, align: "center", className: cn("w-full", className), children: [
39
+ /* @__PURE__ */ jsx(
40
+ Input,
41
+ {
42
+ id,
43
+ type: "number",
44
+ size: inputSize,
45
+ step: type === "INTEGER" ? 1 : "any",
46
+ value: value === void 0 || value === null ? "" : String(value),
47
+ onChange: (e) => {
48
+ const raw = e.target.value;
49
+ if (raw === "") {
50
+ onChange("");
51
+ return;
52
+ }
53
+ onChange(type === "INTEGER" ? parseInt(raw, 10) : parseFloat(raw));
54
+ },
55
+ disabled,
56
+ className: "flex-1"
57
+ }
58
+ ),
59
+ unit ? /* @__PURE__ */ jsx(Text, { variant: "caption", foreground: "muted", className: "shrink-0", children: unit }) : null
60
+ ] });
61
+ }
62
+ if (type === "LIST" && options.length > 0) {
63
+ const selected = Array.isArray(value) ? value : value ? [String(value)] : [];
64
+ return /* @__PURE__ */ jsx(Stack, { gap: 2, className, children: options.map((opt) => {
65
+ const optValue = opt.slug || opt.label;
66
+ const isChecked = selected.includes(optValue);
67
+ return /* @__PURE__ */ jsxs(Inline, { gap: 2, align: "center", children: [
68
+ /* @__PURE__ */ jsx(
69
+ Checkbox,
70
+ {
71
+ id: id ? `${id}-${opt.slug}` : void 0,
72
+ checked: isChecked,
73
+ disabled,
74
+ onCheckedChange: (checked) => {
75
+ if (checked) {
76
+ onChange([...selected, optValue]);
77
+ } else {
78
+ onChange(selected.filter((v) => v !== optValue));
79
+ }
80
+ }
81
+ }
82
+ ),
83
+ opt.swatchHex ? /* @__PURE__ */ jsx(
84
+ "span",
85
+ {
86
+ className: "size-4 rounded-sm border border-border shrink-0",
87
+ style: { backgroundColor: opt.swatchHex }
88
+ }
89
+ ) : null,
90
+ /* @__PURE__ */ jsx(Text, { variant: "body-2", children: opt.label })
91
+ ] }, opt.slug);
92
+ }) });
93
+ }
94
+ if (type === "LIST" || type === "STRING") {
95
+ if (options.length > 0) {
96
+ const selectValue = value === void 0 || value === null ? "" : String(value);
97
+ return /* @__PURE__ */ jsx(
98
+ Select,
99
+ {
100
+ id,
101
+ size: inputSize,
102
+ value: selectValue,
103
+ onValueChange: (v) => onChange(v),
104
+ disabled,
105
+ className,
106
+ options: [
107
+ { value: "", label: "Select…" },
108
+ ...options.map((o) => ({
109
+ value: o.slug || o.label,
110
+ label: o.label
111
+ }))
112
+ ]
113
+ }
114
+ );
115
+ }
116
+ }
117
+ return /* @__PURE__ */ jsx(
118
+ Input,
119
+ {
120
+ id,
121
+ size: inputSize,
122
+ value: value === void 0 || value === null ? "" : String(value),
123
+ onChange: (e) => onChange(e.target.value),
124
+ disabled,
125
+ className
126
+ }
127
+ );
128
+ };
129
+
130
+ export { AttributeValueField };
@@ -0,0 +1,2 @@
1
+ export { AttributeValueField, type AttributeValueFieldProps, type AttributeValueFieldType, type AttributeValueFieldOption, } from "./AttributeValueField";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AttributeValueField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,GAC/B,MAAM,uBAAuB,CAAC"}
@@ -0,0 +1,10 @@
1
+ import * as React from 'react';
2
+ import { flexRender, type ColumnDef } from '@tanstack/react-table';
3
+ import type { DataTableProps } from './DataTable.types';
4
+ export declare function DataTable<TData, TValue = unknown>({ data, columns, sorting, onSortingChange, rowSelection, onRowSelectionChange, className, containerClassName, bordered, variant, size, emptyMessage, isLoading, getRowId, onRowClick, stickyHeader, showScrollIndicator, motion: motionProp, }: DataTableProps<TData, TValue>): React.JSX.Element;
5
+ export declare namespace DataTable {
6
+ var displayName: string;
7
+ }
8
+ export { flexRender };
9
+ export type { ColumnDef };
10
+ //# sourceMappingURL=DataTable.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,UAAU,EAGV,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAc/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,EACjD,IAAI,EACJ,OAAO,EACP,OAAO,EACP,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAkC,EAClC,SAAiB,EACjB,QAAQ,EACR,UAAU,EACV,YAAmB,EACnB,mBAA0B,EAC1B,MAAM,EAAE,UAAU,GACnB,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,qBA+L/B;yBAlNe,SAAS;;;AAsNzB,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,177 @@
1
+ "use client";
2
+ import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import * as React from 'react';
4
+ import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
5
+ export { flexRender } from '@tanstack/react-table';
6
+ import { ChevronUp, ChevronDown, ChevronsUpDown } from '@timmbr/icons';
7
+ import { cn } from '@timmbr/utils';
8
+ import { motion } from '@timmbr/motion';
9
+ import { resolveMotion } from '../../types/motion.js';
10
+ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../Table/Table.js';
11
+ import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
12
+
13
+ function DataTable({
14
+ data,
15
+ columns,
16
+ sorting,
17
+ onSortingChange,
18
+ rowSelection,
19
+ onRowSelectionChange,
20
+ className,
21
+ containerClassName,
22
+ bordered,
23
+ variant,
24
+ size,
25
+ emptyMessage = "No results found.",
26
+ isLoading = false,
27
+ getRowId,
28
+ onRowClick,
29
+ stickyHeader = true,
30
+ showScrollIndicator = true,
31
+ motion: motionProp
32
+ }) {
33
+ const [internalSorting, setInternalSorting] = React.useState([]);
34
+ const [internalRowSelection, setInternalRowSelection] = React.useState({});
35
+ const scrollContainerRef = React.useRef(null);
36
+ const globalMotion = useGlobalAnimation();
37
+ const { shouldAnimate } = resolveMotion(motionProp, globalMotion);
38
+ const [scrollProgress, setScrollProgress] = React.useState(0);
39
+ React.useEffect(() => {
40
+ const el = scrollContainerRef.current;
41
+ if (!el) return;
42
+ const updateProgress = () => {
43
+ const maxScroll = el.scrollHeight - el.clientHeight;
44
+ setScrollProgress(maxScroll > 0 ? el.scrollTop / maxScroll : 0);
45
+ };
46
+ updateProgress();
47
+ el.addEventListener("scroll", updateProgress, { passive: true });
48
+ const resizeObserver = new ResizeObserver(updateProgress);
49
+ resizeObserver.observe(el);
50
+ return () => {
51
+ el.removeEventListener("scroll", updateProgress);
52
+ resizeObserver.disconnect();
53
+ };
54
+ }, [data]);
55
+ React.useEffect(() => {
56
+ if (typeof scrollContainerRef.current?.scrollTo === "function") {
57
+ scrollContainerRef.current.scrollTo({ top: 0, behavior: "smooth" });
58
+ }
59
+ }, [data]);
60
+ const table = useReactTable({
61
+ data,
62
+ columns,
63
+ state: {
64
+ sorting: sorting !== void 0 ? sorting : internalSorting,
65
+ rowSelection: rowSelection !== void 0 ? rowSelection : internalRowSelection
66
+ },
67
+ onSortingChange: onSortingChange ?? setInternalSorting,
68
+ onRowSelectionChange: onRowSelectionChange ?? setInternalRowSelection,
69
+ getCoreRowModel: getCoreRowModel(),
70
+ getSortedRowModel: getSortedRowModel(),
71
+ enableRowSelection: true,
72
+ getRowId
73
+ });
74
+ const resolvedContainerClassName = cn(
75
+ stickyHeader && "min-h-0 h-full",
76
+ containerClassName
77
+ );
78
+ return /* @__PURE__ */ jsxs(
79
+ Table,
80
+ {
81
+ className: cn(stickyHeader && "border-separate border-spacing-0", className),
82
+ containerClassName: resolvedContainerClassName,
83
+ containerRef: scrollContainerRef,
84
+ bordered,
85
+ variant,
86
+ size,
87
+ children: [
88
+ showScrollIndicator && shouldAnimate && /* @__PURE__ */ jsx("caption", { className: "p-0 caption-top", children: /* @__PURE__ */ jsx(
89
+ motion.div,
90
+ {
91
+ style: { scaleX: scrollProgress },
92
+ className: "sticky top-0 z-30 h-0.5 w-full bg-primary origin-left pointer-events-none transition-transform duration-150 ease-out"
93
+ }
94
+ ) }),
95
+ /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { className: "border-b border-border hover:bg-transparent", children: headerGroup.headers.map((header) => {
96
+ const canSort = header.column.getCanSort();
97
+ const isSorted = header.column.getIsSorted();
98
+ return /* @__PURE__ */ jsx(
99
+ TableHead,
100
+ {
101
+ colSpan: header.colSpan,
102
+ className: cn(
103
+ stickyHeader ? "sticky top-0 z-20 bg-card border-b border-border" : "static shadow-none",
104
+ canSort && "cursor-pointer select-none"
105
+ ),
106
+ onClick: canSort ? header.column.getToggleSortingHandler() : void 0,
107
+ children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
108
+ /* @__PURE__ */ jsx("span", { children: flexRender(
109
+ header.column.columnDef.header,
110
+ header.getContext()
111
+ ) }),
112
+ canSort && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center text-muted-foreground", children: isSorted === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "size-3.5 text-foreground" }) : isSorted === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 text-foreground" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 opacity-40 hover:opacity-100 transition-opacity" }) })
113
+ ] })
114
+ },
115
+ header.id
116
+ );
117
+ }) }, headerGroup.id)) }),
118
+ /* @__PURE__ */ jsx(TableBody, { children: isLoading ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
119
+ TableCell,
120
+ {
121
+ colSpan: columns.length,
122
+ className: "h-28 text-center text-muted-foreground",
123
+ children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
124
+ /* @__PURE__ */ jsx("span", { className: "inline-block size-4 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
125
+ /* @__PURE__ */ jsx("span", { children: "Loading..." })
126
+ ] })
127
+ }
128
+ ) }) : table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row, index) => {
129
+ const isSelected = row.getIsSelected();
130
+ const cells = row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
131
+ if (shouldAnimate) {
132
+ return /* @__PURE__ */ jsx(
133
+ motion.tr,
134
+ {
135
+ "data-state": isSelected ? "selected" : void 0,
136
+ initial: { opacity: 0, y: 4 },
137
+ animate: { opacity: 1, y: 0 },
138
+ transition: {
139
+ duration: 0.2,
140
+ ease: [0.16, 1, 0.3, 1],
141
+ delay: Math.min(index * 0.015, 0.15)
142
+ },
143
+ className: cn(
144
+ "border-b border-grey-200 dark:border-grey-800 transition-colors data-[state=selected]:bg-primary/5 hover:bg-grey-50/80 dark:hover:bg-grey-900/60",
145
+ onRowClick && "cursor-pointer"
146
+ ),
147
+ onClick: () => onRowClick?.(row),
148
+ children: cells
149
+ },
150
+ row.id
151
+ );
152
+ }
153
+ return /* @__PURE__ */ jsx(
154
+ TableRow,
155
+ {
156
+ "data-state": isSelected ? "selected" : void 0,
157
+ className: cn(onRowClick && "cursor-pointer"),
158
+ onClick: () => onRowClick?.(row),
159
+ children: cells
160
+ },
161
+ row.id
162
+ );
163
+ }) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
164
+ TableCell,
165
+ {
166
+ colSpan: columns.length,
167
+ className: "h-28 text-center text-muted-foreground",
168
+ children: emptyMessage
169
+ }
170
+ ) }) })
171
+ ]
172
+ }
173
+ );
174
+ }
175
+ DataTable.displayName = "DataTable";
176
+
177
+ export { DataTable };
@@ -0,0 +1,42 @@
1
+ import type * as React from 'react';
2
+ import type { ColumnDef, HeaderContext, CellContext, SortingState, RowSelectionState, OnChangeFn, Row, Table as ReactTableInstance } from '@tanstack/react-table';
3
+ import type { TableProps } from '../Table/Table.types';
4
+ import type { MotionProps } from '../../types/motion';
5
+ export type { ColumnDef, HeaderContext, CellContext, SortingState, RowSelectionState, OnChangeFn, Row, ReactTableInstance, };
6
+ export interface DataTableProps<TData, TValue = unknown> extends MotionProps {
7
+ /** The data to display in the table. */
8
+ data: TData[];
9
+ /** Column definitions conforming to TanStack Table's ColumnDef specification. */
10
+ columns: ColumnDef<TData, TValue>[];
11
+ /** Controlled sorting state. */
12
+ sorting?: SortingState;
13
+ /** Callback fired when sorting changes. */
14
+ onSortingChange?: OnChangeFn<SortingState>;
15
+ /** Controlled row selection state (mapping rowId to boolean). */
16
+ rowSelection?: RowSelectionState;
17
+ /** Callback fired when row selection changes. */
18
+ onRowSelectionChange?: OnChangeFn<RowSelectionState>;
19
+ /** Additional CSS class names for the table element. */
20
+ className?: string;
21
+ /** Additional CSS class names for the table container. */
22
+ containerClassName?: string;
23
+ /** Whether the table should render with borders. */
24
+ bordered?: boolean;
25
+ /** Table visual variant: 'default' | 'striped' | 'bordered'. */
26
+ variant?: TableProps['variant'];
27
+ /** Table row density: 'sm' | 'default'. */
28
+ size?: TableProps['size'];
29
+ /** Custom content to display when there are no records. */
30
+ emptyMessage?: React.ReactNode;
31
+ /** Whether data is loading (renders skeleton or loading indicator). */
32
+ isLoading?: boolean;
33
+ /** Optional function to determine unique ID for each row. */
34
+ getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
35
+ /** Optional click handler for table rows. */
36
+ onRowClick?: (row: Row<TData>) => void;
37
+ /** Whether the table header remains sticky while scrolling rows. @default true */
38
+ stickyHeader?: boolean;
39
+ /** Whether to render a smooth motion spring scroll progress indicator. @default true */
40
+ showScrollIndicator?: boolean;
41
+ }
42
+ //# sourceMappingURL=DataTable.types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DataTable.types.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,GAAG,EACH,KAAK,IAAI,kBAAkB,EAC5B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,YAAY,EACV,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,GAAG,EACH,kBAAkB,GACnB,CAAC;AAEF,MAAM,WAAW,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAE,SAAQ,WAAW;IAC1E,wCAAwC;IACxC,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,iFAAiF;IACjF,OAAO,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACpC,gCAAgC;IAChC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,2CAA2C;IAC3C,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IAC3C,iEAAiE;IACjE,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,iDAAiD;IACjD,oBAAoB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACrD,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;IAC9E,6CAA6C;IAC7C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACvC,kFAAkF;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wFAAwF;IACxF,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}
@@ -0,0 +1,3 @@
1
+ export * from './DataTable';
2
+ export * from './DataTable.types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,EACd,iBAAiB,EAClB,MAAM,eAAe,CAAC;AAEvB,eAAO,MAAM,KAAK,qFAWjB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,SAAS,gGASrB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,QAAQ,2FASpB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,YAAY,mGASxB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EACV,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,EACd,iBAAiB,EAClB,MAAM,eAAe,CAAC;AAEvB,eAAO,MAAM,KAAK,qFAcjB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,SAAS,gGASrB,CAAC;AAGF,eAAO,MAAM,WAAW,kGASvB,CAAC;AAGF,eAAO,MAAM,QAAQ,2FASpB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,SAAS,6FASrB,CAAC;AAGF,eAAO,MAAM,YAAY,mGASxB,CAAC;AAGF,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
@@ -5,15 +5,22 @@ import { cn } from '@timmbr/utils';
5
5
  import { tableVariants, tableContainerVariants, tableCellVariants, tableFooterVariants, tableHeadVariants, tableRowVariants } from './Table.styles.js';
6
6
 
7
7
  const Table = React.forwardRef(
8
- ({ className, containerClassName, variant, size, bordered, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn(tableContainerVariants({ bordered }), containerClassName), children: /* @__PURE__ */ jsx(
9
- "table",
8
+ ({ className, containerClassName, containerRef, variant, size, bordered, ...props }, ref) => /* @__PURE__ */ jsx(
9
+ "div",
10
10
  {
11
- ref,
12
- "data-slot": "table",
13
- className: cn(tableVariants({ variant, size }), className),
14
- ...props
11
+ ref: containerRef,
12
+ className: cn(tableContainerVariants({ bordered }), containerClassName),
13
+ children: /* @__PURE__ */ jsx(
14
+ "table",
15
+ {
16
+ ref,
17
+ "data-slot": "table",
18
+ className: cn(tableVariants({ variant, size }), className),
19
+ ...props
20
+ }
21
+ )
15
22
  }
16
- ) })
23
+ )
17
24
  );
18
25
  Table.displayName = "Table";
19
26
  const TableHeader = React.forwardRef(
@@ -1,7 +1,7 @@
1
1
  import { cva } from 'class-variance-authority';
2
2
 
3
3
  const tableContainerVariants = cva(
4
- "relative w-full overflow-auto rounded-lg font-sans text-foreground",
4
+ "relative w-full overflow-auto rounded-lg font-sans text-foreground scroll-smooth [scrollbar-width:thin]",
5
5
  {
6
6
  variants: {
7
7
  bordered: {
@@ -38,7 +38,7 @@ const tableRowVariants = cva(
38
38
  "border-b border-grey-200 dark:border-grey-800 transition-colors data-[state=selected]:bg-primary/5 hover:bg-grey-50/80 dark:hover:bg-grey-900/60"
39
39
  );
40
40
  const tableHeadVariants = cva(
41
- "h-10 text-left align-middle font-semibold text-muted-foreground text-body-3 uppercase tracking-wider select-none bg-grey-100/50 dark:bg-grey-900/30 [&:has([role=checkbox])]:pr-0"
41
+ "sticky top-0 z-20 h-10 text-left align-middle font-semibold text-muted-foreground text-body-3 uppercase tracking-wider select-none bg-card border-b border-border [&:has([role=checkbox])]:pr-0"
42
42
  );
43
43
  const tableCellVariants = cva(
44
44
  "align-middle [&:has([role=checkbox])]:pr-0"
@@ -2,6 +2,7 @@ import type * as React from 'react';
2
2
  import type { TableVariants } from './Table.styles';
3
3
  export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>, TableVariants {
4
4
  containerClassName?: string;
5
+ containerRef?: React.Ref<HTMLDivElement>;
5
6
  }
6
7
  export type TableHeaderProps = React.HTMLAttributes<HTMLTableSectionElement>;
7
8
  export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
@@ -1 +1 @@
1
- {"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,aAAa;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAE1E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE9E,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACpF"}
1
+ {"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACjD,aAAa;IACf,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC;AAEtE,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAE1E,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAE1E,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE9E,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC;;OAEG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CACpF"}
@@ -56,7 +56,7 @@ const TablePagination = React.forwardRef(
56
56
  "aria-label": "Rows per page",
57
57
  value: pageSize,
58
58
  onChange: (e) => onPageSizeChange(Number(e.target.value)),
59
- className: "h-7 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 px-2 py-0 text-body-3 font-medium text-foreground focus:outline-none focus:ring-1 focus:ring-primary",
59
+ className: "h-7 rounded-[2px] border border-border bg-card px-2 py-0 text-body-3 font-medium text-foreground focus:outline-none focus:ring-1 focus:ring-primary",
60
60
  children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
61
61
  }
62
62
  )
@@ -70,7 +70,7 @@ const TablePagination = React.forwardRef(
70
70
  "aria-label": "Previous page",
71
71
  disabled: page <= 1,
72
72
  onClick: () => onPageChange?.(page - 1),
73
- className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-800 text-body-3 font-medium text-foreground hover:bg-grey-100 dark:hover:bg-grey-700 disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
73
+ className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-border bg-card text-body-3 font-medium text-foreground hover:bg-accent disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
74
74
  children: [
75
75
  /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" }),
76
76
  /* @__PURE__ */ jsx("span", { children: "Previous" })
@@ -89,7 +89,7 @@ const TablePagination = React.forwardRef(
89
89
  "aria-label": "Next page",
90
90
  disabled: page >= computedTotalPages,
91
91
  onClick: () => onPageChange?.(page + 1),
92
- className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-800 text-body-3 font-medium text-foreground hover:bg-grey-100 dark:hover:bg-grey-700 disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
92
+ className: "inline-flex items-center gap-1 h-8 px-2.5 rounded-[2px] border border-border bg-card text-body-3 font-medium text-foreground hover:bg-accent disabled:opacity-40 disabled:pointer-events-none transition-colors cursor-pointer",
93
93
  children: [
94
94
  /* @__PURE__ */ jsx("span", { children: "Next" }),
95
95
  /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
package/dist/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export * from './components/FilterPanel';
19
19
  export * from './components/FilterDrawer';
20
20
  export * from './components/Label';
21
21
  export * from './components/FormField';
22
+ export * from './components/AttributeValueField';
22
23
  export * from './components/ImageUpload';
23
24
  export * from './components/OtpInput';
24
25
  export * from './components/AlertDialog';
@@ -55,6 +56,7 @@ export * from './components/Spinner';
55
56
  export * from './components/Skeleton';
56
57
  export * from './components/EmptyState';
57
58
  export * from './components/Table';
59
+ export * from './components/DataTable';
58
60
  export * from './components/Pagination';
59
61
  export * from './components/DataList';
60
62
  export * from './components/List';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,cAAc,aAAa,CAAC;AAG5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAC;AAC/B,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG3D,cAAc,aAAa,CAAC;AAG5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAGlC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC"}
package/dist/index.js CHANGED
@@ -3,6 +3,7 @@ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './
3
3
  export { Alert, AlertDescription, AlertTitle } from './components/Alert/Alert.js';
4
4
  export { AlertDialog, AlertDialogAction, AlertDialogBody, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from './components/AlertDialog/AlertDialog.js';
5
5
  export { AnimationProvider, useGlobalAnimation } from './providers/AnimationProvider.js';
6
+ export { AttributeValueField } from './components/AttributeValueField/AttributeValueField.js';
6
7
  export { AuthModal } from './components/AuthModal/AuthModal.js';
7
8
  export { AuthModalBanner } from './components/AuthModal/subcomponents/AuthModalBanner.js';
8
9
  export { AuthModalIdentifierForm } from './components/AuthModal/subcomponents/AuthModalIdentifierForm.js';
@@ -28,6 +29,7 @@ export { DEFAULT_FILTER_LABELS, FilterOptionList, FilterPanel, FilterPriceSlider
28
29
  export { DEFAULT_FOOTER_LEGAL_LINKS, DEFAULT_FOOTER_SECTIONS, DEFAULT_FOOTER_SOCIAL_LINKS, isCrossZoneNavigation, resolveNavDestination } from './components/NavFooter/NavFooter.helpers.js';
29
30
  export { DEFAULT_STORAGE_KEY, isNavItemActive, isRouteActive, readStoredCollapsed, writeStoredCollapsed } from './components/SideBarNavigation/SideBarNavigation.helpers.js';
30
31
  export { DataList, DataListAction, DataListItem, DataListLabel, DataListValue } from './components/DataList/DataList.js';
32
+ export { DataTable } from './components/DataTable/DataTable.js';
31
33
  export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/Dialog/Dialog.js';
32
34
  export { Divider } from './components/Divider/Divider.js';
33
35
  export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './components/Drawer/Drawer.js';
@@ -137,6 +139,7 @@ export { dropdownContentVariants, dropdownItemIconVariants, dropdownItemVariants
137
139
  export { emptyStateIconWrapperVariants, emptyStateVariants } from './components/EmptyState/EmptyState.styles.js';
138
140
  export { filterDrawerBadgeVariants, filterDrawerContentVariants, filterDrawerFooterVariants, filterDrawerHeaderVariants, filterDrawerNavItemVariants, filterDrawerNavVariants, filterDrawerPanesVariants } from './components/FilterDrawer/FilterDrawer.styles.js';
139
141
  export { filterLinkButtonVariants, filterOptionCountVariants, filterOptionLabelVariants, filterOptionRowVariants, filterPanelBodyVariants, filterPanelHeaderVariants, filterPanelTitleVariants, filterPanelVariants, filterSectionContentVariants, filterSectionTriggerVariants, filterToggleListVariants } from './components/FilterPanel/FilterPanel.styles.js';
142
+ export { flexRender } from '@tanstack/react-table';
140
143
  export { footerLegalBarVariants, footerLegalLinkVariants, footerNavLinkVariants, footerOfficeBlockVariants, footerSectionTitleVariants, footerSocialButtonVariants, navFooterContainerVariants, navFooterRootVariants } from './components/NavFooter/NavFooter.styles.js';
141
144
  export { formFieldVariants } from './components/FormField/FormField.styles.js';
142
145
  export { headingVariants } from './components/Heading/Heading.styles.js';
@@ -0,0 +1,74 @@
1
+ import * as React from 'react';
2
+ import { createTable } from '../../../../../../@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js';
3
+ export { ColumnFaceting, ColumnFiltering, ColumnGrouping, ColumnOrdering, ColumnPinning, ColumnSizing, ColumnVisibility, GlobalFaceting, GlobalFiltering, Headers, RowExpanding, RowPagination, RowPinning, RowSelection, RowSorting, _getVisibleLeafColumns, aggregationFns, buildHeaderGroups, createCell, createColumn, createRow, defaultColumnSizing, filterFns, flattenBy, functionalUpdate, getCoreRowModel, getMemoOptions, getSortedRowModel, isFunction, isNumberArray, isRowSelected, isSubRowSelected, makeStateUpdater, memo, orderColumns, passiveEventSupported, reSplitAlphaNumeric, selectRowsFn, shouldAutoRemoveFilter, sortingFns } from '../../../../../../@tanstack_table-core@8.21.3/node_modules/@tanstack/table-core/build/lib/index.js';
4
+
5
+ /**
6
+ * react-table
7
+ *
8
+ * Copyright (c) TanStack
9
+ *
10
+ * This source code is licensed under the MIT license found in the
11
+ * LICENSE.md file in the root directory of this source tree.
12
+ *
13
+ * @license MIT
14
+ */
15
+
16
+ //
17
+
18
+ /**
19
+ * If rendering headers, cells, or footers with custom markup, use flexRender instead of `cell.getValue()` or `cell.renderValue()`.
20
+ */
21
+ function flexRender(Comp, props) {
22
+ return !Comp ? null : isReactComponent(Comp) ? /*#__PURE__*/React.createElement(Comp, props) : Comp;
23
+ }
24
+ function isReactComponent(component) {
25
+ return isClassComponent(component) || typeof component === 'function' || isExoticComponent(component);
26
+ }
27
+ function isClassComponent(component) {
28
+ return typeof component === 'function' && (() => {
29
+ const proto = Object.getPrototypeOf(component);
30
+ return proto.prototype && proto.prototype.isReactComponent;
31
+ })();
32
+ }
33
+ function isExoticComponent(component) {
34
+ return typeof component === 'object' && typeof component.$$typeof === 'symbol' && ['react.memo', 'react.forward_ref'].includes(component.$$typeof.description);
35
+ }
36
+ function useReactTable(options) {
37
+ // Compose in the generic options to the user options
38
+ const resolvedOptions = {
39
+ state: {},
40
+ // Dummy state
41
+ onStateChange: () => {},
42
+ // noop
43
+ renderFallbackValue: null,
44
+ ...options
45
+ };
46
+
47
+ // Create a new table and store it in state
48
+ const [tableRef] = React.useState(() => ({
49
+ current: createTable(resolvedOptions)
50
+ }));
51
+
52
+ // By default, manage table state here using the table's initial state
53
+ const [state, setState] = React.useState(() => tableRef.current.initialState);
54
+
55
+ // Compose the default state above with any user state. This will allow the user
56
+ // to only control a subset of the state if desired.
57
+ tableRef.current.setOptions(prev => ({
58
+ ...prev,
59
+ ...options,
60
+ state: {
61
+ ...state,
62
+ ...options.state
63
+ },
64
+ // Similarly, we'll maintain both our internal state and any user-provided
65
+ // state.
66
+ onStateChange: updater => {
67
+ setState(updater);
68
+ options.onStateChange == null || options.onStateChange(updater);
69
+ }
70
+ }));
71
+ return tableRef.current;
72
+ }
73
+
74
+ export { createTable, flexRender, useReactTable };