pixelize-design-library 2.4.1 → 2.4.2-beta.1

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

@@ -0,0 +1,52 @@
+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.js";
+import { getSidebarActiveAccent } from "../sidebarAccentColors.js";
+import TruncatedTextWithTooltip from "./TextTruncation.js";
+const MenuPopoverContent = ({ menu, handleMenuClick, activeMenu, }) => {
+    var _a;
+    const theme = useCustomTheme();
+    const activeAccent = getSidebarActiveAccent(theme.colors);
+    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 : (_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) => {
+                    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: theme.colors.white, 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: theme.colors.sidebar.mutedIcon })] }), 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: "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: [_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 : theme.colors.white, _groupHover: isSubActive ? undefined : { color: "white" }, children: sub.title })] }), sub.locked ? (_jsx(Icon, { as: LockKeyhole, fontSize: "1rem", color: theme.colors.sidebar.mutedIcon })) : (() => {
+                            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.js";
+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: theme.colors.sidebar.mutedIcon, fontSize: "15px", flexShrink: 0, children: (_a = app.icon) !== null && _a !== void 0 ? _a : (_jsx(Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: `0 0 5px ${app.color}`, flexShrink: 0 })) }));
+    };
+    // Grid cell: icon on top, truncated label below (label hidden when collapsed).
+    const appCell = (app) => (_jsxs(Flex, { as: "button", type: "button", direction: "column", align: "center", justify: "center", gap: "3px", px: "2px", py: "6px", borderRadius: "md", 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: theme.colors.sidebar.mutedLabel, textAlign: "center", maxW: "44px", isTruncated: true, children: app.name }))] }));
+    const flyoutBody = (app) => {
+        var _a;
+        return (_jsxs(_Fragment, { children: [_jsxs(Flex, { alignItems: "center", gap: "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: theme.colors.sidebar.mutedLabel, 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: theme.colors.sidebar.mutedLabel, 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: "lg", bg: theme.colors.sidebar.elevated, boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: "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.js";
+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,5 @@
+/** Resolved per brand at palette-build time, so the rail needs no mode or brand lookup. */
+export const getSidebarActiveAccent = (colors) => ({
+    icon: colors.sidebar.activeIcon,
+    label: colors.sidebar.activeLabel,
+});

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

@@ -0,0 +1,33 @@
+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.js";
+import EmptyState from "../EmptyState/EmptyState.js";
+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, }) => {
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.header[500];
+    const headBg = colors.backgroundColor.tableHeader;
+    const shadow = colors.boxShadow.default;
+    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/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.js";
+const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
+    var _a, _b;
+    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: 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] } }), _jsx(IconButton, { icon: _jsx(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 && (_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,86 @@
+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.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { resolveStagePalette, } from "./StageProgressProps.js";
+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 r = theme.radii;
+    const borderRadius = variant === "pills"
+        ? "full"
+        : variant === "bar"
+            ? isFirst && isLast
+                ? "lg"
+                : isFirst
+                    ? `${r.lg} ${r.sm} ${r.sm} ${r.lg}`
+                    : isLast
+                        ? `${r.sm} ${r.lg} ${r.lg} ${r.sm}`
+                        : "sm"
+            : "none";
+    // 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;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Flex, Skeleton } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import StageItem from "./StageItem.js";
+import StepperStage from "./StepperStage.js";
+const scrollSxFor = (thumb) => ({
+    "&::-webkit-scrollbar": { height: "4px" },
+    "&::-webkit-scrollbar-thumb": {
+        borderRadius: "full",
+        backgroundColor: thumb,
+    },
+    "&::-webkit-scrollbar-track": { background: "transparent" },
+});
+// Gap between items per variant (chevron interlocks via negative margin).
+const gapFor = {
+    chevron: "0",
+    bar: "4px",
+    pills: "8px",
+    stepper: "0",
+};
+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 = useCustomTheme();
+    if (isLoading) {
+        const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
+        return (_jsx(Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => (_jsx(Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "md", flexShrink: 0 }, i))) }));
+    }
+    const activeIndex = stages.findIndex((st) => st.id === value);
+    const stateFor = (index) => {
+        if (index === activeIndex)
+            return "active";
+        if (markCompleted && activeIndex > -1 && index < activeIndex)
+            return "completed";
+        return "upcoming";
+    };
+    const total = stages.length;
+    return (_jsx(Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "hidden", p: "0.1rem", sx: {
+            "&:hover": { overflowX: "auto" },
+            ...scrollSxFor(theme.colors.gray[300]),
+        }, children: stages.map((stage, index) => {
+            const state = stateFor(index);
+            if (variant === "stepper") {
+                return (_jsx(StepperStage, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+            }
+            return (_jsx(StageItem, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, disabled: stage.disabled, showCheck: showCheck, minWidth: minStageWidth, scrollIntoViewWhenActive: scrollActiveIntoView, tooltipThreshold: tooltipThreshold, onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(stage.id, stage, index) }, stage.id));
+        }) }));
+};
+export default StageProgress;

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

@@ -0,0 +1,25 @@
+import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+/** 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. */
+export const resolveStagePalette = (theme, colorScheme = "primary") => {
+    const { gray, white, black } = theme.colors;
+    const scale = scaleFor(theme.colors, colorScheme);
+    const strong = scale[500];
+    const onStrong = onFilled(strong, white, black);
+    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.
+    const softText = accentTextOnCanvas(scale, soft);
+    return {
+        soft,
+        softText,
+        strong,
+        onStrong,
+        hover: scale[600],
+        muted: gray[100],
+        mutedText: gray[500],
+    };
+};

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveStagePalette, } from "./StageProgressProps.js";
+const sizeMap = {
+    sm: { circle: "24px", font: "0.7rem", label: "0.7rem", icon: 12, minW: "84px" },
+    md: { circle: "30px", font: "0.8rem", label: "0.8rem", icon: 14, minW: "104px" },
+    lg: { circle: "38px", font: "0.95rem", label: "0.9rem", icon: 16, minW: "124px" },
+};
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+    const theme = useCustomTheme();
+    const palette = resolveStagePalette(theme, colorScheme);
+    const ref = useRef(null);
+    const s = sizeMap[size];
+    const interactive = !isReadOnly && !disabled;
+    useEffect(() => {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            ref.current.scrollIntoView({
+                behavior: "smooth",
+                inline: "center",
+                block: "nearest",
+            });
+        }
+    }, [state, scrollIntoViewWhenActive]);
+    const filled = state === "active" || state === "completed";
+    const circleBg = filled ? palette.strong : theme.colors.background[50];
+    const circleColor = filled ? palette.onStrong : palette.mutedText;
+    const circleBorder = filled ? palette.strong : palette.muted;
+    const line = (done, hidden) => (_jsx(Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
+    return (_jsxs(Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [_jsxs(Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), _jsx(Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "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" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(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 })] }));
+};
+export default StepperStage;

package/dist/esm/Components/Switch/Switch.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }) {
+    const theme = useCustomTheme();
+    // Read the palette directly: it is already swapped for the active mode, so pairing the rungs
+    // through useColorModeValue would adapt twice and pick a LIGHT rung on the dark canvas.
+    const highlightBg = theme.colors.primary[50];
+    const borderColor = theme.colors.gray[100];
+    return (_jsxs(Box, { bg: theme.colors.background[50], border: "0.063rem solid", borderColor: borderColor, borderRadius: "1.25rem", p: "0.063rem", w: "12.5rem", position: "relative", children: [_jsx(Box, { position: "absolute", top: 0, bottom: 0, w: "50%", bg: highlightBg, border: `0.063rem solid ${theme.colors.primary[500]}`, borderRadius: "1rem", transition: "transform 0.3s ease", transform: switchActive === "left" ? "translateX(0%)" : "translateX(100%)" }), _jsxs(Flex, { as: "ul", listStyleType: "none", m: 0, p: "0.063rem", zIndex: 1, position: "relative", children: [_jsxs(Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "left" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("left"), children: [leftIcon, _jsx(Text, { ml: leftIcon ? 1 : 0, children: leftText })] }), _jsxs(Flex, { as: "li", w: "6.875rem", h: "100%", align: "center", justify: "center", cursor: "pointer", px: 2, fontSize: "0.875rem", fontWeight: switchActive === "right" ? 600 : 400, color: theme.colors.text[900], zIndex: 1, onClick: () => onSwitchToggle("right"), children: [rightIcon, _jsx(Text, { ml: rightIcon ? 1 : 0, children: rightText })] })] })] }));
+}

package/dist/esm/Components/Switch/SwitchProps.js

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