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

package/dist/Components/SideBar/SideBar.js

@@ -27,6 +27,7 @@ const PANEL_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
 const EXPANDED_WIDTH = "13rem";
 const COLLAPSE_MS = { ...motion_2.MOTION_MS, slow: 260 };
 const NO_ACTIVE_MENU = "\u0000pinned-active";
+const WIDTH_TRANSITION_FALLBACK_MS = 1000;
 const inlineTransitions = (collapse) => {
     var _a;
     if (collapse === "none")
@@ -47,6 +48,7 @@ const OtherApps_1 = __importDefault(require("./components/OtherApps"));
 const PinnedSection_1 = __importDefault(require("./components/PinnedSection"));
 const sidebarScale_1 = require("./sidebarScale");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const sharedResizeObserver_1 = require("../../Hooks/sharedResizeObserver");
 const SidebarHeader = ({ logo, companyName, companySubtitle, toggle, isLoading, onToggle, overlay, onClose, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
@@ -59,7 +61,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: "bold", flexShrink: 0, cursor: toggle ? "pointer" : undefined, onClick: toggle ? onToggle : undefined, children: (0, jsx_runtime_1.jsx)(defaultLogo_1.default, {}) }));
+        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: {
                     ...(0, sidebarFocus_1.sidebarFocusStyles)(theme.colors),
                     "&::after": {
@@ -80,7 +82,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: "medium", children: "Add New" }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "data-group": "", "aria-label": "Add New", alignItems: "center", gap: "9px", px: "10px", py: overlay ? "11px" : "7px", borderRadius: "lg", cursor: "pointer", border: "none", bg: "transparent", w: "100%", mb: "2px", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: "whiteAlpha.200" }, transition: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: onClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "18px", h: "18px", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, color: activeAccent.icon }) }), !toggle && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, color: theme.colors.white, fontWeight: 500, children: "Add New" }))] }));
 };
 const deriveInitials = (user) => {
     if (user.initials)
@@ -104,7 +106,7 @@ const UserFooter = ({ user, toggle, overlay }) => {
 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: "medium", children: label }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, flex: "1", minW: 0, alignItems: "center", justifyContent: "center", gap: "7px", px: "10px", py: "14px", cursor: "pointer", border: "none", bg: accent ? "whiteAlpha.300" : "transparent", onClick: onClick, _hover: { bg: accent ? "whiteAlpha.400" : "whiteAlpha.200" }, transition: "background 0.15s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [children, label && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: sidebarScale_1.SIDEBAR_CHROME.labelFontSize, color: accent ? activeAccent.label : theme.colors.sidebar.mutedLabel, fontWeight: 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;
@@ -149,11 +151,16 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
     // In overlay mode, navigating to a leaf item auto-closes the overlay (content
     // returns to full-screen). Parent items with a submenu only expand, so they
     // must NOT close it.
-    const handleMenuClickInternal = (menu) => {
-        handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
-        if (overlay && !(menu.subMenu && menu.subMenu.length > 0))
-            closeOverlay();
-    };
+    const menuClickRef = (0, react_1.useRef)(handleMenuClick);
+    menuClickRef.current = handleMenuClick;
+    const overlayRef = (0, react_1.useRef)(overlay);
+    overlayRef.current = overlay;
+    const handleMenuClickInternal = (0, react_1.useCallback)((menu) => {
+        var _a;
+        (_a = menuClickRef.current) === null || _a === void 0 ? void 0 : _a.call(menuClickRef, menu);
+        if (overlayRef.current && !(menu.subMenu && menu.subMenu.length > 0))
+            closeOverlayRef.current();
+    }, []);
     // Refs let the effects read the latest values without adding them to dep arrays,
     // which would cause infinite toggle loops since changeToggle flips state.
     const toggleRef = (0, react_1.useRef)(toggle);
@@ -234,46 +241,100 @@ function Sidebar({ menus, activeMenu, handleMenuClick, handleSecondaryNavClick,
     }, [isOverlayOpen]);
     // Swipe-left-to-close. Tracks pointer start; commits to a horizontal drag only
     // when the gesture is mostly horizontal, so vertical menu scrolling is unaffected.
+    // NOTE: drag offset goes to the panel's inline style per frame; React sees start/end.
     const dragStart = (0, react_1.useRef)(null);
-    const [dragX, setDragX] = (0, react_1.useState)(0);
+    const dragOffset = (0, react_1.useRef)(0);
+    const dragFrame = (0, react_1.useRef)(null);
+    const isDragging = (0, react_1.useRef)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
+    const paintDrag = () => {
+        var _a;
+        dragFrame.current = null;
+        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty("transform", `translateX(${dragOffset.current}px)`);
+    };
+    const cancelDragFrame = () => {
+        if (dragFrame.current !== null)
+            cancelAnimationFrame(dragFrame.current);
+        dragFrame.current = null;
+    };
+    (0, react_1.useEffect)(() => cancelDragFrame, []);
+    (0, react_1.useEffect)(() => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        const running = new Set();
+        let resume = null;
+        let fallback;
+        const finish = () => {
+            running.clear();
+            window.clearTimeout(fallback);
+            resume === null || resume === void 0 ? void 0 : resume();
+            resume = null;
+        };
+        const onRun = (e) => {
+            if (e.propertyName !== "width" || !e.target)
+                return;
+            running.add(e.target);
+            resume !== null && resume !== void 0 ? resume : (resume = (0, sharedResizeObserver_1.suspendResizeWithin)(panel));
+            window.clearTimeout(fallback);
+            fallback = window.setTimeout(finish, WIDTH_TRANSITION_FALLBACK_MS);
+        };
+        const onEnd = (e) => {
+            if (e.propertyName !== "width" || !e.target)
+                return;
+            running.delete(e.target);
+            if (running.size === 0)
+                finish();
+        };
+        panel.addEventListener("transitionrun", onRun);
+        panel.addEventListener("transitionend", onEnd);
+        panel.addEventListener("transitioncancel", onEnd);
+        return () => {
+            panel.removeEventListener("transitionrun", onRun);
+            panel.removeEventListener("transitionend", onEnd);
+            panel.removeEventListener("transitioncancel", onEnd);
+            finish();
+        };
+    }, []);
     const onPointerDown = (e) => {
         if (!isOverlayOpen)
             return;
         dragStart.current = { x: e.clientX, y: e.clientY };
     };
     const onPointerMove = (e) => {
+        var _a;
         const start = dragStart.current;
         if (!start)
             return;
         const dx = e.clientX - start.x;
         const dy = e.clientY - start.y;
-        if (!dragging) {
+        if (!isDragging.current) {
             if (Math.abs(dy) > Math.abs(dx)) {
                 dragStart.current = null; // vertical → let the list scroll
                 return;
             }
-            if (dx < -6)
-                setDragging(true);
-            else
+            if (dx >= -6)
                 return;
+            isDragging.current = true;
+            setDragging(true);
         }
-        setDragX(Math.min(0, dx));
+        dragOffset.current = Math.min(0, dx);
+        (_a = dragFrame.current) !== null && _a !== void 0 ? _a : (dragFrame.current = requestAnimationFrame(paintDrag));
     };
     const onPointerUp = (e) => {
+        var _a;
         const start = dragStart.current;
-        const committed = dragging;
+        const committed = isDragging.current;
         dragStart.current = null;
+        isDragging.current = false;
+        dragOffset.current = 0;
+        cancelDragFrame();
+        (_a = panelRef.current) === null || _a === void 0 ? void 0 : _a.style.removeProperty("transform");
         setDragging(false);
-        setDragX(0);
         if (committed && start && e.clientX - start.x < -96)
             onMobileClose === null || onMobileClose === void 0 ? void 0 : onMobileClose();
     };
-    const baseTransform = dragging
-        ? `translateX(${dragX}px)`
-        : isOverlayOpen
-            ? "translateX(0)"
-            : "translateX(-100%)";
+    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
                     ? dragging
                         ? "none"

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

@@ -17,5 +17,5 @@ interface Props {
  * routed through the in-app handler.
  */
 export declare const isBrowserNavigationGesture: (e: React.MouseEvent) => boolean;
-declare const MenuItemBox: React.FC<Props>;
-export default MenuItemBox;
+declare const _default: React.NamedExoticComponent<Props>;
+export default _default;

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

@@ -47,6 +47,7 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const sidebarAccentColors_1 = require("../sidebarAccentColors");
 const tone_1 = require("../../../Theme/tokens/builders/tone");
 const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const zIndices_1 = __importDefault(require("../../../Theme/tokens/primitives/zIndices"));
 const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
 const TextTruncation_1 = __importDefault(require("./TextTruncation"));
 const sidebarId_1 = require("../sidebarId");
@@ -113,7 +114,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         h: rowHeight,
         borderRadius: "lg",
         px: "10px",
-        fontWeight: "medium",
+        fontWeight: 500,
         border: "none",
         borderLeft: "2px solid",
         borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
@@ -151,7 +152,7 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
-                        }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.625rem", color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+                        }, "data-menu-id": String((_c = menu.id) !== null && _c !== void 0 ? _c : title), children: buttonContent }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: isBlocked ? "not-allowed" : "pointer", zIndex: zIndices_1.default.popover, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: "0.625rem", color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
     const row = ((0, jsx_runtime_1.jsx)(react_2.Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-expanded": hasSubMenu ? !!isOpen : undefined, "aria-controls": hasSubMenu ? submenuPanelId : undefined, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": isBlocked ? true : undefined, onClick: (e) => {
             if (!hasSubMenu && url && (0, exports.isBrowserNavigationGesture)(e))
@@ -197,4 +198,4 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                         return sub.locked && sub.lockedReason ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: sub.lockedReason, placement: "top", children: subRow }, subKey)) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: subRow }, subKey));
                     }) }) }))] }));
 };
-exports.default = MenuItemBox;
+exports.default = react_1.default.memo(MenuItemBox);

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { RenderMenuType } from "../SideBarProps";
-declare const MenuItems: React.FC<RenderMenuType>;
-export default MenuItems;
+declare const _default: React.NamedExoticComponent<RenderMenuType>;
+export default _default;

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

@@ -54,11 +54,11 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
             setOpenMenuId(activeMenu);
         }
     }, [activeMenu, menus]);
-    const handleToggle = (menu, clickY) => {
+    const handleToggle = (0, react_1.useCallback)((menu, clickY) => {
         setOpenMenuId((prev) => (prev === menu.id ? null : menu.id));
         if (typeof clickY === "number")
             setLastClickY(clickY);
-    };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (openMenuId == null)
             return;
@@ -151,4 +151,4 @@ const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu
             return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [showGroup && !isFirstGroup && ((0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, my: overlay ? "3px" : "5px" })), showGroup && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-hidden": "true", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), (0, jsx_runtime_1.jsx)(MenuItemBox_1.default, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle, overlay: overlay })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
         }) }));
 };
-exports.default = MenuItems;
+exports.default = (0, react_1.memo)(MenuItems);

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

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const zIndices_1 = __importDefault(require("../../../Theme/tokens/primitives/zIndices"));
 const sidebarFocus_1 = require("../sidebarFocus");
 const OtherApps = ({ toggle, otherApps }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -18,6 +22,6 @@ const OtherApps = ({ toggle, otherApps }) => {
         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 }))] }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { borderTop: "1px solid", borderColor: theme.colors.sidebar.divider, py: toggle ? "6px" : 2, px: "6px", flexShrink: 0, children: [!toggle && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "9.5px", fontWeight: 600, color: theme.colors.sidebar.mutedLabel, letterSpacing: "0.1em", textTransform: "uppercase", px: 2, pt: "2px", pb: "5px", children: "Switch app" })), (0, jsx_runtime_1.jsx)(react_1.Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? ((0, jsx_runtime_1.jsxs)(react_1.Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_1.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }) }), (0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.PopoverContent, { borderRadius: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: zIndices_1.default.popover, color: theme.colors.white, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: 3, children: flyoutBody(app) }) }) })] }, app.name)) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
 };
 exports.default = OtherApps;

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

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const sharedResizeObserver_1 = require("../../../Hooks/sharedResizeObserver");
 const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%", isTooltipDisabled = false, ...textProps }) => {
     const textRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
@@ -22,11 +23,9 @@ const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%"
             }
         };
         checkTruncation();
-        const resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return () => resizeObserver.disconnect();
+        if (!textRef.current)
+            return;
+        return (0, sharedResizeObserver_1.observeResize)(textRef.current, checkTruncation);
     }, [children]);
     const shouldShowTooltip = isTruncated && !isTooltipDisabled;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 

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

@@ -75,7 +75,7 @@ const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = ex
     };
     const renderRow = (item) => {
         const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
-        const anchor = ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: rowHeight, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: "medium", borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: "background 0.12s", sx: (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: "background 0.12s", sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: (e) => {
                 if (item.url && (0, MenuItemBox_1.isBrowserNavigationGesture)(e))
                     return;
                 e.preventDefault();
@@ -89,7 +89,7 @@ const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = ex
     const disclosureLabel = showAll
         ? text.showLess
         : text.showMore.replace("{count}", String(hiddenCount));
-    const disclosureButton = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: rowHeight, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: "medium", _hover: {
+    const disclosureButton = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: 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 })] }));

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

@@ -1,8 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
+const sharedResizeObserver_1 = require("../../../Hooks/sharedResizeObserver");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+// NOTE: an explicit preventOverflow opts out of ToolTip's 8px edge padding, keeping Chakra's placement.
+const CHAKRA_DEFAULT_OVERFLOW = [{ name: "preventOverflow", options: {} }];
 const TruncatedTextWithTooltip = ({ children, ...props }) => {
     const textRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
@@ -18,13 +25,11 @@ const TruncatedTextWithTooltip = ({ children, ...props }) => {
             }
         };
         checkTruncation();
-        const resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return () => resizeObserver.disconnect();
+        if (!textRef.current)
+            return;
+        return (0, sharedResizeObserver_1.observeResize)(textRef.current, checkTruncation);
     }, [children]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", openDelay: 0, closeOnClick: true, modifiers: CHAKRA_DEFAULT_OVERFLOW, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
                     // NOTE: padding lifts descenders out of the clip box; margin keeps the label's height.
                     py: "0.35em", my: "-0.35em", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
 };

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

@@ -4,7 +4,7 @@ export declare const SIDEBAR_ROW: {
     /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
     readonly overlayHeight: "44px";
     readonly subHeight: "28px";
-    readonly fontSize: "13px";
+    readonly fontSize: string;
     readonly iconSize: "1rem";
 };
 /** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */

package/dist/Components/SideBar/sidebarScale.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SIDEBAR_CHROME = exports.SIDEBAR_ROW = void 0;
+const typography_1 = require("../../Theme/tokens/primitives/typography");
 /** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
 exports.SIDEBAR_ROW = {
     height: "32px",
     /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
     overlayHeight: "44px",
     subHeight: "28px",
-    fontSize: "13px",
+    fontSize: typography_1.fontSizes["xs-plus"],
     iconSize: "1rem",
 };
 /** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -2,7 +2,9 @@
 export type SignInDevice = {
     /** Falls back to "—" when falsy; device and activity below don't — a blank one renders as an empty cell, not a dash. */
     browser: string;
+    /** Free text such as "MacBook Pro"; a blank value renders an empty cell. */
     device: string;
+    /** Shown verbatim, e.g. "2 hours ago"; the component never formats dates. */
     activity: string;
 };
 /**
@@ -10,15 +12,21 @@ export type SignInDevice = {
  * key has a sensible English default so the component works standalone.
  */
 export type SignInActivityLabels = {
+    /** Card heading; defaults to "Recent Sign-in Devices". */
     title?: string;
     browser?: string;
     device?: string;
+    /** Third column header; defaults to "Recent Activity". */
     recentActivity?: string;
+    /** Empty-state title shown when `devices` is empty. */
     noActivity?: string;
 };
 /** Read-only 3-column device list (browser, device, activity) on raw Chakra table parts, not the library Table — no row actions, closed props, no ref/...rest passthrough. */
 export interface SignInActivityTableProps {
+    /** Rendered in array order and keyed by index; an empty array shows the empty state. */
     devices: SignInDevice[];
+    /** Replaces the table with four skeleton bars; the heading stays. */
     isLoading?: boolean;
+    /** Partial overrides merged over the English defaults, per key. */
     labels?: SignInActivityLabels;
 }

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -1,8 +1,11 @@
+import type { HTMLAttributes } from "react";
 import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/react";
-/** Closed prop list: no ...rest, and no margin beyond `mt` on text. */
-export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "alignSelf" | "flexShrink" | "noOfLines" | "width"> & {
+type SkeletonOwnProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "alignSelf" | "flexShrink" | "noOfLines" | "width"> & {
     /** isLoaded, children, bg, color, fadeDuration only apply to type="skeleton" — circle/text accept but silently ignore them. */
     type: "skeleton" | "circle" | "text";
     /** Corner radius for type="skeleton" (theme default when unset); circle/text ignore it. */
     borderRadius?: ChakraSkeleton["borderRadius"];
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;
+/** Closed style-prop list (no margin beyond `mt` on text); plain HTML attributes (id, className, data-*, aria-*) land on the rendered root. */
+export type SkeletonProps = SkeletonOwnProps & Omit<HTMLAttributes<HTMLDivElement>, keyof SkeletonOwnProps | "dangerouslySetInnerHTML">;
+export {};

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -1,3 +1,3 @@
 import { SkeletonProps } from "./SkeletonProps";
 /** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
-export default function Skeletons({ startColor, endColor, height, borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export default function Skeletons({ startColor, endColor, height, borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, alignSelf, flexShrink, ...rest }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Skeletons/Skeletons.js

@@ -4,6 +4,8 @@ exports.default = Skeletons;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 /** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
-function Skeletons({ startColor, endColor, height = "1.25rem", borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, borderRadius: borderRadius, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
+function Skeletons({ startColor, endColor, height = "1.25rem", borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, alignSelf, flexShrink, ...rest }) {
+    void alignSelf;
+    void flexShrink;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { ...rest, height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, borderRadius: borderRadius, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { ...rest, size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { ...rest, mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
 }

package/dist/Components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,4 @@
+import type { SkipLinkProps } from "./SkipLinkProps";
+export declare const missingTargetWarning: (targetId: string) => string;
+declare const SkipLink: import("react").ForwardRefExoticComponent<SkipLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default SkipLink;

package/dist/Components/SkipLink/SkipLink.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.missingTargetWarning = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const radii_1 = require("../../Theme/tokens/primitives/radii");
+const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
+const FOCUSABLE = "a[href], area[href], button, input, select, textarea, iframe, summary, [tabindex], [contenteditable='true']";
+const missingTargetWarning = (targetId) => `[pixelize-design-library] SkipLink: no element with id "${targetId}" to skip to.`;
+exports.missingTargetWarning = missingTargetWarning;
+const SkipLink = (0, react_1.forwardRef)(function SkipLink({ targetId = "main-content", children = "Skip to main content", onClick, ...rest }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const handleClick = (event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented)
+            return;
+        const target = document.getElementById(targetId);
+        if (!target) {
+            if (process.env.NODE_ENV !== "production")
+                console.warn((0, exports.missingTargetWarning)(targetId));
+            return;
+        }
+        event.preventDefault();
+        if (!target.matches(FOCUSABLE))
+            target.setAttribute("tabindex", "-1");
+        target.focus();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_2.chakra.a, { ...rest, ref: ref, href: `#${targetId}`, onClick: handleClick, sx: {
+            ...VisuallyHidden_1.visuallyHiddenStyle,
+            _focusVisible: {
+                clip: "auto",
+                width: "auto",
+                height: "auto",
+                margin: 0,
+                overflow: "visible",
+                top: 4,
+                left: 4,
+                px: 4,
+                py: 2,
+                zIndex: "skipLink",
+                borderRadius: radii_1.RADIUS_ROLE.control,
+                bg: colors.surfaceRaised,
+                color: colors.accentText,
+                fontSize: "sm",
+                fontWeight: 600,
+                textDecoration: "none",
+                ...(0, focusRing_styles_1.focusVisibleRing)(colors),
+            },
+        }, children: children }));
+});
+exports.default = SkipLink;

package/dist/Components/SkipLink/SkipLinkProps.d.ts

@@ -0,0 +1,8 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+/** A "skip to content" link, invisible until keyboard focus; other `<a>` attributes land on the anchor. */
+export interface SkipLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "color" | "children" | "dangerouslySetInnerHTML"> {
+    /** Id of the element to jump to, without `#`; it receives focus (gaining `tabindex="-1"` if it is not focusable). Defaults to "main-content". */
+    targetId?: string;
+    /** The link text; defaults to "Skip to main content". */
+    children?: ReactNode;
+}

package/dist/Components/SkipLink/SkipLinkProps.js

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

package/dist/Components/Slider/Slider.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 type ImageSliderProps = {
     images: SliderImage[];
-    /** interval <= 0 disables auto-advance entirely (no timer set) — it does not mean "no delay"/immediate. */
+    /** ms between slides; <= 0 disables auto-advance (no timer). Also paused while hovered or focused, and off under reduced motion. */
     interval?: number;
     isArrow?: boolean;
     mobileImages?: SliderImage[];
@@ -15,6 +15,6 @@ type SliderImage = {
     /** Sorts the main track, but pagination dots follow the array's original order — pass images pre-sorted by order to keep dots in sync. */
     order: number;
 };
-/** Auto-advancing image/content carousel — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
+/** Auto-advancing image/content carousel (pauses on hover/focus, never auto-advances under reduced motion) — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;

package/dist/Components/Slider/Slider.js

@@ -8,11 +8,15 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
-/** Auto-advancing image/content carousel — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
+const motion_2 = require("../../Theme/chakra/motion");
+/** Auto-advancing image/content carousel (pauses on hover/focus, never auto-advances under reduced motion) — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
 const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const reducedMotion = (0, motion_2.usePrefersReducedMotion)();
     const timeoutRef = (0, react_1.useRef)(null);
     const isMobile = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _a !== void 0 ? _a : false;
     const slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
@@ -23,14 +27,14 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
     }, [slides.length]);
     (0, react_1.useEffect)(() => {
-        if (interval > 0) {
+        if (interval > 0 && !hovered && !focused && !reducedMotion) {
             timeoutRef.current = setTimeout(nextSlide, interval);
         }
         return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
-    }, [currentIndex, interval, nextSlide]);
+    }, [currentIndex, interval, nextSlide, hovered, focused, reducedMotion]);
     (0, react_1.useEffect)(() => {
         if (currentIndex >= slides.length) {
             setCurrentIndex(0);
@@ -43,7 +47,10 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
     const chipHoverBg = (0, outlineRung_1.resolveHoverTint)(colors.gray[200], chipBg);
     const chipHoverInk = (0, accentText_1.onFilled)(chipHoverBg, colors.white, colors.black);
     const dotInactiveInk = (0, outlineRung_1.liftToContrast)(colors.gray[400], chipBg, outlineRung_1.AA_NON_TEXT);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: "transform 0.5s ease", children: [...slides]
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setFocused(false);
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: reducedMotion ? "none" : "transform 0.5s ease", children: [...slides]
                     .sort((a, b) => a.order - b.order)
                     .map((image, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.AspectRatio, { ratio: ratio, w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: isMobile && image.mobilePreviewUrl
                                 ? image.mobilePreviewUrl