pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/VariantSelector/VariantSelector.js

@@ -0,0 +1,123 @@
+"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 focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const OptionChip_1 = __importDefault(require("../OptionChip/OptionChip"));
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+const variantSelection_1 = require("./variantSelection");
+const GAP = "0.5rem";
+const GRID_MIN = {
+    chip: "4rem",
+    swatch: "3rem",
+    "image-tile": "4.75rem",
+    pack: "6.5rem",
+};
+const cellKey = (axisId, valueId) => `${axisId}\u0000${valueId}`;
+/** Per-axis radiogroups whose availability is derived from `variants`; no vertical-specific vocabulary lives here. */
+const VariantSelector = ({ axes, variants, value, defaultValue, onValueChange, error, showSelectedLabel = false, showLowStock = false, size = "md", layout = "wrap", onGuideClick, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const statusId = `${uid}-status`;
+    const cells = (0, react_1.useRef)(new Map());
+    const [inner, setInner] = (0, react_1.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : {});
+    const [focus, setFocus] = (0, react_1.useState)(null);
+    const selection = value !== null && value !== void 0 ? value : inner;
+    const commit = (0, react_1.useCallback)((next) => {
+        if ((0, variantSelection_1.sameSelection)(next, selection))
+            return;
+        if (value === undefined)
+            setInner(next);
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, (0, commerceVariants_1.findVariant)(axes, variants, next));
+    }, [axes, variants, selection, value, onValueChange]);
+    const choose = (axisId, valueId) => {
+        if ((0, variantSelection_1.isSoldOutEverywhere)(variants, axisId, valueId))
+            return;
+        commit((0, variantSelection_1.selectValue)(axes, variants, selection, axisId, valueId));
+    };
+    const lowStockHint = (axis, option) => {
+        if (!showLowStock)
+            return undefined;
+        const left = (0, commerceVariants_1.remainingStock)(variants, selection, axis.id, option.id);
+        if (left === undefined || left <= 0 || left > commerceVariants_1.LOW_STOCK_THRESHOLD)
+            return undefined;
+        return `${left} left`;
+    };
+    const hintFor = (axis, option) => {
+        const low = lowStockHint(axis, option);
+        if (!low)
+            return option.hint;
+        return axis.type === "pack" && option.hint ? `${option.hint} · ${low}` : low;
+    };
+    const onKeyDown = (axis) => (event) => {
+        var _a;
+        const index = axis.values.findIndex((option) => cells.current.get(cellKey(axis.id, option.id)) === document.activeElement);
+        if (index < 0)
+            return;
+        const last = axis.values.length - 1;
+        const target = event.key === "ArrowRight" || event.key === "ArrowDown"
+            ? (index + 1) % axis.values.length
+            : event.key === "ArrowLeft" || event.key === "ArrowUp"
+                ? (index - 1 + axis.values.length) % axis.values.length
+                : event.key === "Home"
+                    ? 0
+                    : event.key === "End"
+                        ? last
+                        : -1;
+        if (target < 0)
+            return;
+        event.preventDefault();
+        const next = axis.values[target];
+        (_a = cells.current.get(cellKey(axis.id, next.id))) === null || _a === void 0 ? void 0 : _a.focus();
+        setFocus({ axisId: axis.id, valueId: next.id });
+        if ((0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, next.id))
+            choose(axis.id, next.id);
+    };
+    const containerStyles = (axis) => {
+        if (layout === "grid") {
+            return { display: "grid", gridTemplateColumns: `repeat(auto-fill, minmax(${GRID_MIN[axis.type]}, 1fr))`, gap: GAP };
+        }
+        if (layout === "scroll") {
+            return {
+                display: "flex",
+                flexWrap: "nowrap",
+                gap: GAP,
+                overflowX: "auto",
+                pt: "0.5rem",
+                mt: "-0.5rem",
+                pr: "0.5rem",
+                scrollSnapType: "x proximity",
+                sx: (0, scrollbar_1.scrollbarStyles)(colors, "hover"),
+            };
+        }
+        return { display: "flex", flexWrap: "wrap", gap: GAP, pt: "0.25rem" };
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, children: [axes.map((axis) => {
+                var _a, _b;
+                const labelId = `${uid}-${axis.id}-label`;
+                const picked = axis.values.find((option) => option.id === selection[axis.id]);
+                const unpicked = selection[axis.id] === undefined;
+                const invalid = !!error && unpicked;
+                const available = axis.values.map((option) => (0, commerceVariants_1.isOptionAvailable)(variants, selection, axis.id, option.id));
+                const firstAvailable = (_a = axis.values.find((_, i) => available[i])) !== null && _a !== void 0 ? _a : axis.values[0];
+                const stopId = (focus === null || focus === void 0 ? void 0 : focus.axisId) === axis.id ? focus.valueId : (_b = (picked !== null && picked !== void 0 ? picked : firstAvailable)) === null || _b === void 0 ? void 0 : _b.id;
+                const { guide } = axis;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", justify: "space-between", gap: 3, mb: 3, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "baseline", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: labelId, fontSize: "sm", fontWeight: 600, color: colors.header[900], children: axis.label }), showSelectedLabel && picked ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", color: colors.textMuted, noOfLines: 1, children: picked.label })) : null] }), guide ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", display: "inline-flex", alignItems: "center", gap: 1, flexShrink: 0, fontSize: "sm", fontWeight: 600, color: colors.accentText, borderRadius: "md", onClick: () => {
+                                        guide.onClick();
+                                        onGuideClick === null || onGuideClick === void 0 ? void 0 : onGuideClick(axis.id);
+                                    }, sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Ruler, { size: 14, "aria-hidden": true }), guide.label] })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "radiogroup", "aria-labelledby": labelId, "aria-invalid": invalid || undefined, "aria-describedby": invalid ? statusId : undefined, onKeyDown: onKeyDown(axis), onBlur: (event) => {
+                                if (!event.currentTarget.contains(event.relatedTarget))
+                                    setFocus(null);
+                            }, ...containerStyles(axis), children: axis.values.map((option, i) => ((0, jsx_runtime_1.jsx)(OptionChip_1.default, { ref: (node) => {
+                                    cells.current.set(cellKey(axis.id, option.id), node);
+                                }, label: option.label, variant: axis.type, swatch: option.swatch, image: option.image, hint: hintFor(axis, option), showLabel: axis.type === "swatch" && layout === "grid", size: size, fullWidth: layout === "grid" && (axis.type === "chip" || axis.type === "pack"), selected: option.id === selection[axis.id], unavailable: !available[i], invalid: invalid, tabIndex: option.id === stopId ? 0 : -1, onFocus: () => setFocus({ axisId: axis.id, valueId: option.id }), onSelect: () => choose(axis.id, option.id) }, option.id))) })] }, axis.id));
+            }), (0, jsx_runtime_1.jsx)(react_2.Box, { role: "status", id: statusId, "aria-live": "polite", mt: error ? -2 : 0, children: error ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: error })] })) : null })] }));
+};
+exports.default = VariantSelector;

package/dist/Components/VariantSelector/VariantSelectorProps.d.ts

@@ -0,0 +1,31 @@
+import type { OptionAxis, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+import type { OptionChipSize } from "../OptionChip/OptionChipProps";
+/** How an axis lays out its options: wrapping rows, one horizontal scroller, or an even grid (which also prints swatch names). */
+export type VariantSelectorLayout = "wrap" | "scroll" | "grid";
+/** Config-driven option picker for any product vertical; every axis label and value comes from `axes`. */
+export interface VariantSelectorProps {
+    /** One radiogroup per axis, in order. */
+    axes: OptionAxis[];
+    /** Availability is derived per combination from these variants' stock. */
+    variants: ProductVariant[];
+    /** Controlled selection, axis id to option value id. */
+    value?: VariantSelection;
+    /** Initial selection when uncontrolled; ignored once `value` is passed. */
+    defaultValue?: VariantSelection;
+    /** Receives the new selection and the matching variant, or undefined while the selection is incomplete or has no variant. */
+    onValueChange?: (selection: VariantSelection, variant: ProductVariant | undefined) => void;
+    /** Prompt such as "Select a size": shown as a status message and rings every axis still unpicked. */
+    error?: string;
+    /** Prints the picked value beside each axis label ("Colour  Indigo Wash"). */
+    showSelectedLabel?: boolean;
+    /** Tags a value "N left" only when its real remaining stock is at or under LOW_STOCK_THRESHOLD. */
+    showLowStock?: boolean;
+    /** Size of every option chip. Defaults to "md". */
+    size?: OptionChipSize;
+    /** How each axis arranges its options. Defaults to "wrap". */
+    layout?: VariantSelectorLayout;
+    /** Also called when an axis `guide` link is clicked, after the guide's own onClick. */
+    onGuideClick?: (axisId: string) => void;
+    /** Test id placed on the root element. */
+    "data-testid"?: string;
+}

package/dist/Components/VariantSelector/VariantSelectorProps.js

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

package/dist/Components/VariantSelector/variantSelection.d.ts

@@ -0,0 +1,6 @@
+import type { OptionAxis, ProductVariant, VariantSelection } from "../Commerce/commerceTypes";
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+export declare const selectValue: (axes: OptionAxis[], variants: ProductVariant[], selection: VariantSelection, axisId: string, valueId: string) => VariantSelection;
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+export declare const isSoldOutEverywhere: (variants: ProductVariant[], axisId: string, valueId: string) => boolean;
+export declare const sameSelection: (a: VariantSelection, b: VariantSelection) => boolean;

package/dist/Components/VariantSelector/variantSelection.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sameSelection = exports.isSoldOutEverywhere = exports.selectValue = void 0;
+const commerceVariants_1 = require("../Commerce/commerceVariants");
+/** Picks `valueId` on `axisId`, then drops every other pick that no sellable variant can pair with it. */
+const selectValue = (axes, variants, selection, axisId, valueId) => {
+    const next = { ...selection, [axisId]: valueId };
+    for (const axis of axes) {
+        const pick = next[axis.id];
+        if (axis.id === axisId || pick === undefined)
+            continue;
+        if (!(0, commerceVariants_1.isOptionAvailable)(variants, next, axis.id, pick))
+            delete next[axis.id];
+    }
+    return next;
+};
+exports.selectValue = selectValue;
+/** Sold out under every combination, so picking it can never lead to a purchasable variant. */
+const isSoldOutEverywhere = (variants, axisId, valueId) => !(0, commerceVariants_1.isOptionAvailable)(variants, {}, axisId, valueId);
+exports.isSoldOutEverywhere = isSoldOutEverywhere;
+const sameSelection = (a, b) => {
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    return [...keys].every((key) => a[key] === b[key]);
+};
+exports.sameSelection = sameSelection;

package/dist/Components/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,15 @@
+export declare const visuallyHiddenStyle: {
+    readonly border: "0";
+    readonly clip: "rect(0, 0, 0, 0)";
+    readonly height: "1px";
+    readonly width: "1px";
+    readonly margin: "-1px";
+    readonly padding: "0";
+    readonly overflow: "hidden";
+    readonly whiteSpace: "nowrap";
+    readonly position: "fixed";
+    readonly top: "0";
+    readonly left: "0";
+};
+declare const VisuallyHidden: import("@chakra-ui/react").ChakraComponent<"span", {}>;
+export default VisuallyHidden;

package/dist/Components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visuallyHiddenStyle = void 0;
+const react_1 = require("@chakra-ui/react");
+// NOTE: fixed, not Chakra's absolute: an absolute 1px box can extend a scrolled page.
+exports.visuallyHiddenStyle = {
+    border: "0",
+    clip: "rect(0, 0, 0, 0)",
+    height: "1px",
+    width: "1px",
+    margin: "-1px",
+    padding: "0",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    position: "fixed",
+    top: "0",
+    left: "0",
+};
+const VisuallyHidden = (0, react_1.chakra)("span", { baseStyle: exports.visuallyHiddenStyle });
+VisuallyHidden.displayName = "VisuallyHidden";
+exports.default = VisuallyHidden;

package/dist/Components/VisuallyHidden/VisuallyHiddenProps.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLChakraProps } from "@chakra-ui/react";
+/** A `<span>` (or any `as` element) that screen readers read and sighted users never see; every attribute and ref reach it. */
+export type VisuallyHiddenProps = HTMLChakraProps<"span">;

package/dist/Components/VisuallyHidden/VisuallyHiddenProps.js

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

package/dist/Components/WishlistToggle/WishlistToggle.d.ts

@@ -0,0 +1,4 @@
+import type { WishlistToggleProps } from "./WishlistToggleProps";
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+declare const WishlistToggle: ({ selected, defaultSelected, onSelectedChange, size, variant, label, isDisabled, "data-testid": testId, }: WishlistToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default WishlistToggle;

package/dist/Components/WishlistToggle/WishlistToggle.js

@@ -0,0 +1,66 @@
+"use strict";
+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 react_3 = require("@emotion/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
+const scrim_1 = require("../../Theme/tokens/builders/scrim");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
+const HIT_PX = { sm: 32, md: 44, lg: 48 };
+const POP_MS = 320;
+const pop = (0, react_3.keyframes) `
+  0% { transform: scale(1); }
+  40% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+`;
+/** Heart toggle for saving a product: glass on media, tonal or bare elsewhere; pops once when saved. */
+const WishlistToggle = ({ selected, defaultSelected = false, onSelectedChange, size = "md", variant = "soft", label, isDisabled = false, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reduced = (0, motion_2.usePrefersReducedMotion)();
+    const [inner, setInner] = (0, react_1.useState)(defaultSelected);
+    const [popKey, setPopKey] = (0, react_1.useState)(0);
+    const on = selected !== null && selected !== void 0 ? selected : inner;
+    const spec = controlSizes_1.BUTTON_SIZES[size];
+    const hit = HIT_PX[size];
+    const icon = spec.iconSize + 2;
+    const popping = on && popKey > 0 && !reduced;
+    const toggle = () => {
+        const next = !on;
+        if (selected === undefined)
+            setInner(next);
+        if (next)
+            setPopKey((k) => k + 1);
+        onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(next);
+    };
+    const saved = (0, filledSurface_1.resolveFilledSurface)(colors.semantic.error, colors);
+    const look = (() => {
+        if (variant === "glass") {
+            return on
+                ? { bg: saved.fill, hoverBg: saved.hoverFill, color: saved.color }
+                : { bg: (0, scrim_1.overlayScrim)(colors), hoverBg: (0, scrim_1.overlayScrim)(colors), color: colors.white };
+        }
+        const ink = on ? colors.semanticText.error : variant === "soft" ? colors.header[900] : colors.textMuted;
+        return {
+            bg: variant === "soft" ? colors.background[100] : colors.transparent,
+            hoverBg: variant === "soft" ? (0, tonalHover_1.tonalHover)(colors) : (0, tonalHover_1.tonalHover)(colors, colors.background[50], colors.background[100]),
+            color: ink,
+        };
+    })();
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-pressed": on, "aria-label": label !== null && label !== void 0 ? label : (on ? "Remove from wishlist" : "Add to wishlist"), disabled: isDisabled, onClick: toggle, "data-testid": testId, "data-selected": on || undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: `${hit}px`, flexShrink: 0, borderRadius: "full", cursor: isDisabled ? "not-allowed" : "pointer", opacity: isDisabled ? 0.5 : 1, sx: {
+            outline: "none",
+            "&:focus-visible > [data-disc]": (0, focusRing_styles_1.focusVisibleRing)(colors),
+            "&:hover:not(:disabled) > [data-disc]": { backgroundColor: look.hoverBg },
+            ...(reduced ? {} : { "&:active:not(:disabled) > [data-disc]": { transform: "scale(0.92)" } }),
+        }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", "data-disc": true, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: spec.height, borderRadius: "full", bg: look.bg, color: look.color, transition: (0, motion_1.transitionFor)(["background-color", "color", "transform"]), sx: {
+                ...(variant === "glass" ? { backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)" } : {}),
+                ...(0, motion_2.reducedMotionSx)(),
+            }, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", "data-pop": popping || undefined, animation: popping ? `${pop} ${POP_MS}ms ${motion_1.MOTION_EASE}` : undefined, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Heart, { size: icon, "aria-hidden": true, fill: on ? "currentColor" : "none", strokeWidth: 2 }) }, popKey) }) }));
+};
+exports.default = WishlistToggle;

package/dist/Components/WishlistToggle/WishlistToggleProps.d.ts

@@ -0,0 +1,23 @@
+/** Button sizes: sm 32 px, md 40 px with a 44 px hit area, lg 48 px. */
+export type WishlistToggleSize = "sm" | "md" | "lg";
+/** glass: translucent dark disc for use on photos; soft: tonal disc on the page; ghost: icon only. */
+export type WishlistToggleVariant = "glass" | "soft" | "ghost";
+/** Heart toggle button with `aria-pressed`, a spring pop on save and a 44 px touch target from md up. */
+export interface WishlistToggleProps {
+    /** Controlled state; pair with `onSelectedChange`. */
+    selected?: boolean;
+    /** Initial state when `selected` is not controlled. */
+    defaultSelected?: boolean;
+    /** Fires with the next state on click or keyboard activation. */
+    onSelectedChange?: (selected: boolean) => void;
+    /** Button size; defaults to "md". */
+    size?: WishlistToggleSize;
+    /** Look of the button; defaults to "soft". */
+    variant?: WishlistToggleVariant;
+    /** Fixed accessible name, e.g. "Save Denim Jacket"; defaults to "Add to wishlist" / "Remove from wishlist". */
+    label?: string;
+    /** Blocks toggling and dims the button. */
+    isDisabled?: boolean;
+    /** Test id on the button. */
+    "data-testid"?: string;
+}

package/dist/Components/WishlistToggle/WishlistToggleProps.js

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

package/dist/Components/WizardDialog/WizardDialog.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { WizardDialogProps, WizardProps } from "./WizardDialogProps";
+export { wizardTransition, firstInvalidStep, INITIAL_WIZARD_STATE } from "./wizardSteps";
+export type { WizardAction, WizardState, StepValidator } from "./wizardSteps";
+/** Wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. A Modal by default; `chrome="inline"` draws it in place. */
+export declare const WizardDialog: React.FC<WizardDialogProps>;
+/** The same wizard inline, for a full-page flow rather than a modal. */
+export declare const Wizard: React.FC<WizardProps>;
+export default WizardDialog;

package/dist/Components/WizardDialog/WizardDialog.js

@@ -0,0 +1,119 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = exports.WizardDialog = exports.INITIAL_WIZARD_STATE = exports.firstInvalidStep = exports.wizardTransition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const StageProgress_1 = __importDefault(require("../StageProgress/StageProgress"));
+const DescriptionList_1 = __importDefault(require("../DescriptionList/DescriptionList"));
+const useWizardFlow_1 = require("./useWizardFlow");
+var wizardSteps_1 = require("./wizardSteps");
+Object.defineProperty(exports, "wizardTransition", { enumerable: true, get: function () { return wizardSteps_1.wizardTransition; } });
+Object.defineProperty(exports, "firstInvalidStep", { enumerable: true, get: function () { return wizardSteps_1.firstInvalidStep; } });
+Object.defineProperty(exports, "INITIAL_WIZARD_STATE", { enumerable: true, get: function () { return wizardSteps_1.INITIAL_WIZARD_STATE; } });
+const DEFAULT_LABELS = {
+    back: "Back",
+    next: "Continue",
+    finish: "Finish",
+    cancel: "Cancel",
+    stepOf: (current, total) => `Step ${current} of ${total}`,
+    fixErrors: "Fix the following to continue",
+    review: "Review",
+};
+const WizardBody = ({ flow, steps, labels, testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const headingRef = (0, react_1.useRef)(null);
+    const previousStep = (0, react_1.useRef)(flow.step.id);
+    const reviewed = steps.filter((candidate) => candidate.summary !== undefined);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (previousStep.current === flow.step.id)
+            return;
+        previousStep.current = flow.step.id;
+        (_a = headingRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [flow.step.id]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, "data-step": flow.step.id, children: [(0, jsx_runtime_1.jsx)(StageProgress_1.default, { variant: "stepper", size: "sm", showCheck: true, stages: steps.map((candidate, index) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    isDisabled: index > flow.furthest,
+                })), value: flow.step.id, onChange: (_id, _stage, index) => flow.goto(index) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: labels.stepOf(flow.index + 1, steps.length) }), (0, jsx_runtime_1.jsx)(react_2.Heading, { ref: headingRef, tabIndex: -1, as: "h3", fontSize: "md", fontWeight: 600, color: colors.header[900], _focus: { outline: "none" }, children: flow.step.label })] }), flow.errors.length ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", role: "alert", "data-testid": "wizard-errors", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertTitle, { fontSize: "sm", children: labels.fixErrors }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { fontSize: "sm", children: (0, jsx_runtime_1.jsx)(react_2.UnorderedList, { mt: 1, children: flow.errors.map((message) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, { children: message }, message))) }) })] })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { children: flow.step.content }), flow.isLast && reviewed.length ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "wizard-review", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h4", fontSize: "sm", fontWeight: 600, mb: 2, color: colors.header[900], children: labels.review }), (0, jsx_runtime_1.jsx)(DescriptionList_1.default, { layout: "inline", columns: { base: 1 }, items: reviewed.map((candidate) => ({
+                            label: candidate.label,
+                            value: candidate.summary,
+                        })) })] })) : null] }));
+};
+const WizardFooter = ({ flow, labels, isFinishing, finishDisabled, finishBlockedReason, onCancel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reasonId = (0, react_1.useId)();
+    const reason = finishDisabled && !isFinishing ? finishBlockedReason : undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: reason ? "center" : undefined, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast && reason ? ((0, jsx_runtime_1.jsx)(react_2.Text, { id: reasonId, fontSize: "xs", color: colors.textMuted, "data-testid": "wizard-finish-reason", children: reason })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, isDisabled: finishDisabled, "aria-describedby": reason ? reasonId : undefined, loadingText: labels.finish, "data-testid": "wizard-finish" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+};
+const WizardInlineFrame = ({ title, subtitle, testId, footer, children }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "data-testid": testId, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), subtitle ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })) : null] }), children, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "sticky", bottom: 0, pt: 3, borderTopWidth: "1px", borderColor: (0, surfaceRaised_1.raisedRule)(colors), bg: colors.surfaceRaised, children: footer })] }));
+};
+/** Wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. A Modal by default; `chrome="inline"` draws it in place. */
+const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", chrome = "modal", labels, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    const guardedClose = () => {
+        if (!isFinishing)
+            onClose();
+    };
+    const body = ((0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }));
+    const footer = ((0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }));
+    if (chrome === "inline") {
+        if (!isOpen)
+            return null;
+        return ((0, jsx_runtime_1.jsx)(WizardInlineFrame, { title: title, subtitle: subtitle, testId: testId ? `${testId}-inline` : "wizard-inline", footer: footer, children: body }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: body }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: footer })] }));
+};
+exports.WizardDialog = WizardDialog;
+/** The same wizard inline, for a full-page flow rather than a modal. */
+const Wizard = ({ steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: onCancel })] }));
+};
+exports.Wizard = Wizard;
+exports.default = exports.WizardDialog;

package/dist/Components/WizardDialog/WizardDialogProps.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from "react";
+/** One step of a wizard: its stepper label, body, validation and review summary. */
+export type WizardStep = {
+    /** Stable key for the step; the value of `stepId` and what `onStepChange` receives. */
+    id: string;
+    /** Stepper label and the heading shown above the step content. */
+    label: string;
+    /** Body rendered below the step heading; stays in the tree only while this step is current. */
+    content: ReactNode;
+    /** Messages that block leaving this step; [] = valid. Must be pure (runs in the reducer). */
+    validate?: () => string[];
+    /** One line shown in the review on the last step; steps without it are not reviewed. */
+    summary?: ReactNode;
+};
+/** Visible strings; every key falls back to its English default. */
+export type WizardLabels = Partial<{
+    /** Back button. Default "Back". */
+    back: string;
+    /** Continue button on every step but the last. Default "Continue". */
+    next: string;
+    /** Finish button on the last step. Default "Finish". */
+    finish: string;
+    /** Cancel button text. Default "Cancel". */
+    cancel: string;
+    /** Progress line above the step heading, from the 1-based step number and the step count. Default "Step N of M". */
+    stepOf: (current: number, total: number) => string;
+    /** Title of the error summary shown when a step fails validation. Default "Fix the following to continue". */
+    fixErrors: string;
+    /** Heading of the review block on the last step. Default "Review". */
+    review: string;
+}>;
+/** Props for the wizard dialog: Modal (or inline with `chrome`) + stepper + per-step validation + review on the last step. */
+export interface WizardDialogProps {
+    /** Shows the wizard; closing resets uncontrolled progress to the first step. */
+    isOpen: boolean;
+    /** Ignored while `isFinishing`. */
+    onClose: () => void;
+    /** Dialog title, or the heading above the inline wizard. */
+    title: string;
+    /** Muted line under the title. */
+    subtitle?: string;
+    /** Ordered steps; the stepper locks every step beyond the furthest one validly reached. */
+    steps: WizardStep[];
+    /** Called after every step re-validates; a failing step is jumped to with its errors. */
+    onFinish: () => void;
+    /** Shows the Finish spinner and disables close, Esc, Back and Cancel. */
+    isFinishing?: boolean;
+    /** Disables Finish on the last step (a pending upload, say); Back and the stepper still work. */
+    finishDisabled?: boolean;
+    /** Why Finish is disabled; shown beside it and wired as its `aria-describedby`. Needs `finishDisabled`. */
+    finishBlockedReason?: string;
+    /** Controlled step; omit for uncontrolled (resets to the first step on close). */
+    stepId?: string;
+    /** Fires whenever the visible step changes, controlled or not. */
+    onStepChange?: (stepId: string) => void;
+    /** Modal width; default "3xl". Ignored when `chrome` is "inline". */
+    size?: "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    /** "inline" draws the wizard in place with no Modal (no overlay, focus trap, close X, Esc or dialog role) for a host that is already the dialog, such as a WorkspaceWindow; it renders nothing while closed and Cancel still calls `onClose`. Default "modal". */
+    chrome?: "modal" | "inline";
+    /** Overrides button and message text; omitted keys keep their English defaults. */
+    labels?: WizardLabels;
+    /** Test id of the step body; the inline frame uses it with an `-inline` suffix. Defaults to "wizard-dialog". */
+    "data-testid"?: string;
+}
+/** Same flow inline (a page section, not a modal) — for full-page wizards. */
+export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size" | "chrome"> {
+    /** Renders a Cancel button in the footer when provided. */
+    onCancel?: () => void;
+}

package/dist/Components/WizardDialog/WizardDialogProps.js

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

package/dist/Components/WizardDialog/useWizardFlow.d.ts

@@ -0,0 +1,22 @@
+import type { WizardStep } from "./WizardDialogProps";
+type FlowOptions = {
+    steps: WizardStep[];
+    stepId?: string;
+    onStepChange?: (stepId: string) => void;
+    onFinish: () => void;
+    resetWhen?: boolean;
+};
+export declare function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }: FlowOptions): {
+    index: number;
+    furthest: number;
+    errors: string[];
+    step: WizardStep;
+    isFirst: boolean;
+    isLast: boolean;
+    next: () => void;
+    back: () => void;
+    goto: (target: number) => void;
+    finish: () => void;
+};
+export type WizardFlow = ReturnType<typeof useWizardFlow>;
+export {};

package/dist/Components/WizardDialog/useWizardFlow.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWizardFlow = useWizardFlow;
+const react_1 = require("react");
+const wizardSteps_1 = require("./wizardSteps");
+function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }) {
+    const [state, setState] = (0, react_1.useState)(wizardSteps_1.INITIAL_WIZARD_STATE);
+    const validators = steps.map((step) => step.validate);
+    const controlledIndex = stepId === undefined ? -1 : steps.findIndex((s) => s.id === stepId);
+    const isControlled = stepId !== undefined;
+    const index = Math.min(isControlled ? Math.max(controlledIndex, 0) : state.index, Math.max(steps.length - 1, 0));
+    const furthest = Math.max(state.furthest, index);
+    (0, react_1.useEffect)(() => {
+        if (resetWhen)
+            setState(wizardSteps_1.INITIAL_WIZARD_STATE);
+    }, [resetWhen]);
+    const dispatch = (0, react_1.useCallback)((action) => {
+        const base = { ...state, index, furthest };
+        const next = (0, wizardSteps_1.wizardTransition)(base, action, validators);
+        setState(next);
+        if (next.index !== index)
+            onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(steps[next.index].id);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, index, furthest, steps, onStepChange]);
+    const finish = (0, react_1.useCallback)(() => {
+        const invalid = (0, wizardSteps_1.firstInvalidStep)(validators);
+        if (invalid) {
+            dispatch({ type: "fail", ...invalid });
+            return;
+        }
+        onFinish();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch, steps, onFinish]);
+    return {
+        index,
+        furthest,
+        errors: state.errors,
+        step: steps[index],
+        isFirst: index === 0,
+        isLast: index === steps.length - 1,
+        next: () => dispatch({ type: "next" }),
+        back: () => dispatch({ type: "back" }),
+        goto: (target) => dispatch({ type: "goto", index: target }),
+        finish,
+    };
+}