pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/SideBar/components/MenuItems.js

@@ -41,7 +41,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const MenuItemBox_1 = __importDefault(require("./MenuItemBox"));
-const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, }) => {
+const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, overlay, containerId, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [openMenuId, setOpenMenuId] = (0, react_1.useState)(null);
     const [lastClickY, setLastClickY] = (0, react_1.useState)(null);
@@ -62,7 +62,7 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
     (0, react_1.useEffect)(() => {
         if (openMenuId == null)
             return;
-        const container = document.getElementById("sidebar-scroll-container");
+        const container = document.getElementById(containerId);
         if (!container)
             return;
         const collapse = container.querySelector(`[data-collapse="true"][data-menu-id="${openMenuId}"][data-open="true"]`);
@@ -134,7 +134,7 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
                 });
             }
         }
-    }, [openMenuId, lastClickY]);
+    }, [openMenuId, lastClickY, containerId]);
     // Derive section labels from the optional `group` field on menu items: a label
     // is rendered the first time a new group value appears, with a divider before
     // every group after the first (the label hides when collapsed, the divider stays).
@@ -148,7 +148,7 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
                 lastGroup = menu.group;
                 groupCount += 1;
             }
-            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: "whiteAlpha.100", mx: "8px", my: "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: overlay ? "3px" : "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle, overlay: overlay })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
         }) }));
 };
 exports.default = MenuItems;

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

@@ -6,51 +6,65 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
+const menuDisabled_1 = require("../menuDisabled");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
 const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const sidebarScale_1 = require("../sidebarScale");
 const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { title, icon, subMenu, badge, locked } = menu;
+    const isBlocked = (0, menuDisabled_1.menuDisabled)(menu) || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const isParentActive = activeMenu === menu.id;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.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: 2, px: 2, h: "32px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? theme.colors.sidebar.divider : undefined, borderRadius: hasSubMenu ? "none" : "lg", 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: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : "whiteAlpha.700" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { 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: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "md", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, flex: "1", color: theme.colors.white, children: title }), (() => {
                         var _a, _b, _c, _d;
                         const cfg = typeof badge === "object" && badge !== null
                             ? badge
                             : null;
                         const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+                        if (value == null)
+                            return null;
                         const colorScheme = (_b = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _b !== void 0 ? _b : "teal";
                         const radius = (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full";
                         const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
-                        return value != null ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
-                    })(), locked && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
+                        const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated));
+                        return ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
+                    })(), locked && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
                 var _a;
                 const isSubActive = activeMenu === sub.id;
-                return ((0, jsx_runtime_1.jsxs)(react_1.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 = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
+                return ((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { 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 ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                    }, px: 2, h: sidebarScale_1.SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, 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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge
                                 : null;
                             const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                            if (value == null)
+                                return null;
                             const colorScheme = (_b = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _b !== void 0 ? _b : "teal";
                             const radius = (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full";
                             const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
-                            return value != null ? ((0, jsx_runtime_1.jsx)(react_1.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                            const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated));
+                            return ((0, jsx_runtime_1.jsx)(react_1.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
                         })()] }, sub.id || sub.title));
             })] }));
 };

package/dist/Components/SideBar/components/OtherApps.js

@@ -12,11 +12,11 @@ const OtherApps = ({ toggle, otherApps }) => {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
     // Grid cell: icon on top, truncated label below (label hidden when collapsed).
-    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "md", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", gap: "0.5rem", mb: "0.25rem", onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.875rem", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: toggle ? "6px" : "8px 6px", flexShrink: 0, children: [!toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: "8px", pt: "2px", pb: "5px", children: "Switch app" })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: "white", children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: "0.75rem", children: flyoutBody(app) }) }) })] }, app.name)) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
 };
 exports.default = OtherApps;

package/dist/Components/SideBar/components/OverflowTooltipText.js

@@ -29,6 +29,8 @@ const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%"
         return () => resizeObserver.disconnect();
     }, [children]);
     const shouldShowTooltip = isTruncated && !isTooltipDisabled;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: maxWidth, ...textProps, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: textProps.fontSize, fontWeight: textProps.fontWeight, fontFamily: textProps.fontFamily, lineHeight: textProps.lineHeight, px: textProps.px, py: textProps.py, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
+                    // NOTE: padding lifts descenders out of the clip box; margin keeps the label's height.
+                    py: "0.35em", my: "-0.35em", textOverflow: "ellipsis", maxW: maxWidth, ...textProps, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: textProps.fontSize, fontWeight: textProps.fontWeight, fontFamily: textProps.fontFamily, lineHeight: textProps.lineHeight, px: textProps.px, py: textProps.py, children: children })] }));
 };
 exports.default = OverflowTooltipText;

package/dist/Components/SideBar/components/TextTruncation.js

@@ -24,6 +24,8 @@ const TruncatedTextWithTooltip = ({ children, ...props }) => {
         }
         return () => resizeObserver.disconnect();
     }, [children]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
+                    // NOTE: padding lifts descenders out of the clip box; margin keeps the label's height.
+                    py: "0.35em", my: "-0.35em", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
 };
 exports.default = TruncatedTextWithTooltip;

package/dist/Components/SideBar/menuDisabled.d.ts

@@ -0,0 +1,5 @@
+import { MenuProps } from "./SideBarProps";
+type DisableableMenu = Pick<MenuProps, "isDisabled" | "disabled">;
+/** Resolves the canonical `isDisabled` over the deprecated `disabled`, in one place. */
+export declare const menuDisabled: (menu: DisableableMenu) => boolean;
+export default menuDisabled;

package/dist/Components/SideBar/menuDisabled.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuDisabled = void 0;
+/** Resolves the canonical `isDisabled` over the deprecated `disabled`, in one place. */
+const menuDisabled = (menu) => { var _a, _b; return (_b = (_a = menu.isDisabled) !== null && _a !== void 0 ? _a : menu.disabled) !== null && _b !== void 0 ? _b : false; };
+exports.menuDisabled = menuDisabled;
+exports.default = exports.menuDisabled;

package/dist/Components/SideBar/sidebarId.d.ts

@@ -0,0 +1,2 @@
+/** React's `useId()` wraps its value in colons (":r0:") — strip them for a plain DOM id token. */
+export declare const sanitizeId: (id: string) => string;

package/dist/Components/SideBar/sidebarId.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeId = void 0;
+/** React's `useId()` wraps its value in colons (":r0:") — strip them for a plain DOM id token. */
+const sanitizeId = (id) => id.replace(/:/g, "");
+exports.sanitizeId = sanitizeId;

package/dist/Components/SideBar/sidebarScale.d.ts

@@ -0,0 +1,15 @@
+/** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
+export declare const SIDEBAR_ROW: {
+    readonly height: "32px";
+    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
+    readonly overlayHeight: "44px";
+    readonly subHeight: "28px";
+    readonly fontSize: "13px";
+    readonly iconSize: "1rem";
+};
+/** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
+export declare const SIDEBAR_CHROME: {
+    readonly titleFontSize: "12.5px";
+    readonly labelFontSize: "11.5px";
+    readonly metaFontSize: "10px";
+};

package/dist/Components/SideBar/sidebarScale.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_CHROME = exports.SIDEBAR_ROW = void 0;
+/** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
+exports.SIDEBAR_ROW = {
+    height: "32px",
+    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
+    overlayHeight: "44px",
+    subHeight: "28px",
+    fontSize: "13px",
+    iconSize: "1rem",
+};
+/** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
+exports.SIDEBAR_CHROME = {
+    titleFontSize: "12.5px",
+    labelFontSize: "11.5px",
+    metaFontSize: "10px",
+};

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -1,4 +1,6 @@
+/** One row of sign-in device history rendered by SignInActivityTable. */
 export type SignInDevice = {
+    /** Falls back to "—" when falsy; device and activity below don't — a blank one renders as an empty cell, not a dash. */
     browser: string;
     device: string;
     activity: string;
@@ -14,6 +16,7 @@ export type SignInActivityLabels = {
     recentActivity?: string;
     noActivity?: string;
 };
+/** Read-only 3-column device list (browser, device, activity) on raw Chakra table parts, not the library Table — no row actions, closed props, no ref/...rest passthrough. */
 export interface SignInActivityTableProps {
     devices: SignInDevice[];
     isLoading?: boolean;

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -1,4 +1,8 @@
 import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/react";
-export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
+/** Closed prop list: no ...rest, and no margin beyond `mt` on text. */
+export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "alignSelf" | "flexShrink" | "noOfLines" | "width"> & {
+    /** isLoaded, children, bg, color, fadeDuration only apply to type="skeleton" — circle/text accept but silently ignore them. */
     type: "skeleton" | "circle" | "text";
+    /** Corner radius for type="skeleton" (theme default when unset); circle/text ignore it. */
+    borderRadius?: ChakraSkeleton["borderRadius"];
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -1,2 +1,3 @@
 import { SkeletonProps } from "./SkeletonProps";
-export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
+export default function Skeletons({ startColor, endColor, height, borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Skeletons/Skeletons.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Skeletons;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-function Skeletons({ startColor, endColor, height = "20px", isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
+function Skeletons({ startColor, endColor, height = "1.25rem", borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, borderRadius: borderRadius, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
 }

package/dist/Components/Slider/Slider.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 type ImageSliderProps = {
     images: SliderImage[];
+    /** interval <= 0 disables auto-advance entirely (no timer set) — it does not mean "no delay"/immediate. */
     interval?: number;
     isArrow?: boolean;
     mobileImages?: SliderImage[];
@@ -11,7 +12,9 @@ type SliderImage = {
     previewUrl: string;
     /** Optional URL used on small viewports when provided via `mobileImages`. */
     mobilePreviewUrl?: string;
+    /** Sorts the main track, but pagination dots follow the array's original order — pass images pre-sorted by order to keep dots in sync. */
     order: number;
 };
+/** Auto-advancing image/content carousel — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;

package/dist/Components/Slider/Slider.js

@@ -5,6 +5,10 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
@@ -34,10 +38,15 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         // eslint-disable-next-line
     }, [slides.length]);
     const ratio = (_b = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
+    const chipBg = colors.background[50];
+    const chipInk = (0, accentText_1.onFilled)(chipBg, colors.white, colors.black);
+    const chipHoverBg = (0, outlineRung_1.resolveHoverTint)(colors.gray[200], chipBg);
+    const chipHoverInk = (0, accentText_1.onFilled)(chipHoverBg, colors.white, colors.black);
+    const dotInactiveInk = (0, outlineRung_1.liftToContrast)(colors.gray[400], chipBg, outlineRung_1.AA_NON_TEXT);
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.AspectRatio, { ratio: ratio, w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: isMobile && image.mobilePreviewUrl
                                 ? image.mobilePreviewUrl
-                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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] } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.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: (0, motion_1.transitionFor)(["background-color"], "base"), _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 exports.default = Slider;

package/dist/Components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import { SpinnerProps } from "./SpinnerProps";
+/** Themed spinner for inline or panel loading; for a blocking overlay use Loading, for a button use Button isLoading. */
+export default function Spinner({ size, tone, color, label, thickness, speed, emptyColor, sx, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Spinner/Spinner.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/chakra/motion");
+const SPINNER_SIZES = {
+    xs: { boxSize: "0.75rem", thickness: "0.125rem" },
+    sm: { boxSize: "1rem", thickness: "0.125rem" },
+    md: { boxSize: "1.5rem", thickness: "0.1875rem" },
+    lg: { boxSize: "2rem", thickness: "0.25rem" },
+    xl: { boxSize: "3rem", thickness: "0.25rem" },
+};
+/** Themed spinner for inline or panel loading; for a blocking overlay use Loading, for a button use Button isLoading. */
+function Spinner({ size = "md", tone, color, label = "Loading", thickness, speed = "0.7s", emptyColor = "transparent", sx, ...rest }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const spec = SPINNER_SIZES[size];
+    const ink = color !== null && color !== void 0 ? color : (tone ? (0, tone_1.toneInk)(colors, tone) : colors.accentText);
+    return ((0, jsx_runtime_1.jsx)(react_1.Spinner, { boxSize: spec.boxSize, ...rest, label: label, color: ink, emptyColor: emptyColor, thickness: thickness !== null && thickness !== void 0 ? thickness : spec.thickness, speed: speed, sx: { [motion_1.REDUCED_MOTION_QUERY]: { animationDuration: "1.6s" }, ...sx } }));
+}

package/dist/Components/Spinner/SpinnerProps.d.ts

@@ -0,0 +1,15 @@
+import type { SpinnerProps as ChakraSpinnerProps } from "@chakra-ui/react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Spinner diameter: xs 12 · sm 16 · md 24 · lg 32 · xl 48 px. */
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** Themed loading spinner; a superset of Chakra's SpinnerProps (rest is forwarded), colour from tokens by default. */
+export type SpinnerProps = Omit<ChakraSpinnerProps, "size"> & {
+    /** Diameter and default stroke; defaults to "md". */
+    size?: SpinnerSize;
+    /** Status tone ink instead of the brand accent. */
+    tone?: Tone;
+    /** Escape hatch, e.g. "currentColor" to match the surrounding text; wins over tone. */
+    color?: string;
+    /** Screen-reader text; defaults to "Loading". */
+    label?: string;
+};

package/dist/Components/Spinner/SpinnerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/StageProgress/StageItem.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { StageItemProps } from "./StageProgressProps";
+/** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
 declare const StageItem: React.FC<StageItemProps>;
 export default StageItem;

package/dist/Components/StageProgress/StageItem.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const StageProgressProps_1 = require("./StageProgressProps");
 const sizeMap = {
@@ -26,8 +27,10 @@ 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%)`;
 };
-const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
+/** 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, isDisabled, disabled: legacyDisabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
     var _a;
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
     const ref = (0, react_1.useRef)(null);
@@ -76,13 +79,19 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
             : "none";
     // Upcoming pills read as outlined; other states stay filled.
     const isOutlinePill = variant === "pills" && state === "upcoming";
-    const hoverStyles = interactive
+    const fillHoverStyles = interactive
         ? state === "active"
             ? { bg: palette.hover }
-            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+            : { bg: palette.strong, borderColor: palette.strong }
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
-    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
+    // clip-path clips box-shadow too, so the focus ring stays on this unclipped outer button.
+    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "color 0.18s ease, filter 0.18s ease", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, _hover: interactive
+            ? {
+                color: state === "active" ? undefined : palette.onStrong,
+                filter: "brightness(0.97)",
+            }
+            : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, bg: isOutlinePill ? "transparent" : bg, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, transition: "background 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _groupHover: fillHoverStyles }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { position: "relative", align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, pl: `${leftPad}px`, pr: `${rightPad}px`, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] })] }));
     if (showTooltip) {
         return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", openDelay: 300, children: content }));
     }

package/dist/Components/StageProgress/StageProgress.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { StageProgressProps } from "./StageProgressProps";
+/** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
 declare const StageProgress: React.FC<StageProgressProps>;
 export default StageProgress;

package/dist/Components/StageProgress/StageProgress.js

@@ -16,11 +16,12 @@ 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 = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
         const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
-        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "md", flexShrink: 0 }, i))) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "lg", flexShrink: 0 }, i))) }));
     }
     const activeIndex = stages.findIndex((st) => st.id === value);
     const stateFor = (index) => {
@@ -31,15 +32,14 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     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" },
-            ...(0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"),
-        }, children: stages.map((stage, index) => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: (0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), children: stages.map((stage, index) => {
+            var _a;
             const state = stateFor(index);
+            const stageDisabled = (_a = stage.isDisabled) !== null && _a !== void 0 ? _a : stage.disabled;
             if (variant === "stepper") {
-                return ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+                return ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
             }
-            return ((0, jsx_runtime_1.jsx)(StageItem_1.default, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+            return ((0, jsx_runtime_1.jsx)(StageItem_1.default, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
         }) }));
 };
 exports.default = StageProgress;