npm - pixelize-design-library - Versions diffs - 2.4.2-beta.34 → 2.4.2-beta.35 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

package/dist/Components/SelectSearch/SelectSearch.js CHANGED Viewed

@@ -10,25 +10,38 @@ const react_2 = require("@chakra-ui/react");
 const FormLabel_1 = require("../Common/FormLabel");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     if (isOptionLoading) {
         return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { py: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.accentText, children: loadingText })] }));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
-                    optionRefs.current[index] = el;
-                }, role: "option", "aria-selected": isOptionSelected(option), tabIndex: index === activeIndex ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", px: 4, py: 2, cursor: "pointer", _hover: {
-                    backgroundColor: (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[500], theme.colors.background[50]),
-                }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleOptionClick(option);
-                    }
-                }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: theme.colors.textMuted, children: option.email }))] })] }, option.id))) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => {
+                const selected = isOptionSelected(option);
+                const isActive = index === activeIndex;
+                const rowBg = selected
+                    ? isActive
+                        ? rowBackgrounds.selectedActive
+                        : rowBackgrounds.selected
+                    : isActive
+                        ? rowBackgrounds.active
+                        : "transparent";
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", ref: (el) => {
+                        optionRefs.current[index] = el;
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: rowBg, px: 4, py: 2, cursor: "pointer", color: theme.colors.text[700], fontWeight: selected ? 600 : 500, transition: "background 0.12s ease", _hover: {
+                        bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
+                    }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            handleOptionClick(option);
+                        }
+                    }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: theme.colors.textMuted, children: option.email }))] })] }, option.id));
+            }) }));
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
 };
@@ -43,6 +56,11 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []);
     const [inputValue, setInputValue] = (0, react_1.useState)(searchQuery);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, () => setIsOpen(false));
+    const openDropdown = (0, react_1.useCallback)(() => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    }, [requestExclusiveOpen]);
     const [position, setPosition] = (0, react_1.useState)("below");
     const inputRef = (0, react_1.useRef)(null);
     const dropdownRef = (0, react_1.useRef)(null);
@@ -194,7 +212,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                 handleOptionClick(matchingOption);
             }
             else if (!isOpen) {
-                setIsOpen(true);
+                openDropdown();
             }
         }
         else if (e.key === "ArrowDown") {
@@ -203,7 +221,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             e.preventDefault();
             if (!isOpen) {
                 pendingFocusFirstOption.current = true;
-                setIsOpen(true);
+                openDropdown();
             }
             else if (filteredOptions.length > 0) {
                 focusOption(0);
@@ -249,12 +267,12 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;
                                     }
-                                    setIsOpen(true);
+                                    openDropdown();
                                 }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[500], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
                                     borderColor: error
                                         ? theme.colors.semanticText.error
@@ -266,9 +284,9 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                                     boxShadow: (0, fieldStyles_1.fieldFocusRing)(theme, !!error),
                                 }, style: {
                                     ...inputStyle,
-                                    backgroundColor: theme.colors.gray[50],
+                                    backgroundColor: theme.colors.background[50],
                                     fontWeight: 600,
-                                    color: theme.colors.gray[700],
+                                    color: theme.colors.text[700],
                                     padding: "0 0.75rem",
                                     fontSize: 15,
                                     letterSpacing: 0.7,

package/dist/Components/SelectV2/SelectV2.js CHANGED Viewed

@@ -46,6 +46,7 @@ const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const fieldStyles_1 = require("../Common/fieldStyles");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const FormLabel_1 = require("../Common/FormLabel");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
@@ -74,6 +75,7 @@ function SelectV2(props) {
     const { options = [], placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isRequired = false, size = "md", isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)({ defaultIsOpen: defaultOpen });
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
     const [filterText, setFilterText] = (0, react_1.useState)("");
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
     const triggerRef = (0, react_1.useRef)(null);
@@ -105,6 +107,7 @@ function SelectV2(props) {
         var _a;
         if (isDisabled)
             return;
+        requestExclusiveOpen();
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
         onOpen();
         const firstSelected = props.isMulti ? (_a = props.value) === null || _a === void 0 ? void 0 : _a[0] : props.value;

package/dist/Components/Table/TableProps.d.ts CHANGED Viewed

@@ -114,6 +114,8 @@ export type TableHeaderProps = {
     isFreeze?: boolean;
     isHidden?: boolean;
     type?: "status";
+    /** Pre-resolved tone per value — preferred over `statusColors` hex overrides. */
+    statusPalette?: Record<string, import("../../Utils/table").TablePaletteColor>;
     statusColors?: Record<string, string>;
     columnType?: TableColumnType;
     node?: (data: DataObject) => JSX.Element | string | number | undefined;

package/dist/Components/Table/components/TableBody.js CHANGED Viewed

@@ -41,7 +41,6 @@ const react_1 = require("@chakra-ui/react");
 const react_2 = __importStar(require("react"));
 const table_1 = require("../../../Utils/table");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const TableLoading_1 = require("./TableLoading");
 const TableActions_1 = __importDefault(require("./TableActions"));
 const lucide_react_1 = require("lucide-react");
@@ -137,7 +136,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
     const chromeHoverable = rowStyle ? "false" : "true";
     const rowContent = getRowContent(row);
     return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: rowSx, children: [isContent && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: "6", p: 0, fontSize: 14, background: isChecked ? selectedFrozenBg : frozenCellBg, color: freezedTextColor, position: "sticky", borderBottom: borderStyle, boxShadow: leadSx, boxSizing: "border-box", "data-hoverable": chromeHoverable, left: "0px", zIndex: 1, className: "columns sticky-columns", children: !!(row === null || row === void 0 ? void 0 : row.content) && ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { fontSize: 16 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: variant.slot.width, minW: variant.slot.width, px: variant.slot.centered ? 0 : undefined, textAlign: variant.slot.centered ? "center" : undefined, fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? leadSx : undefined, "data-hoverable": chromeHoverable, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: "table-slot-index", gridArea: "1 / 1", color: variant.slot.indexInk, fontSize: "0.6875rem", fontWeight: 500, transition: "opacity 0.15s ease-in-out", sx: { fontVariantNumeric: "tabular-nums" }, children: rowIndex + 1 })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", className: restsOnIndex ? "table-slot-box" : undefined, gridArea: restsOnIndex ? "1 / 1" : undefined, display: "flex", alignItems: "center", justifyContent: "center", transition: "opacity 0.15s ease-in-out", children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), columns.map((header, headerIndex) => {
-                        var _a, _b, _c;
+                        var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;
                         const isFrozen = header.isFreeze;
@@ -145,21 +144,19 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                         const isStatus = header.type === "status" && !header.node;
                         const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
                         const statusColor = isStatus
-                            ? (0, table_1.pickTableColor)(rawStatus, palette, (_b = header.statusColors) === null || _b === void 0 ? void 0 : _b[rawStatus], theme)
+                            ? (_c = (_b = header.statusPalette) === null || _b === void 0 ? void 0 : _b[rawStatus]) !== null && _c !== void 0 ? _c : (0, table_1.pickTableColor)(rawStatus, palette, (_d = header.statusColors) === null || _d === void 0 ? void 0 : _d[rawStatus], theme)
                             : null;
-                        // Guards a `statusColor` built by an older external caller that predates `onSolid`.
-                        const statusOnSolid = statusColor
-                            ? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : (0, accentText_1.onFilled)(statusColor.solid, theme.colors.white, theme.colors.black)
-                            : undefined;
                         const isBleed = variant.cells.statusFill === "bleed" && !!statusColor;
+                        const bleedBg = statusColor === null || statusColor === void 0 ? void 0 : statusColor.soft;
+                        const bleedInk = statusColor === null || statusColor === void 0 ? void 0 : statusColor.text;
                         const canHover = !isBleed && !((cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle);
-                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
+                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isBleed ? 0 : cellPy, px: isBleed ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isBleed ? bleedBg : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? leadSx : undefined, borderBottom: noBorders
                                 ? "none"
                                 : `0.063rem solid ${isFrozen || isChecked
                                     ? variant.row.frozenRuleColor
-                                    : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? statusOnSolid : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
+                                    : variant.row.ruleColor}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isBleed ? bleedInk : variant.cells.ink, "data-hoverable": canHover ? "true" : "false", _hover: variant.row.hoverScope === "row" || !canHover
                                 ? EMPTY_HOVER
-                                : hoverStyle, children: isBleed ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: statusOnSolid })) : isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusPill, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), soft: statusColor.soft, ink: (0, pillInk_1.resolvePillInk)(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                                : hoverStyle, children: isBleed ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: bleedInk })) : isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusPill, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), soft: statusColor.soft, ink: (0, pillInk_1.resolvePillInk)(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: (0, table_1.normalizeTableCellValue)(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
                     }), isLink && ((0, jsx_runtime_1.jsx)(react_1.Td, { w: 2, p: 0, fontSize: 14, background: isChecked ? (isActionFreeze ? selectedFrozenBg : selectedBg) : isActionFreeze ? frozenCellBg : theme.colors.background[50], color: freezedTextColor, position: isActionFreeze ? "sticky" : "relative", borderBottom: borderStyle, boxSizing: "border-box", right: 0, zIndex: 1, className: `columns sticky-columns${isActionFreeze ? "-right" : ""}`, children: (row.onLink || row.onEdit || row.onDelete) ? ((0, jsx_runtime_1.jsx)(TableActions_1.default, { row: row })) : null }))] }), rowContent && isExpanded && ((0, jsx_runtime_1.jsx)(react_1.Tr, { ref: expandedRowRef, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +

package/dist/Components/Table/filters/CompactSelect.js CHANGED Viewed

@@ -5,9 +5,17 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
+const useExclusiveOverlay_1 = require("../../../Hooks/useExclusiveOverlay");
 const CompactSelect = ({ options, value, placeholder = "Select", height = "22px", onSelect, size = "xs" }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, () => setIsOpen(false));
+    const openDropdown = () => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    };
     const [query, setQuery] = (0, react_1.useState)("");
     const filtered = (0, react_1.useMemo)(() => {
         const q = query.trim().toLowerCase();
@@ -40,17 +48,30 @@ const CompactSelect = ({ options, value, placeholder = "Select", height = "22px"
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "base", onClick: () => setIsOpen((prev) => !prev), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => setIsOpen(false), placement: "bottom-start", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", w: "100%", h: typeof height === "number" ? `${height}px` : height, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, px: 2, border: "0.063rem solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50], borderRadius: "base", onClick: () => (isOpen ? setIsOpen(false) : openDropdown()), children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: size === "xs" ? "0.75rem" : "0.875rem", color: theme.colors.text[500], noOfLines: 1, textAlign: "left", children: (value === null || value === void 0 ? void 0 : value.label) || placeholder }), isOpen ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 12 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 12 })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "100%", maxW: "14rem", p: 0, zIndex: 1600, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 2, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Input, { size: size, placeholder: "Search", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                         if (e.key === "ArrowDown" && filtered.length > 0) {
                                             e.preventDefault();
                                             focusOption(0);
                                         }
-                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": (value === null || value === void 0 ? void 0 : value.id) === opt.id, tabIndex: i === activeIndex ? 0 : -1, ref: (el) => {
-                                                optionRefs.current[i] = el;
-                                            }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", _hover: { bg: theme.colors.background[100] }, bg: (value === null || value === void 0 ? void 0 : value.id) === opt.id ? theme.colors.background[200] : theme.colors.transparent, onClick: () => {
-                                                onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
-                                                setIsOpen(false);
-                                                setQuery("");
-                                            }, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id))), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
+                                    }, sx: { fontSize: "0.75rem", height: "22px" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { role: "listbox", "aria-label": placeholder, maxH: "12rem", overflowY: "auto", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], onKeyDown: handleListKeyDown, children: [filtered.map((opt, i) => {
+                                            const selected = (value === null || value === void 0 ? void 0 : value.id) === opt.id;
+                                            const isActive = i === activeIndex;
+                                            const rowBg = selected
+                                                ? isActive
+                                                    ? rowBackgrounds.selectedActive
+                                                    : rowBackgrounds.selected
+                                                : isActive
+                                                    ? rowBackgrounds.active
+                                                    : theme.colors.transparent;
+                                            return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, ref: (el) => {
+                                                    optionRefs.current[i] = el;
+                                                }, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 2, py: 1, cursor: "pointer", color: theme.colors.text[700], _hover: {
+                                                    bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
+                                                }, bg: rowBg, onClick: () => {
+                                                    onSelect === null || onSelect === void 0 ? void 0 : onSelect(opt);
+                                                    setIsOpen(false);
+                                                    setQuery("");
+                                                }, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", children: opt.label }) }, opt.id));
+                                        }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 2, py: 2, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "0.75rem", color: theme.colors.textMuted, children: "No results" }) }))] })] }) }) }) })] }));
 };
 exports.default = CompactSelect;

package/dist/Components/Table/settings/ManageColumns.js CHANGED Viewed

@@ -10,9 +10,11 @@ const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
 const lucide_react_1 = require("lucide-react");
 const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
     const [draggedItemIndex, setDraggedItemIndex] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)(null);
@@ -83,14 +85,14 @@ const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
                     return ((0, jsx_runtime_1.jsxs)(react_2.ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
                             ? theme.colors.primary[100]
                             : isDropZone
-                                ? theme.colors.primary[50]
+                                ? rowBackgrounds.selected
                                 : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
                             ? theme.colors.primary[400]
                             : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
-                            bg: theme.colors.gray[50],
+                            bg: rowBackgrounds.active,
                             borderColor: theme.colors.boxborder[200],
                         }, _active: { cursor: "grabbing" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
-                                    color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
+                                    color: item.isHidden ? theme.colors.textMuted : theme.colors.text[700],
                                 } }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} up`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": `Move ${item.label} down`, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
                 })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
 };

package/dist/Components/Table/settings/TableSettings.js CHANGED Viewed

@@ -13,6 +13,7 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../../Theme/tokens/builders/scrollbar");
 const lucide_react_1 = require("lucide-react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const rowStates_1 = require("../../../Theme/tokens/builders/rowStates");
 const MotionModalContent = (0, framer_motion_1.motion)(react_1.ModalContent);
 const DENSITY_OPTIONS = [
     { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
@@ -21,6 +22,7 @@ const DENSITY_OPTIONS = [
 ];
 const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_2.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
     const childInputMethodsRef = (0, react_2.useRef)({});
     const [settingsOpen, setSettingsOpen] = (0, react_2.useState)(false);
     const [selectedIndex, setSelectedIndex] = (0, react_2.useState)(0);
@@ -55,7 +57,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                         color: theme.colors.accentText
                     } }) }), (0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_1.Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { pt: 4, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), (0, jsx_runtime_1.jsxs)(react_1.TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.boxborder[200], children: [(0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Density" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Manage Columns" }), (0, jsx_runtime_1.jsx)(react_1.Tab, { ...tabStyle, children: "Group" })] })] }), (0, jsx_runtime_1.jsx)(react_1.ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_1.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 1, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
                                                             const selected = density === opt.value;
-                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
+                                                            return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsxs)(react_1.Box, { textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
                                                         }) }) }), (0, jsx_runtime_1.jsx)(react_1.TabPanel, { px: 0, py: 0, children: (0, jsx_runtime_1.jsx)(react_1.Box, { sx: {
                                                             "& [role='listitem'], & > div > div": {
                                                                 py: "4px !important",
@@ -73,7 +75,7 @@ const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, g
                                                                 .map((opt) => {
                                                                 var _a;
                                                                 const selected = selectedGroup === opt.id;
-                                                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[200], bg: selected ? rowBackgrounds.selected : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [(0, jsx_runtime_1.jsx)(react_1.Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
                                                             }) })] })] }) })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.boxborder[200], pt: 3, pb: 3, px: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
 };
 exports.default = TableSettings;

package/dist/Components/Trail/EditableCell.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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. */