pixelize-design-library 3.0.0 → 3.1.0

package/dist/Components/NotificationCenter/row/rowMenu.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isDecision = exports.visibleActionsFor = exports.quickActionsFor = exports.rowScope = void 0;
+const lucide_react_1 = require("lucide-react");
+const grouping_1 = require("../core/grouping");
+const rowScope = (item, thread, isThreadOpen) => (thread && !isThreadOpen ? (0, grouping_1.threadEntries)(thread) : [item]);
+exports.rowScope = rowScope;
+const quickActionsFor = (item, scope, shared) => {
+    const { features, labels, actions } = shared;
+    const { entry, state } = item;
+    const ids = scope.map((member) => member.entry.id);
+    const list = [];
+    if (features.markRead && entry.isRead !== undefined) {
+        const unread = scope.some((member) => member.entry.isRead === false);
+        list.push({
+            id: "read",
+            label: unread ? labels.markRead : labels.markUnread,
+            icon: unread ? lucide_react_1.MailOpen : lucide_react_1.Mail,
+            run: () => actions.setRead(ids, unread),
+        });
+    }
+    if (features.archive && state.zone === "activity") {
+        list.push({ id: "archive", label: labels.archive, icon: lucide_react_1.Archive, run: () => actions.archive(ids) });
+    }
+    if (features.restore && state.zone === "archived") {
+        list.push({ id: "restore", label: labels.restore, icon: lucide_react_1.ArchiveRestore, run: () => actions.restore(ids) });
+    }
+    actions.extraActionsFor(entry).forEach((extra) => {
+        list.push({ id: extra.id, label: extra.label, icon: extra.icon, run: () => actions.runExtraAction(entry, extra) });
+    });
+    return list;
+};
+exports.quickActionsFor = quickActionsFor;
+const visibleActionsFor = (entry, features) => { var _a; return ((_a = entry.actions) !== null && _a !== void 0 ? _a : []).filter((action) => action.href !== undefined || features.decide); };
+exports.visibleActionsFor = visibleActionsFor;
+const isDecision = (action) => action.href === undefined;
+exports.isDecision = isDecision;

package/dist/Components/NotificationCenter/row/rowParts.d.ts

@@ -0,0 +1,40 @@
+import type { AvatarSize } from "../../Avatar/AvatarProps";
+import type { NotificationEntry, NotificationLabels, NotificationTitlePart } from "../core/NotificationSourceProps";
+import type { NotificationFormatter } from "../core/NotificationEngineProps";
+import type { ResolvedCategory } from "./category";
+export declare const ROW_PLANE_VAR = "--nc-row-bg";
+interface TitleTextProps {
+    parts: NotificationTitlePart[];
+    isUnread: boolean;
+}
+export declare const TitleText: ({ parts, isUnread }: TitleTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useToneTile: (tone: ResolvedCategory["tone"]) => import("../../../Theme/tokens/builders/statusTone").StatusTone;
+interface RowLeadingProps {
+    entry: NotificationEntry;
+    category: ResolvedCategory;
+    size: AvatarSize;
+}
+export declare const RowLeading: ({ entry, category, size }: RowLeadingProps) => import("react/jsx-runtime").JSX.Element;
+interface RowTimeProps {
+    at: number;
+    now: number;
+    format: NotificationFormatter;
+}
+export declare const RowTime: ({ at, now, format }: RowTimeProps) => import("react/jsx-runtime").JSX.Element;
+interface RowContextProps {
+    entry: NotificationEntry;
+    waitingDays: number | null;
+    labels: NotificationLabels;
+}
+export declare const RowContext: ({ entry, waitingDays, labels }: RowContextProps) => import("react/jsx-runtime").JSX.Element | null;
+interface RowPreviewProps {
+    text: string;
+    isLarge: boolean;
+}
+export declare const RowPreview: ({ text, isLarge }: RowPreviewProps) => import("react/jsx-runtime").JSX.Element;
+interface ChangeChipsProps {
+    change: NonNullable<NotificationEntry["change"]>;
+    labels: NotificationLabels;
+}
+export declare const ChangeChips: ({ change, labels }: ChangeChipsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Components/NotificationCenter/row/rowParts.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeChips = exports.RowPreview = exports.RowContext = exports.RowTime = exports.RowLeading = exports.useToneTile = exports.TitleText = exports.ROW_PLANE_VAR = void 0;
+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 Primitives_1 = require("../../Primitives/Primitives");
+const Avatar_1 = __importDefault(require("../../Avatar/Avatar"));
+const Tag_1 = __importDefault(require("../../Tag/Tag"));
+const VisuallyHidden_1 = __importDefault(require("../../VisuallyHidden/VisuallyHidden"));
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const accentText_1 = require("../../../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../../../Theme/tokens/builders/statusTone");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const planeStep_1 = require("../../../Theme/tokens/builders/planeStep");
+const borderWidths_1 = require("../../../Theme/tokens/primitives/borderWidths");
+const radii_1 = require("../../../Theme/tokens/primitives/radii");
+const typography_1 = require("../../../Theme/tokens/primitives/typography");
+exports.ROW_PLANE_VAR = "--nc-row-bg";
+const TitleText = ({ parts, isUnread }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_2.chakra.span, { color: isUnread ? colors.text[800] : colors.text[700], children: parts.map((part, index) => typeof part === "string" ? ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: part }, index)) : ((0, jsx_runtime_1.jsx)(react_2.chakra.strong, { fontWeight: isUnread ? 600 : 500, color: isUnread ? colors.header[900] : colors.text[800], children: part.b }, index))) }));
+};
+exports.TitleText = TitleText;
+const LEAD_BOX = {
+    "2xs": "1rem",
+    xs: "1.5rem",
+    sm: "2rem",
+    md: "2.5rem",
+    lg: "3rem",
+    xl: "4rem",
+};
+const useToneTile = (tone) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return (0, statusTone_1.resolveStatusTone)((0, tone_1.toneScale)(colors, tone), (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light");
+};
+exports.useToneTile = useToneTile;
+const RowLeading = ({ entry, category, size }) => {
+    const tile = (0, exports.useToneTile)(category.tone);
+    const iconPx = size === "md" || size === "lg" || size === "xl" ? 18 : 16;
+    if (entry.actor) {
+        return ((0, jsx_runtime_1.jsxs)(Primitives_1.Box, { position: "relative", flexShrink: 0, boxSize: LEAD_BOX[size], "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { name: entry.actor.name, src: entry.actor.avatarUrl, size: size }), (0, jsx_runtime_1.jsx)(Primitives_1.Flex, { position: "absolute", right: "-0.375rem", bottom: "-0.375rem", boxSize: "1.25rem", align: "center", justify: "center", borderRadius: "full", bg: tile.bg, color: tile.fg, border: `${borderWidths_1.BORDER_WIDTHS.thick} solid var(${exports.ROW_PLANE_VAR})`, children: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: category.icon, boxSize: "0.625rem", strokeWidth: 2.5 }) })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Flex, { flexShrink: 0, boxSize: LEAD_BOX[size], align: "center", justify: "center", borderRadius: radii_1.RADIUS_ROLE.media, bg: tile.bg, color: tile.fg, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: category.icon, boxSize: `${iconPx / 16}rem` }) }));
+};
+exports.RowLeading = RowLeading;
+const RowTime = ({ at, now, format }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.chakra.time, { dateTime: format.iso(at), title: format.absolute(at, now), flexShrink: 0, fontSize: "xs", color: colors.textMuted, whiteSpace: "nowrap", sx: typography_1.NUMERIC_TEXT, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: format.shortAge(at, now) }), (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: format.longAge(at, now) })] }));
+};
+exports.RowTime = RowTime;
+const RowContext = ({ entry, waitingDays, labels }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    if (waitingDays === null && !entry.blocked && !entry.context)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { wrap: "wrap", align: "center", columnGap: 2, rowGap: 1, mt: 1, fontSize: "xs", lineHeight: "1.5", color: colors.textMuted, children: [waitingDays !== null && (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", tone: "warning", leadingIcon: lucide_react_1.Hourglass, label: labels.waiting(waitingDays) }), entry.blocked && (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", tone: "neutral", leadingIcon: lucide_react_1.Lock, label: labels.noAccess }), entry.context && (0, jsx_runtime_1.jsx)(react_2.chakra.span, { minW: 0, children: entry.context })] }));
+};
+exports.RowContext = RowContext;
+const RowPreview = ({ text, isLarge }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(Primitives_1.Text, { mt: 1.5, pl: 2.5, borderLeft: `${borderWidths_1.BORDER_WIDTHS.thick} solid ${(0, planeStep_1.ruleOn)(colors, colors.surfaceRaised)}`, fontSize: isLarge ? "sm" : "xs-plus", lineHeight: "1.5", color: colors.text[700], noOfLines: 2, children: text }));
+};
+exports.RowPreview = RowPreview;
+const ChangeChips = ({ change, labels }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(Primitives_1.Flex, { align: "center", wrap: "wrap", gap: 1.5, color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", tone: "neutral", label: change.from }), (0, jsx_runtime_1.jsx)(Primitives_1.Icon, { as: lucide_react_1.ChevronRight, boxSize: "0.75rem", "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(VisuallyHidden_1.default, { children: labels.changedTo }), (0, jsx_runtime_1.jsx)(Tag_1.default, { size: "xs", colorScheme: "primary", label: change.to })] }));
+};
+exports.ChangeChips = ChangeChips;

package/dist/Components/NotificationCenter/row/rowStyles.d.ts

@@ -0,0 +1,11 @@
+import type { SystemStyleObject } from "@chakra-ui/react";
+import type { NotificationRowVariant } from "./NotificationRowProps";
+import type { NotificationEntry } from "../core/NotificationSourceProps";
+export type RowButtonSize = "xs" | "sm" | "md";
+export declare const ROW_BUTTON_SIZE: Readonly<Record<NotificationRowVariant, RowButtonSize>>;
+export declare const iconSizeFor: (size: RowButtonSize) => number;
+export declare const WAITING_AFTER_DAYS = 3;
+export declare const TOUCH_TARGET_SX: SystemStyleObject;
+export declare const CHECKBOX_TOUCH_TARGET_SX: SystemStyleObject;
+export declare const touchTargetFor: (size: RowButtonSize) => SystemStyleObject | undefined;
+export declare const testIdFor: (entry: NotificationEntry, suffix: string) => string | undefined;

package/dist/Components/NotificationCenter/row/rowStyles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testIdFor = exports.touchTargetFor = exports.CHECKBOX_TOUCH_TARGET_SX = exports.TOUCH_TARGET_SX = exports.WAITING_AFTER_DAYS = exports.iconSizeFor = exports.ROW_BUTTON_SIZE = void 0;
+const controlSizes_1 = require("../../../Theme/tokens/primitives/controlSizes");
+exports.ROW_BUTTON_SIZE = {
+    panel: "xs",
+    inbox: "sm",
+    phone: "md",
+};
+const iconSizeFor = (size) => controlSizes_1.BUTTON_SIZES[size].iconSize;
+exports.iconSizeFor = iconSizeFor;
+exports.WAITING_AFTER_DAYS = 3;
+exports.TOUCH_TARGET_SX = {
+    "&::before": { content: '""', position: "absolute", inset: "-0.125rem" },
+};
+exports.CHECKBOX_TOUCH_TARGET_SX = {
+    "@media (pointer: coarse)": {
+        "& label": { position: "relative" },
+        "& label::before": { content: '""', position: "absolute", inset: "-0.875rem" },
+    },
+};
+const touchTargetFor = (size) => size === "md" ? exports.TOUCH_TARGET_SX : undefined;
+exports.touchTargetFor = touchTargetFor;
+const testIdFor = (entry, suffix) => entry.testId ? `${entry.testId}-${suffix}` : undefined;
+exports.testIdFor = testIdFor;

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

@@ -1,5 +1,8 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
 import type { SegmentedControlVariant } from "./SegmentedControlProps";
+declare const TRACK_STEPS: readonly [600, 500, 400, 300, 200, 100];
+type TrackStep = (typeof TRACK_STEPS)[number] | 50;
+export declare const segmentedTrackStep: (colors: PaletteProps) => TrackStep;
 /** The surface a segment's label really sits on. */
 export declare const segmentedTrackSurface: (variant: SegmentedControlVariant, colors: PaletteProps, surface?: string) => string;
 /** The surface the selected label sits on: the default variant lifts it onto its own plate. */
@@ -9,3 +12,4 @@ export declare const segmentedRestInk: (colors: PaletteProps, trackSurface: stri
 /** 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;
+export {};

package/dist/Components/SegmentedControl/segmentedInk.js

@@ -1,8 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.segmentedPlateEdge = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = void 0;
+exports.segmentedPlateEdge = exports.segmentedRestInk = exports.segmentedSelectedSurface = exports.segmentedTrackSurface = exports.segmentedTrackStep = void 0;
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
+const TRACK_STEPS = [600, 500, 400, 300, 200, 100];
+// NOTE: light tracks never outweigh the outline; Zinc's full ramp makes [600] mid-grey.
+const segmentedTrackStep = (colors) => {
+    if ((0, accentText_1.isDarkCanvas)(colors.backgroundColor.main))
+        return 600;
+    const outline = (0, color_1.relativeLuminance)(colors.boxborder[500]);
+    for (const step of TRACK_STEPS) {
+        if ((0, color_1.relativeLuminance)(colors.background[step]) >= outline)
+            return step;
+    }
+    return 50;
+};
+exports.segmentedTrackStep = segmentedTrackStep;
 /** The surface a segment's label really sits on. */
 const segmentedTrackSurface = (variant, colors, surface) => {
     if (variant === "underlineSlide")
@@ -11,7 +25,7 @@ const segmentedTrackSurface = (variant, colors, surface) => {
     // parent, so its ink was derived from a canvas the control was not actually on.
     if (variant === "brandSlide")
         return colors.surfaceRaised;
-    return colors.background[600];
+    return colors.background[(0, exports.segmentedTrackStep)(colors)];
 };
 exports.segmentedTrackSurface = segmentedTrackSurface;
 /** The surface the selected label sits on: the default variant lifts it onto its own plate. */

package/dist/Components/SideBar/SecondaryBar.js

@@ -73,13 +73,13 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     return item.locked && item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 /** Secondary flyout panel beside the main rail, listing the active menu's `secondaryItems`; collapses to icons. */
-const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
+const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", shrinkable = false, headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     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: sidebarMotion_1.SIDEBAR_BG_TRANSITION, 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) => {
+    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, minW: shrinkable ? collapsedWidth : undefined, 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)(react_2.Flex, { align: "center", gap: "7px", flex: "1", minW: 0, overflow: "hidden", 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: sidebarMotion_1.SIDEBAR_BG_TRANSITION, 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.js

@@ -39,6 +39,13 @@ const inlineTransitions = (collapse) => {
     };
 };
 const OVERLAY_WIDTH = "14.7rem";
+const OVERLAY_MAX_WIDTH = "88vw";
+const PANEL_BORDER = "1px";
+const SECONDARY_STRIP_WIDTH = "3.5rem";
+const SECONDARY_OPEN_WIDTH = "10rem";
+const PRIMARY_MAX_WITH_SECONDARY = `calc(${OVERLAY_MAX_WIDTH} - ${PANEL_BORDER} - ${SECONDARY_STRIP_WIDTH})`;
+// NOTE: below this the primary (12.5rem) and secondary (8rem) label floors overflow 88vw.
+const NARROW_DRAWER_QUERY = "(max-width: 23.3em)";
 const SCRIM_TRANSITION = (0, motion_2.transitionFor)(["opacity", "visibility"], "base");
 const OVERLAY_SLIDE = (0, motion_2.transitionFor)(["transform"], "enter", "out");
 const OVERLAY_WIDTH_TRANSITION = (0, motion_2.transitionFor)(["width"], "enter", "out");
@@ -52,6 +59,7 @@ const PinnedSection_1 = __importDefault(require("./components/PinnedSection"));
 const sidebarScale_1 = require("./sidebarScale");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 const sharedResizeObserver_1 = require("../../Hooks/sharedResizeObserver");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
@@ -82,10 +90,10 @@ 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: "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 AddNewButton = ({ toggle, onClick }) => {
     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: sidebarMotion_1.SIDEBAR_BG_TRANSITION, 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: 500, 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: "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, 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: 500, children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -97,13 +105,13 @@ const deriveInitials = (user) => {
         return parts[0].slice(0, 2).toUpperCase();
     return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
 };
-const UserFooter = ({ user, toggle, overlay }) => {
+const UserFooter = ({ user, toggle }) => {
     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", 
         // 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: sidebarMotion_1.SIDEBAR_BG_TRANSITION, 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 })] }) }));
+    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: "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, 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 }) => {
@@ -142,6 +150,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
     // In overlay mode the panel is always fully expanded — the mini-rail/collapse
     // is a desktop-only space affordance — so children render as if `toggle=false`.
     const effToggle = overlay ? false : toggle;
+    const narrowViewport = (0, useMatchMedia_1.useMatchMedia)(NARROW_DRAWER_QUERY);
     // A peeked overlay was never pinned, so leaving the panel must close it; a clicked-open
     // one must not, or the drawer would vanish the moment the pointer moved away.
     const overlayPeeking = overlay && peekOpen && !mobileOpen;
@@ -174,6 +183,7 @@ 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 hasSecondary = secondaryItems.length > 0;
     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.
@@ -339,7 +349,7 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
             onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
     };
     const baseTransform = 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, ...(0, overlay_styles_1.overlayScrimStyles)(theme.colors), zIndex: Z_SCRIM, opacity: isOverlayOpen ? 1 : 0, visibility: isOverlayOpen ? "visible" : "hidden", transition: SCRIM_TRANSITION, 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
+    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: SCRIM_TRANSITION, 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 ? OVERLAY_MAX_WIDTH : { base: OVERLAY_MAX_WIDTH, lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
                     ? dragging
                         ? "none"
                         : OVERLAY_SLIDE
@@ -348,13 +358,13 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                             ? "none"
                             : OVERLAY_SLIDE,
                         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: {
+                    }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: `${PANEL_BORDER} 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: mobileNav
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, maxW: overlay && hasSecondary ? PRIMARY_MAX_WITH_SECONDARY : undefined, transition: mobileNav
                             ? OVERLAY_WIDTH_TRANSITION
-                            : { base: OVERLAY_WIDTH_TRANSITION, 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" }))] })] }));
+                            : { base: OVERLAY_WIDTH_TRANSITION, 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, 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 }) })), (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 }), (0, jsx_runtime_1.jsx)(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), hasSecondary && ((0, jsx_runtime_1.jsx)(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: effToggle || narrowViewport, collapsedWidth: SECONDARY_STRIP_WIDTH, expandedWidth: SECONDARY_OPEN_WIDTH, shrinkable: overlay, 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

@@ -128,7 +128,7 @@ export type MenuProps = {
     };
     /** Nested rows shown inline when this row is expanded; non-empty turns the row into a toggle. */
     subMenu?: MenuProps[];
-    /** Non-empty on the active menu auto-collapses the main rail and renders a SecondaryBar, regardless of the `toggle` prop. */
+    /** Non-empty on the active menu auto-collapses the main rail and renders a SecondaryBar, regardless of the `toggle` prop. On drawer viewports up to 23.3em (about 373px) it starts as the icon strip. */
     secondaryItems?: MenuProps[];
     /** First item with a new value renders a section label plus divider; items must be pre-sorted by group. */
     group?: string;
@@ -147,7 +147,7 @@ export type RenderMenuType = {
     selectedSubMenu?: string | null;
     /** Id or title of the highlighted SecondaryBar item. */
     selectedSecondaryItem?: string | number | null;
-    /** Touch (overlay) presentation — grows row height to a 48px touch target. */
+    /** @deprecated Dead — the drawer uses the docked row metrics; nothing reads it. */
     overlay?: boolean;
     /** The scroll container's own id, read back by the auto-scroll-into-view effect. */
     containerId: string;
@@ -162,6 +162,8 @@ export type SecondaryBarProps = {
     collapsedWidth?: string | number;
     /** Defaults to "10rem". */
     expandedWidth?: string | number;
+    /** Lets the panel narrow down to `collapsedWidth` inside a width-capped parent such as the mobile drawer, instead of overflowing it. */
+    shrinkable?: boolean;
     /** Drill-down title size. Defaults to the shared sidebar row size (13px). */
     headerFontSize?: string;
     /** Row label size. Defaults to the shared sidebar row size (13px). */

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

@@ -8,8 +8,6 @@ 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;
 }
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —

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

@@ -65,7 +65,7 @@ const SUBMENU_REVEAL_TRANSITION = (0, motion_1.transitionFor)(["opacity", "trans
  */
 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, }) => {
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
     var _a, _b, _c, _d, _e;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
@@ -77,7 +77,6 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const isBlocked = (0, menuDisabled_1.menuDisabled)(menu) || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const submenuPanelId = `submenu-${reactId}`;
-    const rowHeight = overlay ? sidebarScale_1.SIDEBAR_ROW.overlayHeight : sidebarScale_1.SIDEBAR_ROW.height;
     // A submenu parent only expands, so it is a button; every other row navigates.
     // Cast: Chakra narrows `as` unions to their *shared* props, which drops `href`.
     const rowAs = (hasSubMenu ? "button" : "a");
@@ -115,7 +114,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         textAlign: "left",
         textDecoration: "none",
         w: "100%",
-        h: rowHeight,
+        h: sidebarScale_1.SIDEBAR_ROW.height,
         borderRadius: "lg",
         px: "10px",
         fontWeight: 500,

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

@@ -41,7 +41,7 @@ const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const MenuItemBox_1 = __importDefault(require("./MenuItemBox"));
-const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, overlay, containerId, }) => {
+const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, containerId, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [openMenuId, setOpenMenuId] = (0, react_1.useState)(null);
     const [lastClickY, setLastClickY] = (0, react_1.useState)(null);
@@ -148,7 +148,7 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
                 lastGroup = menu.group;
                 groupCount += 1;
             }
-            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: overlay ? "3px" : "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle, overlay: overlay })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
         }) }));
 };
 exports.default = (0, react_1.memo)(MenuItems);

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

@@ -53,7 +53,6 @@ const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = ex
     const text = { ...DEFAULT_LABELS, ...labels };
     const headingId = `pinned-${(0, sidebarId_1.sanitizeId)((0, react_1.useId)())}`;
     const cap = Math.max(1, limit);
-    const rowHeight = overlay ? sidebarScale_1.SIDEBAR_ROW.overlayHeight : sidebarScale_1.SIDEBAR_ROW.height;
     const activeIndex = activeId == null ? -1 : items.findIndex((i) => String(i.id) === String(activeId));
     const [showAll, setShowAll] = (0, react_1.useState)(activeIndex >= cap);
     (0, react_1.useEffect)(() => {
@@ -78,7 +77,7 @@ const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = ex
     };
     const renderRow = (item) => {
         const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
-        const anchor = ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: rowHeight, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: 500, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: (e) => {
+        const anchor = ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: sidebarScale_1.SIDEBAR_ROW.height, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: 500, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: (e) => {
                 if (item.url && (0, MenuItemBox_1.isBrowserNavigationGesture)(e))
                     return;
                 e.preventDefault();
@@ -92,10 +91,10 @@ const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = ex
     const disclosureLabel = showAll
         ? text.showLess
         : text.showMore.replace("{count}", String(hiddenCount));
-    const disclosureButton = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: rowHeight, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: 500, _hover: {
+    const disclosureButton = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: sidebarScale_1.SIDEBAR_ROW.height, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: 500, _hover: {
             backgroundColor: LADDER.hover,
             color: theme.colors.white,
         }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: showAll ? lucide_react_1.ChevronUp : lucide_react_1.ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && (0, jsx_runtime_1.jsx)("span", { children: disclosureLabel })] }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", children: toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: headingId, as: "h2", px: "10px", pt: "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", children: toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: "8px", mb: "5px" })] }));
 };
 exports.default = PinnedSection;

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

@@ -1,8 +1,6 @@
 /** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
 export declare const SIDEBAR_ROW: {
     readonly height: "32px";
-    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
-    readonly overlayHeight: "44px";
     readonly subHeight: "28px";
     readonly fontSize: string;
     readonly iconSize: "1rem";

package/dist/Components/SideBar/sidebarScale.js

@@ -5,8 +5,6 @@ const typography_1 = require("../../Theme/tokens/primitives/typography");
 /** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
 exports.SIDEBAR_ROW = {
     height: "32px",
-    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
-    overlayHeight: "44px",
     subHeight: "28px",
     fontSize: typography_1.fontSizes["xs-plus"],
     iconSize: "1rem",

package/dist/Components/Switch/Switch.d.ts

@@ -1,3 +1,3 @@
 import { SwitchProps } from "./SwitchProps";
 /** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
-export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, size, surface, "aria-label": ariaLabel, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -8,12 +8,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const SegmentedControl_1 = __importDefault(require("../SegmentedControl/SegmentedControl"));
 /** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
-function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }) {
+function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, size = "sm", surface, "aria-label": ariaLabel, }) {
     const options = [
         { value: "left", label: leftText, icon: leftIcon },
         { value: "right", label: rightText, icon: rightIcon },
     ];
     // Unlabelled segments have nothing to size to, so the 12.5rem floor only overflowed its cell.
     const hasLabels = Boolean(leftText || rightText);
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.default, { options: options, value: switchActive, onChange: onSwitchToggle, size: size, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }

package/dist/Components/Switch/SwitchProps.d.ts

@@ -1,3 +1,4 @@
+import type { SegmentedControlSize } from "../SegmentedControl/SegmentedControlProps";
 /** @deprecated Use `SegmentedControl` — this two-option pill is kept only for existing call sites. */
 export type SwitchProps = {
     /** Label of the left segment; when both labels are empty the control drops its 12.5rem minimum width. */
@@ -12,6 +13,8 @@ export type SwitchProps = {
     onSwitchToggle: (value: "left" | "right") => void;
     /** Controlled selected side; the pill only moves when this changes. */
     switchActive: "left" | "right";
+    /** Whole-track height on the button control scale (sm 32 · md 40 · lg 48px, as Button); defaults to "sm". Pass "md" beside a "md" field. */
+    size?: SegmentedControlSize;
     /** Background this sits on. Optional: the track is opaque on any backdrop; pass it only to aim the plate's hairline edge at the real backdrop. */
     surface?: string;
     /** Names the radiogroup; pass it, as there is no visible group label. */