pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Badge, Collapse, Portal, } from "@chakra-ui/react";
+import MenuPopoverContent from "./MenuPopoverContent";
+import { ChevronDown, ChevronRight, LockKeyhole } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText";
+import { useSidebarActiveAccent } from "../sidebarAccentColors";
+import TruncatedTextWithTooltip from "./TextTruncation";
+/**
+ * These rows are real `<a href>`s now, so the browser's own gestures have to keep working —
+ * cmd/ctrl-click for a new tab, shift for a window, middle-click. Only a plain left click is
+ * routed through the in-app handler.
+ */
+const isBrowserNavigationGesture = (e) => e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0;
+const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const { title, icon, disabled, locked, badge, subMenu, url } = menu;
+    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    const submenuPanelId = `submenu-${String((_c = menu.id) !== null && _c !== void 0 ? _c : title)}`;
+    // A submenu parent only expands, so it is a button; every other row navigates.
+    // Cast: Chakra narrows `as` unions to their *shared* props, which drops `href`.
+    const rowAs = (hasSubMenu ? "button" : "a");
+    const badgeConfig = typeof badge === "object" && badge !== null ? badge : null;
+    const badgeValue = (_d = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.count) !== null && _d !== void 0 ? _d : (typeof badge !== "object" ? badge : undefined);
+    const hasSubmenuBadge = (_e = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => {
+        var _a;
+        const subCfg = typeof sub.badge === "object" && sub.badge !== null
+            ? sub.badge
+            : null;
+        const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+        return value != null;
+    })) !== null && _e !== void 0 ? _e : false;
+    const isChildActive = subMenu === null || subMenu === void 0 ? void 0 : subMenu.some((sub) => sub.id === activeMenu);
+    const isParentActive = activeMenu === menu.id;
+    const isAnyActive = isParentActive || isChildActive;
+    const handleToggleSubMenu = (e) => {
+        if (!disabled && hasSubMenu) {
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
+            return;
+        }
+        if (!disabled)
+            handleClick === null || handleClick === void 0 ? void 0 : handleClick(menu);
+    };
+    // Pill-style nav item. The fill is a white overlay, not a brand tint: the sidebar is a
+    // near-black surface in BOTH modes, and a `primary.opacity` tint of a dark accent on it is
+    // imperceptible for most brands (measured 1.03-1.15 idle->hover) and exactly 1.000 for zinc
+    // light, whose primary[500] IS the sidebar colour. Brand identity stays in the accent bar
+    // and icon below. See interactionStates.test.ts.
+    const commonStyles = {
+        // `data-group` rather than `role="group"`: the row is now a real link/button, whose
+        // implicit role must not be overridden. Chakra's `_groupHover` accepts either.
+        "data-group": "",
+        display: "block",
+        textAlign: "left",
+        textDecoration: "none",
+        w: "100%",
+        borderRadius: "7px",
+        px: "10px",
+        py: "7px",
+        fontWeight: "medium",
+        border: "none",
+        borderLeft: "2px solid",
+        borderLeftColor: isAnyActive ? theme.colors.primary[500] : "transparent",
+        backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
+        color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
+        _hover: disabled
+            ? {}
+            : {
+                backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
+            },
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.6 : 1,
+        transition: "background 0.12s",
+    };
+    const buttonContent = (_jsxs(Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", children: [_jsxs(Box, { position: "relative", display: "flex", alignItems: "center", children: [_jsx(Icon, { as: icon, fontSize: "1rem", verticalAlign: "middle", color: isAnyActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isAnyActive ? undefined : { color: "white" }, transition: "color 0.12s" }), toggle && (badgeValue != null || hasSubmenuBadge) && (_jsx(Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && (_jsx(TruncatedTextWithTooltip
+                    // open={isOpen}
+                    , { 
+                        // open={isOpen}
+                        fontSize: "13px", lineHeight: "1", flex: "1", color: isAnyActive ? activeAccent.label : "whiteAlpha.900", fontWeight: isAnyActive ? 600 : 500, _groupHover: isAnyActive ? undefined : { color: "white" }, children: title }))] }), !toggle && (_jsxs(Flex, { align: "center", gap: "0.375rem", children: [(() => {
+                        var _a, _b, _c;
+                        const value = badgeValue;
+                        const colorScheme = (_a = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.color) !== null && _a !== void 0 ? _a : "teal";
+                        const radius = (_b = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.radius) !== null && _b !== void 0 ? _b : "full";
+                        const variant = (_c = badgeConfig === null || badgeConfig === void 0 ? void 0 : badgeConfig.variant) !== null && _c !== void 0 ? _c : "subtle";
+                        return value != null ? (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                    })(), locked && _jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }), hasSubMenu && (_jsx(Icon, { as: isOpen ? ChevronDown : ChevronRight, fontSize: "1rem", color: "whiteAlpha.400" }))] }))] }));
+    if (toggle) {
+        // Collapsed sidebar: show Popover
+        return (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { ...commonStyles, as: rowAs, type: hasSubMenu ? "button" : undefined, href: hasSubMenu ? undefined : url !== null && url !== void 0 ? url : "#", "aria-label": title, "aria-current": isAnyActive ? "page" : undefined, "aria-disabled": disabled ? true : undefined, onClick: (e) => {
+                            if (!hasSubMenu && url && isBrowserNavigationGesture(e))
+                                return;
+                            e.preventDefault();
+                            handleToggleSubMenu(e);
+                        }, "data-menu-id": String((_f = menu.id) !== null && _f !== void 0 ? _f : title), children: buttonContent }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: 'none', cursor: disabled ? "not-allowed" : "pointer", zIndex: 1500, children: _jsx(PopoverBody, { p: "0.625rem", color: "white", children: _jsx(MenuPopoverContent, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(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": disabled ? true : undefined, onClick: (e) => {
+                    if (!hasSubMenu && url && isBrowserNavigationGesture(e))
+                        return;
+                    e.preventDefault();
+                    handleToggleSubMenu(e);
+                }, "data-menu-id": String((_g = menu.id) !== null && _g !== void 0 ? _g : title), children: buttonContent }), hasSubMenu && (_jsx(Collapse, { in: isOpen, animateOpacity: true, children: _jsx(Box, { id: submenuPanelId, "data-collapse": "true", "data-menu-id": String((_h = menu.id) !== null && _h !== void 0 ? _h : title), "data-open": isOpen ? "true" : "false", mt: "0.125rem", sx: {
+                        transition: "opacity 0.28s ease, transform 0.28s ease",
+                        opacity: isOpen ? 1 : 0,
+                        transform: isOpen ? "translateY(0)" : "translateY(-6px)",
+                    }, children: subMenu.map((sub, sIdx) => {
+                        var _a, _b, _c;
+                        const isSubActive = activeMenu === sub.id;
+                        return (_jsxs(Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", py: "5px", pl: "30px", pr: "10px", borderRadius: "6px", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: sub.disabled ? 0.6 : 1, cursor: sub.disabled ? "not-allowed" : "pointer", pointerEvents: sub.disabled ? "none" : "auto", onClick: (e) => {
+                                if (sub.url && isBrowserNavigationGesture(e))
+                                    return;
+                                e.preventDefault();
+                                if (!sub.disabled)
+                                    handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
+                            }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? (_jsx(Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : (_jsx(Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })), _jsx(TruncatedTextWithTooltip, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
+                                            // open={isOpen}
+                                            color: isSubActive ? "whiteAlpha.900" : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (() => {
+                                    var _a, _b, _c, _d;
+                                    const subCfg = typeof sub.badge === "object" && sub.badge !== null
+                                        ? sub.badge
+                                        : null;
+                                    const value = (_a = subCfg === null || subCfg === void 0 ? void 0 : subCfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                                    const colorScheme = (_b = subCfg === null || subCfg === void 0 ? void 0 : subCfg.color) !== null && _b !== void 0 ? _b : "teal";
+                                    const radius = (_c = subCfg === null || subCfg === void 0 ? void 0 : subCfg.radius) !== null && _c !== void 0 ? _c : "full";
+                                    const variant = (_d = subCfg === null || subCfg === void 0 ? void 0 : subCfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                                    return value != null ? (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                                })()] }, `${String((_c = (_b = sub.id) !== null && _b !== void 0 ? _b : sub.title) !== null && _c !== void 0 ? _c : sIdx)}-${sIdx}`));
+                    }) }) }))] }));
+};
+export default MenuItemBox;

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import MenuItemBox from "./MenuItemBox";
+const MenuItems = ({ menus, activeMenu, handleMenuClick, toggle, selectedSubMenu, }) => {
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const [lastClickY, setLastClickY] = useState(null);
+    useEffect(() => {
+        const parent = menus.find((m) => { var _a; return (_a = m.subMenu) === null || _a === void 0 ? void 0 : _a.some((s) => s.id === activeMenu); });
+        if (parent) {
+            setOpenMenuId(parent.id);
+        }
+        else if (menus.some((m) => m.id === activeMenu)) {
+            setOpenMenuId(activeMenu);
+        }
+    }, [activeMenu, menus]);
+    const handleToggle = (menu, clickY) => {
+        setOpenMenuId((prev) => (prev === menu.id ? null : menu.id));
+        if (typeof clickY === "number")
+            setLastClickY(clickY);
+    };
+    useEffect(() => {
+        if (openMenuId == null)
+            return;
+        const container = document.getElementById("sidebar-scroll-container");
+        if (!container)
+            return;
+        const collapse = container.querySelector(`[data-collapse="true"][data-menu-id="${openMenuId}"][data-open="true"]`);
+        const header = container.querySelector(`[data-menu-id="${openMenuId}"]`);
+        if (!collapse)
+            return;
+        const cRect = container.getBoundingClientRect();
+        const tRect = collapse.getBoundingClientRect();
+        const hRect = header === null || header === void 0 ? void 0 : header.getBoundingClientRect();
+        const topGap = 16;
+        const bottomGap = 16;
+        if (lastClickY != null) {
+            if (hRect) {
+                const toTop = container.scrollTop + (hRect.top - cRect.top) - topGap;
+                container.scrollTo({
+                    top: Math.max(toTop, 0),
+                    behavior: "smooth",
+                });
+                requestAnimationFrame(() => {
+                    const ncRect = container.getBoundingClientRect();
+                    const ntRect = collapse.getBoundingClientRect();
+                    if (ntRect.bottom > ncRect.bottom - bottomGap) {
+                        container.scrollTo({
+                            top: container.scrollTop +
+                                (ntRect.bottom - (ncRect.bottom - bottomGap)),
+                            behavior: "smooth",
+                        });
+                    }
+                });
+            }
+            else {
+                const delta = tRect.bottom - lastClickY;
+                if (delta > 0) {
+                    container.scrollTo({
+                        top: container.scrollTop + delta + bottomGap,
+                        behavior: "smooth",
+                    });
+                }
+            }
+        }
+        else {
+            if (hRect) {
+                container.scrollTo({
+                    top: container.scrollTop + (hRect.top - cRect.top) - topGap,
+                    behavior: "smooth",
+                });
+                requestAnimationFrame(() => {
+                    const ncRect = container.getBoundingClientRect();
+                    const ntRect = collapse.getBoundingClientRect();
+                    if (ntRect.bottom > ncRect.bottom - bottomGap) {
+                        container.scrollTo({
+                            top: container.scrollTop +
+                                (ntRect.bottom - (ncRect.bottom - bottomGap)),
+                            behavior: "smooth",
+                        });
+                    }
+                });
+            }
+            else if (tRect.bottom > cRect.bottom) {
+                container.scrollTo({
+                    top: container.scrollTop + (tRect.bottom - cRect.bottom) + bottomGap,
+                    behavior: "smooth",
+                });
+            }
+            else if (tRect.top < cRect.top) {
+                container.scrollTo({
+                    top: container.scrollTop - (cRect.top - tRect.top) - topGap,
+                    behavior: "smooth",
+                });
+            }
+        }
+    }, [openMenuId, lastClickY]);
+    // Derive section labels from the optional `group` field on menu items: a label
+    // is rendered the first time a new group value appears, with a divider before
+    // every group after the first (the label hides when collapsed, the divider stays).
+    let lastGroup;
+    let groupCount = 0;
+    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "2px", children: menus.map((menu, idx) => {
+            var _a, _b, _c;
+            const showGroup = !!menu.group && menu.group !== lastGroup;
+            const isFirstGroup = showGroup && groupCount === 0;
+            if (showGroup) {
+                lastGroup = menu.group;
+                groupCount += 1;
+            }
+            return (_jsxs(React.Fragment, { children: [showGroup && !isFirstGroup && (_jsx(Box, { h: "1px", bg: "whiteAlpha.100", mx: "8px", my: "5px" })), showGroup && !toggle && (_jsx(Box, { "aria-hidden": "true", px: "10px", pt: "10px", pb: "3px", fontSize: "9.5px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: "whiteAlpha.600", whiteSpace: "nowrap", overflow: "hidden", children: menu.group })), _jsx(MenuItemBox, { menu: menu, activeMenu: activeMenu, toggle: toggle, handleClick: handleMenuClick, selectedSubMenu: selectedSubMenu, isOpen: openMenuId === menu.id, onToggle: handleToggle })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
+        }) }));
+};
+export default MenuItems;

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon, Flex, Badge } from "@chakra-ui/react";
+import { LockKeyhole } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { isDarkCanvas } from "../../../Theme/tokens/builders/accentText";
+import { useSidebarActiveAccent } from "../sidebarAccentColors";
+import TruncatedTextWithTooltip from "./TextTruncation";
+const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
+    var _a, _b, _c;
+    const theme = useCustomTheme();
+    const isDark = isDarkCanvas((_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : "#ffffff");
+    const activeAccent = useSidebarActiveAccent(theme.colors, isDark);
+    const { title, icon, subMenu, badge, locked } = menu;
+    const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
+    const isParentActive = activeMenu === menu.id;
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_c = menu.url) !== null && _c !== void 0 ? _c : "#", "aria-current": !hasSubMenu && isParentActive ? "page" : undefined, textDecoration: "none", align: "center", gap: "8px", px: "8px", py: hasSubMenu ? "6px" : "8px", mb: hasSubMenu ? "4px" : 0, borderBottom: hasSubMenu ? "1px solid" : undefined, borderColor: hasSubMenu ? "whiteAlpha.100" : undefined, borderRadius: hasSubMenu ? 0 : "7px", bg: !hasSubMenu && isParentActive ? theme.colors.primary.opacity[16] : "transparent", _hover: !hasSubMenu ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
+                    if (!hasSubMenu) {
+                        e.preventDefault();
+                        handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
+                    }
+                }, cursor: !hasSubMenu ? "pointer" : "default", children: [_jsx(Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : "whiteAlpha.700" }), _jsx(TruncatedTextWithTooltip, { fontWeight: 600, fontSize: "13px", flex: "1", color: "whiteAlpha.900", children: title }), (() => {
+                        var _a, _b, _c, _d;
+                        const cfg = typeof badge === "object" && badge !== null
+                            ? badge
+                            : null;
+                        const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+                        const colorScheme = (_b = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _b !== void 0 ? _b : "teal";
+                        const radius = (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full";
+                        const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                        return value != null ? (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                    })(), locked && _jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
+                var _a;
+                const isSubActive = activeMenu === sub.id;
+                return (_jsxs(Flex, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": sub.disabled ? true : undefined, textDecoration: "none", onClick: (e) => {
+                        e.preventDefault();
+                        if (!sub.disabled)
+                            handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub);
+                    }, px: "8px", py: "7px", mb: "2px", borderRadius: "7px", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.primary[500] : "transparent", bg: isSubActive ? theme.colors.primary.opacity[16] : "transparent", _hover: {
+                        bg: !sub.disabled ? "whiteAlpha.100" : "transparent",
+                        cursor: !sub.disabled ? "pointer" : "not-allowed",
+                    }, opacity: sub.disabled ? 0.5 : 1, pointerEvents: sub.disabled ? "none" : "auto", transition: "background 0.12s", children: [_jsxs(Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [_jsx(Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }), _jsx(TruncatedTextWithTooltip, { fontSize: "12.5px", fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : "whiteAlpha.900", _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" })) : (() => {
+                            var _a, _b, _c, _d;
+                            const cfg = typeof sub.badge === "object" && sub.badge !== null
+                                ? sub.badge
+                                : null;
+                            const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof sub.badge !== "object" ? sub.badge : undefined);
+                            const colorScheme = (_b = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _b !== void 0 ? _b : "teal";
+                            const radius = (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full";
+                            const variant = (_d = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _d !== void 0 ? _d : "subtle";
+                            return value != null ? (_jsx(Badge, { colorScheme: colorScheme, fontSize: "0.625rem", variant: variant, borderRadius: radius, children: value })) : null;
+                        })()] }, sub.id || sub.title));
+            })] }));
+};
+export default MenuPopoverContent;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Flex, Text, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+const OtherApps = ({ toggle, otherApps }) => {
+    const theme = useCustomTheme();
+    if (!otherApps || otherApps.length === 0)
+        return null;
+    const appIcon = (app) => {
+        var _a;
+        return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", color: "whiteAlpha.500", fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
+    };
+    // Grid cell: icon on top, truncated label below (label hidden when collapsed).
+    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "6px", cursor: "pointer", border: "none", bg: "transparent", w: "100%", _hover: { backgroundColor: "whiteAlpha.100" }, transition: "background 0.12s", onClick: app.onClick, children: [appIcon(app), !toggle && (_jsx(Text, { fontSize: "9.5px", color: "whiteAlpha.500", textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const flyoutBody = (app) => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", gap: "0.5rem", mb: "0.25rem", onClick: app.onClick, children: [(_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })), _jsx(Text, { fontSize: "0.875rem", fontWeight: 700, color: theme.colors.white, children: app.name })] }), app.description && (_jsx(Text, { fontSize: "0.75rem", color: "whiteAlpha.600", children: app.description }))] }));
+    };
+    return (_jsxs(Box, { borderTop: "1px solid", borderColor: "whiteAlpha.100", p: toggle ? "6px" : "8px 6px", flexShrink: 0, children: [!toggle && (_jsx(Text, { fontSize: "9.5px", fontWeight: 600, color: "whiteAlpha.400", letterSpacing: "0.1em", textTransform: "uppercase", px: "8px", pt: "2px", pb: "5px", children: "Switch app" })), _jsx(Box, { display: "grid", gridTemplateColumns: toggle ? "1fr" : "repeat(4, 1fr)", gap: "3px", children: otherApps.map((app) => toggle ? (_jsxs(Popover, { trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Box, { w: "100%", children: appCell(app) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { borderRadius: "0.5rem", bg: theme.colors.sidebar.background[200], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: "white", children: _jsx(PopoverBody, { p: "0.75rem", children: flyoutBody(app) }) }) })] }, app.name)) : (_jsx(Box, { w: "100%", children: appCell(app) }, app.name))) })] }));
+};
+export default OtherApps;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { Box, Text } from "@chakra-ui/react";
+import ToolTip from "../../ToolTip/ToolTip";
+const OverflowTooltipText = ({ children, placement = "bottom", maxWidth = "100%", isTooltipDisabled = false, ...textProps }) => {
+    const textRef = useRef(null);
+    const shadowRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const checkTruncation = () => {
+            const textEl = textRef.current;
+            const shadowEl = shadowRef.current;
+            if (textEl && shadowEl) {
+                const visibleWidth = textEl.offsetWidth;
+                const fullTextWidth = shadowEl.scrollWidth;
+                setIsTruncated(fullTextWidth > visibleWidth + 1);
+            }
+        };
+        checkTruncation();
+        const resizeObserver = new ResizeObserver(checkTruncation);
+        if (textRef.current) {
+            resizeObserver.observe(textRef.current);
+        }
+        return () => resizeObserver.disconnect();
+    }, [children]);
+    const shouldShowTooltip = isTruncated && !isTooltipDisabled;
+    return (_jsxs(_Fragment, { children: [_jsx(ToolTip, { label: children, isDisabled: !shouldShowTooltip, placement: placement, hasArrow: true, children: _jsx(Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: maxWidth, ...textProps, children: children }) }), _jsx(Box, { ref: shadowRef, position: "absolute", visibility: "hidden", whiteSpace: "nowrap", fontSize: textProps.fontSize, fontWeight: textProps.fontWeight, fontFamily: textProps.fontFamily, lineHeight: textProps.lineHeight, px: textProps.px, py: textProps.py, children: children })] }));
+};
+export default OverflowTooltipText;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { Tooltip, Text, Box } from "@chakra-ui/react";
+const TruncatedTextWithTooltip = ({ children, ...props }) => {
+    const textRef = useRef(null);
+    const shadowRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useEffect(() => {
+        const checkTruncation = () => {
+            const textEl = textRef.current;
+            const shadowEl = shadowRef.current;
+            if (textEl && shadowEl) {
+                const visibleWidth = textEl.offsetWidth;
+                const fullTextWidth = shadowEl.scrollWidth;
+                setIsTruncated(fullTextWidth > visibleWidth);
+            }
+        };
+        checkTruncation();
+        const resizeObserver = new ResizeObserver(checkTruncation);
+        if (textRef.current) {
+            resizeObserver.observe(textRef.current);
+        }
+        return () => resizeObserver.disconnect();
+    }, [children]);
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: _jsx(Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), _jsx(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 })] }));
+};
+export default TruncatedTextWithTooltip;

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

@@ -0,0 +1,31 @@
+import { useContext, useMemo } from "react";
+import { lightPalettes } from "../../Theme/tokens/brands";
+import { ThemeModeContext } from "../../Theme/provider/PixelizeThemeProvider";
+export const getSidebarActiveAccent = (colors, brand, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const fallbackIcon = (_d = (_b = (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : "#ffffff";
+    const fallbackLabel = (_h = (_f = (_e = colors.primary) === null || _e === void 0 ? void 0 : _e[100]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[100]) !== null && _h !== void 0 ? _h : "#ffffff";
+    if (!isDark)
+        return { icon: fallbackIcon, label: fallbackLabel };
+    const lightPrimary = brand ? (_j = lightPalettes[brand]) === null || _j === void 0 ? void 0 : _j.primary : undefined;
+    return {
+        icon: (_k = lightPrimary === null || lightPrimary === void 0 ? void 0 : lightPrimary[300]) !== null && _k !== void 0 ? _k : fallbackIcon,
+        label: (_l = lightPrimary === null || lightPrimary === void 0 ? void 0 : lightPrimary[100]) !== null && _l !== void 0 ? _l : fallbackLabel,
+    };
+};
+/**
+ * `sidebar.background` never inverts across modes (`buildDarkPalette.ts`), but `primary`
+ * does — so `primary[300]`/`primary[100]` correctly read as a light accent/label against a
+ * dark canvas in light mode, then invert to near-black in dark mode against that SAME
+ * permanently-dark canvas. Reusing each rung's own light-mode value in dark mode is the
+ * exact pairing already proven legible today.
+ *
+ * `brand` comes from `PixelizeThemeProvider`'s context, read directly (not via the throwing
+ * `useThemeMode()`) so a consumer on a plain `ChakraProvider` — dark mode is opt-in per
+ * CLAUDE.md — degrades to the current-mode value instead of crashing.
+ */
+export const useSidebarActiveAccent = (colors, isDark) => {
+    const themeMode = useContext(ThemeModeContext);
+    const brand = themeMode === null || themeMode === void 0 ? void 0 : themeMode.brand;
+    return useMemo(() => getSidebarActiveAccent(colors, brand, isDark), [colors, brand, isDark]);
+};

package/dist/esm/Components/SignInActivityTable/SignInActivityTable.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, Flex, Heading, Skeleton, Table, Tbody, Td, Text, Th, Thead, Tr, VStack, } from "@chakra-ui/react";
+import { MonitorSmartphone } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import EmptyState from "../EmptyState/EmptyState";
+const DEFAULT_LABELS = {
+    title: "Recent Sign-in Devices",
+    browser: "Browser",
+    device: "Device",
+    recentActivity: "Recent Activity",
+    noActivity: "No recent sign-in activity",
+};
+const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
+    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
+    const heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
+    const headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
+    const shadow = (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _o === void 0 ? void 0 : _o.default) !== null && _p !== void 0 ? _p : "#0000000D";
+    const thStyle = {
+        fontSize: "0.7rem",
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        color: muted,
+        borderColor: border,
+        py: 3,
+    };
+    return (_jsxs(Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: `0 1px 2px ${shadow}`, overflow: "hidden", children: [_jsx(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), _jsx(Box, { overflowX: "auto", children: isLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? (_jsx(EmptyState, { icon: MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.browser }), _jsx(Th, { ...thStyle, children: labels.device }), _jsx(Th, { ...thStyle, children: labels.recentActivity })] }) }), _jsx(Tbody, { children: devices.map((device, index) => (_jsxs(Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: device.device }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: _jsx(Text, { children: device.activity }) })] }, index))) })] })) })] }));
+};
+export default SignInActivityTable;

package/dist/esm/Components/SignInActivityTable/SignInActivityTableProps.js

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

package/dist/esm/Components/Skeletons/Skeleton.stories.js

@@ -0,0 +1,6 @@
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import Skeletons from './Skeletons'; // adjust the import path as necessary
+// import { ChakraProvider } from '@chakra-ui/react';
+// import { SkeletonProps } from './SkeletonProps'; // adjust the import path as necessary
+export {};

package/dist/esm/Components/Skeletons/SkeletonProps.js

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

package/dist/esm/Components/Skeletons/Skeletons.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Skeleton, SkeletonCircle, SkeletonText } from "@chakra-ui/react";
+export default function Skeletons({ startColor, endColor, height = "20px", isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
+    return (_jsxs(_Fragment, { children: [type === "skeleton" && (_jsx(Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, children: children })), type === "circle" && _jsx(SkeletonCircle, { size: size, speed: speed }), type === "text" && (_jsx(SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
+}

package/dist/esm/Components/Slider/Slider.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback } from "react";
+import { Box, Flex, IconButton, Image, useBreakpointValue, AspectRatio } from "@chakra-ui/react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { colors } = useCustomTheme();
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const timeoutRef = useRef(null);
+    const isMobile = (_a = useBreakpointValue({ base: true, md: false })) !== null && _a !== void 0 ? _a : false;
+    const slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
+    const nextSlide = useCallback(() => {
+        setCurrentIndex((prev) => (prev + 1) % slides.length);
+    }, [slides.length]);
+    const prevSlide = useCallback(() => {
+        setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
+    }, [slides.length]);
+    useEffect(() => {
+        if (interval > 0) {
+            timeoutRef.current = setTimeout(nextSlide, interval);
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [currentIndex, interval, nextSlide]);
+    useEffect(() => {
+        if (currentIndex >= slides.length) {
+            setCurrentIndex(0);
+        }
+        // eslint-disable-next-line
+    }, [slides.length]);
+    const ratio = (_b = useBreakpointValue({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
+    return (_jsxs(Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", children: [_jsx(Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: "transform 0.5s ease", children: [...slides]
+                    .sort((a, b) => a.order - b.order)
+                    .map((image, idx) => (_jsx(Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: _jsx(AspectRatio, { ratio: ratio, w: "100%", children: _jsx(Image, { src: isMobile && image.mobilePreviewUrl
+                                ? image.mobilePreviewUrl
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: _jsx(ChevronLeft, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200] } }), _jsx(IconButton, { icon: _jsx(ChevronRight, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[200] } })] })), slides.length > 1 && (_jsx(Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => (_jsx(Box, { w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), transition: "all 0.3s" }, idx))) }))] }));
+};
+export default Slider;

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import ToolTip from "../ToolTip/ToolTip";
+import { resolveStagePalette, } from "./StageProgressProps";
+const sizeMap = {
+    sm: { arrow: 12, minW: "120px", h: "28px", px: 3, font: "0.75rem", icon: 12 },
+    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 clipFor = (index, total, a) => {
+    const isFirst = index === 0;
+    const isLast = index === total - 1;
+    if (total === 1)
+        return "none";
+    if (isFirst)
+        return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${a}px) 100%, 0 100%)`;
+    if (isLast)
+        return `polygon(0 0, 100% 0, 100% 100%, 0 100%, ${a}px 50%)`;
+    return `polygon(0 0, calc(100% - ${a}px) 0, 100% 50%, calc(100% - ${a}px) 100%, 0 100%, ${a}px 50%)`;
+};
+const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
+    var _a;
+    const theme = useCustomTheme();
+    const palette = resolveStagePalette(theme, colorScheme);
+    const ref = useRef(null);
+    const s = sizeMap[size];
+    useEffect(() => {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    const bg = state === "active"
+        ? palette.strong
+        : state === "completed"
+            ? palette.soft
+            : palette.muted;
+    const color = state === "active"
+        ? palette.onStrong
+        : state === "completed"
+            ? palette.softText
+            : palette.mutedText;
+    const interactive = !isReadOnly && !disabled;
+    const isFirst = index === 0;
+    const isLast = index === total - 1;
+    const isChevron = variant === "chevron";
+    // Chevron pads extra on the left to clear the inbound notch and on the right
+    // to keep text clear of the outgoing arrow point; others are centered.
+    const leftPad = isChevron && !isFirst ? s.arrow + s.px * 4 : s.px * 2;
+    const rightPad = isChevron ? s.arrow + s.px * 4 : s.px * 2;
+    // Chevron overlaps into the previous point, leaving a thin 2px divider.
+    const overlap = isChevron && !isFirst ? -(s.arrow - 2) : 0;
+    const clipPath = isChevron ? clipFor(index, total, s.arrow) : "none";
+    const borderRadius = variant === "pills"
+        ? "full"
+        : variant === "bar"
+            ? isFirst && isLast
+                ? "8px"
+                : isFirst
+                    ? "8px 2px 2px 8px"
+                    : isLast
+                        ? "2px 8px 8px 2px"
+                        : "2px"
+            : "0";
+    // Upcoming pills read as outlined; other states stay filled.
+    const isOutlinePill = variant === "pills" && state === "upcoming";
+    const hoverStyles = interactive
+        ? state === "active"
+            ? { bg: palette.hover }
+            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+        : undefined;
+    const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
+    const content = (_jsx(Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, 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: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: _jsxs(Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && (_jsx(Check, { size: s.icon, style: { flexShrink: 0 } })), _jsx(Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
+    if (showTooltip) {
+        return (_jsx(ToolTip, { label: label, placement: "top", openDelay: 300, children: content }));
+    }
+    return content;
+};
+export default StageItem;