pixelize-design-library 2.4.2-beta.34 → 2.4.2-beta.36

package/dist/Components/ToggleSwitch/ToggleSwitch.js

@@ -14,5 +14,5 @@ function ToggleSwitch({ isChecked, onChange, isDisabled = false, size = "md", id
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", id: id, role: "switch", "aria-checked": isChecked, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, disabled: isDisabled, onClick: () => onChange(!isChecked), position: "relative", display: "inline-flex", alignItems: "center", flexShrink: 0, w: dims.w, h: dims.h, p: 0, borderRadius: "full", borderWidth: "1px", borderStyle: "solid", borderColor: isChecked ? colors.primary[500] : colors.boxborder[500], bg: isChecked ? colors.primary[500] : colors.background[600], opacity: isDisabled ? 0.5 : 1, cursor: isDisabled ? "not-allowed" : "pointer", transition: "background-color 0.2s ease, border-color 0.2s ease", _focusVisible: {
             outline: "none",
             boxShadow: `0 0 0 2px ${colors.primary[300]}`,
-        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: colors.background[50], boxShadow: "sm", transition: "transform 0.2s ease", transform: isChecked ? `translateX(${dims.travel})` : "translateX(0)" }) }));
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Box, { "aria-hidden": "true", position: "absolute", left: "0.125rem", w: dims.knob, h: dims.knob, borderRadius: "full", bg: colors.white, boxShadow: "sm", transition: "transform 0.2s ease", transform: isChecked ? `translateX(${dims.travel})` : "translateX(0)" }) }));
 }

package/dist/Components/Trail/EditableCell.js

@@ -23,7 +23,7 @@ const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChan
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "50%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
         }
         else if (column.label === "priority") {
-            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: colors.teal[100] }, children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: colors.teal[100] }, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: colors.teal[100] }, children: "High" })] })] }) }));
+            return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { isOpen: true, children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, rightIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, {}), bg: colors.teal[50], color: (0, accentText_1.accentTextOnCanvas)(colors.teal, colors.teal[50]), _hover: { bg: colors.teal[100] }, _active: { bg: colors.teal[200] }, children: value }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), children: "Low" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), children: "Medium" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), children: "High" })] })] }) }));
         }
         else {
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "100%", ref: cellRef, children: (0, jsx_runtime_1.jsx)(react_2.Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));

package/dist/Components/UserDetails/DeactivateConfirmModal.js

@@ -14,6 +14,6 @@ const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfir
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
     const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.gray[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { py: 6, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), (0, jsx_runtime_1.jsx)(react_1.Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: (0, jsx_runtime_1.jsxs)(react_1.Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) })] })] }) })] })] }));
 };
 exports.default = DeactivateConfirmModal;

package/dist/Components/UserDetails/UserDetails.js

@@ -43,6 +43,7 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
 const ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
@@ -93,6 +94,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = (0, react_1.useState)(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
     const avatarBg = colors.primary[100];
@@ -109,10 +111,10 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const renderStatusBadge = (isActive) => ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.refreshList, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "9" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
                                 const isSelected = selectedUserId != null && selectedUserId === user.id;
-                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? colors.primary[50] : "transparent", _hover: {
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? rowBackgrounds.selected : "transparent", _hover: {
                                         background: isSelected
-                                            ? colors.primary[50]
-                                            : (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
+                                            ? rowBackgrounds.selectedActive
+                                            : rowBackgrounds.active,
                                     }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: avatarBg, color: avatarColor }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: muted, noOfLines: 1, children: user.email })] }), renderStatusBadge(user.isActive)] }, user.id));
                             }) })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", children: isUsersLoading ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, p: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "16" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: avatarBg, color: avatarColor }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.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 }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && ((0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&

package/dist/Hooks/exclusiveOverlay.d.ts

@@ -0,0 +1,4 @@
+export declare const exclusiveOpen: (id: string, close: () => void) => void;
+export declare const exclusiveClose: (id: string) => void;
+/** Test-only reset — not exported from the package root. */
+export declare const resetExclusiveOverlay: () => void;

package/dist/Hooks/exclusiveOverlay.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetExclusiveOverlay = exports.exclusiveClose = exports.exclusiveOpen = void 0;
+let active = null;
+const exclusiveOpen = (id, close) => {
+    if (active && active.id !== id) {
+        active.close();
+    }
+    active = { id, close };
+};
+exports.exclusiveOpen = exclusiveOpen;
+const exclusiveClose = (id) => {
+    if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+        active = null;
+    }
+};
+exports.exclusiveClose = exclusiveClose;
+/** Test-only reset — not exported from the package root. */
+const resetExclusiveOverlay = () => {
+    active = null;
+};
+exports.resetExclusiveOverlay = resetExclusiveOverlay;

package/dist/Hooks/useExclusiveOverlay.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
+ * immediately before opening; `onClose` is invoked when another overlay opens.
+ */
+export declare const useExclusiveOverlay: (isOpen: boolean, onClose: () => void) => () => void;

package/dist/Hooks/useExclusiveOverlay.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExclusiveOverlay = void 0;
+const react_1 = require("react");
+const exclusiveOverlay_1 = require("./exclusiveOverlay");
+/**
+ * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
+ * immediately before opening; `onClose` is invoked when another overlay opens.
+ */
+const useExclusiveOverlay = (isOpen, onClose) => {
+    const id = (0, react_1.useId)();
+    const onCloseRef = (0, react_1.useRef)(onClose);
+    onCloseRef.current = onClose;
+    const requestOpen = (0, react_1.useCallback)(() => {
+        (0, exclusiveOverlay_1.exclusiveOpen)(id, () => onCloseRef.current());
+    }, [id]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            (0, exclusiveOverlay_1.exclusiveClose)(id);
+        }
+    }, [isOpen, id]);
+    return requestOpen;
+};
+exports.useExclusiveOverlay = useExclusiveOverlay;

package/dist/Theme/chakra/Menu.styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Menu = void 0;
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const rowStates_1 = require("../tokens/builders/rowStates");
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
 const $bg = (0, react_1.cssVar)("menu-bg");
@@ -24,8 +25,9 @@ const $bg = (0, react_1.cssVar)("menu-bg");
 const $itemBg = (0, react_1.cssVar)("menu-item-bg");
 const baseStyle = definePartsStyle(({ theme }) => {
     const colors = (0, paletteFromTheme_1.paletteOf)(theme);
-    const hoverBg = colors.primary.opacity[8];
-    const activeBg = colors.primary.opacity[16];
+    const rowBgs = (0, rowStates_1.listRowBackgrounds)(colors);
+    const hoverBg = rowBgs.active;
+    const activeBg = rowBgs.selectedActive;
     return {
         list: {
             [$bg.variable]: colors.backgroundColor.light,

package/dist/Utils/table.d.ts

@@ -16,6 +16,9 @@ export type TablePaletteColor = {
     text: string;
     onSolid?: string;
 };
+export type SemanticStatusTone = "info" | "warning" | "success" | "error" | "neutral";
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+export declare function buildSemanticStatusPalette(toneByValue: Record<string, SemanticStatusTone>, theme: CustomThemeProps): Record<string, TablePaletteColor>;
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export declare function buildTablePalette(theme: CustomThemeProps): TablePaletteColor[];
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */

package/dist/Utils/table.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellCalculation = exports.pageSizeCalculation = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
 exports.compareValues = compareValues;
 exports.SortMultiColumnData = SortMultiColumnData;
+exports.buildSemanticStatusPalette = buildSemanticStatusPalette;
 exports.buildTablePalette = buildTablePalette;
 exports.pickTableColor = pickTableColor;
 exports.groupRows = groupRows;
@@ -45,6 +46,8 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const color_1 = require("../Theme/tokens/builders/color");
+const outlineRung_1 = require("../Theme/tokens/builders/outlineRung");
 const filledSurface_1 = require("../Theme/tokens/builders/filledSurface");
 const statusTone_1 = require("../Theme/tokens/builders/statusTone");
 // Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
@@ -99,7 +102,45 @@ function SortMultiColumnData(data, sortConfig) {
         return 0;
     });
 }
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+function buildSemanticStatusPalette(toneByValue, theme) {
+    const c = theme.colors;
+    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
+    const scales = {
+        info: c.semantic.info,
+        warning: c.semantic.warning,
+        success: c.semantic.success,
+        error: c.semantic.error,
+        neutral: c.gray,
+    };
+    return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
+        const scale = scales[key];
+        const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white);
+        const solid = scale[solidRung];
+        return [
+            value,
+            {
+                solid,
+                soft: tone.bg,
+                text: tone.fg,
+                onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
+            },
+        ];
+    }));
+}
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+/** Consumer `statusColors` values are fill seeds — derive bleed + pill ink from them. */
+const resolveStatusOverride = (fill, white, black, surface) => {
+    const soft = withAlpha(fill, "22");
+    const solid = (0, statusTone_1.resolveAvatarFill)(fill);
+    return {
+        solid,
+        soft,
+        text: (0, outlineRung_1.liftToContrast)(fill, (0, color_1.compositeOver)(soft, surface), accentText_1.AA_NORMAL_TEXT),
+        onSolid: (0, accentText_1.onFilled)(solid, white, black),
+    };
+};
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
     const c = theme.colors;
@@ -137,10 +178,12 @@ const hashKey = (value) => {
 };
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */
 function pickTableColor(value, palette, override, theme) {
+    var _a;
     const white = theme ? theme.colors.white : accentText_1.DEFAULT_WHITE;
     const black = theme ? theme.colors.black : accentText_1.DEFAULT_BLACK;
     if (override) {
-        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
+        const surface = (_a = theme === null || theme === void 0 ? void 0 : theme.colors.background[50]) !== null && _a !== void 0 ? _a : accentText_1.DEFAULT_WHITE;
+        return resolveStatusOverride(override, white, black, surface);
     }
     if (!palette.length) {
         throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -5,7 +5,9 @@ import { Grip, Lock, Search } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { chartMode } from "../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
-import { liftToContrast, neutralStep, resolveHoverTint, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
+import { liftToContrast, neutralStep, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
@@ -33,25 +35,18 @@ const validate = (apps) => {
             warnOnce(`url-${app.id || i}`, `app "${app.name}" has no url; it cannot be opened.`);
     });
 };
-// Past a pointer's pause threshold, so crossing the launcher on the way elsewhere does not open it,
-// but short enough that deliberately resting on it feels instant.
-const HOVER_OPEN_DELAY = 450;
-// Long enough to travel the gap between the launcher and the panel below it.
-const HOVER_CLOSE_GRACE = 250;
 // Flip back to true to restore `searchThreshold` opening the field on its own.
 const SEARCH_OPENS_BY_COUNT = false;
 const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable, searchThreshold = 8, shortcut = null, showShortcutHint = true, hideWhenAlone = true, emptyMessage = "No app matches that name.", footer, ariaLabel = "Switch app", panelWidth, maxHeight = "24rem", isLoading = false, }) => {
     const theme = useCustomTheme();
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
     const [query, setQuery] = useState("");
     const [activeIndex, setActiveIndex] = useState(0);
     const searchRef = useRef(null);
     const triggerRef = useRef(null);
-    const panelRef = useRef(null);
     const itemRefs = useRef([]);
     const typeahead = useRef({ buffer: "", at: 0 });
-    const hoverTimer = useRef();
-    const openedByHover = useRef(false);
     useEffect(() => validate(apps), [apps]);
     // Search is off while the panel's design settles: the app count alone no longer opens it. An
     // explicit `isSearchable` still wins, so nothing about the prop changed.
@@ -59,47 +54,15 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const hues = useMemo(() => assignAppHues(apps, chartMode(theme.colors)), [apps, theme.colors]);
     const visible = useMemo(() => filterApps(apps, query), [apps, query]);
     const setOpen = useCallback((next) => {
-        if (next)
+        if (next) {
+            requestExclusiveOpen();
             onOpen();
-        else
+        }
+        else {
             onClose();
+        }
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
-    }, [onOpen, onClose, onOpenChange]);
-    const cancelHoverTimer = useCallback(() => {
-        if (hoverTimer.current)
-            clearTimeout(hoverTimer.current);
-        hoverTimer.current = undefined;
-    }, []);
-    useEffect(() => cancelHoverTimer, [cancelHoverTimer]);
-    // Touch and stylus report no hover; a timer there would open the panel on a tap-and-hold.
-    const pointerHovers = () => {
-        var _a;
-        return typeof window !== "undefined" &&
-            ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(hover: hover) and (pointer: fine)").matches);
-    };
-    const handleHoverStart = useCallback(() => {
-        if (isOpen || !pointerHovers())
-            return;
-        cancelHoverTimer();
-        hoverTimer.current = setTimeout(() => {
-            openedByHover.current = true;
-            setOpen(true);
-        }, HOVER_OPEN_DELAY);
-    }, [isOpen, cancelHoverTimer, setOpen]);
-    // A click-opened panel is sticky, and a keyboard user inside it is not "hovering away".
-    const handleHoverEnd = useCallback(() => {
-        cancelHoverTimer();
-        if (!isOpen || !openedByHover.current)
-            return;
-        hoverTimer.current = setTimeout(() => {
-            var _a;
-            if ((_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))
-                return;
-            openedByHover.current = false;
-            setOpen(false);
-            setQuery("");
-        }, HOVER_CLOSE_GRACE);
-    }, [isOpen, cancelHoverTimer, setOpen]);
+    }, [onOpen, onClose, onOpenChange, requestExclusiveOpen]);
     const closeAndRefocus = useCallback(() => {
         var _a;
         setOpen(false);
@@ -208,7 +171,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const nothingToSwitchTo = apps.length === 0 || (hideWhenAlone && apps.every((a) => a.id === currentAppId));
     if (nothingToSwitchTo)
         return null;
-    const rowHoverBg = resolveHoverTint(theme.colors.gray[50], theme.colors.backgroundColor.light);
+    const rowHoverBg = listRowBackgrounds(theme.colors).active;
     const footerRule = ruleInk(theme.colors.boxborder[200], [theme.colors.backgroundColor.subtle], CHROME_RULE);
     // Neutral, not `backgroundColor.tertiary`: that rung is brand-tinted in the hand-authored light
     // palettes, so lifting it painted the row a saturated block. The rail identifies the row, so the
@@ -223,7 +186,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const currentSub = liftToContrast(theme.colors.textMuted, currentBg, AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
     const hint = shortcut && showShortcutHint ? formatShortcut(shortcut) : null;
-    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onMouseEnter: handleHoverStart, onMouseLeave: handleHoverEnd, onClick: () => { openedByHover.current = false; cancelHoverTimer(); }, onKeyDown: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
                         if (!isOpen) {
                             if (e.key === "ArrowDown") {
                                 e.preventDefault();
@@ -232,7 +195,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { ref: panelRef, onMouseEnter: cancelHoverTimer, onMouseLeave: handleHoverEnd, w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.backgroundColor.light, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "base", px: 1.5, py: 0.5, children: hint }))] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.backgroundColor.light, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "base", px: 1.5, py: 0.5, children: hint }))] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -79,7 +79,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                     borderRadius: "lg",
                                     fontSize: "13px",
                                     fontWeight: 500,
-                                    color: theme.colors.gray[700],
+                                    color: theme.colors.text[700],
                                     transition: "background 0.12s",
                                     "& svg": { width: "16px", height: "16px" },
                                     ...(divider
@@ -90,8 +90,6 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                             borderColor: theme.colors.boxborder[200],
                                         }
                                         : {}),
-                                    _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
-                                    _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
                                     "&:last-child": { borderBottom: "none" },
                                 }, children: [option === null || option === void 0 ? void 0 : option.image, option.label] }, index))) }) })] })) : (rightIcon && (_jsx(IconButton, { "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx })))] }));
 }

package/dist/esm/Components/Common/fieldStyles.js

@@ -17,7 +17,7 @@ export const getFieldStateStyles = (theme, { error = false, focused = false } =
     const ringPrimary = theme.colors.boxShadow.primary;
     const ringError = theme.colors.boxShadow.error;
     return {
-        bg: theme.colors.gray[50],
+        bg: theme.colors.background[50],
         borderRadius: FIELD_RADIUS,
         border: `${FIELD_BORDER_WIDTH} solid`,
         borderColor: error ? errorColor : focused ? primary : idleBorder,

package/dist/esm/Components/CopyButton/CopyButton.js

@@ -4,6 +4,7 @@ import { Box, Flex, IconButton, Text } from "@chakra-ui/react";
 import { Check, Copy } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Copied!", tooltip = "Copy", feedbackDuration = 1500, iconSize = 16, size = "sm", onCopy, }) => {
@@ -29,17 +30,17 @@ const CopyButton = ({ value, variant = "icon", label = "Copy", copiedLabel = "Co
     // nearest rung that clears AA against the canvas this button actually sits on.
     const accent = accentTextOnCanvas(theme.colors.primary, theme.colors.backgroundColor.main);
     const success = theme.colors.semanticText.success;
+    const rowBackgrounds = listRowBackgrounds(theme.colors);
     if (variant === "menu-item") {
-        // Ink also sits on the row's own hover fill (gray[100]), not just the canvas — resolve against it.
-        const hoverAccent = accentTextOnCanvas(theme.colors.primary, theme.colors.gray[100]);
-        const hoverSuccess = liftToContrast(theme.colors.semantic.success[500], theme.colors.gray[100], AA_NORMAL_TEXT);
-        return (_jsxs(Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: theme.colors.gray[100] }, onClick: handleCopy, children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
+        const hoverAccent = accentTextOnCanvas(theme.colors.primary, rowBackgrounds.active);
+        const hoverSuccess = liftToContrast(theme.colors.semantic.success[500], rowBackgrounds.active, AA_NORMAL_TEXT);
+        return (_jsxs(Flex, { align: "center", gap: "0.5rem", px: "12px", py: "8px", width: "100%", cursor: "pointer", borderRadius: "md", transition: "background 0.15s ease", _hover: { bg: rowBackgrounds.active }, onClick: handleCopy, children: [copied ? (_jsx(Check, { size: iconSize, color: hoverSuccess })) : (_jsx(Copy, { size: iconSize, color: hoverAccent })), _jsx(Box, { fontSize: "14px", fontWeight: 500, color: copied ? hoverSuccess : hoverAccent, children: copied ? copiedLabel : label })] }));
     }
     if (variant === "button") {
         return (_jsxs(Flex, { as: "button", align: "center", gap: "6px", px: "12px", py: "6px", borderRadius: "lg", border: "1px solid", 
             // [800], not [500]: a real control boundary needs >=3:1 on every surface up to `muted`.
-            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.gray[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
+            borderColor: copied ? success : theme.colors.boxborder[500], bg: "transparent", color: copied ? success : theme.colors.text[700], fontSize: "14px", fontWeight: 500, transition: "all 0.15s ease", _hover: { borderColor: accent, color: accent }, onClick: handleCopy, children: [copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }), _jsx(Text, { children: copied ? copiedLabel : label })] }));
     }
-    return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.gray[500], _hover: { color: accent, bg: theme.colors.primary[50] }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
+    return (_jsx(ToolTip, { label: copied ? copiedLabel : tooltip, placement: "top", children: _jsx(IconButton, { "aria-label": tooltip, size: size, variant: "ghost", onClick: handleCopy, color: copied ? success : theme.colors.textMuted, _hover: { color: accent, bg: rowBackgrounds.active }, icon: copied ? _jsx(Check, { size: iconSize }) : _jsx(Copy, { size: iconSize }) }) }));
 };
 export default CopyButton;

package/dist/esm/Components/DatePicker/CalendarPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Grid } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { format, startOfMonth, endOfMonth, startOfWeek, endOfWeek, addDays } from "date-fns";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import Button from "../Button/Button.js";
@@ -118,7 +118,10 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                 const customContent = renderDayContent ? renderDayContent(thisDay, states) : null;
                 const markerColor = customContent == null && (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.markerColor) ? stateVisual.markerColor : null;
                 const hasDayOverlay = customContent != null || markerColor != null;
-                days.push(_jsx(Box, { h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? dayStateClassName(states) : undefined, "aria-label": dayStates ? dayAccessibleName(format(thisDay, "d MMMM yyyy"), states) : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
+                const dayLabel = dayStates
+                    ? dayAccessibleName(format(thisDay, "d MMMM yyyy"), states)
+                    : format(thisDay, "d MMMM yyyy");
+                days.push(_jsx(Box, { role: "gridcell", h: "2rem", display: "flex", alignItems: "center", justifyContent: "center", style: cellBg ? { background: cellBg } : undefined, children: _jsxs(Box, { as: "button", type: "button", disabled: disabled, className: dayStates ? dayStateClassName(states) : undefined, "aria-label": dayLabel, "aria-selected": isSelected || isStart || isEnd || undefined, "aria-current": isToday ? "date" : undefined, onClick: () => !disabled && onDaySelect(new Date(thisDay)), onMouseEnter: () => !disabled && (onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(new Date(thisDay))), position: hasDayOverlay ? "relative" : undefined, w: "1.75rem", h: "1.75rem", borderRadius: "full", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "0.8125rem", fontWeight: circleSolid ? 600 : 500, lineHeight: "1", cursor: disabled ? "not-allowed" : "pointer", bg: circleSolid ? solidFill : "transparent", color: dayColor, textDecoration: (stateVisual === null || stateVisual === void 0 ? void 0 : stateVisual.strikethrough) ? "line-through" : undefined, border: dayBorder, transition: "background 0.12s, color 0.12s", _hover: disabled
                             ? {}
                             : circleSolid
                                 ? { bg: solidHoverFill, color: circleHoverColor }
@@ -127,14 +130,14 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                                 pointerEvents: "none", children: customContent !== null && customContent !== void 0 ? customContent : (_jsx(Box, { as: "span", className: `${DAY_CLASS}__marker`, w: "0.25rem", h: "0.25rem", borderRadius: "full", bg: markerColor })) }))] }) }, thisDay.toString()));
                 day = addDays(day, 1);
             }
-            rows.push(_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
+            rows.push(_jsx(Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, children: days }, day.toString()));
         }
         return rows;
     };
-    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [_jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, { size: 16 }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [_jsx(Box, { as: "select", value: currentMonth.getMonth(), onChange: (e) => {
+    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, gap: 1, children: [_jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() - 1, 1)), "aria-label": "Previous month", children: _jsx(ChevronLeftIcon, { size: 16 }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1.5, minW: 0, children: [_jsx(Box, { as: "select", "aria-label": "Month", value: currentMonth.getMonth(), onChange: (e) => {
                                     const newMonth = parseInt(e.target.value, 10);
                                     setCurrentMonth((prev) => new Date(prev.getFullYear(), newMonth, 1));
-                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx(Box, { as: "select", value: currentMonth.getFullYear(), onChange: (e) => {
+                                }, ...selectStyles, children: Array.from({ length: 12 }).map((_, i) => (_jsx("option", { value: i, children: format(new Date(2000, i, 1), "MMMM") }, i))) }), _jsx(Box, { as: "select", "aria-label": "Year", value: currentMonth.getFullYear(), onChange: (e) => {
                                     const newYear = parseInt(e.target.value, 10);
                                     setCurrentMonth((prev) => new Date(newYear, prev.getMonth(), 1));
                                 }, ...selectStyles, children: Array.from({ length: 100 }).map((_, i) => {
@@ -145,6 +148,6 @@ export const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, t
                                     if (!disableToday) {
                                         onDaySelect(new Date(today));
                                     }
-                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Grid, { templateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), _jsx(Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] }));
+                                }, "aria-label": "Today", sx: { fontSize: "0.7rem", px: 2, flexShrink: 0 }, isDisabled: disableToday, children: "Today" })), _jsx(Button, { variant: "ghost", size: "xs", sx: { flexShrink: 0 }, onClick: () => setCurrentMonth((prev) => new Date(prev.getFullYear(), prev.getMonth() + 1, 1)), "aria-label": "Next month", children: _jsx(ChevronRightIcon, { size: 16 }) })] })] }), _jsxs(Box, { role: "grid", "aria-label": "Calendar", children: [renderWeekdays !== null && renderWeekdays !== void 0 ? renderWeekdays : (_jsx(Box, { role: "row", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, mb: 1, children: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => (_jsx(Box, { role: "columnheader", textAlign: "center", fontSize: "0.7rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: theme.colors.textMuted, py: 1, children: day }, day))) })), _jsx(Box, { onMouseLeave: () => onDayHover === null || onDayHover === void 0 ? void 0 : onDayHover(null), children: renderDays() })] })] }));
 };
 export default CalendarPanel;

package/dist/esm/Components/DatePicker/RangeDatePicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, FormControl, Input, InputGroup, InputRightElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, useDisclosure, } from "@chakra-ui/react";
+import { Box, FormControl, IconButton, Input, InputGroup, InputRightElement, Popover, PopoverAnchor, PopoverBody, PopoverContent, useDisclosure, } from "@chakra-ui/react";
 import { format, isAfter, isBefore, isSameDay, subDays, startOfMonth, endOfMonth } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import Button from "../Button/Button.js";
@@ -12,6 +12,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { getTextInputIconSizePx, getTextInputIconWrapperSx, } from "../Input/textInputIconSize.js";
 import TimePicker from "./TimePicker.js";
 import { TimePickerInput } from "./TimePickerInput.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 // helper to set time on date while preserving date part
 const setTimeFrom = (base, time) => {
     const b = base ? new Date(base) : new Date();
@@ -25,6 +26,9 @@ export const RangeDatePicker = (props) => {
     const calendarIconPx = getTextInputIconSizePx(sizeKey);
     const calendarIconWrapperSx = getTextInputIconWrapperSx(sizeKey);
     const { isOpen, onOpen, onClose } = useDisclosure();
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, onClose);
+    const errorFieldId = id ? `${id}-error` : undefined;
+    const calendarLabel = label !== null && label !== void 0 ? label : "Choose date range";
     const inputRef = useRef(null);
     const triggerRef = useRef(null);
     const popoverRef = useRef(null);
@@ -91,8 +95,20 @@ export const RangeDatePicker = (props) => {
         onClose();
     };
     const handleOpen = () => {
+        requestExclusiveOpen();
         onOpen();
     };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Escape" && isOpen) {
+            e.preventDefault();
+            onClose();
+            return;
+        }
+        if (!isOpen && (e.key === "ArrowDown" || e.key === "Enter")) {
+            e.preventDefault();
+            handleOpen();
+        }
+    };
     const handleDaySelect = (day) => {
         const updated = new Date(day);
         if (selectingStart) {
@@ -159,7 +175,7 @@ export const RangeDatePicker = (props) => {
             return `${format(tempRangeStart, dateFormat)} -`;
         return "";
     }, [inputValue, tempRangeStart, tempRangeEnd, dateFormat]);
-    return (_jsxs(FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: false, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, autoComplete: autoComplete, onFocus: () => {
+    return (_jsxs(FormControl, { id: id, isInvalid: error, isRequired: isRequired, isDisabled: disabled, width: width, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isLazy: true, isOpen: isOpen, onClose: finalize, placement: "bottom-start", closeOnBlur: false, returnFocusOnClose: true, children: [_jsx(PopoverAnchor, { children: _jsx(Box, { ref: triggerRef, as: "div", children: _jsxs(InputGroup, { size: sizeKey, children: [_jsx(Input, { ref: inputRef, id: id, name: name, size: sizeKey, placeholder: placeholder, value: displayValue, readOnly: true, isDisabled: disabled, isInvalid: error, isRequired: isRequired, "aria-describedby": error && errorMessage ? errorFieldId : undefined, autoComplete: autoComplete, onKeyDown: handleInputKeyDown, onFocus: () => {
                                             if (!isOpen)
                                                 handleOpen();
                                         }, onClick: () => {
@@ -172,7 +188,15 @@ export const RangeDatePicker = (props) => {
                                                 : `0 0 0 1px ${theme.colors.primary[500]}`,
                                         }, _hover: {
                                             borderColor: error ? theme.colors.semanticText.error : undefined,
-                                        }, cursor: "pointer" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", style: { cursor: "pointer" }, onClick: () => (isOpen ? onClose() : handleOpen()), children: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
+                                        }, cursor: "pointer" }), _jsx(InputRightElement, { height: "100%", display: "flex", alignItems: "center", pointerEvents: "auto", children: _jsx(IconButton, { "aria-label": "Open calendar", variant: "ghost", size: "sm", minW: "auto", h: "auto", isDisabled: disabled, onClick: (e) => {
+                                                e.stopPropagation();
+                                                if (!isOpen) {
+                                                    handleOpen();
+                                                }
+                                                else {
+                                                    onClose();
+                                                }
+                                            }, icon: _jsx(Box, { as: "span", sx: calendarIconWrapperSx, children: _jsx(CalendarIcon, { size: calendarIconPx, color: theme.colors.textMuted }) }) }) })] }) }) }), _jsx(PopoverContent, { w: "18rem", maxW: "18rem", p: 3, ref: popoverRef, boxShadow: "lg", borderRadius: "xl", bg: theme.colors.background[50], role: "dialog", "aria-label": calendarLabel, children: _jsxs(PopoverBody, { p: 0, children: [_jsx(Box, { display: "flex", flexWrap: "wrap", gap: 2, mb: 3, children: presets.map((p) => (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", sx: { flex: "1 1 auto" }, onClick: () => {
                                             const [from, to] = p.getRange();
                                             applyPreset(from, to);
                                         }, children: p.label }, p.label))) }), _jsx(CalendarPanel, { currentMonth: currentMonth, setCurrentMonth: (updater) => setCurrentMonthState((prev) => updater(prev)), today: today, isRange: true, tempDate: null, tempRangeStart: tempRangeStart, tempRangeEnd: tempRangeEnd, hoveredDate: hoveredDate, onDayHover: setHoveredDate, isSameDay: isSameDay, isBefore: isBefore, isAfter: isAfter, minDate: minDate, maxDate: maxDate, disablePastDates: disablePastDates, disableFutureDates: disableFutureDates, disableToday: disableToday, onDaySelect: handleDaySelect, dayStates: dayStates, renderDayContent: renderDayContent }), formatHasTime && (_jsxs(Box, { mt: 3, display: "grid", gridTemplateColumns: "1fr", gap: 2, children: [_jsxs(Box, { children: [_jsx(Box, { fontSize: "xs", color: theme.colors.textMuted, mb: 1, children: "Start time" }), shouldUseSelectTimePicker ? (_jsx(TimePicker, { date: startTimeBaseDate, onChange: (updated) => {
@@ -201,6 +225,6 @@ export const RangeDatePicker = (props) => {
                                                             return;
                                                         }
                                                         setTempRangeEnd(setTimeFrom(endTimeBaseDate, t));
-                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
+                                                    }, dateFormat: timePickerFormat, disabled: disabled || !tempRangeEnd, size: sizeKey }))] })] })), _jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, pt: 3, borderTop: "1px solid", borderColor: theme.colors.boxborder[200], children: [_jsx(Button, { size: "sm", variant: "ghost", colorScheme: "gray", onClick: handleClear, children: "Clear" }), _jsx(Button, { size: "sm", variant: "gradient", onClick: requestClose, children: "Apply" })] })] }) })] }), error && errorMessage && (_jsx(ErrorMessage, { id: errorFieldId, errorMessage: errorMessage })), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));
 };
 export default RangeDatePicker;