pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

package/dist/Components/SelectV2/SelectV2Props.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 /** SelectV2 option shape; adds optional `icon`/`description`/`isDisabled` beyond the plain id/label pair. */
 export type OptionProp = {
     id: string | number;
@@ -7,36 +8,48 @@ export type OptionProp = {
     icon?: ReactNode;
     /** Optional secondary line under the label (e.g. an email under a name); not matched by the search filter. */
     description?: string;
+    /** Row is shown dimmed and clicks/Enter on it are ignored. */
     isDisabled?: boolean;
 };
-/** Trigger size keys; SelectV2's internal `SIZE_MAP` maps each to a height/fontSize/padding set. */
+/** sm/md/lg subset kept for existing importers; the `size` prop takes the full `ControlSize` scale. */
 export type SelectV2Size = "sm" | "md" | "lg";
 type SelectV2CommonProps = {
     options: OptionProp[];
+    /** DOM id of the trigger; the label's `for` and the message ids derive from it. Auto-generated when omitted. */
+    id?: string;
+    /** Submits the selection with a surrounding `<form>` via hidden input(s) — one per value in multi mode. */
+    name?: string;
+    /** Trigger text when nothing is selected. Defaults to "Select Option". */
     placeholder?: string;
     label?: string;
+    /** Marks the field invalid and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Rendered only while `error` is true. */
     errorMessage?: string;
+    /** Hint under the field; hidden while `error` is true. */
     helperText?: string;
     isDisabled?: boolean;
+    /** Shows the value but never opens; exposed as `aria-readonly`. */
+    isReadOnly?: boolean;
+    /** Label asterisk + `aria-required` only; never blocks an empty submit. */
     isRequired?: boolean;
-    size?: SelectV2Size;
+    /** Shared control scale (xs 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    size?: ControlSize;
     /** Shows a type-ahead filter input at the top of the popup. Defaults to true. */
     isSearchable?: boolean;
     /** Width applied to the trigger + popup. Defaults to 100% of the container. */
     width?: string | number;
+    /** Inline style on the wrapping FormControl (label + trigger + message). */
     formControlStyle?: React.CSSProperties;
+    /** Fires when the popup closes, not on DOM blur; stays silent while multi-select keeps it open. */
     onBlur?: () => void;
+    /** Fires when the popup opens, not on DOM focus of the trigger. */
     onFocus?: () => void;
     /** Forwarded to the trigger button — lets call sites keep existing RTL/e2e queries when migrating from `Select`. */
     "data-testid"?: string;
     /** Forwarded to the trigger button — for a labelless select (no `label` prop) that still needs an accessible name. */
     "aria-label"?: string;
-    /**
-     * Full control over an option row's contents (icon + label + badge, avatar + name/email, etc).
-     * Falls back to plain `option.label` text when omitted. Receives `isSelected`/`isActive` so a
-     * custom row can mirror the built-in selected/keyboard-active styling if it re-implements them.
-     */
+    /** Full control over an option row's contents; receives `isSelected`/`isActive` to mirror the built-in states. */
     renderOption?: (option: OptionProp, state: {
         isSelected: boolean;
         isActive: boolean;
@@ -45,27 +58,40 @@ type SelectV2CommonProps = {
     renderValue?: (selected: OptionProp[]) => ReactNode;
     /** Max popup height before the option list scrolls. Defaults to "16rem". */
     maxMenuHeight?: string;
-    /**
-     * Opens the popup immediately on mount instead of waiting for a click — for inline-edit
-     * patterns (a table cell that swaps to a select the instant it becomes editable). Clicking
-     * away still closes it via the normal Popover close-on-blur behavior (which fires `onBlur`).
-     */
+    /** Opens the popup on mount (inline-edit cells); click-away still closes it and fires `onBlur`. */
     defaultOpen?: boolean;
+    /** Shows a loading row under the options and marks the listbox `aria-busy`. */
+    isLoading?: boolean;
+    /** Text of the loading row. Defaults to "Loading...". */
+    loadingText?: string;
+    /** Fires when the list is scrolled to its end and `isLoading` is false — append the next page to `options`. */
+    onLoadMore?: () => void;
+    /** Fires with the filter text on every keystroke, for server-side search; local label filtering still applies. */
+    onSearchChange?: (query: string) => void;
 };
 /** Single-select arm of `SelectV2Props`; `isMulti` false/absent discriminates it from the multi variant. */
+/** @deprecated Use `SelectSingleProps` from `Select`/`SelectProps` (`native={false}`). See MERGE-NOTES-select-deprecation.md. */
 export type SelectV2SingleProps = SelectV2CommonProps & {
     isMulti?: false;
+    /** Selected option `id`; compared as strings, so `1` matches `"1"`. */
     value?: string | number;
+    /** The canonical change callback for every picker in this library. */
     onChange: (selectedOption: OptionProp | undefined) => void;
 };
 /** Multi-select arm of `SelectV2Props`; `isMulti: true` discriminates it and makes `value` an array. */
+/** @deprecated Use `SelectMultiProps` from `Select`/`SelectProps` (`native={false}`). See MERGE-NOTES-select-deprecation.md. */
 export type SelectV2MultiProps = SelectV2CommonProps & {
     isMulti: true;
+    /** Selected option ids; ids with no matching option are dropped from the display. */
     value?: (string | number)[];
+    /** The canonical change callback; receives the full selection. */
     onChange: (selectedOptions: OptionProp[]) => void;
-    /** Show "N selected" once more than this many are chosen, instead of listing every label. Defaults to 2. */
+    /** Feeds the trigger's aria-label summary once chips are collapsed. Defaults to 2. */
     maxLabelsBeforeSummary?: number;
+    /** Chips shown before the rest collapse into a "+N" chip. Defaults to 6. */
+    maxVisibleChips?: number;
 };
 /** Props for `SelectV2`; a discriminated union on `isMulti` between the single and multi variants. */
+/** @deprecated Use `Select` from `pixelize-design-library` with `native={false}`. See MERGE-NOTES-select-deprecation.md for the prop mapping. */
 export type SelectV2Props = SelectV2SingleProps | SelectV2MultiProps;
 export {};

package/dist/Components/SettingRow/SettingRow.d.ts

@@ -0,0 +1,4 @@
+import type { SettingRowProps } from "./SettingRowProps";
+/** One settings-form row: title + description left, one right-aligned control; stacks on mobile. */
+declare const SettingRow: ({ title, description, control, htmlFor, descriptionId, isDisabled }: SettingRowProps) => import("react/jsx-runtime").JSX.Element;
+export default SettingRow;

package/dist/Components/SettingRow/SettingRow.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** One settings-form row: title + description left, one right-aligned control; stacks on mobile. */
+const SettingRow = ({ title, description, control, htmlFor, descriptionId, isDisabled = false }) => {
+    var _a;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const rowId = (0, react_2.useId)().replace(/:/g, "");
+    const titleId = `setting-row-title-${rowId}`;
+    const resolvedDescriptionId = descriptionId !== null && descriptionId !== void 0 ? descriptionId : `setting-row-desc-${rowId}`;
+    const controlProps = (0, react_2.isValidElement)(control) ? control.props : undefined;
+    const isSelfNamed = Boolean((controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-label"]) || (controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-labelledby"]));
+    const namedControl = !htmlFor && (0, react_2.isValidElement)(control) && !isSelfNamed
+        ? (0, react_2.cloneElement)(control, {
+            "aria-labelledby": titleId,
+            "aria-describedby": (_a = controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-describedby"]) !== null && _a !== void 0 ? _a : resolvedDescriptionId,
+        })
+        : control;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, { borderColor: colors.boxborder[200] }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: { base: "1fr", md: "15rem 1fr" }, gap: { base: 2, md: 6 }, py: 4, alignItems: "start", opacity: isDisabled ? 0.5 : 1, "aria-disabled": isDisabled || undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { children: [htmlFor ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "label", htmlFor: htmlFor, display: "block", fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { id: titleId, fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })), (0, jsx_runtime_1.jsx)(react_1.Text, { id: resolvedDescriptionId, mt: 0.5, fontSize: "0.8125rem", color: colors.textMuted, children: description })] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, justify: { base: "flex-start", md: "flex-end" }, children: namedControl })] })] }));
+};
+exports.default = SettingRow;

package/dist/Components/SettingRow/SettingRowProps.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/** Props for one settings row: title/description on the left, one control right-aligned. */
+export interface SettingRowProps {
+    /** Row title — 14px/500/text[800]; becomes a `<label>` when `htmlFor` is set. */
+    title: ReactNode;
+    /** Muted helper text under the title — 13px/textMuted. */
+    description: ReactNode;
+    /** The field/switch/button for this row, right-aligned on desktop. Auto-named via aria-labelledby/aria-describedby unless it already has its own aria-label or htmlFor is set. */
+    control: ReactNode;
+    /** The control's id — makes `title` a `<label htmlFor>` instead of plain text. */
+    htmlFor?: string;
+    /** Id on the description; auto-generated when omitted, and read by the control's aria-describedby. */
+    descriptionId?: string;
+    /** Dims the row to signal it can't be changed right now (e.g. plan-gated). */
+    isDisabled?: boolean;
+}

package/dist/Components/SettingRow/SettingRowProps.js

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

package/dist/Components/SettingRow/SettingsSection.d.ts

@@ -0,0 +1,4 @@
+import type { SettingsSectionProps } from "./SettingsSectionProps";
+/** Titled Card wrapping SettingRows; rows and an optional footer separate with one divider each, never a nested border. */
+declare const SettingsSection: ({ id, title, description, children, footer, action, isDanger }: SettingsSectionProps) => import("react/jsx-runtime").JSX.Element;
+export default SettingsSection;

package/dist/Components/SettingRow/SettingsSection.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const Card_1 = __importDefault(require("../Card/Card"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Titled Card wrapping SettingRows; rows and an optional footer separate with one divider each, never a nested border. */
+const SettingsSection = ({ id, title, description, children, footer, action, isDanger = false }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const titleColor = isDanger ? colors.semanticText.error : colors.header[900];
+    return ((0, jsx_runtime_1.jsxs)(Card_1.default, { id: id, scrollMarginTop: 4, borderColor: isDanger ? colors.semanticText.error : undefined, header: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: titleColor, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "xs", fontWeight: 400, color: colors.textMuted, children: description }))] }), action && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: action })] }), children: [children, footer && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, { borderColor: colors.boxborder[200] }), (0, jsx_runtime_1.jsx)(react_1.Box, { pt: 4, children: footer })] }))] }));
+};
+exports.default = SettingsSection;

package/dist/Components/SettingRow/SettingsSectionProps.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+/** Props for a titled group of SettingRows inside one outline Card. */
+export interface SettingsSectionProps {
+    /** Section title — Card header, md/600. */
+    title: ReactNode;
+    /** Muted helper text under the title. */
+    description?: ReactNode;
+    /** SettingRow elements; each renders its own leading divider. */
+    children: ReactNode;
+    /** Extra content after the rows, separated by a divider (e.g. a save note or link). */
+    footer?: ReactNode;
+    /** Header-right slot, aligned to the title row (e.g. an "Edit" button or a toggle). */
+    action?: ReactNode;
+    /** DOM id on the section, e.g. a scroll target for section nav. */
+    id?: string;
+    /** Red-bordered "danger zone" look for the header and border. */
+    isDanger?: boolean;
+}

package/dist/Components/SettingRow/SettingsSectionProps.js

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

package/dist/Components/SideBar/SecondaryBar.js

@@ -8,10 +8,20 @@ const react_1 = require("react");
 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 menuDisabled_1 = require("./menuDisabled");
 const lucide_react_1 = require("lucide-react");
 const OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const Sidebar_1 = require("../../Constants/Sidebar");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
+const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const softBadge = (colors, colorScheme, surface) => {
+    const tone = (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, colorScheme), surface);
+    return { bg: tone.bg, color: tone.fg };
+};
 const parseBadge = (badge) => {
     var _a, _b, _c;
     return ({
@@ -26,37 +36,37 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": 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
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-label": item.title, "aria-current": isActive ? "page" : undefined, "aria-disabled": (0, menuDisabled_1.menuDisabled)(item) ? true : undefined, textDecoration: "none", py: 2, mb: "2px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", opacity: (0, menuDisabled_1.menuDisabled)(item) ? 0.6 : 1, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", _hover: {
+                        bg: (0, menuDisabled_1.menuDisabled)(item)
                             ? "transparent"
                             : isActive
                                 ? "whiteAlpha.400"
                                 : "whiteAlpha.200",
                     }, onClick: (e) => {
                         e.preventDefault();
-                        if (!item.disabled)
+                        if (!(0, menuDisabled_1.menuDisabled)(item))
                             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.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: item.disabled ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.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 : 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.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: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { badgeVal, colorScheme, radius, variant } = parseBadge(item.badge);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": 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",
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "a", href: (_a = item.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isActive ? "page" : undefined, "aria-disabled": (0, menuDisabled_1.menuDisabled)(item) ? true : undefined, textDecoration: "none", px: 2, py: "7px", mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, overflow: "hidden", cursor: (0, menuDisabled_1.menuDisabled)(item) ? "not-allowed" : "pointer", opacity: (0, menuDisabled_1.menuDisabled)(item) ? 0.6 : 1, bg: isActive ? "whiteAlpha.300" : "transparent", _hover: {
+            bg: (0, menuDisabled_1.menuDisabled)(item) ? "transparent" : isActive ? "whiteAlpha.400" : "whiteAlpha.200",
         }, onClick: (e) => {
             e.preventDefault();
-            if (!item.disabled)
+            if (!(0, menuDisabled_1.menuDisabled)(item))
                 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: "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: 2, 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 : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal }))] }));
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = "0.75rem", itemFontSize = "0.75rem", selected, onItemClick, title, icon, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     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.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) => {
+    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: "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: 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.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", py: 2, px: "6px", children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/Components/SideBar/SideBar.js

@@ -10,7 +10,11 @@ const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const sidebarAccentColors_1 = require("./sidebarAccentColors");
+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 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).
 const Z_SCRIM = 1300;
@@ -28,24 +32,35 @@ 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 viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 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: 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] })] })) }));
+        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: "lg", 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: "lg", 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: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
     }
     const primaryFillRung = (0, filledSurface_1.solidFillRung)(theme.colors.primary, theme.colors.white);
     const primaryFill = theme.colors.primary[primaryFillRung];
-    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: primaryFill, color: (0, filledSurface_1.labelOnFill)(primaryFill, 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 logoNode = logo ? ((0, jsx_runtime_1.jsx)(react_2.Image, { borderRadius: "lg", 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: primaryFill, color: (0, filledSurface_1.labelOnFill)(primaryFill, theme.colors.white, theme.colors.black), 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: "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: "lg", bg: "whiteAlpha.100", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+                    "&::after": {
+                        content: '""',
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        width: "44px",
+                        height: "44px",
+                    },
+                }, 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] })] })) }));
+    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: "lg", 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: "lg", 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: "lg", startColor: theme.colors.sidebar.background[400], endColor: theme.colors.sidebar.background[300] })] })) }));
 };
 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: "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" }))] }));
+    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.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: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -61,7 +76,7 @@ const UserFooter = ({ user, toggle, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     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 })] }) }));
+    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.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: theme.colors.white, 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, ariaLabel, label, accent, children }) => {
@@ -76,7 +91,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     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 }) }));
+    const shell = (children) => ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, 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: theme.colors.sidebar.divider, bg: "whiteAlpha.50", sx: { "& > * + *": { borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider } }, children: children }) }));
     if (overlay) {
         // Pure below-lg overlay (no manual nav-mode switch) → no footer control.
         if (!mobileNav || !onToggleMobileNav)
@@ -89,6 +104,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
 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)();
+    const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     // Below `lg` the sidebar renders as a slide-in overlay above the content; at
     // `lg` and up it is inline (the original behaviour, untouched).
     const belowLg = (_a = (0, react_2.useBreakpointValue)({ base: true, lg: false }, { ssr: false })) !== null && _a !== void 0 ? _a : false;
@@ -106,6 +122,8 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
         onPeekEnd === null || onPeekEnd === void 0 ? void 0 : onPeekEnd();
         onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
     };
+    const closeOverlayRef = (0, react_1.useRef)(closeOverlay);
+    closeOverlayRef.current = closeOverlay;
     // 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.
@@ -143,11 +161,11 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
             return;
         const onKey = (e) => {
             if (e.key === "Escape")
-                closeOverlay();
+                closeOverlayRef.current();
         };
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
-    }, [isOverlayOpen, onMobileClose]);
+    }, [isOverlayOpen]);
     // `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);
@@ -230,7 +248,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: 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
+    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, ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors), zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: "opacity 0.28s ease, visibility 0.28s ease", sx: { [motion_1.REDUCED_MOTION_QUERY]: { transition: "none" } }, 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" }, 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)"
@@ -238,15 +256,12 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                         base: dragging
                             ? "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 && !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
+                        lg: (0, motion_2.transitionFor)(["box-shadow"], "base"),
+                    }, 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: "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: 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" }))] })] }));
+                            : { 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" }))] })] }));
 }

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

@@ -55,8 +55,11 @@ export type MenuProps = {
     icon?: ElementType;
     /** Ignored when subMenu is non-empty — the row becomes a toggle button instead of a link. */
     url: string;
+    /** Blocks the click handler and dims the row; wins over `disabled` when both are set. */
+    isDisabled?: boolean;
+    /** @deprecated Use `isDisabled` — renamed to match every other field. */
     disabled?: boolean;
-    /** Shows a lock icon only — does not block the click handler; pair with `disabled` to prevent it. */
+    /** Shows a lock icon only — does not block the click handler; pair with `isDisabled` to prevent it. */
     locked?: boolean;
     /** Runtime also accepts a bare number/string (legacy shorthand) though the type only declares the object shape. */
     badge?: {
@@ -83,6 +86,10 @@ export type RenderMenuType = {
     toggle: boolean;
     selectedSubMenu?: string | null;
     selectedSecondaryItem?: string | number | null;
+    /** Touch (overlay) presentation — grows row height to a 48px touch target. */
+    overlay?: boolean;
+    /** The scroll container's own id, read back by the auto-scroll-into-view effect. */
+    containerId: string;
 };
 /** Secondary flyout panel props; `defaultCollapsed` only seeds initial state, then the panel self-manages it. */
 export type SecondaryBarProps = {

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

@@ -8,6 +8,8 @@ interface Props {
     selectedSubMenu?: string | null;
     isOpen?: boolean;
     onToggle?: (menu: MenuProps, clickY?: number) => void;
+    /** Overlay (touch) presentation — rows grow to a 48px touch target instead of the 32px desktop row. */
+    overlay?: boolean;
 }
 declare const MenuItemBox: React.FC<Props>;
 export default MenuItemBox;