pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/Trail/data.js

@@ -0,0 +1,26 @@
+export const initialColumns = [
+    { id: 1, label: "project" },
+    { id: 2, label: "owner" },
+    { id: 3, label: "status" },
+    { id: 4, label: "priority" },
+    { id: 5, label: "dueDate" },
+];
+export const initialRows = [
+    {
+        id: 1,
+        project: "Project A",
+        owner: "Owner A",
+        status: "In Progress",
+        priority: "High",
+        dueDate: "2023-12-31",
+    },
+    {
+        id: 2,
+        project: "Project B",
+        owner: "Owner B",
+        status: "Completed",
+        priority: "Medium",
+        dueDate: "2023-11-30",
+    },
+    // Add more initial rows as needed
+];

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Spinner, Text } from "@chakra-ui/react";
+import { Sparkles } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { onGradient } from "../../Theme/tokens/builders/accentText";
+import { contrastRatio } from "../../Theme/tokens/builders/color";
+import { AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung";
+/** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
+const ACCENT_GOLD = "#FFD66B";
+const sizeMap = {
+    // Compact, not tiny: an 8px subtitle was unreadable, so `sm` sits deliberately
+    // close to `md` — it's the dense variant of the same badge, not a smaller one.
+    sm: { px: "14px", py: "4px", font: "13px", sub: "9px", icon: 12, radius: "44px" },
+    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" },
+};
+const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColor, variant = "brand", gradient, size = "md", shimmer = true, isLoading = false, isDisabled = false, maxLabelWidth = "160px", ariaLabel, onClick, }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const c = theme.colors;
+    // Only reachable if a consumer hand-builds a palette without `gradient`; every shipped brand sets it.
+    const themeGradient = (_a = c.gradient) !== null && _a !== void 0 ? _a : { from: c.primary[500], to: c.primary[700] };
+    // `primary`/`secondary` at [500]->[700] / [400]->[600] sit in the mid-luminance band where
+    // neither white nor black ink clears AA at both ends at once (measured worst-case as low as
+    // 2.72:1 across brands — no ink choice fixes a gradient with no readable ink at all). One rung
+    // darker moves both stops onto the same side of that divide; verified universally >=4.5 at
+    // both ends across all 9 brands x both modes. `success`/`warning`/`danger`/`info` already sit
+    // there at [400]->[600] and don't need the shift.
+    const variantGradient = {
+        brand: themeGradient,
+        primary: { from: c.primary[600], to: c.primary[800] },
+        secondary: { from: c.secondary[600], to: c.secondary[800] },
+        success: { from: c.semantic.success[400], to: c.semantic.success[600] },
+        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
+        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+        info: { from: c.semantic.info[400], to: c.semantic.info[600] },
+    };
+    const resolved = (_b = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _b !== void 0 ? _b : themeGradient;
+    // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
+    // across brands) — the label/subtitle share this computed ink instead.
+    const ink = onGradient(resolved.from, resolved.to, c.white, c.black);
+    // The gold only clears 1.4.11's 3:1 on a DARK gradient. zinc dark inverts `primary` to a
+    // near-white fill, where gold-on-near-white measures ~1.3:1 and the icon vanishes, so fall
+    // back to the label's ink whenever the gold misses either stop.
+    const resolvedIconColor = iconColor !== null && iconColor !== void 0 ? iconColor : (contrastRatio(ACCENT_GOLD, resolved.from) >= AA_NON_TEXT &&
+        contrastRatio(ACCENT_GOLD, resolved.to) >= AA_NON_TEXT
+        ? ACCENT_GOLD
+        : ink);
+    const s = sizeMap[size];
+    const Icon = icon;
+    const blocked = isLoading || isDisabled;
+    const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
+    const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
+    const hasMobile = !!mobileLabel && mobileLabel !== label;
+    return (_jsxs(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: ink, 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 ${resolved.from}55` }, _hover: blocked
+            ? undefined
+            : {
+                transform: "translateY(-2px)",
+                bgImage: gReversed,
+                boxShadow: `0 10px 30px ${resolved.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, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+};
+export default UpgradeButton;

package/dist/esm/Components/UpgradeButton/UpgradeButtonProps.js

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

package/dist/esm/Components/UserDetails/AddUserModal.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+import TextInput from "../Input/TextInput";
+import SearchSelect from "../SearchSelect/SearchSelect";
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const emptyValues = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    role: null,
+};
+const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAddRoleClick, upgradeNotice, labels, }) => {
+    var _a, _b, _c, _d;
+    const { colors } = useCustomTheme();
+    const [values, setValues] = useState(emptyValues);
+    const [errors, setErrors] = useState({});
+    useEffect(() => {
+        if (!isOpen) {
+            setValues(emptyValues);
+            setErrors({});
+        }
+    }, [isOpen]);
+    const validate = () => {
+        const 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;
+    };
+    const handleChange = (field) => (event) => {
+        const value = event.target.value;
+        setValues((prev) => ({ ...prev, [field]: value }));
+        setErrors((prev) => ({ ...prev, [field]: undefined }));
+    };
+    const handleSubmit = async () => {
+        const nextErrors = validate();
+        if (Object.keys(nextErrors).length > 0) {
+            setErrors(nextErrors);
+            return;
+        }
+        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({
+            firstName: values.firstName.trim(),
+            lastName: values.lastName.trim(),
+            email: values.email.trim(),
+            role: values.role,
+        }));
+    };
+    const 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 (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { 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%" }) }, field.id))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+                                            id: item.id,
+                                            label: item.label,
+                                        })), value: (_d = values.role) !== null && _d !== void 0 ? _d : undefined, onSelect: (option) => {
+                                            if (!option) {
+                                                setValues((prev) => ({ ...prev, role: null }));
+                                            }
+                                            else if (!Array.isArray(option)) {
+                                                const role = {
+                                                    id: Number(option.id),
+                                                    label: option.label,
+                                                };
+                                                setValues((prev) => ({ ...prev, role }));
+                                                setErrors((prev) => ({ ...prev, role: undefined }));
+                                            }
+                                        }, isRequired: true, isRemoveAllIcon: true, error: !!errors.role, errorMessage: errors.role, addNew: onAddRoleClick
+                                            ? {
+                                                enabled: true,
+                                                text: labels.addNewRole,
+                                                onClick: onAddRoleClick,
+                                            }
+                                            : undefined }) })] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }), _jsx(Button, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, onClick: handleSubmit })] })] })] }));
+};
+export default AddUserModal;

package/dist/esm/Components/UserDetails/ChangeRoleModal.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, VStack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+import TextInput from "../Input/TextInput";
+import SearchSelect from "../SearchSelect/SearchSelect";
+const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOptions, isLoading, onSubmit, onAddRoleClick, labels, }) => {
+    var _a, _b, _c, _d, _e;
+    const { colors } = useCustomTheme();
+    const [selectedRole, setSelectedRole] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (isOpen && currentRole) {
+            const match = roleOptions.find((role) => 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]);
+    const isUnchanged = ((_a = selectedRole === null || selectedRole === void 0 ? void 0 : selectedRole.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (currentRole === null || currentRole === void 0 ? void 0 : currentRole.toLowerCase());
+    const handleSubmit = async () => {
+        if (!selectedRole) {
+            setError(labels.roleRequired);
+            return;
+        }
+        if (userId == null)
+            return;
+        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
+    };
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(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], children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+                                            id: item.id,
+                                            label: item.label,
+                                        })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (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 }) })] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { label: labels.cancel, onClick: onClose, colorScheme: "red", size: "sm", variant: "outline" }), _jsx(Button, { label: labels.save, type: "submit", colorScheme: "primary", size: "sm", sx: { ml: 3 }, isLoading: isLoading, isDisabled: isUnchanged || !selectedRole, onClick: handleSubmit })] })] })] }));
+};
+export default ChangeRoleModal;

package/dist/esm/Components/UserDetails/DeactivateConfirmModal.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, VStack, Text, Flex, Box, } from "@chakra-ui/react";
+import { AlertTriangle, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(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, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", 
+                                // `red` reverses in dark (50 → deep red); `semantic.error` does not, so it would
+                                // leave this disc pale pink on a near-black modal. Identical values in light.
+                                bg: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#EF4444", children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : "#F8FAFC", borderRadius: "lg", p: 4, border: "1px solid", borderColor: (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _m === void 0 ? void 0 : _m[200]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[200], children: _jsxs(Text, { color: (_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[600], fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), _jsx(Button, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 16 }) })] })] }) })] })] }));
+};
+export default DeactivateConfirmModal;

package/dist/esm/Components/UserDetails/UserDetails.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import { Avatar, Badge, Box, Button, Divider, Flex, Heading, HStack, IconButton, Skeleton, SkeletonCircle, Text, useDisclosure, VStack, } from "@chakra-ui/react";
+import { ChevronLeft, RefreshCw, Send, Shield, Trash2, UserPlus, Users, UserRound, } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText";
+import EmptyState from "../EmptyState/EmptyState";
+import AddUserModal from "./AddUserModal";
+import ChangeRoleModal from "./ChangeRoleModal";
+import DeactivateConfirmModal from "./DeactivateConfirmModal";
+const DEFAULT_LABELS = {
+    teamMembers: "Team Members",
+    refreshList: "Refresh list",
+    userDetails: "User Details",
+    selectTeamMember: "Select a Team Member",
+    addUser: "Add User",
+    resendInvitation: "Resend Invitation",
+    deactivateUser: "Deactivate User",
+    changeRole: "Change Role",
+    you: "You",
+    active: "Active",
+    inactive: "Inactive",
+    pendingInvitation: "Pending Invitation",
+    personalInformation: "Personal Information",
+    noUsers: "No team members yet",
+    noUserSelected: "Select a team member to view their details",
+    addNewUser: "Add New User",
+    firstName: "First Name",
+    lastName: "Last Name",
+    email: "Email",
+    role: "Role",
+    firstNamePlaceholder: "First Name",
+    lastNamePlaceholder: "Last Name",
+    emailPlaceholder: "An invite will be sent to this email",
+    addNewRole: "Add New Role",
+    cancel: "Cancel",
+    save: "Save",
+    firstNameRequired: "First Name is required",
+    lastNameRequired: "Last Name is required",
+    emailRequired: "Email is required",
+    emailInvalid: "Invalid email",
+    roleRequired: "Role is required",
+    changeRoleTitle: "Change Role",
+    confirmDeactivation: "Confirm Deactivation",
+    deactivateConfirmQuestion: "Are you sure you want to deactivate this user?",
+    deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
+};
+const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], canManageUsers = false, isUsersLoading = false, isInviteLoading = false, isDeactivateLoading = false, isAddUserLoading = false, isChangeRoleLoading = false, onSelectUser, onRefresh, onBack, onAddUserSubmit, onChangeRoleSubmit, onReinvite, onDeactivate, onAddRoleClick, addUserUpgradeNotice, labels: labelOverrides, minHeight = "90vh", }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const { isOpen: isAddUserOpen, onOpen: onAddUserOpen, onClose: onAddUserClose, } = useDisclosure();
+    const { isOpen: isChangeRoleOpen, onOpen: onChangeRoleOpen, onClose: onChangeRoleClose, } = useDisclosure();
+    const { isOpen: isConfirmOpen, onOpen: onConfirmOpen, onClose: onConfirmClose, } = useDisclosure();
+    const [actionUserId, setActionUserId] = useState(null);
+    const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
+    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    const 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";
+    const 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";
+    const avatarBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _l === void 0 ? void 0 : _l[100]) !== null && _m !== void 0 ? _m : "#E0E7FF";
+    // Picked dynamically against `avatarBg` rather than a fixed [600] rung — a fixed rung falls
+    // short of AA (4.27) for some brands' primary scale in dark mode.
+    const avatarColor = (colors === null || colors === void 0 ? void 0 : colors.primary)
+        ? accentTextOnCanvas(colors.primary, avatarBg)
+        : "#4F46E5";
+    const successScheme = "green";
+    const dangerScheme = "red";
+    const handleDeactivateConfirm = () => {
+        if (actionUserId != null)
+            onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate(actionUserId);
+        onConfirmClose();
+    };
+    const renderStatusBadge = (isActive) => (_jsx(Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, textTransform: "none", children: isActive ? labels.active : labels.inactive }));
+    return (_jsxs(Flex, { backgroundColor: (_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", minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [_jsxs(Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [_jsxs(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), _jsx(Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && (_jsx(IconButton, { "aria-label": labels.refreshList, icon: _jsx(RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), _jsx(Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? (_jsx(VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [_jsx(SkeletonCircle, { size: "9" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "12px", mb: 2, width: "80%" }), _jsx(Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? (_jsx(EmptyState, { icon: Users, title: labels.noUsers, size: "sm", minH: "220px" })) : (_jsx(VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
+                                var _a, _b, _c, _d, _e, _f, _g, _h;
+                                const isSelected = selectedUserId != null && selectedUserId === user.id;
+                                return (_jsxs(Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#EEF2FF" : "transparent", _hover: {
+                                        background: isSelected
+                                            ? (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#EEF2FF"
+                                            : (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#F8FAFC",
+                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#6366F1" })), _jsx(Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: avatarBg, color: avatarColor }), _jsxs(Box, { flex: 1, overflow: "hidden", children: [_jsxs(Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), _jsx(Text, { fontSize: "xs", color: muted, noOfLines: 1, children: user.email })] }), renderStatusBadge(user.isActive)] }, user.id));
+                            }) })) })] }), _jsxs(Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "0 1px 2px rgba(16,24,40,0.05)", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [_jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && (_jsx(Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: _jsx(UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), _jsx(Box, { flex: 1, overflowY: "auto", children: isUsersLoading ? (_jsxs(VStack, { spacing: 4, p: 4, align: "stretch", children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(SkeletonCircle, { size: "16" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "18px", width: "50%", mb: 2 }), _jsx(Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => (_jsxs(Box, { w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "30%", mb: 2 }), _jsx(Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [_jsxs(Flex, { alignItems: "center", gap: 4, children: [_jsxs(Box, { position: "relative", children: [_jsx(Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: avatarBg, color: avatarColor }), selectedUser.isCurrent && (_jsx(Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), _jsxs(Box, { children: [_jsx(Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), _jsx(Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), _jsxs(HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && (_jsx(Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
+                                            !selectedUser.isSuperAdmin && (_jsxs(HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: _jsx(Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
+                                                        (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: _jsx(Shield, { size: 13 }), onClick: () => {
+                                                        if (selectedUser.userId != null) {
+                                                            setActionUserId(selectedUser.userId);
+                                                            onChangeRoleOpen();
+                                                        }
+                                                    }, children: labels.changeRole }), !selectedUser.isCurrent && (_jsx(Button, { size: "xs", variant: "ghost", colorScheme: "red", fontSize: "xs", leftIcon: _jsx(Trash2, { size: 13 }), isDisabled: selectedUser.userId == null || isDeactivateLoading, onClick: () => {
+                                                        if (selectedUser.userId != null) {
+                                                            setActionUserId(selectedUser.userId);
+                                                            onConfirmOpen();
+                                                        }
+                                                    }, children: labels.deactivateUser }))] }))] }), _jsxs(Box, { p: 4, children: [_jsx(Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3, children: labels.personalInformation }), _jsx(Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: selectedUser.details.map((detail, index) => {
+                                                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                                                const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : UserRound;
+                                                return (_jsxs(React.Fragment, { children: [_jsxs(Flex, { gap: 3, px: 3, py: 2.5, _hover: {
+                                                                bg: resolveHoverTint((_c = (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#F8FAFC", (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.background) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#ffffff"),
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "30px", bg: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#EEF2FF", borderRadius: "lg", color: (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[600]) !== null && _j !== void 0 ? _j : "#4F46E5", flexShrink: 0, children: _jsx(Icon, { size: 15 }) }), _jsx(Box, { minWidth: "110px", children: _jsx(Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), _jsx(Box, { flex: 1, children: _jsx(Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && (_jsx(Divider, { borderColor: border }))] }, index));
+                                            }) })] })] })) : (_jsx(EmptyState, { icon: UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), _jsx(AddUserModal, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
+                    await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
+                    onAddUserClose();
+                }, onAddRoleClick: onAddRoleClick, upgradeNotice: addUserUpgradeNotice, labels: labels }), _jsx(ChangeRoleModal, { isOpen: isChangeRoleOpen, onClose: onChangeRoleClose, userId: actionUserId, email: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.email, currentRole: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.role, roleOptions: roleOptions, isLoading: isChangeRoleLoading, onSubmit: async (payload) => {
+                    await (onChangeRoleSubmit === null || onChangeRoleSubmit === void 0 ? void 0 : onChangeRoleSubmit(payload));
+                    onChangeRoleClose();
+                }, onAddRoleClick: onAddRoleClick, labels: labels }), _jsx(DeactivateConfirmModal, { isOpen: isConfirmOpen, onClose: onConfirmClose, userName: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.name, isLoading: isDeactivateLoading, onConfirm: handleDeactivateConfirm, labels: labels })] }));
+};
+export default UserDetails;

package/dist/esm/Components/UserDetails/UserDetailsProps.js

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

package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const PLACEMENT_STYLE = {
+    "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
+    "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
+    "bottom-end": { top: "100%", right: 0, marginTop: "6px" },
+    "bottom-start": { top: "100%", left: 0, marginTop: "6px" },
+};
+/**
+ * Presentational, app-agnostic hover-preview for a "workspace tray" pill (or any
+ * trigger). Headless of any data: the consumer passes the trigger as `children`
+ * and the card body as `preview` (node or render-prop receiving `close()`), so
+ * this can preview a ticket, a doc, a chat — anything — with the same intent-safe
+ * hover behavior.
+ *
+ * Intent-safe hover (hover-bridge): hovering the trigger opens the card after a
+ * short delay (anti-flash); a shared open/close timer + small gap let the cursor
+ * travel trigger ⇄ card without the card closing; leaving both (with a grace
+ * delay) closes it; Escape dismisses. Fetch/render the preview lazily via
+ * `onOpenChange`.
+ */
+export default function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
+    var _a, _b, _c, _d;
+    const theme = useCustomTheme();
+    const [open, setOpen] = useState(false);
+    const openTimer = useRef(null);
+    const closeTimer = useRef(null);
+    const setOpenState = useCallback((next) => {
+        setOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpenChange]);
+    const clearOpenTimer = useCallback(() => {
+        if (openTimer.current) {
+            clearTimeout(openTimer.current);
+            openTimer.current = null;
+        }
+    }, []);
+    const clearCloseTimer = useCallback(() => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    }, []);
+    const scheduleOpen = useCallback(() => {
+        if (!enabled)
+            return;
+        clearCloseTimer();
+        if (open || openTimer.current)
+            return;
+        openTimer.current = setTimeout(() => {
+            openTimer.current = null;
+            setOpenState(true);
+        }, openDelayMs);
+    }, [enabled, clearCloseTimer, open, openDelayMs, setOpenState]);
+    const scheduleClose = useCallback(() => {
+        clearOpenTimer();
+        if (closeTimer.current)
+            return;
+        closeTimer.current = setTimeout(() => {
+            closeTimer.current = null;
+            setOpenState(false);
+        }, closeDelayMs);
+    }, [clearOpenTimer, closeDelayMs, setOpenState]);
+    const closeNow = useCallback(() => {
+        clearOpenTimer();
+        clearCloseTimer();
+        setOpenState(false);
+    }, [clearOpenTimer, clearCloseTimer, setOpenState]);
+    useEffect(() => () => {
+        clearOpenTimer();
+        clearCloseTimer();
+    }, [clearOpenTimer, clearCloseTimer]);
+    return (_jsxs(Box, { position: "relative", onMouseEnter: scheduleOpen, onMouseLeave: scheduleClose, onFocus: scheduleOpen, onBlur: scheduleClose, onKeyDown: (e) => {
+            if (e.key === "Escape" && open) {
+                e.stopPropagation();
+                closeNow();
+            }
+        }, children: [children, open && (_jsx(Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.background[50], borderWidth: "1px", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : theme.colors.gray[200], borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
+                    ? preview({ close: closeNow })
+                    : preview }))] }));
+}

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, HStack, IconButton, Modal, ModalContent, ModalOverlay, Text, } from "@chakra-ui/react";
+import { ExternalLink, Minus, X } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+// One in-between windowed size — wider than a cramped dialog but not near-full
+// screen. There is no maximize/restore toggle (removed by product decision); the
+// `onMedium`/`onMaximize` props are kept optional for back-compat but unused.
+const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
+/**
+ * Presentational floating "workspace window" — a Jira-style dialog with
+ * minimize / close controls and an optional "open full page" affordance, at a
+ * single fixed size (no maximize/restore toggle). Headless of any state
+ * management: the parent owns the window state and passes callbacks. Render
+ * minimized windows with the companion WorkspaceTray.
+ */
+export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+    var _a, _b, _c, _d, _e, _f;
+    // Must run before the early return: a minimized render would otherwise skip the hook
+    // and change hook order when the window reopens.
+    const theme = useCustomTheme();
+    if (state === "minimized")
+        return null;
+    const size = WINDOW_SIZE;
+    return (_jsxs(Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
+        // Don't discard unsaved work on an accidental overlay click / Esc — the
+        // parent decides via the explicit Close control.
+        closeOnOverlayClick: false, closeOnEsc: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(3px)" }), _jsx(ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
+                // With size="full" the transparent ModalContent covers the whole
+                // viewport, so Chakra's own closeOnOverlayClick never fires (the
+                // ModalOverlay sits behind it). Detect "clicked the blurred area
+                // around the window" ourselves: only when the click lands on this
+                // wrapper, not on the window Box or its children.
+                onMouseDown: (e) => {
+                    if (e.target === e.currentTarget)
+                        onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
+                }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.background[50], borderRadius: "0.75rem", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : theme.colors.gray[100], bg: (_d = (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : theme.colors.gray[50], flexShrink: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: (_f = (_e = theme.colors.text) === null || _e === void 0 ? void 0 : _e[700]) !== null && _f !== void 0 ? _f : theme.colors.gray[700], noOfLines: 1, "data-testid": `${testId}-title`, children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+}
+/**
+ * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
+ * the parent supplies the minimized items and restore/close handlers.
+ */
+export function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
+    const theme = useCustomTheme();
+    if (!items.length)
+        return null;
+    return (
+    // Floating bottom-right cluster (Gmail/Jira minimized-window pattern) rather
+    // than a full-width docked bar, so it never covers the bottom strip of page
+    // content and needs no reserved page gutter. Pills wrap upward.
+    _jsx(Flex, { position: "fixed", bottom: 4, right: 4, zIndex: 1400, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
+            var _a, _b, _c, _d, _e, _f;
+            const api = {
+                restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
+                close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
+            };
+            if (renderItem) {
+                return _jsx(Box, { children: renderItem(item, api) }, item.id);
+            }
+            return (_jsxs(HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "blue.100", color: (_d = (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : "blue.700", boxShadow: "md", borderWidth: "1px", borderColor: (_f = (_e = theme.colors.primary) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : "blue.200", "data-testid": `${testId}-pill`, children: [_jsx(Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: _jsx(X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+        }) }));
+}

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindowProps.js

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

package/dist/esm/Constants/Sidebar.js

@@ -0,0 +1,39 @@
+export const HEADER_HEIGHT = "4.3rem";
+export const FlexCss = {
+    "&::-webkit-scrollbar": {
+        width: "0.188rem",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: "transparent",
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        transition: "background 0.5s",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: "var(--chakra-colors-primary-500, #718096)",
+    },
+};
+export const cssForScrollBar = (theme) => ({
+    "&::-webkit-scrollbar": {
+        width: "0.125rem",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: theme.colors.sidebar.background[500],
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        borderRadius: "0.5rem",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: theme.colors.primary[500],
+    },
+    "&:hover::-webkit-scrollbar-thumb:hover": {
+        background: theme.colors.primary[700],
+    },
+    scrollbarWidth: "none",
+    "&:hover": {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme.colors.primary[500]} ${theme.colors.sidebar.background[500]}`,
+    },
+});