pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

package/dist/esm/Components/SideBar/SideBar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { Flex, Text, Image, Box, Skeleton, useBreakpointValue } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
 import { FlexCss, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
 import { ArrowLeftToLine, ArrowRightToLine, ChevronLeft, Maximize2, MoreVertical, PanelLeft, Plus, X } from "lucide-react";
@@ -27,7 +27,9 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
     if (isLoading) {
         return (_jsx(Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? (_jsx(Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: _jsx(Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : (_jsxs(Flex, { align: "center", gap: 3, w: "100%", children: [_jsx(Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), _jsx(Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const logoNode = logo ? (_jsx(Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : (_jsx(Box, { bg: theme.colors.primary[500], color: onFilled(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: _jsx(DefaultLogo, {}) }));
+    const primaryFillRung = solidFillRung(theme.colors.primary, theme.colors.white);
+    const primaryFill = theme.colors.primary[primaryFillRung];
+    const logoNode = logo ? (_jsx(Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : (_jsx(Box, { bg: primaryFill, color: labelOnFill(primaryFill, theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: _jsx(DefaultLogo, {}) }));
     return (_jsxs(Flex, { h: HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && (_jsxs(Box, { flex: "1", minW: 0, children: [_jsx(OverflowTooltipText, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && (_jsx(Text, { fontSize: "10px", color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && (_jsx(Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "base", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? (_jsx(X, { size: 15, color: theme.colors.sidebar.mutedIcon })) : (_jsx(ChevronLeft, { size: 14, color: theme.colors.sidebar.mutedIcon })) }))] }));
 };
 const SkeletonMenuRow = ({ toggle }) => {
@@ -75,7 +77,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
             return null;
         return shell(_jsx(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: _jsx(PanelLeft, { size: 14, color: activeAccent.icon }) }));
     }
-    return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor }) }))] }));
+    return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
 export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, }) {

package/dist/esm/Components/SideBar/components/MenuItemBox.js

@@ -16,6 +16,9 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
     const { title, icon, disabled, locked, badge, subMenu, url } = menu;
+    // `locked` blocks interaction the same as `disabled` — a locked item showing the padlock icon
+    // but still fully clickable was a real gotcha (see COMPONENT-GOTCHAS.md).
+    const isBlocked = disabled || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const submenuPanelId = `submenu-${String((_a = menu.id) !== null && _a !== void 0 ? _a : title)}`;
     // A submenu parent only expands, so it is a button; every other row navigates.
@@ -35,11 +38,11 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const isParentActive = activeMenu === menu.id;
     const isAnyActive = isParentActive || isChildActive;
     const handleToggleSubMenu = (e) => {
-        if (!disabled && hasSubMenu) {
+        if (!isBlocked && hasSubMenu) {
             onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
             return;
         }
-        if (!disabled)
+        if (!isBlocked)
             handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
     };
     // Pill-style nav item. The fill is a white overlay, not a brand tint: the sidebar is a
@@ -63,14 +66,14 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         borderLeft: "2px solid",
         borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
         backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
-        color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
-        _hover: disabled
+        color: isBlocked ? "whiteAlpha.400" : "whiteAlpha.700",
+        _hover: isBlocked
             ? {}
             : {
                 backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
             },
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
+        cursor: isBlocked ? "not-allowed" : "pointer",
+        opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
     };
     const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
@@ -87,14 +90,14 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                     })(), locked && _jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }), hasSubMenu && (_jsx(Icon, { as: isOpen ? ChevronDown : ChevronRight, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon }))] }))] }));
     if (toggle) {
         // Collapsed sidebar: show Popover
-        return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
+        return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
                             if (!hasSubMenu && url && isBrowserNavigationGesture(e))
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
-                        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500, children: _jsx(PopoverBody, { p: "0.625rem", color: "white", children: _jsx(MenuPopoverContent, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+                        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: _jsx(PopoverBody, { p: "0.625rem", color: "white", children: _jsx(MenuPopoverContent, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
                     if (!hasSubMenu && url && isBrowserNavigationGesture(e))
                         return;
                     e.preventDefault();
@@ -106,11 +109,12 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                     }, children: subMenu.map((sub, sIdx) => {
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
-                        return (_jsxs(Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", py: "5px", pl: "30px", pr: "10px", borderRadius: "md", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: (e) => {
+                        const isSubBlocked = sub.disabled || sub.locked;
+                        return (_jsxs(Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", py: "5px", pl: "30px", pr: "10px", borderRadius: "md", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
                                 if (sub.url && isBrowserNavigationGesture(e))
                                     return;
                                 e.preventDefault();
-                                if (!sub.disabled)
+                                if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
                             }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
                                             // open={isOpen}

package/dist/esm/Components/SideBar/components/MenuPopoverContent.js

@@ -8,15 +8,17 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    const { title, icon, subMenu, badge, locked } = menu;
+    const { title, icon, subMenu, badge, locked, disabled } = menu;
+    const isBlocked = disabled || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const isParentActive = activeMenu === menu.id;
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: "8px", px: "8px", py: hasSubMenu ? "6px" : "8px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? "whiteAlpha.100" : undefined, borderRadius: hasSubMenu ? "none" : "md", bg: !hasSubMenu && isParentActive ? theme.colors.primary.opacity[16] : "transparent", _hover: !hasSubMenu ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: "8px", px: "8px", py: hasSubMenu ? "6px" : "8px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? "whiteAlpha.100" : undefined, borderRadius: hasSubMenu ? "none" : "md", bg: !hasSubMenu && isParentActive ? "whiteAlpha.300" : "transparent", _hover: !hasSubMenu && !isBlocked ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
                     if (!hasSubMenu) {
                         e.preventDefault();
-                        handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
+                        if (!isBlocked)
+                            handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
                     }
-                }, cursor: !hasSubMenu ? "pointer" : "default", children: [_jsx(Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : "whiteAlpha.700" }), _jsx(TruncatedTextWithTooltip, { fontWeight: 600, fontSize: "13px", flex: "1", color: theme.colors.white, children: title }), (() => {
+                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, children: [_jsx(Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : "whiteAlpha.700" }), _jsx(TruncatedTextWithTooltip, { fontWeight: 600, fontSize: "13px", flex: "1", color: theme.colors.white, children: title }), (() => {
                         var _a, _b, _c, _d;
                         const cfg = typeof badge === "object" && badge !== null
                             ? badge
@@ -29,14 +31,15 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     })(), locked && _jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
                 var _a;
                 const isSubActive = activeMenu === sub.id;
-                return (_jsxs(Flex, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", onClick: (e) => {
+                const isSubBlocked = sub.disabled || sub.locked;
+                return (_jsxs(Flex, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", onClick: (e) => {
                         e.preventDefault();
-                        if (!sub.disabled)
+                        if (!isSubBlocked)
                             handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub);
-                    }, px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? theme.colors.primary.opacity[16] : "transparent", _hover: {
-                        bg: !sub.disabled ? "whiteAlpha.100" : "transparent",
-                        cursor: !sub.disabled ? "pointer" : "not-allowed",
-                    }, opacity: sub.disabled ? 0.5 : 1, pointerEvents: sub.disabled ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [_jsx(Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }), _jsx(TruncatedTextWithTooltip, { fontSize: "12.5px", fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                    }, px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                        bg: !isSubBlocked ? "whiteAlpha.100" : "transparent",
+                        cursor: !isSubBlocked ? "pointer" : "not-allowed",
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [_jsx(Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }), _jsx(TruncatedTextWithTooltip, { fontSize: "12.5px", fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

package/dist/esm/Components/Skeletons/Skeletons.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
 export default function Skeletons({ startColor, endColor, height = "20px", isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
     return (_jsxs(_Fragment, { children: [type === "skeleton" && (_jsx(Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, children: children })), type === "circle" && _jsx(SkeletonCircle, { size: size, speed: speed }), type === "text" && (_jsx(SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
 }

package/dist/esm/Components/Slider/Slider.js

@@ -3,6 +3,9 @@ import { useEffect, useRef, useState, useCallback } from "react";
 import { Box, Flex, IconButton, Image, useBreakpointValue, AspectRatio } from "@chakra-ui/react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { AA_NON_TEXT, liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+/** Auto-advancing image/content carousel — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
 const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
     var _a, _b;
     const { colors } = useCustomTheme();
@@ -32,10 +35,15 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         // eslint-disable-next-line
     }, [slides.length]);
     const ratio = (_b = useBreakpointValue({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
+    const chipBg = colors.background[50];
+    const chipInk = onFilled(chipBg, colors.white, colors.black);
+    const chipHoverBg = resolveHoverTint(colors.gray[200], chipBg);
+    const chipHoverInk = onFilled(chipHoverBg, colors.white, colors.black);
+    const dotInactiveInk = liftToContrast(colors.gray[400], chipBg, AA_NON_TEXT);
     return (_jsxs(Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", children: [_jsx(Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: "transform 0.5s ease", children: [...slides]
                     .sort((a, b) => a.order - b.order)
                     .map((image, idx) => (_jsx(Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: _jsx(AspectRatio, { ratio: ratio, w: "100%", children: _jsx(Image, { src: isMobile && image.mobilePreviewUrl
                                 ? image.mobilePreviewUrl
-                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { color: colors.gray[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } }), _jsx(IconButton, { icon: _jsx(ChevronRight, { color: colors.gray[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } })] })), slides.length > 1 && (_jsx(Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => (_jsx(Box, { w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), transition: "all 0.3s" }, idx))) }))] }));
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, {}), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } }), _jsx(IconButton, { icon: _jsx(ChevronRight, {}), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })] })), slides.length > 1 && (_jsx(Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, bg: chipBg, px: "0.6rem", py: "0.4rem", borderRadius: "full", children: slides.map((_, idx) => (_jsx(Box, { as: "button", type: "button", w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, border: "none", p: 0, bg: idx === currentIndex ? chipInk : dotInactiveInk, borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), "aria-label": `Go to slide ${idx + 1}`, "aria-current": idx === currentIndex, transition: "all 0.3s", _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 export default Slider;

package/dist/esm/Components/StageProgress/StageItem.js

@@ -21,6 +21,7 @@ const clipFor = (index, total, a) => {
         return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${a}px 50%)`;
     return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${a}px) 100%, 0 100%, ${a}px 50%)`;
 };
+/** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
 const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
     var _a;
     const theme = useCustomTheme();

package/dist/esm/Components/StageProgress/StageProgress.js

@@ -11,6 +11,7 @@ const gapFor = {
     pills: "8px",
     stepper: "0",
 };
+/** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
 const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, }) => {
     const theme = useCustomTheme();
     if (isLoading) {

package/dist/esm/Components/StageProgress/StageProgressProps.js

@@ -1,14 +1,16 @@
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.js";
 /** Exhaustive by construction: a new scheme that maps nowhere is a compile error. */
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : colors.semantic[scheme];
 /** Resolve a chevron palette for a given color scheme from the theme. */
 export const resolveStagePalette = (theme, colorScheme = "primary") => {
-    const { gray, white, black } = theme.colors;
+    const { gray } = theme.colors;
     const scale = scaleFor(theme.colors, colorScheme);
-    const strong = scale[500];
-    const onStrong = onFilled(strong, white, black);
+    const solid = resolveFilledSurface(scale, theme.colors);
+    const strong = solid.fill;
+    const onStrong = solid.color;
     const soft = scale[100];
     // A fixed [700] fails AA against [100] for some hues (orange 3.30, borderline green 3.58) —
     // walk the scale's own rungs against this specific tint instead.
@@ -18,7 +20,7 @@ export const resolveStagePalette = (theme, colorScheme = "primary") => {
         softText,
         strong,
         onStrong,
-        hover: scale[600],
+        hover: solid.hoverFill,
         muted: gray[100],
         mutedText: gray[500],
     };

package/dist/esm/Components/StageProgress/StepperStage.js

@@ -32,7 +32,7 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     return (_jsxs(Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
-                            ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }
-                            : undefined, children: showCheck && state === "completed" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(Text, { mt: 2, px: 1, fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, _groupHover: interactive ? { color: palette.strong } : undefined, children: label })] }));
+                            ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
+                            : undefined, children: showCheck && state === "completed" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(Text, { mt: 2, px: 1, borderRadius: "sm", fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, transition: "background 0.18s ease, color 0.18s ease", _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
 };
 export default StepperStage;

package/dist/esm/Components/Switch/Switch.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Text } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+/** Renders as clickable <li> items with no role or keyboard handling — mouse-only; not an accessible substitute for ToggleSwitch or SegmentedControl. */
 export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }) {
     const theme = useCustomTheme();
     // Read the palette directly: it is already swapped for the active mode, so pairing the rungs

package/dist/esm/Components/Table/Table.js

@@ -4,11 +4,16 @@ import { Box, TableContainer, Flex, Spinner, Popover, PopoverTrigger, PopoverCon
 import { Table as ChakraTable, Tbody, Thead, Icon } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import LeftFilterPane from "./filters/LeftFilterPane.js";
+import { TABLE_VARIANTS } from "./variants/index.js";
+import { TableVariantProvider } from "./variants/TableVariantContext.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { labelOnFill, solidFillRung } from "../../Theme/tokens/builders/filledSurface.js";
 import Pagination from "./components/Pagination.js";
 import TableHeader from "./components/TableHeader.js";
 import TableBody from "./components/TableBody.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { scrollbarStyles, SCROLLBAR_WIDTH } from "../../Theme/tokens/builders/scrollbar.js";
+import { scrollShadowStyles } from "../../Theme/tokens/builders/scrollShadow.js";
 import useTable from "./hooks/useTable.js";
 import { searchAndSortData, SortMultiColumnData, groupRows, buildTablePalette, pickTableColor } from "../../Utils/table.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
@@ -21,6 +26,7 @@ import Button from "../Button/Button.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { Filter, EllipsisVertical, X, RefreshCw } from "lucide-react";
 const MotionBox = motion(Box);
+/** Data table: virtualized-height rows, pagination, filters, selection, and an optional Monday-style grouped board. */
 export default function Table({ data, columns, onSelection, isLoading, isCheckbox = false, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders = false, isPagination = true, onRowClick, selections, isActionFreeze = true, preferences = {
     url: "",
     token: "",
@@ -28,11 +34,12 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
     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 = useCustomTheme();
+    const variantTokens = useMemo(() => TABLE_VARIANTS[variant](theme.colors, isDarkCanvas(theme.colors.backgroundColor.main)), [variant, theme.colors]);
     const [columnsSearch, setColumnsSearch] = useState({});
     const tableContainerRef = useRef(null);
     const { isOpen: isFilterModalOpen, onOpen: onFilterModalOpen, onClose: onFilterModalClose } = useDisclosure();
@@ -351,14 +358,16 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
             return acc + (Array.isArray(items) ? items.length : 0);
         }, 0);
     }, [filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected]);
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+    return (_jsxs(TableVariantProvider, { value: variantTokens, children: [_jsx("style", { children: `
         @keyframes pixelize-table-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), _jsxs(Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.border[500]}`, borderRadius: "base", children: [filterSidebar && filterMode === "modal" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { 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 }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_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: _jsx(LeftFilterPane, { 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 }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(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 && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: 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: {
+      ` }), _jsxs(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" && (_jsxs(Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [_jsx(ModalCloseButton, { size: "sm" }), _jsx(ModalBody, { p: 0, children: _jsx(LeftFilterPane, { 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 }) })] })] })), _jsxs(Flex, { align: "start", children: [filterMode === "sidebar" && (_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: _jsx(LeftFilterPane, { 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 }) })), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(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 && (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: "Filter", placement: "top", children: _jsxs(Box, { position: "relative", display: "inline-block", children: [_jsx(Icon, { as: 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 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+                                                                    } }), sidebarActiveCount > 0 && (_jsx(Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], color: labelOnFill(theme.colors.primary[solidFillRung(theme.colors.primary, theme.colors.white)], theme.colors.white, theme.colors.black), borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                         var _a;
                                                                         e.stopPropagation();
                                                                         if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
@@ -387,6 +396,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                             }, children: _jsx(RefreshCw, { size: 16 }) }) })] })), headerActions && (_jsxs(_Fragment, { children: [_jsx(VeritcalDivider, {}), _jsx(HeaderActions, { actions: headerActions, selections: selection })] })), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { 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 && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                            ...scrollShadowStyles(theme.colors.background[50]),
                                             ...scrollbarStyles(theme.colors),
                                             // Compact rows hide the horizontal bar until hover to keep the row height.
                                             '&::-webkit-scrollbar': {
@@ -413,5 +423,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: _jsx(TableHeader, { 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 }) }), _jsx(Tbody, { children: _jsx(TableBody, { 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 && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.border[500]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { 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 }) }), _jsx(Tbody, { children: _jsx(TableBody, { 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 && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/esm/Components/Table/components/Pagination.js

@@ -14,6 +14,6 @@ const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPa
     // const isRightDisabled = currentPage >= pages - 1;
     const isLeftDisabled = dataLength === 0 || currentPage === 0;
     const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
+    return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsxs(Select, { "aria-label": "Rows per page", onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? _jsx("option", { value: 0 }) : null, computedOptions.map((size, index) => (_jsx("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
 });
 export default Pagination;

package/dist/esm/Components/Table/components/TableActions.js

@@ -37,11 +37,11 @@ const TableActions = React.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
+    return (_jsx(Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: _jsxs("div", { ref: ref, children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: _jsx(EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && (_jsx(Portal, { children: _jsx(PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: _jsx(PopoverBody, { p: 0, m: 0, children: _jsxs(VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && (_jsxs(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: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, onClick: () => {
+                                        }, children: [_jsx(ExternalLink, { size: 17 }), " View"] })), row.onEdit && (_jsxs(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/esm/Components/Table/components/TableBody.js

@@ -3,13 +3,13 @@ import { Box, IconButton, Spinner, Td, Tr } from "@chakra-ui/react";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { normalizeTableCellValue, buildTablePalette, pickTableColor } from "../../../Utils/table.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
-import { onFilled, isDarkCanvas } from "../../../Theme/tokens/builders/accentText.js";
 import { TableBodyLoading } from "./TableLoading.js";
 import TableActions from "./TableActions.js";
-import { getTableRowHoverStyle } from "./tableRowHoverStyle.js";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import CheckBox from "../../Checkbox/Checkbox.js";
 import TableGroupRow from "./TableGroupRow.js";
+import { useTableVariant } from "../variants/TableVariantContext.js";
+import { resolvePillInk } from "../variants/pillInk.js";
 // 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 = {
@@ -25,6 +25,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 }) => (_jsx(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, }) => (_jsx(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.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
@@ -63,16 +66,39 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
             onRowClick(row, { label: header.label, id: header.id });
         }
     }, [row, onRowClick]);
+    const variant = 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 (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", children: [isContent && (_jsx(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) && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(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: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })), columns.map((header, headerIndex) => {
-                        var _a, _b, _c;
+    return (_jsxs(React.Fragment, { children: [_jsxs(Tr, { ref: mainRowRef, "aria-rowindex": ariaRowIndex, opacity: isLoading ? 0.4 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "opacity 0.2s", sx: rowSx, children: [isContent && (_jsx(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) && (_jsx(IconButton, { "aria-label": isExpanded ? "Collapse row" : "Expand row", color: theme.colors.textMuted, icon: isExpanded ? (_jsx(ChevronDown, { fontSize: 16 })) : (_jsx(ChevronRight, { fontSize: 16 })), _hover: { transform: "scale(1.1)" }, size: "sm", onClick: () => toggleRowExpansion(rowIndex), variant: "ghost" })) })), isCheckbox && (_jsx(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: _jsxs(Box, { display: restsOnIndex ? "grid" : undefined, placeItems: "center", children: [restsOnIndex && (_jsx(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 })), _jsx(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: _jsx(CheckBox, { "aria-label": `Select row ${rowIndex + 1}`, onChange: () => handleCheckbox(getRowId(row)), isChecked: isChecked }) })] }) })), columns.map((header, headerIndex) => {
+                        var _a, _b, _c, _d;
                         if (header.isHidden)
                             return null;
                         const isFrozen = header.isFreeze;
@@ -80,19 +106,19 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
                         const isStatus = header.type === "status" && !header.node;
                         const rawStatus = String((_a = row[header.id]) !== null && _a !== void 0 ? _a : "");
                         const statusColor = isStatus
-                            ? 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 : 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 : onFilled(statusColor.solid, theme.colors.white, theme.colors.black)
-                            : undefined;
-                        return (_jsx(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 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 (_jsx(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 ${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 ? bleedInk : 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 ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: statusOnSolid })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
+                                : hoverStyle, children: isBleed ? (_jsx(StatusCell, { value: normalizeTableCellValue(row[header.id]), onSolid: bleedInk })) : isStatus && statusColor ? (_jsx(StatusPill, { value: normalizeTableCellValue(row[header.id]), soft: statusColor.soft, ink: resolvePillInk(statusColor.text, statusColor.soft, theme.colors.background[50]), radius: variant.cells.pillRadius })) : (_jsx(Box, { display: "block", overflow: "hidden", whiteSpace: "normal", overflowWrap: "break-word", children: normalizeTableCellValue(header.node ? header.node(row) : row[header.id]) })) }, headerIndex + 1));
                     }), isLink && (_jsx(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) ? (_jsx(TableActions, { row: row })) : null }))] }), rowContent && isExpanded && (_jsx(Tr, { ref: expandedRowRef, children: _jsx(Td, { colSpan: columns.length +
                         (isCheckbox ? 1 : 0) +
                         (isContent ? 1 : 0) +
@@ -101,6 +127,7 @@ const TableRow = React.memo(({ row, rowIndex, isChecked, isExpanded, isContent,
 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 = useCustomTheme();
+    const variant = useTableVariant();
     const [expandedRows, setExpandedRows] = useState(new Set());
     const [collapsedGroups, setCollapsedGroups] = useState(new Set());
     const toggleGroup = useCallback((value) => {
@@ -246,17 +273,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 = useMemo(() => noBorders ? "none" : `0.063rem solid ${theme.colors.border[500]}`, [noBorders, theme.colors.border]);
+    const borderStyle = 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 = isDarkCanvas(theme.colors.backgroundColor.main);
-    const hoverStyle = useMemo(() => getTableRowHoverStyle(theme.colors, isDark), [theme.colors, isDark]);
+    const hoverStyle = 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 = useMemo(() => {