pixelize-design-library 2.4.2-beta.57 → 2.4.2-beta.59

package/dist/esm/Components/SideBar/SecondaryBar.js

@@ -4,6 +4,7 @@ import { Box, Flex, Icon, VStack, Badge, Popover, PopoverTrigger, PopoverContent
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { getSidebarActiveAccent } from "./sidebarAccentColors.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { sidebarFocusStyles } from "./sidebarFocus.js";
 import { menuDisabled } from "./menuDisabled.js";
 import { ChevronLeft, ChevronRight, LockKeyhole } from "lucide-react";
 import OverflowTooltipText from "./components/OverflowTooltipText.js";
@@ -46,7 +47,7 @@ const CollapsedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
                         e.preventDefault();
                         if (!blocked)
                             onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: _jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: 1500, color: theme.colors.white, border: 'none', children: _jsx(PopoverBody, { p: 3, children: _jsxs(Flex, { align: "center", gap: 2, justify: "space-between", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [_jsx(Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: "medium", as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -60,7 +61,7 @@ const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
             e.preventDefault();
             if (!blocked)
                 onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
-        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [_jsx(Icon, { as: item.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && (_jsx(Badge, { ...softBadge(theme.colors, colorScheme, sidebarRowPeak(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
     return item.locked && item.lockedReason ? (_jsx(ToolTip, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = SIDEBAR_ROW.fontSize, itemFontSize = SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
@@ -69,7 +70,7 @@ const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3
     const scrollContainerId = sanitizeId(useId());
     const [collapsed, setCollapsed] = useState(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: items.map((item) => {
+    return (_jsx(Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: transitionFor(["width"], "base"), pos: "sticky", top: 0, sx: fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: _jsxs(VStack, { align: "stretch", spacing: 0, h: "100%", children: [_jsxs(Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && (_jsxs(_Fragment, { children: [icon && (_jsx(Icon, { as: icon, fontSize: SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), _jsx(Box, { flex: "1", minW: 0, children: _jsx(OverflowTooltipText, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), _jsx(Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", sx: sidebarFocusStyles(theme.colors), children: collapsed ? (_jsx(ToolTip, { label: title !== null && title !== void 0 ? title : "", placement: "right", children: _jsx(ChevronRight, { size: 13, color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(ChevronLeft, { size: 13, color: theme.colors.sidebar.mutedIcon })) })] }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: items.map((item) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/esm/Components/SideBar/SideBar.js

@@ -7,7 +7,8 @@ import { sanitizeId } from "./sidebarId.js";
 import { cssForScrollBar, HEADER_HEIGHT } from "../../Constants/Sidebar.js";
 import { overlayScrimStyles } from "../../Theme/chakra/overlay.styles.js";
 import { REDUCED_MOTION_QUERY } from "../../Theme/chakra/motion.js";
-import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { sidebarFocusStyles } from "./sidebarFocus.js";
+import { MOTION_EASE, MOTION_MS } from "../../Theme/tokens/primitives/motion.js";
 import { ArrowLeftToLine, ArrowRightToLine, ChevronLeft, Maximize2, MoreVertical, PanelLeft, Plus, X } from "lucide-react";
 // Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
 const Z_SCRIM = 1300;
@@ -18,6 +19,18 @@ const Z_PANEL = 1400;
 const RAIL_WIDTH = "4.688rem";
 const PANEL_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
 const EXPANDED_WIDTH = "13rem";
+const COLLAPSE_MS = { ...MOTION_MS, slow: 260 };
+const NO_ACTIVE_MENU = "\u0000pinned-active";
+const inlineTransitions = (collapse) => {
+    var _a;
+    if (collapse === "none")
+        return { width: "none", shadow: "none" };
+    const ms = COLLAPSE_MS[(_a = collapse.speed) !== null && _a !== void 0 ? _a : "slow"];
+    return {
+        width: `width ${ms}ms ${PANEL_EASE}`,
+        shadow: collapse.animateShadow === false ? "none" : `box-shadow ${ms}ms ${MOTION_EASE}`,
+    };
+};
 const OVERLAY_WIDTH = "14.7rem";
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 import MenuItems from "./components/MenuItems.js";
@@ -25,6 +38,7 @@ import DefaultLogo from "../../Assets/defaultLogo.js";
 import OverflowTooltipText from "./components/OverflowTooltipText.js";
 import SecondaryBar from "./SecondaryBar.js";
 import OtherApps from "./components/OtherApps.js";
+import PinnedSection from "./components/PinnedSection.js";
 import { SIDEBAR_CHROME, SIDEBAR_ROW } from "./sidebarScale.js";
 import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
@@ -41,6 +55,7 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
         // some brands (zinc), making the tile disappear. See THEME-CONTRACT.md sidebar rules.
         bg: theme.colors.sidebar.activeBg, color: activeAccent.label, borderRadius: "lg", boxSize: "1.75rem", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: _jsx(DefaultLogo, {}) }));
     return (_jsxs(Flex, { h: 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 && (_jsxs(Box, { flex: "1", minW: 0, children: [_jsx(OverflowTooltipText, { placement: "right", fontWeight: 600, fontSize: SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && (_jsx(Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+                    ...sidebarFocusStyles(theme.colors),
                     "&::after": {
                         content: '""',
                         position: "absolute",
@@ -59,7 +74,7 @@ const SkeletonMenuRow = ({ toggle }) => {
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: onClick, children: [_jsx(Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: _jsx(Plus, { size: 16, color: activeAccent.icon }) }), !toggle && (_jsx(Text, { fontSize: SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
+    return (_jsxs(Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), onClick: onClick, children: [_jsx(Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: _jsx(Plus, { size: 16, color: activeAccent.icon }) }), !toggle && (_jsx(Text, { fontSize: SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: "medium", children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -77,13 +92,13 @@ const UserFooter = ({ user, toggle, overlay }) => {
     const avatar = user.avatarUrl ? (_jsx(Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : (_jsx(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: SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: _jsxs(Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", children: [avatar, !toggle && (_jsxs(Box, { flex: "1", minW: 0, textAlign: "left", children: [_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && _jsx(MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
+    return (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: _jsxs(Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [avatar, !toggle && (_jsxs(Box, { flex: "1", minW: 0, textAlign: "left", children: [_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, fontWeight: 500, color: theme.colors.white, isTruncated: true, children: user.name }), user.role && (_jsx(Text, { fontSize: SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, isTruncated: true, children: user.role }))] })), !toggle && _jsx(MoreVertical, { size: 14, color: theme.colors.sidebar.mutedIcon })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
 const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {
     const theme = useCustomTheme();
     const activeAccent = getSidebarActiveAccent(theme.colors);
-    return (_jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", children: [children, label && (_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
+    return (_jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", sx: sidebarFocusStyles(theme.colors), children: [children, label && (_jsx(Text, { fontSize: SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: "medium", children: label }))] }));
 };
 // Collapse (mini-rail) sits next to the Hide/Show navbar-mode toggle. In the
 // desktop mobile-nav overlay only "Show" (return to the docked sidebar) is shown;
@@ -102,7 +117,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
     return shell(_jsxs(_Fragment, { children: [_jsx(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? (_jsx(ArrowRightToLine, { size: 14, color: iconColor })) : (_jsx(ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && (_jsx(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: _jsx(Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
-export default 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, }) {
+export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition = { speed: "slow" }, autoCollapse = true, }) {
     var _a, _b;
     const theme = useCustomTheme();
     const scrollContainerId = sanitizeId(useId());
@@ -142,20 +157,24 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
     const activeTop = menus.find((m) => String(m.title) === String(activeMenu)) ||
         menus.find((m) => String(m.id) === String(activeMenu));
     const secondaryItems = (_b = activeTop === null || activeTop === void 0 ? void 0 : activeTop.secondaryItems) !== null && _b !== void 0 ? _b : [];
+    const inline = inlineTransitions(collapseTransition);
+    const pinnedActive = activePinnedId != null && !!(pinnedItems === null || pinnedItems === void 0 ? void 0 : pinnedItems.some((p) => String(p.id) === String(activePinnedId)));
     // Sync toggle with external `open` prop.
     // `open=false` → collapsed (toggle=true); `open=true` → expanded (toggle=false).
     useEffect(() => {
+        if (!autoCollapse)
+            return;
         const shouldBeCollapsed = !open;
         if (shouldBeCollapsed !== toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [open]);
+    }, [open, autoCollapse]);
     // Auto-collapse the main sidebar whenever a secondary panel is active.
     useEffect(() => {
-        if (secondaryItems.length > 0 && !toggleRef.current) {
+        if (autoCollapse && secondaryItems.length > 0 && !toggleRef.current) {
             changeToggleRef.current();
         }
-    }, [secondaryItems.length]);
+    }, [secondaryItems.length, autoCollapse]);
     // Esc closes the overlay.
     useEffect(() => {
         if (!isOverlayOpen)
@@ -257,12 +276,14 @@ export default function Sidebar({ menus, activeMenu, handleMenuClick, handleSeco
                         base: dragging
                             ? "none"
                             : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
-                        lg: transitionFor(["box-shadow"], "base"),
+                        lg: inline.shadow,
                     }, borderRadius: "none", boxShadow: mobileNav ? theme.shadows["2xl"] : { base: theme.shadows["2xl"], lg: theme.shadows.lg }, display: "flex", background: theme.colors.sidebar.background[500], borderRight: "1px solid", borderColor: theme.colors.sidebar.divider, role: overlay ? "dialog" : undefined, "aria-modal": overlay ? true : undefined, "aria-label": overlay ? "Main navigation" : undefined, ...(overlay && !isOverlayOpen ? { inert: "" } : {}), sx: {
                     ...fullViewportHeight,
                     touchAction: overlay ? "pan-y" : "auto",
                     [REDUCED_MOTION_QUERY]: { "&, & *": { transition: "none", animation: "none" } },
                 }, onMouseLeave: overlayPeeking ? onPeekEnd : undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, children: [_jsx(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: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => (_jsx(SkeletonMenuRow, { toggle: effToggle }, i)))) : (_jsx(MenuItems, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })) }), _jsxs(Box, { flexShrink: 0, children: [!isDisableAddNew && (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: _jsx(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), _jsx(OtherApps, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && _jsx(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), _jsx(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && (_jsx(SecondaryBar, { 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 && (_jsx(Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
+                            : { base: OVERLAY_WIDTH, lg: effToggle ? RAIL_WIDTH : EXPANDED_WIDTH }, transition: mobileNav
+                            ? `width 0.26s ${PANEL_EASE}`
+                            : { base: `width 0.26s ${PANEL_EASE}`, lg: inline.width }, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: _jsxs(Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [_jsx(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), _jsx(Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: cssForScrollBar(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => (_jsx(SkeletonMenuRow, { toggle: effToggle }, i)))) : (_jsxs(_Fragment, { children: [pinnedItems && pinnedItems.length > 0 && (_jsx(PinnedSection, { items: pinnedItems, label: pinnedLabel, limit: pinnedLimit, toggle: effToggle, overlay: overlay, activeId: activePinnedId, labels: pinnedLabels, onItemClick: handleMenuClickInternal, onUnpin: onUnpin })), _jsx(MenuItems, { activeMenu: pinnedActive ? NO_ACTIVE_MENU : activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })] })) }), _jsxs(Box, { flexShrink: 0, children: [!isDisableAddNew && (_jsx(Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: _jsx(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), _jsx(OtherApps, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && _jsx(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), _jsx(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && (_jsx(SecondaryBar, { 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 && (_jsx(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/esm/Components/SideBar/components/MenuItemBox.js

@@ -12,13 +12,14 @@ import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
 import { sanitizeId } from "../sidebarId.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
 /**
  * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
  * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
  * routed through the in-app handler.
  */
-const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+export const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
 const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, overlay = false, }) => {
     var _a, _b, _c, _d, _e;
     const theme = useCustomTheme();
@@ -86,6 +87,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         cursor: isBlocked ? "not-allowed" : "pointer",
         opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
+        sx: sidebarFocusStyles(theme.colors),
     };
     const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
                     // open={isOpen}
@@ -138,7 +140,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                 e.preventDefault();
                                 if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
-                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge

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

@@ -9,6 +9,7 @@ import { sidebarRowPeak } from "../../../Theme/tokens/builders/sidebarAccent.js"
 import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
 import TruncatedTextWithTooltip from "./TextTruncation.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
 import { SIDEBAR_ROW } from "../sidebarScale.js";
 const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
@@ -26,7 +27,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                         if (!isBlocked)
                             handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
                     }
-                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, children: [_jsx(Icon, { as: icon, fontSize: "md", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon }), _jsx(TruncatedTextWithTooltip, { fontWeight: 600, fontSize: SIDEBAR_ROW.fontSize, flex: "1", color: theme.colors.white, children: title }), (() => {
+                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, sx: hasSubMenu ? undefined : sidebarFocusStyles(theme.colors, theme.colors.sidebar.elevated), children: [_jsx(Icon, { as: icon, fontSize: "md", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon }), _jsx(TruncatedTextWithTooltip, { fontWeight: 600, fontSize: SIDEBAR_ROW.fontSize, flex: "1", color: theme.colors.white, children: title }), (() => {
                         var _a, _b, _c, _d;
                         const cfg = typeof badge === "object" && badge !== null
                             ? badge
@@ -50,7 +51,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     }, px: 2, h: SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                         bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors, theme.colors.sidebar.elevated), children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? (_jsx(ToolTip, { label: sub.lockedReason, placement: "top", children: _jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : (_jsx(Icon, { as: LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

package/dist/esm/Components/SideBar/components/OtherApps.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Flex, Text, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
 const OtherApps = ({ toggle, otherApps }) => {
     const theme = useCustomTheme();
     if (!otherApps || otherApps.length === 0)
@@ -10,7 +11,7 @@ const OtherApps = ({ toggle, otherApps }) => {
         return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", color: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
     };
     // Grid cell: icon on top, truncated label below (label hidden when collapsed).
-    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && (_jsx(Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from "react";
+import { Badge, Box, Flex, Icon } from "@chakra-ui/react";
+import { ChevronDown, ChevronUp, PinOff } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { sidebarFocusStyles } from "../sidebarFocus.js";
+import { resolveSoftTone } from "../../../Theme/tokens/builders/tone.js";
+import { sidebarRowPeak } from "../../../Theme/tokens/builders/sidebarAccent.js";
+import { scaleFor } from "../../../Theme/chakra/paletteFromTheme.js";
+import { getSidebarActiveAccent } from "../sidebarAccentColors.js";
+import { sanitizeId } from "../sidebarId.js";
+import { SIDEBAR_ROW } from "../sidebarScale.js";
+import ToolTip from "../../ToolTip/ToolTip.js";
+import TruncatedTextWithTooltip from "./TextTruncation.js";
+import { isBrowserNavigationGesture } from "./MenuItemBox.js";
+export const DEFAULT_PINNED_LABEL = "Pinned";
+export const DEFAULT_PINNED_LIMIT = 5;
+const DEFAULT_LABELS = {
+    showMore: "Show {count} more",
+    showLess: "Show less",
+    unpin: "Unpin {title}",
+};
+const UNPIN_SIZE = "24px";
+const LADDER = { hover: "whiteAlpha.200", active: "whiteAlpha.300", activeHover: "whiteAlpha.400" };
+const VISUALLY_HIDDEN = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+const readBadge = (badge) => {
+    var _a;
+    const cfg = typeof badge === "object" && badge !== null ? badge : null;
+    const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    return { cfg, value };
+};
+const PinnedSection = ({ items, label = DEFAULT_PINNED_LABEL, limit = DEFAULT_PINNED_LIMIT, toggle, overlay, activeId, labels, onItemClick, onUnpin, }) => {
+    const theme = useCustomTheme();
+    const activeAccent = getSidebarActiveAccent(theme.colors);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const headingId = `pinned-${sanitizeId(useId())}`;
+    const cap = Math.max(1, limit);
+    const rowHeight = overlay ? SIDEBAR_ROW.overlayHeight : SIDEBAR_ROW.height;
+    const activeIndex = activeId == null ? -1 : items.findIndex((i) => String(i.id) === String(activeId));
+    const [showAll, setShowAll] = useState(activeIndex >= cap);
+    useEffect(() => {
+        if (activeIndex >= cap)
+            setShowAll(true);
+    }, [activeIndex, cap]);
+    if (items.length === 0)
+        return null;
+    const hiddenCount = Math.max(0, items.length - cap);
+    const visible = showAll ? items : items.slice(0, cap);
+    const badgeSurface = sidebarRowPeak(theme.colors.sidebar.background[500]);
+    const unpinReplacesBadge = !!onUnpin && !overlay;
+    const renderBadge = (badge) => {
+        var _a, _b, _c;
+        const { cfg, value } = readBadge(badge);
+        if (value == null)
+            return null;
+        const tone = resolveSoftTone(theme.colors, scaleFor(theme.colors, (_a = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _a !== void 0 ? _a : "teal"), badgeSurface);
+        return (_jsx(Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: (_b = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _b !== void 0 ? _b : "subtle", borderRadius: (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full", ...(unpinReplacesBadge
+                ? { _groupHover: { opacity: 0 }, _groupFocusWithin: { opacity: 0 } }
+                : {}), children: value }));
+    };
+    const renderRow = (item) => {
+        const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
+        const anchor = (_jsx(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: "medium", 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: "background 0.12s", sx: sidebarFocusStyles(theme.colors), onClick: (e) => {
+                if (item.url && isBrowserNavigationGesture(e))
+                    return;
+                e.preventDefault();
+                onItemClick(item);
+            }, children: _jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: item.icon, fontSize: "md", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && readBadge(item.badge).value != null && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && (_jsx(TruncatedTextWithTooltip, { fontSize: SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isActive ? activeAccent.label : theme.colors.white, fontWeight: isActive ? 600 : 500, _groupHover: isActive ? undefined : { color: theme.colors.white }, children: item.title }))] }), !toggle && renderBadge(item.badge)] }) }));
+        return (_jsxs(Box, { as: "li", listStyleType: "none", position: "relative", "data-group": "", children: [toggle ? (_jsx(ToolTip, { label: item.title, placement: "right", children: anchor })) : (anchor), onUnpin && !toggle && (_jsx(Box, { as: "button", type: "button", "aria-label": text.unpin.replace("{title}", item.title), onClick: () => onUnpin(item), position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: UNPIN_SIZE, h: UNPIN_SIZE, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "lg", border: "none", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedIcon, opacity: overlay ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, _hover: {
+                        bg: LADDER.active,
+                        color: theme.colors.white,
+                    }, transition: "opacity 0.12s, background 0.12s", sx: sidebarFocusStyles(theme.colors), children: _jsx(Icon, { as: PinOff, fontSize: "sm" }) }))] }, String(item.id)));
+    };
+    const disclosureLabel = showAll
+        ? text.showLess
+        : text.showMore.replace("{count}", String(hiddenCount));
+    const disclosureButton = (_jsxs(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: SIDEBAR_ROW.fontSize, fontWeight: "medium", _hover: {
+            backgroundColor: LADDER.hover,
+            color: theme.colors.white,
+        }, transition: "background 0.12s", sx: sidebarFocusStyles(theme.colors), children: [_jsx(Icon, { as: showAll ? ChevronUp : ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && _jsx("span", { children: disclosureLabel })] }));
+    return (_jsxs(Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [_jsx(Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), _jsxs(Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && (_jsx(Box, { as: "li", listStyleType: "none", children: toggle ? (_jsx(ToolTip, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), _jsx(Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
+};
+export default PinnedSection;

package/dist/esm/Components/SideBar/sidebarFocus.js

@@ -0,0 +1,15 @@
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+const cache = new Map();
+/** The ring is derived for the canvas; the rail is near-black in both modes, so it is re-settled against the rail. */
+export const sidebarFocusRing = (colors, surface = colors.sidebar.background[500]) => {
+    const key = `${colors.focusRing.ring}|${surface}`;
+    let tokens = cache.get(key);
+    if (!tokens) {
+        tokens = { ring: liftToContrast(colors.focusRing.ring, surface, AA_NON_TEXT), halo: surface };
+        cache.set(key, tokens);
+    }
+    return { focusRing: tokens };
+};
+/** `focusVisibleStyles` for a control sitting on the rail (or on `surface`, e.g. the flyout). */
+export const sidebarFocusStyles = (colors, surface) => focusVisibleStyles(sidebarFocusRing(colors, surface));

package/dist/esm/Components/StageProgress/StageProgress.js

@@ -27,12 +27,12 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         return "upcoming";
     };
     const total = stages.length;
-    return (_jsx(Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: scrollbarStyles(theme.colors, "overlay"), children: stages.map((stage, index) => {
+    return (_jsx(Box, { as: variant === "stepper" ? "ol" : undefined, m: variant === "stepper" ? 0 : undefined, listStyleType: variant === "stepper" ? "none" : undefined, display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: scrollbarStyles(theme.colors, "overlay"), children: stages.map((stage, index) => {
             var _a;
             const state = stateFor(index);
             const stageDisabled = (_a = stage.isDisabled) !== null && _a !== void 0 ? _a : stage.disabled;
             if (variant === "stepper") {
-                return (_jsx(StepperStage, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+                return (_jsx(StepperStage, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, asListItem: true, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
             }
             return (_jsx(StageItem, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
         }) }));

package/dist/esm/Components/StageProgress/StepperStage.js

@@ -11,7 +11,7 @@ const sizeMap = {
     md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
     lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
 };
-const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, asListItem = false, }) => {
     const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = useCustomTheme();
     const palette = resolveStagePalette(theme, colorScheme);
@@ -33,10 +33,13 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
     const line = (done, hidden) => (_jsx(Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return (_jsxs(Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? focusVisibleStyles(theme.colors) : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: transitionFor(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    const node = (_jsxs(Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? focusVisibleStyles(theme.colors) : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: transitionFor(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
                             ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
                             : undefined, children: showCheck && state === "completed" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(Text, { mt: 2, px: 1, borderRadius: "sm", fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, transition: "background 0.18s ease, color 0.18s ease", _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
+    if (!asListItem)
+        return node;
+    return (_jsx(Box, { as: "li", display: "flex", flex: "1", minWidth: s.minW, flexShrink: 0, listStyleType: "none", children: node }));
 };
 export default StepperStage;

package/dist/esm/Components/WizardDialog/WizardDialog.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Flex, Heading, ListItem, Text, UnorderedList, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
+import Button from "../Button/Button.js";
+import StageProgress from "../StageProgress/StageProgress.js";
+import DescriptionList from "../DescriptionList/DescriptionList.js";
+import { useWizardFlow } from "./useWizardFlow.js";
+export { wizardTransition, firstInvalidStep, INITIAL_WIZARD_STATE } from "./wizardSteps.js";
+const DEFAULT_LABELS = {
+    back: "Back",
+    next: "Continue",
+    finish: "Finish",
+    cancel: "Cancel",
+    stepOf: (current, total) => `Step ${current} of ${total}`,
+    fixErrors: "Fix the following to continue",
+    review: "Review",
+};
+const WizardBody = ({ flow, steps, labels, testId }) => {
+    const { colors } = useCustomTheme();
+    const headingRef = useRef(null);
+    const previousStep = useRef(flow.step.id);
+    const reviewed = steps.filter((candidate) => candidate.summary !== undefined);
+    useEffect(() => {
+        var _a;
+        if (previousStep.current === flow.step.id)
+            return;
+        previousStep.current = flow.step.id;
+        (_a = headingRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [flow.step.id]);
+    return (_jsxs(Flex, { direction: "column", gap: 5, "data-testid": testId, "data-step": flow.step.id, children: [_jsx(StageProgress, { variant: "stepper", size: "sm", showCheck: true, stages: steps.map((candidate, index) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    isDisabled: index > flow.furthest,
+                })), value: flow.step.id, onChange: (_id, _stage, index) => flow.goto(index) }), _jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: labels.stepOf(flow.index + 1, steps.length) }), _jsx(Heading, { ref: headingRef, tabIndex: -1, as: "h3", fontSize: "md", fontWeight: 600, color: colors.header[900], _focus: { outline: "none" }, children: flow.step.label })] }), flow.errors.length ? (_jsxs(Alert, { status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", role: "alert", "data-testid": "wizard-errors", children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: labels.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: flow.errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, _jsx(Box, { children: flow.step.content }), flow.isLast && reviewed.length ? (_jsxs(Box, { "data-testid": "wizard-review", children: [_jsx(Heading, { as: "h4", fontSize: "sm", fontWeight: 600, mb: 2, color: colors.header[900], children: labels.review }), _jsx(DescriptionList, { layout: "inline", columns: { base: 1 }, items: reviewed.map((candidate) => ({
+                            label: candidate.label,
+                            value: candidate.summary,
+                        })) })] })) : null] }));
+};
+const WizardFooter = ({ flow, labels, isFinishing, onCancel }) => (_jsxs(Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? (_jsx(Button, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : (_jsx("span", {})), _jsxs(Flex, { gap: 2, children: [!flow.isFirst ? (_jsx(Button, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, loadingText: labels.finish, "data-testid": "wizard-finish" })) : (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+/** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
+export const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+    const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    const guardedClose = () => {
+        if (!isFinishing)
+            onClose();
+    };
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [_jsx(ModalBody, { children: _jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), _jsx(ModalFooter, { children: _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: guardedClose }) })] }));
+};
+/** The same wizard inline, for a full-page flow rather than a modal. */
+export const Wizard = ({ steps, onFinish, isFinishing = false, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+    const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: onCancel })] }));
+};
+export default WizardDialog;

package/dist/esm/Components/WizardDialog/WizardDialogProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/WizardDialog/useWizardFlow.js

@@ -0,0 +1,44 @@
+import { useCallback, useEffect, useState } from "react";
+import { INITIAL_WIZARD_STATE, firstInvalidStep, wizardTransition, } from "./wizardSteps.js";
+export function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }) {
+    const [state, setState] = useState(INITIAL_WIZARD_STATE);
+    const validators = steps.map((step) => step.validate);
+    const controlledIndex = stepId === undefined ? -1 : steps.findIndex((s) => s.id === stepId);
+    const isControlled = stepId !== undefined;
+    const index = Math.min(isControlled ? Math.max(controlledIndex, 0) : state.index, Math.max(steps.length - 1, 0));
+    const furthest = Math.max(state.furthest, index);
+    useEffect(() => {
+        if (resetWhen)
+            setState(INITIAL_WIZARD_STATE);
+    }, [resetWhen]);
+    const dispatch = useCallback((action) => {
+        const base = { ...state, index, furthest };
+        const next = wizardTransition(base, action, validators);
+        setState(next);
+        if (next.index !== index)
+            onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(steps[next.index].id);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, index, furthest, steps, onStepChange]);
+    const finish = useCallback(() => {
+        const invalid = firstInvalidStep(validators);
+        if (invalid) {
+            dispatch({ type: "fail", ...invalid });
+            return;
+        }
+        onFinish();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch, steps, onFinish]);
+    return {
+        index,
+        furthest,
+        errors: state.errors,
+        step: steps[index],
+        isFirst: index === 0,
+        isLast: index === steps.length - 1,
+        next: () => dispatch({ type: "next" }),
+        back: () => dispatch({ type: "back" }),
+        goto: (target) => dispatch({ type: "goto", index: target }),
+        finish,
+    };
+}