pixelize-design-library 1.1.33 → 1.1.35

package/dist/Components/SideBar/SideBar.js

@@ -1,54 +1,72 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var fi_1 = require("react-icons/fi");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Sidebar_1 = require("../../Constants/Sidebar");
 function Sidebar(_a) {
+    var _b, _c;
     var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
-        react_1.default.createElement(react_2.Flex, { pl: toggle ? "22%" : "8%", flexDir: "column", w: "100%", alignItems: "flex-start", as: "nav", h: "100vh" },
-            logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, align: "center" },
-                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo", mr: 3 }),
-                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
-                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
-            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
-                react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: "#ffffff" })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: "#ffffff" })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
-            react_1.default.createElement(react_2.Flex, { mt: 30, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "scroll", css: {
-                    "&::-webkit-scrollbar": {
-                        width: "3px",
-                    },
-                    "&::-webkit-scrollbar-track": {
-                        background: "transparent",
-                    },
-                    "&::-webkit-scrollbar-thumb": {
-                        background: "transparent",
-                        transition: "background 0.5s",
-                    },
-                    "&:hover::-webkit-scrollbar-thumb": {
-                        background: "#888",
-                    },
-                    // scrollbarWidth: "thin",
-                    // scrollbarColor: "transparent transparent",
-                    // "&:hover": {
-                    //  scrollbarColor: "#888 transparent",
-                    // },
-                }, ml: toggle ? "-8px" : "0px" }, menus.map(function (menu) { return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
-                react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title ? theme.colors.primary[500] : "none", borderRadius: 8, _hover: {
+    var RenderMenuItems = (0, react_1.useCallback)(function () {
+        return (react_1.default.createElement(react_1.default.Fragment, null, menus.map(function (menu) {
+            var _a, _b;
+            return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
+                react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title && !toggle
+                        ? theme.colors.primary[500]
+                        : "none", 
+                    // borderRadius={8}
+                    _hover: {
                         textDecor: "none",
-                        backgroundColor: theme.colors.primary[500],
-                        color: "#ffffff",
-                    }, _active: { color: "#ffffff" }, w: "98%", onClick: function () { return handleMenuClick(menu === null || menu === void 0 ? void 0 : menu.title, menu === null || menu === void 0 ? void 0 : menu.url); }, mt: "5px", className: "custom-link", width: toggle ? "80%" : "90%" },
-                    react_1.default.createElement(react_2.MenuButton, { w: "100%", p: "13px 12px 13px 13px" },
-                        react_1.default.createElement(react_2.Flex, null,
-                            react_1.default.createElement(react_2.Icon, { as: menu.icon, fontSize: "xl", color: activeMenu === menu.title ? "#ffff" : "" }),
-                            react_1.default.createElement(react_2.Text, { ml: 5, display: toggle ? "none" : "flex", color: activeMenu === menu.title ? "#ffff" : "" }, menu.title)))),
+                        backgroundColor: !toggle && theme.colors.primary[500],
+                        color: toggle ? (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary[500] : theme.colors.white,
+                    }, _active: { color: theme.colors.white }, w: "98%", onClick: function () { return handleMenuClick(menu === null || menu === void 0 ? void 0 : menu.title, menu === null || menu === void 0 ? void 0 : menu.url); }, mt: "5px", className: "custom-link", width: toggle ? "none" : "100%" },
+                    react_1.default.createElement(react_2.MenuButton, { w: "100%", p: "12px", fontWeight: 700 },
+                        react_1.default.createElement(react_2.Flex, { gap: "10px" },
+                            react_1.default.createElement(react_2.Icon, { as: menu.icon, fontSize: "xl", color: activeMenu === menu.title
+                                    ? toggle
+                                        ? theme.colors.primary["500"]
+                                        : "white"
+                                    : "" }),
+                            react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", color: activeMenu === menu.title ? (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white : "" }, menu.title)))),
                 menu.subMenu && (react_1.default.createElement(react_2.MenuList, { py: 0, border: "none", ml: toggle ? 3 : 6, boxShadow: "0 4px 12px 0 rgba(0, 0, 0, 0.05)" },
                     react_1.default.createElement(react_2.Flex, { pos: "absolute", mt: "calc(100px - 70px)", ml: "-10px", width: 0, height: 0, borderTop: "10px solid transparent", borderBottom: "10px solid transparent", borderRight: "10px solid #3182CE" }),
-                    menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); }))))); })))));
+                    menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); })))));
+        })));
+    }, [activeMenu, menus, handleMenuClick, toggle, theme.colors]);
+    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
+        react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: "center", as: "nav", h: "100vh" },
+            logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, alignItems: "center", gap: 5 },
+                react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo" }),
+                react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
+                react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
+            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
+                react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
+            react_1.default.createElement(react_2.Flex, { mt: 35, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
+                react_1.default.createElement(RenderMenuItems, null)))));
 }
 exports.default = Sidebar;

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

@@ -0,0 +1,15 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
+    visibleColumns: Record<string, boolean>;
+    paginationText: string;
+    handlePageSizeChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    rowsPerPage: number;
+    currentPage: number;
+    pages: number;
+    handleColumnVisibilityChange: (header: string) => void;
+    setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+    dataLength: number;
+};
+declare const Pagination: ({ isVisiblity, columns, visibleColumns, paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, handleColumnVisibilityChange, setCurrentPage, dataLength, }: PaginationProps) => React.JSX.Element;
+export default Pagination;

package/dist/Components/Table/Components/Pagination.js

@@ -0,0 +1,42 @@
+"use strict";
+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 icons_1 = require("@chakra-ui/icons");
+var react_2 = require("@chakra-ui/react");
+var fa_1 = require("react-icons/fa");
+var Pagination = function (_a) {
+    var isVisiblity = _a.isVisiblity, columns = _a.columns, visibleColumns = _a.visibleColumns, paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, handleColumnVisibilityChange = _a.handleColumnVisibilityChange, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength;
+    var pageSizeOptions = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 75, 100].filter(function (size) { return size <= dataLength; });
+    var isLeftDisabled = currentPage === 0;
+    var isRightDisabled = currentPage >= pages - 1;
+    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center", mt: 4 },
+        isVisiblity && (react_1.default.createElement(react_2.Flex, { mr: 4 },
+            react_1.default.createElement(react_2.Menu, null,
+                react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(icons_1.ChevronDownIcon, null), colorScheme: "blue", variant: "ghost", size: "xs" }, "Columns"),
+                react_1.default.createElement(react_2.MenuList, { overflow: "scroll", zIndex: "2" }, columns.map(function (header, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index },
+                    react_1.default.createElement(react_2.Checkbox, { isChecked: visibleColumns[header.label], size: "sm", onChange: function () { return handleColumnVisibilityChange(header.label); } }, header.label))); }))))),
+        react_1.default.createElement(react_2.Text, { mr: 4, fontSize: 12 }, paginationText),
+        react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, mr: 4, size: "xs", width: 20 },
+            react_1.default.createElement("option", { value: 0 }),
+            pageSizeOptions.map(function (size, index) { return (react_1.default.createElement("option", { key: index, value: size }, size)); })),
+        react_1.default.createElement(react_2.Flex, null,
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
+                react_1.default.createElement(fa_1.FaAngleDoubleLeft, null)),
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return currentPage > 0 && setCurrentPage(currentPage - 1); } },
+                react_1.default.createElement(fa_1.FaAngleLeft, null)),
+            react_1.default.createElement(react_2.Text, { mx: 1, mt: 3, fontSize: 12 },
+                "Page ",
+                currentPage + 1,
+                " of ",
+                pages),
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () {
+                    return currentPage < pages - 1 && setCurrentPage(currentPage + 1);
+                } },
+                react_1.default.createElement(fa_1.FaAngleRight, null)),
+            react_1.default.createElement(react_2.IconButton, { mx: 1, "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
+                react_1.default.createElement(fa_1.FaAngleDoubleRight, null)))));
+};
+exports.default = Pagination;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import { TableProps } from "../TableProps";
+type TableBodyProps = Pick<TableProps, "columns" | "isCheckbox" | "data" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & {
+    visibleColumns: Record<string, boolean>;
+    startRow: number;
+    endRow: number;
+    columnWidths: number[];
+    handleCheckbox: (selection: string | number) => void;
+    selections: (string | number)[];
+};
+declare const TableBody: ({ data, isCheckbox, columns, visibleColumns, startRow, endRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, }: TableBodyProps) => React.JSX.Element;
+export default TableBody;

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

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var table_1 = require("../../../Utils/table");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var TableBody = function (_a) {
+    var data = _a.data, isCheckbox = _a.isCheckbox, columns = _a.columns, visibleColumns = _a.visibleColumns, startRow = _a.startRow, endRow = _a.endRow, columnWidths = _a.columnWidths, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, selections = _a.selections;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_2.default.createElement(react_2.default.Fragment, null, data.slice(startRow, endRow).map(function (row, index) {
+        var _a;
+        return (react_2.default.createElement(react_1.Tr, { key: index + 1 },
+            isCheckbox && (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((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.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: selections.includes(row.id) }))),
+            columns.map(function (header, headerIndex) {
+                var _a;
+                var isFrozen = header.isFreeze;
+                var leftOffset = isFrozen
+                    ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
+                        (isCheckbox ? 50 : 0)
+                    : 0;
+                return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { key: headerIndex + 1, fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffset : undefined, zIndex: isFrozen ? 1 : 0, backgroundColor: isFrozen
+                        ? freezedBgColor
+                        : index % 2 === 1
+                            ? theme.colors.backgroundColor.light
+                            : "white", textOverflow: "ellipsis", border: noBorders
+                        ? "none"
+                        : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined }, header.node ? header.node(row) : row[header.id])));
+            })));
+    })));
+};
+exports.default = TableBody;

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { ColumnSortingProps, TableProps } from "../TableProps";
+type TableHeaderProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders"> & {
+    visibleColumns: Record<string, boolean>;
+    handleSort: (label: string, type: "asc" | "desc" | "none") => void;
+    activeHeader: string | null;
+    isPopoverOpen: boolean;
+    closePopover: () => void;
+    searchFeatures: (header: string) => React.ReactNode;
+    handleHeaderClick: (header: string, search: boolean) => void;
+    headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
+    columnWidths: number[];
+    columnsSort: ColumnSortingProps[];
+    handleCheckbox: (selection: string | number) => void;
+    checked: boolean | "indeterminate";
+};
+declare const TableHeader: ({ columns, isCheckbox, visibleColumns, handleSort, activeHeader, isPopoverOpen, closePopover, searchFeatures, handleHeaderClick, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, }: TableHeaderProps) => React.JSX.Element;
+export default TableHeader;

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

@@ -0,0 +1,115 @@
+"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 = require("@chakra-ui/react");
+var react_2 = __importStar(require("react"));
+var table_1 = require("../../../Utils/table");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var fa_1 = require("react-icons/fa");
+var TableHeader = function (_a) {
+    var _b;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, visibleColumns = _a.visibleColumns, handleSort = _a.handleSort, activeHeader = _a.activeHeader, isPopoverOpen = _a.isPopoverOpen, closePopover = _a.closePopover, searchFeatures = _a.searchFeatures, 
+    // hoveredHeaderIndex,
+    handleHeaderClick = _a.handleHeaderClick, 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;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_2.default.createElement(react_1.Tr, null,
+        isCheckbox && (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((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.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.Checkbox, { "aria-label": "Select all rows", colorScheme: "gray", backgroundColor: theme.colors.gray[50], borderColor: theme.colors.gray[500], variant: "subtle", onChange: function () { return handleCheckbox(0); }, isChecked: checked === true, isIndeterminate: checked === "indeterminate" }))),
+        columns.map(function (header, index) {
+            var _a, _b;
+            var isFrozen = header.isFreeze;
+            var leftOffset = isFrozen
+                ? (0, table_1.calculateLeftOffset)(columnWidths, index) + (isCheckbox ? 50 : 0)
+                : undefined;
+            var isSorting = header.isSort
+                ? columnsSort.find(function (o) { return o.column === header.id; })
+                : undefined;
+            var BgColor = isFrozen ? freezedBgColor : headerBgColor;
+            var TextColor = isFrozen ? freezedTextColor : headerTextColor;
+            return (visibleColumns[header.label] && (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, border: noBorders ? "none" : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns") },
+                react_2.default.createElement(react_1.Box, { display: "flex", color: TextColor, justifyContent: "space-between", alignItems: "center" },
+                    react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.label),
+                    react_2.default.createElement("span", null, header.isSort && (react_2.default.createElement(SortingIcon, { sortState: (_b = isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) !== null && _b !== void 0 ? _b : "none", handleSortClick: function () {
+                            var direction = "asc";
+                            if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "asc") {
+                                direction = "desc";
+                            }
+                            else if ((isSorting === null || isSorting === void 0 ? void 0 : isSorting.direction) === "desc") {
+                                direction = "none";
+                            }
+                            handleSort(header.id, direction);
+                        } })))))));
+        })));
+};
+exports.default = TableHeader;
+var SortingIcon = (0, react_2.memo)(function (_a) {
+    var sortState = _a.sortState, handleSortClick = _a.handleSortClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", bg: theme.colors.white, borderRadius: "full", cursor: "pointer", w: "24px", h: "24px", ml: 2, onClick: handleSortClick, transition: "transform 0.2s ease-in-out", _hover: { transform: "scale(1.1)" } },
+        sortState === "none" && react_2.default.createElement(fa_1.FaSort, { color: "black", size: 14 }),
+        sortState === "asc" && react_2.default.createElement(fa_1.FaCaretUp, { color: "black", size: 14 }),
+        sortState === "desc" && react_2.default.createElement(fa_1.FaCaretDown, { color: "black", size: 14 })));
+});
+// const Popover = () => {
+//   return (
+//     <div style={{ background: "red" }}>
+//       <Popover
+//         isOpen={
+//           activeHeader === header.label && isPopoverOpen && header.isSearch
+//         }
+//         onClose={closePopover}
+//         placement="bottom-start"
+//         closeOnBlur={false}
+//       >
+//         <PopoverTrigger>
+//           <span>
+//             <HamburgerIcon
+//               w={15}
+//               h={15}
+//               onClick={() =>
+//                 handleHeaderClick(
+//                   header.label,
+//                   header.isSearch ? header.isSearch : false
+//                 )
+//               }
+//               style={{
+//                 cursor: "pointer",
+//                 display:
+//                   hoveredHeaderIndex === index && header.isSearch
+//                     ? "inline"
+//                     : "none",
+//               }}
+//             />
+//           </span>
+//         </PopoverTrigger>
+//         <PopoverContent width={200} zIndex={3}>
+//           <PopoverBody background={"#deeefd"}>
+//             {searchFeatures(header.label)}
+//           </PopoverBody>
+//         </PopoverContent>
+//       </Popover>
+//     </div>
+//   );
+// };

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

@@ -0,0 +1,3 @@
+import React from "react";
+declare const TableLoading: () => React.JSX.Element;
+export default TableLoading;

package/dist/Components/Table/Components/TableLoading.js

@@ -0,0 +1,31 @@
+"use strict";
+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 TableLoading = function () {
+    return (react_1.default.createElement(react_2.Box, { overflowX: "auto", p: 4 },
+        react_1.default.createElement(react_2.Table, { variant: "simple", width: "full" },
+            react_1.default.createElement(react_2.Thead, null,
+                react_1.default.createElement(react_2.Tr, null,
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })),
+                    react_1.default.createElement(react_2.Th, { p: 2 },
+                        react_1.default.createElement(react_2.Skeleton, { height: "20px" })))),
+            react_1.default.createElement(react_2.Tbody, null, Array.from({ length: 5 }).map(function (_, rowIndex) { return (react_1.default.createElement(react_2.Tr, { key: rowIndex },
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })),
+                react_1.default.createElement(react_2.Td, { p: 2 },
+                    react_1.default.createElement(react_2.SkeletonText, { noOfLines: 1, skeletonHeight: "2" })))); })))));
+};
+exports.default = TableLoading;

package/dist/Components/Table/Table.css

@@ -0,0 +1,29 @@
+.table-container {
+  display: flex;
+  overflow: hidden; /* Prevent extra scrollbars */
+}
+
+.sticky-columns {
+  position: relative;
+  z-index: 2;
+  background-color: white;
+  box-shadow: 2px 0 0 #e2e8f0; /* Optional for visual separation */
+}
+
+.scrollable-columns {
+  overflow-x: auto;
+  overflow-y: hidden; /* Only horizontal scrolling */
+  white-space: nowrap; /* Prevent wrapping */
+}
+
+th,
+td {
+  border: 1px solid #e2e8f0;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.scrollable-columns th,
+.scrollable-columns td {
+  background-color: white;
+}

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, headers, tableHeaderBgColor, tableHeaderColor, handleExportChange, exportOptions, exportLabel, isLoading, loadingContaxt, loadingBoxStyle, isVisiblity, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, handleExportChange, onSelection, exportOptions, exportLabel, isLoading, isVisiblity, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, }: TableProps): React.JSX.Element;