pixelize-design-library 2.4.2-beta.62 → 2.4.2-beta.63

package/dist/Components/SelectSearch/SelectSearch.js

@@ -18,6 +18,7 @@ const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
 const motion_2 = require("../../Theme/chakra/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const optionRowInk_1 = require("../Select/optionRowInk");
 const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
@@ -235,7 +236,7 @@ function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnc
                                         return;
                                     }
                                     openDropdown();
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", color: BottomTextColor
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: (0, surfaceRaised_1.raisedRule)(theme.colors), zIndex: 1, borderTop: `1px solid ${(0, surfaceRaised_1.raisedRule)(theme.colors)}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "sm", color: BottomTextColor
                                             ? BottomTextColor
                                             : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

package/dist/Components/SettingRow/SettingRow.js

@@ -4,6 +4,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const react_2 = require("react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 /** One settings-form row: title + description left, one right-aligned control; stacks on mobile. */
 const SettingRow = ({ title, description, control, htmlFor, descriptionId, isDisabled = false }) => {
     var _a;
@@ -19,6 +20,6 @@ const SettingRow = ({ title, description, control, htmlFor, descriptionId, isDis
             "aria-describedby": (_a = controlProps === null || controlProps === void 0 ? void 0 : controlProps["aria-describedby"]) !== null && _a !== void 0 ? _a : resolvedDescriptionId,
         })
         : control;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, { borderColor: colors.boxborder[200] }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: { base: "1fr", md: "15rem 1fr" }, gap: { base: 2, md: 6 }, py: 4, alignItems: "start", opacity: isDisabled ? 0.5 : 1, "aria-disabled": isDisabled || undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { children: [htmlFor ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "label", htmlFor: htmlFor, display: "block", fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { id: titleId, fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })), (0, jsx_runtime_1.jsx)(react_1.Text, { id: resolvedDescriptionId, mt: 0.5, fontSize: "xs-plus", color: colors.textMuted, children: description })] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, justify: { base: "flex-start", md: "flex-end" }, children: namedControl })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Divider, { borderColor: (0, planeStep_1.cardRule)(colors) }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: { base: "1fr", md: "15rem 1fr" }, gap: { base: 2, md: 6 }, py: 4, alignItems: "start", opacity: isDisabled ? 0.5 : 1, "aria-disabled": isDisabled || undefined, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { children: [htmlFor ? ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "label", htmlFor: htmlFor, display: "block", fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })) : ((0, jsx_runtime_1.jsx)(react_1.Text, { id: titleId, fontSize: "sm", fontWeight: 500, color: colors.text[800], children: title })), (0, jsx_runtime_1.jsx)(react_1.Text, { id: resolvedDescriptionId, mt: 0.5, fontSize: "xs-plus", color: colors.textMuted, children: description })] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, justify: { base: "flex-start", md: "flex-end" }, children: namedControl })] })] }));
 };
 exports.default = SettingRow;

package/dist/Components/SettingRow/SettingsSection.js

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

package/dist/Components/SideBar/SecondaryBar.js

@@ -22,6 +22,7 @@ const sidebarAccent_1 = require("../../Theme/tokens/builders/sidebarAccent");
 const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
 const sidebarScale_1 = require("./sidebarScale");
+const sidebarMotion_1 = require("./sidebarMotion");
 const softBadge = (colors, colorScheme, surface) => {
     const tone = (0, tone_1.resolveSoftTone)(colors, (0, paletteFromTheme_1.scaleFor)(colors, colorScheme), surface);
     return { bg: tone.bg, color: tone.fg };
@@ -53,7 +54,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", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: zIndices_1.default.popover, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 500, as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
+                    }, bg: isActive ? "whiteAlpha.300" : "transparent", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", cursor: blocked ? "not-allowed" : "pointer", zIndex: zIndices_1.default.popover, color: theme.colors.white, border: 'none', children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 3, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", flexShrink: 0 }), (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: 500, as: "p", children: item.title })] }), item.locked ? (item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon }))) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.elevated)), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }) }) }) })] }));
 };
 const ExpandedItem = ({ item, isActive, itemFontSize, onItemClick }) => {
     var _a;
@@ -67,7 +68,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", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
+        }, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, flex: "1", minW: 0, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: itemFontSize, fontWeight: isActive ? 600 : 500, color: isActive ? activeAccent.label : theme.colors.white, _groupHover: isActive ? undefined : { color: theme.colors.white }, as: "p", children: item.title }) })] }), item.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "sm", flexShrink: 0, color: theme.colors.sidebar.mutedIcon })) : (badgeVal != null && ((0, jsx_runtime_1.jsx)(react_2.Badge, { ...softBadge(theme.colors, colorScheme, (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500])), fontSize: "xs", variant: variant, borderRadius: radius, children: badgeVal })))] }));
     return item.locked && item.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.lockedReason, placement: "top", children: row })) : (row);
 };
 const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3.5rem", expandedWidth = "10rem", headerFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, itemFontSize = sidebarScale_1.SIDEBAR_ROW.fontSize, selected, onItemClick, title, icon, }) => {
@@ -76,7 +77,7 @@ const SecondaryBar = ({ items = [], defaultCollapsed = true, collapsedWidth = "3
     const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
     const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
     const width = collapsed ? collapsedWidth : expandedWidth;
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "nav", "aria-label": title ? `${title} navigation` : "Secondary navigation", transition: (0, motion_1.transitionFor)(["width"], "base"), pos: "sticky", top: 0, sx: viewportHeight_1.fullViewportHeight, w: width, bg: theme.colors.sidebar.background[500], borderLeft: "1px solid", borderColor: theme.colors.sidebar.divider, boxShadow: theme.shadows.md, zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 0, h: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: collapsed ? "center" : "space-between", px: collapsed ? 0 : "10px", gap: "7px", h: Sidebar_1.HEADER_HEIGHT, overflow: "hidden", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, flexShrink: 0, children: [!collapsed && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, color: activeAccent.icon, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", maxWidth: "100%", fontSize: headerFontSize, fontWeight: 600, color: theme.colors.white, as: "p", children: title !== null && title !== void 0 ? title : "" }) })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": collapsed ? "Expand navigation panel" : "Collapse navigation panel", "aria-expanded": !collapsed, border: "none", bg: "transparent", w: "24px", h: "24px", borderRadius: "lg", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", flexShrink: 0, onClick: () => setCollapsed((c) => !c), _hover: { bg: "whiteAlpha.200" }, transition: "background 0.15s", 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, 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) => {
                         var _a;
                         const isActive = String(selected) === String(item.id) ||
                             String(selected) === String(item.title);

package/dist/Components/SideBar/SideBar.js

@@ -15,6 +15,7 @@ const overlay_styles_1 = require("../../Theme/chakra/overlay.styles");
 const motion_1 = require("../../Theme/chakra/motion");
 const sidebarFocus_1 = require("./sidebarFocus");
 const motion_2 = require("../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("./sidebarMotion");
 const lucide_react_1 = require("lucide-react");
 // Overlay stacking — mirrors theme.zIndices (overlay=1300 scrim, modal=1400 panel).
 const Z_SCRIM = 1300;
@@ -23,7 +24,6 @@ const Z_PANEL = 1400;
 // expanded 13rem for comfortable touch targets, but below the old 16rem that was
 // too wide on phones. Still capped by `maxW: 88vw` on very small screens.
 const RAIL_WIDTH = "4.688rem";
-const PANEL_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
 const EXPANDED_WIDTH = "13rem";
 const COLLAPSE_MS = { ...motion_2.MOTION_MS, slow: 260 };
 const NO_ACTIVE_MENU = "\u0000pinned-active";
@@ -32,13 +32,16 @@ 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"];
+    const ms = COLLAPSE_MS[(_a = collapse.speed) !== null && _a !== void 0 ? _a : "base"];
     return {
-        width: `width ${ms}ms ${PANEL_EASE}`,
+        width: `width ${ms}ms ${motion_2.MOTION_EASE_OUT}`,
         shadow: collapse.animateShadow === false ? "none" : `box-shadow ${ms}ms ${motion_2.MOTION_EASE}`,
     };
 };
 const OVERLAY_WIDTH = "14.7rem";
+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");
 const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const MenuItems_1 = __importDefault(require("./components/MenuItems"));
 const defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
@@ -62,7 +65,7 @@ const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading,
         // Rail-safe pairing, not a raw primary fill: primary[500] equals the rail itself on
         // 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: 700, flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: "background 0.15s", sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { h: Sidebar_1.HEADER_HEIGHT, w: "100%", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: 2, px: toggle ? "8px" : "10px", borderBottom: "1px solid", borderColor: theme.colors.sidebar.divider, minW: 0, overflow: "hidden", flexShrink: 0, children: [logoNode, !toggle && ((0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "right", fontWeight: 600, fontSize: sidebarScale_1.SIDEBAR_CHROME.titleFontSize, textAlign: "left", color: theme.colors.white, lineHeight: "1.3", as: "p", width: "100%", children: companyName !== null && companyName !== void 0 ? companyName : "" }), companySubtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, color: theme.colors.sidebar.mutedLabel, lineHeight: "1.3", isTruncated: true, children: companySubtitle }))] })), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: overlay ? onClose : onToggle, "aria-label": overlay ? "Close menu" : "Collapse sidebar", w: "22px", h: "22px", borderRadius: "lg", bg: "whiteAlpha.200", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, position: "relative", _hover: { bg: "whiteAlpha.300" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: {
                     ...(0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
                     "&::after": {
                         content: '""',
@@ -82,7 +85,7 @@ const SkeletonMenuRow = ({ toggle }) => {
 const AddNewButton = ({ toggle, onClick, overlay }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", 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: 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" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -100,13 +103,13 @@ const UserFooter = ({ user, toggle, overlay }) => {
     const avatar = user.avatarUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: user.avatarUrl, alt: user.name, boxSize: "26px", borderRadius: "full", objectFit: "cover", flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "26px", borderRadius: "full", 
         // Same rail-safe pairing as the logo tile — primary.opacity[32] was invisible on zinc/skyline.
         bg: theme.colors.sidebar.activeBg, color: activeAccent.label, display: "flex", alignItems: "center", justifyContent: "center", fontSize: sidebarScale_1.SIDEBAR_CHROME.metaFontSize, fontWeight: 600, flexShrink: 0, children: deriveInitials(user) }));
-    return ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", flexShrink: 0, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", onClick: user.onClick, align: "center", gap: 2, px: 2, py: overlay ? "10px" : "6px", w: "100%", borderRadius: "lg", cursor: "pointer", bg: "transparent", border: "none", justify: toggle ? "center" : "flex-start", _hover: { bg: "whiteAlpha.200" }, transition: "background 0.12s", 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: 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 })] }) }));
 };
 // Footer "cell" — one segment of the Collapse | Hide/Show control.
 const ControlCell = ({ onClick, ariaLabel, label, accent, children }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: 500, children: label }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: 500, 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;
@@ -125,7 +128,7 @@ const FooterControls = ({ toggle, overlay, mobileNav, onToggleCollapse, onToggle
     return shell((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleCollapse, ariaLabel: toggle ? "Expand sidebar" : undefined, label: toggle ? undefined : "Collapse", children: toggle ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRightToLine, { size: 14, color: iconColor })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeftToLine, { size: 14, color: iconColor })) }), onToggleMobileNav && ((0, jsx_runtime_1.jsx)(ControlCell, { onClick: onToggleMobileNav, ariaLabel: toggle ? "Show sidebar in overlay mode" : undefined, label: toggle ? undefined : "Hide", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 14, color: iconColor }) }))] }));
 };
 // --- Main Sidebar component ---
-function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick, toggle, changeToggle, logo, companyName, companySubtitle, user, isDisableAddNew = false, onAddNewClick, selectedSubMenu, selectedSecondaryItem, isLoading, loadingLines, open = true, otherApps, mobileOpen = false, onMobileClose, mobileNav = false, onToggleMobileNav, peekOpen = false, onPeekEnd, pinnedItems, pinnedLabel, onUnpin, activePinnedId, pinnedLimit, pinnedLabels, collapseTransition = { speed: "slow" }, autoCollapse = true, }) {
+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: "base" }, autoCollapse = true, }) {
     var _a, _b;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const scrollContainerId = (0, sidebarId_1.sanitizeId)((0, react_1.useId)());
@@ -335,14 +338,14 @@ 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: "opacity 0.28s ease, visibility 0.28s ease", sx: { [motion_1.REDUCED_MOTION_QUERY]: { transition: "none" } }, onClick: closeOverlay, "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: panelRef, onKeyDown: trapTab, tabIndex: overlay ? -1 : undefined, outline: "none", position: mobileNav ? "fixed" : { base: "fixed", lg: "sticky" }, top: 0, left: mobileNav ? 0 : { base: 0, lg: "auto" }, bottom: mobileNav ? 0 : { base: 0, lg: "auto" }, zIndex: mobileNav ? Z_PANEL : { base: Z_PANEL, lg: "auto" }, maxW: mobileNav ? "88vw" : { base: "88vw", lg: "none" }, transform: mobileNav ? baseTransform : { base: baseTransform, lg: "none" }, transition: mobileNav
+    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
                     ? dragging
                         ? "none"
-                        : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)"
+                        : OVERLAY_SLIDE
                     : {
                         base: dragging
                             ? "none"
-                            : "transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)",
+                            : 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: {
                     ...viewportHeight_1.fullViewportHeight,
@@ -351,6 +354,6 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
                 }, 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
-                            ? `width 0.26s ${PANEL_EASE}`
-                            : { base: `width 0.26s ${PANEL_EASE}`, lg: inline.width }, display: "flex", flexDirection: "column", justifyContent: "space-between", sx: { "@media (prefers-reduced-motion: reduce)": { transition: "none" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDir: "column", w: "100%", as: "nav", "aria-label": "Main navigation", h: "100%", children: [(0, jsx_runtime_1.jsx)(SidebarHeader, { logo: logo, companyName: companyName, companySubtitle: companySubtitle, toggle: effToggle, isLoading: isLoading, onToggle: changeToggle, overlay: overlay, onClose: onMobileClose }), (0, jsx_runtime_1.jsx)(react_2.Box, { id: scrollContainerId, flex: "1", minH: 0, w: "100%", overflowY: "auto", overflowX: "hidden", py: 2, px: "6px", sx: (0, Sidebar_1.cssForScrollBar)(theme), children: isLoading ? (Array.from({ length: loadingLines !== null && loadingLines !== void 0 ? loadingLines : 15 }).map((_, i) => ((0, jsx_runtime_1.jsx)(SkeletonMenuRow, { toggle: effToggle }, i)))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [pinnedItems && pinnedItems.length > 0 && ((0, jsx_runtime_1.jsx)(PinnedSection_1.default, { items: pinnedItems, label: pinnedLabel, limit: pinnedLimit, toggle: effToggle, overlay: overlay, activeId: activePinnedId, labels: pinnedLabels, onItemClick: handleMenuClickInternal, onUnpin: onUnpin })), (0, jsx_runtime_1.jsx)(MenuItems_1.default, { activeMenu: pinnedActive ? NO_ACTIVE_MENU : activeMenu, menus: menus, handleMenuClick: handleMenuClickInternal, toggle: effToggle, selectedSubMenu: selectedSubMenu, overlay: overlay, containerId: scrollContainerId })] })) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flexShrink: 0, children: [!isDisableAddNew && ((0, jsx_runtime_1.jsx)(react_2.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: 2, px: "6px", children: (0, jsx_runtime_1.jsx)(AddNewButton, { toggle: effToggle, onClick: onAddNewClick, overlay: overlay }) })), (0, jsx_runtime_1.jsx)(OtherApps_1.default, { toggle: effToggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }), user && (0, jsx_runtime_1.jsx)(UserFooter, { user: user, toggle: effToggle, overlay: overlay }), (0, jsx_runtime_1.jsx)(FooterControls, { toggle: effToggle, overlay: overlay, mobileNav: mobileNav, onToggleCollapse: changeToggle, onToggleMobileNav: onToggleMobileNav })] })] }) }), secondaryItems.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: effToggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title, icon: activeTop === null || activeTop === void 0 ? void 0 : activeTop.icon })), overlay && ((0, jsx_runtime_1.jsx)(react_2.Box, { display: mobileOpen ? "block" : "none", position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: "4px", h: "42px", borderRadius: "full", bg: theme.colors.sidebar.mutedIcon, "aria-hidden": "true" }))] })] }));
+                            ? 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" }))] })] }));
 }

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

@@ -59,7 +59,7 @@ export type SidebarProps = {
     pinnedLimit?: number;
     /** Overrides for the pinned block's strings; `{count}` and `{title}` are substituted. */
     pinnedLabels?: SidebarPinnedLabels;
-    /** Inline (`lg`+) collapse/expand animation; defaults to `{ speed: "slow" }` (260ms). Overlay slide is unaffected. */
+    /** Inline (`lg`+) collapse/expand animation; defaults to `{ speed: "base" }` (200ms). Overlay slide is unaffected. */
     collapseTransition?: SidebarCollapseTransition;
     /** Defaults to true: a menu with `secondaryItems` (and the `open` prop) call `changeToggle` for you. False: `toggle` alone decides. */
     autoCollapse?: boolean;

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

@@ -54,6 +54,9 @@ const sidebarId_1 = require("../sidebarId");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const sidebarFocus_1 = require("../sidebarFocus");
 const sidebarScale_1 = require("../sidebarScale");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("../sidebarMotion");
+const SUBMENU_REVEAL_TRANSITION = (0, motion_1.transitionFor)(["opacity", "transform"], "base");
 /**
  * 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
@@ -127,10 +130,10 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
             },
         cursor: isBlocked ? "not-allowed" : "pointer",
         opacity: isBlocked ? 0.6 : 1,
-        transition: "background 0.12s",
+        transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION,
         sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
     };
-    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
+    const buttonContent = ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: icon, fontSize: "md", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isAnyActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), toggle && (badgeValue != null || hasSubmenuBadge) && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
                     // open={isOpen}
                     , { 
                         // open={isOpen}
@@ -161,7 +164,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
             handleToggleSubMenu(e);
         }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [locked && lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: lockedReason, placement: "top", children: row })) : (row), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_2.Collapse, { in: isOpen, animateOpacity: true, children: (0, jsx_runtime_1.jsx)(react_2.Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_e = menu.id) !== null && _e !== void 0 ? _e : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
-                        transition: "opacity 0.28s ease, transform 0.28s ease",
+                        transition: SUBMENU_REVEAL_TRANSITION,
                         opacity: isOpen ? 1 : 0,
                         transform: isOpen ? "translateY(0)" : "translateY(-6px)",
                     }, children: subMenu.map((sub, sIdx) => {
@@ -181,7 +184,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", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, lineHeight: "1", color: isSubActive ? activeAccent.label : theme.colors.sidebar.mutedLabel, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon })) : (() => {
                                     var _a, _b, _c, _d;
                                     const subCfg = typeof sub.badge === "object" && sub.badge !== null
                                         ? sub.badge

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

@@ -16,6 +16,7 @@ const TextTruncation_1 = __importDefault(require("./TextTruncation"));
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const sidebarFocus_1 = require("../sidebarFocus");
 const sidebarScale_1 = require("../sidebarScale");
+const sidebarMotion_1 = require("../sidebarMotion");
 const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -56,7 +57,7 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     }, px: 2, h: sidebarScale_1.SIDEBAR_ROW.subHeight, mb: "2px", borderRadius: "lg", align: "center", justify: "space-between", gap: 2, borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
                         bg: isSubBlocked ? "transparent" : isSubActive ? "whiteAlpha.400" : "whiteAlpha.200",
                         cursor: !isSubBlocked ? "pointer" : "not-allowed",
-                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors, theme.colors.sidebar.elevated), children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors, theme.colors.sidebar.elevated), children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: sidebarScale_1.SIDEBAR_ROW.iconSize, flexShrink: 0, color: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isSubActive ? undefined : { bg: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: theme.colors.white }, children: sub.title })] }), sub.locked ? (sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }) })) : ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "md", color: theme.colors.sidebar.mutedIcon }))) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

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

@@ -8,6 +8,7 @@ const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const zIndices_1 = __importDefault(require("../../../Theme/tokens/primitives/zIndices"));
 const sidebarFocus_1 = require("../sidebarFocus");
+const sidebarMotion_1 = require("../sidebarMotion");
 const OtherApps = ({ toggle, otherApps }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!otherApps || otherApps.length === 0)
@@ -17,7 +18,7 @@ const OtherApps = ({ toggle, otherApps }) => {
         return ((0, jsx_runtime_1.jsx)(react_1.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 : ((0, jsx_runtime_1.jsx)(react_1.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) => ((0, jsx_runtime_1.jsxs)(react_1.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: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const appCell = (app) => ((0, jsx_runtime_1.jsxs)(react_1.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: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: app.onClick, children: [appIcon(app), !toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", color: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
     const flyoutBody = (app) => {
         var _a;
         return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { alignItems: "center", gap: 2, mb: 1, onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: theme.colors.sidebar.mutedLabel, children: app.description }))] }));

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

@@ -19,6 +19,8 @@ const sidebarScale_1 = require("../sidebarScale");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
 const TextTruncation_1 = __importDefault(require("./TextTruncation"));
 const MenuItemBox_1 = require("./MenuItemBox");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("../sidebarMotion");
 exports.DEFAULT_PINNED_LABEL = "Pinned";
 exports.DEFAULT_PINNED_LIMIT = 5;
 const DEFAULT_LABELS = {
@@ -27,6 +29,7 @@ const DEFAULT_LABELS = {
     unpin: "Unpin {title}",
 };
 const UNPIN_SIZE = "24px";
+const UNPIN_TRANSITION = (0, motion_1.transitionFor)(["opacity", "background"]);
 const LADDER = { hover: "whiteAlpha.200", active: "whiteAlpha.300", activeHover: "whiteAlpha.400" };
 const VISUALLY_HIDDEN = {
     position: "absolute",
@@ -75,16 +78,16 @@ 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: "background 0.12s", 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: 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) => {
                 if (item.url && (0, MenuItemBox_1.isBrowserNavigationGesture)(e))
                     return;
                 e.preventDefault();
                 onItemClick(item);
-            }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.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)] }) }));
+            }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), toggle && readBadge(item.badge).value != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "li", listStyleType: "none", position: "relative", "data-group": "", children: [toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.title, placement: "right", children: anchor })) : (anchor), onUnpin && !toggle && ((0, jsx_runtime_1.jsx)(react_2.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: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.PinOff, fontSize: "sm" }) }))] }, String(item.id)));
+                    }, transition: UNPIN_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.PinOff, fontSize: "sm" }) }))] }, String(item.id)));
     };
     const disclosureLabel = showAll
         ? text.showLess
@@ -92,7 +95,7 @@ const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = ex
     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: {
             backgroundColor: LADDER.hover,
             color: theme.colors.white,
-        }, transition: "background 0.12s", 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 })] }));
+        }, 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: "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 }), (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" })] }));
 };
 exports.default = PinnedSection;

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

@@ -0,0 +1,2 @@
+export declare const SIDEBAR_BG_TRANSITION: string;
+export declare const SIDEBAR_INK_TRANSITION: string;

package/dist/Components/SideBar/sidebarMotion.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_INK_TRANSITION = exports.SIDEBAR_BG_TRANSITION = void 0;
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+exports.SIDEBAR_BG_TRANSITION = (0, motion_1.transitionFor)(["background"]);
+exports.SIDEBAR_INK_TRANSITION = (0, motion_1.transitionFor)(["color"]);

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const DEFAULT_LABELS = {
     title: "Recent Sign-in Devices",
@@ -19,20 +20,21 @@ const DEFAULT_LABELS = {
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = (0, planeStep_1.cardRule)(colors);
     const muted = colors.textMuted;
     const heading = colors.header[500];
-    const headBg = colors.backgroundColor.tableHeader;
+    const headBg = (0, planeStep_1.bandOn)(colors.backgroundColor.tableHeader, surface);
     const shadow = colors.boxShadow.default;
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: `0 1px 2px ${shadow}`, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.browser }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.device }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.recentActivity })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: devices.map((device, index) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: device.device }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: device.activity }) })] }, index))) })] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: `0 1px 2px ${shadow}`, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.browser }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.device }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.recentActivity })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: devices.map((device, index) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: device.device }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: device.activity }) })] }, index))) })] })) })] }));
 };
 exports.default = SignInActivityTable;

package/dist/Components/StageProgress/StageItem.js

@@ -9,6 +9,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
 const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
 const StageProgressProps_1 = require("./StageProgressProps");
 const centerInStrip_1 = require("./centerInStrip");
@@ -17,6 +18,8 @@ const sizeMap = {
     md: { arrow: 16, minW: "160px", h: "36px", px: 4, font: "0.875rem", icon: 14 },
     lg: { arrow: 20, minW: "200px", h: "44px", px: 5, font: "1rem", icon: 16 },
 };
+const LABEL_TRANSITION = (0, motion_1.transitionFor)(["color", "filter"], "base");
+const CHEVRON_TRANSITION = (0, motion_1.transitionFor)(["background", "border-color"], "base");
 const clipFor = (index, total, a) => {
     const isFirst = index === 0;
     const isLast = index === total - 1;
@@ -83,12 +86,12 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
     // clip-path clips box-shadow too, so the focus ring stays on this unclipped outer button.
-    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "color 0.18s ease, filter 0.18s ease", sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, _hover: interactive
+    const content = ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: LABEL_TRANSITION, sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, _hover: interactive
             ? {
                 color: state === "active" ? undefined : palette.onStrong,
                 filter: "brightness(0.97)",
             }
-            : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, bg: isOutlinePill ? "transparent" : bg, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, transition: "background 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _groupHover: fillHoverStyles }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { position: "relative", align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, pl: `${leftPad}px`, pr: `${rightPad}px`, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] })] }));
+            : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, bg: isOutlinePill ? "transparent" : bg, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, transition: CHEVRON_TRANSITION, sx: { clipPath }, _groupHover: fillHoverStyles }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { position: "relative", align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, pl: `${leftPad}px`, pr: `${rightPad}px`, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] })] }));
     if (showTooltip) {
         return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", openDelay: 300, children: content }));
     }

package/dist/Components/StageProgress/StepperStage.js

@@ -30,12 +30,12 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const circleBg = filled ? palette.strong : theme.colors.background[50];
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
-    const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
+    const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: (0, primitives_1.transitionFor)(["background"], "base") }));
     const node = ((0, jsx_runtime_1.jsxs)(react_2.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 ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.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: (0, primitives_1.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" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.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 })] }));
+                            : undefined, children: showCheck && state === "completed" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.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: (0, primitives_1.transitionFor)(["background", "color"], "base"), _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
     if (!asListItem)
         return node;
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", display: "flex", flex: "1", minWidth: s.minW, flexShrink: 0, listStyleType: "none", children: node }));