@openzeppelin/ui-components 1.4.0 → 1.5.0

package/dist/index.cjs

@@ -1605,12 +1605,12 @@ SelectSeparator.displayName = _radix_ui_react_select.Separator.displayName;
 * Can render as a button or anchor element depending on whether href is provided.
 */
 function SidebarButton({ icon, children, onClick, size = "default", badge, disabled = false, isSelected = false, href, target, rel, className }) {
-	const commonClass = (0, _openzeppelin_ui_utils.cn)("group relative flex items-center gap-2 px-3 py-2.5 rounded-lg font-semibold text-sm transition-colors", badge ? "justify-between" : "justify-start", disabled ? "text-gray-400 cursor-not-allowed" : isSelected ? "text-[#111928] bg-neutral-100" : "text-gray-600 hover:text-gray-700 cursor-pointer hover:before:content-[\"\"] hover:before:absolute hover:before:inset-x-0 hover:before:top-1 hover:before:bottom-1 hover:before:bg-muted/80 hover:before:rounded-lg hover:before:-z-10", size === "small" ? "h-10" : "h-11", className);
+	const commonClass = (0, _openzeppelin_ui_utils.cn)("group relative flex flex-wrap items-center gap-x-2 gap-y-0.5 px-3 py-2 rounded-lg font-semibold text-sm transition-colors", badge ? "justify-between" : "justify-start", disabled ? "text-gray-400 cursor-not-allowed" : isSelected ? "text-[#111928] bg-neutral-100" : "text-gray-600 hover:text-gray-700 cursor-pointer hover:before:content-[\"\"] hover:before:absolute hover:before:inset-x-0 hover:before:top-1 hover:before:bottom-1 hover:before:bg-muted/80 hover:before:rounded-lg hover:before:-z-10", size === "small" ? "min-h-10" : "min-h-11", className);
 	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
 		children: [icon, children]
 	}), badge && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-		className: "text-xs px-2 py-1 bg-muted text-muted-foreground rounded-full font-medium",
+		className: "text-xs px-2 py-0.5 bg-muted text-muted-foreground rounded-full font-medium",
 		children: badge
 	})] });
 	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -1855,6 +1855,546 @@ function ViewContractStateButton({ contractAddress, onToggle }) {
 	});
 }
 
+//#endregion
+//#region src/components/ui/wizard/WizardStepper.tsx
+function resolveState(step, index, currentStepIndex, furthestStepIndex) {
+	if (step.status === "completed" || step.status === "skipped") return "completed";
+	if (index === currentStepIndex) return "current";
+	if (step.isInvalid && (index < currentStepIndex || index <= furthestStepIndex)) return "invalid";
+	if (index < currentStepIndex) return "completed";
+	if (index <= furthestStepIndex) return "visited";
+	return "upcoming";
+}
+function canClick(state, freeNavigation = false) {
+	if (freeNavigation) return true;
+	return state !== "upcoming";
+}
+function StepCircle({ state, index }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition-all", state === "completed" && "bg-blue-600 text-white", state === "current" && "bg-blue-600 text-white ring-2 ring-blue-200", state === "visited" && "bg-blue-100 text-blue-600 ring-1 ring-blue-300", state === "invalid" && "bg-red-100 text-red-600 ring-1 ring-red-300", state === "upcoming" && "bg-zinc-100 text-zinc-400"),
+		children: state === "completed" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3.5" }) : state === "visited" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "size-3" }) : state === "invalid" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.AlertCircle, { className: "size-3.5" }) : index + 1
+	});
+}
+function StepLabel({ title, state, isSkipped }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "min-w-0 flex-1",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, _openzeppelin_ui_utils.cn)("text-sm font-medium transition-colors", state === "current" && "text-blue-700", state === "completed" && "text-zinc-700", state === "visited" && "text-blue-600", state === "invalid" && "text-red-600", state === "upcoming" && "text-zinc-400"),
+			children: title
+		}), isSkipped && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "mt-0.5 block text-[11px] text-zinc-400",
+			children: "Skipped"
+		})]
+	});
+}
+function VerticalStepper({ steps, currentStepIndex, furthestStepIndex = currentStepIndex, onStepClick, freeNavigation, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": "Wizard steps",
+		className: (0, _openzeppelin_ui_utils.cn)("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-col gap-1",
+			children: steps.map((step, index) => {
+				const state = resolveState(step, index, currentStepIndex, furthestStepIndex);
+				const clickable = canClick(state, freeNavigation) && !!onStepClick;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => clickable && onStepClick?.(index),
+					disabled: !clickable,
+					className: (0, _openzeppelin_ui_utils.cn)("flex items-center gap-3 rounded-xl border border-transparent px-3 py-3 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-blue-200 bg-blue-50", state === "completed" && "bg-white hover:bg-gray-50", state === "visited" && "bg-white hover:bg-blue-50/50", state === "invalid" && "border-red-200 bg-red-50 hover:bg-red-100/60", state === "upcoming" && "bg-white"),
+					"aria-current": state === "current" ? "step" : void 0,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
+						state,
+						index
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, {
+						title: step.title,
+						state,
+						isSkipped: step.status === "skipped"
+					})]
+				}, step.id);
+			})
+		})
+	});
+}
+function HorizontalStepper({ steps, currentStepIndex, furthestStepIndex = currentStepIndex, onStepClick, freeNavigation, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		"aria-label": "Wizard steps",
+		className: (0, _openzeppelin_ui_utils.cn)("rounded-2xl border border-zinc-200 bg-white p-6", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex w-full items-center",
+			children: steps.map((step, index) => {
+				const state = resolveState(step, index, currentStepIndex, furthestStepIndex);
+				const clickable = canClick(state, freeNavigation) && !!onStepClick;
+				const isLast = index === steps.length - 1;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					onClick: () => clickable && onStepClick?.(index),
+					disabled: !clickable,
+					className: (0, _openzeppelin_ui_utils.cn)("flex items-center gap-2 rounded-xl border border-transparent px-3 py-2 text-left transition-all duration-150", clickable ? "cursor-pointer" : "cursor-not-allowed opacity-50", state === "current" && "border-blue-200 bg-blue-50", state === "completed" && "bg-white hover:bg-gray-50", state === "visited" && "bg-white hover:bg-blue-50/50", state === "invalid" && "border-red-200 bg-red-50 hover:bg-red-100/60", state === "upcoming" && "bg-white"),
+					"aria-current": state === "current" ? "step" : void 0,
+					"aria-label": `Step ${index + 1}: ${step.title}`,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
+						state,
+						index
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "hidden sm:block",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepLabel, {
+							title: step.title,
+							state,
+							isSkipped: step.status === "skipped"
+						})
+					})]
+				}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _openzeppelin_ui_utils.cn)("mx-1 h-px flex-1 transition-colors sm:mx-2", index < currentStepIndex ? "bg-blue-600" : "bg-zinc-200") })] }, step.id);
+			})
+		})
+	});
+}
+/**
+* A stepper component for navigating through a series of steps.
+*
+* @param props - The props for the WizardStepper component.
+* @returns A React node representing the stepper component.
+*/
+function WizardStepper(props) {
+	const { variant = "horizontal", ...rest } = props;
+	return variant === "vertical" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VerticalStepper, {
+		...rest,
+		variant
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HorizontalStepper, {
+		...rest,
+		variant
+	});
+}
+
+//#endregion
+//#region src/components/ui/wizard/WizardNavigation.tsx
+/**
+* A navigation component for the wizard.
+*
+* @param props - The props for the WizardNavigation component.
+* @returns A React node representing the navigation component.
+*/
+function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevious, onNext, onCancel, extraActions, nextLabel = "Next", lastStepLabel = "Finish", className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex items-center justify-between", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-2",
+			children: [onCancel && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: onCancel,
+				className: "gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { className: "size-4" }), "Cancel"]
+			}), !isFirstStep && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: onPrevious,
+				className: "gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronLeft, { className: "size-4" }), "Previous"]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex gap-2",
+			children: [extraActions, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				type: "button",
+				onClick: onNext,
+				disabled: !canProceed,
+				className: "gap-2",
+				children: [isLastStep ? lastStepLabel : nextLabel, !isLastStep && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "size-4" })]
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/ui/wizard/hooks.ts
+/**
+* Clamp a step index into the valid range for the current wizard.
+*/
+function getSafeStepIndex(stepCount, currentStepIndex) {
+	if (stepCount === 0) return 0;
+	return Math.max(0, Math.min(currentStepIndex, stepCount - 1));
+}
+/**
+* Track the highest step reached unless a controlled value is provided.
+*/
+function useFurthestStepIndex(currentStepIndex, controlledFurthestStepIndex) {
+	const [internalFurthestStepIndex, setInternalFurthestStepIndex] = (0, react.useState)(currentStepIndex);
+	(0, react.useEffect)(() => {
+		setInternalFurthestStepIndex((prev) => Math.max(prev, currentStepIndex));
+	}, [currentStepIndex]);
+	return controlledFurthestStepIndex ?? internalFurthestStepIndex;
+}
+/**
+* Keep the scrollable wizard's active and visited step state in sync with scrolling and clicks.
+*/
+function useScrollableWizardStepTracking({ steps, currentStepIndex, onStepChange, scrollRef, sectionId, scrollPadding = SCROLL_PADDING_PX }) {
+	const safeIndex = getSafeStepIndex(steps.length, currentStepIndex);
+	const initialIndexRef = (0, react.useRef)(safeIndex);
+	const rafRef = (0, react.useRef)(null);
+	const manualSelectionIndexRef = (0, react.useRef)(null);
+	const stepsRef = (0, react.useRef)(steps);
+	const sectionIdRef = (0, react.useRef)(sectionId);
+	const onStepChangeRef = (0, react.useRef)(onStepChange);
+	const scrollPaddingRef = (0, react.useRef)(scrollPadding);
+	(0, react.useEffect)(() => {
+		stepsRef.current = steps;
+		sectionIdRef.current = sectionId;
+		onStepChangeRef.current = onStepChange;
+		scrollPaddingRef.current = scrollPadding;
+	});
+	const [activeIndex, setActiveIndex] = (0, react.useState)(initialIndexRef.current);
+	const activeIndexRef = (0, react.useRef)(initialIndexRef.current);
+	const [furthestStepIndex, setFurthestStepIndex] = (0, react.useState)(initialIndexRef.current);
+	const isMountedRef = (0, react.useRef)(false);
+	const clearManualSelection = (0, react.useCallback)(() => {
+		manualSelectionIndexRef.current = null;
+	}, []);
+	(0, react.useEffect)(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		const ownerDocument = container.ownerDocument;
+		isMountedRef.current = false;
+		let didCompleteInitialRaf = false;
+		const releaseManualSelectionOnUserScroll = () => {
+			clearManualSelection();
+		};
+		const handleKeyDown = (event) => {
+			if (isScrollableNavigationKey(event)) clearManualSelection();
+		};
+		const handleScroll = () => {
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+			rafRef.current = requestAnimationFrame(() => {
+				const currentSteps = stepsRef.current;
+				const currentSectionId = sectionIdRef.current;
+				const currentOnStepChange = onStepChangeRef.current;
+				if (currentSteps.length === 0) return;
+				const manualSelectionIndex = manualSelectionIndexRef.current;
+				const naturalState = resolveScrollableActiveIndex(container, currentSteps, currentSectionId);
+				const naturalActiveIndex = naturalState.activeIndex;
+				const newActiveIndex = manualSelectionIndex ?? naturalActiveIndex;
+				const shouldCommitFurthestStepIndex = manualSelectionIndex !== null ? true : naturalState.commitFurthestStepIndex;
+				if (activeIndexRef.current !== newActiveIndex) {
+					activeIndexRef.current = newActiveIndex;
+					setActiveIndex(newActiveIndex);
+					if (isMountedRef.current) {
+						lastEmittedIndexRef.current = newActiveIndex;
+						currentOnStepChange(newActiveIndex);
+					}
+				} else setActiveIndex(newActiveIndex);
+				if (shouldCommitFurthestStepIndex) setFurthestStepIndex((prev) => Math.max(prev, newActiveIndex));
+				rafRef.current = null;
+				if (!didCompleteInitialRaf) {
+					didCompleteInitialRaf = true;
+					isMountedRef.current = true;
+				}
+			});
+		};
+		container.addEventListener("wheel", releaseManualSelectionOnUserScroll, { passive: true });
+		container.addEventListener("touchmove", releaseManualSelectionOnUserScroll, { passive: true });
+		container.addEventListener("pointerdown", releaseManualSelectionOnUserScroll);
+		ownerDocument.addEventListener("keydown", handleKeyDown);
+		container.addEventListener("scroll", handleScroll, { passive: true });
+		handleScroll();
+		return () => {
+			isMountedRef.current = false;
+			container.removeEventListener("wheel", releaseManualSelectionOnUserScroll);
+			container.removeEventListener("touchmove", releaseManualSelectionOnUserScroll);
+			container.removeEventListener("pointerdown", releaseManualSelectionOnUserScroll);
+			ownerDocument.removeEventListener("keydown", handleKeyDown);
+			container.removeEventListener("scroll", handleScroll);
+			if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+		};
+	}, [clearManualSelection, scrollRef]);
+	const lastEmittedIndexRef = (0, react.useRef)(safeIndex);
+	(0, react.useEffect)(() => {
+		const newSafeIndex = getSafeStepIndex(stepsRef.current.length, currentStepIndex);
+		if (newSafeIndex === lastEmittedIndexRef.current) return;
+		lastEmittedIndexRef.current = newSafeIndex;
+		activeIndexRef.current = newSafeIndex;
+		setActiveIndex(newSafeIndex);
+		setFurthestStepIndex((prev) => Math.max(prev, newSafeIndex));
+		const step = stepsRef.current[newSafeIndex];
+		if (!step) return;
+		const sectionElement = scrollRef.current?.querySelector(`#${CSS.escape(sectionIdRef.current(step.id))}`);
+		if (scrollRef.current && sectionElement) scrollSectionIntoView(scrollRef.current, sectionElement, scrollPaddingRef.current);
+	}, [currentStepIndex, scrollRef]);
+	return {
+		activeIndex,
+		furthestStepIndex,
+		scrollToSection: (0, react.useCallback)((index) => {
+			const step = stepsRef.current[index];
+			if (!step) return;
+			manualSelectionIndexRef.current = index;
+			activeIndexRef.current = index;
+			lastEmittedIndexRef.current = index;
+			setActiveIndex(index);
+			setFurthestStepIndex((prev) => Math.max(prev, index));
+			onStepChangeRef.current(index);
+			const container = scrollRef.current;
+			const sectionElement = container?.querySelector(`#${CSS.escape(sectionIdRef.current(step.id))}`);
+			if (container && sectionElement) scrollSectionIntoView(container, sectionElement, scrollPaddingRef.current);
+		}, [scrollRef])
+	};
+}
+function resolveScrollableActiveIndex(container, steps, sectionId) {
+	if (steps.length === 0) return {
+		activeIndex: 0,
+		commitFurthestStepIndex: false
+	};
+	const containerRect = container.getBoundingClientRect();
+	const anchorY = containerRect.top + Math.min(containerRect.height * .35, 220);
+	const isScrollable = container.scrollHeight > container.clientHeight + 1;
+	const isAtBottom = isScrollable && container.scrollTop + container.clientHeight >= container.scrollHeight - 1;
+	const isNearBottom = isScrollable && container.scrollTop + container.clientHeight >= container.scrollHeight - 4;
+	if (isAtBottom) return {
+		activeIndex: steps.length - 1,
+		commitFurthestStepIndex: false
+	};
+	let activeIndex = 0;
+	let highestScore = Number.NEGATIVE_INFINITY;
+	for (let i = 0; i < steps.length; i++) {
+		const sectionMetrics = getSectionMetrics(container, steps[i].id, sectionId, containerRect);
+		if (!sectionMetrics) continue;
+		const score = scoreScrollableStep({
+			stepIndex: i,
+			stepCount: steps.length,
+			containerRect,
+			anchorY,
+			isNearBottom,
+			...sectionMetrics
+		});
+		if (score >= highestScore) {
+			highestScore = score;
+			activeIndex = i;
+		}
+	}
+	return {
+		activeIndex,
+		commitFurthestStepIndex: true
+	};
+}
+const SCROLL_PADDING_PX = 32;
+function getSectionElement(container, stepId, sectionId) {
+	return container.querySelector(`#${CSS.escape(sectionId(stepId))}`);
+}
+function scrollSectionIntoView(container, sectionElement, padding) {
+	const elementTop = sectionElement.getBoundingClientRect().top;
+	const containerTop = container.getBoundingClientRect().top;
+	const targetScrollTop = container.scrollTop + (elementTop - containerTop) - padding;
+	container.scrollTo({
+		top: targetScrollTop,
+		behavior: "smooth"
+	});
+}
+function getSectionMetrics(container, stepId, sectionId, containerRect) {
+	const sectionElement = getSectionElement(container, stepId, sectionId);
+	if (!sectionElement) return null;
+	const sectionRect = sectionElement.getBoundingClientRect();
+	return {
+		sectionRect,
+		visibleHeight: getVisibleHeight(containerRect, sectionRect)
+	};
+}
+function getVisibleHeight(containerRect, sectionRect) {
+	return Math.max(0, Math.min(sectionRect.bottom, containerRect.bottom) - Math.max(sectionRect.top, containerRect.top));
+}
+function scoreScrollableStep({ stepIndex, stepCount, containerRect, sectionRect, visibleHeight, anchorY, isNearBottom }) {
+	const isVisible = visibleHeight > 0;
+	const focusBandTop = containerRect.top + Math.min(containerRect.height * .2, 140);
+	const focusBandBottom = containerRect.top + Math.min(containerRect.height * .55, 360);
+	const focusBandOverlap = getBandOverlapHeight(sectionRect, focusBandTop, focusBandBottom);
+	const distanceToFocusBand = focusBandOverlap > 0 ? 0 : Math.min(Math.abs(sectionRect.top - focusBandBottom), Math.abs(sectionRect.bottom - focusBandTop));
+	const lastStepProminent = stepIndex === stepCount - 1 && visibleHeight >= Math.min(sectionRect.height, containerRect.height) * .25 && sectionRect.top <= containerRect.top + containerRect.height * .65;
+	let score = isVisible ? visibleHeight : Number.NEGATIVE_INFINITY;
+	if (focusBandOverlap > 0) score += 12e3 + focusBandOverlap * 25;
+	if (sectionRect.top <= anchorY) score += 250;
+	score += Math.max(0, 1e3 - distanceToFocusBand);
+	if (isNearBottom && lastStepProminent && isVisible) score += 15e3;
+	return score;
+}
+function getBandOverlapHeight(sectionRect, bandTop, bandBottom) {
+	return Math.max(0, Math.min(sectionRect.bottom, bandBottom) - Math.max(sectionRect.top, bandTop));
+}
+function isScrollableNavigationKey(event) {
+	if (event.metaKey || event.ctrlKey || event.altKey) return false;
+	return [
+		"ArrowDown",
+		"ArrowUp",
+		"PageDown",
+		"PageUp",
+		"Home",
+		"End",
+		" "
+	].includes(event.key);
+}
+
+//#endregion
+//#region src/components/ui/wizard/WizardLayout.tsx
+function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepIndexProp, onStepChange, onComplete, onCancel, navActions, header, variant, className }) {
+	const safeIndex = getSafeStepIndex(steps.length, currentStepIndex);
+	const resolvedFurthestStepIndex = useFurthestStepIndex(safeIndex, furthestStepIndexProp);
+	if (steps.length === 0) return null;
+	const isFirstStep = safeIndex === 0;
+	const isLastStep = safeIndex === steps.length - 1;
+	const currentStep = steps[safeIndex];
+	const canProceed = currentStep?.isValid !== false;
+	const handleNext = () => {
+		if (isLastStep) {
+			onComplete?.();
+			return;
+		}
+		onStepChange(safeIndex + 1);
+	};
+	const handlePrevious = () => {
+		if (!isFirstStep) onStepChange(safeIndex - 1);
+	};
+	const stepDefs = toStepDefs(steps, safeIndex);
+	const footer = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "shrink-0 border-t border-border bg-background px-8 py-4",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "mx-auto max-w-5xl",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardNavigation, {
+				isFirstStep,
+				isLastStep,
+				canProceed,
+				onPrevious: handlePrevious,
+				onNext: handleNext,
+				onCancel,
+				extraActions: navActions
+			})
+		})
+	});
+	if (variant === "vertical") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex h-full gap-6", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-[220px] shrink-0 py-6 pl-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepper, {
+				variant: "vertical",
+				steps: stepDefs,
+				currentStepIndex: safeIndex,
+				furthestStepIndex: resolvedFurthestStepIndex,
+				onStepClick: onStepChange,
+				className: "h-full"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1 overflow-y-auto p-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mx-auto max-w-5xl",
+					children: [header, currentStep?.component]
+				})
+			}), footer]
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex h-full flex-col", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "shrink-0 p-6 pb-0",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepper, {
+				variant: "horizontal",
+				steps: stepDefs,
+				currentStepIndex: safeIndex,
+				furthestStepIndex: resolvedFurthestStepIndex,
+				onStepClick: onStepChange
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex-1 overflow-y-auto p-8",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "mx-auto max-w-5xl",
+					children: [header, currentStep?.component]
+				})
+			}), footer]
+		})]
+	});
+}
+function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, scrollPadding, className }) {
+	const instanceId = (0, react.useId)();
+	const scrollRef = (0, react.useRef)(null);
+	const sectionId = (0, react.useCallback)((stepId) => `wizard-section-${instanceId}-${stepId}`, [instanceId]);
+	const { activeIndex, furthestStepIndex, scrollToSection } = useScrollableWizardStepTracking({
+		steps,
+		currentStepIndex,
+		onStepChange,
+		scrollRef,
+		sectionId,
+		scrollPadding
+	});
+	if (steps.length === 0) return null;
+	const stepDefs = toStepDefs(steps, activeIndex);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.cn)("flex h-full gap-6", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "w-[220px] shrink-0 py-6 pl-6",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepper, {
+				variant: "vertical",
+				steps: stepDefs,
+				currentStepIndex: activeIndex,
+				furthestStepIndex,
+				onStepClick: scrollToSection,
+				freeNavigation: true,
+				className: "h-full"
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			ref: scrollRef,
+			className: "flex min-w-0 flex-1 flex-col overflow-y-auto p-8",
+			children: [
+				header,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "space-y-12",
+					children: steps.map((step) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+						id: sectionId(step.id),
+						children: step.component
+					}, step.id))
+				}),
+				onComplete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex justify-end pt-8",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						type: "button",
+						onClick: onComplete,
+						children: "Finish"
+					})
+				})
+			]
+		})]
+	});
+}
+function toStepDefs(steps, currentStepIndex) {
+	return steps.map((s, i) => {
+		const isInvalid = s.isInvalid ?? s.isValid === false;
+		const status = s.status ?? (i < currentStepIndex && !isInvalid ? "completed" : "pending");
+		return {
+			id: s.id,
+			title: s.title,
+			status,
+			isInvalid
+		};
+	});
+}
+/**
+* A layout component for the wizard.
+*
+* @param props - The props for the WizardLayout component.
+* @returns A React node representing the layout component.
+*/
+function WizardLayout(props) {
+	const { variant = "horizontal", ...rest } = props;
+	if (variant === "scrollable") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollableLayout, {
+		steps: rest.steps,
+		currentStepIndex: rest.currentStepIndex,
+		onStepChange: rest.onStepChange,
+		header: rest.header,
+		onComplete: rest.onComplete,
+		scrollPadding: rest.scrollPadding,
+		className: rest.className
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PagedLayout, {
+		...rest,
+		variant
+	});
+}
+
 //#endregion
 //#region src/components/fields/address-suggestion/context.ts
 /**
@@ -5860,6 +6400,9 @@ exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.UrlField = UrlField;
 exports.ViewContractStateButton = ViewContractStateButton;
+exports.WizardLayout = WizardLayout;
+exports.WizardNavigation = WizardNavigation;
+exports.WizardStepper = WizardStepper;
 exports.buttonVariants = buttonVariants;
 exports.computeChildTouched = computeChildTouched;
 exports.createFocusManager = createFocusManager;