pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.20

package/dist/Components/RolesPermission/RolesPermissionProps.d.ts

@@ -0,0 +1,117 @@
+import { ReactNode } from "react";
+export type PermissionKey = "read" | "create" | "edit" | "delete" | "import" | "export" | "automation";
+export type Permission = {
+    module: string;
+    read: boolean;
+    create: boolean;
+    edit: boolean;
+    delete: boolean;
+    import?: boolean;
+    export?: boolean;
+    automation?: boolean;
+};
+export type RoleData = {
+    roleName: string;
+    createdBy: string;
+    created_at: string;
+    permission: Permission[];
+    roles_id: string;
+    designation: string;
+    makeSuperAdmin?: boolean;
+    automation?: boolean;
+    trackLocation?: boolean;
+    show_records?: boolean;
+};
+export type RolesPermissionView = "list" | "form";
+export type RolesPermissionMode = "create" | "edit" | "view";
+/**
+ * All user-facing strings. Provide translated values from the host app; every
+ * key has a sensible English default so the component works standalone.
+ */
+export type RolesPermissionLabels = {
+    title?: string;
+    totalRoles?: string;
+    newRole?: string;
+    sNo?: string;
+    roleNameColumn?: string;
+    createdBy?: string;
+    createdTime?: string;
+    actions?: string;
+    noRoles?: string;
+    view?: string;
+    edit?: string;
+    delete?: string;
+    roleInformation?: string;
+    roleName?: string;
+    roleNamePlaceholder?: string;
+    enableAllPermissions?: string;
+    trackLocation?: string;
+    showAllUserRecords?: string;
+    permissionSettings?: string;
+    moduleName?: string;
+    read?: string;
+    create?: string;
+    editPermission?: string;
+    deletePermission?: string;
+    importPermission?: string;
+    exportPermission?: string;
+    noPermissions?: string;
+    cancel?: string;
+    saveChanges?: string;
+    updateChanges?: string;
+    readOnly?: string;
+    deleteRole?: string;
+    deleteRoleConfirm?: string;
+};
+export interface RolesPermissionProps {
+    /** Which view to render. */
+    view: RolesPermissionView;
+    /** Form mode (controls read-only vs editable form). */
+    mode?: RolesPermissionMode;
+    /** Roles list data. */
+    roles: RoleData[];
+    isRolesLoading?: boolean;
+    /** Permission matrix rows for the form view. */
+    permissions: Permission[];
+    /** Columns rendered in the matrix. Defaults to all non-automation keys. */
+    permissionKeys?: PermissionKey[];
+    /** Form field values (controlled). */
+    roleName: string;
+    roleNameError?: string;
+    isSuperAdmin: boolean;
+    isTrackLocation: boolean;
+    isShowRecords: boolean;
+    /** Whether the role is being edited (changes the Save button label). */
+    isEditing?: boolean;
+    /** Save in-flight flag. */
+    isSaving?: boolean;
+    /** List actions. */
+    onNewRole?: () => void;
+    onViewRole?: (role: RoleData) => void;
+    onEditRole?: (role: RoleData) => void;
+    onDeleteRole?: (roleId: number) => void;
+    onBack?: () => void;
+    /** Form actions. */
+    onRoleNameChange?: (value: string) => void;
+    onToggleSuperAdmin?: (checked: boolean) => void;
+    onToggleTrackLocation?: (checked: boolean) => void;
+    onToggleShowRecords?: (checked: boolean) => void;
+    onPermissionChange?: (module: string, key: PermissionKey) => void;
+    onSave?: () => void;
+    onCancelForm?: () => void;
+    /** App-specific sections rendered under the roles list (e.g. ModuleDelete, SignInActivity). */
+    footerSlot?: ReactNode;
+    /** Icon shown in the matrix for granted permissions in view mode. */
+    checkIcon?: ReactNode;
+    /** Translated/override strings. */
+    labels?: RolesPermissionLabels;
+    /** Outer padding override. Defaults to a compact value. */
+    padding?: string;
+}
+export interface DeleteRoleModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    isLoading?: boolean;
+    labels: Required<Pick<RolesPermissionLabels, "deleteRole" | "deleteRoleConfirm" | "cancel" | "delete">>;
+}

package/dist/Components/RolesPermission/RolesPermissionProps.js

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

package/dist/Components/ScrollToTop/ScrollToTop.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface ScrollToTopProps {
+    /** Content to wrap. The button watches the nearest scrollable ancestor. */
+    children: React.ReactNode;
+    /** Tooltip label on the button. */
+    tooltipLabel?: string;
+    /** Scroll distance (px) after which the button appears. */
+    threshold?: number;
+    /** Smooth-scroll duration in ms. */
+    duration?: number;
+    /** Pin to a window-level scroll instead of the wrapped parent. */
+    useWindow?: boolean;
+    /** Distance from the bottom edge. */
+    bottom?: string;
+    /** Distance from the right edge. */
+    right?: string;
+}
+declare const ScrollToTop: React.FC<ScrollToTopProps>;
+export default ScrollToTop;

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -0,0 +1,104 @@
+"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 __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 lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var ScrollToTop = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.tooltipLabel, tooltipLabel = _c === void 0 ? "Scroll to top" : _c, _d = _a.threshold, threshold = _d === void 0 ? 300 : _d, _e = _a.duration, duration = _e === void 0 ? 600 : _e, _f = _a.useWindow, useWindow = _f === void 0 ? false : _f, _g = _a.bottom, bottom = _g === void 0 ? "2rem" : _g, _h = _a.right, right = _h === void 0 ? "2rem" : _h;
+    var _j = (0, react_1.useState)(false), visible = _j[0], setVisible = _j[1];
+    var anchorRef = (0, react_1.useRef)(null);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var getScroller = function () {
+        var _a, _b;
+        if (useWindow)
+            return window;
+        return (_b = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null;
+    };
+    var handleScroll = function () {
+        var _a;
+        var scroller = getScroller();
+        var top = scroller === window
+            ? window.scrollY
+            : (_a = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        setVisible(top >= threshold);
+    };
+    var scrollToTop = function () {
+        var scroller = getScroller();
+        if (!scroller)
+            return;
+        var start = scroller === window ? window.scrollY : scroller.scrollTop;
+        var startTime = performance.now();
+        var step = function (now) {
+            var progress = Math.min((now - startTime) / duration, 1);
+            var eased = progress < 0.5
+                ? 2 * progress * progress
+                : -1 + (4 - 2 * progress) * progress;
+            var next = start * (1 - eased);
+            if (scroller === window)
+                window.scrollTo(0, next);
+            else
+                scroller.scrollTop = next;
+            if (progress < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    };
+    (0, react_1.useEffect)(function () {
+        var scroller = getScroller();
+        if (!scroller)
+            return;
+        scroller.addEventListener("scroll", handleScroll);
+        handleScroll();
+        return function () { return scroller.removeEventListener("scroll", handleScroll); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [useWindow, threshold]);
+    return (react_1.default.createElement(react_2.Box, { ref: anchorRef, position: "relative" },
+        children,
+        react_1.default.createElement(ToolTip_1.default, { label: tooltipLabel, placement: "left" },
+            react_1.default.createElement(react_2.Box, { onClick: scrollToTop, role: "button", "aria-label": tooltipLabel, position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.white, boxShadow: "0 4px 14px rgba(0,0,0,0.25)", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+                    bg: (_b = theme.colors.primary[600]) !== null && _b !== void 0 ? _b : theme.colors.primary[500],
+                    transform: "translateY(-2px) scale(1.05)",
+                    boxShadow: "0 6px 20px rgba(0,0,0,0.3)",
+                }, _active: { transform: "scale(0.95)" } },
+                react_1.default.createElement(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 })))));
+};
+exports.default = ScrollToTop;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -90,19 +90,26 @@ var SearchSelect = function (_a) {
     var _y = (0, react_1.useState)(true), hasMore = _y[0], setHasMore = _y[1];
     var inputRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
+    var controlRef = (0, react_1.useRef)(null);
+    var _z = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), dropdownPos = _z[0], setDropdownPos = _z[1];
     var scrollTimeoutRef = (0, react_1.useRef)(null);
-    var _z = (0, react_1.useState)(false), focused = _z[0], setFocused = _z[1];
-    var _0 = (0, react_1.useState)(false), customSelectOpen = _0[0], setCustomSelectOpen = _0[1];
+    var _0 = (0, react_1.useState)(false), focused = _0[0], setFocused = _0[1];
+    var _1 = (0, react_1.useState)(false), customSelectOpen = _1[0], setCustomSelectOpen = _1[1];
     var customSelectRef = (0, react_1.useRef)(null);
-    var _1 = (0, react_1.useState)({
+    var _2 = (0, react_1.useState)({
         top: 0,
         left: 0,
         width: 0,
-    }), customSelectPos = _1[0], setCustomSelectPos = _1[1];
+    }), customSelectPos = _2[0], setCustomSelectPos = _2[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     (0, react_2.useOutsideClick)({
         ref: containerRef,
-        handler: function () {
+        handler: function (e) {
+            // The options dropdown is portaled to <body>, so a click on it is "outside"
+            // the container — ignore those so selecting an option doesn't close first.
+            var dropdown = document.getElementById("searchselect-dropdown-portal");
+            if (dropdown && dropdown.contains(e.target))
+                return;
             setIsOpen(false);
         },
     });
@@ -223,10 +230,34 @@ var SearchSelect = function (_a) {
             });
         }
     }, [customSelectOpen]);
+    // Keep the portaled options dropdown anchored to the control (on open + while
+    // open if the page/modal scrolls or resizes).
+    var updateDropdownPos = (0, react_1.useCallback)(function () {
+        if (!controlRef.current)
+            return;
+        var rect = controlRef.current.getBoundingClientRect();
+        setDropdownPos({
+            top: rect.bottom + window.scrollY,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+        });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!isOpen)
+            return;
+        updateDropdownPos();
+        // `true` (capture) catches scrolling inside any ancestor (e.g. modal body).
+        window.addEventListener("scroll", updateDropdownPos, true);
+        window.addEventListener("resize", updateDropdownPos);
+        return function () {
+            window.removeEventListener("scroll", updateDropdownPos, true);
+            window.removeEventListener("resize", updateDropdownPos);
+        };
+    }, [isOpen, updateDropdownPos]);
     return (react_1.default.createElement(react_2.Box, { ref: containerRef, width: width, position: "relative" },
         label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation !== null && isInformation !== void 0 ? isInformation : information === null || information === void 0 ? void 0 : information.isInformation, informationMessage: informationMessage !== null && informationMessage !== void 0 ? informationMessage : information === null || information === void 0 ? void 0 : information.informationMessage })),
         react_1.default.createElement(react_2.InputGroup, { size: size },
-            react_1.default.createElement(react_2.Box, { as: "div", w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
+            react_1.default.createElement(react_2.Box, { as: "div", ref: controlRef, w: "100%", minH: s.minH, px: s.px, pr: s.pr, position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: s.gap, border: "0.063rem solid", borderColor: error
                     ? theme.colors.semantic.error[500]
                     : focused
                         ? theme.colors.primary[500]
@@ -275,22 +306,23 @@ var SearchSelect = function (_a) {
                             e.stopPropagation();
                             setIsOpen(function (prev) { return !prev; });
                         }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center" }, isOpen ? (react_1.default.createElement(lucide_react_1.ChevronUp, { size: s.chevronSize })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevronSize }))))))),
-        isOpen && (react_1.default.createElement(react_2.Box, { position: "absolute", zIndex: 10, width: "100%", maxH: "20rem", borderWidth: 1, borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
-            isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                react_1.default.createElement(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
-                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
-            react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
-                react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
-                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
-                filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
-                    isMultiple && (react_1.default.createElement(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })),
-                    option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }),
-                ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
+        isOpen && (react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(react_2.Box, { id: "searchselect-dropdown-portal", position: "absolute", top: "".concat(dropdownPos.top, "px"), left: "".concat(dropdownPos.left, "px"), width: "".concat(dropdownPos.width, "px"), zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.gray[200], borderRadius: "sm", bg: theme.colors.white, boxShadow: "md", display: "flex", flexDirection: "column" },
+                isMultiple && isSelectAll && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
+                    react_1.default.createElement(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }),
+                    react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, allFilteredSelected ? "Unselect All" : "Select All"))),
+                react_1.default.createElement(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.gray[200] }, isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH },
                     react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
-                    react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText)))))),
-            (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
-                addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
-                react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New"))))),
+                    react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText))) : !isOptionLoading && filteredOptions.length === 0 ? (react_1.default.createElement(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.gray[500] }, "No results found")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    filteredOptions.map(function (option) { return (react_1.default.createElement(react_2.Box, { key: option.id, py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: isSelected(option.id) ? theme.colors.gray[100] : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: function () { return handleSelect(option); }, display: "flex", alignItems: "center", gap: 2, borderBottom: "0.063rem solid ".concat(theme.colors.gray[100]) },
+                        isMultiple && (react_1.default.createElement(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })),
+                        option.view ? (react_1.default.createElement(react_1.default.Fragment, null, option.view)) : (react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, option.label)))); }),
+                    ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH },
+                        react_1.default.createElement(react_2.Spinner, { size: s.spinnerSize }),
+                        react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, loadingText)))))),
+                (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && (react_1.default.createElement(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.gray[200], bg: theme.colors.white, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] } },
+                    addNew.icon || react_1.default.createElement(lucide_react_1.Plus, { size: s.addNewIconSize }),
+                    react_1.default.createElement(react_2.Text, { fontSize: s.dropdownTextFontSize }, addNew.text || "Add New")))))),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText }),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage })));
 };

package/dist/Components/SideBar/components/OtherApps.test.js

@@ -78,10 +78,11 @@ describe("OtherApps", function () {
     beforeEach(function () {
         jest.clearAllMocks();
     });
-    it("does not render flyout copy when expanded", function () {
+    it("renders the section header and inline labels when expanded", function () {
         renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: false, otherApps: sampleApps }));
-        expect(react_2.screen.getByText("Other Apps")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Switch app")).toBeInTheDocument();
         expect(react_2.screen.getByText("Billing")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Tickets")).toBeInTheDocument();
         expect(react_2.screen.queryAllByRole("tooltip")).toHaveLength(0);
     });
     it("shows flyout with Open label on hover when collapsed", function () { return __awaiter(void 0, void 0, void 0, function () {

package/dist/Components/SignInActivityTable/SignInActivityTable.d.ts

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

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -0,0 +1,95 @@
+"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 __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 lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+var DEFAULT_LABELS = {
+    title: "Recent Sign-in Devices",
+    browser: "Browser",
+    device: "Device",
+    recentActivity: "Recent Activity",
+    noActivity: "No recent sign-in activity",
+};
+var SignInActivityTable = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var devices = _a.devices, _o = _a.isLoading, isLoading = _o === void 0 ? false : _o, labelOverrides = _a.labels;
+    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
+    var labels = (0, react_1.useMemo)(function () { return (__assign(__assign({}, DEFAULT_LABELS), labelOverrides)); }, [labelOverrides]);
+    var border = (_e = (_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]) !== null && _e !== void 0 ? _e : "#E2E8F0";
+    var surface = (_f = colors === null || colors === void 0 ? void 0 : colors.white) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    var muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    var heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    var headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
+    var thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    return (react_1.default.createElement(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: "0 1px 2px rgba(16,24,40,0.05)", overflow: "hidden" },
+        react_1.default.createElement(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center" },
+            react_1.default.createElement(react_2.Heading, { size: "sm", fontWeight: 600, color: heading }, labels.title)),
+        react_1.default.createElement(react_2.Box, { overflowX: "auto" }, isLoading ? (react_1.default.createElement(react_2.VStack, { spacing: 3, p: 4, align: "stretch" }, Array.from({ length: 4 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Skeleton, { key: idx, height: "18px", borderRadius: "md" })); }))) : devices.length === 0 ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : (react_1.default.createElement(react_2.Table, { variant: "simple", size: "sm" },
+            react_1.default.createElement(react_2.Thead, { bg: headBg },
+                react_1.default.createElement(react_2.Tr, null,
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.browser),
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.device),
+                    react_1.default.createElement(react_2.Th, __assign({}, thStyle), labels.recentActivity))),
+            react_1.default.createElement(react_2.Tbody, null, devices.map(function (device, index) { return (react_1.default.createElement(react_2.Tr, { key: index, _hover: { bg: headBg }, transition: "background 0.15s ease" },
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading }, device.browser || "—"),
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted }, device.device),
+                react_1.default.createElement(react_2.Td, { borderColor: border, fontSize: "sm", color: muted },
+                    react_1.default.createElement(react_2.Text, null, device.activity)))); })))))));
+};
+exports.default = SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTable.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/SignInActivityTable/SignInActivityTable.test.js

@@ -0,0 +1,63 @@
+"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("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var SignInActivityTable_1 = __importDefault(require("./SignInActivityTable"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: {
+                50: "#f8fafc",
+                100: "#f0f0f0",
+                200: "#e2e8f0",
+                500: "#64748b",
+                600: "#475569",
+                800: "#1e293b",
+            },
+            primary: { 50: "#eef2ff", 500: "#6366f1" },
+            boxborder: { 200: "#e2e8f0" },
+        },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+});
+var devices = [
+    { browser: "Chrome", device: "MacBook Pro", activity: "2 minutes ago" },
+    { browser: "Safari", device: "iPhone 15", activity: "Yesterday" },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("SignInActivityTable", function () {
+    it("renders the device rows", function () {
+        renderWithChakra(react_1.default.createElement(SignInActivityTable_1.default, { devices: devices }));
+        expect(react_2.screen.getByText("Recent Sign-in Devices")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Chrome")).toBeInTheDocument();
+        expect(react_2.screen.getByText("MacBook Pro")).toBeInTheDocument();
+        expect(react_2.screen.getByText("2 minutes ago")).toBeInTheDocument();
+    });
+    it("shows an empty state when there is no activity", function () {
+        renderWithChakra(react_1.default.createElement(SignInActivityTable_1.default, { devices: [] }));
+        expect(react_2.screen.getByText("No recent sign-in activity")).toBeInTheDocument();
+    });
+});

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -0,0 +1,21 @@
+export type SignInDevice = {
+    browser: string;
+    device: string;
+    activity: string;
+};
+/**
+ * All user-facing strings. Provide translated values from the host app; every
+ * key has a sensible English default so the component works standalone.
+ */
+export type SignInActivityLabels = {
+    title?: string;
+    browser?: string;
+    device?: string;
+    recentActivity?: string;
+    noActivity?: string;
+};
+export interface SignInActivityTableProps {
+    devices: SignInDevice[];
+    isLoading?: boolean;
+    labels?: SignInActivityLabels;
+}

package/dist/Components/SignInActivityTable/SignInActivityTableProps.js

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

package/dist/Components/StageProgress/StageItem.d.ts

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