pixelize-design-library 2.1.16 → 2.1.17

package/dist/Components/SideBar/components/TextTruncation.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TextProps } from "@chakra-ui/react";
+interface TruncatedTextWithTooltipProps extends TextProps {
+    children: string;
+    open?: boolean;
+}
+declare const TruncatedTextWithTooltip: React.FC<TruncatedTextWithTooltipProps>;
+export default TruncatedTextWithTooltip;

package/dist/Components/SideBar/components/TextTruncation.js

@@ -0,0 +1,77 @@
+"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 __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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var TruncatedTextWithTooltip = function (_a) {
+    var children = _a.children, _b = _a.open, open = _b === void 0 ? false : _b, props = __rest(_a, ["children", "open"]);
+    var textRef = (0, react_1.useRef)(null);
+    var shadowRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(false), isTruncated = _c[0], setIsTruncated = _c[1];
+    (0, react_1.useEffect)(function () {
+        var checkTruncation = function () {
+            var textEl = textRef.current;
+            var shadowEl = shadowRef.current;
+            if (textEl && shadowEl) {
+                var visibleWidth = textEl.offsetWidth;
+                var fullTextWidth = shadowEl.scrollWidth;
+                setIsTruncated(fullTextWidth > visibleWidth);
+            }
+        };
+        checkTruncation();
+        var resizeObserver = new ResizeObserver(checkTruncation);
+        if (textRef.current) {
+            resizeObserver.observe(textRef.current);
+        }
+        return function () { return resizeObserver.disconnect(); };
+    }, [children]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right" },
+            react_1.default.createElement(react_2.Text, __assign({ ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: "100%" }, props), children)),
+        react_1.default.createElement(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py }, children)));
+};
+exports.default = TruncatedTextWithTooltip;

package/dist/Components/Skeletons/Skeleton.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/Skeletons/Skeleton.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import Skeletons from './Skeletons'; // adjust the import path as necessary
+// import { ChakraProvider } from '@chakra-ui/react';
+// import { SkeletonProps } from './SkeletonProps'; // adjust the import path as necessary
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/react";
+export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
+    type: "skeleton" | "circle" | "text";
+} & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;

package/dist/Components/Skeletons/SkeletonProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SkeletonProps } from "./SkeletonProps";
+export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): React.JSX.Element;

package/dist/Components/Skeletons/Skeletons.js

@@ -0,0 +1,15 @@
+"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");
+function Skeletons(_a) {
+    var startColor = _a.startColor, endColor = _a.endColor, _b = _a.height, height = _b === void 0 ? "20px" : _b, isLoaded = _a.isLoaded, bg = _a.bg, color = _a.color, fadeDuration = _a.fadeDuration, children = _a.children, type = _a.type, speed = _a.speed, size = _a.size, mt = _a.mt, noOfLines = _a.noOfLines, spacing = _a.spacing, skeletonHeight = _a.skeletonHeight, width = _a.width;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        type === "skeleton" && (react_1.default.createElement(react_2.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width }, children)),
+        type === "circle" && react_1.default.createElement(react_2.SkeletonCircle, { size: size, speed: speed }),
+        type === "text" && (react_1.default.createElement(react_2.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))));
+}
+exports.default = Skeletons;

package/dist/Components/Slider/Slider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+type ImageSliderProps = {
+    images: string[];
+    interval?: number;
+    isArrow?: boolean;
+};
+declare const Slider: React.FC<ImageSliderProps>;
+export default Slider;

package/dist/Components/Slider/Slider.js

@@ -0,0 +1,57 @@
+"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 Slider = function (_a) {
+    var _b, _c, _d, _e;
+    var images = _a.images, _f = _a.interval, interval = _f === void 0 ? 5000 : _f, _g = _a.isArrow, isArrow = _g === void 0 ? false : _g;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _h = (0, react_1.useState)(0), currentIndex = _h[0], setCurrentIndex = _h[1];
+    var timeoutRef = (0, react_1.useRef)(null);
+    var nextSlide = function () { return setCurrentIndex(function (prev) { return (prev + 1) % images.length; }); };
+    var prevSlide = function () {
+        return setCurrentIndex(function (prev) { return (prev - 1 + images.length) % images.length; });
+    };
+    (0, react_1.useEffect)(function () {
+        if (interval > 0) {
+            timeoutRef.current = setTimeout(nextSlide, interval);
+        }
+        return function () {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [currentIndex, interval]);
+    return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100vw", h: "30rem", overflow: "hidden" },
+        react_1.default.createElement(react_2.Flex, { w: "".concat(images.length * 100, "vw"), transform: "translateX(-".concat(currentIndex * 100, "vw)"), transition: "transform 0.5s ease" }, images.map(function (src, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: "100vw", h: "30rem", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
+            react_1.default.createElement(react_2.Image, { src: src, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100vw", h: "100%" }))); })),
+        isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200] } }),
+            react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] } }))),
+        react_1.default.createElement(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2 }, images.map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, w: "0.8rem", h: "0.8rem", bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: function () { return setCurrentIndex(idx); }, transition: "all 0.3s" })); }))));
+};
+exports.default = Slider;

package/dist/Components/Switch/Switch.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SwitchProps } from "./SwitchProps";
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): React.JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -0,0 +1,39 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 styled_1 = __importDefault(require("@emotion/styled"));
+var react_2 = require("@emotion/react");
+var SwitchContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: auto;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"], ["\n  position: relative;\n  width: 100%;\n  height: auto;\n  background-color: white;\n  border-radius: 20px;\n  overflow: hidden;\n"])));
+var Highlight = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #eff7ff;\n  border-radius: 16px;\n  border: 1px solid #88c9f3;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 50%;\n  background-color: #eff7ff;\n  border-radius: 16px;\n  border: 1px solid #88c9f3;\n  transition: transform 0.3s ease;\n  transform: ", ";\n"])), function (_a) {
+    var position = _a.position;
+    return position === "left" ? "translateX(0%)" : "translateX(100%)";
+});
+// background-color: ${({ backgroundColor }) => backgroundColor};
+var SwitchList = styled_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"], ["\n  display: flex;\n  list-style-type: none;\n  margin: 0;\n  padding: 1px;\n  height: 100%;\n  z-index: 1;\n"])));
+var SwitchOption = styled_1.default.li(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  font-size: 14px;\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  width: 110px;\n  height: 100%;\n  color: black;\n  transition: color 0.3s ease;\n  font-weight: 400;\n  padding: 2px;\n  font-size: 14px;\n  ", "\n"])), function (_a) {
+    var isActive = _a.isActive;
+    return isActive && (0, react_2.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      font-weight: 600;\n      background-color: transparent;\n      z-index: 1;\n    "], ["\n      font-weight: 600;\n      background-color: transparent;\n      z-index: 1;\n    "])));
+});
+var SwitchContainerHeader = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: white;\n  height: auto;\n  padding: 1px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"], ["\n  background-color: white;\n  height: auto;\n  padding: 1px;\n  width: 200px;\n  border-radius: 20px;\n  border: 1px solid #e2e7ee;\n"])));
+function Switch(_a) {
+    var leftText = _a.leftText, rightText = _a.rightText, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, onSwitchToggle = _a.onSwitchToggle, switchActive = _a.switchActive;
+    return (react_1.default.createElement(SwitchContainerHeader, null,
+        react_1.default.createElement(SwitchContainer, null,
+            react_1.default.createElement(Highlight, { position: switchActive }),
+            react_1.default.createElement(SwitchList, null,
+                react_1.default.createElement(SwitchOption, { isActive: switchActive === "left", onClick: function () { return onSwitchToggle("left"); } },
+                    leftIcon,
+                    leftText),
+                react_1.default.createElement(SwitchOption, { isActive: switchActive === "right", onClick: function () { return onSwitchToggle("right"); } },
+                    rightIcon,
+                    rightText)))));
+}
+exports.default = Switch;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/Components/Switch/SwitchProps.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type SwitchProps = {
+    leftText: string;
+    rightText: string;
+    leftIcon?: JSX.Element;
+    rightIcon?: JSX.Element;
+    onSwitchToggle: (value: "left" | "right") => void;
+    switchActive: "left" | "right";
+};

package/dist/Components/Switch/SwitchProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { HeaderActionsProps } from "../TableProps";
+declare const HeaderActions: ({ actions, selections, }: {
+    actions?: HeaderActionsProps | undefined;
+    selections: (string | number)[];
+}) => React.JSX.Element;
+export default HeaderActions;

package/dist/Components/Table/Components/HeaderActions.js

@@ -0,0 +1,45 @@
+"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 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var react_2 = __importDefault(require("react"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var ListItem = function (_a) {
+    var _b;
+    var icon = _a.icon, name = _a.name, onClick = _a.onClick, selections = _a.selections;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var styledIcon = react_2.default.cloneElement(icon, {
+        color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500],
+        size: "1.25rem",
+    });
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", onClick: function () { return onClick && onClick(selections); }, cursor: "pointer" },
+        styledIcon,
+        " ",
+        name));
+};
+var HeaderActions = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var actions = _a.actions, selections = _a.selections;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.Box, { display: "flex", gap: 4, fontSize: "0.875rem", fontWeight: 400, color: (_b = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _b === void 0 ? void 0 : _b[500] },
+        ((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.Trash2, null), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections })),
+        ((_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.enabled) && (react_2.default.createElement(ListItem, { icon: react_2.default.createElement(lucide_react_1.SquarePen, null), name: "Mass Update", onClick: (_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.onClick, selections: selections })),
+        ((_g = actions === null || actions === void 0 ? void 0 : actions.items) === null || _g === void 0 ? void 0 : _g.length)
+            ? (_h = actions === null || actions === void 0 ? void 0 : actions.items) === null || _h === void 0 ? void 0 : _h.map(function (item) { return (react_2.default.createElement(ListItem, __assign({}, item, { selections: selections }))); })
+            : null));
+};
+exports.default = HeaderActions;

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

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

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

@@ -0,0 +1,32 @@
+"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 table_1 = require("../../../Utils/table");
+var lucide_react_1 = require("lucide-react");
+var Pagination = function (_a) {
+    var paginationText = _a.paginationText, handlePageSizeChange = _a.handlePageSizeChange, rowsPerPage = _a.rowsPerPage, currentPage = _a.currentPage, pages = _a.pages, setCurrentPage = _a.setCurrentPage, dataLength = _a.dataLength, isServerPagination = _a.isServerPagination;
+    var pageSizeOptions = (0, table_1.pageSizeCalculation)(dataLength);
+    var isLeftDisabled = currentPage === 0;
+    var isRightDisabled = currentPage >= pages - 1;
+    return (react_1.default.createElement(react_2.Flex, { justify: "flex-end", align: "center" },
+        !isServerPagination && (react_1.default.createElement(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: 20 },
+            dataLength < 100 ? react_1.default.createElement("option", { value: 0 }) : null,
+            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, { "aria-label": "left-icon", color: isLeftDisabled ? "gray" : "black", rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(0); } },
+                react_1.default.createElement(lucide_react_1.ChevronsLeft, null)),
+            react_1.default.createElement(react_2.IconButton, { "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(lucide_react_1.ChevronLeft, null)),
+            react_1.default.createElement(react_2.Text, { mt: 3, fontSize: 12 }, paginationText),
+            react_1.default.createElement(react_2.IconButton, { "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(lucide_react_1.ChevronRight, null)),
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "left-icon", color: isRightDisabled ? "gray" : "black", rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: function () { return setCurrentPage(pages - 1); } },
+                react_1.default.createElement(lucide_react_1.ChevronsRight, null)))));
+};
+exports.default = Pagination;

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

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

package/dist/Components/Table/Components/TableActions.js

@@ -0,0 +1,28 @@
+"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 lucide_react_1 = require("lucide-react");
+var TableActions = function (_a) {
+    var row = _a.row;
+    return (react_1.default.createElement(react_2.Popover, { placement: "bottom-start", closeOnBlur: true },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Link", color: "black", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" } })),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { w: "auto", minW: "150px", boxShadow: "lg", p: 0, zIndex: 999 },
+                react_1.default.createElement(react_2.PopoverBody, null,
+                    react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1 },
+                        row.onLink && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { return row === null || row === void 0 ? void 0 : row.onLink(row); } },
+                            react_1.default.createElement(lucide_react_1.ExternalLink, { size: 17 }),
+                            " View")),
+                        row.onEdit && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
+                            react_1.default.createElement(lucide_react_1.Pencil, { size: 17 }),
+                            " Edit")),
+                        row.onDelete && (react_1.default.createElement(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, onClick: function () { var _a; return (_a = row === null || row === void 0 ? void 0 : row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row); } },
+                            react_1.default.createElement(lucide_react_1.Trash2, { size: 17 }),
+                            "Delete"))))))));
+};
+exports.default = TableActions;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { TableBodyPageProps } from "../TableProps";
+declare const TableBody: ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, }: TableBodyPageProps) => React.JSX.Element;
+export default TableBody;

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

@@ -0,0 +1,140 @@
+"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;
+};
+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 = __importStar(require("react"));
+var table_1 = require("../../../Utils/table");
+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 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 _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);
+            if (newSet.has(rowIndex)) {
+                newSet.delete(rowIndex);
+            }
+            else {
+                newSet.add(rowIndex);
+            }
+            return newSet;
+        });
+    };
+    var handleRowClick = function (row, header) {
+        onRowClick && onRowClick(row, header);
+    };
+    var RenderCheckbox = (0, react_2.useCallback)(function (_a) {
+        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: (_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, _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: (_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, _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) +
+        (isLink ? 1 : 0);
+    if (isLoading) {
+        return (react_2.default.createElement(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.gray[300] }));
+    }
+    if (data.length === 0) {
+        return (react_2.default.createElement(react_1.Tr, { backgroundColor: theme.colors.white },
+            react_2.default.createElement(react_1.Td, { colSpan: totalVisibleColumns, textAlign: "center", py: 4 },
+                react_2.default.createElement(react_1.Box, { textAlign: "center", fontSize: 14 },
+                    react_2.default.createElement("p", null, "No data found")))));
+    }
+    return (react_2.default.createElement(react_2.default.Fragment, null, data.map(function (row, index) {
+        var _a;
+        var rowIndex = startRow + index;
+        var isExpanded = expandedRows.has(rowIndex);
+        var isChecked = selections.includes(row.id);
+        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.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, _c, _d, _e, _f, _g;
+                    if (header.isHidden)
+                        return null;
+                    var isFrozen = header.isFreeze;
+                    var leftOffset = (0, table_1.TableCellCalculation)({
+                        isFrozen: isFrozen,
+                        columnWidths: columnWidths,
+                        headerIndex: headerIndex,
+                        isCheckbox: isCheckbox,
+                        header: header,
+                        row: row,
+                        freezedBgColor: freezedBgColor,
+                        index: index,
+                    }).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: (_a = theme.colors.background) === null || _a === void 0 ? void 0 : _a[50], textOverflow: "ellipsis", borderBottom: noBorders
+                            ? "none"
+                            : "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: (_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 })),
+            row.content && isExpanded && (react_2.default.createElement(react_1.Tr, null,
+                react_2.default.createElement(react_1.Td, { colSpan: columns.length +
+                        (isCheckbox ? 1 : 0) +
+                        (isContent ? 1 : 0) +
+                        (isLink ? 1 : 0), p: 2 },
+                    react_2.default.createElement(react_1.Box, { p: 2, bg: theme.colors.white, borderRadius: "md" }, row === null || row === void 0 ? void 0 : row.content(row)))))));
+    })));
+};
+exports.default = TableBody;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { TableFiltersProps } from "../TableProps";
+declare const TableFilters: React.MemoExoticComponent<({ header, setColumnsSearch, columnsSearch, onClose }: TableFiltersProps) => React.JSX.Element>;
+export default TableFilters;

package/dist/Components/Table/Components/TableFilters.js

@@ -0,0 +1,59 @@
+"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 table_1 = require("../../../Utils/table");
+var lucide_react_1 = require("lucide-react");
+var TableFilters = (0, react_1.memo)(function (_a) {
+    var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose;
+    var searchRef = (0, react_1.useRef)(null);
+    var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
+    var debounceRef = (0, table_1.debounce)(function (value) {
+        setColumnsSearch(value);
+    }, 700);
+    (0, react_1.useEffect)(function () {
+        if (columnsSearch.length && searchRef.current) {
+            searchRef.current.value = columnsSearch;
+        }
+        /* eslint-disable */
+    }, [refreshDataOnOpen]);
+    return (react_1.default.createElement(react_2.Popover, { onClose: onClose, onOpen: function () {
+            setRefreshDataOnOpen(function (prev) { return !prev; });
+        } },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
+        react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
+                react_1.default.createElement(react_2.PopoverBody, { p: 2 },
+                    react_1.default.createElement(react_2.InputGroup, { flex: "1", size: "xs" },
+                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                            react_1.default.createElement(lucide_react_1.Search, { color: "gray.300" })),
+                        react_1.default.createElement(react_2.Input, { autoFocus: true, placeholder: "Search ".concat(header.label, "..."), size: "xs", ref: searchRef, onChange: function (e) {
+                                e.stopPropagation();
+                                debounceRef(e.target.value);
+                            }, onFocus: function (e) { return e.stopPropagation(); } })))))));
+});
+exports.default = TableFilters;