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

package/dist/Components/Slider/Slider.js

@@ -1,89 +1,60 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var lucide_react_1 = require("lucide-react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var Slider = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var images = _a.images, _h = _a.interval, interval = _h === void 0 ? 5000 : _h, _j = _a.isArrow, isArrow = _j === void 0 ? false : _j, mobileImages = _a.mobileImages;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var _k = (0, react_1.useState)(0), currentIndex = _k[0], setCurrentIndex = _k[1];
-    var timeoutRef = (0, react_1.useRef)(null);
-    var isMobile = (_b = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _b !== void 0 ? _b : false;
-    var slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
-    var nextSlide = (0, react_1.useCallback)(function () {
-        setCurrentIndex(function (prev) { return (prev + 1) % slides.length; });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+/** 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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const [userPaused, setUserPaused] = (0, react_1.useState)(false);
+    const reducedMotion = (0, motion_2.usePrefersReducedMotion)();
+    const timeoutRef = (0, react_1.useRef)(null);
+    const isMobile = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _a !== void 0 ? _a : false;
+    const slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
+    const nextSlide = (0, react_1.useCallback)(() => {
+        setCurrentIndex((prev) => (prev + 1) % slides.length);
     }, [slides.length]);
-    var prevSlide = (0, react_1.useCallback)(function () {
-        setCurrentIndex(function (prev) { return (prev - 1 + slides.length) % slides.length; });
+    const prevSlide = (0, react_1.useCallback)(() => {
+        setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
     }, [slides.length]);
-    (0, react_1.useEffect)(function () {
-        if (interval > 0) {
+    (0, react_1.useEffect)(() => {
+        if (interval > 0 && !hovered && !focused && !userPaused && !reducedMotion) {
             timeoutRef.current = setTimeout(nextSlide, interval);
         }
-        return function () {
+        return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
-    }, [currentIndex, interval, nextSlide]);
-    (0, react_1.useEffect)(function () {
+    }, [currentIndex, interval, nextSlide, hovered, focused, userPaused, reducedMotion]);
+    (0, react_1.useEffect)(() => {
         if (currentIndex >= slides.length) {
             setCurrentIndex(0);
         }
         // eslint-disable-next-line
     }, [slides.length]);
-    var ratio = (_c = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _c !== void 0 ? _c : 16 / 9;
-    return (react_1.default.createElement(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden" },
-        react_1.default.createElement(react_2.Flex, { w: "".concat(slides.length * 100, "%"), transform: "translateX(-".concat((currentIndex * 100) / slides.length, "%)"), transition: "transform 0.5s ease" }, __spreadArray([], slides, true).sort(function (a, b) { return a.order - b.order; })
-            .map(function (image, idx) { return (react_1.default.createElement(react_2.Box, { key: image.id, w: "".concat(100 / slides.length, "%"), h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" },
-            react_1.default.createElement(react_2.AspectRatio, { ratio: ratio, w: "100%" },
-                react_1.default.createElement(react_2.Image, { src: isMobile && image.mobilePreviewUrl ? image.mobilePreviewUrl : image.previewUrl, alt: "Slide ".concat(idx + 1), objectFit: "cover", w: "100%", h: "100%", loading: "lazy" })))); })),
-        isArrow && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { color: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[200] } }),
-            react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.ChevronRight, { color: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200] } }))),
-        slides.length > 1 && (react_1.default.createElement(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2 }, slides.map(function (_, idx) { return (react_1.default.createElement(react_2.Box, { key: idx, 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: function () { return setCurrentIndex(idx); }, transition: "all 0.3s" })); })))));
+    const ratio = (_b = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
+    const chipBg = colors.background[50];
+    const chipInk = (0, accentText_1.onFilled)(chipBg, colors.white, colors.black);
+    const chipHoverBg = (0, outlineRung_1.resolveHoverTint)(colors.gray[200], chipBg);
+    const chipHoverInk = (0, accentText_1.onFilled)(chipHoverBg, colors.white, colors.black);
+    const dotInactiveInk = (0, outlineRung_1.liftToContrast)(colors.gray[400], chipBg, outlineRung_1.AA_NON_TEXT);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setFocused(false);
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.AspectRatio, { ratio: ratio, w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: isMobile && image.mobilePreviewUrl
+                                ? image.mobilePreviewUrl
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })] })), showPauseControl && interval > 0 && slides.length > 1 && !reducedMotion && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: userPaused ? (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.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 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, bg: chipBg, px: "0.6rem", py: "0.4rem", borderRadius: "full", children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, border: "none", p: 0, bg: idx === currentIndex ? chipInk : dotInactiveInk, borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), "aria-label": `Go to slide ${idx + 1}`, "aria-current": idx === currentIndex, transition: (0, motion_1.transitionFor)(["background-color"], "base"), _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 exports.default = Slider;

package/dist/Components/SpecTable/SpecTable.d.ts

@@ -0,0 +1,4 @@
+import type { SpecTableProps } from "./SpecTableProps";
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+declare const SpecTable: ({ items, columns, collapsedCount, expanded, defaultExpanded, onExpandedChange, labels, "aria-label": ariaLabel, "data-testid": testId, }: SpecTableProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SpecTable;

package/dist/Components/SpecTable/SpecTable.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const motion_2 = require("../../Theme/chakra/motion");
+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 } = (0, useCustomTheme_1.useCustomTheme)();
+    const listId = (0, react_1.useId)();
+    const [inner, setInner] = (0, react_1.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": testId, children: [(0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "dt", flex: "0 0 40%", minW: 0, color: colors.textMuted, overflowWrap: "anywhere", children: item.label }), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "dd", m: 0, flex: "1 1 0", minW: 0, fontWeight: 500, color: colors.header[900], overflowWrap: "anywhere", sx: typography_1.NUMERIC_TEXT, children: item.value })] }, `${item.label}-${i}`));
+                }) }), foldable && ((0, jsx_runtime_1.jsx)(react_2.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", size: "sm", "aria-expanded": isExpanded, "aria-controls": listId, onClick: toggle, rightIcon: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform"]), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, "aria-hidden": true }) }), children: isExpanded ? text.showLess : `${text.showAll} (${items.length})` }) }))] }));
+};
+exports.default = SpecTable;

package/dist/Components/SpecTable/SpecTableProps.d.ts

@@ -0,0 +1,34 @@
+/** One label/value row. */
+export interface SpecItem {
+    /** Term text; also part of the row key, so keep labels distinct. */
+    label: string;
+    /** Plain-text definition shown beside the label. */
+    value: string;
+}
+/** Every string the table renders; override all of them for another language. */
+export interface SpecTableLabels {
+    /** Text of the toggle that expands the folded rows. */
+    showAll: string;
+    /** Text of the toggle that folds back to `collapsedCount` rows. */
+    showLess: string;
+}
+/** Definition list of specifications on striped tonal rows, with an optional "Show all" fold. */
+export interface SpecTableProps {
+    /** Rows in display order; an empty array renders nothing at all. */
+    items: SpecItem[];
+    /** 2 sits label and value side by side per row on wide screens and falls back to 1 on narrow ones. */
+    columns?: 1 | 2;
+    /** Rows shown before "Show all"; omit to show every row with no toggle. */
+    collapsedCount?: number;
+    /** Controlled expanded state; pair with `onExpandedChange`. */
+    expanded?: boolean;
+    /** Initial expanded state when uncontrolled; defaults to false. Ignored once `expanded` is set. */
+    defaultExpanded?: boolean;
+    /** Fires with the next expanded state when the toggle is clicked, in both controlled and uncontrolled modes. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Per-key overrides of the toggle text; defaults to "Show all" / "Show less". */
+    labels?: Partial<SpecTableLabels>;
+    /** Accessible name applied to the definition list. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/SpecTable/SpecTableProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Spinner/Spinner.d.ts

@@ -0,0 +1,3 @@
+import { SpinnerProps } from "./SpinnerProps";
+/** Themed spinner for inline or panel loading; for a blocking overlay use Loading, for a button use Button isLoading. */
+export default function Spinner({ size, tone, color, label, thickness, speed, emptyColor, sx, testId, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Spinner/Spinner.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/chakra/motion");
+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. */
+function Spinner({ size = "md", tone, color, label = "Loading", thickness, speed = "0.7s", emptyColor = "transparent", sx, testId, ...rest }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const spec = SPINNER_SIZES[size];
+    const ink = color !== null && color !== void 0 ? color : (tone ? (0, tone_1.toneInk)(colors, tone) : colors.accentText);
+    return ((0, jsx_runtime_1.jsx)(react_1.Spinner, { boxSize: spec.boxSize, ...rest, label: label, color: ink, emptyColor: emptyColor, thickness: thickness !== null && thickness !== void 0 ? thickness : spec.thickness, speed: speed, sx: { [motion_1.REDUCED_MOTION_QUERY]: { animationDuration: "1.6s" }, ...sx }, ...(testId !== undefined ? { "data-testid": testId } : {}) }));
+}

package/dist/Components/Spinner/SpinnerProps.d.ts

@@ -0,0 +1,17 @@
+import type { SpinnerProps as ChakraSpinnerProps } from "@chakra-ui/react";
+import type { Tone } from "../../Theme/tokens/builders/tone";
+/** Spinner diameter: xs 12 · sm 16 · md 24 · lg 32 · xl 48 px. */
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** Themed loading spinner; a superset of Chakra's SpinnerProps (rest is forwarded), colour from tokens by default. */
+export type SpinnerProps = Omit<ChakraSpinnerProps, "size"> & {
+    /** Diameter and default stroke; defaults to "md". */
+    size?: SpinnerSize;
+    /** Status tone ink instead of the brand accent. */
+    tone?: Tone;
+    /** Escape hatch, e.g. "currentColor" to match the surrounding text; wins over tone. */
+    color?: string;
+    /** Screen-reader text; defaults to "Loading". */
+    label?: string;
+    /** data-testid for the rendered node; wins over a raw `data-testid` passthrough. */
+    testId?: string;
+};

package/dist/Components/Spinner/SpinnerProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/dist/Components/StageProgress/StageItem.js

@@ -0,0 +1,101 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const states_1 = require("../../Theme/tokens/primitives/states");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const StageProgressProps_1 = require("./StageProgressProps");
+const centerInStrip_1 = require("./centerInStrip");
+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 = (0, motion_1.transitionFor)(["color", "filter"], "base");
+const CHEVRON_TRANSITION = (0, motion_1.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 = (0, useCustomTheme_1.useCustomTheme)();
+    const palette = (0, StageProgressProps_1.resolveStagePalette)(theme, colorScheme);
+    const ref = (0, react_1.useRef)(null);
+    const s = sizeMap[size];
+    (0, react_1.useEffect)(() => {
+        if (state === "active" && scrollIntoViewWhenActive && ref.current) {
+            (0, centerInStrip_1.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 = ((0, jsx_runtime_1.jsxs)(react_2.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 ? states_1.DISABLED_OPACITY : 1, transition: LABEL_TRANSITION, sx: interactive ? (0, focusRing_styles_1.focusVisibleStyles)(theme.colors) : undefined, _hover: interactive
+            ? {
+                color: state === "active" ? undefined : palette.onStrong,
+                filter: "brightness(0.97)",
+            }
+            : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.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 }), (0, jsx_runtime_1.jsxs)(react_2.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" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] })] }));
+    if (showTooltip) {
+        return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", openDelay: 300, children: content }));
+    }
+    return content;
+};
+exports.default = StageItem;

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

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

package/dist/Components/StageProgress/StageProgress.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const useScrollableRegion_1 = require("../../Hooks/useScrollableRegion");
+const StageItem_1 = __importDefault(require("./StageItem"));
+const StepperStage_1 = __importDefault(require("./StepperStage"));
+const centerInStrip_1 = require("./centerInStrip");
+// 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 = (0, useCustomTheme_1.useCustomTheme)();
+    const { ref: stripRef, props: stripProps } = (0, useScrollableRegion_1.useScrollableRegion)({
+        label: ariaLabel,
+        keepRole: variant === "stepper",
+    });
+    if (isLoading) {
+        const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
+        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsx)(react_1.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: { ...(0, scrollbar_1.scrollbarStyles)(theme.colors, "overlay"), ...(0, focusRing_styles_1.focusVisibleStyles)(theme.colors) }, [centerInStrip_1.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 ((0, jsx_runtime_1.jsx)(StepperStage_1.default, { 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 ((0, jsx_runtime_1.jsx)(StageItem_1.default, { 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));
+        }) }));
+};
+exports.default = StageProgress;

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

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