pixelize-design-library 2.1.11 → 2.1.13

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/KanbanActions/KanbanActions.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { OptionProp } from '../../Select/SelectProps';
+declare const KanbanActions: ({ options, onSelectChange, onEdit, onCreate }: {
+    options: OptionProp[];
+    onSelectChange?: ((option?: OptionProp) => void) | undefined;
+    onEdit?: (() => void) | undefined;
+    onCreate?: (() => void) | undefined;
+}) => React.JSX.Element;
+export default KanbanActions;

package/dist/Components/KanbanBoard/KanbanActions/KanbanActions.js

@@ -0,0 +1,26 @@
+"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 Select_1 = __importDefault(require("../../Select/Select"));
+var lucide_react_1 = require("lucide-react");
+var Divider_1 = __importDefault(require("../../Divider/Divider"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var KanbanActions = function (_a) {
+    var _b, _c, _d, _e;
+    var options = _a.options, onSelectChange = _a.onSelectChange, onEdit = _a.onEdit, onCreate = _a.onCreate;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" },
+        react_2.default.createElement(Select_1.default, { options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: function (option) { return onSelectChange && onSelectChange(option); } }),
+        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { return onEdit === null || onEdit === void 0 ? void 0 : onEdit(); } },
+            react_2.default.createElement(lucide_react_1.SquarePen, { size: 20, color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[500] }),
+            react_2.default.createElement(react_1.Text, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _c === void 0 ? void 0 : _c[500] }, "Edit Layout")),
+        react_2.default.createElement(Divider_1.default, null),
+        react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { return onCreate === null || onCreate === void 0 ? void 0 : onCreate(); } },
+            react_2.default.createElement(lucide_react_1.CirclePlus, { size: 20, color: (_d = colors === null || colors === void 0 ? void 0 : colors.text) === null || _d === void 0 ? void 0 : _d[500] }),
+            react_2.default.createElement(react_1.Text, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _e === void 0 ? void 0 : _e[500] }, "Create New"))));
+};
+exports.default = KanbanActions;

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, isLoading, }: KanbanBoardProps) => React.JSX.Element;
+export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -0,0 +1,120 @@
+"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, _c, _d;
+    var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _f = (0, react_1.useState)(data), columns = _f[0], setColumns = _f[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,
+            });
+        }
+    };
+    var handleColumnDelete = function (colId) {
+        var _a, _b;
+        var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
+        onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
+    };
+    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" }, isLoading ? ((_c = Array.from({ length: 5 })) === null || _c === void 0 ? void 0 : _c.map(function (_, idx) {
+            var _a, _b;
+            return (react_1.default.createElement(react_2.Box, { key: idx, width: "17.5rem", p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
+                react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
+                react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
+        })) : ((_d = Object.entries(columns)) === null || _d === void 0 ? void 0 : _d.map(function (_a) {
+            var colId = _a[0], column = _a[1];
+            return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId.toString(), key: colId }, function (provided, snapshot) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                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", flexShrink: 0 }),
+                    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, justifyContent: "space-between" },
+                        react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", 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 handleColumnDelete(colId); } })),
+                    react_1.default.createElement(react_2.Box, { px: 2, pb: 2, overflowY: "auto", maxHeight: "calc(100vh - 7rem)", overflowX: "hidden" }, (_l = column.items) === null || _l === void 0 ? void 0 :
+                        _l.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,27 @@
+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;
+    isLoading?: boolean;
+};

package/dist/Components/KanbanBoard/KanbanBoardProps.js

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

package/dist/Components/Loading/Loading.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { LoadingProps } from "./LoadingProps";
+export default function Loading({ text, isLoading, onlytext }: LoadingProps): React.JSX.Element | null;

package/dist/Components/Loading/Loading.js

@@ -0,0 +1,36 @@
+"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 react_2 = require("@chakra-ui/react");
+var react_3 = require("@emotion/react");
+// const blurAnimation = keyframes`
+//   0% {
+//     filter: blur(0);
+//   }
+//   50% {
+//     filter: blur(2px);
+//   }
+//   100% {
+//     filter: blur(0);
+//   }
+// `;
+var colorTransition = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"], ["\n  0% {\n    color: black;\n  }\n  50% {\n    color: gray;\n  }\n  100% {\n    color: black;\n  }\n"])));
+function Loading(_a) {
+    var text = _a.text, isLoading = _a.isLoading, onlytext = _a.onlytext;
+    if (!isLoading) {
+        return null;
+    }
+    return (react_1.default.createElement(react_2.Box, { position: "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: "rgba(0, 0, 0, 0.4)", backdropFilter: "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: "9999" },
+        react_1.default.createElement(react_2.Center, { height: "100vh" }, !onlytext ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }),
+            react_1.default.createElement(react_2.Text, { mt: "2", ml: "5" }, text))) : (react_1.default.createElement(react_2.Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: (0, react_3.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              animation: ", " 2s infinite;\n            "], ["\n              animation: ", " 2s infinite;\n            "])), colorTransition) }, text)))));
+}
+exports.default = Loading;
+var templateObject_1, templateObject_2;

package/dist/Components/Loading/Loading.stories.d.ts

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

package/dist/Components/Loading/Loading.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React, { useState } from 'react';
+// import { StoryFn, Meta } from '@storybook/react/types-6-0';
+// import { Button } from "@chakra-ui/react";
+// import Loading from './Loading';
+// import { LoadingProps } from './LoadingProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Loading/LoadingProps.d.ts

@@ -0,0 +1,5 @@
+export type LoadingProps = {
+    text?: string;
+    isLoading: boolean;
+    onlytext?: boolean;
+};

package/dist/Components/Loading/LoadingProps.js

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

package/dist/Components/Modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { ChakraModelProps } from "./ModalProps";
+export declare const ModalHeader: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const ModalBody: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const ModalFooter: React.FC<{
+    children: React.ReactNode;
+}>;
+export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, motionPreset, scrollBehavior, children, isLoading, }: ChakraModelProps): React.JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalFooter = exports.ModalBody = exports.ModalHeader = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var ModalHeader = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.ModalHeader = ModalHeader;
+var ModalBody = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.ModalBody = ModalBody;
+var ModalFooter = function (_a) {
+    var children = _a.children;
+    return react_1.default.createElement(react_1.default.Fragment, null, children);
+};
+exports.ModalFooter = ModalFooter;
+function Modal(_a) {
+    var size = _a.size, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.overlaybg, overlaybg = _c === void 0 ? "blackAlpha.300" : _c, _d = _a.overlaybackdropFilter, overlaybackdropFilter = _d === void 0 ? "blur(10px) hue-rotate(90deg)" : _d, overlaybackdropInvert = _a.overlaybackdropInvert, overlaybackdropBlur = _a.overlaybackdropBlur, isCentered = _a.isCentered, finalFocusRef = _a.finalFocusRef, blockScrollOnMount = _a.blockScrollOnMount, initialFocusRef = _a.initialFocusRef, closeOnOverlayClick = _a.closeOnOverlayClick, motionPreset = _a.motionPreset, scrollBehavior = _a.scrollBehavior, children = _a.children, isLoading = _a.isLoading;
+    if (!isOpen)
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    var isReactElement = function (child) {
+        return child !== null && typeof child === "object" && "type" in child;
+    };
+    var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ModalHeader; });
+    var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ModalBody; });
+    var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ModalFooter; });
+    return (react_1.default.createElement(react_2.Modal, { isOpen: true, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, motionPreset: motionPreset, scrollBehavior: scrollBehavior },
+        react_1.default.createElement(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }),
+        react_1.default.createElement(react_2.ModalContent, null, isLoading ? (react_1.default.createElement("div", { style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+                width: "100%",
+                padding: "25%",
+            } },
+            react_1.default.createElement(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: "blue.500", size: "xl" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            header && react_1.default.createElement(react_2.ModalHeader, null, header),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, null, body),
+            footer && react_1.default.createElement(react_2.ModalFooter, null, footer))))));
+}
+exports.default = Modal;

package/dist/Components/Modal/Modal.stories.d.ts

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

package/dist/Components/Modal/Modal.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React, { useState } from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import Modal from './Modal';
+// import { ChakraProvider, Button } from '@chakra-ui/react';
+// import { ChakraModelProps } from './ModalProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Modal/ModalProps.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ModalProps } from "@chakra-ui/react";
+export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFocusRef" | "blockScrollOnMount" | "initialFocusRef" | "closeOnOverlayClick" | "isCentered" | "motionPreset" | "scrollBehavior"> & {
+    overlaybg?: string;
+    overlaybackdropFilter?: string;
+    overlaybackdropInvert?: string;
+    overlaybackdropBlur?: string;
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    children?: React.ReactNode;
+    isLoading?: boolean;
+};

package/dist/Components/Modal/ModalProps.js

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

package/dist/Components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { MultiSelectProps } from "./MultiSelectProps";
+export default function MultiSelect({ value, onValueChange, width, label, isRequired, isInformation, informationMessage, name, id, placeholderText, isDisabled, isReadOnly, size, inputStyle, }: MultiSelectProps): React.JSX.Element;

package/dist/Components/MultiSelect/MultiSelect.js

@@ -0,0 +1,115 @@
+"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));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var FormLabel_1 = require("../Common/FormLabel");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var generateUniqueId = (function () {
+    var counter = 0;
+    return function () {
+        counter += 1;
+        return "".concat(Date.now(), "-").concat(counter);
+    };
+})();
+function MultiSelect(_a) {
+    var value = _a.value, onValueChange = _a.onValueChange, _b = _a.width, width = _b === void 0 ? "100%" : _b, _c = _a.label, label = _c === void 0 ? "label" : _c, _d = _a.isRequired, isRequired = _d === void 0 ? true : _d, _e = _a.isInformation, isInformation = _e === void 0 ? false : _e, _f = _a.informationMessage, informationMessage = _f === void 0 ? "" : _f, name = _a.name, id = _a.id, _g = _a.placeholderText, placeholderText = _g === void 0 ? "Type valid email and press enter" : _g, isDisabled = _a.isDisabled, isReadOnly = _a.isReadOnly, size = _a.size, inputStyle = _a.inputStyle;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var getPadding = function () {
+        return "0.5rem";
+    };
+    var _h = (0, react_1.useState)(value), options = _h[0], setOptions = _h[1];
+    var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
+    var _k = (0, react_1.useState)(""), error = _k[0], setError = _k[1];
+    var inputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        setOptions(value);
+    }, [value]);
+    var handleInputChange = function (e) {
+        setInputValue(e.target.value);
+        setError("");
+    };
+    var validateEmail = function (email) {
+        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === "Enter" && inputValue.trim() !== "") {
+            if (!validateEmail(inputValue)) {
+                setError("Invalid email address");
+                return;
+            }
+            var existingOption = options.find(function (option) { return option.label === inputValue; });
+            if (!existingOption) {
+                var newOption = { id: generateUniqueId(), label: inputValue };
+                var updatedOptions = __spreadArray(__spreadArray([], options, true), [newOption], false);
+                setOptions(updatedOptions);
+                onValueChange(updatedOptions);
+                setInputValue("");
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            }
+        }
+        else if (e.key === "Backspace" && inputValue === "") {
+            var updatedOptions = options.slice(0, -1); // Remove the last item
+            setOptions(updatedOptions);
+            onValueChange(updatedOptions);
+        }
+    };
+    var handleRemove = function (optionToRemove) {
+        var updatedOptions = options.filter(function (option) { return option.id !== optionToRemove.id; });
+        setOptions(updatedOptions);
+        onValueChange(updatedOptions);
+    };
+    return (react_1.default.createElement(react_2.Box, { width: width, borderRadius: "md", backgroundColor: "white" },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
+        react_1.default.createElement(react_2.Flex, { wrap: "wrap", gap: 2 }, options.map(function (option) { return (react_1.default.createElement(react_2.Tag, { key: option.id, size: "md", variant: "solid", colorScheme: "gray" },
+            react_1.default.createElement(react_2.TagLabel, null, option.label),
+            react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemove(option); } }))); })),
+        react_1.default.createElement(react_2.Input, { ref: inputRef, type: "text", value: inputValue, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, style: __assign(__assign({}, inputStyle), { backgroundColor: theme.colors.backgroundColor.light, fontWeight: 600, color: theme.colors.gray[600], padding: getPadding(), fontSize: 15, letterSpacing: 0.7, borderRadius: "0.125rem" }), onChange: handleInputChange, onKeyDown: handleKeyDown, placeholder: placeholderText, marginTop: 2, marginLeft: 1 }),
+        error && (react_1.default.createElement(react_2.Text, { color: "red.500", marginTop: 2, marginLeft: 1 }, error))));
+}
+exports.default = MultiSelect;

package/dist/Components/MultiSelect/MultiSelectProps.d.ts

@@ -0,0 +1,20 @@
+export type MultiSelectProps = {
+    value: MultiSelctOPtions[];
+    onValueChange: (options: MultiSelctOPtions[]) => void;
+    width?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    isRequired?: boolean;
+    isInformation?: boolean;
+    informationMessage?: string;
+    placeholderText?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    size?: string;
+    inputStyle?: {};
+};
+export type MultiSelctOPtions = {
+    id: string;
+    label: string;
+};

package/dist/Components/MultiSelect/MultiSelectProps.js

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

package/dist/Components/NavigationBar/NavBar.stories.d.ts

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

package/dist/Components/NavigationBar/NavBar.stories.js

@@ -0,0 +1,3 @@
+"use strict";
+// // NavBar.stories.tsx
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NavbarProps } from "./NavigationBarProps";
+export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, }: NavbarProps): React.JSX.Element;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -0,0 +1,50 @@
+"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 lucide_react_1 = require("lucide-react");
+function NavBar(_a) {
+    var _b, _c, _d, _e;
+    var userAvathar = _a.userAvathar, userName = _a.userName, navMenu = _a.navMenu, moreIcon = _a.moreIcon, handleNavOnClick = _a.handleNavOnClick, handleLogout = _a.handleLogout, logoutText = _a.logoutText, navigationBarText = _a.navigationBarText;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
+        react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
+            react_1.default.createElement(react_2.Box, { display: "flex", gap: 1.5, alignItems: "center" },
+                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (react_1.default.createElement(react_2.Box, { width: "1.5rem", height: "1.5rem", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", onClick: function () { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); } },
+                    react_1.default.createElement(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500] }))),
+                (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && (react_1.default.createElement(react_2.Text, { color: (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.secondary) === null || _e === void 0 ? void 0 : _e[500], fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem" }, navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text))),
+            react_1.default.createElement(react_2.Flex, null,
+                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 7 },
+                    react_1.default.createElement(react_2.Menu, null,
+                        react_1.default.createElement(react_2.Box, { cursor: "pointer" }, moreIcon),
+                        react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
+                            react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
+                        react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5 },
+                            react_1.default.createElement(react_2.Center, { py: 4 },
+                                react_1.default.createElement(react_2.Avatar, { size: "xl", name: userName, src: userAvathar })),
+                            react_1.default.createElement(react_2.Center, null,
+                                react_1.default.createElement(react_2.Text, { fontWeight: 500 }, userName)),
+                            react_1.default.createElement(react_2.MenuDivider, null), navMenu === null || navMenu === void 0 ? void 0 :
+                            navMenu.map(function (menu) { return (react_1.default.createElement(react_2.MenuItem, { onClick: function () { return handleNavOnClick(menu.url); }, key: menu.title, sx: {
+                                    fontWeight: 500,
+                                    gap: theme.space["2"],
+                                }, _hover: {
+                                    backgroundColor: theme.colors.primary["50"],
+                                } },
+                                menu.icon && react_1.default.createElement(react_2.Box, null, menu === null || menu === void 0 ? void 0 : menu.icon),
+                                react_1.default.createElement(react_2.Box, null, menu.title))); }),
+                            react_1.default.createElement(react_2.MenuDivider, null),
+                            react_1.default.createElement(react_2.MenuItem, { onClick: handleLogout, sx: {
+                                    fontWeight: 500,
+                                    gap: theme.space["2"],
+                                }, _hover: {
+                                    backgroundColor: theme.colors.primary["50"],
+                                } },
+                                react_1.default.createElement(react_2.Box, null, react_1.default.createElement(lucide_react_1.LogOut, { size: 16 })),
+                                react_1.default.createElement(react_2.Box, null, logoutText)))))))));
+}
+exports.default = NavBar;

package/dist/Components/NavigationBar/NavigationBarProps.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export type NavbarProps = {
+    userAvathar: string;
+    userName: string;
+    navMenu: MenuProps[];
+    moreIcon?: any;
+    handleNavOnClick: (url: string) => void;
+    handleLogout: () => void;
+    logoutText: string;
+    navigationBarText?: {
+        text: string;
+        onIconClick?: () => void;
+    };
+};
+export type MenuProps = {
+    title: string;
+    url: string;
+    icon?: React.ReactNode;
+};

package/dist/Components/NavigationBar/NavigationBarProps.js

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

package/dist/Components/NoteTextArea/NoteTextArea.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { NoteTextAreaProps } from "./NoteTextAreaProps";
+export default function NoteTextArea({ width, handleSubmit, handleCancel, value, title, file, isEditable, saveButtonLoading, maxFileSize, maxFilesSizeError, maxNoteWordCount, onChange, ref, }: NoteTextAreaProps): React.JSX.Element;