pixelize-design-library 2.4.2-beta.4 → 2.4.2-beta.41

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

@@ -1,4 +1,5 @@
 import type { ElementType } from "react";
+/** Footer identity block (UserFooter); avatar falls back to initials derived from name when absent. */
 export type SidebarUser = {
     name: string;
     role?: string;
@@ -6,74 +7,75 @@ export type SidebarUser = {
     initials?: string;
     onClick?: () => void;
 };
+/** Docked/collapsible left rail with its own responsive overlay — not NavigationBar (top bar) or WorkspaceWindow (floating panel). */
 export type SidebarProps = {
     menus: MenuProps[];
+    /** Matched against each menu's `title` first, then `id` — a title that collides with another menu's `id` wins silently. */
     activeMenu: string | number;
     handleMenuClick?: (menu: MenuProps) => void;
     handleSecondaryNavClick?: (menu: MenuProps) => void;
     toggle: boolean;
     changeToggle: () => void;
+    /** Falls back to a rendered brand mark (DefaultLogo) tinted by primary color when omitted. */
     logo?: string;
     companyName: string;
     companySubtitle?: string;
+    /** Footer identity block is omitted entirely (not just simplified) when this is not provided. */
     user?: SidebarUser;
+    /** true hides the Add New row completely, rather than disabling it. */
     isDisableAddNew?: boolean;
     onAddNewClick?: () => void;
+    /** @deprecated Dead — threaded down to MenuItemBox but never read there; no known consumer usage. */
     selectedSubMenu?: string | null;
     selectedSecondaryItem?: string | number | null;
+    /** Shows skeleton rows instead of MenuItems; header and footer render normally. */
     isLoading?: boolean;
+    /** Defaults to 15 when isLoading is true; ignored otherwise. */
     loadingLines?: number;
+    /** Not a direct render switch — on change it calls `changeToggle()` once; nothing collapses unless that updates `toggle`. */
     open?: boolean;
+    /** Legacy "Switch app" grid — AppSwitcher supersedes it; avoid wiring both into one shell. */
     otherApps?: OtherAppsProps['otherApps'];
-    /**
-     * Below the `lg` breakpoint the sidebar renders as a slide-in overlay above
-     * the content (it does not occupy layout space). `mobileOpen` controls that
-     * overlay's visibility; it has no effect at `lg` and up, where the sidebar is
-     * always inline. Wire it to the NavigationBar hamburger (`onSideBarToggole`).
-     */
+    /** Controls the overlay's visibility below `lg`; no effect once inline at `lg`+. Wire to NavigationBar's `onSideBarToggole`. */
     mobileOpen?: boolean;
     /** Called when the overlay is dismissed (backdrop click, Esc, close button, or swipe). */
     onMobileClose?: () => void;
-    /**
-     * Forces the "mobile navbar" presentation at ANY width: the sidebar leaves the
-     * inline layout and behaves as the slide-in overlay (hamburger + full-screen
-     * content), exactly like below `lg` — but on big screens too. This is a layout
-     * switch, not a close: toggling it never hides the navigation, it only changes
-     * how it is presented. When `false` the breakpoint alone decides (inline at
-     * `lg`+, overlay below `lg`).
-     */
+    /** Forces overlay presentation at any width — a layout switch, not a close; never hides navigation. */
     mobileNav?: boolean;
-    /**
-     * Handler for the footer Hide/Show control that flips `mobileNav`. Render the
-     * control only when provided. Wire it so entering mobile-nav also opens the
-     * overlay (keeps the sidebar visible) and leaving it returns to the docked
-     * sidebar — see the playground for the canonical wiring.
-     */
+    /** Backs the footer Hide/Show control; render it only when this is provided. */
     onToggleMobileNav?: () => void;
-    /**
-     * Overlay peek: the sidebar shows without pinning, and closes itself when the pointer
-     * leaves the panel. Wire to `NavigationBar`'s `onSideBarPeek`.
-     */
+    /** Shows the sidebar without pinning — closes on pointer-leave. Wire to NavigationBar's `onSideBarPeek`. */
     peekOpen?: boolean;
     onPeekEnd?: () => void;
 };
+/** One nav item; `subMenu` renders inline (expand/collapse), `secondaryItems` opens a separate SecondaryBar instead. */
 export type MenuProps = {
     id: string | number;
     title: string;
     icon?: ElementType;
+    /** Ignored when subMenu is non-empty — the row becomes a toggle button instead of a link. */
     url: string;
     disabled?: boolean;
+    /** Shows a lock icon only — does not block the click handler; pair with `disabled` to prevent it. */
     locked?: boolean;
+    /** Runtime also accepts a bare number/string (legacy shorthand) though the type only declares the object shape. */
     badge?: {
+        /** Also triggers the small red dot on the icon when the rail is collapsed. */
         count?: number;
+        /** Chakra colorScheme name; defaults to "teal". */
         color?: string;
+        /** Chakra borderRadius value; defaults to "full". */
         radius?: string | number;
+        /** Chakra Badge variant; defaults to "subtle". */
         variant?: string;
     };
     subMenu?: MenuProps[];
+    /** Non-empty on the active menu auto-collapses the main rail and renders a SecondaryBar, regardless of the `toggle` prop. */
     secondaryItems?: MenuProps[];
+    /** First item with a new value renders a section label plus divider; items must be pre-sorted by group. */
     group?: string;
 };
+/** Props for the internal MenuItems renderer — a narrowed slice of SidebarProps. */
 export type RenderMenuType = {
     menus: MenuProps[];
     activeMenu: string | number;
@@ -82,25 +84,37 @@ export type RenderMenuType = {
     selectedSubMenu?: string | null;
     selectedSecondaryItem?: string | number | null;
 };
+/** Secondary flyout panel props; `defaultCollapsed` only seeds initial state, then the panel self-manages it. */
 export type SecondaryBarProps = {
     items?: MenuProps[];
+    /** Defaults to true (collapsed) when omitted. */
     defaultCollapsed?: boolean;
+    /** Defaults to "3.5rem". */
     collapsedWidth?: string | number;
+    /** Defaults to "10rem". */
     expandedWidth?: string | number;
     headerFontSize?: string;
     itemFontSize?: string;
+    /** Matched by string equality against either the item's id or title, whichever matches. */
     selected?: string | number | null;
     onItemClick?: (item: MenuProps) => void;
+    /** Also used as the collapsed-state tooltip label. */
     title?: string;
+    /** Shown only in the expanded header — hidden entirely while collapsed. */
     icon?: ElementType;
 };
+/** "Switch app" footer grid; becomes hover popovers when the sidebar is collapsed. */
 export type OtherAppsProps = {
     toggle: boolean;
     otherApps: {
+        /** Used as the React list key — must be unique among otherApps entries. */
         name: string;
+        /** Fills the fallback dot (no icon) and its glow — ignored when `icon` is provided. */
         color: string;
+        /** Shown only in the collapsed-state hover flyout, never in the expanded grid cell. */
         description?: string;
         onClick: () => void;
+        /** A pre-rendered ReactNode, unlike MenuProps.icon (a component reference). */
         icon?: React.ReactNode;
     }[];
 };

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

@@ -21,6 +21,9 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
     const { title, icon, disabled, locked, badge, subMenu, url } = menu;
+    // `locked` blocks interaction the same as `disabled` — a locked item showing the padlock icon
+    // but still fully clickable was a real gotcha (see COMPONENT-GOTCHAS.md).
+    const isBlocked = disabled || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const submenuPanelId = `submenu-${String((_a = menu.id) !== null && _a !== void 0 ? _a : title)}`;
     // A submenu parent only expands, so it is a button; every other row navigates.
@@ -40,11 +43,11 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
     const isParentActive = activeMenu === menu.id;
     const isAnyActive = isParentActive || isChildActive;
     const handleToggleSubMenu = (e) => {
-        if (!disabled && hasSubMenu) {
+        if (!isBlocked && hasSubMenu) {
             onToggle === null || onToggle === void 0 ? void 0 : onToggle(menu, e === null || e === void 0 ? void 0 : e.clientY);
             return;
         }
-        if (!disabled)
+        if (!isBlocked)
             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
@@ -68,14 +71,14 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
         borderLeft: "2px solid",
         borderLeftColor: isAnyActive ? theme.colors.sidebar.activeIcon : "transparent",
         backgroundColor: isAnyActive ? "whiteAlpha.300" : "transparent",
-        color: disabled ? "whiteAlpha.400" : "whiteAlpha.700",
-        _hover: disabled
+        color: isBlocked ? "whiteAlpha.400" : "whiteAlpha.700",
+        _hover: isBlocked
             ? {}
             : {
                 backgroundColor: isAnyActive ? "whiteAlpha.400" : "whiteAlpha.200",
             },
-        cursor: disabled ? "not-allowed" : "pointer",
-        opacity: disabled ? 0.6 : 1,
+        cursor: isBlocked ? "not-allowed" : "pointer",
+        opacity: isBlocked ? 0.6 : 1,
         transition: "background 0.12s",
     };
     const buttonContent = ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.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) && ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.red[400] }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default
@@ -92,14 +95,14 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                     })(), locked && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: "whiteAlpha.600" }), hasSubMenu && ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: isOpen ? lucide_react_1.ChevronDown : lucide_react_1.ChevronRight, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon }))] }))] }));
     if (toggle) {
         // Collapsed sidebar: show Popover
-        return ((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, { ...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) => {
+        return ((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, { ...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": isBlocked ? true : undefined, onClick: (e) => {
                             if (!hasSubMenu && url && isBrowserNavigationGesture(e))
                                 return;
                             e.preventDefault();
                             handleToggleSubMenu(e);
-                        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }) }), (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: disabled ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: "0.625rem", color: "white", children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
+                        }, "data-menu-id": String((_d = menu.id) !== null && _d !== void 0 ? _d : title), children: buttonContent }) }), (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: isBlocked ? "not-allowed" : "pointer", zIndex: 1500, children: (0, jsx_runtime_1.jsx)(react_1.PopoverBody, { p: "0.625rem", color: "white", children: (0, jsx_runtime_1.jsx)(MenuPopoverContent_1.default, { menu: menu, handleMenuClick: handleClick, activeMenu: activeMenu }) }) }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.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) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.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 && isBrowserNavigationGesture(e))
                         return;
                     e.preventDefault();
@@ -111,11 +114,12 @@ const MenuItemBox = ({ menu, activeMenu, toggle, handleClick, isOpen, onToggle,
                     }, children: subMenu.map((sub, sIdx) => {
                         var _a, _b, _c;
                         const isSubActive = activeMenu === sub.id;
-                        return ((0, jsx_runtime_1.jsxs)(react_1.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: "md", 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) => {
+                        const isSubBlocked = sub.disabled || sub.locked;
+                        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", py: "5px", pl: "30px", pr: "10px", borderRadius: "md", fontSize: "11.5px", backgroundColor: "transparent", _hover: { backgroundColor: "whiteAlpha.100" }, opacity: isSubBlocked ? 0.6 : 1, cursor: isSubBlocked ? "not-allowed" : "pointer", pointerEvents: isSubBlocked ? "none" : "auto", onClick: (e) => {
                                 if (sub.url && isBrowserNavigationGesture(e))
                                     return;
                                 e.preventDefault();
-                                if (!sub.disabled)
+                                if (!isSubBlocked)
                                     handleClick === null || handleClick === void 0 ? void 0 : handleClick(sub);
                             }, display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.5rem", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [sub.icon ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" })) : ((0, jsx_runtime_1.jsx)(react_1.Box, { w: "5px", h: "5px", borderRadius: "full", flexShrink: 0, bg: isSubActive ? activeAccent.icon : "whiteAlpha.500", _groupHover: isSubActive ? undefined : { bg: "whiteAlpha.700" }, transition: "background 0.12s" })), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: "12px", fontWeight: isSubActive ? 600 : 500, lineHeight: "1", 
                                             // open={isOpen}

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

@@ -13,15 +13,17 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
-    const { title, icon, subMenu, badge, locked } = menu;
+    const { title, icon, subMenu, badge, locked, disabled } = menu;
+    const isBlocked = disabled || locked;
     const hasSubMenu = !!(subMenu === null || subMenu === void 0 ? void 0 : subMenu.length);
     const isParentActive = activeMenu === menu.id;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "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 ? "none" : "md", bg: !hasSubMenu && isParentActive ? theme.colors.primary.opacity[16] : "transparent", _hover: !hasSubMenu ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { as: (hasSubMenu ? "div" : "a"), href: hasSubMenu ? undefined : (_a = menu.url) !== null && _a !== void 0 ? _a : "#", "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 ? "none" : "md", bg: !hasSubMenu && isParentActive ? "whiteAlpha.300" : "transparent", _hover: !hasSubMenu && !isBlocked ? { bg: "whiteAlpha.100" } : undefined, onClick: (e) => {
                     if (!hasSubMenu) {
                         e.preventDefault();
-                        handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
+                        if (!isBlocked)
+                            handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(menu);
                     }
-                }, cursor: !hasSubMenu ? "pointer" : "default", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : "whiteAlpha.700" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontWeight: 600, fontSize: "13px", flex: "1", color: theme.colors.white, children: title }), (() => {
+                }, cursor: !hasSubMenu ? (isBlocked ? "not-allowed" : "pointer") : "default", "aria-disabled": !hasSubMenu && isBlocked ? true : undefined, children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, fontSize: "1rem", flexShrink: 0, color: !hasSubMenu && isParentActive ? activeAccent.icon : "whiteAlpha.700" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontWeight: 600, fontSize: "13px", flex: "1", color: theme.colors.white, children: title }), (() => {
                         var _a, _b, _c, _d;
                         const cfg = typeof badge === "object" && badge !== null
                             ? badge
@@ -34,14 +36,15 @@ const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
                     })(), locked && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })] }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((sub) => {
                 var _a;
                 const isSubActive = activeMenu === sub.id;
-                return ((0, jsx_runtime_1.jsxs)(react_1.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) => {
+                const isSubBlocked = sub.disabled || sub.locked;
+                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: (_a = sub.url) !== null && _a !== void 0 ? _a : "#", "data-group": "", "aria-current": isSubActive ? "page" : undefined, "aria-disabled": isSubBlocked ? true : undefined, textDecoration: "none", onClick: (e) => {
                         e.preventDefault();
-                        if (!sub.disabled)
+                        if (!isSubBlocked)
                             handleMenuClick === null || handleMenuClick === void 0 ? void 0 : handleMenuClick(sub);
-                    }, px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "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: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: "12.5px", fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                    }, px: "8px", py: "7px", mb: "2px", borderRadius: "md", align: "center", justify: "space-between", gap: "8px", borderLeft: "2px solid", borderLeftColor: isSubActive ? theme.colors.sidebar.activeIcon : "transparent", bg: isSubActive ? "whiteAlpha.300" : "transparent", _hover: {
+                        bg: !isSubBlocked ? "whiteAlpha.100" : "transparent",
+                        cursor: !isSubBlocked ? "pointer" : "not-allowed",
+                    }, opacity: isSubBlocked ? 0.5 : 1, pointerEvents: isSubBlocked ? "none" : "auto", transition: "background 0.12s", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: "1", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: sub.icon, fontSize: "0.95rem", flexShrink: 0, color: isSubActive ? activeAccent.icon : "whiteAlpha.800", _groupHover: isSubActive ? undefined : { color: "white" }, transition: "color 0.12s" }), (0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: "12.5px", fontWeight: isSubActive ? 600 : 500, flex: 1, color: isSubActive ? activeAccent.label : theme.colors.white, _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? ((0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })) : (() => {
                             var _a, _b, _c, _d;
                             const cfg = typeof sub.badge === "object" && sub.badge !== null
                                 ? sub.badge

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

@@ -1,4 +1,6 @@
+/** One row of sign-in device history rendered by SignInActivityTable. */
 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;
     device: string;
     activity: string;
@@ -14,6 +16,7 @@ export type SignInActivityLabels = {
     recentActivity?: string;
     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 {
     devices: SignInDevice[];
     isLoading?: boolean;

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

@@ -1,4 +1,6 @@
 import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/react";
+/** Closed prop list, no ...rest, no borderRadius/margin — for those or a ref use Chakra's Skeleton (Primitives barrel) instead. */
 export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
+    /** isLoaded, children, bg, color, fadeDuration only apply to type="skeleton" — circle/text accept but silently ignore them. */
     type: "skeleton" | "circle" | "text";
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;

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

@@ -1,2 +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, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Skeletons/Skeletons.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 = "20px", 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, 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 }))] }));
 }

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

@@ -1,6 +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. */
     interval?: number;
     isArrow?: boolean;
     mobileImages?: SliderImage[];
@@ -11,7 +12,9 @@ type SliderImage = {
     previewUrl: string;
     /** Optional URL used on small viewports when provided via `mobileImages`. */
     mobilePreviewUrl?: string;
+    /** 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). */
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;

package/dist/Components/Slider/Slider.js

@@ -5,6 +5,9 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/** Auto-advancing image/content carousel — 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)();
@@ -34,10 +37,15 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         // eslint-disable-next-line
     }, [slides.length]);
     const ratio = (_b = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
+    const chipBg = colors.background[50];
+    const chipInk = (0, accentText_1.onFilled)(chipBg, colors.white, colors.black);
+    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]
                     .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
-                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { color: colors.gray[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { color: colors.gray[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } })] })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.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))) }))] }));
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })] })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, bg: chipBg, px: "0.6rem", py: "0.4rem", borderRadius: "full", children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, border: "none", p: 0, bg: idx === currentIndex ? chipInk : dotInactiveInk, borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), "aria-label": `Go to slide ${idx + 1}`, "aria-current": idx === currentIndex, transition: "all 0.3s", _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 exports.default = Slider;

package/dist/Components/StageProgress/StageItem.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { StageItemProps } from "./StageProgressProps";
+/** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
 declare const StageItem: React.FC<StageItemProps>;
 export default StageItem;

package/dist/Components/StageProgress/StageItem.js

@@ -26,6 +26,7 @@ const clipFor = (index, total, a) => {
         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%)`;
 };
+/** Renders one chevron/bar/pill stage — for variant="stepper", StageProgress renders StepperStage internally instead. */
 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 = (0, useCustomTheme_1.useCustomTheme)();

package/dist/Components/StageProgress/StageProgress.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { StageProgressProps } from "./StageProgressProps";
+/** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
 declare const StageProgress: React.FC<StageProgressProps>;
 export default StageProgress;

package/dist/Components/StageProgress/StageProgress.js

@@ -16,6 +16,7 @@ const gapFor = {
     pills: "8px",
     stepper: "0",
 };
+/** Multi-stage pipeline tracker (chevron/bar/pills/stepper) — stepper ignores tooltipThreshold and minStageWidth. */
 const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "md", colorScheme = "primary", markCompleted = true, showCheck = false, isReadOnly = false, isLoading = false, minStageWidth, scrollActiveIntoView = true, tooltipThreshold = 20, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {

package/dist/Components/StageProgress/StageProgressProps.d.ts

@@ -1,25 +1,34 @@
 import { CustomThemeProps } from "../../Theme/themeProps";
+/** Size preset keying each renderer's own pixel/spacing lookup table. */
 export type StageSize = "sm" | "md" | "lg";
+/** Palette key: brand colors resolve direct, others (success/error/warning/info) via theme.colors.semantic. */
 export type StageColorScheme = "primary" | "secondary" | "tertiary" | "success" | "error" | "warning" | "info";
+/** Per-stage render state; StageProgress derives it from index vs. the active stage. */
 export type StageState = "completed" | "active" | "upcoming";
 /** Visual style of the tracker. */
 export type StageVariant = "chevron" | "bar" | "pills" | "stepper";
+/** One entry in StageProgressProps.stages — the ordered pipeline this tracker renders. */
 export interface Stage {
+    /** Compared to `value` via strict `===`; a numeric id vs a string `value` never matches. */
     id: string | number;
+    /** Truncates with an ellipsis (or a tooltip) under chevron/bar/pills; wraps to 2 lines under stepper. */
     label: string;
     /** Disable selecting this stage individually. */
     disabled?: boolean;
 }
+/** Top-level props for StageProgress; per-item rendering is delegated to StageItemProps/StepperStageProps. */
 export interface StageProgressProps {
     /** Ordered list of pipeline stages. */
     stages: Stage[];
     /** Visual style. Default "chevron". */
     variant?: StageVariant;
-    /** id of the currently active stage. */
+    /** Must exactly match a stage.id — no match silently renders every stage as "upcoming" (nothing active). */
     value?: string | number;
-    /** Fired when a stage is clicked (ignored when isReadOnly). */
+    /** Skipped when isReadOnly, or when that specific stage's own `disabled` is true. */
     onChange?: (id: string | number, stage: Stage, index: number) => void;
+    /** Default "md"; also sets the loading skeleton's row height. */
     size?: StageSize;
+    /** Default "primary"; resolved per stage via resolveStagePalette, not applied directly. */
     colorScheme?: StageColorScheme;
     /** Render stages before the active one in a distinct "done" style. Default true. */
     markCompleted?: boolean;
@@ -29,56 +38,88 @@ export interface StageProgressProps {
     isReadOnly?: boolean;
     /** Show the loading skeleton row instead of stages. */
     isLoading?: boolean;
-    /** Min width of each chevron. */
+    /** Ignored for variant="stepper" (fixed per-size circle width there) — applies to chevron/bar/pills only. */
     minStageWidth?: string;
     /** Auto-scroll the active stage into view. Default true. */
     scrollActiveIntoView?: boolean;
-    /** Label length beyond which a tooltip is shown. Default 20. */
+    /** Also only applies to chevron/bar/pills — variant="stepper" never shows a tooltip, however long the label. */
     tooltipThreshold?: number;
 }
+/** Props for one chevron/bar/pills stage; variant="stepper" renders StepperStage/StepperStageProps instead. */
 export interface StageItemProps {
+    /** Ellipsis-truncates in the fixed-width box; see tooltipThreshold for when a tooltip also appears. */
     label: string;
+    /** 0-based position; with total, picks the chevron's first/last point shape. */
     index: number;
+    /** Stage count; with index, drives first/last chevron-point and bar-corner rounding. */
     total: number;
     state: StageState;
     /** "chevron" | "bar" | "pills" (stepper has its own renderer). */
     variant?: Exclude<StageVariant, "stepper">;
+    /** Default "md"; keys this stage's own pixel/spacing lookup table. */
     size?: StageSize;
+    /** Default "primary"; passed straight into resolveStagePalette for this stage. */
     colorScheme?: StageColorScheme;
+    /** Called with no args — StageProgress wraps id/stage/index into this closure itself. */
     onClick?: () => void;
+    /** Disables all interactivity without dimming opacity (unlike disabled). */
     isReadOnly?: boolean;
+    /** Disables just this stage and dims it to 0.55 opacity. */
     disabled?: boolean;
+    /** Adds a check icon before the label only when this stage is completed. */
     showCheck?: boolean;
+    /** Falls back to this size's own fixed minW when unset, not to content width. */
     minWidth?: string;
+    /** Only scrolls when this item's own state is "active" — a no-op otherwise. */
     scrollIntoViewWhenActive?: boolean;
+    /** Character count (not pixels) above which the label swaps to a hover tooltip. */
     tooltipThreshold?: number;
 }
+/** Props for one stepper-variant node; leftDone/rightDone fill the connector line per side. */
 export interface StepperStageProps {
+    /** Wraps up to 2 lines (noOfLines=2) instead of truncating; ignores tooltipThreshold entirely. */
     label: string;
     /** 1-based step number shown inside the circle. */
     number: number;
     state: StageState;
+    /** Default "md"; keys this node's own circle/font/minWidth lookup table. */
     size?: StageSize;
+    /** Default "primary"; passed straight into resolveStagePalette for this node. */
     colorScheme?: StageColorScheme;
+    /** Called with no args — StageProgress's own onChange(id, stage, index) is wrapped upstream. */
     onClick?: () => void;
+    /** Disables interactivity without dimming opacity (unlike disabled). */
     isReadOnly?: boolean;
+    /** Disables this node and dims it to 0.55 opacity. */
     disabled?: boolean;
+    /** Defaults true here (unlike StageItem's false); StageProgress always overrides it explicitly. */
     showCheck?: boolean;
+    /** Hides (not shortens) the left connector line entirely, regardless of leftDone. */
     isFirst: boolean;
+    /** Hides (not shortens) the right connector line entirely, regardless of rightDone. */
     isLast: boolean;
     /** Connector entering this node is part of a completed segment. */
     leftDone: boolean;
     /** Connector leaving this node is part of a completed segment. */
     rightDone: boolean;
+    /** Only scrolls when this node's own state is "active" — a no-op otherwise. */
     scrollIntoViewWhenActive?: boolean;
 }
+/** Color set for one scheme's states, returned by resolveStagePalette (soft/strong/muted + text). */
 export interface StagePalette {
+    /** Background for "completed" stages, and the active stepper circle's outer glow ring. */
     soft: string;
+    /** Text/icon color for "completed" stages, contrast-walked against soft, not a fixed rung. */
     softText: string;
+    /** Background for "active" stages, and the hover fill for completed/upcoming stages. */
     strong: string;
+    /** Text/icon color on strong; picked between white/black per scheme to clear AA. */
     onStrong: string;
+    /** Hover-only background for an already-"active" stage; other states hover to strong instead. */
     hover: string;
+    /** Background for "upcoming" stages; also the unfilled stepper circle's border and idle connector line. */
     muted: string;
+    /** Text color for "upcoming" stages, chevron/bar/pills and stepper alike. */
     mutedText: string;
 }
 /** Resolve a chevron palette for a given color scheme from the theme. */

package/dist/Components/StageProgress/StageProgressProps.js

@@ -2,16 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveStagePalette = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 /** Exhaustive by construction: a new scheme that maps nowhere is a compile error. */
 const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
     ? colors[scheme]
     : colors.semantic[scheme];
 /** Resolve a chevron palette for a given color scheme from the theme. */
 const resolveStagePalette = (theme, colorScheme = "primary") => {
-    const { gray, white, black } = theme.colors;
+    const { gray } = theme.colors;
     const scale = scaleFor(theme.colors, colorScheme);
-    const strong = scale[500];
-    const onStrong = (0, accentText_1.onFilled)(strong, white, black);
+    const solid = (0, filledSurface_1.resolveFilledSurface)(scale, theme.colors);
+    const strong = solid.fill;
+    const onStrong = solid.color;
     const soft = scale[100];
     // A fixed [700] fails AA against [100] for some hues (orange 3.30, borderline green 3.58) —
     // walk the scale's own rungs against this specific tint instead.
@@ -21,7 +23,7 @@ const resolveStagePalette = (theme, colorScheme = "primary") => {
         softText,
         strong,
         onStrong,
-        hover: scale[600],
+        hover: solid.hoverFill,
         muted: gray[100],
         mutedText: gray[500],
     };

package/dist/Components/StageProgress/StepperStage.js

@@ -34,7 +34,7 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
-                            ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }
-                            : undefined, children: showCheck && state === "completed" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 2, px: 1, fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, _groupHover: interactive ? { color: palette.strong } : undefined, children: label })] }));
+                            ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
+                            : undefined, children: showCheck && state === "completed" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 2, px: 1, borderRadius: "sm", fontSize: s.label, fontWeight: state === "active" ? 600 : 500, color: state === "upcoming" ? palette.mutedText : palette.softText, textAlign: "center", noOfLines: 2, transition: "background 0.18s ease, color 0.18s ease", _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
 };
 exports.default = StepperStage;

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

@@ -1,2 +1,3 @@
 import { SwitchProps } from "./SwitchProps";
+/** Renders as clickable <li> items with no role or keyboard handling — mouse-only; not an accessible substitute for ToggleSwitch or SegmentedControl. */
 export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Switch/Switch.js

@@ -4,6 +4,7 @@ exports.default = Switch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Renders as clickable <li> items with no role or keyboard handling — mouse-only; not an accessible substitute for ToggleSwitch or SegmentedControl. */
 function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Read the palette directly: it is already swapped for the active mode, so pairing the rungs

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

@@ -1,3 +1,4 @@
+/** Two-label segmented control (leftText/rightText via switchActive), NOT a binary toggle — for on/off use ToggleSwitch. */
 export type SwitchProps = {
     leftText: string;
     rightText: string;