pixelize-design-library 2.3.1-beta.13 → 2.3.1-beta.15

package/dist/Components/StageProgress/StepperStage.js

@@ -0,0 +1,78 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var StageProgressProps_1 = require("./StageProgressProps");
+var sizeMap = {
+    sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
+    md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
+    lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
+};
+var StepperStage = function (_a) {
+    var label = _a.label, number = _a.number, state = _a.state, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.colorScheme, colorScheme = _c === void 0 ? "primary" : _c, onClick = _a.onClick, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.showCheck, showCheck = _f === void 0 ? true : _f, isFirst = _a.isFirst, isLast = _a.isLast, leftDone = _a.leftDone, rightDone = _a.rightDone, _g = _a.scrollIntoViewWhenActive, scrollIntoViewWhenActive = _g === void 0 ? true : _g;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    var ref = (0, react_1.useRef)(null);
+    var s = sizeMap[size];
+    var interactive = !isReadOnly && !disabled;
+    (0, react_1.useEffect)(function () {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    var filled = state === "active" || state === "completed";
+    var circleBg = filled ? palette.strong : theme.colors.white;
+    var circleColor = filled ? palette.onStrong : palette.mutedText;
+    var circleBorder = filled ? palette.strong : palette.muted;
+    var line = function (done, hidden) { return (react_1.default.createElement(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" })); };
+    return (react_1.default.createElement(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, role: "group", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", width: "100%" },
+            line(leftDone, isFirst),
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+                    ? { boxShadow: "0 0 0 4px ".concat(palette.soft) }
+                    : undefined, _groupHover: interactive
+                    ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }
+                    : undefined }, showCheck && state === "completed" ? react_1.default.createElement(lucide_react_1.Check, { size: s.icon }) : number),
+            line(rightDone, isLast)),
+        react_1.default.createElement(react_2.Text, { mt: 2, px: 1, fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, _groupHover: interactive ? { color: palette.strong } : undefined }, label)));
+};
+exports.default = StepperStage;

package/dist/Components/UpgradeButton/UpgradeButton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { UpgradeButtonProps } from "./UpgradeButtonProps";
+declare const UpgradeButton: React.FC<UpgradeButtonProps>;
+export default UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var sizeMap = {
+    sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
+    md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
+    lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
+};
+var DEFAULT_GRADIENT = { from: "#667eea", to: "#764ba2" };
+var UpgradeButton = function (_a) {
+    var label = _a.label, mobileLabel = _a.mobileLabel, subtitle = _a.subtitle, _b = _a.icon, icon = _b === void 0 ? lucide_react_1.Sparkles : _b, _c = _a.iconColor, iconColor = _c === void 0 ? "#FFD66B" : _c, _d = _a.gradient, gradient = _d === void 0 ? DEFAULT_GRADIENT : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.shimmer, shimmer = _f === void 0 ? true : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.isDisabled, isDisabled = _h === void 0 ? false : _h, _j = _a.maxLabelWidth, maxLabelWidth = _j === void 0 ? "160px" : _j, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
+    var s = sizeMap[size];
+    var Icon = icon;
+    var blocked = isLoading || isDisabled;
+    var g = "linear-gradient(135deg, ".concat(gradient.from, " 0%, ").concat(gradient.to, " 100%)");
+    var gReversed = "linear-gradient(135deg, ".concat(gradient.to, " 0%, ").concat(gradient.from, " 100%)");
+    var hasMobile = !!mobileLabel && mobileLabel !== label;
+    return (react_1.default.createElement(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: "0 0 0 3px ".concat(gradient.from, "55") }, _hover: blocked
+            ? undefined
+            : __assign({ transform: "translateY(-2px)", bgImage: gReversed, boxShadow: "0 10px 30px ".concat(gradient.from, "66") }, (shimmer ? { _before: { left: "130%" } } : {})), sx: shimmer
+            ? {
+                _before: {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "-75%",
+                    width: "55%",
+                    height: "100%",
+                    background: "linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent)",
+                    transform: "skewX(-20deg)",
+                    transition: "left 0.7s ease",
+                    pointerEvents: "none",
+                },
+            }
+            : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1 },
+            react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block" }, label),
+            hasMobile && (react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" } }, mobileLabel)),
+            isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && react_1.default.createElement(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))),
+        subtitle && (react_1.default.createElement(react_2.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: iconColor, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1 }, subtitle))));
+};
+exports.default = UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -0,0 +1,30 @@
+import { ElementType } from "react";
+export type UpgradeButtonSize = "sm" | "md" | "lg";
+export interface UpgradeButtonProps {
+    /** Primary label (shown on md+ screens). */
+    label: string;
+    /** Compact label for small screens. Defaults to `label`. */
+    mobileLabel?: string;
+    /** Optional small second line, e.g. a plan-expiry message. */
+    subtitle?: string;
+    /** Leading icon. Defaults to lucide `Sparkles`. Pass null to hide. */
+    icon?: ElementType | null;
+    /** Icon color. Defaults to a gold tone. */
+    iconColor?: string;
+    /** Gradient stops. Defaults to the brand purple gradient. */
+    gradient?: {
+        from: string;
+        to: string;
+    };
+    size?: UpgradeButtonSize;
+    /** Animated light sweep on hover. Default true. */
+    shimmer?: boolean;
+    /** Show a spinner and block interaction. */
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** Accessible label (falls back to `label`). */
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/dist/Components/UpgradeButton/UpgradeButtonProps.js

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

package/dist/Components/UserDetails/AddUserModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { AddUserModalProps } from "./UserDetailsProps";
+declare const AddUserModal: React.FC<AddUserModalProps>;
+export default AddUserModal;

package/dist/Components/UserDetails/AddUserModal.js

@@ -0,0 +1,218 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var TextInput_1 = __importDefault(require("../Input/TextInput"));
+var SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var emptyValues = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    role: null,
+};
+var AddUserModal = function (_a) {
+    var _b, _c, _d, _e;
+    var isOpen = _a.isOpen, onClose = _a.onClose, roleOptions = _a.roleOptions, isLoading = _a.isLoading, onSubmit = _a.onSubmit, onAddRoleClick = _a.onAddRoleClick, upgradeNotice = _a.upgradeNotice, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _f = (0, react_1.useState)(emptyValues), values = _f[0], setValues = _f[1];
+    var _g = (0, react_1.useState)({}), errors = _g[0], setErrors = _g[1];
+    (0, react_1.useEffect)(function () {
+        if (!isOpen) {
+            setValues(emptyValues);
+            setErrors({});
+        }
+    }, [isOpen]);
+    var validate = function () {
+        var nextErrors = {};
+        if (!values.firstName.trim())
+            nextErrors.firstName = labels.firstNameRequired;
+        if (!values.lastName.trim())
+            nextErrors.lastName = labels.lastNameRequired;
+        if (!values.email.trim()) {
+            nextErrors.email = labels.emailRequired;
+        }
+        else if (!EMAIL_REGEX.test(values.email.trim())) {
+            nextErrors.email = labels.emailInvalid;
+        }
+        if (!values.role)
+            nextErrors.role = labels.roleRequired;
+        return nextErrors;
+    };
+    var handleChange = function (field) {
+        return function (event) {
+            var value = event.target.value;
+            setValues(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[field] = value, _a)));
+            });
+            setErrors(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[field] = undefined, _a)));
+            });
+        };
+    };
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var nextErrors;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    nextErrors = validate();
+                    if (Object.keys(nextErrors).length > 0) {
+                        setErrors(nextErrors);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+                            firstName: values.firstName.trim(),
+                            lastName: values.lastName.trim(),
+                            email: values.email.trim(),
+                            role: values.role,
+                        }))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var textFields = [
+        {
+            id: "firstName",
+            label: labels.firstName,
+            placeholder: labels.firstNamePlaceholder,
+        },
+        {
+            id: "lastName",
+            label: labels.lastName,
+            placeholder: labels.lastNamePlaceholder,
+        },
+        {
+            id: "email",
+            label: labels.email,
+            placeholder: labels.emailPlaceholder,
+            type: "email",
+        },
+    ];
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200] },
+                labels.addNewUser,
+                upgradeNotice),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 5 },
+                react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
+                    textFields.map(function (field) { return (react_1.default.createElement(react_2.FormControl, { key: field.id, isInvalid: !!errors[field.id] },
+                        react_1.default.createElement(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }))); }),
+                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true },
+                        react_1.default.createElement(SearchSelect_1.default, { label: labels.role, options: roleOptions.map(function (item) { return ({
+                                id: item.id,
+                                label: item.label,
+                            }); }), value: (_e = values.role) !== null && _e !== void 0 ? _e : undefined, onSelect: function (option) {
+                                if (!option) {
+                                    setValues(function (prev) { return (__assign(__assign({}, prev), { role: null })); });
+                                }
+                                else if (!Array.isArray(option)) {
+                                    var role_1 = {
+                                        id: Number(option.id),
+                                        label: option.label,
+                                    };
+                                    setValues(function (prev) { return (__assign(__assign({}, prev), { role: role_1 })); });
+                                    setErrors(function (prev) { return (__assign(__assign({}, prev), { role: undefined })); });
+                                }
+                            }, isRequired: true, isRemoveAllIcon: true, error: !!errors.role, errorMessage: errors.role, addNew: onAddRoleClick
+                                ? {
+                                    enabled: true,
+                                    text: labels.addNewRole,
+                                    onClick: onAddRoleClick,
+                                }
+                                : undefined })))),
+            react_1.default.createElement(react_2.ModalFooter, null,
+                react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }),
+                react_1.default.createElement(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, onClick: handleSubmit })))));
+};
+exports.default = AddUserModal;

package/dist/Components/UserDetails/ChangeRoleModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ChangeRoleModalProps } from "./UserDetailsProps";
+declare const ChangeRoleModal: React.FC<ChangeRoleModalProps>;
+export default ChangeRoleModal;

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -0,0 +1,150 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var TextInput_1 = __importDefault(require("../Input/TextInput"));
+var SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
+var ChangeRoleModal = function (_a) {
+    var _b, _c, _d, _e;
+    var isOpen = _a.isOpen, onClose = _a.onClose, userId = _a.userId, email = _a.email, currentRole = _a.currentRole, roleOptions = _a.roleOptions, isLoading = _a.isLoading, onSubmit = _a.onSubmit, onAddRoleClick = _a.onAddRoleClick, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var _f = (0, react_1.useState)(null), selectedRole = _f[0], setSelectedRole = _f[1];
+    var _g = (0, react_1.useState)(null), error = _g[0], setError = _g[1];
+    (0, react_1.useEffect)(function () {
+        if (isOpen && currentRole) {
+            var match = roleOptions.find(function (role) { return role.label.toLowerCase() === currentRole.toLowerCase(); });
+            setSelectedRole(match ? { id: match.id, label: match.label } : null);
+            setError(null);
+        }
+        else if (!isOpen) {
+            setSelectedRole(null);
+            setError(null);
+        }
+    }, [isOpen, currentRole, roleOptions]);
+    var isUnchanged = ((_b = selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === (currentRole === null || currentRole === void 0 ? void 0 : currentRole.toLowerCase());
+    var handleSubmit = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!selectedRole) {
+                        setError(labels.roleRequired);
+                        return [2 /*return*/];
+                    }
+                    if (userId == null)
+                        return [2 /*return*/];
+                    return [4 /*yield*/, (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId: userId, roleId: selectedRole.id }))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] }, labels.changeRoleTitle),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 5 },
+                react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
+                    react_1.default.createElement(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }),
+                    react_1.default.createElement(react_2.FormControl, { isInvalid: !!error, isRequired: true },
+                        react_1.default.createElement(SearchSelect_1.default, { label: labels.role, options: roleOptions.map(function (item) { return ({
+                                id: item.id,
+                                label: item.label,
+                            }); }), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: function (option) {
+                                if (!option) {
+                                    setSelectedRole(null);
+                                }
+                                else if (!Array.isArray(option)) {
+                                    setSelectedRole({
+                                        id: Number(option.id),
+                                        label: option.label,
+                                    });
+                                    setError(null);
+                                }
+                            }, isRequired: true, isRemoveAllIcon: true, error: !!error, errorMessage: error !== null && error !== void 0 ? error : undefined, addNew: onAddRoleClick
+                                ? {
+                                    enabled: true,
+                                    text: labels.addNewRole,
+                                    onClick: onAddRoleClick,
+                                }
+                                : undefined })))),
+            react_1.default.createElement(react_2.ModalFooter, null,
+                react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }),
+                react_1.default.createElement(Button_1.default, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, isDisabled: isUnchanged || !selectedRole, onClick: handleSubmit })))));
+};
+exports.default = ChangeRoleModal;

package/dist/Components/UserDetails/DeactivateConfirmModal.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { DeactivateConfirmModalProps } from "./UserDetailsProps";
+declare const DeactivateConfirmModal: React.FC<DeactivateConfirmModalProps>;
+export default DeactivateConfirmModal;

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var DeactivateConfirmModal = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var isOpen = _a.isOpen, onClose = _a.onClose, userName = _a.userName, isLoading = _a.isLoading, onConfirm = _a.onConfirm, labels = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden" },
+            react_1.default.createElement(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_j = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.red) === null || _h === void 0 ? void 0 : _h[50]) !== null && _j !== void 0 ? _j : "#FEF2F2", color: (_p = (_m = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _k === void 0 ? void 0 : _k.error) === null || _l === void 0 ? void 0 : _l[500]) !== null && _m !== void 0 ? _m : (_o = colors === null || colors === void 0 ? void 0 : colors.red) === null || _o === void 0 ? void 0 : _o[500]) !== null && _p !== void 0 ? _p : "#EF4444" },
+                    react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 })),
+                react_1.default.createElement(react_2.Text, { fontSize: "1.05rem", fontWeight: 600 }, labels.confirmDeactivation)),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { py: 6 },
+                react_1.default.createElement(react_2.VStack, { spacing: 4, align: "stretch" },
+                    react_1.default.createElement(react_2.Text, { fontSize: "md", fontWeight: 500, color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[800] }, labels.deactivateConfirmQuestion),
+                    react_1.default.createElement(react_2.Box, { bg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : "#F8FAFC", borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200] },
+                        react_1.default.createElement(react_2.Text, { color: (_w = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _w === void 0 ? void 0 : _w[600], fontSize: "sm" },
+                            userName ? "".concat(userName, " ") : "",
+                            labels.deactivateConfirmDescription)),
+                    react_1.default.createElement(react_2.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2 },
+                        react_1.default.createElement(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }),
+                        react_1.default.createElement(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: react_1.default.createElement(lucide_react_1.Trash2, { size: 16 }) })))))));
+};
+exports.default = DeactivateConfirmModal;

package/dist/Components/UserDetails/UserDetails.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { UserDetailsProps } from "./UserDetailsProps";
+declare const UserDetails: React.FC<UserDetailsProps>;
+export default UserDetails;