pixelize-design-library 2.0.1 → 2.0.2

package/dist/App.js

@@ -69,9 +69,16 @@ function App() {
         { id: 3, title: "Reports", icon: lucide_react_1.Calendar, url: "reports" },
         { id: 4, title: "Settings", icon: lucide_react_1.Calendar, url: "settings" },
         { id: 5, title: "Users", icon: lucide_react_1.Calendar, url: "users" },
-        { id: 6, title: "Notifications", icon: lucide_react_1.Calendar, url: "notifications" },
+        { id: 6, title: "Notifications notifications notifications notifications notifications", icon: lucide_react_1.Calendar, url: "notifications" },
         { id: 7, title: "Analytics", icon: lucide_react_1.Calendar, url: "analytics" },
-        { id: 8, title: "Projects", icon: lucide_react_1.Calendar, url: "projects" },
+        {
+            id: 8, title: "Projects", icon: lucide_react_1.Calendar, url: "projects", subMenu: [{
+                    id: 21, title: "submenu1hghvhvkhvkhvkhvh", icon: lucide_react_1.Calendar, url: "submenu1"
+                },
+                {
+                    id: 22, title: "submenu2", icon: lucide_react_1.Calendar, url: "submenu2"
+                }]
+        },
         { id: 9, title: "Tasks", icon: lucide_react_1.Calendar, url: "tasks" },
         { id: 10, title: "Teams", icon: lucide_react_1.Calendar, url: "teams" },
         { id: 11, title: "Clients", icon: lucide_react_1.Calendar, url: "clients" },

package/dist/Components/KanbanBoard/AccountCard.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Account, KanbanBoardProps } from "./KanbanBoardProps";
+declare const AccountCard: ({ account, index, onDelete, onOpen, }: {
+    account: Account;
+    index: number;
+    onDelete: KanbanBoardProps['onDelete'];
+    onOpen: KanbanBoardProps['onOpen'];
+}) => React.JSX.Element;
+export default AccountCard;

package/dist/Components/KanbanBoard/AccountCard.js

@@ -0,0 +1,74 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var dnd_1 = require("@hello-pangea/dnd");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var AccountRow_1 = __importDefault(require("./AccountRow"));
+var excludeKeys = ["id", "details"];
+var AccountCard = function (_a) {
+    var account = _a.account, index = _a.index, onDelete = _a.onDelete, onOpen = _a.onOpen;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _b = (0, react_1.useState)(false), showMore = _b[0], setShowMore = _b[1];
+    var keys = Object.keys(account).filter(function (key) { return typeof account[key] === "string" && !excludeKeys.includes(key); });
+    var visibleKeys = showMore ? keys : keys.slice(0, 4);
+    return (react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id, index: index }, function (provided) {
+        var _a, _b, _c, _d, _e, _f;
+        return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { width: "16.5rem", borderRadius: "0.25rem", borderWidth: "0.063rem", background: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[500], border: "0.1rem solid ".concat((_b = colors.gray) === null || _b === void 0 ? void 0 : _b[200]), p: 2, mt: 3 }),
+            react_1.default.createElement(react_2.VStack, { align: "start", spacing: 2, fontSize: "0.875rem", color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[700], overflow: "none" },
+                visibleKeys.map(function (key) { return (react_1.default.createElement(AccountRow_1.default, { key: key, label: key.replace(/\b\w/g, function (c) { return c.toUpperCase(); }), value: account[key] })); }),
+                react_1.default.createElement(react_2.Collapse, { in: showMore && account.details !== undefined, animateOpacity: true },
+                    react_1.default.createElement(react_2.Text, { pt: 2 }, account.details)),
+                keys.length > 4 && (react_1.default.createElement(react_2.Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center" },
+                    react_1.default.createElement(react_2.Text, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _d === void 0 ? void 0 : _d[500], fontSize: "sm", fontWeight: "medium", cursor: "pointer", onClick: function () { return setShowMore(!showMore); }, display: "flex", alignItems: "center", gap: 2 },
+                        "Show ",
+                        showMore ? "less" : "more",
+                        " ",
+                        showMore ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: 14 })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: 14 }))),
+                    react_1.default.createElement(react_2.Spacer, null),
+                    react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                        react_1.default.createElement(react_2.Tooltip, { label: "Delete" },
+                            react_1.default.createElement(lucide_react_1.Trash2, { size: 16, color: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600], onClick: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(account); } })),
+                        react_1.default.createElement(react_2.Tooltip, { label: "Open" },
+                            react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16, color: (_f = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _f === void 0 ? void 0 : _f[600], onClick: function () { return onOpen === null || onOpen === void 0 ? void 0 : onOpen(account); } }))))))));
+    }));
+};
+exports.default = AccountCard;

package/dist/Components/KanbanBoard/AccountRow.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const AccountRow: ({ label, value }: {
+    label: string;
+    value: string;
+}) => React.JSX.Element;
+export default AccountRow;

package/dist/Components/KanbanBoard/AccountRow.js

@@ -0,0 +1,20 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var AccountRow = function (_a) {
+    var _b, _c;
+    var label = _a.label, value = _a.value;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_1.default.createElement(react_2.Flex, { w: "full" },
+        react_1.default.createElement(react_2.Tooltip, { label: label, isDisabled: label.length <= 15, hasArrow: true },
+            react_1.default.createElement(react_2.Text, { color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[700], w: "45%", noOfLines: 1 }, label)),
+        react_1.default.createElement(react_2.Text, { w: "0.625rem", textAlign: "center" }, ":"),
+        react_1.default.createElement(react_2.Tooltip, { label: value, isDisabled: value.length <= 17, hasArrow: true },
+            react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[800], w: "calc(55% - 0.625rem)", noOfLines: 1 }, value))));
+};
+exports.default = AccountRow;

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { KanbanBoardProps } from "./KanbanBoardProps";
+declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete }: KanbanBoardProps) => React.JSX.Element;
+export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -0,0 +1,106 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var dnd_1 = require("@hello-pangea/dnd");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var AccountCard_1 = __importDefault(require("./AccountCard"));
+var KanbanBoard = function (_a) {
+    var _b;
+    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _c = (0, react_1.useState)(data), columns = _c[0], setColumns = _c[1];
+    var onDragEnd = function (result) {
+        var _a, _b;
+        var source = result.source, destination = result.destination;
+        if (!destination)
+            return;
+        var sourceCol = columns[source.droppableId];
+        var destCol = columns[destination.droppableId];
+        var draggedItem = sourceCol.items[source.index];
+        if (!draggedItem)
+            return;
+        if (source.droppableId === destination.droppableId) {
+            var copiedItems = __spreadArray([], sourceCol.items, true);
+            copiedItems.splice(source.index, 1);
+            copiedItems.splice(destination.index, 0, draggedItem);
+            var newCol = __assign(__assign({}, columns), (_a = {}, _a[source.droppableId] = __assign(__assign({}, sourceCol), { items: copiedItems }), _a));
+            setColumns(newCol);
+        }
+        else {
+            var sourceItems = __spreadArray([], sourceCol.items, true);
+            var destItems = __spreadArray([], destCol.items, true);
+            sourceItems.splice(source.index, 1);
+            destItems.splice(destination.index, 0, draggedItem);
+            var updatedCols = __assign(__assign({}, columns), (_b = {}, _b[source.droppableId] = __assign(__assign({}, sourceCol), { items: sourceItems }), _b[destination.droppableId] = __assign(__assign({}, destCol), { items: destItems }), _b));
+            setColumns(updatedCols);
+            onDrag === null || onDrag === void 0 ? void 0 : onDrag({
+                from: source.droppableId,
+                to: destination.droppableId,
+                item: draggedItem,
+            });
+        }
+    };
+    return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
+        react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "100vh", overflowX: "auto", maxWidth: "100vw" }, Object.entries(columns).map(function (_a) {
+            var colId = _a[0], column = _a[1];
+            return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId }, function (provided, snapshot) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: "17.5rem", opacity: 1, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50] : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver ? '0.5px dashed' + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500]) : '0.125rem solid' + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column" }),
+                    react_1.default.createElement(react_2.Flex, { width: "16.5rem", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, mb: 3, flexShrink: 0, m: 2, display: "flex", justifyContent: "space-between" },
+                        react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", lineHeight: "100%", letterSpacing: "0%", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
+                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(colId); } })),
+                    react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 12.5rem)", overflow: "hidden" },
+                        column.items.map(function (account, index) { return (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen })); }),
+                        provided.placeholder)));
+            }));
+        }))));
+};
+exports.default = KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -0,0 +1,26 @@
+export type Account = {
+    id: string;
+    rating: string;
+    name: string;
+    owner: string;
+    site: string;
+    details?: string;
+    [key: string]: string | undefined;
+};
+export type ColumnType = {
+    id: string;
+    title: string;
+    color: string;
+    items: Account[];
+};
+export type KanbanBoardProps = {
+    data: Record<string, ColumnType>;
+    onDelete?: (account: Account) => void;
+    onOpen?: (account: Account) => void;
+    onColumnDelete?: (colId: string | number) => void;
+    onDrag?: ({ from, to, item, }: {
+        from: string;
+        to: string;
+        item: Account;
+    }) => void;
+};

package/dist/Components/KanbanBoard/KanbanBoardProps.js

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

package/dist/Components/SideBar/SideBar.js

@@ -38,8 +38,8 @@ function Sidebar(_a) {
             // mt={5}
             , { 
                 // mt={5}
-                flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
-                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign({}, Sidebar_1.FlexCss) },
+                flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss, overflowX: "hidden" },
+                react_1.default.createElement(react_2.Box, { width: "100%", flex: "1", overflowY: "auto", overflowX: "hidden", alignItems: toggle ? "center" : "flex-start", css: __assign(__assign({}, Sidebar_1.FlexCss), { transition: 'all 0.3s ease' }) },
                     react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu })),
                 react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
                 !isDisableAddNew && (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", p: "0.625rem", 

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

@@ -50,16 +50,28 @@ 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 () {
-        requestAnimationFrame(function () {
-            var el = textRef.current;
-            if (el) {
-                setIsTruncated(el.scrollWidth > el.clientWidth);
+        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);
             }
-        });
-    }, [children, open]);
-    return (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" }, props), children)));
+        };
+        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/Constants/Sidebar.d.ts

@@ -13,3 +13,26 @@ export declare const FlexCss: {
         background: string;
     };
 };
+export declare const cssForScrollBar: (theme: any) => {
+    "&::-webkit-scrollbar": {
+        width: string;
+    };
+    "&::-webkit-scrollbar-track": {
+        background: any;
+    };
+    "&::-webkit-scrollbar-thumb": {
+        background: string;
+        borderRadius: string;
+    };
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: any;
+    };
+    "&:hover::-webkit-scrollbar-thumb:hover": {
+        background: any;
+    };
+    scrollbarWidth: string;
+    "&:hover": {
+        scrollbarWidth: string;
+        scrollbarColor: string;
+    };
+};

package/dist/Constants/Sidebar.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FlexCss = void 0;
+exports.cssForScrollBar = exports.FlexCss = void 0;
 exports.FlexCss = {
     "&::-webkit-scrollbar": {
         width: "0.188rem",
@@ -39,3 +39,4 @@ var cssForScrollBar = function (theme) { return ({
         scrollbarColor: "".concat(theme.colors.primary[500], " ").concat(theme.colors.sidebar.background[500]),
     },
 }); };
+exports.cssForScrollBar = cssForScrollBar;

package/dist/Layout.js

@@ -59,6 +59,7 @@ var input_1 = __importDefault(require("./Pages/input"));
 var alertdialog_1 = __importDefault(require("./Pages/alertdialog"));
 var table_1 = require("./Pages/table");
 var TInput_1 = __importDefault(require("./Pages/TInput"));
+var kanbanboard_1 = __importDefault(require("./Pages/kanbanboard"));
 var Layout = function () {
     var _a = (0, react_2.useState)(window.location.pathname), currentPath = _a[0], setCurrentPath = _a[1];
     var navigate = function (path) {
@@ -75,7 +76,7 @@ var Layout = function () {
         };
     }, []);
     var switchTheme = function (themeName) {
-        document.documentElement.setAttribute('data-theme', themeName);
+        document.documentElement.setAttribute("data-theme", themeName);
     };
     var renderPage = function () {
         switch (currentPath) {
@@ -141,6 +142,8 @@ var Layout = function () {
                 return react_2.default.createElement(table_1.TableExample, null);
             case "/tinput":
                 return react_2.default.createElement(TInput_1.default, null);
+            case "/kanban":
+                return react_2.default.createElement(kanbanboard_1.default, null);
             case "/":
             default:
         }
@@ -178,12 +181,13 @@ var Layout = function () {
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/checkbox"); }, variant: "outline" }, "Checkbox"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/toster"); }, variant: "outline" }, "Toster"),
                 react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/InputPage"); }, variant: "outline" }, "Input"),
-                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline" }, "Table")),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/table"); }, variant: "outline" }, "Table"),
+                react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/kanban"); }, variant: "outline" }, "Kanban")),
             react_2.default.createElement("br", null),
             react_2.default.createElement("br", null),
             react_2.default.createElement("h2", { className: "text-3xl" }, " TailWindCss"),
             react_2.default.createElement(react_1.Button, { onClick: function () { return navigate("/tinput"); }, variant: "outline" }, "Input"),
-            react_2.default.createElement("button", { onClick: function () { return switchTheme('theme2'); } }, "Switch to Theme 2")),
+            react_2.default.createElement("button", { onClick: function () { return switchTheme("theme2"); } }, "Switch to Theme 2")),
         react_2.default.createElement("br", null),
         react_2.default.createElement("br", null),
         renderPage()));

package/dist/Pages/kanbanboard.d.ts

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

package/dist/Pages/kanbanboard.js

@@ -0,0 +1,115 @@
+"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 KanbanBoard_1 = __importDefault(require("../Components/KanbanBoard/KanbanBoard"));
+var initialData = {
+    acquired: {
+        id: "acquired",
+        title: "Acquired",
+        color: "#9A4FE5",
+        items: [
+            {
+                id: "1",
+                rating: "Acquired",
+                name: "1",
+                owner: "Mathew John and so",
+                site: "Demo",
+                details: "Additional details here...",
+                location: "Chennai",
+                status: "Pending",
+            },
+        ],
+    },
+    active: {
+        id: "requetsed",
+        title: "Requested",
+        color: "#4CAF50",
+        items: [
+            {
+                id: "2",
+                rating: "Acquired",
+                name: "1",
+                owner: "Mathew John",
+                site: "Demo",
+                details: "Additional details here...",
+                location: "Bangalore",
+                status: "Completed",
+            },
+        ],
+    },
+    active2: {
+        id: "done",
+        title: "Done",
+        color: "#4CfF50",
+        items: [
+            {
+                id: "33",
+                rating: "Done",
+                name: "1",
+                owner: "Mathew John",
+                site: "Demo",
+                details: "Additional details here...",
+                location: "Mumbai",
+                status: "In Progress",
+            },
+        ],
+    },
+    active3: {
+        id: "done",
+        title: "Done",
+        color: "#4CfF50",
+        items: [
+            {
+                id: "332",
+                rating: "Done",
+                name: "1",
+                owner: "Mathew John",
+                site: "Demo",
+                details: "Additional details here...",
+                location: "Mumbai",
+                status: "In Progress",
+            },
+        ],
+    },
+    active4: {
+        id: "done",
+        title: "Done",
+        color: "#4CfF50",
+        items: [
+            {
+                id: "3322",
+                rating: "Done",
+                name: "1",
+                owner: "Mathew John",
+                site: "Demo",
+                details: "Additional details here...",
+                location: "Mumbai",
+                status: "In Progress",
+            },
+        ],
+    },
+    active5: {
+        id: "done",
+        title: "Done",
+        color: "#4CfF50",
+        items: [
+            {
+                id: "332e2",
+                rating: "Done",
+                name: "1",
+                owner: "Mathew John",
+                site: "Demo",
+                details: "Additional details here...",
+                location: "Mumbai",
+                status: "In Progress",
+            },
+        ],
+    },
+};
+var KanbanBoardExample = function () {
+    return (react_1.default.createElement(KanbanBoard_1.default, { data: initialData, onDelete: function (item) { return console.log("Delete", item); }, onOpen: function (item) { return console.log("Open", item); }, onDrag: function (updatedColumns) { return console.log("New State", updatedColumns); }, onColumnDelete: function (updatedColumns) { return console.log("New Del", updatedColumns); } }));
+};
+exports.default = KanbanBoardExample;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ import Drawer, { DrawerHeader, DrawerBody, DrawerFooter } from "./Components/Dra
 import Dropdown from "./Components/Dropdown/DropDown";
 import Editor from "./Components/Editor/Editor";
 import InputTextArea from "./Components/InputTextArea/InputTextArea";
+import KanbanBoard from "./Components/KanbanBoard/KanbanBoard";
 import Loading from "./Components/Loading/Loading";
 import Modal, { ModalHeader, ModalBody, ModalFooter } from "./Components/Modal/Modal";
 import MultiSelect from "./Components/MultiSelect/MultiSelect";
@@ -40,5 +41,5 @@ import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, InputTextArea, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, NoteTextArea, MultiSelect, NumberInput, PinInput, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Search, Select, SelectSearch, SideBar, Skeletons, Switch, Table, TableToggle, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
 export default withTheme;

package/dist/index.js

@@ -27,8 +27,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.debounce = exports.ThemesList = void 0;
+exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.SideBar = exports.SelectSearch = exports.Select = exports.Search = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.PinInput = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputTextArea = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.debounce = exports.ThemesList = exports.useCustomTheme = void 0;
 var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -60,6 +60,8 @@ var Editor_1 = __importDefault(require("./Components/Editor/Editor"));
 exports.Editor = Editor_1.default;
 var InputTextArea_1 = __importDefault(require("./Components/InputTextArea/InputTextArea"));
 exports.InputTextArea = InputTextArea_1.default;
+var KanbanBoard_1 = __importDefault(require("./Components/KanbanBoard/KanbanBoard"));
+exports.KanbanBoard = KanbanBoard_1.default;
 var Loading_1 = __importDefault(require("./Components/Loading/Loading"));
 exports.Loading = Loading_1.default;
 var Modal_1 = __importStar(require("./Components/Modal/Modal"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -8,6 +8,7 @@
   "dependencies": {
     "@chakra-ui/react": "^2.8.2",
     "@fontsource-variable/inter": "^5.1.0",
+    "@hello-pangea/dnd": "^18.0.1",
     "framer-motion": "^11.2.2",
     "jodit-react": "^4.1.2",
     "lucide-react": "^0.487.0",