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

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -0,0 +1,264 @@
+"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 lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var Button_1 = __importDefault(require("../Button/Button"));
+var EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+var CreateOrgModal_1 = __importDefault(require("./CreateOrgModal"));
+var DeleteOrgModal_1 = __importDefault(require("./DeleteOrgModal"));
+var DEFAULT_LABELS = {
+    greeting: "Hello, User!",
+    manageSubtitle: "Manage your organizations",
+    organizationDetails: "Organization Details",
+    createNewOrganization: "Create New Organization",
+    createOrganization: "Create Organization",
+    activeOrganizations: "Active Organizations",
+    invitedOrganizations: "Invited Organizations",
+    setAsDefault: "Set as Default",
+    settingDefault: "Setting...",
+    default: "Default",
+    pending: "Pending",
+    accept: "Accept",
+    accepting: "Accepting...",
+    decline: "Decline",
+    deleteOrganization: "Delete Organization",
+    protectedOrganization: "Protected organization",
+    delete: "Delete",
+    noOrganizationsTitle: "No organizations found",
+    noOrganizationsDescription: "Get started by creating your first organization or wait for an invitation",
+    companyName: "Company Name",
+    companyAddress: "Company Address",
+    phone: "Phone",
+    cancel: "Cancel",
+    submit: "Submit",
+    requiredField: "This field is required",
+    invalidPhone: "Phone number must be at least 8 digits",
+    confirmDeletion: "Confirm Deletion",
+    deleteConfirmText: "Are you sure you want to delete this Organization?",
+    copyright: "Pixelize Corp. All rights reserved.",
+    termsOfService: "Terms of Service",
+};
+var OrganizationDetails = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+    var activeOrganizations = _a.activeOrganizations, invitedOrganizations = _a.invitedOrganizations, _0 = _a.isLoading, isLoading = _0 === void 0 ? false : _0, _1 = _a.switchingOrgIds, switchingOrgIds = _1 === void 0 ? [] : _1, _2 = _a.respondingOrgIds, respondingOrgIds = _2 === void 0 ? [] : _2, _3 = _a.isCreating, isCreating = _3 === void 0 ? false : _3, userName = _a.userName, userAvatarUrl = _a.userAvatarUrl, onSetDefault = _a.onSetDefault, onAcceptInvite = _a.onAcceptInvite, onDeclineInvite = _a.onDeclineInvite, onDeleteOrganization = _a.onDeleteOrganization, onCreateOrganization = _a.onCreateOrganization, onBack = _a.onBack, footerSlot = _a.footerSlot, 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 _4 = (0, react_1.useState)(false), isCreateOpen = _4[0], setCreateOpen = _4[1];
+    var _5 = (0, react_1.useState)(null), deleteOrgId = _5[0], setDeleteOrgId = _5[1];
+    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 subtle = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : "#475569";
+    var heading = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[800]) !== null && _m !== void 0 ? _m : "#1E293B";
+    var pageBg = (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#F8FAFC";
+    var primary50 = (_r = (_q = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _q === void 0 ? void 0 : _q[50]) !== null && _r !== void 0 ? _r : "#EEF2FF";
+    var primary100 = (_t = (_s = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : "#E0E7FF";
+    var primary500 = (_v = (_u = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _u === void 0 ? void 0 : _u[500]) !== null && _v !== void 0 ? _v : "#6366F1";
+    var primary600 = (_x = (_w = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _w === void 0 ? void 0 : _w[600]) !== null && _x !== void 0 ? _x : "#4F46E5";
+    var cardSx = {
+        backgroundColor: surface,
+        borderRadius: "xl",
+        border: "1px solid",
+        borderColor: border,
+        boxShadow: "0 1px 2px rgba(16,24,40,0.05)",
+    };
+    var sectionBadge = function (count, scheme) { return (react_1.default.createElement(react_2.Badge, { colorScheme: scheme, variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem" }, count)); };
+    var renderActiveCard = function (item) {
+        var _a, _b, _c, _d, _e, _f;
+        var isSwitching = switchingOrgIds.includes(item.orgId);
+        var isProtected = item.defaultOrg === 1;
+        return (react_1.default.createElement(react_2.Box, __assign({ key: item.orgId }, cardSx, { p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+                borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : "#A5B4FC",
+                boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
+                transform: "translateY(-3px)",
+            } }),
+            react_1.default.createElement(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600 },
+                    react_1.default.createElement(lucide_react_1.Building2, { size: 18 })),
+                react_1.default.createElement(react_2.Box, { mr: "2rem" }, item.default === 1 ? (react_1.default.createElement(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600 },
+                    react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 12 }),
+                    labels.default)) : isSwitching ? (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, color: primary500 },
+                    react_1.default.createElement(react_2.Spinner, { size: "sm" }),
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs" }, labels.settingDefault))) : (react_1.default.createElement(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: function () { return onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId); } },
+                    react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 12 }),
+                    react_1.default.createElement(react_2.Text, null, labels.setAsDefault))))),
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1 }, item.company_name),
+            react_1.default.createElement(react_2.Tooltip, { label: isProtected ? labels.protectedOrganization : labels.deleteOrganization, hasArrow: true },
+                react_1.default.createElement(react_2.IconButton, { "aria-label": labels.deleteOrganization, icon: react_1.default.createElement(lucide_react_1.Trash2, { size: 14 }), size: "xs", variant: "ghost", position: "absolute", top: 2, right: 2, borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
+                        bg: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.red) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#FEF2F2",
+                        color: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[600]) !== null && _f !== void 0 ? _f : "#DC2626",
+                    }, onClick: function () { return setDeleteOrgId(item.orgId); } }))));
+    };
+    var renderInvitedCard = function (item) {
+        var _a, _b, _c, _d;
+        var isResponding = respondingOrgIds.includes(item.orgId);
+        return (react_1.default.createElement(react_2.Box, __assign({ key: item.orgId }, cardSx, { p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+                boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
+                transform: "translateY(-3px)",
+            } }),
+            react_1.default.createElement(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2 },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#FEF9C3", color: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#CA8A04" },
+                    react_1.default.createElement(lucide_react_1.Building2, { size: 18 })),
+                react_1.default.createElement(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600 }, labels.pending)),
+            react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1 }, item.company_name),
+            item.company_url && (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2 },
+                react_1.default.createElement(lucide_react_1.Globe, { size: 13 }),
+                react_1.default.createElement(react_2.Text, { noOfLines: 1, title: item.company_url }, item.company_url))),
+            react_1.default.createElement(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border },
+                react_1.default.createElement(react_2.Box, { flex: 1 },
+                    react_1.default.createElement(Button_1.default, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: function () { return onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId); } })),
+                react_1.default.createElement(react_2.Box, { flex: 1 },
+                    react_1.default.createElement(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: function () { return onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId); } })))));
+    };
+    var gridSx = {
+        display: "grid",
+        gridTemplateColumns: {
+            base: "1fr",
+            md: "repeat(2, 1fr)",
+            lg: "repeat(3, 1fr)",
+        },
+        gap: 3,
+        width: "100%",
+    };
+    var hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
+    return (react_1.default.createElement(react_2.Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 } },
+        react_1.default.createElement(react_2.Flex, __assign({}, cardSx, { px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: "linear(135deg, ".concat(primary50, " 0%, ").concat(primary100, " 100%)") }),
+            react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: 3 },
+                onBack && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Go back", icon: react_1.default.createElement(lucide_react_1.ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })),
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: "white" },
+                    react_1.default.createElement(lucide_react_1.Building2, { size: 18 })),
+                react_1.default.createElement(react_2.Box, null,
+                    react_1.default.createElement(react_2.HStack, { spacing: 2 },
+                        react_1.default.createElement(react_2.Heading, { size: "sm", color: heading, fontWeight: 700 }, userName ? "".concat(labels.greeting.replace(/User!?/, "")).concat(userName, "!").trim() : labels.greeting),
+                        react_1.default.createElement(react_2.Avatar, { size: "xs", name: userName, src: userAvatarUrl })),
+                    react_1.default.createElement(react_2.Text, { fontSize: "xs", color: subtle, mt: 0.5 }, labels.manageSubtitle))),
+            react_1.default.createElement(Button_1.default, { label: labels.createNewOrganization, onClick: function () { return setCreateOpen(true); }, leftIcon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" })),
+        isLoading ? (react_1.default.createElement(react_2.Box, __assign({}, gridSx), Array.from({ length: 6 }).map(function (_, idx) { return (react_1.default.createElement(react_2.Box, __assign({ key: idx }, cardSx, { p: 3 }),
+            react_1.default.createElement(react_2.Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }),
+            react_1.default.createElement(react_2.SkeletonText, { noOfLines: 2, spacing: 2 }))); }))) : !hasOrganizations ? (react_1.default.createElement(EmptyState_1.default, { icon: lucide_react_1.Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: react_1.default.createElement(Button_1.default, { label: labels.createOrganization, onClick: function () { return setCreateOpen(true); }, leftIcon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 4 },
+            activeOrganizations.length > 0 && (react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 2 },
+                    react_1.default.createElement(lucide_react_1.Users, { size: 16, color: primary500 }),
+                    react_1.default.createElement(react_2.Heading, { size: "sm", color: heading, fontWeight: 600 }, labels.activeOrganizations),
+                    sectionBadge(activeOrganizations.length, "blue")),
+                react_1.default.createElement(react_2.Box, __assign({}, gridSx), activeOrganizations.map(renderActiveCard)))),
+            invitedOrganizations.length > 0 && (react_1.default.createElement(react_2.Box, null,
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 2 },
+                    react_1.default.createElement(lucide_react_1.Mail, { size: 16, color: (_z = (_y = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _y === void 0 ? void 0 : _y[500]) !== null && _z !== void 0 ? _z : "#EAB308" }),
+                    react_1.default.createElement(react_2.Heading, { size: "sm", color: heading, fontWeight: 600 }, labels.invitedOrganizations),
+                    sectionBadge(invitedOrganizations.length, "yellow")),
+                react_1.default.createElement(react_2.Box, __assign({}, gridSx), invitedOrganizations.map(renderInvitedCard)))))),
+        footerSlot,
+        react_1.default.createElement(CreateOrgModal_1.default, { isOpen: isCreateOpen, onClose: function () { return setCreateOpen(false); }, isLoading: isCreating, onSubmit: function (values) { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0: return [4 /*yield*/, (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values))];
+                        case 1:
+                            _a.sent();
+                            setCreateOpen(false);
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, labels: labels }),
+        react_1.default.createElement(DeleteOrgModal_1.default, { isOpen: deleteOrgId !== null, onClose: function () { return setDeleteOrgId(null); }, onConfirm: function () { return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(deleteOrgId !== null)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, (onDeleteOrganization === null || onDeleteOrganization === void 0 ? void 0 : onDeleteOrganization(deleteOrgId))];
+                        case 1:
+                            _a.sent();
+                            _a.label = 2;
+                        case 2:
+                            setDeleteOrgId(null);
+                            return [2 /*return*/];
+                    }
+                });
+            }); }, labels: labels })));
+};
+exports.default = OrganizationDetails;

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

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

package/dist/Components/OrganizationDetails/OrganizationDetails.test.js

@@ -0,0 +1,122 @@
+"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 OrganizationDetails_1 = __importDefault(require("./OrganizationDetails"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: {
+                50: "#f8fafc",
+                100: "#f0f0f0",
+                200: "#e2e8f0",
+                300: "#cbd5e1",
+                500: "#64748b",
+                600: "#475569",
+                700: "#334155",
+                800: "#1e293b",
+            },
+            primary: {
+                50: "#eef2ff",
+                100: "#e0e7ff",
+                300: "#a5b4fc",
+                500: "#6366f1",
+                600: "#4f46e5",
+                700: "#4338ca",
+            },
+            boxborder: { 200: "#e2e8f0" },
+            text: { 400: "#94a3b8", 500: "#64748b", 600: "#475569", 700: "#334155" },
+            secondary: { 500: "#805ad5" },
+            backgroundColor: { light: "#ffffff" },
+            yellow: { 100: "#fef9c3", 200: "#fef08a", 500: "#eab308", 600: "#ca8a04" },
+            green: { 400: "#4ade80", 500: "#22c55e" },
+            red: { 50: "#fef2f2", 400: "#f87171", 500: "#ef4444", 600: "#dc2626" },
+            semantic: { error: { 50: "#fef2f2", 500: "#ef4444" } },
+        },
+    }); },
+}); });
+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 active = [
+    {
+        orgId: 1,
+        company_name: "Acme Corp",
+        company_url: "acme.example.com",
+        default: 1,
+        uiInvite: 1,
+        defaultOrg: 1,
+    },
+    {
+        orgId: 2,
+        company_name: "Globex",
+        company_url: "globex.example.com",
+        default: 0,
+        uiInvite: 1,
+        defaultOrg: 0,
+    },
+];
+var invited = [
+    {
+        orgId: 3,
+        company_name: "Initech",
+        company_url: "initech.example.com",
+        default: 0,
+        uiInvite: 0,
+        defaultOrg: 0,
+    },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("OrganizationDetails", function () {
+    it("renders active and invited organizations", function () {
+        renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: active, invitedOrganizations: invited }));
+        expect(react_2.screen.getByText("Active Organizations")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Acme Corp")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Globex")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Invited Organizations")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Initech")).toBeInTheDocument();
+    });
+    it("shows an empty state when there are no organizations", function () {
+        renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: [], invitedOrganizations: [] }));
+        expect(react_2.screen.getByText("No organizations found")).toBeInTheDocument();
+    });
+    it("opens the create organization modal", function () {
+        renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: active, invitedOrganizations: [] }));
+        react_2.fireEvent.click(react_2.screen.getByText("Create New Organization"));
+        var dialog = react_2.screen.getByRole("dialog");
+        expect((0, react_2.within)(dialog).getByText("Create Organization")).toBeInTheDocument();
+        expect((0, react_2.within)(dialog).getByText("Company Address")).toBeInTheDocument();
+    });
+    it("opens the delete confirmation for a non-protected org", function () {
+        renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: active, invitedOrganizations: [] }));
+        react_2.fireEvent.click(react_2.screen.getAllByLabelText("Delete Organization")[1]);
+        expect(react_2.screen.getByText("Are you sure you want to delete this Organization?")).toBeInTheDocument();
+    });
+    it("calls onAcceptInvite when Accept is clicked", function () {
+        var onAcceptInvite = jest.fn();
+        renderWithChakra(react_1.default.createElement(OrganizationDetails_1.default, { activeOrganizations: [], invitedOrganizations: invited, onAcceptInvite: onAcceptInvite }));
+        react_2.fireEvent.click(react_2.screen.getByText("Accept"));
+        expect(onAcceptInvite).toHaveBeenCalledWith(3);
+    });
+});

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts

@@ -0,0 +1,88 @@
+import { ReactNode } from "react";
+export type OrganizationItem = {
+    orgId: number;
+    company_name: string;
+    company_url: string;
+    /** 1 when this org is the user's default org. */
+    default: number;
+    /** 1 = active/accepted, 0 = pending invite. */
+    uiInvite: number;
+    /** 1 when the org is protected and cannot be deleted. */
+    defaultOrg: number;
+};
+export type CreateOrgFormValues = {
+    company_name: string;
+    company_address: string;
+    phone: 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 OrganizationDetailsLabels = {
+    greeting?: string;
+    manageSubtitle?: string;
+    organizationDetails?: string;
+    createNewOrganization?: string;
+    createOrganization?: string;
+    activeOrganizations?: string;
+    invitedOrganizations?: string;
+    setAsDefault?: string;
+    settingDefault?: string;
+    default?: string;
+    pending?: string;
+    accept?: string;
+    accepting?: string;
+    decline?: string;
+    deleteOrganization?: string;
+    protectedOrganization?: string;
+    delete?: string;
+    noOrganizationsTitle?: string;
+    noOrganizationsDescription?: string;
+    companyName?: string;
+    companyAddress?: string;
+    phone?: string;
+    cancel?: string;
+    submit?: string;
+    requiredField?: string;
+    invalidPhone?: string;
+    confirmDeletion?: string;
+    deleteConfirmText?: string;
+    copyright?: string;
+    termsOfService?: string;
+};
+export interface OrganizationDetailsProps {
+    activeOrganizations: OrganizationItem[];
+    invitedOrganizations: OrganizationItem[];
+    isLoading?: boolean;
+    /** Org ids currently being switched to default. */
+    switchingOrgIds?: number[];
+    /** Org ids currently responding to an invite. */
+    respondingOrgIds?: number[];
+    isCreating?: boolean;
+    createError?: string;
+    userName?: string;
+    userAvatarUrl?: string;
+    onSetDefault?: (orgId: number) => void;
+    onAcceptInvite?: (orgId: number) => void;
+    onDeclineInvite?: (orgId: number) => void;
+    onDeleteOrganization?: (orgId: number) => void | Promise<void>;
+    onCreateOrganization?: (values: CreateOrgFormValues) => void | Promise<void>;
+    onBack?: () => void;
+    footerSlot?: ReactNode;
+    labels?: OrganizationDetailsLabels;
+}
+export interface CreateOrgModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    isLoading?: boolean;
+    onSubmit: (values: CreateOrgFormValues) => void | Promise<void>;
+    labels: Required<Pick<OrganizationDetailsLabels, "createOrganization" | "companyName" | "companyAddress" | "phone" | "cancel" | "submit" | "requiredField" | "invalidPhone">>;
+}
+export interface DeleteOrgModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    isLoading?: boolean;
+    onConfirm: () => void;
+    labels: Required<Pick<OrganizationDetailsLabels, "confirmDeletion" | "deleteConfirmText" | "cancel" | "delete">>;
+}

package/dist/Components/OrganizationDetails/OrganizationDetailsProps.js

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

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";