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

package/dist/Components/SelectV2/SelectV2.js

@@ -56,15 +56,12 @@ const asIdSet = (values) => new Set((values !== null && values !== void 0 ? valu
 // Derived from the option's own id (not its index) so it stays stable across filtering/reordering.
 const optionDomId = (listboxId, id) => `${listboxId}-option-${id.toString().replace(/[^a-zA-Z0-9_-]/g, "-")}`;
 const OptionRow = react_1.default.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, renderOption, onSelect, onActivate, }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSelected && !isMulti ? 600 : 500, color: isSelected && !isMulti
-            ? (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[600]
-            : (_e = (_d = theme.colors.text) === null || _d === void 0 ? void 0 : _d[700]) !== null && _e !== void 0 ? _e : (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[700], bg: isActive
-            ? (_j = (_h = (_g = theme.colors.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[100]
-            : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[500], isTruncated: true, children: option.description })) : null] })] }))] }));
+            ? theme.colors.accentText
+            : theme.colors.text[700], bg: isActive ? theme.colors.primary.opacity[8] : "transparent", transition: "background 0.12s ease, color 0.12s ease", children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", fontWeight: 400, color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
 });
 function SelectV2(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c;
     const { options = [], placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isRequired = false, size = "md", isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, "data-testid": dataTestId, "aria-label": ariaLabel, } = props;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)({ defaultIsOpen: defaultOpen });
@@ -234,18 +231,15 @@ function SelectV2(props) {
     const triggerId = `selectv2-trigger-${instanceId}`;
     const activeOption = filteredOptions[activeIndex];
     const activeDescendantId = activeOption ? optionDomId(listboxId, activeOption.id) : undefined;
-    const listScrollStyles = (0, react_1.useMemo)(() => {
-        var _a, _b;
-        return ({
-            scrollbarWidth: "thin",
-            scrollbarColor: `${(_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[300]} transparent`,
-            "&::-webkit-scrollbar": { width: "6px" },
-            "&::-webkit-scrollbar-thumb": {
-                background: (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[300],
-                borderRadius: "base",
-            },
-        });
-    }, [theme]);
+    const listScrollStyles = (0, react_1.useMemo)(() => ({
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme.colors.gray[300]} transparent`,
+        "&::-webkit-scrollbar": { width: "6px" },
+        "&::-webkit-scrollbar-thumb": {
+            background: theme.colors.gray[300],
+            borderRadius: "base",
+        },
+    }), [theme]);
     const defaultTriggerContent = () => {
         var _a;
         if (props.isMulti) {
@@ -260,10 +254,10 @@ function SelectV2(props) {
         return selectedOptions[0] ? selectedOptions[0].label : placeholder;
     };
     const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
-    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: triggerId, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[900] : (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[500], "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500], children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "xl", border: `0.063rem solid ${(_g = (_f = theme.colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[200]}`, boxShadow: (_j = theme.shadows) === null || _j === void 0 ? void 0 : _j.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${(_l = (_k = theme.colors.boxborder) === null || _k === void 0 ? void 0 : _k[100]) !== null && _l !== void 0 ? _l : (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[200]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: triggerId, isRequired: isRequired })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", matchWidth: true, autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", id: triggerId, ref: triggerRef, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled, "aria-label": ariaLabel, disabled: isDisabled, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", h: s.h, px: s.px, fontSize: s.fontSize, fontWeight: 500, textAlign: "left", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.4 : 1, color: selectedOptions.length ? theme.colors.text[900] : theme.colors.placeholder[500], "data-testid": dataTestId, ...fieldStyles, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 1.5, minW: 0, isTruncated: true, children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, fontStyle: selectedOptions.length ? "normal" : "italic", children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: theme.colors.textMuted, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "100%", borderRadius: "xl", border: `0.063rem solid ${theme.colors.boxborder[200]}`, boxShadow: (_c = theme.shadows) === null || _c === void 0 ? void 0 : _c.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [isSearchable && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${theme.colors.boxborder[100]}`, children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, size: "sm", placeholder: "Type to filter...", value: filterText, onChange: (event) => {
                                             setFilterText(event.target.value);
                                             setActiveIndex(0);
-                                        }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: (_o = theme.colors.gray) === null || _o === void 0 ? void 0 : _o[500], children: "No Options" })), filteredOptions.map((option, index) => {
+                                        }, "aria-activedescendant": activeDescendantId, "aria-label": "Filter options" }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-multiselectable": props.isMulti || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, children: [filteredOptions.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: theme.colors.textMuted, children: "No Options" })), filteredOptions.map((option, index) => {
                                             var _a;
                                             return ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, index: index, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
                                         })] })] }) })] }), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage }), helperText && !error && (0, jsx_runtime_1.jsx)(HelperText_1.default, { helperText: helperText })] }));

package/dist/Components/SideBar/SecondaryBar.js

@@ -7,7 +7,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
 const lucide_react_1 = require("lucide-react");
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
@@ -23,12 +22,11 @@ const parseBadge = (badge) => {
     });
 };
 const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
-    var _a, _b, _c;
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
+    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: (_c = item.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", py: "8px", mb: "2px", borderRadius: "md", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", _hover: {
+    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": item.disabled ? true : undefined, textDecoration: "none", py: "8px", mb: "2px", borderRadius: "md", display: "flex", alignItems: "center", justifyContent: "center", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
                         bg: item.disabled
                             ? "transparent"
                             : isActive
@@ -38,30 +36,27 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!item.disabled)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", color: isActive ? activeAccent.icon : "whiteAlpha.600", _groupHover: isActive ? undefined : { color: "whiteAlpha.800" }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: "white", border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.75rem", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "0.5rem", flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "1rem", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
-    var _a, _b, _c;
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
+    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: (_c = item.url) !== null && _c !== void 0 ? _c : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, textDecoration: "none", px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+    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": item.disabled ? true : undefined, textDecoration: "none", px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", overflow: "hidden", cursor: item.disabled ? "not-allowed" : "pointer", opacity: item.disabled ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
             bg: item.disabled ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
         }, onClick: (e) => {
             e.preventDefault();
             if (!item.disabled)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.primary[500] : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "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 : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
+        }, 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: "8px", flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "0.95rem", flexShrink: 0, color: isActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isActive ? undefined : { color: "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 : "whiteAlpha.900", _groupHover: isActive ? undefined : { color: "white" }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: badgeVal }))] }));
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), (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: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "base", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.white, opacity: 0.6 }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.white, opacity: 0.6 })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: "all 0.3s", pos: "sticky", top: 0, h: "100vh", w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: "whiteAlpha.100", boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: "whiteAlpha.100", flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "0.95rem", color: activeAccent.icon, flexShrink: 0 })), (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: headerFontSize, fontWeight: 600, color: "whiteAlpha.900", as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "base", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.100" }, transition: "background 0.15s", children: collapsed ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "secondary-scroll-container", flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", p: "8px 6px", children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

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

@@ -1,2 +1,2 @@
 import { SidebarProps } from "./SideBarProps";
-export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open, otherApps, mobileOpen, onMobileClose, mobileNav, onToggleMobileNav, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open, otherApps, mobileOpen, onMobileClose, mobileNav, onToggleMobileNav, peekOpen, onPeekEnd, }: SidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SideBar/SideBar.js

@@ -18,6 +18,9 @@ const Z_PANEL = 1400;
 // Overlay/mobile panel width. ~14.7rem (235px): a touch wider than the inline
 // expanded 13rem for comfortable touch targets, but below the old 16rem that was
 // too wide on phones. Still capped by `maxW: 88vw` on very small screens.
+const RAIL_WIDTH = "4.688rem";
+const PANEL_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
+const EXPANDED_WIDTH = "13rem";
 const OVERLAY_WIDTH = "14.7rem";
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const MenuItems_1 = __importDefault(require("./components/MenuItems"));
@@ -25,20 +28,21 @@ const defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 const SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
 const OtherApps_1 = __importDefault(require("./components/OtherApps"));
-const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, closeButtonRef, }) => {
+const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
-        return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
+        return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 2 : 4, py: 2, h: Sidebar_1.HEADER_HEIGHT, display: "flex", alignItems: "center", flexShrink: 0, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "28px", h: "28px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "1.25rem", w: "60%", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
-    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: (0, accentText_1.onFilled)(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, "aria-label": toggle ? "Expand sidebar" : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", ref: closeButtonRef, onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "base", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.white, opacity: 0.7 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.white, opacity: 0.6 })) }))] }));
+    const logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "md", boxSize: "1.75rem", src: logo, alt: "Company Logo", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { bg: theme.colors.primary[500], color: (0, accentText_1.onFilled)(theme.colors.primary[500], theme.colors.white, theme.colors.black), borderRadius: "md", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "8px", px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: "whiteAlpha.100", minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: "12.5px", textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "base", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", children: overlay ? ((0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, color: theme.colors.sidebar.mutedIcon })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14, color: theme.colors.sidebar.mutedIcon })) }))] }));
+};
+const SkeletonMenuRow = ({ toggle }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
 };
-const SkeletonMenuRow = ({ toggle }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "100%", px: toggle ? 1 : 2, py: 2, children: toggle ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", gap: 4, justifyContent: "center", children: (0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "24px", h: "24px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { w: "18px", h: "18px", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: "0.875rem", w: "80%", borderRadius: "md", startColor: "gray.600", endColor: "gray.500" })] })) }));
 const AddNewButton = ({ toggle, onClick, overlay }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "md", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "12.5px", color: "whiteAlpha.900", fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
@@ -52,41 +56,35 @@ const deriveInitials = (user) => {
     return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 };
 const UserFooter = ({ user, toggle, overlay }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
-    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.icon, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: "8px", px: "8px", py: overlay ? "10px" : "6px", w: "100%", borderRadius: "md", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", fontWeight: 500, color: "whiteAlpha.800", isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: "whiteAlpha.500", isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.white, opacity: 0.3 })] }) }));
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", bg: theme.colors.primary.opacity[32], color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "10px", fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: "8px", px: "8px", py: overlay ? "10px" : "6px", w: "100%", borderRadius: "md", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.100" }, transition: "background 0.12s", children: [avatar, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, textAlign: "left", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", fontWeight: 500, color: "whiteAlpha.800", isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "10px", color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
-const ControlCell = ({ onClick, label, accent, children }) => {
-    var _a, _b;
+const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "6px", py: "8px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", color: accent ? activeAccent.icon : "whiteAlpha.700", fontWeight: "medium", children: label }))] }));
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "11.5px", color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
 };
 // Collapse (mini-rail) sits next to the Hide/Show navbar-mode toggle. In the
 // desktop mobile-nav overlay only "Show" (return to the docked sidebar) is shown;
 // below `lg` (pure responsive overlay) there is no navbar-mode control.
 const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggleMobileNav, }) => {
-    var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
-    const iconColor = theme.colors.white;
-    const shell = (children) => ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { display: "flex", gap: "0", borderRadius: "lg", overflow: "hidden", border: "1px solid", borderColor: "whiteAlpha.100", bg: "whiteAlpha.50", sx: { "& > * + *": { borderLeft: "1px solid", borderColor: "whiteAlpha.100" } }, children: children }) }));
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const iconColor = theme.colors.sidebar.mutedIcon;
+    const shell = (children) => ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "10px 6px", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { display: "flex", gap: "0", borderRadius: "lg", overflow: "hidden", border: "1px solid", borderColor: "whiteAlpha.100", bg: "whiteAlpha.50", sx: { "& > * + *": { borderLeft: "1px solid", borderColor: "whiteAlpha.100" } }, children: children }) }));
     if (overlay) {
         // Pure below-lg overlay (no manual nav-mode switch) → no footer control.
         if (!mobileNav || !onToggleMobileNav)
             return null;
         return shell((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: "Show", accent: true, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeft, { size: 14, color: activeAccent.icon }) }));
     }
-    return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor, opacity: 0.6 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor, opacity: 0.6 })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor, opacity: 0.6 }) }))] }));
+    return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
-function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, }) {
+function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, }) {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Below `lg` the sidebar renders as a slide-in overlay above the content; at
@@ -98,14 +96,21 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
     // In overlay mode the panel is always fully expanded — the mini-rail/collapse
     // is a desktop-only space affordance — so children render as if `toggle=false`.
     const effToggle = overlay ? false : toggle;
-    const isOverlayOpen = overlay && mobileOpen;
+    // A peeked overlay was never pinned, so leaving the panel must close it; a clicked-open
+    // one must not, or the drawer would vanish the moment the pointer moved away.
+    const overlayPeeking = overlay && peekOpen && !mobileOpen;
+    const isOverlayOpen = overlay && (mobileOpen || peekOpen);
+    const closeOverlay = () => {
+        onPeekEnd === null || onPeekEnd === void 0 ? void 0 : onPeekEnd();
+        onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+    };
     // In overlay mode, navigating to a leaf item auto-closes the overlay (content
     // returns to full-screen). Parent items with a submenu only expand, so they
     // must NOT close it.
     const handleMenuClickInternal = (menu) => {
         handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
         if (overlay && !(menu.subMenu && menu.subMenu.length > 0))
-            onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+            closeOverlay();
     };
     // Refs let the effects read the latest values without adding them to dep arrays,
     // which would cause infinite toggle loops since changeToggle flips state.
@@ -136,7 +141,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
             return;
         const onKey = (e) => {
             if (e.key === "Escape")
-                onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
+                closeOverlay();
         };
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
@@ -144,12 +149,11 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
     // `role="dialog" aria-modal` only promises modality — focus has to be moved in and
     // kept in, or Tab walks straight into the content behind the scrim.
     const panelRef = (0, react_1.useRef)(null);
-    const closeButtonRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!isOverlayOpen)
             return;
-        (_a = closeButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [isOverlayOpen]);
     const trapTab = (e) => {
         if (e.key !== "Tab" || !isOverlayOpen)
@@ -162,7 +166,8 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
             return;
         const first = stops[0];
         const last = stops[stops.length - 1];
-        if (e.shiftKey && document.activeElement === first) {
+        const atStart = document.activeElement === panel || document.activeElement === first;
+        if (e.shiftKey && atStart) {
             e.preventDefault();
             last.focus();
         }
@@ -223,7 +228,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
         : isOverlayOpen
             ? "translateX(0)"
             : "translateX(-100%)";
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, bg: "blackAlpha.600", zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", onClick: onMobileClose, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: panelRef, onKeyDown: trapTab, position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, height: "100vh", maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileNav ? "block" : { base: "block", lg: "none" }, position: "fixed", inset: 0, bg: "blackAlpha.600", zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", onClick: closeOverlay, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: panelRef, onKeyDown: trapTab, tabIndex: overlay ? -1 : undefined, outline: "none", position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, height: "100vh", maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
                     ? dragging
                         ? "none"
                         : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)"
@@ -232,12 +237,14 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                             ? "none"
                             : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
                         lg: "all 0.5s",
-                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !mobileOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav ? OVERLAY_WIDTH : { base: OVERLAY_WIDTH, lg: toggle ? "4.688rem" : "13rem" }, transition: "width 0.5s ease", display: "flex", flexDirection: "column", justifyContent: "space-between", children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100vh", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose, closeButtonRef: closeButtonRef }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
+                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: "whiteAlpha.100", role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: { touchAction: overlay ? "pan-y" : "auto" }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { width: mobileNav
+                            ? OVERLAY_WIDTH
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: `width 0.26s ${PANEL_EASE}`, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100vh", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: "sidebar-scroll-container", flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", p: "8px 6px", css: {
                                         ...Sidebar_1.FlexCss,
                                         transition: "all 0.3s ease",
                                         // (a) larger touch targets for menu rows in overlay mode
                                         ...(overlay
                                             ? { "[data-menu-id]": { paddingTop: "10px", paddingBottom: "10px" } }
                                             : {}),
-                                    }, children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => ((0, jsx_runtime_1.jsx)(SkeletonMenuRow, { toggle: effToggle }, i)))) : ((0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", children: (0, jsx_runtime_1.jsx)(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), (0, jsx_runtime_1.jsx)(OtherApps_1.default, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && (0, jsx_runtime_1.jsx)(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), (0, jsx_runtime_1.jsx)(FooterControls, { toggle: toggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && ((0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: "whiteAlpha.300", "aria-hidden": "true" }))] })] }));
+                                    }, children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => ((0, jsx_runtime_1.jsx)(SkeletonMenuRow, { toggle: effToggle }, i)))) : ((0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: "8px 6px", children: (0, jsx_runtime_1.jsx)(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), (0, jsx_runtime_1.jsx)(OtherApps_1.default, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && (0, jsx_runtime_1.jsx)(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), (0, jsx_runtime_1.jsx)(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && ((0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: "whiteAlpha.300", "aria-hidden": "true" }))] })] }));
 }

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

@@ -50,6 +50,12 @@ export type SidebarProps = {
      * sidebar — see the playground for the canonical wiring.
      */
     onToggleMobileNav?: () => void;
+    /**
+     * Overlay peek: the sidebar shows without pinning, and closes itself when the pointer
+     * leaves the panel. Wire to `NavigationBar`'s `onSideBarPeek`.
+     */
+    peekOpen?: boolean;
+    onPeekEnd?: () => void;
 };
 export type MenuProps = {
     id: string | number;

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

@@ -8,7 +8,6 @@ const react_1 = require("@chakra-ui/react");
 const MenuPopoverContent_1 = __importDefault(require("./MenuPopoverContent"));
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
-const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const sidebarAccentColors_1 = require("../sidebarAccentColors");
 const TextTruncation_1 = __importDefault(require("./TextTruncation"));
 /**
@@ -18,26 +17,25 @@ const TextTruncation_1 = __importDefault(require("./TextTruncation"));
  */
 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, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    const isDark = (0, accentText_1.isDarkCanvas)((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : accentText_1.DEFAULT_CANVAS);
-    const activeAccent = (0, sidebarAccentColors_1.useSidebarActiveAccent)(theme.colors, isDark);
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { title, icon, disabled, locked, badge, subMenu, url } = menu;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
-    const submenuPanelId = `submenu-${String((_c = menu.id) !== null && _c !== void 0 ? _c : title)}`;
+    const submenuPanelId = `submenu-${String((_a = menu.id) !== null && _a !== void 0 ? _a : title)}`;
     // A submenu parent only expands, so it is a button; every other row navigates.
     // 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 = (_d = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _d !== void 0 ? _d : (typeof badge !== "object" ? badge : undefined);
-    const hasSubmenuBadge = (_e = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
+    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) => {
         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 && _e !== void 0 ? _e : false;
+    })) !== null && _c !== void 0 ? _c : 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;
@@ -68,7 +66,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         fontWeight: "medium",
         border: "none",
         borderLeft: "2px solid",
-        borderLeftColor: isAnyActive ? theme.colors.primary[500] : "transparent",
+        borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
         backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
         color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
         _hover: disabled
@@ -91,7 +89,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                         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: "whiteAlpha.400" }))] }))] }));
+                    })(), 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 }))] }))] }));
     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) => {
@@ -99,14 +97,14 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
-                        }, "data-menu-id": String((_f = menu.id) !== null && _f !== void 0 ? _f : 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.background[200], 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((_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 }) }) }) })] }));
     }
     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((_g = menu.id) !== null && _g !== void 0 ? _g : 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((_h = menu.id) !== null && _h !== void 0 ? _h : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+                }, "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",
                         opacity: isOpen ? 1 : 0,
                         transform: isOpen ? "translateY(0)" : "translateY(-6px)",

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

@@ -39,8 +39,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 theme = (0, useCustomTheme_1.useCustomTheme)();
     const [openMenuId, setOpenMenuId] = (0, react_1.useState)(null);
     const [lastClickY, setLastClickY] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
@@ -146,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: "whiteAlpha.600", 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: "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}`));
         }) }));
 };
 exports.default = MenuItems;