pixelize-design-library 2.4.2-beta.58 → 2.4.2-beta.60

package/dist/Components/Search/Search.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 lucide_react_1 = require("lucide-react");
+const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
 const FormLabel_1 = require("../Common/FormLabel");
 const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
 const useFieldIds_1 = require("../Common/useFieldIds");
@@ -49,6 +50,6 @@ const Search = (0, react_1.forwardRef)(function Search({ placeholder = "Search..
                             ps: spec.height,
                             pe: rightPadding,
                             ...(0, motion_1.reducedMotionSx)(),
-                        } }), (showClear || showHint) && ((0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) })), showHint && ((0, jsx_runtime_1.jsx)(react_2.Kbd, { "aria-hidden": true, fontSize: "0.6875rem", fontWeight: 500, color: theme.colors.textMuted, bg: theme.colors.backgroundColor.subtle, borderColor: theme.colors.boxborder[200], whiteSpace: "nowrap", children: shortcut }))] }))] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                        } }), (showClear || showHint) && ((0, jsx_runtime_1.jsxs)(react_2.InputRightElement, { h: spec.height, w: "auto", pe: spec.paddingX, gap: 1, children: [showClear && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Clear search", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: spec.iconSize }), variant: "ghost", size: "xs", h: clearSize, minW: clearSize, color: theme.colors.textMuted, onClick: handleClear, sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) })), showHint && ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: shortcut }) }))] }))] }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 exports.default = Search;

package/dist/Components/SectionRail/SectionRail.d.ts

@@ -0,0 +1,3 @@
+import type { SectionRailProps } from "./SectionRailProps";
+declare const SectionRail: ({ sections, activeId, onSelect, "aria-label": ariaLabel, dirtyHint, collapseBelow, }: SectionRailProps) => import("react/jsx-runtime").JSX.Element;
+export default SectionRail;

package/dist/Components/SectionRail/SectionRail.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Select_1 = __importDefault(require("../Select/Select"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const FALLBACK_BREAKPOINTS = { sm: "30em", md: "48em", lg: "62em" };
+const matchesMinWidth = (query) => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : true;
+const useMinWidth = (minWidth) => {
+    const query = `(min-width: ${minWidth})`;
+    const [matches, setMatches] = (0, react_1.useState)(() => matchesMinWidth(query));
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+            return undefined;
+        const list = window.matchMedia(query);
+        const update = () => setMatches(list.matches);
+        update();
+        (_a = list.addEventListener) === null || _a === void 0 ? void 0 : _a.call(list, "change", update);
+        return () => { var _a; return (_a = list.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(list, "change", update); };
+    }, [query]);
+    return matches;
+};
+const SectionRail = ({ sections, activeId, onSelect, "aria-label": ariaLabel, dirtyHint, collapseBelow = "md", }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { breakpoints } = (0, react_2.useTheme)();
+    const isRail = useMinWidth((_a = breakpoints === null || breakpoints === void 0 ? void 0 : breakpoints[collapseBelow]) !== null && _a !== void 0 ? _a : FALLBACK_BREAKPOINTS[collapseBelow]);
+    const rows = (0, rowStates_1.listRowBackgrounds)(colors);
+    if (!isRail) {
+        return ((0, jsx_runtime_1.jsx)(Select_1.default, { "aria-label": ariaLabel, width: "100%", value: activeId, options: sections.map((section) => ({
+                id: section.id,
+                label: section.isDirty ? `${section.label} (${dirtyHint})` : section.label,
+            })), onChange: (option) => option && onSelect(String(option.id)) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "nav", "aria-label": ariaLabel, direction: "column", gap: "2px", children: sections.map((section) => {
+            const isActive = section.id === activeId;
+            return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", align: "center", gap: 2, minH: "2rem", px: 3, py: 1.5, borderRadius: "md", fontSize: "sm", fontWeight: isActive ? 600 : 500, textAlign: "left", "aria-current": isActive ? "true" : undefined, bg: isActive ? rows.selected : "transparent", color: isActive ? colors.accentText : colors.text[800], transition: (0, motion_1.transitionFor)(["background-color", "color"]), _hover: { bg: isActive ? rows.selectedActive : rows.active }, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), sx: (0, motion_2.reducedMotionSx)(), onClick: () => onSelect(section.id), children: [section.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, children: section.icon })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", noOfLines: 1, flex: "1", minW: 0, children: section.label }), section.isDirty ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "aria-hidden": true, boxSize: "6px", borderRadius: "full", flexShrink: 0, bg: colors.semanticText.warning }), (0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { children: dirtyHint })] })) : null] }, section.id));
+        }) }));
+};
+exports.default = SectionRail;

package/dist/Components/SectionRail/SectionRailProps.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+/** One entry in a SectionRail. */
+export interface RailSection {
+    id: string;
+    label: string;
+    /** Decorative leading icon, hidden from assistive tech; the label carries the name. */
+    icon?: ReactNode;
+    /** Shows a dot, and `dirtyHint` to screen readers, on a section holding unsaved edits. */
+    isDirty?: boolean;
+}
+/** Props for the section navigation of a long settings screen: a rail on wide viewports, a Select below `collapseBelow`. */
+export interface SectionRailProps {
+    sections: RailSection[];
+    /** Id of the current section; marked `aria-current="true"` (and selected in the Select). */
+    activeId: string;
+    onSelect: (id: string) => void;
+    /** Accessible name of the nav and of the collapsed Select. */
+    "aria-label": string;
+    /** Visually hidden text announced after a dirty section's label, e.g. "Unsaved changes". */
+    dirtyHint: string;
+    /** Viewports narrower than this breakpoint render a Select instead of the rail; defaults to "md". */
+    collapseBelow?: "sm" | "md" | "lg";
+}

package/dist/Components/SectionRail/SectionRailProps.js

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

package/dist/Components/SectionRail/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SectionRail } from "./SectionRail";
+export type { RailSection, SectionRailProps } from "./SectionRailProps";

package/dist/Components/SectionRail/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionRail = void 0;
+var SectionRail_1 = require("./SectionRail");
+Object.defineProperty(exports, "SectionRail", { enumerable: true, get: function () { return __importDefault(SectionRail_1).default; } });

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -43,18 +43,17 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
     const segmentH = `calc(${control.height} - ${isUnderlineSlide ? UNDERLINE_WIDTH : `2 * ${TRACK_PADDING}`})`;
     // Concentric: an inset child keeping the parent's radius bulges at the corners.
     const innerRadius = isUnderlineSlide ? "none" : `calc(${radii.lg} - ${TRACK_PADDING})`;
-    const focusShadow = (0, segmentedInk_1.segmentedFocusShadow)(colors, trackSurface);
     // Inset, never a border: a border consumes the content box and the absolute pill stops centring.
     const plateEdge = isBrandSlide
         ? `inset 0 0 0 1px ${(0, segmentedInk_1.segmentedPlateEdge)(colors, surface)}`
         : undefined;
-    // The transparent outline replaces the UA ring and is what Windows high-contrast repaints.
-    const segmentFocus = {
-        outline: "2px solid transparent",
-        outlineOffset: "2px",
-        // underlineSlide has no track chrome to carry the indicator, so there the segment wears it.
-        ...(isUnderlineSlide ? { boxShadow: focusShadow } : {}),
-    };
+    // underlineSlide has no track chrome to carry the ring, so there the segment wears Button's own.
+    const noRing = { outline: "2px solid transparent", outlineOffset: "2px" };
+    const segmentFocus = isUnderlineSlide
+        ? (0, focusRing_styles_1.focusVisibleStyles)(colors)
+        : { _focusVisible: noRing, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: noRing };
+    const ring = (0, focusRing_styles_1.focusRingShadow)(colors);
+    const trackFocusShadow = plateEdge ? `${plateEdge}, ${ring}` : ring;
     const [showFocus, setShowFocus] = (0, react_1.useState)(false);
     const selectedIndex = options.findIndex((o) => o.value === value);
     const enabled = options.reduce((acc, o, i) => (o.isDisabled ? acc : [...acc, i]), []);
@@ -96,7 +95,7 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
             selectAt(enabled[enabled.length - 1]);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? focusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : "-0.0625rem", left: isVertical ? "-0.0625rem" : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: trackRef, role: "radiogroup", "aria-label": ariaLabel, "aria-orientation": isVertical ? "vertical" : undefined, onKeyDown: handleKeyDown, onFocus: (event) => setShowFocus(event.target.matches(":focus-visible")), onBlur: () => setShowFocus(false), boxShadow: showFocus && !isUnderlineSlide ? trackFocusShadow : plateEdge, position: "relative", display: "inline-flex", flexDirection: isVertical ? "column" : "row", align: isVertical ? "stretch" : "center", gap: isUnderlineSlide ? "0" : TRACK_PADDING, p: isUnderlineSlide ? "0" : TRACK_PADDING, h: isVertical ? "fit-content" : control.height, boxSizing: "border-box", borderRadius: isUnderlineSlide ? "none" : "lg", borderBottom: isUnderlineSlide && !isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, borderLeft: isUnderlineSlide && isVertical ? `${UNDERLINE_WIDTH} solid ${colors.boxborder[200]}` : undefined, bg: isUnderlineSlide ? "transparent" : trackSurface, w: isFullWidth ? "100%" : "fit-content", minW: "max-content", children: [isBrandSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", top: isVertical ? 0 : TRACK_PADDING, left: isVertical ? TRACK_PADDING : 0, right: isVertical ? TRACK_PADDING : undefined, h: segmentH, w: isVertical ? undefined : `${pill.width}px`, borderRadius: innerRadius, bg: brandFill.fill, boxShadow: `0 0.125rem 0.5rem ${colors.boxShadow.primary}`, transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), isUnderlineSlide && pill && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", position: "absolute", bottom: isVertical ? undefined : "-0.0625rem", left: isVertical ? "-0.0625rem" : 0, top: isVertical ? 0 : undefined, h: isVertical ? segmentH : "0.125rem", w: isVertical ? "0.125rem" : `${pill.width}px`, borderRadius: "full", bg: colors.primary[500], transform: isVertical ? `translateY(${pill.top}px)` : `translateX(${pill.left}px)`, transition: SLIDE, sx: (0, motion_2.reducedMotionSx)() })), options.map((option, index) => {
                 const isSelected = option.value === value;
                 const showShortLabel = isCompact && !!option.shortLabel;
                 const displayLabel = showShortLabel ? option.shortLabel : option.label;
@@ -116,10 +115,6 @@ function SegmentedControl({ options, value, onChange, size = "sm", isFullWidth =
                             : restInk
                         : isSelected
                             ? selectedInk
-                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: {
-                        _focusVisible: segmentFocus,
-                        [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: segmentFocus,
-                        ...(0, motion_2.reducedMotionSx)(),
-                    }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
+                            : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...(0, motion_2.reducedMotionSx)() }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }

package/dist/Components/SegmentedControl/segmentedInk.d.ts

@@ -6,8 +6,6 @@ export declare const segmentedTrackSurface: (variant: SegmentedControlVariant, c
 export declare const segmentedSelectedSurface: (variant: SegmentedControlVariant, colors: PaletteProps, trackSurface: string) => string;
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 export declare const segmentedRestInk: (colors: PaletteProps, trackSurface: string) => string;
-/** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
-export declare const segmentedFocusShadow: (colors: PaletteProps, trackSurface: string) => string;
 /** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
 export declare const segmentedPlateEdge: (colors: PaletteProps, surface?: string) => string;

package/dist/Components/SegmentedControl/segmentedInk.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.segmentedPlateEdge = exports.segmentedFocusShadow = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = void 0;
-const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+exports.segmentedPlateEdge = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = void 0;
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 /** The surface a segment's label really sits on. */
@@ -21,9 +20,6 @@ exports.segmentedSelectedSurface = segmentedSelectedSurface;
 /** Unselected label ink, lifted to AA against the track it is drawn on. */
 const segmentedRestInk = (colors, trackSurface) => (0, outlineRung_1.liftToContrast)(colors.text[600], trackSurface, accentText_1.AA_NORMAL_TEXT);
 exports.segmentedRestInk = segmentedRestInk;
-/** A radiogroup is one tab stop, so the group wears the ring: a brand hairline plus the field bloom. */
-const segmentedFocusShadow = (colors, trackSurface) => `inset 0 0 0 1px ${(0, outlineRung_1.liftToContrast)(colors.primary[500], trackSurface, outlineRung_1.AA_NON_TEXT)}, ${(0, focusRing_styles_1.focusGlowShadow)(colors)}`;
-exports.segmentedFocusShadow = segmentedFocusShadow;
 /** The plate can match its backdrop's lightness, so its edge carries the boundary.
  * Drawn inset by the caller: a real border consumes the content box and decentres the sliding pill. */
 const segmentedPlateEdge = (colors, surface) => (0, outlineRung_1.liftToContrast)(colors.boxborder[500], surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main, outlineRung_1.AA_NON_TEXT);

package/dist/Components/SideBar/SecondaryBar.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const sidebarFocus_1 = require("./sidebarFocus");
 const menuDisabled_1 = require("./menuDisabled");
 const lucide_react_1 = require("lucide-react");
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
@@ -51,7 +52,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!blocked)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -65,7 +66,7 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
             e.preventDefault();
             if (!blocked)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
     return item.locked && item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
@@ -74,7 +75,7 @@ const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3
     const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     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: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, 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: theme.colors.sidebar.divider, 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: sidebarScale_1.SIDEBAR_ROW.iconSize, 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: theme.colors.white, 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: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, 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: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: items.map((item) => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, 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: theme.colors.sidebar.divider, 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: sidebarScale_1.SIDEBAR_ROW.iconSize, 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: theme.colors.white, 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: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), 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: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), 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, peekOpen, onPeekEnd, }: 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, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition, autoCollapse, }: SidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/SideBar/SideBar.js

@@ -13,6 +13,7 @@ const sidebarId_1 = require("./sidebarId");
 const Sidebar_1 = require("../../Constants/Sidebar");
 const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
 const motion_1 = require("../../Theme/chakra/motion");
+const sidebarFocus_1 = require("./sidebarFocus");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
 const lucide_react_1 = require("lucide-react");
 // Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
@@ -24,6 +25,18 @@ const Z_PANEL = 1400;
 const RAIL_WIDTH = "4.688rem";
 const PANEL_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
 const EXPANDED_WIDTH = "13rem";
+const COLLAPSE_MS = { ...motion_2.MOTION_MS, slow: 260 };
+const NO_ACTIVE_MENU = "\u0000pinned-active";
+const inlineTransitions = (collapse) => {
+    var _a;
+    if (collapse === "none")
+        return { width: "none", shadow: "none" };
+    const ms = COLLAPSE_MS[(_a = collapse.speed) !== null && _a !== void 0 ? _a : "slow"];
+    return {
+        width: `width ${ms}ms ${PANEL_EASE}`,
+        shadow: collapse.animateShadow === false ? "none" : `box-shadow ${ms}ms ${motion_2.MOTION_EASE}`,
+    };
+};
 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"));
@@ -31,6 +44,7 @@ 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 PinnedSection_1 = __importDefault(require("./components/PinnedSection"));
 const sidebarScale_1 = require("./sidebarScale");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
@@ -47,6 +61,7 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
         // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
         bg: theme.colors.sidebar.activeBg, color: activeAccent.label, borderRadius: "lg", 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: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, 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: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, 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: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, 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: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+                    ...(0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
                     "&::after": {
                         content: '""',
                         position: "absolute",
@@ -65,7 +80,7 @@ const SkeletonMenuRow = ({ toggle }) => {
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     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: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, 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: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
+    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: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), 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: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -83,13 +98,13 @@ const UserFooter = ({ user, toggle, overlay }) => {
     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", 
         // Same rail-safe pairing as the logo tile — primary.opacity[32] was invisible on zinc/skyline.
         bg: theme.colors.sidebar.activeBg, color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, 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: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, 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 })] }) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), 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: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, 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, ariaLabel, label, accent, children }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     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: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
+    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", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, 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;
@@ -108,7 +123,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
     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, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, 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, peekOpen = false, onPeekEnd, }) {
+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, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition = { speed: "slow" }, autoCollapse = true, }) {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
@@ -148,20 +163,24 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
     const activeTop = menus.find((m) => String(m.title) === String(activeMenu)) ||
         menus.find((m) => String(m.id) === String(activeMenu));
     const secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    const inline = inlineTransitions(collapseTransition);
+    const pinnedActive = activePinnedId != null && !!(pinnedItems === null || pinnedItems === void 0 ? void 0 : pinnedItems.some((p) => String(p.id) === String(activePinnedId)));
     // Sync toggle with external `open` prop.
     // `open=false` → collapsed (toggle=true); `open=true` → expanded (toggle=false).
     (0, react_1.useEffect)(() => {
+        if (!autoCollapse)
+            return;
         const shouldBeCollapsed = !open;
         if (shouldBeCollapsed !== toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [open]);
+    }, [open, autoCollapse]);
     // Auto-collapse the main sidebar whenever a secondary panel is active.
     (0, react_1.useEffect)(() => {
-        if (secondaryItems.length > 0 && !toggleRef.current) {
+        if (autoCollapse && secondaryItems.length > 0 && !toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [secondaryItems.length]);
+    }, [secondaryItems.length, autoCollapse]);
     // Esc closes the overlay.
     (0, react_1.useEffect)(() => {
         if (!isOverlayOpen)
@@ -263,12 +282,14 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                         base: dragging
                             ? "none"
                             : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
-                        lg: (0, motion_2.transitionFor)(["box-shadow"], "base"),
+                        lg: inline.shadow,
                     }, 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: theme.colors.sidebar.divider, role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: {
                     ...viewportHeight_1.fullViewportHeight,
                     touchAction: overlay ? "pan-y" : "auto",
                     [motion_1.REDUCED_MOTION_QUERY]: { "&, & *": { transition: "none", animation: "none" } },
                 }, 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: "100%", 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: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), 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, overlay: overlay, containerId: scrollContainerId })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "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: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: mobileNav
+                            ? `width 0.26s ${PANEL_EASE}`
+                            : { base: `width 0.26s ${PANEL_EASE}`, lg: inline.width }, 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: "100%", 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: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), 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.jsxs)(jsx_runtime_1.Fragment, { children: [pinnedItems && pinnedItems.length > 0 && ((0, jsx_runtime_1.jsx)(PinnedSection_1.default, { items: pinnedItems, label: pinnedLabel, limit: pinnedLimit, toggle: effToggle, overlay: overlay, activeId: activePinnedId, labels: pinnedLabels, onItemClick: handleMenuClickInternal, onUnpin: onUnpin })), (0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: pinnedActive ? NO_ACTIVE_MENU : activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })] })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "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: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
 }

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

@@ -47,6 +47,38 @@ export type SidebarProps = {
     /** Shows the sidebar without pinning — closes on pointer-leave. Wire to NavigationBar's `onSideBarPeek`. */
     peekOpen?: boolean;
     onPeekEnd?: () => void;
+    /** Rendered above `menus` under a `pinnedLabel` heading; the whole block is omitted when empty. */
+    pinnedItems?: SidebarPinnedItem[];
+    /** Heading above the pinned block; defaults to "Pinned". */
+    pinnedLabel?: string;
+    /** Shows an unpin button on row hover/focus (always visible in the overlay); omit for read-only rows. */
+    onUnpin?: (item: SidebarPinnedItem) => void;
+    /** Matched against pinned ids for the active state; while it matches, the same id in `menus` is not highlighted. */
+    activePinnedId?: string | number | null;
+    /** Rows shown before the rest collapse behind a "Show N more" row; defaults to 5. */
+    pinnedLimit?: number;
+    /** Overrides for the pinned block's strings; `{count}` and `{title}` are substituted. */
+    pinnedLabels?: SidebarPinnedLabels;
+    /** Inline (`lg`+) collapse/expand animation; defaults to `{ speed: "slow" }` (260ms). Overlay slide is unaffected. */
+    collapseTransition?: SidebarCollapseTransition;
+    /** Defaults to true: a menu with `secondaryItems` (and the `open` prop) call `changeToggle` for you. False: `toggle` alone decides. */
+    autoCollapse?: boolean;
+};
+/** One pinned shortcut row; the same fields as a menu item, minus the lock/disabled/submenu states. */
+export type SidebarPinnedItem = Pick<MenuProps, "id" | "title" | "icon" | "url" | "badge">;
+/** Strings for the pinned block; every key is optional and falls back to English. */
+export type SidebarPinnedLabels = {
+    /** Default "Show {count} more". */
+    showMore?: string;
+    /** Default "Show less". */
+    showLess?: string;
+    /** Default "Unpin {title}". */
+    unpin?: string;
+};
+/** `"none"` is instant; otherwise `speed` picks 150/200/260ms and `animateShadow` (default true) toggles the panel shadow. */
+export type SidebarCollapseTransition = "none" | {
+    speed?: "fast" | "base" | "slow";
+    animateShadow?: boolean;
 };
 /** One nav item; `subMenu` renders inline (expand/collapse), `secondaryItems` opens a separate SecondaryBar instead. */
 export type MenuProps = {

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

@@ -11,5 +11,11 @@ interface Props {
     /** Overlay (touch) presentation — rows grow to a 48px touch target instead of the 32px desktop row. */
     overlay?: boolean;
 }
+/**
+ * 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 MenuItemBox: React.FC<Props>;
 export default MenuItemBox;

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

@@ -36,6 +36,7 @@ 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 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
@@ -50,6 +51,7 @@ 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");
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
@@ -57,6 +59,7 @@ const sidebarScale_1 = require("../sidebarScale");
  * routed through the in-app handler.
  */
 const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+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)();
@@ -124,6 +127,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         cursor: isBlocked ? "not-allowed" : "pointer",
         opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
+        sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
     };
     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: "color 0.12s" }), 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}
@@ -143,14 +147,14 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     if (toggle) {
         // Collapsed sidebar: show Popover
         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 && isBrowserNavigationGesture(e))
+                            if (!hasSubMenu && url && (0, exports.isBrowserNavigationGesture)(e))
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
                         }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.625rem", color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
     const row = ((0, jsx_runtime_1.jsx)(react_2.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
-            if (!hasSubMenu && url && isBrowserNavigationGesture(e))
+            if (!hasSubMenu && url && (0, exports.isBrowserNavigationGesture)(e))
                 return;
             e.preventDefault();
             handleToggleSubMenu(e);
@@ -171,12 +175,12 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                         ? "whiteAlpha.400"
                                         : "whiteAlpha.200",
                             }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
-                                if (sub.url && isBrowserNavigationGesture(e))
+                                if (sub.url && (0, exports.isBrowserNavigationGesture)(e))
                                     return;
                                 e.preventDefault();
                                 if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", 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: "color 0.12s" })) : ((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: "background 0.12s" })), (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 })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", 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: "color 0.12s" })) : ((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: "background 0.12s" })), (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

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

@@ -14,6 +14,7 @@ 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 MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
@@ -31,7 +32,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         if (!isBlocked)
                             handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
                     }
-                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "md", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, flex: "1", color: theme.colors.white, children: title }), (() => {
+                }, 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
@@ -55,7 +56,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     }, px: 2, h: sidebarScale_1.SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                         bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (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 }))) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", 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: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge