sodtrack-web-ui 0.9.0 → 0.9.2

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 (9) hide show
  1. package/dist/button.d.mts +1 -1
  2. package/dist/chip-status.d.mts +1 -1
  3. package/dist/chunk-V2LMCQ4I.mjs +192 -0
  4. package/dist/data-table.d.mts +1 -1
  5. package/dist/data-table.mjs +7 -192
  6. package/dist/icon-button.d.mts +1 -1
  7. package/dist/index.d.mts +5 -0
  8. package/dist/index.mjs +3 -0
  9. package/package.json +1 -1
package/dist/button.d.mts CHANGED
@@ -8,7 +8,7 @@ type ButtonProps = {
8
8
  } & React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & VariantProps<typeof button>;
9
9
  declare const Button: FC<ButtonProps>;
10
10
  declare const button: (props?: ({
11
- size?: "large" | "medium" | "small" | undefined;
11
+ size?: "small" | "large" | "medium" | undefined;
12
12
  variant?: "link" | "contained" | "outlined" | "ghost" | "standard" | undefined;
13
13
  loading?: boolean | undefined;
14
14
  } & ({
package/dist/chip-status.d.mts CHANGED
@@ -3,7 +3,7 @@ import { FC, HTMLAttributes } from 'react';
3
3
 
4
4
  declare const chipStatus: (props?: ({
5
5
  variant?: "success" | "info" | "warning" | "error" | undefined;
6
- size?: "sm" | "md" | "xs" | undefined;
6
+ size?: "xs" | "sm" | "md" | undefined;
7
7
  } & ({
8
8
  class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
9
9
  [x: string]: any;
package/dist/chunk-V2LMCQ4I.mjs ADDED
@@ -0,0 +1,192 @@
1
+ import { rows_per_page_select_default } from './chunk-O5QOPJOD.mjs';
2
+ import { ScrollArea, ScrollBar } from './chunk-ZVOUAD54.mjs';
3
+ import { cn } from './chunk-P3UP2HUA.mjs';
4
+ import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
5
+ import { ChevronLeftIcon, ChevronRightIcon } from './chunk-ERH7LWVL.mjs';
6
+ import { __toESM } from './chunk-PLJ6ZHAI.mjs';
7
+ import { useReactTable, getCoreRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
8
+
9
+ var import_jsx_runtime = __toESM(require_jsx_runtime());
10
+ function DataTable({
11
+ columns,
12
+ data,
13
+ rowsCount,
14
+ pagination,
15
+ onPaginationChange,
16
+ noResults,
17
+ rowsPerPageText = "Rows per page",
18
+ ofText = "of",
19
+ className,
20
+ ...props
21
+ }) {
22
+ const table = useReactTable({
23
+ data,
24
+ columns,
25
+ rowCount: rowsCount,
26
+ state: { pagination },
27
+ onPaginationChange,
28
+ manualPagination: true,
29
+ getCoreRowModel: getCoreRowModel(),
30
+ getPaginationRowModel: getPaginationRowModel()
31
+ });
32
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
33
+ "div",
34
+ {
35
+ className: cn(
36
+ "flex flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-50",
37
+ className
38
+ ),
39
+ ...props,
40
+ children: [
41
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ScrollArea, { children: [
42
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, { orientation: "horizontal" }),
43
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
44
+ "table",
45
+ {
46
+ cellPadding: 0,
47
+ cellSpacing: 0,
48
+ className: "w-full table-auto overflow-hidden text-neutral-900",
49
+ children: [
50
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("colgroup", { children: table.getHeaderGroups()[0].headers.map((header) => {
51
+ const width = header.column.getSize() / table.getHeaderGroups()[0].headers.reduce((acc, curr) => acc + curr.getSize(), 0) * 100;
52
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
+ "col",
54
+ {
55
+ span: 1,
56
+ style: {
57
+ width: `${width}%`
58
+ }
59
+ },
60
+ header.id
61
+ );
62
+ }) }),
63
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: "bg-neutral-100", children: headerGroup.headers.map((header) => {
64
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
65
+ "th",
66
+ {
67
+ className: "h-14 px-4 py-3 text-left text-sm font-semibold uppercase leading-[120%] tracking-sm",
68
+ children: header.isPlaceholder ? null : flexRender(
69
+ header.column.columnDef.header,
70
+ header.getContext()
71
+ )
72
+ },
73
+ header.id
74
+ );
75
+ }) }, headerGroup.id)) }),
76
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
77
+ "tr",
78
+ {
79
+ "data-state": row.getIsSelected() && "selected",
80
+ className: "text-base font-normal leading-[130%] tracking-body",
81
+ children: row.getVisibleCells().map((cell) => {
82
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: cn("p-4"), children: flexRender(
83
+ cell.column.columnDef.cell,
84
+ cell.getContext()
85
+ ) }, cell.id);
86
+ })
87
+ },
88
+ row.id
89
+ )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
90
+ "div",
91
+ {
92
+ className: "flex flex-col items-center justify-center px-10 pb-12 pt-10 font-normal leading-[120%] tracking-body-lg text-neutral-500",
93
+ children: [
94
+ noResults.icon,
95
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-2 text-lg text-neutral-500", children: noResults.title }),
96
+ noResults.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-neutral-500", children: noResults.description })
97
+ ]
98
+ }
99
+ ) }) }) })
100
+ ]
101
+ }
102
+ )
103
+ ] }),
104
+ pagination && onPaginationChange && !!rowsCount && data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
105
+ "div",
106
+ {
107
+ className: "mx-6 ml-auto flex h-8 items-center justify-end gap-6 border-t-1 border-t-neutral-200",
108
+ children: [
109
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
110
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
111
+ "span",
112
+ {
113
+ className: "mr-2 text-sm font-semibold leading-[120%] tracking-sm text-neutral-700",
114
+ children: `${rowsPerPageText}:`
115
+ }
116
+ ),
117
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
+ rows_per_page_select_default,
119
+ {
120
+ value: "10",
121
+ onRowsPerPageChange: (value) => {
122
+ table.setPageSize(Number(value));
123
+ table.setPageIndex(0);
124
+ }
125
+ }
126
+ )
127
+ ] }),
128
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
129
+ "span",
130
+ {
131
+ className: "text-sm font-normal leading-[120%] tracking-sm text-neutral-900",
132
+ children: `${pagination?.pageIndex * pagination.pageSize + 1}-${rowsCount > pagination?.pageIndex * pagination.pageSize + pagination.pageSize ? pagination?.pageIndex * pagination.pageSize + pagination.pageSize : rowsCount} ${ofText} ${rowsCount}`
133
+ }
134
+ ),
135
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
136
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
+ "div",
138
+ {
139
+ className: cn(
140
+ "flex h-8 items-center px-3",
141
+ table.getCanPreviousPage() ? "cursor-pointer" : "cursor-not-allowed"
142
+ ),
143
+ onClick: () => {
144
+ if (table.getCanPreviousPage()) {
145
+ table.previousPage();
146
+ }
147
+ },
148
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
149
+ ChevronLeftIcon,
150
+ {
151
+ className: cn(
152
+ "h-[1.125rem] w-[1.125rem]",
153
+ table.getCanPreviousPage() ? "text-neutral-900" : "text-neutral-500"
154
+ )
155
+ }
156
+ )
157
+ }
158
+ ),
159
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
160
+ "div",
161
+ {
162
+ className: cn(
163
+ "flex h-8 items-center px-3",
164
+ table.getCanNextPage() ? "cursor-pointer" : "cursor-not-allowed"
165
+ ),
166
+ onClick: () => {
167
+ if (table.getCanNextPage()) {
168
+ table.nextPage();
169
+ }
170
+ },
171
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
172
+ ChevronRightIcon,
173
+ {
174
+ className: cn(
175
+ "h-[1.125rem] w-[1.125rem]",
176
+ table.getCanNextPage() ? "text-neutral-900" : "text-neutral-500"
177
+ )
178
+ }
179
+ )
180
+ }
181
+ )
182
+ ] })
183
+ ]
184
+ }
185
+ )
186
+ ]
187
+ }
188
+ );
189
+ }
190
+ var data_table_default = DataTable;
191
+
192
+ export { DataTable, data_table_default };
package/dist/data-table.d.mts CHANGED
@@ -21,4 +21,4 @@ interface DataTableProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {
21
21
  }
22
22
  declare function DataTable<TData, TValue>({ columns, data, rowsCount, pagination, onPaginationChange, noResults, rowsPerPageText, ofText, className, ...props }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
23
23
 
24
- export { DataTable, DataTable as default };
24
+ export { DataTable, type DataTableProps, DataTable as default };
package/dist/data-table.mjs CHANGED
@@ -1,192 +1,7 @@
1
- import { rows_per_page_select_default } from './chunk-O5QOPJOD.mjs';
2
- import { ScrollArea, ScrollBar } from './chunk-ZVOUAD54.mjs';
3
- import { cn } from './chunk-P3UP2HUA.mjs';
4
- import { require_jsx_runtime } from './chunk-2MWIFYP3.mjs';
5
- import { ChevronLeftIcon, ChevronRightIcon } from './chunk-ERH7LWVL.mjs';
6
- import { __toESM } from './chunk-PLJ6ZHAI.mjs';
7
- import { useReactTable, getCoreRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
8
-
9
- var import_jsx_runtime = __toESM(require_jsx_runtime());
10
- function DataTable({
11
- columns,
12
- data,
13
- rowsCount,
14
- pagination,
15
- onPaginationChange,
16
- noResults,
17
- rowsPerPageText = "Rows per page",
18
- ofText = "of",
19
- className,
20
- ...props
21
- }) {
22
- const table = useReactTable({
23
- data,
24
- columns,
25
- rowCount: rowsCount,
26
- state: { pagination },
27
- onPaginationChange,
28
- manualPagination: true,
29
- getCoreRowModel: getCoreRowModel(),
30
- getPaginationRowModel: getPaginationRowModel()
31
- });
32
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
33
- "div",
34
- {
35
- className: cn(
36
- "flex flex-col overflow-hidden rounded-2xl border border-neutral-200 bg-neutral-50",
37
- className
38
- ),
39
- ...props,
40
- children: [
41
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ScrollArea, { children: [
42
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, { orientation: "horizontal" }),
43
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
44
- "table",
45
- {
46
- cellPadding: 0,
47
- cellSpacing: 0,
48
- className: "w-full table-auto overflow-hidden text-neutral-900",
49
- children: [
50
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("colgroup", { children: table.getHeaderGroups()[0].headers.map((header) => {
51
- const width = header.column.getSize() / table.getHeaderGroups()[0].headers.reduce((acc, curr) => acc + curr.getSize(), 0) * 100;
52
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
53
- "col",
54
- {
55
- span: 1,
56
- style: {
57
- width: `${width}%`
58
- }
59
- },
60
- header.id
61
- );
62
- }) }),
63
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { className: "bg-neutral-100", children: headerGroup.headers.map((header) => {
64
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
65
- "th",
66
- {
67
- className: "h-14 px-4 py-3 text-left text-sm font-semibold uppercase leading-[120%] tracking-sm",
68
- children: header.isPlaceholder ? null : flexRender(
69
- header.column.columnDef.header,
70
- header.getContext()
71
- )
72
- },
73
- header.id
74
- );
75
- }) }, headerGroup.id)) }),
76
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
77
- "tr",
78
- {
79
- "data-state": row.getIsSelected() && "selected",
80
- className: "text-base font-normal leading-[130%] tracking-body",
81
- children: row.getVisibleCells().map((cell) => {
82
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: cn("p-4"), children: flexRender(
83
- cell.column.columnDef.cell,
84
- cell.getContext()
85
- ) }, cell.id);
86
- })
87
- },
88
- row.id
89
- )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { colSpan: columns.length, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
90
- "div",
91
- {
92
- className: "flex flex-col items-center justify-center px-10 pb-12 pt-10 font-normal leading-[120%] tracking-body-lg text-neutral-500",
93
- children: [
94
- noResults.icon,
95
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-2 text-lg text-neutral-500", children: noResults.title }),
96
- noResults.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-neutral-500", children: noResults.description })
97
- ]
98
- }
99
- ) }) }) })
100
- ]
101
- }
102
- )
103
- ] }),
104
- pagination && onPaginationChange && !!rowsCount && data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
105
- "div",
106
- {
107
- className: "mx-6 ml-auto flex h-8 items-center justify-end gap-6 border-t-1 border-t-neutral-200",
108
- children: [
109
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
110
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
111
- "span",
112
- {
113
- className: "mr-2 text-sm font-semibold leading-[120%] tracking-sm text-neutral-700",
114
- children: `${rowsPerPageText}:`
115
- }
116
- ),
117
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
118
- rows_per_page_select_default,
119
- {
120
- value: "10",
121
- onRowsPerPageChange: (value) => {
122
- table.setPageSize(Number(value));
123
- table.setPageIndex(0);
124
- }
125
- }
126
- )
127
- ] }),
128
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
129
- "span",
130
- {
131
- className: "text-sm font-normal leading-[120%] tracking-sm text-neutral-900",
132
- children: `${pagination?.pageIndex * pagination.pageSize + 1}-${rowsCount > pagination?.pageIndex * pagination.pageSize + pagination.pageSize ? pagination?.pageIndex * pagination.pageSize + pagination.pageSize : rowsCount} ${ofText} ${rowsCount}`
133
- }
134
- ),
135
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center", children: [
136
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
137
- "div",
138
- {
139
- className: cn(
140
- "flex h-8 items-center px-3",
141
- table.getCanPreviousPage() ? "cursor-pointer" : "cursor-not-allowed"
142
- ),
143
- onClick: () => {
144
- if (table.getCanPreviousPage()) {
145
- table.previousPage();
146
- }
147
- },
148
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
149
- ChevronLeftIcon,
150
- {
151
- className: cn(
152
- "h-[1.125rem] w-[1.125rem]",
153
- table.getCanPreviousPage() ? "text-neutral-900" : "text-neutral-500"
154
- )
155
- }
156
- )
157
- }
158
- ),
159
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
160
- "div",
161
- {
162
- className: cn(
163
- "flex h-8 items-center px-3",
164
- table.getCanNextPage() ? "cursor-pointer" : "cursor-not-allowed"
165
- ),
166
- onClick: () => {
167
- if (table.getCanNextPage()) {
168
- table.nextPage();
169
- }
170
- },
171
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
172
- ChevronRightIcon,
173
- {
174
- className: cn(
175
- "h-[1.125rem] w-[1.125rem]",
176
- table.getCanNextPage() ? "text-neutral-900" : "text-neutral-500"
177
- )
178
- }
179
- )
180
- }
181
- )
182
- ] })
183
- ]
184
- }
185
- )
186
- ]
187
- }
188
- );
189
- }
190
- var data_table_default = DataTable;
191
-
192
- export { DataTable, data_table_default as default };
1
+ export { DataTable, data_table_default as default } from './chunk-V2LMCQ4I.mjs';
2
+ import './chunk-O5QOPJOD.mjs';
3
+ import './chunk-ZVOUAD54.mjs';
4
+ import './chunk-P3UP2HUA.mjs';
5
+ import './chunk-2MWIFYP3.mjs';
6
+ import './chunk-ERH7LWVL.mjs';
7
+ import './chunk-PLJ6ZHAI.mjs';
package/dist/icon-button.d.mts CHANGED
@@ -6,7 +6,7 @@ type IconButtonProps = {
6
6
  } & VariantProps<typeof iconButton> & React__default.DetailedHTMLProps<React__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
7
7
  declare const iconButton: (props?: ({
8
8
  variant?: "contained" | "outlined" | "ghost" | "standard" | undefined;
9
- size?: "large" | "medium" | "small" | undefined;
9
+ size?: "small" | "large" | "medium" | undefined;
10
10
  } & ({
11
11
  class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
12
12
  [x: string]: any;
package/dist/index.d.mts CHANGED
@@ -7,8 +7,13 @@ export { TextField } from './text-field.mjs';
7
7
  export { Spinner } from './spinner.mjs';
8
8
  export { ChipForm } from './chip-form.mjs';
9
9
  export { ChipStatus } from './chip-status.mjs';
10
+ export { ScrollArea, ScrollBar } from './scrollarea.mjs';
11
+ export { default as DataTable, DataTableProps } from './data-table.mjs';
10
12
  import 'react';
11
13
  import 'cva';
12
14
  import '@radix-ui/react-tooltip';
13
15
  import '@radix-ui/react-tabs';
14
16
  import 'lucide-react';
17
+ import '@radix-ui/react-scroll-area';
18
+ import 'react/jsx-runtime';
19
+ import '@tanstack/react-table';
package/dist/index.mjs CHANGED
@@ -6,6 +6,9 @@ export { Alert } from './chunk-XDQ2Y2UR.mjs';
6
6
  export { Button } from './chunk-4YE5CU7E.mjs';
7
7
  export { ChipForm } from './chunk-RZ2JP5UH.mjs';
8
8
  export { ChipStatus } from './chunk-WSAW6L2X.mjs';
9
+ export { DataTable } from './chunk-V2LMCQ4I.mjs';
10
+ import './chunk-O5QOPJOD.mjs';
11
+ export { ScrollArea, ScrollBar } from './chunk-ZVOUAD54.mjs';
9
12
  import './chunk-P3UP2HUA.mjs';
10
13
  export { IconButton } from './chunk-JVSF3AX2.mjs';
11
14
  import './chunk-2MWIFYP3.mjs';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sodtrack-web-ui",
3
- "version": "0.9.0",
3
+ "version": "0.9.2",
4
4
  "description": "UI components for Sodtrack Web",
5
5
  "exports": {
6
6
  "./dist/index.css": "./dist/index.css",