npm - pixelize-design-library - Versions diffs - 2.4.2-beta.2 → 2.4.2-beta.21 - Mend

pixelize-design-library 2.4.2-beta.2 → 2.4.2-beta.21

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 (195) hide show

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

@@ -43,6 +43,7 @@ const lucide_react_1 = require("lucide-react");
 const FormLabel_1 = require("../Common/FormLabel");
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
 const HelperText_1 = __importDefault(require("../Common/HelperText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
@@ -487,7 +488,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                             var _a, _b, _c, _d, _e;
                             const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
-                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: theme.colors.boxborder[300], bg: customSelectOpen
+                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", ref: customSelectRef, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: customSelectOpen
                                     ? theme.colors.primary.opacity[8]
                                     : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: "background 0.15s ease, box-shadow 0.15s ease", boxShadow: customSelectOpen
                                     ? `inset 0 0 0 0.063rem ${theme.colors.primary[500]}`
@@ -495,7 +496,7 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                     e.stopPropagation();
                                     setIsOpen(false);
                                     setCustomSelectOpen((prev) => !prev);
-                                }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: theme.colors.placeholder[500], isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: "transform 0.2s ease, color 0.15s ease", transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setInsideSelectMenuRef, id: "custom-select-portal", position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: (_d = (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.md) !== null && _d !== void 0 ? _d : "md", minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_e = insideSelect.option) === null || _e === void 0 ? void 0 : _e.map((item) => {
+                                }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "4.5rem", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 1, width: insideSelect.width, height: insideSelectBoxHeight, pl: "0.5rem", pr: "0.375rem", children: [insideLabel ? ((0, jsx_runtime_1.jsx)(SelectTruncatedLabel_1.default, { label: insideLabel, maxWidth: insideSelect.width || "6rem", fontSize: s.fieldFontSize })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.fieldFontSize, fontWeight: 500, color: (0, placeholderInk_1.placeholderInk)(theme.colors), isTruncated: true, maxW: insideSelect.width || "6rem", children: insidePlaceholder })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, color: customSelectOpen ? theme.colors.accentText : theme.colors.textMuted, transition: "transform 0.2s ease, color 0.15s ease", transform: customSelectOpen ? "rotate(180deg)" : "rotate(0deg)", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize }) })] }), customSelectOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { ref: setInsideSelectMenuRef, id: "custom-select-portal", position: "fixed", top: `${customSelectPos.top}px`, left: `${customSelectPos.left}px`, zIndex: 1510, bg: theme.colors.background[50], border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: (_d = (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.md) !== null && _d !== void 0 ? _d : "md", minW: `${customSelectPos.width}px`, maxW: "20rem", py: 1, overflow: "hidden", children: (_e = insideSelect.option) === null || _e === void 0 ? void 0 : _e.map((item) => {
                                                 var _a;
                                                 const selected = ((_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.id) === item.id;
                                                 return ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, minH: s.optionRowMinH, py: s.optionRowPy, px: "0.75rem", fontSize: s.dropdownTextFontSize, fontWeight: selected ? 600 : 500, color: selected
@@ -544,10 +545,10 @@ const SearchSelect = ({ id, label, options, onSelect, onSearch, isOptionLoading
                                                 setCustomSelectOpen(false);
                                             return !prev;
                                         });
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[100]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "sm", bg: theme.colors.background[50], boxShadow: "md", display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: s.dropdownTextFontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), role: "option", "aria-selected": isSelected(option.id), py: s.optionRowPy, px: 3, minH: s.optionRowMinH, cursor: "pointer", bg: index === activeIndex
                                             ? theme.colors.primary.opacity[8]
                                             : isSelected(option.id)
                                                 ? theme.colors.gray[100]
-                                                : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[100]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
+                                                : "transparent", _hover: { bg: theme.colors.gray[50] }, onClick: () => handleSelect(option), onMouseEnter: () => setActiveIndex(index), display: "flex", alignItems: "center", gap: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected(option.id), sx: { pointerEvents: "none" }, size: s.checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: option.label }))] }, option.id))), ((pagination === null || pagination === void 0 ? void 0 : pagination.scrollLoading) || (isOptionLoading && filteredOptions.length > 0)) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, display: "flex", alignItems: "center", justifyContent: "center", gap: 2, minH: s.optionRowMinH, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: loadingText })] }))] })) }), (addNew === null || addNew === void 0 ? void 0 : addNew.enabled) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: s.optionRowPy, px: 3, borderTop: "0.063rem solid", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[50], display: "flex", alignItems: "center", gap: 2, minH: s.optionRowMinH, cursor: "pointer", onClick: addNew.onClick, _hover: { bg: theme.colors.gray[50] }, children: [addNew.icon || (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: s.addNewIconSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.dropdownTextFontSize, children: addNew.text || "Add New" })] }))] }) })), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }));
 };
 exports.default = SearchSelect;

package/dist/Components/Select/Select.styles.js CHANGED Viewed

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
 exports.Select = {
     baseStyle: ({ theme }) => ({
         field: {
@@ -19,7 +20,7 @@ exports.Select = {
             width: "100%", // full container width
             maxWidth: "100%",
             _placeholder: {
-                fontStyle: "italic",
+                color: (0, placeholderInk_1.placeholderInk)(theme.colors),
                 whiteSpace: "nowrap",
                 overflow: "hidden",
                 textOverflow: "ellipsis",
@@ -63,7 +64,7 @@ exports.Select = {
             // [800], not [500]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
             // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
             // [800] clears all named surfaces with margin (3.44-3.90).
-            const borderColor = theme.colors.boxborder[800];
+            const borderColor = theme.colors.boxborder[500];
             const shadowPrimary = theme.colors.boxShadow.primary;
             const shadowError = theme.colors.boxShadow.error;
             const primary = theme.colors.primary[500];

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

@@ -36,7 +36,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
     const errorBorder = `2px solid ${theme.colors.semanticText.error}`;
     // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
     // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const defaultBorderThin = `1px solid ${theme.colors.boxborder[800]}`;
+    const defaultBorderThin = `1px solid ${theme.colors.boxborder[500]}`;
     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);
@@ -252,7 +252,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                                         return;
                                     }
                                     setIsOpen(true);
-                                }, 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[800], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
+                                }, 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
                                         : theme.colors.primary[500],
@@ -270,7 +270,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                                     fontSize: 15,
                                     letterSpacing: 0.7,
                                     border: error ? errorBorder : defaultBorderThin,
-                                } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[300], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[300], zIndex: 1, borderTop: `1px solid ${theme.colors.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
+                                } }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }) }) }));
 }

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

@@ -42,6 +42,8 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const placeholderInk_1 = require("../../Theme/tokens/builders/placeholderInk");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const FormLabel_1 = require("../Common/FormLabel");
 const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
@@ -61,7 +63,7 @@ const OptionRow = react_1.default.memo(function OptionRow({ option, index, listb
             : theme.colors.text[700], bg: isActive ? theme.colors.primary.opacity[8] : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
 });
 function SelectV2(props) {
-    var _a, _b, _c;
+    var _a, _b;
     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 });
@@ -231,15 +233,7 @@ function SelectV2(props) {
     const triggerId = `selectv2-trigger-${instanceId}`;
     const activeOption = filteredOptions[activeIndex];
     const activeDescendantId = activeOption ? optionDomId(listboxId, activeOption.id) : undefined;
-    const listScrollStyles = (0, react_1.useMemo)(() => ({
-        scrollbarWidth: "thin",
-        scrollbarColor: `${theme.colors.gray[300]} transparent`,
-        "&::-webkit-scrollbar": { width: "6px" },
-        "&::-webkit-scrollbar-thumb": {
-            background: theme.colors.gray[300],
-            borderRadius: "base",
-        },
-    }), [theme]);
+    const listScrollStyles = (0, react_1.useMemo)(() => (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), [theme]);
     const defaultTriggerContent = () => {
         var _a;
         if (props.isMulti) {
@@ -254,7 +248,7 @@ function SelectV2(props) {
         return selectedOptions[0] ? selectedOptions[0].label : placeholder;
     };
     const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: triggerId, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? theme.colors.text[900] : theme.colors.placeholder[500], "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: theme.colors.textMuted, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "xl", border: `0.063rem solid ${theme.colors.boxborder[200]}`, boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[100]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: triggerId, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? theme.colors.text[900] : (0, placeholderInk_1.placeholderInk)(theme.colors), "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: theme.colors.textMuted, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
                                             setFilterText(event.target.value);
                                             setActiveIndex(0);
                                         }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: theme.colors.textMuted, children: "No Options" })), filteredOptions.map((option, index) => {

package/dist/Components/SideBar/SecondaryBar.js CHANGED Viewed

@@ -36,7 +36,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!item.disabled)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;

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

@@ -6,16 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const StageItem_1 = __importDefault(require("./StageItem"));
 const StepperStage_1 = __importDefault(require("./StepperStage"));
-const scrollSxFor = (thumb) => ({
-    "&::-webkit-scrollbar": { height: "4px" },
-    "&::-webkit-scrollbar-thumb": {
-        borderRadius: "full",
-        backgroundColor: thumb,
-    },
-    "&::-webkit-scrollbar-track": { background: "transparent" },
-});
 // Gap between items per variant (chevron interlocks via negative margin).
 const gapFor = {
     chevron: "0",
@@ -40,7 +33,7 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
     const total = stages.length;
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: {
             "&:hover": { overflowX: "auto" },
-            ...scrollSxFor(theme.colors.gray[300]),
+            ...(0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"),
         }, children: stages.map((stage, index) => {
             const state = stateFor(index);
             if (variant === "stepper") {

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

@@ -1,2 +1,2 @@
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, stripe, groupColors, onAddItem, emptyState, onRefresh, }: TableProps): import("react/jsx-runtime").JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, variant, stripe, groupColors, onAddItem, emptyState, onRefresh, }: TableProps): import("react/jsx-runtime").JSX.Element;

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

@@ -10,10 +10,14 @@ const react_2 = require("@chakra-ui/react");
 const react_3 = require("@chakra-ui/react");
 const framer_motion_1 = require("framer-motion");
 const LeftFilterPane_1 = __importDefault(require("./filters/LeftFilterPane"));
+const variants_1 = require("./variants");
+const TableVariantContext_1 = require("./variants/TableVariantContext");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const Pagination_1 = __importDefault(require("./components/Pagination"));
 const TableHeader_1 = __importDefault(require("./components/TableHeader"));
 const TableBody_1 = __importDefault(require("./components/TableBody"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
 const useTable_1 = __importDefault(require("./hooks/useTable"));
 const table_1 = require("../../Utils/table");
 const usePreferences_1 = require("../../Hooks/usePreferences");
@@ -33,11 +37,12 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
     name: "",
     page: "",
     orgId: "",
-}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", stripe, groupColors, onAddItem, emptyState, onRefresh,
+}, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", variant = "classic", stripe, groupColors, onAddItem, emptyState, onRefresh,
 // onColumnFilter
  }) {
     var _a, _b, _c, _d;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const variantTokens = (0, react_1.useMemo)(() => variants_1.TABLE_VARIANTS[variant](theme.colors, (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
     const tableContainerRef = (0, react_1.useRef)(null);
     const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = (0, react_2.useDisclosure)();
@@ -356,12 +361,14 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
             return acc + (Array.isArray(items) ? items.length : 0);
         }, 0);
     }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
+    return ((0, jsx_runtime_1.jsxs)(TableVariantContext_1.TableVariantProvider, { value: variantTokens, children: [(0, jsx_runtime_1.jsx)("style", { children: `
         @keyframes pixelize-table-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.border[500]}`, borderRadius: "base", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: theme.colors.border[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [filterSidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
+      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.boxborder[200]}`, borderRadius: "base",
+                // Square children poked past the rounded border, leaving a gap at each corner.
+                overflow: "hidden", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { "data-testid": "filter-sidebar-pane", initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "1px solid" : "none", borderColor: theme.colors.boxborder[200], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [filterSidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
                                                                         color: theme.colors.accentText,
                                                                     } }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                         var _a;
@@ -392,29 +399,15 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                             }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                            ...(0, scrollbar_1.scrollbarStyles)(theme.colors),
+                                            // Compact rows hide the horizontal bar until hover to keep the row height.
                                             '&::-webkit-scrollbar': {
-                                                width: '6px',
-                                                height: isCompactRows ? '0px' : '6px',
-                                            },
-                                            '&:hover::-webkit-scrollbar': {
-                                                height: '6px',
-                                            },
-                                            '&::-webkit-scrollbar-track': {
-                                                background: theme.colors.gray[100],
-                                                borderRadius: 'base',
-                                            },
-                                            '&::-webkit-scrollbar-thumb': {
-                                                background: theme.colors.gray[400],
-                                                borderRadius: 'base',
-                                            },
-                                            '&::-webkit-scrollbar-thumb:hover': {
-                                                background: theme.colors.gray[500],
+                                                width: scrollbar_1.SCROLLBAR_WIDTH,
+                                                height: isCompactRows ? '0px' : scrollbar_1.SCROLLBAR_WIDTH,
                                             },
+                                            '&:hover::-webkit-scrollbar': { height: scrollbar_1.SCROLLBAR_WIDTH },
                                             scrollbarWidth: isCompactRows ? 'none' : 'thin',
-                                            '&:hover': {
-                                                scrollbarWidth: 'thin',
-                                            },
-                                            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+                                            '&:hover': { scrollbarWidth: 'thin' },
                                         }, children: [(0, jsx_runtime_1.jsxs)(react_3.Table, { variant: "simple", size: "sm", minW: "100%", role: "grid", "aria-rowcount": isGrouped ? undefined : _filteredData.length + 1, className: "table_wrapper", sx: {
                                                     width: "100%",
                                                     // `separate` (not `collapse`) so sticky header cells paint an opaque
@@ -432,5 +425,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.border[500]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

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

@@ -1,7 +1,9 @@
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
 import { FilterSidebarProps } from "../FilterSidebar/FilterSidebar";
 import type { FilterValues } from "./filterTypes";
+import type { TableVariant } from "./variants/tokens";
 export type { FilterValues } from "./filterTypes";
+export type { TableVariant, TableVariantTokens } from "./variants/tokens";
 /** Dynamic row shape (cells, styles, callbacks). */
 export type DataObject = Record<string, unknown>;
 export type TableDensity = "compact" | "normal" | "comfortable";
@@ -16,6 +18,8 @@ export type TableProps = {
     groupColors?: Record<string | number, string>;
     onAddItem?: (groupValue: string | number) => void;
     density?: TableDensity;
+    /** Visual preset. Defaults to `classic` — the table exactly as it shipped. */
+    variant?: TableVariant;
     stripe?: boolean;
     emptyState?: TableEmptyState | ReactNode;
     handleExportChange?: (value: string) => void | undefined;

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

@@ -72,11 +72,11 @@ const TableActions = react_1.default.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, gap: 2, onClick: () => {
                                             var _a;
                                             (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                             handleClose();
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, onClick: () => {
+                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.boxborder[200]}`, borderRadius: 0, onClick: () => {
                                             var _a;
                                             (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
                                             handleClose();

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

@@ -44,10 +44,11 @@ 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 tableRowHoverStyle_1 = require("./tableRowHoverStyle");
 const lucide_react_1 = require("lucide-react");
 const Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 const TableGroupRow_1 = __importDefault(require("./TableGroupRow"));
+const TableVariantContext_1 = require("../variants/TableVariantContext");
+const pillInk_1 = require("../variants/pillInk");
 // Density → row height (px) + cell vertical padding. The padding (not just the
 // min-height) is what drives perceived row size, so compact tightens both.
 const DENSITY_CONFIG = {
@@ -63,6 +64,9 @@ const getRowContent = (row) => typeof row.content === "function"
 // the label is centered in whichever of white/black clears AA against that fill —
 // the fill can be a consumer hex we can't know in advance is light or dark.
 const StatusCell = ({ value, onSolid }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "100%", h: "100%", px: "0.5rem", fontSize: "0.75rem", fontWeight: 600, color: onSolid, textAlign: "center", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
+// Studio's status cell: a contained chip on the tone's soft rung. Same tone pair
+// the group header already uses, so an override hex behaves identically in both.
+const StatusPill = ({ value, soft, ink, radius, }) => ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "inline-flex", alignItems: "center", maxW: "100%", px: "0.5rem", py: "0.125rem", borderRadius: radius, bg: soft, color: ink, fontSize: "0.75rem", fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: value }));
 const EMPTY_HOVER = {};
 const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, isContent, isLink, isCheckbox, isLoading, isActionFreeze, columns, leftOffsets, noBorders, freezedBgColor, freezedTextColor, theme, borderStyle, selectedBg, selectedFrozenBg, hoverStyle, rowHeight, cellPy, palette, accentColor, ariaRowIndex, handleCheckbox, onRowClick, toggleRowExpansion, onMeasure, }) => {
     // Measured-height virtualization: report this row's real height (main + any
@@ -101,15 +105,38 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
             onRowClick(row, { label: header.label, id: header.id });
         }
     }, [row, onRowClick]);
+    const variant = (0, TableVariantContext_1.useTableVariant)();
     const firstDataColIndex = columns.findIndex((c) => !c.isHidden);
     const accentSx = accentColor ? `inset 3px 0 0 ${accentColor}` : undefined;
+    // A selected row earns the leading bar only where a group accent isn't already
+    // claiming that edge — the group's identity is the scarcer signal.
+    const leadSx = variant.row.showSelectedBar && isChecked && !accentColor
+        ? `inset 3px 0 0 ${variant.row.selectedBarColor}`
+        : accentSx;
+    const restsOnIndex = variant.slot.rest === "index";
+    const rowSx = {
+        ...(variant.row.hoverScope === "row"
+            ? { "&:hover > td[data-hoverable='true']": { backgroundColor: variant.row.hoverBg } }
+            : {}),
+        // opacity, not display: a hidden-by-display checkbox leaves the a11y tree and
+        // cannot be tabbed to, so `:focus-within` would never fire to bring it back.
+        ...(restsOnIndex
+            ? {
+                "& .table-slot-box": { opacity: isChecked ? 1 : 0 },
+                "& .table-slot-index": { opacity: isChecked ? 0 : 1 },
+                "&:hover .table-slot-box, &:focus-within .table-slot-box": { opacity: 1 },
+                "&:hover .table-slot-index, &:focus-within .table-slot-index": { opacity: 0 },
+            }
+            : {}),
+    };
     // Pinned/frozen columns get a tinted, opaque background so the frozen pane reads
     // as one piece with its header (and so sticky cells cover scrolling content).
     const frozenCellBg = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.table.hover[100];
     const cellStyles = row.cellStyle;
     const rowStyle = row.rowStyle;
+    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", 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: accentSx, boxSizing: "border-box", 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: "6", fontSize: 14, fontWeight: 600, color: theme.colors.background[50], textTransform: "capitalize", background: isChecked ? selectedFrozenBg : frozenCellBg, position: "sticky", borderBottom: borderStyle, boxShadow: !isContent ? accentSx : undefined, boxSizing: "border-box", left: "0px", zIndex: 1, className: "columns sticky-columns", 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) => {
+    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;
                         if (header.isHidden)
                             return null;
@@ -124,13 +151,15 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
                         const statusOnSolid = statusColor
                             ? (_c = statusColor.onSolid) !== null && _c !== void 0 ? _c : (0, accentText_1.onFilled)(statusColor.solid, theme.colors.white, theme.colors.black)
                             : undefined;
-                        return ((0, jsx_runtime_1.jsx)(react_1.Td, { maxWidth: 500, minWidth: 120, height: `${rowHeight}px`, py: isStatus && statusColor ? 0 : cellPy, px: isStatus && statusColor ? 0 : undefined, onClick: () => handleCellClick(header), fontSize: 14, fontWeight: 400, position: isFrozen ? "sticky" : undefined, left: isFrozen ? leftOffsets[headerIndex] : undefined, zIndex: isFrozen ? 1 : 0, background: isStatus && statusColor ? statusColor.solid : isChecked ? (isFrozen ? selectedFrozenBg : selectedBg) : isFrozen ? frozenCellBg : theme.colors.background[50], textOverflow: "ellipsis", boxShadow: isFirstDataCell ? accentSx : undefined, borderBottom: noBorders
+                        const isBleed = variant.cells.statusFill === "bleed" && !!statusColor;
+                        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
                                 ? "none"
-                                : `0.063rem solid ${theme.colors.boxborder[isFrozen || isChecked ? 300 : 200]}`, className: `columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`, boxSizing: "border-box", color: isStatus && statusColor ? statusOnSolid : theme.colors.text[500], _hover: isStatus && statusColor
+                                : `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
                                 ? EMPTY_HOVER
-                                : (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) || rowStyle
-                                    ? EMPTY_HOVER
-                                    : hoverStyle, children: isStatus && statusColor ? ((0, jsx_runtime_1.jsx)(StatusCell, { value: (0, table_1.normalizeTableCellValue)(row[header.id]), onSolid: statusOnSolid })) : ((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: 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));
                     }), 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) +
@@ -139,6 +168,7 @@ const TableRow = react_2.default.memo(({ row, rowIndex, isChecked, isExpanded, i
 const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, selections, isLoading, onRowClick, isContent, isLink, isActionFreeze, loadingSkeletonRows, scrollContainerRef, density, accentColors, groups, onAddItem, emptyState, }) => {
     var _a, _b, _c;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const variant = (0, TableVariantContext_1.useTableVariant)();
     const [expandedRows, setExpandedRows] = (0, react_2.useState)(new Set());
     const [collapsedGroups, setCollapsedGroups] = (0, react_2.useState)(new Set());
     const toggleGroup = (0, react_2.useCallback)((value) => {
@@ -284,17 +314,16 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         const checkboxOffset = isCheckbox ? 50 : 0;
         return columnWidths.map((_, idx) => columnWidths.slice(0, idx).reduce((sum, w) => sum + w, 0) + checkboxOffset);
     }, [columnWidths, isCheckbox]);
-    const borderStyle = (0, react_2.useMemo)(() => noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, [noBorders, theme.colors.border]);
+    const borderStyle = (0, react_2.useMemo)(() => noBorders ? "none" : `0.063rem solid ${variant.row.ruleColor}`, [noBorders, variant.row.ruleColor]);
     // Selected-row tint applied per-cell (NOT a blanket `& td` override) so status
     // cells keep their solid color + white text instead of white-on-tint.
-    const selectedBg = theme.colors.primary.opacity[16];
+    const selectedBg = variant.row.selectedBg;
     // Sticky/frozen cells overlay scrolling content, so their selected background
     // must be OPAQUE — paint the (translucent) tint over an opaque base.
     const selectedFrozenBg = `linear-gradient(0deg, ${selectedBg}, ${selectedBg}), ${theme.colors.background[50]}`;
     // Dark mode lifts the hover fill to `table.hover[500]`; `[300]` sits ~1.2:1 from the canvas.
     // No ink flip needed — see `tableRowHoverStyle.ts`.
-    const isDark = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main);
-    const hoverStyle = (0, react_2.useMemo)(() => (0, tableRowHoverStyle_1.getTableRowHoverStyle)(theme.colors, isDark), [theme.colors, isDark]);
+    const hoverStyle = (0, react_2.useMemo)(() => ({ backgroundColor: variant.row.hoverBg }), [variant.row.hoverBg]);
     // Flatten groups → one sequence of header/row items so it can be windowed.
     // Independent of scrollTop, so scrolling reuses it instead of re-flattening.
     const groupItems = (0, react_2.useMemo)(() => {
@@ -323,7 +352,7 @@ const TableBody = ({ data, isCheckbox, columns, startRow, columnWidths, freezedB
         return { heights, offsets, totalH: acc };
     }, [groupItems, groupVirtualize, rowHeight, GROUP_HEADER_H]);
     if (isLoading && data.length === 0) {
-        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[300], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
+        return ((0, jsx_runtime_1.jsx)(TableLoading_1.TableBodyLoading, { noOfColumns: totalVisibleColumns, borderColor: theme.colors.boxborder[200], rowsCount: typeof loadingSkeletonRows === "number" ? loadingSkeletonRows : 4 }));
     }
     if (!isLoading && data.length === 0) {
         const isStructured = emptyState && typeof emptyState === "object" && !react_2.default.isValidElement(emptyState);

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

@@ -8,7 +8,7 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 /** Monday-style colored, collapsible group header row. */
 const TableGroupRow = ({ label, value, count, color, collapsed, colSpan, ariaRowIndex, onToggle, onAddItem, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-rowindex": ariaRowIndex, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: colSpan, p: 0, border: "none", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14 }), " Add item"] }))] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Tr, { "aria-rowindex": ariaRowIndex, children: (0, jsx_runtime_1.jsx)(react_1.Td, { colSpan: colSpan, p: 0, border: "none", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, px: 3, py: 2, bg: color.soft, boxShadow: `inset 4px 0 0 ${color.solid}`, borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": collapsed ? "Expand group" : "Collapse group", size: "xs", variant: "ghost", color: color.text, onClick: onToggle, icon: collapsed ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 700, color: color.text, isTruncated: true, maxW: "20rem", children: label }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, color: color.text, bg: theme.colors.background[50], borderRadius: "full", px: "0.5rem", py: "0.0625rem", children: count }), onAddItem && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", align: "center", gap: 1, ml: "auto", px: 2, py: 1, borderRadius: "md", fontSize: "0.75rem", fontWeight: 500, color: theme.colors.text[500], _hover: { bg: theme.colors.background[50], color: color.text }, onClick: () => onAddItem(value), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14 }), " Add item"] }))] }) }) }));
 };
 exports.TableGroupRow = TableGroupRow;
 exports.default = exports.TableGroupRow;