pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/SideBar/components/MenuItemBox.d.ts

@@ -8,6 +8,14 @@ interface Props {
     selectedSubMenu?: string | null;
     isOpen?: boolean;
     onToggle?: (menu: MenuProps, clickY?: number) => void;
+    /** Overlay (touch) presentation — rows grow to a 48px touch target instead of the 32px desktop row. */
+    overlay?: boolean;
 }
-declare const MenuItemBox: React.FC<Props>;
-export default MenuItemBox;
+/**
+ * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
+ * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
+ * routed through the in-app handler.
+ */
+export declare const isBrowserNavigationGesture: (e: React.MouseEvent) => boolean;
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

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

@@ -1,50 +1,105 @@
 "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 });
+exports.isBrowserNavigationGesture = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/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");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const states_1 = require("../../../Theme/tokens/primitives/states");
 const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const zIndices_1 = __importDefault(require("../../../Theme/tokens/primitives/zIndices"));
+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 sidebarFocus_1 = require("../sidebarFocus");
+const sidebarScale_1 = require("../sidebarScale");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("../sidebarMotion");
+const SUBMENU_REVEAL_TRANSITION = (0, motion_1.transitionFor)(["opacity", "transform"], "base");
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
  * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
  * routed through the in-app handler.
  */
 const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
-const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
-    var _a, _b, _c, _d, _e, _f;
+exports.isBrowserNavigationGesture = isBrowserNavigationGesture;
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, overlay = false, }) => {
+    var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    const { title, icon, disabled, locked, badge, subMenu, url } = menu;
+    // 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, 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;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
-    const submenuPanelId = `submenu-${String((_a = menu.id) !== null && _a !== void 0 ? _a : title)}`;
+    const submenuPanelId = `submenu-${reactId}`;
+    const rowHeight = overlay ? sidebarScale_1.SIDEBAR_ROW.overlayHeight : sidebarScale_1.SIDEBAR_ROW.height;
     // A submenu parent only expands, so it is a button; every other row navigates.
     // Cast: Chakra narrows `as` unions to their *shared* props, which drops `href`.
     const rowAs = (hasSubMenu ? "button" : "a");
     const badgeConfig = typeof badge === "object" && badge !== null ? badge : null;
-    const badgeValue = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _b !== void 0 ? _b : (typeof badge !== "object" ? badge : undefined);
-    const hasSubmenuBadge = (_c = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
+    const badgeValue = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    const hasSubmenuBadge = (_b = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
         var _a;
         const subCfg = typeof sub.badge === "object" && sub.badge !== null
             ? sub.badge
             : null;
         const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
         return value != null;
-    })) !== null && _c !== void 0 ? _c : false;
+    })) !== null && _b !== void 0 ? _b : false;
     const isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => sub.id === activeMenu);
     const isParentActive = activeMenu === menu.id;
     const isAnyActive = isParentActive || isChildActive;
     const handleToggleSubMenu = (e) => {
-        if (!disabled && hasSubMenu) {
+        if (!isBlocked && hasSubMenu) {
             onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
             return;
         }
-        if (!disabled)
+        if (!isBlocked)
             handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
     };
     // Pill-style nav item. The fill is a white overlay, not a brand tint: the sidebar is a
@@ -53,83 +108,98 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     // light, whose primary[500] IS the sidebar colour. Brand identity stays in the accent bar
     // and icon below. See interactionStates.test.ts.
     const commonStyles = {
-        // `data-group` rather than `role="group"`: the row is now a real link/button, whose
-        // implicit role must not be overridden. Chakra's `_groupHover` accepts either.
+        // `data-group` rather than `role="group"`: Chakra's `_groupHover` accepts either.
         "data-group": "",
-        display: "block",
+        display: "flex",
+        alignItems: "center",
         textAlign: "left",
         textDecoration: "none",
         w: "100%",
-        borderRadius: "md",
+        h: rowHeight,
+        borderRadius: "lg",
         px: "10px",
-        py: "7px",
-        fontWeight: "medium",
+        fontWeight: 500,
         border: "none",
         borderLeft: "2px solid",
         borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
         backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
-        color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
-        _hover: disabled
+        color: theme.colors.sidebar.mutedIcon,
+        _hover: isBlocked
             ? {}
             : {
                 backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
             },
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
-        transition: "background 0.12s",
+        cursor: isBlocked ? "not-allowed" : "pointer",
+        opacity: isBlocked ? states_1.DISABLED_OPACITY : 1,
+        transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION,
+        sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
     };
-    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", 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: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), toggle && (badgeValue != null || hasSubmenuBadge) && ((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 }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
                     // open={isOpen}
                     , { 
                         // open={isOpen}
-                        fontSize: "13px", lineHeight: "1", flex: "1", color: isAnyActive ? activeAccent.label : "whiteAlpha.900", fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: "white" }, children: title }))] }), !toggle && ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "0.375rem", children: [(() => {
+                        fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isAnyActive ? activeAccent.label : theme.colors.white, fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, children: title }))] }), !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.375rem", children: [(() => {
                         var _a, _b, _c;
                         const value = badgeValue;
+                        if (value == null)
+                            return null;
                         const colorScheme = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.color) !== null && _a !== void 0 ? _a : "teal";
                         const radius = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.radius) !== null && _b !== void 0 ? _b : "full";
                         const variant = (_c = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.variant) !== null && _c !== void 0 ? _c : "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: "whiteAlpha.600" }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon }))] }))] }));
+                        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 }));
+                    })(), locked && (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))] }))] }));
     if (toggle) {
         // Collapsed sidebar: show Popover
-        return ((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, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
-                            if (!hasSubMenu && url && isBrowserNavigationGesture(e))
+        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, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
+                            if (!hasSubMenu && url && (0, exports.isBrowserNavigationGesture)(e))
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
-                        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }) }), (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: disabled ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: "0.625rem", color: "white", children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+                        }, "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: zIndices_1.default.popover, 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_1.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
-                    if (!hasSubMenu && url && isBrowserNavigationGesture(e))
-                        return;
-                    e.preventDefault();
-                    handleToggleSubMenu(e);
-                }, "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), children: buttonContent }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_1.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_1.Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_f = menu.id) !== null && _f !== void 0 ? _f : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
-                        transition: "opacity 0.28s ease, transform 0.28s ease",
+    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 && (0, exports.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: SUBMENU_REVEAL_TRANSITION,
                         opacity: isOpen ? 1 : 0,
                         transform: isOpen ? "translateY(0)" : "translateY(-6px)",
                     }, children: subMenu.map((sub, sIdx) => {
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
-                        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", py: "5px", pl: "30px", pr: "10px", borderRadius: "md", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: (e) => {
-                                if (sub.url && isBrowserNavigationGesture(e))
+                        const isSubBlocked = (0, menuDisabled_1.menuDisabled)(sub) || sub.locked;
+                        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
+                                        ? "whiteAlpha.400"
+                                        : "whiteAlpha.200",
+                            }, opacity: isSubBlocked ? states_1.DISABLED_OPACITY : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
+                                if (sub.url && (0, exports.isBrowserNavigationGesture)(e))
                                     return;
                                 e.preventDefault();
-                                if (!sub.disabled)
+                                if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s", children: [(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: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "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 : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
-                                            // open={isOpen}
-                                            color: isSubActive ? "whiteAlpha.900" : "whiteAlpha.800", _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: "whiteAlpha.600" })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_2.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: sidebarMotion_1.SIDEBAR_INK_TRANSITION })) : ((0, jsx_runtime_1.jsx)(react_2.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: sidebarMotion_1.SIDEBAR_BG_TRANSITION })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge
                                         : null;
                                     const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                                    if (value == null)
+                                        return null;
                                     const colorScheme = (_b = subCfg === null || subCfg === void 0 ? void 0 : subCfg.color) !== null && _b !== void 0 ? _b : "teal";
                                     const radius = (_c = subCfg === null || subCfg === void 0 ? void 0 : subCfg.radius) !== null && _c !== void 0 ? _c : "full";
                                     const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.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;
-                                })()] }, `${String((_c = (_b = sub.id) !== null && _b !== void 0 ? _b : sub.title) !== null && _c !== void 0 ? _c : sIdx)}-${sIdx}`));
+                                    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 }));
+                                })()] }));
+                        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;
+exports.default = react_1.default.memo(MenuItemBox);

package/dist/Components/SideBar/components/MenuItems.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { RenderMenuType } from "../SideBarProps";
-declare const MenuItems: React.FC<RenderMenuType>;
-export default MenuItems;
+declare const _default: React.NamedExoticComponent<RenderMenuType>;
+export default _default;

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);
@@ -54,15 +54,15 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
             setOpenMenuId(activeMenu);
         }
     }, [activeMenu, menus]);
-    const handleToggle = (menu, clickY) => {
+    const handleToggle = (0, react_1.useCallback)((menu, clickY) => {
         setOpenMenuId((prev) => (prev === menu.id ? null : menu.id));
         if (typeof clickY === "number")
             setLastClickY(clickY);
-    };
+    }, []);
     (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: "xs-minus", 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;
+exports.default = (0, react_1.memo)(MenuItems);

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

@@ -6,51 +6,70 @@ 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 ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const sidebarFocus_1 = require("../sidebarFocus");
+const sidebarScale_1 = require("../sidebarScale");
+const sidebarMotion_1 = require("../sidebarMotion");
 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;
-    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: isParentActive ? "whiteAlpha.400" : "whiteAlpha.200" }
+                    : 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, sx: hasSubMenu ? undefined : (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors, theme.colors.sidebar.elevated), 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 && (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;
-                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 ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
+                        cursor: !isSubBlocked ? "pointer" : "not-allowed",
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors, theme.colors.sidebar.elevated), 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: sidebarMotion_1.SIDEBAR_INK_TRANSITION })) : ((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: sidebarMotion_1.SIDEBAR_BG_TRANSITION })), (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
                                 : 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

@@ -1,8 +1,14 @@
 "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 useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const zIndices_1 = __importDefault(require("../../../Theme/tokens/primitives/zIndices"));
+const sidebarFocus_1 = require("../sidebarFocus");
+const sidebarMotion_1 = require("../sidebarMotion");
 const OtherApps = ({ toggle, otherApps }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!otherApps || otherApps.length === 0)
@@ -12,11 +18,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.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs-minus", 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: "xs-minus", 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: zIndices_1.default.popover, 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

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const sharedResizeObserver_1 = require("../../../Hooks/sharedResizeObserver");
 const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%", isTooltipDisabled = false, ...textProps }) => {
     const textRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
@@ -22,13 +23,13 @@ const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%"
             }
         };
         checkTruncation();
-        const resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return () => resizeObserver.disconnect();
+        if (!textRef.current)
+            return;
+        return (0, sharedResizeObserver_1.observeResize)(textRef.current, checkTruncation);
     }, [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/PinnedSection.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { SidebarPinnedItem, SidebarPinnedLabels } from "../SideBarProps";
+export declare const DEFAULT_PINNED_LABEL = "Pinned";
+export declare const DEFAULT_PINNED_LIMIT = 5;
+type PinnedSectionProps = {
+    items: SidebarPinnedItem[];
+    label?: string;
+    limit?: number;
+    toggle: boolean;
+    overlay: boolean;
+    activeId?: string | number | null;
+    labels?: SidebarPinnedLabels;
+    onItemClick: (item: SidebarPinnedItem) => void;
+    onUnpin?: (item: SidebarPinnedItem) => void;
+};
+declare const PinnedSection: React.FC<PinnedSectionProps>;
+export default PinnedSection;