pixelize-design-library 1.1.94 → 2.0.1

package/dist/Components/Table/Components/TableBody.js

@@ -33,11 +33,11 @@ var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var TableLoading_1 = require("./TableLoading");
 var TableActions_1 = __importDefault(require("./TableActions"));
 var lucide_react_1 = require("lucide-react");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableBody = function (_a) {
-    var _b;
-    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, startRow = _a.startRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections, isLoading = _a.isLoading, onRowClick = _a.onRowClick, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _c = (0, react_2.useState)(new Set()), expandedRows = _c[0], setExpandedRows = _c[1];
+    var _b = (0, react_2.useState)(new Set()), expandedRows = _b[0], setExpandedRows = _b[1];
     var toggleRowExpansion = function (rowIndex) {
         setExpandedRows(function (prev) {
             var newSet = new Set(prev);
@@ -54,27 +54,21 @@ var TableBody = function (_a) {
         onRowClick && onRowClick(row, header);
     };
     var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
-        var _b;
+        var _b, _c, _d, _e, _f;
         var row = _a.row, isChecked = _a.isChecked;
-        return (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
-            react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked, _hover: { transform: "scale(1.1)" } })));
-    }, [
-        freezedBgColor,
-        freezedTextColor,
-        handleCheckbox,
-        noBorders,
-        (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
-    ]);
+        return (react_2.default.createElement(react_1.Td, { w: "6", fontSize: 14, fontWeight: 600, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], textTransform: "capitalize", backgroundColor: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50], position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" },
+            react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", onChange: function () { return handleCheckbox(row.id); }, isChecked: isChecked })));
+    }, [handleCheckbox, noBorders, theme.colors]);
     var RenderContent = (0, react_2.useCallback)(function (_a) {
-        var _b, _c;
+        var _b, _c, _d, _e;
         var isExpanded = _a.isExpanded, rowIndex = _a.rowIndex, isContent = _a.isContent;
-        return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: freezedBgColor, color: freezedTextColor, position: "sticky", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
-    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors.gray]);
+        return (react_2.default.createElement(react_1.Td, { w: "6", p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: "sticky", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", left: 0, zIndex: 1, className: "columns sticky-columns" }, isContent && (react_2.default.createElement(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], icon: isExpanded ? (react_2.default.createElement(lucide_react_1.ChevronDown, { fontSize: 16 })) : (react_2.default.createElement(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: function () { return toggleRowExpansion(rowIndex); }, variant: "ghost" }))));
+    }, [freezedTextColor, noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function (_a) {
-        var _b;
-        var row = _a.row, bgcolor = _a.bgcolor;
-        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: isActionFreeze ? freezedBgColor : bgcolor, color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))));
-    }, [freezedBgColor, freezedTextColor, noBorders, theme.colors, isActionFreeze]);
+        var _b, _c, _d;
+        var row = _a.row;
+        return (react_2.default.createElement(react_1.Td, { w: 2, p: 0, fontSize: 14, backgroundColor: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.border[500]), boxSizing: "border-box", right: 0, zIndex: 1, className: "columns sticky-columns".concat(isActionFreeze ? "-right" : "") }, (row.onLink || row.onEdit || row.onDelete) && (react_2.default.createElement(TableActions_1.default, { row: row }))));
+    }, [freezedTextColor, noBorders, theme.colors, isActionFreeze]);
     var totalVisibleColumns = Object.values(columns).filter(function (o) { return !o.isHidden; }).length +
         (isCheckbox ? 1 : 0) +
         (isContent ? 1 : 0) +
@@ -93,23 +87,22 @@ var TableBody = function (_a) {
         var rowIndex = startRow + index;
         var isExpanded = expandedRows.has(rowIndex);
         var isChecked = selections.includes(row.id);
-        var freezeViewColor = index % 2 === 1 ? theme.colors.backgroundColor.light : "white";
         return (react_2.default.createElement(react_2.default.Fragment, { key: rowIndex },
             react_2.default.createElement(react_1.Tr, { key: index + 1, sx: isChecked
                     ? {
                         "& td": {
-                            backgroundColor: theme.colors.gray[100],
+                            backgroundColor: theme.colors.disabled[100],
                         },
                     }
                     : {} },
                 isContent && (react_2.default.createElement(RenderContent, { rowIndex: rowIndex, isExpanded: isExpanded, isContent: !!((_a = row === null || row === void 0 ? void 0 : row.content) === null || _a === void 0 ? void 0 : _a.call(row)) })),
                 isCheckbox && react_2.default.createElement(RenderCheckbox, { row: row, isChecked: isChecked }),
                 columns.map(function (header, headerIndex) {
-                    var _a, _b;
+                    var _a, _b, _c, _d, _e, _f, _g;
                     if (header.isHidden)
                         return null;
                     var isFrozen = header.isFreeze;
-                    var _c = (0, table_1.TableCellCalculation)({
+                    var leftOffset = (0, table_1.TableCellCalculation)({
                         isFrozen: isFrozen,
                         columnWidths: columnWidths,
                         headerIndex: headerIndex,
@@ -118,24 +111,24 @@ var TableBody = function (_a) {
                         row: row,
                         freezedBgColor: freezedBgColor,
                         index: index,
-                    }), leftOffset = _c.leftOffset, cellBgColor = _c.cellBgColor, rowBgColor = _c.rowBgColor, cellTextColor = _c.cellTextColor, rowTextColor = _c.rowTextColor;
-                    return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
+                    }).leftOffset;
+                    return (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, height: 45, key: headerIndex + 1, onClick: function () {
                             return !header.node
                                 ? handleRowClick(row, {
                                     label: header.label,
                                     id: header.id,
                                 })
                                 : null;
-                        }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: cellBgColor !== null && cellBgColor !== void 0 ? cellBgColor : rowBgColor, textOverflow: "ellipsis", border: noBorders
+                        }, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
                             ? "none"
-                            : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: cellTextColor !== null && cellTextColor !== void 0 ? cellTextColor : rowTextColor, _hover: ((_b = row.cellStyle) === null || _b === void 0 ? void 0 : _b[header.id]) || row.rowStyle
+                            : "0.063rem solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[isFrozen || isChecked ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d[500], _hover: ((_e = row.cellStyle) === null || _e === void 0 ? void 0 : _e[header.id]) || row.rowStyle
                             ? {}
                             : {
-                                backgroundColor: theme.colors.gray[100],
+                                backgroundColor: (_g = (_f = theme.colors.secondary) === null || _f === void 0 ? void 0 : _f.opacity) === null || _g === void 0 ? void 0 : _g[4],
                             } },
                         react_2.default.createElement(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word" }, header.node ? header.node(row) : row[header.id])));
                 }),
-                isLink && react_2.default.createElement(RenderView, { row: row, bgcolor: freezeViewColor })),
+                isLink && react_2.default.createElement(RenderView, { row: row })),
             row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
                 react_2.default.createElement(react_1.Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +

package/dist/Components/Table/Components/TableHeader.js

@@ -43,42 +43,30 @@ var table_1 = require("../../../Utils/table");
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var TableFilters_1 = __importDefault(require("./TableFilters"));
 var lucide_react_1 = require("lucide-react");
+var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableHeader = function (_a) {
-    var _b;
     var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var RenderCheckbox = (0, react_2.useCallback)(function () {
-        var _a;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
-            react_2.default.createElement(react_1.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate", _hover: { transform: "scale(1.1)" } })));
+        var _a, _b, _c, _d;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+            react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })));
     }, [
         checked,
-        freezedBgColor,
         freezedTextColor,
         handleCheckbox,
         isLoading,
         noBorders,
-        (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray,
+        theme.colors,
     ]);
     var RenderConent = (0, react_2.useCallback)(function () {
-        var _a;
-        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: freezedBgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
-            react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
-                react_2.default.createElement(lucide_react_1.FolderGit2, { size: 17 }))));
-    }, [freezedBgColor, noBorders, theme.colors.gray]);
+        var _a, _b, _c, _d;
+        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
+    }, [noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function () {
-        var _a;
-        var BgColor = isActionFreeze ? freezedBgColor : headerBgColor;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: BgColor, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
-            react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "center" },
-                react_2.default.createElement(lucide_react_1.FileSymlink, { size: 17 }))));
-    }, [
-        freezedBgColor,
-        noBorders,
-        theme.colors.gray,
-        headerBgColor,
-        isActionFreeze,
-    ]);
+        var _a, _b, _c, _d;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
+    }, [noBorders, theme.colors, isActionFreeze]);
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),
         isCheckbox && react_2.default.createElement(RenderCheckbox, null),
@@ -99,9 +87,9 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
         sortState === "desc" && react_2.default.createElement(lucide_react_1.ChevronDown, { color: "black", size: 14 })));
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
-    var _b;
-    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort;
-    var _c = (0, react_2.useState)(false), isHovered = _c[0], setIsHovered = _c[1];
+    var _b, _c, _d, _e, _f, _g;
+    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort;
+    var _h = (0, react_2.useState)(false), isHovered = _h[0], setIsHovered = _h[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;
     var leftOffset = isFrozen
@@ -110,8 +98,7 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
     var isSorting = header.isSort
         ? columnsSort.find(function (o) { return o.column === header.id; })
         : undefined;
-    var BgColor = isFrozen ? freezedBgColor : headerBgColor;
-    var TextColor = isFrozen ? freezedTextColor : headerTextColor;
+    // const TextColor = isFrozen ? freezedTextColor : headerTextColor;
     var handleMouseDown = function (e) {
         var parentBox = e.target
             .parentElement;
@@ -145,8 +132,8 @@ var ColumnHeader = (0, react_2.memo)(function (_a) {
     }, [handleSort]);
     var isFiltersEnabled = (isHovered && header.isSort) ||
         ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) && isSorting.direction !== "none");
-    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", color: TextColor, fontSize: 14, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: BgColor, maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, border: noBorders ? "none" : "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 41, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
-        react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center", position: "relative" },
+    return (react_2.default.createElement(react_1.Th, { key: index + 1, ref: function (el) { return (headerRefs.current[index] = el); }, textTransform: "capitalize", fontSize: 16, fontWeight: 600, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, minWidth: 120, backgroundColor: (_d = (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.table) === null || _c === void 0 ? void 0 : _c.hover) === null || _d === void 0 ? void 0 : _d[600], maxWidth: 500, zIndex: isFrozen ? 2 : 1, py: 2, pr: 0, borderY: noBorders ? "none" : "0.063rem solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.border[500]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), height: 45, onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
+        react_2.default.createElement(react_1.Box, { display: "flex", color: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.secondary) === null || _g === void 0 ? void 0 : _g[500], lineHeight: "1.25rem", justifyContent: "space-between", alignItems: "center", position: "relative" },
             react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
             react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center" },
                 isFiltersEnabled && (react_2.default.createElement(Sorting, { isSorting: isSorting, header: header })),

package/dist/Components/Table/Components/TableSearch.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface TableSearchProps {
+    onSearch?: (value: string) => void;
+}
+declare const TableSearch: React.FC<TableSearchProps>;
+export default TableSearch;

package/dist/Components/Table/Components/TableSearch.js

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var table_1 = require("../../../Utils/table");
+var TableSearch = function (_a) {
+    var _b, _c, _d, _e;
+    var onSearch = _a.onSearch;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _f = (0, react_1.useState)(false), showInput = _f[0], setShowInput = _f[1];
+    var _g = (0, react_1.useState)(""), query = _g[0], setQuery = _g[1];
+    var handleSearchClick = function () {
+        setShowInput(function (prev) { return !prev; });
+        if (showInput) {
+            setQuery("");
+            if (query)
+                onSearch === null || onSearch === void 0 ? void 0 : onSearch(""); // clear search on close
+        }
+    };
+    var handleDebounce = (0, table_1.useDebounce)(function (value) {
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+    }, 700);
+    var handleInputChange = function (e) {
+        var value = e.target.value;
+        setQuery(value);
+        handleDebounce(value);
+    };
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: "2" },
+        !showInput && (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 5, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500], onClick: handleSearchClick })),
+        showInput ? (react_1.default.createElement(react_2.InputGroup, { maxW: "12.5rem", transition: "all 0.3s ease" },
+            react_1.default.createElement(react_2.Input, { placeholder: "Search...", value: query, onChange: handleInputChange, size: "sm", borderRadius: "md", borderColor: (_c = colors === null || colors === void 0 ? void 0 : colors.border) === null || _c === void 0 ? void 0 : _c[500], _focus: { borderColor: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500] }, autoFocus: true }),
+            react_1.default.createElement(react_2.InputRightElement, { display: "flex", alignItems: "center", height: "2rem" },
+                react_1.default.createElement(react_2.Icon, { as: lucide_react_1.X, color: (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[500], cursor: "pointer", onClick: handleSearchClick })))) : null));
+};
+exports.default = TableSearch;

package/dist/Components/Table/Components/useTable.d.ts

@@ -41,5 +41,6 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
     columnsList: TableHeaderProps[];
     handleColumnPreferences: (columns: any) => void;
+    handleGlobalSearch: (query: string) => void;
 };
 export default useTable;

package/dist/Components/Table/Components/useTable.js

@@ -136,6 +136,11 @@ var useTable = function (_a) {
         savePreferences &&
             savePreferences(__assign(__assign({}, tablePreferences), { columns: columns }));
     };
+    var handleGlobalSearch = function (query) {
+        if (!query)
+            setFilteredData(tableData);
+        setFilteredData((0, table_1.globalSearchFilter)(tableData, query));
+    };
     return {
         tableData: tableData,
         tableContainerStyles: tableContainerStyles,
@@ -157,6 +162,7 @@ var useTable = function (_a) {
         setCurrentPage: setCurrentPage,
         columnsList: columnsList,
         handleColumnPreferences: handleColumnPreferences,
+        handleGlobalSearch: handleGlobalSearch,
     };
 };
 exports.default = useTable;

package/dist/Components/Table/Table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableProps } from "./TableProps";
 import "./Table.css";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -38,19 +38,22 @@ require("./Table.css");
 var table_1 = require("../../Utils/table");
 var usePreferences_1 = require("../../Hooks/usePreferences");
 var TableSettings_1 = __importDefault(require("./TableSettings/TableSettings"));
+var HeaderActions_1 = __importDefault(require("./Components/HeaderActions"));
+var Divider_1 = __importDefault(require("../Divider/Divider"));
+var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
 function Table(_a) {
-    var _b, _c, _d;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _e = _a.isCheckbox, isCheckbox = _e === void 0 ? false : _e, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _f = _a.noBorders, noBorders = _f === void 0 ? false : _f, _g = _a.isPagination, isPagination = _g === void 0 ? true : _g, onRowClick = _a.onRowClick, selections = _a.selections, _h = _a.isActionFreeze, isActionFreeze = _h === void 0 ? true : _h, _j = _a.preferencesUrl, preferencesUrl = _j === void 0 ? "" : _j, _k = _a.preferencesKey, preferencesKey = _k === void 0 ? "" : _k, _l = _a.preferencesName, preferencesName = _l === void 0 ? "" : _l, _m = _a.preferencesPage, preferencesPage = _m === void 0 ? "" : _m, _o = _a.authToken, authToken = _o === void 0 ? "" : _o, _p = _a.paginationMode, paginationMode = _p === void 0 ? "client" : _p, _q = _a.noOfRowsPerPage, noOfRowsPerPage = _q === void 0 ? 50 : _q, _r = _a.totalRecords, totalRecords = _r === void 0 ? 0 : _r, onPagination = _a.onPagination, _s = _a.isTableSettings, isTableSettings = _s === void 0 ? false : _s;
+    var _b, _c, _d, _e, _f, _g;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _t = (0, react_1.useState)({}), columnsSearch = _t[0], setColumnsSearch = _t[1];
+    var _w = (0, react_1.useState)({}), columnsSearch = _w[0], setColumnsSearch = _w[1];
     var isServerPagination = paginationMode === "server";
-    var _u = (0, usePreferences_1.useGetPreferences)({
+    var _x = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferencesUrl,
         page: preferencesPage,
         key: preferencesKey,
         name: preferencesName,
         authToken: authToken,
-    }), preferences = _u.preferences, loading = _u.loading;
+    }), preferences = _x.preferences, loading = _x.loading;
     var savePreferences = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferencesUrl,
         page: preferencesPage,
@@ -67,7 +70,7 @@ function Table(_a) {
         }
         return {};
     }, [preferences]);
-    var _v = (0, useTable_1.default)({
+    var _y = (0, useTable_1.default)({
         tableBorderColor: tableBorderColor,
         data: data,
         isPagination: isPagination,
@@ -79,7 +82,7 @@ function Table(_a) {
         noOfRowsPerPage: noOfRowsPerPage,
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
-    }), tableData = _v.tableData, tableContainerStyles = _v.tableContainerStyles, isContent = _v.isContent, isLink = _v.isLink, headerRefs = _v.headerRefs, columnWidths = _v.columnWidths, handleSort = _v.handleSort, handleCheckbox = _v.handleCheckbox, filteredData = _v.filteredData, startRow = _v.startRow, endRow = _v.endRow, selection = _v.selection, columnsSort = _v.columnsSort, currentPage = _v.currentPage, pages = _v.pages, rowsPerPage = _v.rowsPerPage, handlePageSizeChange = _v.handlePageSizeChange, setCurrentPage = _v.setCurrentPage, columnsList = _v.columnsList, handleColumnPreferences = _v.handleColumnPreferences;
+    }), tableData = _y.tableData, isContent = _y.isContent, isLink = _y.isLink, headerRefs = _y.headerRefs, columnWidths = _y.columnWidths, handleSort = _y.handleSort, handleCheckbox = _y.handleCheckbox, filteredData = _y.filteredData, startRow = _y.startRow, endRow = _y.endRow, selection = _y.selection, columnsSort = _y.columnsSort, currentPage = _y.currentPage, pages = _y.pages, rowsPerPage = _y.rowsPerPage, handlePageSizeChange = _y.handlePageSizeChange, setCurrentPage = _y.setCurrentPage, columnsList = _y.columnsList, handleColumnPreferences = _y.handleColumnPreferences, handleGlobalSearch = _y.handleGlobalSearch;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -88,18 +91,27 @@ function Table(_a) {
             onPagination(currentPage + 1, noOfRowsPerPage);
         }
     }, [currentPage, onPagination, noOfRowsPerPage]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        isTableSettings && (react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } })),
-        react_1.default.createElement(react_2.TableContainer, { sx: tableContainerStyles },
+    var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
+    return (react_1.default.createElement(react_2.Box, { bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_d = theme.colors.border) === null || _d === void 0 ? void 0 : _d[500]), borderRadius: 3 },
+        react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: 45, gap: 2 },
+            react_1.default.createElement(TableSearch_1.default, { onSearch: handleGlobalSearch }),
+            isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Divider_1.default, null),
+                react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } }))),
+            selection.length ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Divider_1.default, null),
+                react_1.default.createElement(HeaderActions_1.default, { actions: headerActions, selections: selection }))) : null,
+            (isPagination || isServerPagination) && (react_1.default.createElement(react_2.Box, { ml: "auto" },
+                react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, isVisiblity: true })))),
+        react_1.default.createElement(react_2.TableContainer, { maxH: 500, overflowY: "auto" },
             react_1.default.createElement(react_3.Table, { variant: "simple", size: "sm", overflowX: "scroll", minW: "100%", className: "table_wrapper" },
                 react_1.default.createElement(react_3.Thead, { position: "sticky", top: -0.5, zIndex: 2 },
-                    react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
+                    react_1.default.createElement(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, headerTextColor: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600], freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: tableData.length !== 0 && selection.length === tableData.length
                             ? true
                             : selection.length === 0
                                 ? false
                                 : "indeterminate", isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch })),
                 react_1.default.createElement(react_3.Tbody, null,
-                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze })))),
-        (isPagination || isServerPagination) && (react_1.default.createElement(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: "".concat(startRow + 1, " to ").concat(endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length), handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, isVisiblity: true }))));
+                    react_1.default.createElement(TableBody_1.default, { data: _filteredData, columns: columnsList, startRow: startRow, endRow: endRow, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze }))))));
 }
 exports.default = Table;

package/dist/Components/Table/TableProps.d.ts

@@ -29,6 +29,22 @@ export type TableProps = {
     totalRecords?: number;
     onPagination?: (page: number, noOfRecords: number) => void;
     isTableSettings?: boolean;
+    headerActions?: HeaderActionsProps;
+};
+export type HeaderActionsProps = {
+    isDelete?: {
+        enabled?: boolean;
+        onClick?: (selection: (string | number)[]) => void;
+    };
+    isUpdate?: {
+        enabled?: boolean;
+        onClick?: (selection: (string | number)[]) => void;
+    };
+    items?: {
+        icon: React.ReactElement;
+        name: string;
+        onClick?: (selection: (string | number)[]) => void;
+    }[];
 };
 export type DataObject = {
     [key: string]: string | number | any;

package/dist/Components/Table/TableSettings/ManageColumns.js

@@ -98,13 +98,9 @@ var ManageColumns = function (_a) {
                 } }),
             react_1.default.createElement(react_2.Text, { ml: "2", fontSize: 14 }, "Select all"))),
         react_1.default.createElement(react_2.List, { spacing: "2" }, filteredItems.length > 0 ? (filteredItems.map(function (item, index) { return (react_1.default.createElement(react_2.ListItem, { key: item.id, draggable: true, onDragStart: function () { return handleDragStart(index); }, onDragOver: function (e) { return handleDragOver(e, index); }, onDragEnd: handleDragEnd, bg: theme.colors.gray[50], display: "flex", alignItems: "center", justifyContent: "space-between", borderRadius: "md", border: "1px solid", borderColor: "gray.200", cursor: "grab", position: "relative", fontSize: 14 },
-            react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "8" }),
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Drag", icon: react_1.default.createElement(lucide_react_1.GripVertical, null), variant: "ghost", cursor: "grab", mr: "1" }),
             react_1.default.createElement(Checkbox_1.default, { isChecked: item.isHidden, onChange: function () { return toggleCheckbox(index); }, sx: {
-                    position: "absolute",
-                    left: 50,
-                    padding: "10px 20px 10px 30px",
-                    width: 60,
-                    translate: "-40px",
+                    marginRight: "4",
                 } }),
             react_1.default.createElement(react_2.Text, { flex: "1" }, item.label))); })) : (react_1.default.createElement(react_2.Text, { color: "gray.500", textAlign: "center" }, "No items found")))));
 };

package/dist/Components/Table/TableSettings/TableSettings.js

@@ -33,15 +33,15 @@ var Button_1 = __importDefault(require("../../Button/Button"));
 var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var TableSettings = function (_a) {
+    var _b, _c;
     var columns = _a.columns, onSave = _a.onSave;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var childInputMethodsRef = (0, react_2.useRef)({});
-    var _b = (0, react_2.useState)(false), settingsOpen = _b[0], setSettingsOpen = _b[1];
-    var _c = (0, react_2.useState)(0), selectedIndex = _c[0], setSelectedIndex = _c[1];
+    var _d = (0, react_2.useState)(false), settingsOpen = _d[0], setSettingsOpen = _d[1];
+    var _e = (0, react_2.useState)(0), selectedIndex = _e[0], setSelectedIndex = _e[1];
     return (react_2.default.createElement(react_1.Box, null,
-        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", mb: 1 },
-            react_2.default.createElement(react_1.IconButton, { onClick: function () { return setSettingsOpen(true); }, "aria-label": "Table Settings", border: "1px solid ".concat(theme.colors.gray[300]) },
-                react_2.default.createElement(lucide_react_1.Settings, { fontSize: 18 }))),
+        react_2.default.createElement(react_1.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer" },
+            react_2.default.createElement(lucide_react_1.Settings, { onClick: function () { return setSettingsOpen(true); }, size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] })),
         react_2.default.createElement(react_1.Modal, { isOpen: settingsOpen, onClose: function () { return setSettingsOpen(false); }, size: "md" },
             react_2.default.createElement(react_1.ModalOverlay, null),
             react_2.default.createElement(react_1.ModalContent, { minW: "700px", minH: "600px" },
@@ -63,7 +63,7 @@ var TableSettings = function (_a) {
                             react_2.default.createElement(react_1.TabPanel, null,
                                 react_2.default.createElement(react_1.Text, null, "Scrollbar settings"))))),
                 react_2.default.createElement(react_1.ModalFooter, null,
-                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, sx: { marginRight: "0.5rem" }, color: "gray" }),
+                    react_2.default.createElement(Button_1.default, { label: "Close", size: "sm", onClick: function () { return setSettingsOpen(false); }, sx: { marginRight: "0.5rem" } }),
                     react_2.default.createElement(Button_1.default, { label: "Save", size: "sm", onClick: function () {
                             var _a, _b, _c;
                             onSave((_c = (_b = (_a = childInputMethodsRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : []);

package/dist/Components/Toggle/TableToggle.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ViewToggleProps } from "./TableToggleProps";
+declare const TableToggle: React.FC<ViewToggleProps>;
+export default TableToggle;

package/dist/Components/Toggle/TableToggle.js

@@ -0,0 +1,57 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var TableToggle = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var styles = {
+        container: {
+            display: "flex",
+            alignItems: "center",
+            bg: theme.colors.background[600],
+            p: "0.125rem",
+            borderRadius: "0.375rem",
+            height: "2rem",
+            gap: "0.125rem",
+            width: "6.3rem",
+        },
+        button: function (mode) { return ({
+            bg: value === mode ? theme.colors.background[50] : "transparent",
+            boxShadow: value === mode ? "md" : "none",
+            color: value === mode ? theme.colors.black : theme.colors.background[800],
+            borderRadius: "0.313rem",
+            height: "1.75rem",
+            border: "0.031rem solid",
+            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            padding: "0.313rem 0.813rem",
+            _hover: {
+                bg: value === mode
+                    ? theme.colors.background[50]
+                    : theme.colors.background[400],
+                color: value === mode ? theme.colors.black : theme.colors.background[900],
+            },
+            transition: "all 0.3s ease-in-out",
+        }); },
+    };
+    return (react_1.default.createElement(react_2.Box, __assign({}, styles.container),
+        react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "Grid View", icon: react_1.default.createElement(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("grid"); } }, styles.button("grid"))),
+        react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "List View", icon: react_1.default.createElement(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("list"); } }, styles.button("list")))));
+};
+exports.default = TableToggle;

package/dist/Components/Toggle/TableToggleProps.d.ts

@@ -0,0 +1,5 @@
+export type ViewMode = "grid" | "list";
+export type ViewToggleProps = {
+    value: ViewMode;
+    onChange: (val: ViewMode) => void;
+};

package/dist/Constants/Sidebar.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlexCss = void 0;
 exports.FlexCss = {
     "&::-webkit-scrollbar": {
-        width: "3px",
+        width: "0.188rem",
     },
     "&::-webkit-scrollbar-track": {
         background: "transparent",
@@ -13,6 +13,29 @@ exports.FlexCss = {
         transition: "background 0.5s",
     },
     "&:hover::-webkit-scrollbar-thumb": {
-        background: "#888",
+        background: "#9A4FE5",
     },
 };
+var cssForScrollBar = function (theme) { return ({
+    "&::-webkit-scrollbar": {
+        width: "0.125rem",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: theme.colors.sidebar.background[500],
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        borderRadius: "0.5rem",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: theme.colors.primary[500],
+    },
+    "&:hover::-webkit-scrollbar-thumb:hover": {
+        background: theme.colors.primary[700],
+    },
+    scrollbarWidth: "none",
+    "&:hover": {
+        scrollbarWidth: "thin",
+        scrollbarColor: "".concat(theme.colors.primary[500], " ").concat(theme.colors.sidebar.background[500]),
+    },
+}); };