@rovula/ui 0.0.11 → 0.0.13

package/dist/cjs/types/components/DataTable/DataTable.d.ts

@@ -1,14 +1,9 @@
-import { ColumnDef } from "@tanstack/react-table";
-export type Payment = {
-    id: string;
-    amount: number;
-    status: "pending" | "processing" | "success" | "failed";
-    email: string;
-};
-export declare const columns: ColumnDef<Payment>[];
-interface DataTableProps<TData, TValue> {
+import { ColumnDef, SortingState } from "@tanstack/react-table";
+export interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
+    manualSorting?: boolean;
+    onSorting?: (sorting: SortingState) => void;
+    fetchMoreData?: () => void;
 }
-export declare function DataTable<TData, TValue>({ columns, data, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function DataTable<TData, TValue>({ data, columns, manualSorting, onSorting, fetchMoreData, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/DataTable/DataTable.stories.d.ts

@@ -10,6 +10,9 @@ declare const meta: {
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         columns: ColumnDef<unknown, unknown>[];
         data: unknown[];
+        manualSorting?: boolean | undefined;
+        onSorting?: ((sorting: import("@tanstack/react-table").SortingState) => void) | undefined;
+        fetchMoreData?: (() => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/cjs/types/components/Table/Table.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<{
+    rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+} & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/cjs/types/components/Table/Table.stories.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+    component: React.ForwardRefExoticComponent<{
+        rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
+    } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined;

package/dist/cjs/types/index.d.ts

@@ -8,10 +8,11 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
+export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
-export type { DropdownProps } from "./components/Dropdown/Dropdown";
+export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/components/DataTable/DataTable.js

@@ -1,32 +1,71 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { flexRender, getCoreRowModel, useReactTable, } from "@tanstack/react-table";
-export var columns = [
-    {
-        accessorKey: "status",
-        header: "Status",
-    },
-    {
-        accessorKey: "email",
-        header: "Email",
-    },
-    {
-        accessorKey: "amount",
-        header: "Amount",
-    },
-];
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table";
+import { flexRender, getCoreRowModel, getFilteredRowModel, 
+// getPaginationRowModel,
+getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { useEffect, useRef, useState } from "react";
+import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ClipboardDocumentListIcon, } from "@heroicons/react/16/solid";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../Table/Table";
 export function DataTable(_a) {
     var _b;
-    var columns = _a.columns, data = _a.data;
+    var data = _a.data, columns = _a.columns, _c = _a.manualSorting, manualSorting = _c === void 0 ? false : _c, onSorting = _a.onSorting, fetchMoreData = _a.fetchMoreData;
+    var tableBodyRef = useRef(null);
+    var _d = useState([]), sorting = _d[0], setSorting = _d[1];
+    var _e = useState([]), columnFilters = _e[0], setColumnFilters = _e[1];
+    var _f = useState({}), columnVisibility = _f[0], setColumnVisibility = _f[1];
+    var _g = useState({}), rowSelection = _g[0], setRowSelection = _g[1];
     var table = useReactTable({
         data: data,
         columns: columns,
+        manualSorting: manualSorting,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
         getCoreRowModel: getCoreRowModel(),
+        // getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            sorting: sorting,
+            columnFilters: columnFilters,
+            columnVisibility: columnVisibility,
+            rowSelection: rowSelection,
+            // pagination: {
+            //   pageSize: 100,
+            //   pageIndex: 0,
+            // },
+        },
     });
-    return (_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map(function (headerGroup) { return (_jsx(TableRow, { children: headerGroup.headers.map(function (header) {
-                            return (_jsx(TableHead, { children: header.isPlaceholder
-                                    ? null
-                                    : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                        }) }, headerGroup.id)); }) }), _jsx(TableBody, { children: ((_b = table.getRowModel().rows) === null || _b === void 0 ? void 0 : _b.length) ? (table.getRowModel().rows.map(function (row) { return (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map(function (cell) { return (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); })) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) })) })] }) }));
+    useEffect(function () {
+        onSorting === null || onSorting === void 0 ? void 0 : onSorting(sorting);
+    }, [sorting, onSorting]);
+    useEffect(function () {
+        var handleScroll = function () {
+            if (tableBodyRef.current) {
+                var _a = tableBodyRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+                if (scrollTop + clientHeight >= scrollHeight - 10) {
+                    fetchMoreData === null || fetchMoreData === void 0 ? void 0 : fetchMoreData();
+                }
+            }
+        };
+        var tableBodyElement = tableBodyRef.current;
+        if (tableBodyElement) {
+            tableBodyElement.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (tableBodyElement) {
+                tableBodyElement.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [fetchMoreData]);
+    var isEmpty = ((_b = table.getRowModel().rows) === null || _b === void 0 ? void 0 : _b.length) === 0;
+    return (_jsx("div", { className: "flex w-full h-full rounded-xl overflow-hidden border border-primary-10", children: _jsxs(Table, { className: isEmpty ? "h-full" : "", rootRef: tableBodyRef, children: [_jsx(TableHeader, { className: "sticky top-0", children: table.getHeaderGroups().map(function (headerGroup) { return (_jsx(TableRow, { className: "", children: headerGroup.headers.map(function (header, i) {
+                            var _a;
+                            return (_jsx(TableHead, { children: _jsxs("div", { className: "flex flex-row items-center cursor-pointer", onClick: header.column.getToggleSortingHandler(), children: [header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext()), (_a = {
+                                            asc: _jsx(ArrowUpIcon, { className: "ml-3 h-4 w-4" }),
+                                            desc: _jsx(ArrowDownIcon, { className: "ml-3 h-4 w-4" }),
+                                        }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : (header.column.getCanSort() ? (_jsx(ArrowsUpDownIcon, { className: "ml-3 h-4 w-4 text-textcolor-grey-light" })) : null)] }) }, header.id));
+                        }) }, headerGroup.id)); }) }), _jsx(TableBody, { className: "overflow-y-scroll", children: !isEmpty ? (table.getRowModel().rows.map(function (row) { return (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", className: "", children: row.getVisibleCells().map(function (cell) { return (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); })) : (_jsx(TableRow, { className: "h-full self-stretch", children: _jsx(TableCell, { colSpan: columns.length, className: "typography-body1 text-textcolor-grey-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3", children: [_jsx(ClipboardDocumentListIcon, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) })] }) }));
 }

package/dist/components/DataTable/DataTable.stories.js

@@ -19,23 +19,13 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+        function (Story) { return (_jsx("div", { className: "p-5 flex flex-1 h-full w-full ", style: { height: "100vh" }, children: _jsx(Story, {}) })); },
     ],
 };
 export default meta;
 var columns = [
     {
         accessorKey: "amount",
-        header: function () { return _jsx("div", { className: "text-right", children: "Amount" }); },
-        cell: function (_a) {
-            var row = _a.row;
-            var amount = parseFloat(row.getValue("amount"));
-            var formatted = new Intl.NumberFormat("en-US", {
-                style: "currency",
-                currency: "USD",
-            }).format(amount);
-            return _jsx("div", { className: "text-right font-medium", children: formatted });
-        },
     },
     {
         accessorKey: "status",
@@ -45,22 +35,23 @@ var columns = [
     },
 ];
 export var Default = {
-    args: {
-    // label: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
-    // fullwidth: true,
-    },
+    args: {},
     render: function (args) {
         console.log("args ", args);
         var props = __assign({}, args);
-        var data = [
-            {
-                id: "728ed52f",
-                amount: 100,
-                status: "pending",
-                email: "m@example.com",
-            },
-        ];
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DataTable, { columns: columns, data: data }) }));
+        var data = new Array(20).fill(0).map(function (__, i) { return ({
+            id: "m5gr84i9",
+            amount: i + 1,
+            status: "success",
+            email: "ken99@yahoo.com",
+            email1: "ken99@yahoo.com",
+            email2: "ken99@yahoo.com",
+            email3: "ken99@yahoo.com",
+        }); });
+        return (_jsx("div", { className: "flex flex-1 h-full flex-row gap-4 w-full", children: _jsx(DataTable, { columns: columns, data: data, onSorting: function (sorting) {
+                    console.log("sorting ", sorting);
+                }, fetchMoreData: function () {
+                    console.log("fetchMoreData");
+                } }) }));
     },
 };

package/dist/components/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef, useCallback, useEffect, useMemo, useState, } from "react";
+import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
@@ -31,6 +31,7 @@ var Dropdown = forwardRef(function (_a, ref) {
     var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
     var _l = useState(null), selectedOption = _l[0], setSelectedOption = _l[1];
     var _m = useState(""), textValue = _m[0], setTextValue = _m[1];
+    var keyCode = useRef("");
     useEffect(function () {
         if (value && !selectedOption) {
             setSelectedOption(value);
@@ -63,6 +64,42 @@ var Dropdown = forwardRef(function (_a, ref) {
                 }
                 return (_jsx("li", { onMouseDown: function () { return handleOptionClick(option); }, className: "px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""), children: option.label }, option.value));
             }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] })); };
-    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({}, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, hasClearIcon: false, size: size, className: customInputVariant({ size: size }), onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) })), isFocused && renderOptions()] }));
+    var handleOnFocus = useCallback(function (e) {
+        var _a;
+        setIsFocused(true);
+        (_a = props === null || props === void 0 ? void 0 : props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [props === null || props === void 0 ? void 0 : props.onFocus]);
+    var clearMismatchValue = useCallback(function (e) {
+        var matchSelectedValue = optionsFiltered.find(function (opt) { var _a, _b; return opt.value === ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || opt.label === ((_b = e.target) === null || _b === void 0 ? void 0 : _b.value); });
+        var isMatchSelectedValue = !!matchSelectedValue;
+        var option = matchSelectedValue || {
+            value: "",
+            label: "",
+        };
+        if (!isMatchSelectedValue && textValue) {
+            option = {
+                value: "",
+                label: "",
+            };
+        }
+        if (keyCode.current === "Enter") {
+            return;
+        }
+        setSelectedOption(option);
+        setTextValue(option.label);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+    }, [optionsFiltered, textValue]);
+    var handleOnBlur = useCallback(function (e) {
+        var _a;
+        setIsFocused(false);
+        clearMismatchValue(e);
+        (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [props === null || props === void 0 ? void 0 : props.onBlur]);
+    var handleOnKeyDown = useCallback(function (e) {
+        var _a;
+        keyCode.current = e.code;
+        (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
+    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({}, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, hasClearIcon: false, size: size, className: customInputVariant({ size: size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) })), isFocused && renderOptions()] }));
 });
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -9,8 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import Dropdown from "./Dropdown";
 import Button from "../Button/Button";
 import { cn } from "@/utils/cn";
@@ -46,9 +55,25 @@ export var Default = {
 };
 var DropdownWithRef = function (props) {
     var inputRef = useRef(null);
-    return (_jsx(Dropdown, __assign({ id: "1", size: "lg" }, props, { ref: inputRef, labelClassName: "peer-focus:bg-red-500", onKeyDown: function (e) {
+    var _a = useState(customOptions), options = _a[0], setOptions = _a[1];
+    var _b = useState({
+        label: "",
+        value: "",
+    }), value = _b[0], setValue = _b[1];
+    var _c = useState(""), text = _c[0], setText = _c[1];
+    return (_jsx(Dropdown, __assign({ id: "1", size: "lg" }, props, { value: value, options: options, ref: inputRef, labelClassName: "peer-focus:bg-red-500", onSelect: setValue, onChangeText: function (e) { return setText(e.target.value); }, onKeyDown: function (e) {
             var _a, _b;
             if (e.code === "Enter") {
+                setOptions(function (options) { return __spreadArray(__spreadArray([], options, true), [
+                    {
+                        label: text,
+                        value: text,
+                    },
+                ], false); });
+                setValue({
+                    label: text,
+                    value: text,
+                });
                 (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         } })));
@@ -63,7 +88,7 @@ export var WithRef = {
     render: function (args) {
         console.log("args ", args);
         var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)), "\\"] }));
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)) }));
     },
 };
 var customOptions = new Array(100).fill("").map(function (__, index) { return ({
@@ -86,6 +111,6 @@ export var CustomOption = {
     render: function (args) {
         console.log("args ", args);
         var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)), "\\"] }));
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)) }));
     },
 };

package/dist/components/Table/Table.js

@@ -24,13 +24,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "@/utils/cn";
 var Table = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom text-sm", className) }, props)) }));
+    var className = _a.className, rootRef = _a.rootRef, props = __rest(_a, ["className", "rootRef"]);
+    return (_jsx("div", { className: "relative h-full w-full overflow-auto", ref: rootRef, children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", className) }, props)) }));
 });
 Table.displayName = "Table";
 var TableHeader = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("thead", __assign({ ref: ref, className: cn("[&_tr]:border-b", className) }, props)));
+    return (_jsx("thead", __assign({ ref: ref, className: cn("[&_tr]:border-b bg-secondary-80", className) }, props)));
 });
 TableHeader.displayName = "TableHeader";
 var TableBody = React.forwardRef(function (_a, ref) {
@@ -45,17 +45,17 @@ var TableFooter = React.forwardRef(function (_a, ref) {
 TableFooter.displayName = "TableFooter";
 var TableRow = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("tr", __assign({ ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className) }, props)));
+    return (_jsx("tr", __assign({ ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-grey-20", className) }, props)));
 });
 TableRow.displayName = "TableRow";
 var TableHead = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("th", __assign({ ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className) }, props)));
+    return (_jsx("th", __assign({ ref: ref, className: cn(" h-12 py-3 px-6 text-left align-middle typography-body2 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
 });
 TableHead.displayName = "TableHead";
 var TableCell = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("td", __assign({ ref: ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className) }, props)));
+    return (_jsx("td", __assign({ ref: ref, className: cn(" py-3 px-6 text-left align-middle  typography-body3 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
 });
 TableCell.displayName = "TableCell";
 var TableCaption = React.forwardRef(function (_a, ref) {

package/dist/esm/bundle.css

@@ -734,6 +734,9 @@ video {
 .relative {
   position: relative;
 }
+.sticky {
+  position: sticky;
+}
 .inset-0 {
   inset: 0px;
 }
@@ -762,6 +765,9 @@ video {
 .right-4 {
   right: 1rem;
 }
+.top-0 {
+  top: 0px;
+}
 .top-4 {
   top: 1rem;
 }
@@ -785,6 +791,9 @@ video {
   margin-top: auto;
   margin-bottom: auto;
 }
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -864,21 +873,24 @@ video {
 .h-12 {
   height: 3rem;
 }
-.h-24 {
-  height: 6rem;
-}
 .h-4 {
   height: 1rem;
 }
 .h-\[54px\] {
   height: 54px;
 }
+.h-full {
+  height: 100%;
+}
 .max-h-60 {
   max-height: 15rem;
 }
 .w-4 {
   width: 1rem;
 }
+.w-8 {
+  width: 2rem;
+}
 .w-\[100px\] {
   width: 100px;
 }
@@ -900,12 +912,18 @@ video {
 .max-w-lg {
   max-width: 32rem;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .shrink-0 {
   flex-shrink: 0;
 }
 .caption-bottom {
   caption-side: bottom;
 }
+.border-collapse {
+  border-collapse: collapse;
+}
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -998,15 +1016,24 @@ video {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.self-stretch {
+  align-self: stretch;
+}
 .overflow-auto {
   overflow: auto;
 }
+.overflow-hidden {
+  overflow: hidden;
+}
 .overflow-x-auto {
   overflow-x: auto;
 }
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1155,6 +1182,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--secondary-110) / var(--tw-bg-opacity));
 }
+.bg-secondary-80 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--secondary-80) / var(--tw-bg-opacity));
+}
 .bg-success {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--success-default) / var(--tw-bg-opacity));
@@ -1245,6 +1276,10 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1451,6 +1486,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(var(--secondary-110) / var(--tw-text-opacity));
 }
+.text-secondary-120 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--secondary-120) / var(--tw-text-opacity));
+}
 .text-secondary-130 {
   --tw-text-opacity: 1;
   color: rgb(var(--secondary-130) / var(--tw-text-opacity));
@@ -1487,6 +1526,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(var(--text-grey-light) / var(--tw-text-opacity));
 }
+.text-textcolor-grey-medium {
+  --tw-text-opacity: 1;
+  color: rgb(var(--text-grey-medium) / var(--tw-text-opacity));
+}
 .text-warning {
   --tw-text-opacity: 1;
   color: rgb(var(--warning-default) / var(--tw-text-opacity));
@@ -1970,6 +2013,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--primary-default) / var(--tw-bg-opacity));
 }
+.data-\[state\=selected\]\:bg-grey-20[data-state=selected] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--grey-20) / var(--tw-bg-opacity));
+}
 .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
   --tw-text-opacity: 1;
   color: rgb(var(--primary-foreground) / var(--tw-text-opacity));
@@ -2006,8 +2053,11 @@ video {
     text-align: left;
   }
 }
-.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
-  padding-right: 0px;
+.\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {
+  width: 1rem;
+}
+.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-4:has([role=checkbox]) {
+  padding-right: 1rem;
 }
 .\[\&\>tr\]\:last\:border-b-0:last-child>tr {
   border-bottom-width: 0px;