pixelize-design-library 2.1.20 → 2.1.21

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { OptionProp } from "../Select/SelectProps";
+declare const HeaderActions: ({ select, edit, create, }: {
+    select?: {
+        isSelect?: boolean | undefined;
+        options?: OptionProp[] | undefined;
+        onSelectChange?: ((option?: OptionProp) => void) | undefined;
+        selectPlaceholderText?: string | undefined;
+        width?: string | undefined;
+        value?: string | undefined;
+    } | undefined;
+    edit?: {
+        isEditable?: boolean | undefined;
+        onEdit?: (() => void) | undefined;
+        label?: string | undefined;
+    } | undefined;
+    create?: {
+        isCreatable?: boolean | undefined;
+        onCreate?: (() => void) | undefined;
+        label?: string | undefined;
+    } | undefined;
+}) => React.JSX.Element;
+export default HeaderActions;

package/dist/Components/Header/HeaderActions.js

@@ -0,0 +1,37 @@
+"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 lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Select_1 = __importDefault(require("../Select/Select"));
+var Divider_1 = __importDefault(require("../Divider/Divider"));
+var HeaderActions = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var select = _a.select, edit = _a.edit, create = _a.create;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var elements = [];
+    if (select === null || select === void 0 ? void 0 : select.isSelect) {
+        elements.push(react_2.default.createElement(Select_1.default, { key: "select", options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, width: (_c = select.width) !== null && _c !== void 0 ? _c : "12.5rem", onChange: function (option) { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }));
+    }
+    if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
+        elements.push(react_2.default.createElement(react_1.Box, { key: "edit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); } },
+            react_2.default.createElement(lucide_react_1.SquarePen, { 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] }, edit.label ? edit.label : "Edit Layout")));
+    }
+    if (create === null || create === void 0 ? void 0 : create.isCreatable) {
+        elements.push(react_2.default.createElement(react_1.Box, { key: "create", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: 14, onClick: function () { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); } },
+            react_2.default.createElement(lucide_react_1.CirclePlus, { size: 20, color: (_f = colors === null || colors === void 0 ? void 0 : colors.text) === null || _f === void 0 ? void 0 : _f[500] }),
+            react_2.default.createElement(react_1.Text, { color: (_g = colors === null || colors === void 0 ? void 0 : colors.secondary) === null || _g === void 0 ? void 0 : _g[500] },
+                " ",
+                create.label ? create.label : "Create New",
+                " ")));
+    }
+    return (react_2.default.createElement(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem" }, elements.map(function (el, i) { return (react_2.default.createElement(react_2.default.Fragment, { key: i },
+        i > 0 && react_2.default.createElement(Divider_1.default, null),
+        el)); })));
+};
+exports.default = HeaderActions;

package/dist/Components/Header/HeaderProps.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+type SubItem = {
+    label: string;
+    href: string;
+    badge?: {
+        label: string;
+        colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
+    };
+    onClick?: () => void;
+};
+type MenuItemProp = {
+    label: string;
+    href?: string;
+    badge?: {
+        label: string;
+        colorScheme?: "blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | undefined;
+    };
+    onClick?: () => void;
+    children?: SubItem[];
+};
+export type HeaderProps = {
+    logo: React.ReactNode;
+    menuItems: MenuItemProp[];
+    rightSlot?: React.ReactNode;
+    active?: string;
+    colors?: {
+        bg: string;
+        color: string;
+        active: string;
+        hover: string;
+    };
+};
+export type DesktopMenuProps = Pick<HeaderProps, "menuItems" | "rightSlot"> & {
+    setHoveredMenu: (menu: string | null) => void;
+    isActive: (href?: string) => boolean | "" | undefined;
+    activeBg: string;
+    hoveredMenu: string | null;
+    hoverBg: string;
+    color: string;
+};
+export type MobileMenuProps = Pick<HeaderProps, 'menuItems' | 'rightSlot'> & Pick<DesktopMenuProps, 'isActive' | 'activeBg' | 'color' | 'hoverBg'> & {
+    isOpen: boolean;
+};
+export {};

package/dist/Components/Header/HeaderProps.js

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

package/dist/Components/Header/components/desktopMenu.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DesktopMenuProps } from "../HeaderProps";
+declare const DesktopMenu: ({ menuItems, rightSlot, setHoveredMenu, isActive, activeBg, hoveredMenu, hoverBg, color, }: DesktopMenuProps) => React.JSX.Element;
+export default DesktopMenu;

package/dist/Components/Header/components/desktopMenu.js

@@ -0,0 +1,33 @@
+"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 lucide_react_1 = require("lucide-react");
+var react_2 = __importDefault(require("react"));
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var DesktopMenu = function (_a) {
+    var menuItems = _a.menuItems, rightSlot = _a.rightSlot, setHoveredMenu = _a.setHoveredMenu, isActive = _a.isActive, activeBg = _a.activeBg, hoveredMenu = _a.hoveredMenu, hoverBg = _a.hoverBg, color = _a.color;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_2.default.createElement(react_1.HStack, { spacing: 6, align: "center", display: { base: "none", md: "flex" }, mx: rightSlot ? "auto" : 0 }, menuItems.map(function (item) {
+        var _a, _b, _c, _d;
+        var hasChildren = !!item.children;
+        var isHovered = hoveredMenu === item.label;
+        return (react_2.default.createElement(react_1.Box, { key: item.label, position: "relative", onMouseEnter: function () { return hasChildren && setHoveredMenu(item.label); }, onMouseLeave: function () { return hasChildren && setHoveredMenu(null); } },
+            react_2.default.createElement(react_1.Button, { variant: "ghost", onClick: item.onClick, rightIcon: hasChildren ? react_2.default.createElement(lucide_react_1.ChevronDown, { size: 14 }) : undefined, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg }, color: color },
+                react_2.default.createElement(react_1.VStack, { spacing: 0 },
+                    item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = item.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                    react_2.default.createElement(react_1.Text, null, item.label))),
+            hasChildren && (react_2.default.createElement(react_1.Collapse, { in: isHovered, animateOpacity: true },
+                react_2.default.createElement(react_1.Box, { position: "absolute", top: "100%", bg: colors === null || colors === void 0 ? void 0 : colors.white, color: colors === null || colors === void 0 ? void 0 : colors.black, rounded: "md", shadow: "md", minW: "10rem", zIndex: 10 },
+                    react_2.default.createElement(react_1.Stack, { spacing: 1, p: 2 }, (_d = item.children) === null || _d === void 0 ? void 0 : _d.map(function (subItem) {
+                        var _a, _b, _c;
+                        return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", justifyContent: "flex-start", w: "full", bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                            react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                                subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em", alignItems: "end" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                                react_2.default.createElement(react_1.Text, null, subItem.label))));
+                    })))))));
+    })));
+};
+exports.default = DesktopMenu;

package/dist/Components/Header/components/mobileMenu.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MobileMenuProps } from "../HeaderProps";
+declare const MobileMenu: ({ menuItems, isOpen, isActive, hoverBg, activeBg, color, rightSlot, }: MobileMenuProps) => React.JSX.Element;
+export default MobileMenu;

package/dist/Components/Header/components/mobileMenu.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 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var MobileMenu = function (_a) {
+    var menuItems = _a.menuItems, isOpen = _a.isOpen, isActive = _a.isActive, hoverBg = _a.hoverBg, activeBg = _a.activeBg, color = _a.color, rightSlot = _a.rightSlot;
+    return (react_2.default.createElement(react_1.Collapse, { in: isOpen, animateOpacity: true },
+        react_2.default.createElement(react_1.Box, { pb: 4, display: { md: "none" } },
+            react_2.default.createElement(react_1.Stack, { spacing: 4 },
+                menuItems.map(function (item) {
+                    var _a, _b, _c, _d, _e;
+                    return item.children ? (react_2.default.createElement(react_1.Box, { key: item.label, px: 2 },
+                        react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = item === null || item === void 0 ? void 0 : item.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, item.badge.label)),
+                            react_2.default.createElement(react_1.Text, { fontWeight: "medium" }, item.label)),
+                        react_2.default.createElement(react_1.Stack, { pl: 4, mt: 1 }, item.children.map(function (subItem) {
+                            var _a, _b, _c;
+                            return (react_2.default.createElement(react_1.Button, { key: subItem.label, onClick: subItem.onClick, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(subItem.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                                react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                                    subItem.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_b = (_a = subItem === null || subItem === void 0 ? void 0 : subItem.badge) === null || _a === void 0 ? void 0 : _a.colorScheme) !== null && _b !== void 0 ? _b : "blue", fontSize: "0.6em" }, (_c = subItem.badge) === null || _c === void 0 ? void 0 : _c.label)),
+                                    react_2.default.createElement(react_1.Text, null, subItem.label))));
+                        })))) : (react_2.default.createElement(react_1.Button, { key: item.label, onClick: item.onClick, variant: "ghost", w: "full", justifyContent: "flex-start", color: color, bg: isActive(item.href) ? activeBg : "transparent", _hover: { bg: hoverBg } },
+                        react_2.default.createElement(react_1.VStack, { spacing: 0, align: "start" },
+                            item.badge && (react_2.default.createElement(react_1.Badge, { colorScheme: (_d = (_c = item === null || item === void 0 ? void 0 : item.badge) === null || _c === void 0 ? void 0 : _c.colorScheme) !== null && _d !== void 0 ? _d : "blue", fontSize: "0.6em" }, (_e = item.badge) === null || _e === void 0 ? void 0 : _e.label)),
+                            react_2.default.createElement(react_1.Text, null, item.label))));
+                }),
+                rightSlot && react_2.default.createElement(react_1.Box, { mt: 4 }, rightSlot)))));
+};
+exports.default = MobileMenu;

package/dist/Components/Input/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { InputProps } from "./InputProps";
+declare const _default: React.MemoExoticComponent<({ label, type, value, onChange, error, placeholder, className, inputBoxClassName, isRequired }: InputProps) => React.JSX.Element>;
+export default _default;

package/dist/Components/Input/Input/Input.js

@@ -0,0 +1,45 @@
+"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 = __importStar(require("react"));
+var lucide_react_1 = require("lucide-react");
+var Label_1 = __importDefault(require("../../Common/Label"));
+var ErrorComponent_1 = __importDefault(require("../../Common/ErrorComponent"));
+var Input = function (_a) {
+    var label = _a.label, type = _a.type, value = _a.value, onChange = _a.onChange, error = _a.error, placeholder = _a.placeholder, className = _a.className, inputBoxClassName = _a.inputBoxClassName, isRequired = _a.isRequired;
+    var _b = (0, react_1.useState)(false), showPassword = _b[0], setShowPassword = _b[1];
+    var isPassword = type === "password";
+    var inputType = isPassword ? (showPassword ? "text" : "password") : type;
+    return (react_1.default.createElement("div", { className: "mb-4 ".concat(inputBoxClassName !== null && inputBoxClassName !== void 0 ? inputBoxClassName : "") },
+        react_1.default.createElement(Label_1.default, { label: label, isRequired: isRequired }),
+        react_1.default.createElement("div", { className: "relative w-full overflow-hidden" },
+            react_1.default.createElement("input", { type: inputType, value: value, onChange: function (e) { return onChange(e.target.value); }, placeholder: placeholder, className: "".concat(className && " ".concat(className), " w-full px-4 py-2 rounded-md border focus:outline-none focus:ring-purple-500\n                    ").concat(error ? "border-red-500 text-[#161B25]" : '', "\n                    ").concat(value ? "border-purple-500 text-gray-900" : "border-gray-300 text-gray-900", "\n                    ").concat(error ? "focus:ring-red-400" : '', "\n                    ").concat(value ? "focus:ring-purple-500" : "focus:ring-indigo-300", "\n                    ").concat(isPassword ? "pr-10" : "", "\n                    "), required: isRequired }),
+            isPassword && (react_1.default.createElement("button", { type: "button", className: "absolute inset-y-0 right-3 flex items-center text-gray-400", onClick: function () { return setShowPassword(function (prev) { return !prev; }); } }, showPassword ? (react_1.default.createElement(lucide_react_1.Eye, { className: "h-5 w-5" })) : (react_1.default.createElement(lucide_react_1.EyeOff, { className: "h-5 w-5" }))))),
+        error && (react_1.default.createElement(ErrorComponent_1.default, { error: error }))));
+};
+exports.default = react_1.default.memo(Input);

package/{src/Components/Input/Input/InputProps.tsx → dist/Components/Input/Input/InputProps.d.ts}

@@ -14,5 +14,4 @@ export type InputProps = {
     autoComplete?: string;
     autoFocus?: boolean;
     isRequired?: boolean;
-
-}
+};

package/dist/Components/Input/Input/InputProps.js

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

package/dist/Components/Input/TextInput.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TextInputProps } from "./TextInputProps";
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>>;
+export default _default;

package/dist/Components/Input/TextInput.js

@@ -0,0 +1,68 @@
+"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;
+};
+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 FormLabel_1 = require("../Common/FormLabel");
+var HelperText_1 = __importDefault(require("../Common/HelperText"));
+var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
+var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
+    return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
+        react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, height: height },
+            inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle), inputLeftIcon)),
+            react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
+            inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle), inputRightIcon))),
+        error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
+        helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
+});
+TextInput.displayName = "TextInput";
+exports.default = react_1.default.memo(TextInput);

package/dist/Components/Input/TextInput.stories.d.ts

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

package/dist/Components/Input/TextInput.stories.js

@@ -0,0 +1,8 @@
+"use strict";
+// import React from "react";
+// import type { Meta, StoryObj } from "@storybook/react";
+// import { fn } from "@storybook/test";
+// import { TextInputProps } from "./TextInputProps";
+// import TextInput from "./TextInput";
+// import { useState } from "react";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Input/TextInput.styles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Input: ComponentStyleConfig;

package/{src/Components/Input/TextInput.styles.ts → dist/Components/Input/TextInput.styles.js}

@@ -1,10 +1,9 @@
-
-import { ComponentStyleConfig } from "@chakra-ui/react";
-
-export const Input: ComponentStyleConfig = {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+exports.Input = {
     baseStyle: {
         field: {
-
             fontWeight: 500,
             fontSize: "0.875rem",
             letterSpacing: "0.044rem",
@@ -25,19 +24,19 @@ export const Input: ComponentStyleConfig = {
         },
     },
     variants: {
-        outline: (props) => {
-            const { theme } = props;
-            const errorColor = theme.colors.semantic?.error?.[500] ?? "red.500";
-            const borderColor = theme.colors.boxborder?.[500] ?? "gray.300";
-            const shadowPrimary = theme.colors.boxShadow?.primary ?? "blue.100";
-            const shadowError = theme.colors.boxShadow?.error ?? "red.100";
-            const primary = theme.colors.primary?.[500] ?? "blue.500";
-
+        outline: function (props) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var theme = props.theme;
+            var errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            var borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.300";
+            var shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            var shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            var primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
             return {
                 field: {
-                    bg: theme.colors.gray?.[50] ?? "gray.50",
+                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
                     border: "0.063rem solid",
-                    borderColor,
+                    borderColor: borderColor,
                     _hover: {
                         borderColor: primary,
                         // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
@@ -45,12 +44,12 @@ export const Input: ComponentStyleConfig = {
                     },
                     _focus: {
                         borderColor: primary,
-                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowPrimary),
                         outline: "0"
                     },
                     _invalid: {
                         borderColor: errorColor,
-                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        boxShadow: "0 0 0 0.125rem ".concat(shadowError),
                         _hover: {
                             borderColor: errorColor,
                             // boxShadow: `0 0 0 0.125rem ${shadowError}`,
@@ -58,7 +57,7 @@ export const Input: ComponentStyleConfig = {
                         },
                         _focus: {
                             borderColor: errorColor,
-                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            boxShadow: "0 0 0 0.125rem ".concat(shadowError),
                             outline: "0"
                         },
                     },
@@ -66,12 +65,12 @@ export const Input: ComponentStyleConfig = {
                         boxShadow: 'inherit',
                     },
                     _disabled: {
-                        bg: theme.colors.gray?.[100] ?? "gray.100",
+                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
                         opacity: 1,
                         cursor: "not-allowed",
                         _hover: {
                             border: "0.063rem solid",
-                            borderColor,
+                            borderColor: borderColor,
                         },
                     },
                 },

package/{src/Components/Input/TextInputProps.tsx → dist/Components/Input/TextInputProps.d.ts}

@@ -1,25 +1,6 @@
+/// <reference types="react" />
 import { InputProps } from "@chakra-ui/react";
-
-export type TextInputProps = Pick<
-    InputProps,
-    | "value"
-    | "type"
-    | "onChange"
-    | "placeholder"
-    | "onBlur"
-    | "onFocus"
-    | "isDisabled"
-    | "isRequired"
-    | "isReadOnly"
-    | "width"
-    | "height"
-    | "errorBorderColor"
-    | "size"
-    | "onKeyDown"
-    | "onKeyUp"
-    | "onMouseEnter"
-    | "onMouseLeave"
-> & {
+export type TextInputProps = Pick<InputProps, "value" | "type" | "onChange" | "placeholder" | "onBlur" | "onFocus" | "isDisabled" | "isRequired" | "isReadOnly" | "width" | "height" | "errorBorderColor" | "size" | "onKeyDown" | "onKeyUp" | "onMouseEnter" | "onMouseLeave"> & {
     label?: string;
     id?: string;
     name?: string;

package/dist/Components/Input/TextInputProps.js

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

package/dist/Components/InputTextArea/InputTextArea.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { InputTextAreaProps } from "./InputTextAreaProps";
+export default function InputTextArea({ label, placeholder, value, onChange, size, resize, width, isDisabled, errorBorderColor, focusBorderColor, isReadOnly, isRequired, error, errorMessage, helperText, rows, height, }: InputTextAreaProps): React.JSX.Element;

package/dist/Components/InputTextArea/InputTextArea.js

@@ -0,0 +1,16 @@
+"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 InputTextArea(_a) {
+    var label = _a.label, placeholder = _a.placeholder, value = _a.value, onChange = _a.onChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.resize, resize = _c === void 0 ? "both" : _c, _d = _a.width, width = _d === void 0 ? 500 : _d, isDisabled = _a.isDisabled, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, isReadOnly = _a.isReadOnly, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, rows = _a.rows, height = _a.height;
+    return (react_1.default.createElement(react_2.FormControl, { isRequired: isRequired, isInvalid: error },
+        label && react_1.default.createElement(react_2.FormLabel, { mb: "0.25rem" }, label),
+        react_1.default.createElement(react_2.Textarea, { placeholder: placeholder, value: value, onChange: onChange, size: size, resize: resize, isDisabled: isDisabled, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, isReadOnly: isReadOnly, isInvalid: error, width: width, rows: rows, height: height }),
+        error && react_1.default.createElement(react_2.FormErrorMessage, { pl: 4 }, errorMessage),
+        helperText && !error && (react_1.default.createElement(react_2.FormHelperText, { pl: 4 }, helperText))));
+}
+exports.default = InputTextArea;

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

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

package/dist/Components/InputTextArea/InputTextArea.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React from "react";
+// import type { Meta, StoryObj } from "@storybook/react/*";
+// import { InputTextAreaProps } from "./InputTextAreaProps";
+// import InputTextArea from "./InputTextArea";
+// import { useState } from "react";
+Object.defineProperty(exports, "__esModule", { value: true });

package/{src/Components/InputTextArea/InputTextAreaProps.tsx → dist/Components/InputTextArea/InputTextAreaProps.d.ts}

@@ -1,5 +1,4 @@
 import { TextareaProps } from "@chakra-ui/react";
-
 export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "onChange" | "size" | "resize" | "isDisabled" | "errorBorderColor" | "focusBorderColor" | "isReadOnly" | "isRequired" | "variant"> & {
     label?: string;
     error?: boolean;
@@ -8,4 +7,4 @@ export type InputTextAreaProps = Pick<TextareaProps, "placeholder" | "value" | "
     width?: string | number;
     rows?: number;
     height?: string | number;
-}
+};

package/dist/Components/InputTextArea/InputTextAreaProps.js

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

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.toString(), 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;