pixelize-design-library 3.0.1-beta.1 → 3.1.1

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

@@ -0,0 +1,58 @@
+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, Pause, Play } 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";
+import { usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+/** Auto-advancing image/content carousel (pauses on hover/focus, never auto-advances under reduced motion) — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
+const Slider = ({ images, interval = 5000, isArrow = false, showPauseControl = false, mobileImages, }) => {
+    var _a, _b;
+    const { colors } = useCustomTheme();
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const [userPaused, setUserPaused] = useState(false);
+    const reducedMotion = usePrefersReducedMotion();
+    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 && !hovered && !focused && !userPaused && !reducedMotion) {
+            timeoutRef.current = setTimeout(nextSlide, interval);
+        }
+        return () => {
+            if (timeoutRef.current)
+                clearTimeout(timeoutRef.current);
+        };
+    }, [currentIndex, interval, nextSlide, hovered, focused, userPaused, reducedMotion]);
+    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;
+    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", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setFocused(false);
+        }, children: [_jsx(Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: reducedMotion ? "none" : "transform 0.5s ease", children: [...slides]
+                    .sort((a, b) => a.order - b.order)
+                    .map((image, idx) => (_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, {}), "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 } })] })), showPauseControl && interval > 0 && slides.length > 1 && !reducedMotion && (_jsx(IconButton, { icon: userPaused ? _jsx(Play, { size: 16 }) : _jsx(Pause, { size: 16 }), "aria-label": userPaused ? "Play slideshow" : "Pause slideshow", onClick: () => setUserPaused((paused) => !paused), position: "absolute", bottom: "1rem", right: "1rem", zIndex: 2, size: "sm", 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/SpecTable/SpecTable.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const DEFAULT_LABELS = { showAll: "Show all", showLess: "Show less" };
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+const SpecTable = ({ items, columns = 1, collapsedCount, expanded, defaultExpanded = false, onExpandedChange, labels, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const listId = useId();
+    const [inner, setInner] = useState(defaultExpanded);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    if (items.length === 0)
+        return null;
+    const foldable = collapsedCount !== undefined && collapsedCount < items.length;
+    const isExpanded = expanded !== null && expanded !== void 0 ? expanded : inner;
+    const visible = foldable && !isExpanded ? items.slice(0, collapsedCount) : items;
+    const tint = colors.background[100];
+    const toggle = () => {
+        const next = !isExpanded;
+        if (expanded === undefined)
+            setInner(next);
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(next);
+    };
+    return (_jsxs(Box, { "data-testid": testId, children: [_jsx(Box, { as: "dl", id: listId, m: 0, "aria-label": ariaLabel, display: "grid", gridTemplateColumns: columns === 2 ? { base: "1fr", md: "1fr 1fr" } : "1fr", borderRadius: "xl", overflow: "hidden", children: visible.map((item, i) => {
+                    const stripeNarrow = i % 2 === 0;
+                    const stripeWide = columns === 2 ? Math.floor(i / 2) % 2 === 0 : stripeNarrow;
+                    return (_jsxs(Flex, { "data-stripe": stripeNarrow, "data-stripe-wide": stripeWide, gap: 4, px: 4, py: 3, fontSize: "sm", bg: { base: stripeNarrow ? tint : "transparent", md: stripeWide ? tint : "transparent" }, children: [_jsx(Box, { as: "dt", flex: "0 0 40%", minW: 0, color: colors.textMuted, overflowWrap: "anywhere", children: item.label }), _jsx(Box, { as: "dd", m: 0, flex: "1 1 0", minW: 0, fontWeight: 500, color: colors.header[900], overflowWrap: "anywhere", sx: NUMERIC_TEXT, children: item.value })] }, `${item.label}-${i}`));
+                }) }), foldable && (_jsx(Box, { mt: 2, children: _jsx(Button, { variant: "ghost", size: "sm", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, rightIcon: _jsx(Box, { as: "span", display: "inline-flex", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform"]), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16, "aria-hidden": true }) }), children: isExpanded ? text.showLess : `${text.showAll} (${items.length})` }) }))] }));
+};
+export default SpecTable;

package/dist/esm/Components/SpecTable/SpecTableProps.js

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

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, testId, ...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 }, ...(testId !== undefined ? { "data-testid": testId } : {}) }));
+}

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

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

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

@@ -0,0 +1,96 @@
+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 { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { resolveStagePalette, } from "./StageProgressProps.js";
+import { centerInStrip } from "./centerInStrip.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 LABEL_TRANSITION = transitionFor(["color", "filter"], "base");
+const CHEVRON_TRANSITION = transitionFor(["background", "border-color"], "base");
+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%)`;
+};
+/** 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);
+    const s = sizeMap[size];
+    useEffect(() => {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            centerInStrip(ref.current);
+        }
+    }, [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 fillHoverStyles = interactive
+        ? state === "active"
+            ? { bg: palette.hover }
+            : { 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;
+    // 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 ? DISABLED_OPACITY : 1, transition: LABEL_TRANSITION, 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: CHEVRON_TRANSITION, 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 }));
+    }
+    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 { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import { useScrollableRegion } from "../../Hooks/useScrollableRegion.js";
+import StageItem from "./StageItem.js";
+import StepperStage from "./StepperStage.js";
+import { STRIP_ATTRIBUTE } from "./centerInStrip.js";
+// Gap between items per variant (chevron interlocks via negative margin).
+const gapFor = {
+    chevron: "0",
+    bar: "4px",
+    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, "aria-label": ariaLabel, }) => {
+    const theme = useCustomTheme();
+    const { ref: stripRef, props: stripProps } = useScrollableRegion({
+        label: ariaLabel,
+        keepRole: variant === "stepper",
+    });
+    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: "lg", 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, { as: variant === "stepper" ? "ol" : undefined, ref: stripRef, ...stripProps, m: variant === "stepper" ? 0 : undefined, listStyleType: variant === "stepper" ? "none" : undefined, display: "flex", alignItems: variant === "stepper" ? "flex-start" : "stretch", gap: gapFor[variant], overflowX: "auto", p: "0.1rem", sx: { ...scrollbarStyles(theme.colors, "overlay"), ...focusVisibleStyles(theme.colors) }, [STRIP_ATTRIBUTE]: "", 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, isDisabled: stageDisabled, showCheck: showCheck, isFirst: index === 0, isLast: index === total - 1, leftDone: activeIndex > -1 && index <= activeIndex, rightDone: activeIndex > -1 && index < activeIndex, scrollIntoViewWhenActive: scrollActiveIntoView, asListItem: true, 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

@@ -0,0 +1,31 @@
+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 } = theme.colors;
+    const scale = scaleFor(theme.colors, colorScheme);
+    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: solid.hoverFill,
+        muted,
+        mutedText,
+    };
+};

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

@@ -0,0 +1,43 @@
+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 { DISABLED_OPACITY } from "../../Theme/tokens/primitives/states.js";
+import { transitionFor } from "../../Theme/tokens/primitives/index.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { resolveStagePalette, } from "./StageProgressProps.js";
+import { centerInStrip } from "./centerInStrip.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" },
+};
+/** Renders one numbered circle with connector lines and a wrapped label for variant="stepper". */
+const StepperStage = ({ label, number, state, size = "md", colorScheme = "primary", onClick, isReadOnly = false, isDisabled, disabled: legacyDisabled = false, showCheck = true, isFirst, isLast, leftDone, rightDone, scrollIntoViewWhenActive = true, asListItem = false, }) => {
+    const disabled = isDisabled !== null && isDisabled !== void 0 ? isDisabled : legacyDisabled;
+    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) {
+            centerInStrip(ref.current);
+        }
+    }, [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: transitionFor(["background"], "base") }));
+    const node = (_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 ? DISABLED_OPACITY : 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, 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: transitionFor(["background", "color"], "base"), _groupHover: interactive ? { bg: palette.strong, color: palette.onStrong } : undefined, children: label })] }));
+    if (!asListItem)
+        return node;
+    return (_jsx(Box, { as: "li", display: "flex", flex: "1", minWidth: s.minW, flexShrink: 0, listStyleType: "none", children: node }));
+};
+export default StepperStage;

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

@@ -0,0 +1,11 @@
+export const STRIP_ATTRIBUTE = "data-stage-strip";
+export const centerInStrip = (stage) => {
+    var _a;
+    const strip = stage.closest(`[${STRIP_ATTRIBUTE}]`);
+    if (!strip)
+        return;
+    const box = strip.getBoundingClientRect();
+    const rect = stage.getBoundingClientRect();
+    const left = strip.scrollLeft + rect.left + rect.width / 2 - (box.left + box.width / 2);
+    (_a = strip.scrollTo) === null || _a === void 0 ? void 0 : _a.call(strip, { left, behavior: "smooth" });
+};

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

@@ -0,0 +1,43 @@
+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 { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.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, sparkline, footer, icon: Icon, iconTone, isLoading = false, onClick, "aria-label": ariaLabel, "data-testid": testId, ...rest }) => {
+    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 chip = iconTone
+        ? resolveSoftTone(colors, toneScale(colors, iconTone), colors.background[50])
+        : { bg: colors.primary.opacity[8], fg: colors.accentText };
+    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: chip.bg, color: chip.fg, "data-icon-tone": iconTone, children: _jsx(Icon, { size: 16, "aria-hidden": true }) })), _jsx(Text, { as: "span", fontSize: "xs", fontWeight: 500, color: colors.textMuted, children: label })] }), _jsxs(Flex, { as: "span", align: "center", justify: "space-between", gap: 3, children: [_jsx(Text, { as: "span", display: "block", fontSize: "2xl", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: "short", color: colors.header[900], sx: NUMERIC_TEXT, children: value }), sparkline && (_jsx(Flex, { as: "span", align: "center", justify: "center", flexShrink: 0, h: 8, minW: 16, maxW: 24, overflow: "hidden", "data-testid": "stat-sparkline", children: sparkline }))] }), (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: NUMERIC_TEXT, children: delta })] })), hint && (_jsx(Text, { as: "span", fontSize: "xs", color: colors.textMuted, children: hint }))] })), footer && (_jsx(Box, { as: "span", pt: 3, borderTopWidth: "1px", borderColor: cardRule(colors), "data-testid": "stat-footer", children: footer }))] }));
+    if (!isInteractive) {
+        return (_jsx(Box, { ...rest, ...surface, "aria-busy": isLoading || undefined, "data-testid": testId, children: content }));
+    }
+    return (_jsx(Box, { ...rest, 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/StatusTag/StatusTag.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tag from "../Tag/Tag.js";
+const NEUTRAL = { tone: "neutral" };
+const warned = new Set();
+const warnUnknown = (status) => {
+    if (process.env.NODE_ENV === "production" || warned.has(status))
+        return;
+    warned.add(status);
+    console.warn(`StatusTag: no appearance mapped for status "${status}"; rendering neutral.`);
+};
+/** Typed status-to-Tag wrapper: map your vocabulary to tones once, render chips or dots everywhere. */
+function StatusTag({ status, label, map, display = "chip", size = "sm", "data-testid": testId, }) {
+    const known = Object.prototype.hasOwnProperty.call(map, status);
+    if (!known)
+        warnUnknown(status);
+    const { tone, variant } = known ? map[status] : NEUTRAL;
+    return _jsx(Tag, { label: label, tone: tone, variant: variant, display: display, size: size, "data-testid": testId });
+}
+export default StatusTag;

package/dist/esm/Components/StatusTag/StatusTagProps.js

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

package/dist/esm/Components/StickyBuyBar/StickyBuyBar.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Grid } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { Check } from "lucide-react";
+import Button from "../Button/Button.js";
+import PriceBlock from "../PriceBlock/PriceBlock.js";
+import QuantityStepper from "../QuantityStepper/QuantityStepper.js";
+import { glassStyles } from "../MediaGallery/glass.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { MOTION_EASE, MOTION_MS, transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
+import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { tonalHover } from "../CheckoutKit/tonalHover.js";
+const DEFAULT_LABELS = {
+    region: "Buy",
+    add: "Add to bag",
+    selectOption: "Select an option",
+    notify: "Notify me",
+    added: "Added",
+    goToBag: "Go to bag",
+    buyNow: "Buy now",
+    adding: "Adding to bag",
+};
+const SLIDE_MS = 240;
+const BAR_HEIGHT = "3.25rem";
+const SLOT_MIN_WIDTH = "9.5rem";
+const RISE = "6px";
+const NO_BLUR_SUPPORT = "@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))";
+const SAFE_BOTTOM = "calc(0.75rem + env(safe-area-inset-bottom, 0px))";
+const pop = keyframes `0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); }`;
+const STACK_ORDER = ["add", "select-option", "notify", "added", "go-to-bag"];
+/** Bottom bar with price and one primary action whose mode, slide-in visibility and quantity stepper are all controlled. */
+const StickyBuyBar = ({ price, mrp, mode = "add", visible = true, position = "sticky", isLoading = false, quantity, onQuantityChange, maxQuantity, onAddToBag, onSelectOption, onNotify, onGoToBag, onBuyNow, itemLabel, currency, locale, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const reduced = usePrefersReducedMotion();
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const glass = glassStyles(colors);
+    const stepping = mode === "stepper";
+    const active = stepping ? null : mode;
+    const text = {
+        add: copy.add,
+        "select-option": copy.selectOption,
+        notify: copy.notify,
+        added: copy.added,
+        "go-to-bag": copy.goToBag,
+    };
+    const handlers = {
+        add: onAddToBag,
+        "select-option": onSelectOption,
+        notify: onNotify,
+        added: undefined,
+        "go-to-bag": onGoToBag,
+    };
+    const tonal = mode === "notify";
+    const inert = mode === "added" || isLoading;
+    // NOTE: Button's prop type is a closed Pick, so aria-busy / aria-disabled ride in on a spread.
+    const aria = {
+        "aria-busy": isLoading ? "true" : undefined,
+        "aria-disabled": inert ? "true" : undefined,
+        "aria-label": isLoading ? copy.adding : undefined,
+    };
+    const layer = (on) => ({
+        gridArea: "1 / 1",
+        opacity: on ? 1 : 0,
+        visibility: on ? "visible" : "hidden",
+        transition: reduced ? "none" : `${transitionFor(["opacity"])}, visibility 0s linear ${on ? 0 : MOTION_MS.fast}ms`,
+    });
+    const label = (key) => {
+        const on = key === active;
+        return (_jsxs(Flex, { as: "span", "aria-hidden": on ? undefined : true, gridArea: "1 / 1", align: "center", justify: "center", gap: 1.5, opacity: on ? 1 : 0, transform: on || reduced ? "none" : `translateY(${RISE})`, transition: transitionFor(["opacity", "transform"]), sx: reducedMotionSx(), children: [key === "added" && (_jsx(Box, { as: "span", display: "inline-flex", animation: on && !reduced ? `${pop} 280ms ${MOTION_EASE} both` : undefined, sx: reducedMotionSx(), children: _jsx(Check, { size: 18, "aria-hidden": true }) })), text[key]] }, key));
+    };
+    return (_jsx(Box, { as: "section", role: "region", "aria-label": copy.region, "aria-hidden": visible ? undefined : true, position: position === "sticky" ? "sticky" : "relative", bottom: position === "sticky" ? 0 : undefined, zIndex: zIndices.sticky, px: 4, pt: 3, pb: SAFE_BOTTOM, transform: visible ? "translateY(0)" : "translateY(100%)", visibility: visible ? "visible" : "hidden", transition: reduced ? "none" : `transform ${SLIDE_MS}ms ${MOTION_EASE}, visibility 0s linear ${visible ? 0 : SLIDE_MS}ms`, "data-testid": testId, ...glass, sx: { ...glass.sx, [NO_BLUR_SUPPORT]: { backgroundColor: colors.surfaceRaised }, ...reducedMotionSx() }, children: _jsxs(Flex, { align: "center", gap: 3, children: [_jsx(Box, { flex: 1, minW: 0, children: _jsx(PriceBlock, { size: "sm", price: price, mrp: mrp, currency: currency, locale: locale }) }), mode === "add" && onBuyNow && (_jsx(Button, { variant: "outline", size: "lg", h: BAR_HEIGHT, onClick: onBuyNow, label: copy.buyNow })), _jsxs(Grid, { minW: SLOT_MIN_WIDTH, justifyItems: "stretch", alignItems: "center", children: [_jsx(Box, { ...layer(!stepping), "aria-hidden": stepping ? true : undefined, children: _jsx(Button, { ...aria, variant: tonal ? "ghost" : "solid", size: "lg", w: "100%", h: BAR_HEIGHT, onClick: () => {
+                                    var _a;
+                                    if (!inert)
+                                        (_a = handlers[mode]) === null || _a === void 0 ? void 0 : _a.call(handlers);
+                                }, sx: {
+                                    ...(tonal ? { bg: colors.background[100], color: colors.header[900], _hover: { bg: tonalHover(colors) } } : {}),
+                                    ...(inert ? { cursor: isLoading ? "progress" : "default", pointerEvents: isLoading ? "auto" : "none" } : {}),
+                                    display: "grid",
+                                }, children: STACK_ORDER.map(label) }) }), _jsx(Flex, { ...layer(stepping), "aria-hidden": stepping ? undefined : true, justify: "center", align: "center", h: BAR_HEIGHT, children: _jsx(QuantityStepper, { value: quantity, onValueChange: onQuantityChange, max: maxQuantity, itemLabel: itemLabel, size: "md" }) })] })] }) }));
+};
+export default StickyBuyBar;

package/dist/esm/Components/StickyBuyBar/StickyBuyBarProps.js

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

package/dist/esm/Components/StockStatus/StockStatus.js

@@ -0,0 +1,29 @@
+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";
+const TEXT_SIZE = { sm: "xs", md: "sm" };
+const DOT_PX = { sm: 6, md: 8 };
+const defaultMessage = (status, count) => {
+    switch (status) {
+        case "in-stock":
+            return "In stock";
+        case "low-stock":
+            return count !== undefined ? `Only ${count} left` : "Low stock";
+        case "out-of-stock":
+            return "Out of stock";
+        case "backorder":
+            return "Available on backorder";
+    }
+};
+/** Availability dot + label for a `StockState`; colour comes from `semanticText`, meaning from the words. */
+const StockStatus = ({ status, count, message, size = "md", "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    const ink = {
+        "in-stock": colors.semanticText.success,
+        "low-stock": colors.semanticText.warning,
+        "out-of-stock": colors.textMuted,
+        backorder: colors.semanticText.info,
+    };
+    return (_jsxs(Flex, { as: "span", display: "inline-flex", align: "center", gap: 1.5, "data-status": status, "data-testid": testId, color: ink[status], children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${DOT_PX[size]}px`, flexShrink: 0, borderRadius: "full", bg: "currentColor" }), _jsx(Text, { as: "span", fontSize: TEXT_SIZE[size], fontWeight: 600, lineHeight: 1.4, children: message !== null && message !== void 0 ? message : defaultMessage(status, count) })] }));
+};
+export default StockStatus;

package/dist/esm/Components/StockStatus/StockStatusProps.js

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

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

@@ -0,0 +1,13 @@
+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, size = "sm", 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, size: size, variant: "brandSlide", surface: surface, isFullWidth: true, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : `${leftText} or ${rightText}` }) }));
+}

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

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