pixelize-design-library 2.4.2-beta.56 → 2.4.2-beta.57

package/dist/Components/SideBar/SecondaryBar.js

@@ -33,35 +33,40 @@ const parseBadge = (badge) => {
         variant: (_c = badge === null || badge === void 0 ? void 0 : badge.variant) !== null && _c !== void 0 ? _c : "subtle",
     });
 };
+// Matches MenuItemBox/MenuPopoverContent's isBlocked — locked also blocks, not just disabled.
+const isItemBlocked = (item) => (0, menuDisabled_1.menuDisabled)(item) || !!item.locked;
 const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": (0, menuDisabled_1.menuDisabled)(item) ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", opacity: (0, menuDisabled_1.menuDisabled)(item) ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
-                        bg: (0, menuDisabled_1.menuDisabled)(item)
+    const blocked = isItemBlocked(item);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
+                        bg: blocked
                             ? "transparent"
                             : isActive
                                 ? "whiteAlpha.400"
                                 : "whiteAlpha.200",
                     }, onClick: (e) => {
                         e.preventDefault();
-                        if (!(0, menuDisabled_1.menuDisabled)(item))
+                        if (!blocked)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": (0, menuDisabled_1.menuDisabled)(item) ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", opacity: (0, menuDisabled_1.menuDisabled)(item) ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
-            bg: (0, menuDisabled_1.menuDisabled)(item) ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
+    const blocked = isItemBlocked(item);
+    const row = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": blocked ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: blocked ? "not-allowed" : "pointer", opacity: blocked ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: blocked ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
         }, onClick: (e) => {
             e.preventDefault();
-            if (!(0, menuDisabled_1.menuDisabled)(item))
+            if (!blocked)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+    return item.locked && item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();

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

@@ -59,8 +59,10 @@ export type MenuProps = {
     isDisabled?: boolean;
     /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
-    /** Shows a lock icon only — does not block the click handler; pair with `isDisabled` to prevent it. */
+    /** Blocks the click handler/submenu expand and dims the row, same as `isDisabled`; also shows a lock icon. */
     locked?: boolean;
+    /** Shown as a tooltip on hover/focus of a `locked` row (rail row, submenu row, and both flyouts). Ignored unless `locked` is true. */
+    lockedReason?: string;
     /** Runtime also accepts a bare number/string (legacy shorthand) though the type only declares the object shape. */
     badge?: {
         /** Also triggers the small red dot on the icon when the rail is collapsed. */

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

@@ -1,10 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
 const menuDisabled_1 = require("../menuDisabled");
@@ -16,6 +49,7 @@ const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
 const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
 const TextTruncation_1 = __importDefault(require("./TextTruncation"));
 const sidebarId_1 = require("../sidebarId");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const sidebarScale_1 = require("../sidebarScale");
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
@@ -29,7 +63,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     // Never the raw label — keeps this id unique across multiple mounted SideBars too.
     const reactId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
-    const { title, icon, locked, badge, subMenu, url } = menu;
+    const { title, icon, locked, lockedReason, 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 = (0, menuDisabled_1.menuDisabled)(menu) || locked;
@@ -115,12 +149,13 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                             handleToggleSubMenu(e);
                         }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.625rem", color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.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();
-                    handleToggleSubMenu(e);
-                }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+    const row = ((0, jsx_runtime_1.jsx)(react_2.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();
+            handleToggleSubMenu(e);
+        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [locked && lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: lockedReason, placement: "top", children: row })) : (row), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
                         transition: "opacity 0.28s ease, transform 0.28s ease",
                         opacity: isOpen ? 1 : 0,
                         transform: isOpen ? "translateY(0)" : "translateY(-6px)",
@@ -128,7 +163,8 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
                         const isSubBlocked = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
-                        return ((0, jsx_runtime_1.jsxs)(react_2.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", h: sidebarScale_1.SIDEBAR_ROW.subHeight, pl: "28px", pr: "10px", borderRadius: "lg", fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                        const subKey = `${String((_b = (_a = sub.id) !== null && _a !== void 0 ? _a : sub.title) !== null && _b !== void 0 ? _b : sIdx)}-${sIdx}`;
+                        const subRow = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "a", href: (_c = sub.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", h: sidebarScale_1.SIDEBAR_ROW.subHeight, pl: "28px", pr: "10px", borderRadius: "lg", fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                                 backgroundColor: isSubBlocked
                                     ? "transparent"
                                     : isSubActive
@@ -153,7 +189,8 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                     const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.variant) !== null && _d !== void 0 ? _d : "subtle";
                                     const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, colorScheme), (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]));
                                     return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: variant, borderRadius: radius, children: value }));
-                                })()] }, `${String((_c = (_b = sub.id) !== null && _b !== void 0 ? _b : sub.title) !== null && _c !== void 0 ? _c : sIdx)}-${sIdx}`));
+                                })()] }));
+                        return sub.locked && sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: subRow }, subKey)) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: subRow }, subKey));
                     }) }) }))] }));
 };
 exports.default = MenuItemBox;

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

@@ -13,12 +13,13 @@ 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 ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 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 { title, icon, subMenu, badge, locked, lockedReason } = 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;
@@ -43,7 +44,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
                         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) => {
+                    })(), locked && (lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : ((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;
                 const isSubBlocked = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
@@ -54,7 +55,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     }, 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 ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         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: [sub.icon ? ((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)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 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 })) : (() => {
+                    }, 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: [sub.icon ? ((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)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 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 ? (sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : ((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

package/dist/Components/SpecTable/SpecTable.d.ts

@@ -0,0 +1,4 @@
+import type { SpecTableProps } from "./SpecTableProps";
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+declare const SpecTable: ({ items, columns, collapsedCount, expanded, defaultExpanded, onExpandedChange, labels, "aria-label": ariaLabel, "data-testid": testId, }: SpecTableProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SpecTable;

package/dist/Components/SpecTable/SpecTable.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const DEFAULT_LABELS = { showAll: "Show all", showLess: "Show less" };
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+const SpecTable = ({ items, columns = 1, collapsedCount, expanded, defaultExpanded = false, onExpandedChange, labels, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const listId = (0, react_1.useId)();
+    const [inner, setInner] = (0, react_1.useState)(defaultExpanded);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    if (items.length === 0)
+        return null;
+    const foldable = collapsedCount !== undefined && collapsedCount < items.length;
+    const isExpanded = expanded !== null && expanded !== void 0 ? expanded : inner;
+    const visible = foldable && !isExpanded ? items.slice(0, collapsedCount) : items;
+    const tint = colors.background[100];
+    const toggle = () => {
+        const next = !isExpanded;
+        if (expanded === undefined)
+            setInner(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "dl", id: listId, m: 0, "aria-label": ariaLabel, display: "grid", gridTemplateColumns: columns === 2 ? { base: "1fr", md: "1fr 1fr" } : "1fr", borderRadius: "xl", overflow: "hidden", children: visible.map((item, i) => {
+                    const stripeNarrow = i % 2 === 0;
+                    const stripeWide = columns === 2 ? Math.floor(i / 2) % 2 === 0 : stripeNarrow;
+                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { "data-stripe": stripeNarrow, "data-stripe-wide": stripeWide, gap: 4, px: 4, py: 3, fontSize: "sm", bg: { base: stripeNarrow ? tint : "transparent", md: stripeWide ? tint : "transparent" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "dt", flex: "0 0 40%", minW: 0, color: colors.textMuted, overflowWrap: "anywhere", children: item.label }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "dd", m: 0, flex: "1 1 0", minW: 0, fontWeight: 500, color: colors.header[900], overflowWrap: "anywhere", sx: { fontVariantNumeric: "tabular-nums" }, children: item.value })] }, `${item.label}-${i}`));
+                }) }), foldable && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, rightIcon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, "aria-hidden": true }) }), children: isExpanded ? text.showLess : `${text.showAll} (${items.length})` }) }))] }));
+};
+exports.default = SpecTable;

package/dist/Components/SpecTable/SpecTableProps.d.ts

@@ -0,0 +1,25 @@
+/** One label/value row. */
+export interface SpecItem {
+    label: string;
+    value: string;
+}
+/** Every string the table renders; override all of them for another language. */
+export interface SpecTableLabels {
+    showAll: string;
+    showLess: string;
+}
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+export interface SpecTableProps {
+    items: SpecItem[];
+    /** 2 sits label and value side by side per row on wide screens and falls back to 1 on narrow ones. */
+    columns?: 1 | 2;
+    /** Rows shown before "Show all"; omit to show every row with no toggle. */
+    collapsedCount?: number;
+    /** Controlled expanded state; pair with `onExpandedChange`. */
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    labels?: Partial<SpecTableLabels>;
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/SpecTable/SpecTableProps.js

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

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

@@ -1,3 +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;
+export default function Spinner({ size, tone, color, label, thickness, speed, emptyColor, sx, testId, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Spinner/Spinner.js

@@ -14,9 +14,9 @@ const SPINNER_SIZES = {
     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 }) {
+function Spinner({ size = "md", tone, color, label = "Loading", thickness, speed = "0.7s", emptyColor = "transparent", sx, testId, ...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 } }));
+    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 }, ...(testId !== undefined ? { "data-testid": testId } : {}) }));
 }

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

@@ -12,4 +12,6 @@ export type SpinnerProps = Omit<ChakraSpinnerProps, "size"> & {
     color?: string;
     /** Screen-reader text; defaults to "Loading". */
     label?: string;
+    /** data-testid for the rendered node; wins over a raw `data-testid` passthrough. */
+    testId?: string;
 };

package/dist/Components/StageProgress/StepperStage.js

@@ -21,8 +21,9 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const s = sizeMap[size];
     const interactive = !isReadOnly && !disabled;
     (0, react_1.useEffect)(() => {
+        var _a, _b;
         if (state === "active" && scrollIntoViewWhenActive && ref.current) {
-            ref.current.scrollIntoView({
+            (_b = (_a = ref.current).scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
                 behavior: "smooth",
                 inline: "center",
                 block: "nearest",

package/dist/Components/StatCard/StatCard.d.ts

@@ -1,4 +1,4 @@
 import type { StatCardProps } from "./StatCardProps";
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, icon: Icon, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatCard: ({ label, value, delta, trend, goodDirection, hint, sparkline, footer, icon: Icon, isLoading, onClick, "aria-label": ariaLabel, "data-testid": testId, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
 export default StatCard;

package/dist/Components/StatCard/StatCard.js

@@ -13,7 +13,7 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const StatCardSkeleton = ({ hasIcon }) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [hasIcon && (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 8, width: 8 }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "40%" })] }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 7, width: "55%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 3, width: "45%" })] }));
 /** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
-const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, sparkline, footer, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const isInteractive = !!onClick && !isLoading;
     const deltaColor = trend
@@ -33,7 +33,7 @@ const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, icon
         px: 5,
         py: 4,
     };
-    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] }))] }));
+    const content = isLoading ? ((0, jsx_runtime_1.jsx)(StatCardSkeleton, { hasIcon: !!Icon })) : ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", direction: "column", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 2, children: [Icon && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: (0, jsx_runtime_1.jsx)(Icon, { size: 16, "aria-hidden": true }) })), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), sparkline && ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (delta !== undefined || hint) && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && (0, jsx_runtime_1.jsx)(DeltaIcon, { size: 14, "aria-hidden": true }), trend && (0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: colors.boxborder[200], "data-testid": "stat-footer", children: footer }))] }));
     if (!isInteractive) {
         return ((0, jsx_runtime_1.jsx)(react_1.Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
     }

package/dist/Components/StatCard/StatCardProps.d.ts

@@ -13,6 +13,10 @@ export interface StatCardProps {
     goodDirection?: StatTrend;
     /** Muted text beside the delta, e.g. "vs last month". */
     hint?: ReactNode;
+    /** Small inline trend chart rendered beside the value, e.g. a sparkline SVG; bring your own — this only sizes/positions the slot (max 96px wide, 32px tall). */
+    sparkline?: ReactNode;
+    /** Content pinned to the bottom of the card below a divider, e.g. a "View details" link. */
+    footer?: ReactNode;
     /** Icon component (not an element) shown in a tinted chip before the label. */
     icon?: ElementType;
     /** Shows a skeleton and disables the click target. */

package/dist/Components/StickyBuyBar/StickyBuyBar.d.ts

@@ -0,0 +1,3 @@
+import type { StickyBuyBarProps } from "./StickyBuyBarProps";
+declare const StickyBuyBar: ({ price, mrp, mode, visible, position, isLoading, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }: StickyBuyBarProps) => import("react/jsx-runtime").JSX.Element;
+export default StickyBuyBar;

package/dist/Components/StickyBuyBar/StickyBuyBar.js

@@ -0,0 +1,85 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("@emotion/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const PriceBlock_1 = __importDefault(require("../PriceBlock/PriceBlock"));
+const QuantityStepper_1 = __importDefault(require("../QuantityStepper/QuantityStepper"));
+const glass_1 = require("../MediaGallery/glass");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
+const motion_2 = require("../../Theme/chakra/motion");
+const DEFAULT_LABELS = {
+    region: "Buy",
+    add: "Add to bag",
+    selectOption: "Select an option",
+    notify: "Notify me",
+    added: "Added",
+    goToBag: "Go to bag",
+    buyNow: "Buy now",
+    adding: "Adding to bag",
+};
+const SLIDE_MS = 240;
+const BAR_HEIGHT = "3.25rem";
+const SLOT_MIN_WIDTH = "9.5rem";
+const RISE = "6px";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+const pop = (0, react_2.keyframes) `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
+const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const glass = (0, glass_1.glassStyles)(colors);
+    const stepping = mode === "stepper";
+    const active = stepping ? null : mode;
+    const text = {
+        add: copy.add,
+        "select-option": copy.selectOption,
+        notify: copy.notify,
+        added: copy.added,
+        "go-to-bag": copy.goToBag,
+    };
+    const handlers = {
+        add: onAddToBag,
+        "select-option": onSelectOption,
+        notify: onNotify,
+        added: undefined,
+        "go-to-bag": onGoToBag,
+    };
+    const tonal = mode === "notify";
+    const inert = mode === "added" || isLoading;
+    // NOTE: Button's prop type is a closed Pick, so aria-busy / aria-disabled ride in on a spread.
+    const aria = {
+        "aria-busy": isLoading ? "true" : undefined,
+        "aria-disabled": inert ? "true" : undefined,
+        "aria-label": isLoading ? copy.adding : undefined,
+    };
+    const layer = (on) => ({
+        gridArea: "1 / 1",
+        opacity: on ? 1 : 0,
+        visibility: on ? "visible" : "hidden",
+        transition: reduced ? "none" : `${(0, motion_1.transitionFor)(["opacity"])}, visibility 0s linear ${on ? 0 : 150}ms`,
+    });
+    const label = (key) => {
+        const on = key === active;
+        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", "aria-hidden": on ? undefined : true, gridArea: "1 / 1", align: "center", justify: "center", gap: 1.5, opacity: on ? 1 : 0, transform: on || reduced ? "none" : `translateY(${RISE})`, transition: (0, motion_1.transitionFor)(["opacity", "transform"]), sx: (0, motion_2.reducedMotionSx)(), children: [key === "added" && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", animation: on && !reduced ? `${pop} 280ms ${motion_1.MOTION_EASE} both` : undefined, sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) })), text[key]] }, key));
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "section", role: "region", "aria-label": copy.region, "aria-hidden": visible ? undefined : true, position: position === "sticky" ? "sticky" : "relative", bottom: position === "sticky" ? 0 : undefined, zIndex: zIndices_1.default.sticky, px: 4, pt: 3, pb: SAFE_BOTTOM, transform: visible ? "translateY(0)" : "translateY(100%)", visibility: visible ? "visible" : "hidden", transition: reduced ? "none" : `transform ${SLIDE_MS}ms ${motion_1.MOTION_EASE}, visibility 0s linear ${visible ? 0 : SLIDE_MS}ms`, "data-testid": testId, ...glass, sx: { ...glass.sx, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised }, ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "sm", price: price, mrp: mrp, currency: currency, locale: locale }) }), mode === "add" && onBuyNow && ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", size: "lg", h: BAR_HEIGHT, onClick: onBuyNow, label: copy.buyNow })), (0, jsx_runtime_1.jsxs)(react_1.Grid, { minW: SLOT_MIN_WIDTH, justifyItems: "stretch", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { ...layer(!stepping), "aria-hidden": stepping ? true : undefined, children: (0, jsx_runtime_1.jsx)(Button_1.default, { ...aria, variant: tonal ? "ghost" : "solid", size: "lg", w: "100%", h: BAR_HEIGHT, onClick: () => {
+                                    var _a;
+                                    if (!inert)
+                                        (_a = handlers[mode]) === null || _a === void 0 ? void 0 : _a.call(handlers);
+                                }, sx: {
+                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: colors.background[200] } } : {}),
+                                    ...(inert ? { cursor: isLoading ? "progress" : "default", pointerEvents: isLoading ? "auto" : "none" } : {}),
+                                    display: "grid",
+                                }, children: STACK_ORDER.map(label) }) }), (0, jsx_runtime_1.jsx)(react_1.Flex, { ...layer(stepping), "aria-hidden": stepping ? undefined : true, justify: "center", align: "center", h: BAR_HEIGHT, children: (0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { value: quantity, onValueChange: onQuantityChange, max: maxQuantity, itemLabel: itemLabel, size: "md" }) })] })] }) }));
+};
+exports.default = StickyBuyBar;

package/dist/Components/StickyBuyBar/StickyBuyBarProps.d.ts

@@ -0,0 +1,54 @@
+import type { PriceFormat } from "../Commerce/commerceTypes";
+/** What the primary slot does: add, prompt for an option, notify, confirm an add, go to the bag, or edit the quantity in place. */
+export type StickyBuyBarMode = "add" | "select-option" | "notify" | "added" | "go-to-bag" | "stepper";
+/** `sticky` pins to the viewport bottom inside its scroll parent; `static` flows with the page, e.g. inside a phone frame. */
+export type StickyBuyBarPosition = "sticky" | "static";
+/** Every string the bar renders; override all of them for another language. */
+export interface StickyBuyBarLabels {
+    /** Accessible name of the landmark region. */
+    region: string;
+    add: string;
+    /** Prompt shown when an option is still unpicked, e.g. "Select a size". */
+    selectOption: string;
+    notify: string;
+    /** Short confirmation in the button while mode is `added`. */
+    added: string;
+    goToBag: string;
+    buyNow: string;
+    /** Screen-reader name of the busy button while `isLoading`. */
+    adding: string;
+}
+/** Mobile bottom bar: price on the left, one primary action on the right; the parent decides when it is `visible`. */
+export interface StickyBuyBarProps extends PriceFormat {
+    /** Selling price of the selected variant. */
+    price: number;
+    /** List price; the strike and discount only render when it is above `price`. */
+    mrp?: number;
+    /** State of the primary slot; the width never changes between states. */
+    mode?: StickyBuyBarMode;
+    /** Controlled: slides in when true and out when false, and is removed from the tab order while out. Typically driven by an IntersectionObserver on the inline CTA. */
+    visible?: boolean;
+    position?: StickyBuyBarPosition;
+    /** Marks the primary as busy (aria-busy) and ignores further taps. */
+    isLoading?: boolean;
+    /** `stepper` mode only: current quantity. */
+    quantity?: number;
+    /** `stepper` mode only: fires with the new quantity. */
+    onQuantityChange?: (quantity: number) => void;
+    /** `stepper` mode only: ceiling, e.g. the variant's remaining stock. */
+    maxQuantity?: number;
+    /** Fires on the primary in `add` mode. */
+    onAddToBag?: () => void;
+    /** Fires on the primary in `select-option` mode; the page should scroll the selector into view. */
+    onSelectOption?: () => void;
+    /** Fires on the primary in `notify` mode. */
+    onNotify?: () => void;
+    /** Fires on the primary in `go-to-bag` mode. */
+    onGoToBag?: () => void;
+    /** Adds a secondary "Buy now" beside the primary in `add` mode when provided. */
+    onBuyNow?: () => void;
+    /** Product name, so the stepper reads "Quantity of Slim-Fit Denim Jacket". */
+    itemLabel?: string;
+    labels?: Partial<StickyBuyBarLabels>;
+    "data-testid"?: string;
+}

package/dist/Components/StickyBuyBar/StickyBuyBarProps.js

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

package/dist/Components/StockStatus/StockStatus.d.ts

@@ -0,0 +1,4 @@
+import type { StockStatusProps } from "./StockStatusProps";
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+declare const StockStatus: ({ status, count, message, size, "data-testid": testId }: StockStatusProps) => import("react/jsx-runtime").JSX.Element;
+export default StockStatus;

package/dist/Components/StockStatus/StockStatus.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const TEXT_SIZE = { sm: "xs", md: "sm" };
+const DOT_PX = { sm: 6, md: 8 };
+const defaultMessage = (status, count) => {
+    switch (status) {
+        case "in-stock":
+            return "In stock";
+        case "low-stock":
+            return count !== undefined ? `Only ${count} left` : "Low stock";
+        case "out-of-stock":
+            return "Out of stock";
+        case "backorder":
+            return "Available on backorder";
+    }
+};
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+const StockStatus = ({ status, count, message, size = "md", "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const ink = {
+        "in-stock": colors.semanticText.success,
+        "low-stock": colors.semanticText.warning,
+        "out-of-stock": colors.textMuted,
+        backorder: colors.semanticText.info,
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-status": status, "data-testid": testId, color: ink[status], children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", "aria-hidden": true, boxSize: `${DOT_PX[size]}px`, flexShrink: 0, borderRadius: "full", bg: "currentColor" }), (0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, lineHeight: 1.4, children: message !== null && message !== void 0 ? message : defaultMessage(status, count) })] }));
+};
+exports.default = StockStatus;