pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

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

@@ -0,0 +1,2 @@
+/** React's `useId()` wraps its value in colons (":r0:") — strip them for a plain DOM id token. */
+export const sanitizeId = (id) => id.replace(/:/g, "");

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

@@ -0,0 +1,15 @@
+/** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
+export const SIDEBAR_ROW = {
+    height: "32px",
+    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
+    overlayHeight: "44px",
+    subHeight: "28px",
+    fontSize: "13px",
+    iconSize: "1rem",
+};
+/** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
+export const SIDEBAR_CHROME = {
+    titleFontSize: "12.5px",
+    labelFontSize: "11.5px",
+    metaFontSize: "10px",
+};

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

@@ -1,5 +1,6 @@
 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 }))] }));
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
+export default function Skeletons({ startColor, endColor, height = "1.25rem", borderRadius, 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, borderRadius: borderRadius, 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

@@ -3,6 +3,10 @@ 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";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { AA_NON_TEXT, liftToContrast, resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+/** 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 } = useCustomTheme();
@@ -32,10 +36,15 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         // 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;
+    const chipBg = colors.background[50];
+    const chipInk = onFilled(chipBg, colors.white, colors.black);
+    const chipHoverBg = resolveHoverTint(colors.gray[200], chipBg);
+    const chipHoverInk = onFilled(chipHoverBg, colors.white, colors.black);
+    const dotInactiveInk = liftToContrast(colors.gray[400], chipBg, AA_NON_TEXT);
     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))) }))] }));
+                                : 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, {}), "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 } }), _jsx(IconButton, { icon: _jsx(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 && (_jsx(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) => (_jsx(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: transitionFor(["background-color"], "base"), _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 export default Slider;

package/dist/esm/Components/Spinner/Spinner.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner as ChakraSpinner } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { toneInk } from "../../Theme/tokens/builders/tone.js";
+import { REDUCED_MOTION_QUERY } from "../../Theme/chakra/motion.js";
+const SPINNER_SIZES = {
+    xs: { boxSize: "0.75rem", thickness: "0.125rem" },
+    sm: { boxSize: "1rem", thickness: "0.125rem" },
+    md: { boxSize: "1.5rem", thickness: "0.1875rem" },
+    lg: { boxSize: "2rem", thickness: "0.25rem" },
+    xl: { boxSize: "3rem", thickness: "0.25rem" },
+};
+/** Themed spinner for inline or panel loading; for a blocking overlay use Loading, for a button use Button isLoading. */
+export default function Spinner({ size = "md", tone, color, label = "Loading", thickness, speed = "0.7s", emptyColor = "transparent", sx, ...rest }) {
+    const { colors } = useCustomTheme();
+    const spec = SPINNER_SIZES[size];
+    const ink = color !== null && color !== void 0 ? color : (tone ? toneInk(colors, tone) : colors.accentText);
+    return (_jsx(ChakraSpinner, { boxSize: spec.boxSize, ...rest, label: label, color: ink, emptyColor: emptyColor, thickness: thickness !== null && thickness !== void 0 ? thickness : spec.thickness, speed: speed, sx: { [REDUCED_MOTION_QUERY]: { animationDuration: "1.6s" }, ...sx } }));
+}

package/dist/esm/Components/Spinner/SpinnerProps.js

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

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

@@ -3,6 +3,7 @@ import { useEffect, useRef } from "react";
 import { Box, Flex } from "@chakra-ui/react";
 import { Check } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import ToolTip from "../ToolTip/ToolTip.js";
 import { resolveStagePalette, } from "./StageProgressProps.js";
 const sizeMap = {
@@ -21,8 +22,10 @@ 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%)`;
 };
-const StageItem = ({ label, index, total, state, variant = "chevron", size = "md", colorScheme = "primary", onClick, isReadOnly = false, disabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
+/** 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, isDisabled, disabled: legacyDisabled = false, showCheck = false, minWidth, scrollIntoViewWhenActive = true, tooltipThreshold = 20, }) => {
     var _a;
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = useCustomTheme();
     const palette = resolveStagePalette(theme, colorScheme);
     const ref = useRef(null);
@@ -71,13 +74,19 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
             : "none";
     // Upcoming pills read as outlined; other states stay filled.
     const isOutlinePill = variant === "pills" && state === "upcoming";
-    const hoverStyles = interactive
+    const fillHoverStyles = interactive
         ? state === "active"
             ? { bg: palette.hover }
-            : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
+            : { bg: palette.strong, 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 })] }) }));
+    // clip-path clips box-shadow too, so the focus ring stays on this unclipped outer button.
+    const content = (_jsxs(Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, "aria-disabled": disabled ? true : undefined, onClick: interactive ? onClick : undefined, "data-group": "", position: "relative", flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, p: 0, border: "none", bg: "transparent", color: isOutlinePill ? palette.mutedText : color, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "color 0.18s ease, filter 0.18s ease", sx: interactive ? focusVisibleStyles(theme.colors) : undefined, _hover: interactive
+            ? {
+                color: state === "active" ? undefined : palette.onStrong,
+                filter: "brightness(0.97)",
+            }
+            : undefined, children: [_jsx(Box, { position: "absolute", inset: 0, bg: isOutlinePill ? "transparent" : bg, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, transition: "background 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _groupHover: fillHoverStyles }), _jsxs(Flex, { position: "relative", align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, pl: `${leftPad}px`, pr: `${rightPad}px`, children: [showCheck && state === "completed" && (_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 }));
     }

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

@@ -11,11 +11,12 @@ 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 = 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))) }));
+        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: "lg", flexShrink: 0 }, i))) }));
     }
     const activeIndex = stages.findIndex((st) => st.id === value);
     const stateFor = (index) => {
@@ -26,15 +27,14 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
         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" },
-            ...scrollbarStyles(theme.colors, "overlay"),
-        }, children: stages.map((stage, index) => {
+    return (_jsx(Box, { display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: scrollbarStyles(theme.colors, "overlay"), children: stages.map((stage, index) => {
+            var _a;
             const state = stateFor(index);
+            const stageDisabled = (_a = stage.isDisabled) !== null && _a !== void 0 ? _a : stage.disabled;
             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(StepperStage, { label: stage.label, number: index + 1, state: state, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, 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));
+            return (_jsx(StageItem, { label: stage.label, index: index, total: total, state: state, variant: variant, size: size, colorScheme: colorScheme, isReadOnly: isReadOnly, isDisabled: stageDisabled, 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

@@ -1,25 +1,31 @@
-import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { resolveFilledSurface } from "../../Theme/tokens/builders/filledSurface.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 { gray } = theme.colors;
     const scale = scaleFor(theme.colors, colorScheme);
-    const strong = scale[500];
-    const onStrong = onFilled(strong, white, black);
+    const solid = 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.
     const softText = accentTextOnCanvas(scale, soft);
+    const muted = gray[100];
+    // A fixed gray[500] clears AA against the canvas but not against `muted` itself (gray[100]) on
+    // several brands — walk gray's own rungs against the actual upcoming-state fill instead.
+    const mutedText = accentTextOnCanvas(gray, muted);
     return {
         soft,
         softText,
         strong,
         onStrong,
-        hover: scale[600],
-        muted: gray[100],
-        mutedText: gray[500],
+        hover: solid.hoverFill,
+        muted,
+        mutedText,
     };
 };

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

@@ -3,13 +3,16 @@ 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 { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.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 StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, }) => {
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
     const theme = useCustomTheme();
     const palette = resolveStagePalette(theme, colorScheme);
     const ref = useRef(null);
@@ -29,10 +32,10 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     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"
+    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": "", "aria-disabled": disabled ? true : undefined, border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, borderRadius: "lg", sx: interactive ? focusVisibleStyles(theme.colors) : 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: transitionFor(["background-color", "border-color", "color", "box-shadow"]), "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
-                            ? { borderColor: palette.strong, 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 })] }));
+                            ? { borderColor: palette.strong, bg: palette.strong, color: palette.onStrong }
+                            : undefined, children: showCheck && state === "completed" ? _jsx(Check, { size: s.icon }) : number }), line(rightDone, isLast)] }), _jsx(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 })] }));
 };
 export default StepperStage;

package/dist/esm/Components/StatCard/StatCard.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, VisuallyHidden } from "@chakra-ui/react";
+import { ArrowDownRight, ArrowUpRight } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import Skeletons from "../Skeletons/Skeletons.js";
+const StatCardSkeleton = ({ hasIcon }) => (_jsxs(Flex, { direction: "column", gap: 3, children: [_jsxs(Flex, { align: "center", gap: 2, children: [hasIcon && _jsx(Skeletons, { type: "skeleton", height: 8, width: 8 }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "40%" })] }), _jsx(Skeletons, { type: "skeleton", height: 7, width: "55%" }), _jsx(Skeletons, { type: "skeleton", height: 3, width: "45%" })] }));
+/** KPI tile: tinted icon chip, label, 2xl tabular value, delta coloured by whether the change is good. */
+const StatCard = ({ label, value, delta, trend, goodDirection = "up", hint, icon: Icon, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const isInteractive = !!onClick && !isLoading;
+    const deltaColor = trend
+        ? trend === goodDirection
+            ? colors.semanticText.success
+            : colors.semanticText.error
+        : colors.textMuted;
+    const DeltaIcon = trend === "down" ? ArrowDownRight : ArrowUpRight;
+    const surface = {
+        display: "block",
+        w: "100%",
+        textAlign: "left",
+        bg: colors.background[50],
+        borderWidth: "1px",
+        borderColor: colors.boxborder[200],
+        borderRadius: "xl",
+        px: 5,
+        py: 4,
+    };
+    const content = isLoading ? (_jsx(StatCardSkeleton, { hasIcon: !!Icon })) : (_jsxs(Flex, { as: "span", direction: "column", gap: 3, children: [_jsxs(Flex, { as: "span", align: "center", gap: 2, children: [Icon && (_jsx(Flex, { as: "span", boxSize: 8, flexShrink: 0, align: "center", justify: "center", borderRadius: "lg", bg: colors.primary.opacity[8], color: colors.accentText, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: value }), (delta !== undefined || hint) && (_jsxs(Flex, { as: "span", align: "center", gap: 1.5, wrap: "wrap", children: [delta !== undefined && (_jsxs(Flex, { as: "span", align: "center", gap: 0.5, color: deltaColor, "data-testid": "stat-delta", children: [trend && _jsx(DeltaIcon, { size: 14, "aria-hidden": true }), trend && _jsx(VisuallyHidden, { children: trend === "up" ? "Up" : "Down" }), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 600, sx: { fontVariantNumeric: "tabular-nums" }, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] }))] }));
+    if (!isInteractive) {
+        return (_jsx(Box, { ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+    }
+    return (_jsx(Box, { as: "button", type: "button", onClick: onClick, "aria-label": ariaLabel, "data-testid": testId, ...surface, cursor: "pointer", transition: transitionFor(["box-shadow", "border-color"]), _hover: { boxShadow: "sm", borderColor: colors.boxborder[300] }, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, children: content }));
+};
+export default StatCard;

package/dist/esm/Components/StatCard/StatCardProps.js

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

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

@@ -1,11 +1,13 @@
-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 })] })] })] }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import SegmentedControl from "../SegmentedControl/SegmentedControl.js";
+/** @deprecated Two labelled choices; for a single on/off field use `ToggleSwitch`. Renders `SegmentedControl` at 12.5rem when labelled. */
+export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, surface, "aria-label": ariaLabel, }) {
+    const options = [
+        { value: "left", label: leftText, icon: leftIcon },
+        { value: "right", label: rightText, icon: rightIcon },
+    ];
+    // Unlabelled segments have nothing to size to, so the 12.5rem floor only overflowed its cell.
+    const hasLabels = Boolean(leftText || rightText);
+    return (_jsx(Box, { w: "fit-content", maxW: "100%", minW: hasLabels ? "12.5rem" : undefined, children: _jsx(SegmentedControl, { options: options, value: switchActive, onChange: onSwitchToggle, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
 }