erp-pro-ui 0.1.2 → 0.1.3

package/dist/chunks/stepper-D6qQbZdg.cjs

@@ -0,0 +1,642 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_icons = require("./icons-BxIzP2jd.cjs");
+const require_button = require("./button-CZL6kFzT.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+//#region src/components/navigation/stepper/Stepper.tsx
+var sizeConfig = {
+	sm: {
+		indicator: "w-8 h-8",
+		icon: "w-4 h-4",
+		text: "text-xs",
+		connectorThickness: "2px"
+	},
+	md: {
+		indicator: "w-10 h-10",
+		icon: "w-5 h-5",
+		text: "text-sm",
+		connectorThickness: "2px"
+	},
+	lg: {
+		indicator: "w-12 h-12",
+		icon: "w-6 h-6",
+		text: "text-base",
+		connectorThickness: "4px"
+	}
+};
+var getVariantStyles = (variant, status) => {
+	return {
+		default: {
+			completed: "bg-accent text-on-accent shadow-md shadow-accent/25",
+			current: "bg-accent text-on-accent ring-4 ring-focus/40 shadow-lg shadow-accent/30",
+			upcoming: "bg-neutral-200 text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400",
+			error: "bg-red-500 text-white ring-4 ring-red-500/30"
+		},
+		glass: {
+			completed: "bg-accent/85 text-on-accent backdrop-blur-xl border border-accent/30 shadow-lg shadow-accent/20",
+			current: "bg-accent/90 text-on-accent backdrop-blur-xl border-2 border-accent ring-4 ring-focus/30 shadow-xl shadow-accent/30",
+			upcoming: "bg-white/60 text-neutral-500 backdrop-blur-xl border border-white/40 dark:bg-neutral-800/60 dark:text-neutral-400 dark:border-white/10",
+			error: "bg-red-500/80 text-white backdrop-blur-xl border border-red-400/30 ring-4 ring-red-500/20"
+		},
+		minimal: {
+			completed: "bg-accent-subtle text-accent",
+			current: "bg-accent text-on-accent shadow-sm",
+			upcoming: "bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600",
+			error: "bg-red-100 text-red-500 dark:bg-red-900/30"
+		},
+		outlined: {
+			completed: "bg-transparent text-accent border-2 border-accent",
+			current: "bg-accent text-on-accent border-2 border-accent shadow-lg",
+			upcoming: "bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600",
+			error: "bg-transparent text-red-500 border-2 border-red-500"
+		}
+	}[variant][status];
+};
+var StepIndicator = ({ step, index, status, size, variant, showNumbers, animated, colors }) => {
+	const config = sizeConfig[size];
+	const variantStyles = getVariantStyles(variant, status);
+	const customColorStyle = colors?.[status] ? {
+		backgroundColor: colors[status],
+		borderColor: colors[status]
+	} : void 0;
+	const renderContent = () => {
+		if (step.icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: config.icon,
+			children: step.icon
+		});
+		if (status === "completed") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
+			className: config.icon,
+			"aria-hidden": "true"
+		});
+		if (status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
+			className: config.icon,
+			"aria-hidden": "true"
+		});
+		if (showNumbers) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "font-semibold",
+			children: index + 1
+		});
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_utils.mergeClassNames("rounded-full bg-current", size === "sm" ? "w-2 h-2" : "w-3 h-3") });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: require_utils.mergeClassNames("rounded-full flex items-center justify-center transition-all duration-300", config.indicator, variantStyles),
+		style: customColorStyle,
+		initial: animated ? {
+			scale: .8,
+			opacity: 0
+		} : void 0,
+		animate: animated ? {
+			scale: 1,
+			opacity: 1
+		} : void 0,
+		whileHover: { scale: 1.05 },
+		whileTap: { scale: .95 },
+		transition: {
+			type: "spring",
+			stiffness: 400,
+			damping: 17
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
+			mode: "wait",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
+				initial: animated ? {
+					scale: 0,
+					rotate: -180
+				} : void 0,
+				animate: animated ? {
+					scale: 1,
+					rotate: 0
+				} : void 0,
+				exit: animated ? {
+					scale: 0,
+					rotate: 180
+				} : void 0,
+				transition: { duration: .2 },
+				children: renderContent()
+			}, status)
+		})
+	});
+};
+var Stepper = ({ steps, currentStep, onStepClick, orientation = "horizontal", size = "md", variant = "glass", showNumbers = true, clickable = true, showConnector = true, className, connectorClassName, stepClassName, showErrors = false, errorSteps = [], completedSteps, animated = true, colors }) => {
+	const isVertical = orientation === "vertical";
+	const config = sizeConfig[size];
+	const getStepStatus = (index) => {
+		if (showErrors && errorSteps.includes(index)) return "error";
+		if (completedSteps) {
+			if (completedSteps.includes(index)) return "completed";
+			if (index === currentStep) return "current";
+			return "upcoming";
+		}
+		if (index < currentStep) return "completed";
+		if (index === currentStep) return "current";
+		return "upcoming";
+	};
+	const handleStepClick = (index) => {
+		if (!clickable || !onStepClick) return;
+		if (steps[index].disabled) return;
+		const status = getStepStatus(index);
+		if (status === "completed" || status === "current") onStepClick(index);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: require_utils.mergeClassNames("w-full relative", isVertical ? "flex flex-col" : "flex items-start justify-between", className),
+		children: [showConnector && (() => {
+			const paddingValue = variant === "glass" || variant === "outlined" || variant === "minimal" ? 4 : 2;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: require_utils.mergeClassNames("absolute rounded-full", variant === "glass" ? "bg-white/30 dark:bg-white/10 backdrop-blur-sm" : "bg-neutral-200 dark:bg-neutral-700", connectorClassName),
+				style: { ...isVertical ? {
+					top: "0",
+					bottom: "0",
+					left: `calc(${paddingValue}px + 1px + ${config.indicator.split(" ")[0].replace("w-", "")} * 0.125rem - ${config.connectorThickness} / 2)`,
+					width: config.connectorThickness
+				} : {
+					left: "0",
+					right: "0",
+					top: `calc(${paddingValue}px + 1px + ${config.indicator.split(" ")[1].replace("h-", "")} * 0.125rem - ${config.connectorThickness} / 2)`,
+					height: config.connectorThickness
+				} },
+				children: animated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+					className: "absolute top-0 left-0 bg-accent rounded-full",
+					initial: { [isVertical ? "height" : "width"]: 0 },
+					animate: { [isVertical ? "height" : "width"]: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%` },
+					transition: {
+						duration: .4,
+						ease: "easeOut"
+					},
+					style: {
+						...isVertical ? { width: "100%" } : { height: "100%" },
+						backgroundColor: colors?.connector || colors?.completed
+					}
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "absolute top-0 left-0 bg-accent rounded-full",
+					style: {
+						...isVertical ? {
+							width: "100%",
+							height: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
+						} : {
+							height: "100%",
+							width: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
+						},
+						backgroundColor: colors?.connector || colors?.completed
+					}
+				})
+			});
+		})(), steps.map((step, index) => {
+			const status = getStepStatus(index);
+			const isLast = index === steps.length - 1;
+			const isClickable = clickable && !step.disabled;
+			const paddingValue = variant === "glass" || variant === "outlined" || variant === "minimal" ? 4 : 2;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames("relative z-10", isVertical ? "flex gap-4 pb-8" : "flex flex-1 flex-col items-center", !isLast && isVertical && "mb-2", isVertical && isLast && "pb-0", stepClassName),
+				style: { ...!isVertical ? {
+					flexBasis: 0,
+					flexGrow: 1,
+					alignItems: index === 0 ? "flex-start" : isLast ? "flex-end" : "center"
+				} : {} },
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => handleStepClick(index),
+						disabled: !isClickable,
+						className: require_utils.mergeClassNames("relative z-10 shrink-0 flex items-center justify-center bg-white dark:bg-neutral-900 rounded-full", isClickable ? "cursor-pointer" : "cursor-default", !isVertical && index === 0 && "mx-0", !isVertical && isLast && "mx-0"),
+						style: { padding: `${paddingValue}px` },
+						"aria-current": status === "current" ? "step" : void 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepIndicator, {
+							step,
+							index,
+							status,
+							size,
+							variant,
+							showNumbers,
+							animated,
+							colors
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+						className: require_utils.mergeClassNames("mt-2", isVertical ? "flex-1 pb-6" : "text-center px-2", !isVertical && index === 0 && "text-left px-0", !isVertical && isLast && "text-right px-0", isVertical && isLast && "pb-0"),
+						style: isVertical ? { marginTop: "-4px" } : void 0,
+						initial: animated ? {
+							opacity: 0,
+							y: 10
+						} : void 0,
+						animate: animated ? {
+							opacity: 1,
+							y: 0
+						} : void 0,
+						transition: { delay: index * .1 },
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+							className: require_utils.mergeClassNames("font-medium transition-colors duration-200", config.text, status === "current" ? "text-accent" : status === "completed" ? "text-neutral-700 dark:text-neutral-200" : status === "error" ? "text-red-500" : "text-neutral-500 dark:text-neutral-400"),
+							children: [step.title, step.optional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "ml-1 text-neutral-400 dark:text-neutral-500 font-normal",
+								children: "(Optional)"
+							})]
+						}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: require_utils.mergeClassNames("mt-0.5 text-neutral-500 dark:text-neutral-400", size === "sm" ? "text-xs" : "text-xs"),
+							children: step.description
+						})]
+					}),
+					isVertical && step.content && status === "current" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+						initial: {
+							opacity: 0,
+							height: 0
+						},
+						animate: {
+							opacity: 1,
+							height: "auto"
+						},
+						exit: {
+							opacity: 0,
+							height: 0
+						},
+						className: "pl-14 pb-4 w-full",
+						children: step.content
+					})
+				]
+			}, step.id);
+		})]
+	});
+};
+Stepper.displayName = "Stepper";
+//#endregion
+//#region src/components/navigation/stepper/Stepper1.tsx
+var DEFAULT_BREAKPOINT = 1080;
+function subscribeToMediaQuery(query, onStoreChange) {
+	if (typeof window === "undefined") return () => void 0;
+	const mediaQuery = window.matchMedia(query);
+	mediaQuery.addEventListener("change", onStoreChange);
+	return () => mediaQuery.removeEventListener("change", onStoreChange);
+}
+function getMediaQuerySnapshot(query) {
+	if (typeof window === "undefined") return false;
+	return window.matchMedia(query).matches;
+}
+function getStepColors(state, isActive) {
+	if (isActive) return {
+		buttonClassName: "border-accent bg-accent/12 text-accent shadow-sm shadow-accent/10",
+		connectorClassName: "bg-accent",
+		badgeClassName: "border-accent bg-accent text-on-accent"
+	};
+	if (state === "valid") return {
+		buttonClassName: "border-success bg-success/10 text-success shadow-sm shadow-success/10",
+		connectorClassName: "bg-success",
+		badgeClassName: "border-success bg-success text-on-accent"
+	};
+	if (state === "invalid") return {
+		buttonClassName: "border-red-500 bg-red-500/10 text-red-600 dark:text-red-300",
+		connectorClassName: "bg-red-500",
+		badgeClassName: "border-red-500 bg-red-500 text-white"
+	};
+	return {
+		buttonClassName: "border-border bg-surface text-muted-foreground hover:border-border-strong hover:bg-canvas",
+		connectorClassName: "bg-border-strong/70",
+		badgeClassName: "border-border bg-background text-muted-foreground"
+	};
+}
+function renderStepContent(label, icon, state, stepNumber, badgeClassName) {
+	if (state === "valid") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
+			className: "h-5 w-5",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children: label
+		})]
+	});
+	if (state === "invalid") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.AlertTriangleIcon, {
+			className: "h-5 w-5",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children: label
+		})]
+	});
+	if (icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "shrink-0",
+			children: icon
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children: label
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: require_utils.mergeClassNames("flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold", badgeClassName),
+			"aria-hidden": "true",
+			children: stepNumber
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children: label
+		})]
+	});
+}
+function StepperSteps({ steps, currentStep, onStepClick, stepStates = [], orientation = "responsive", responsiveBreakpoint = DEFAULT_BREAKPOINT, className, stepClassName, connectorClassName }) {
+	const responsiveQuery = `(max-width: ${responsiveBreakpoint}px)`;
+	const isCompact = (0, react.useSyncExternalStore)((onStoreChange) => {
+		if (orientation !== "responsive") return () => void 0;
+		return subscribeToMediaQuery(responsiveQuery, onStoreChange);
+	}, () => orientation === "responsive" ? getMediaQuerySnapshot(responsiveQuery) : false, () => false);
+	const isVertical = orientation === "vertical" || orientation === "responsive" && isCompact;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.mergeClassNames(isVertical ? "flex w-full flex-col items-start" : "flex w-full items-center", className),
+		children: steps.map((step, index) => {
+			const stepNumber = index + 1;
+			const state = stepStates[index] ?? "untouched";
+			const isActive = index === currentStep;
+			const isClickable = typeof onStepClick === "function" && !isActive;
+			const colors = getStepColors(state, isActive);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_utils.mergeClassNames(isVertical ? "w-full" : "flex min-w-0 flex-1 items-center"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					disabled: !isClickable,
+					onClick: () => onStepClick?.(index),
+					className: require_utils.mergeClassNames("relative z-10 flex min-h-11 items-center justify-center rounded-md border px-4 py-3 text-sm font-medium transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-default disabled:opacity-100", isVertical ? "w-full" : "w-full min-w-0", colors.buttonClassName, stepClassName),
+					"aria-current": isActive ? "step" : void 0,
+					"aria-invalid": state === "invalid" ? true : void 0,
+					children: renderStepContent(step.label, step.icon, state, stepNumber, colors.badgeClassName)
+				}), index < steps.length - 1 ? isVertical ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_utils.mergeClassNames("mx-auto my-2 h-8 w-px rounded-full", colors.connectorClassName, connectorClassName),
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_utils.mergeClassNames("mx-3 h-px min-w-6 flex-1 rounded-full", colors.connectorClassName, connectorClassName),
+					"aria-hidden": "true"
+				}) : null]
+			}, `${step.label}-${stepNumber}`);
+		})
+	});
+}
+//#endregion
+//#region src/components/navigation/stepper/Stepper2.tsx
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+function clampStep(step, totalSteps) {
+	return Math.min(Math.max(step, 0), totalSteps);
+}
+function getIndicatorStatus(stepIndex, currentStep) {
+	if (stepIndex === currentStep) return "active";
+	if (stepIndex < currentStep) return "complete";
+	return "inactive";
+}
+function StepperWizard({ children, initialStep = 0, currentStep: controlledStep, onStepChange, onFinalStepCompleted, stepCircleContainerClassName, stepContainerClassName, contentClassName, footerClassName, backButtonProps, nextButtonProps, backButtonText = "Back", nextButtonText = "Continue", completeButtonText = "Complete", disableStepIndicators = false, renderStepIndicator, className }) {
+	const stepsArray = react.Children.toArray(children);
+	const totalSteps = stepsArray.length;
+	const [internalStep, setInternalStep] = (0, react.useState)(() => clampStep(initialStep, totalSteps));
+	const [direction, setDirection] = (0, react.useState)(0);
+	const currentStep = clampStep(controlledStep ?? internalStep, totalSteps);
+	const isCompleted = currentStep >= totalSteps;
+	const isLastStep = totalSteps > 0 && currentStep === totalSteps - 1;
+	const commitStep = (0, react.useCallback)((nextStep) => {
+		const clampedStep = clampStep(nextStep, totalSteps);
+		if (controlledStep === void 0) setInternalStep(clampedStep);
+		if (clampedStep >= totalSteps) {
+			onFinalStepCompleted?.();
+			return;
+		}
+		onStepChange?.(clampedStep);
+	}, [
+		controlledStep,
+		onFinalStepCompleted,
+		onStepChange,
+		totalSteps
+	]);
+	if (totalSteps === 0) return null;
+	const handleBack = () => {
+		if (currentStep > 0) {
+			setDirection(-1);
+			commitStep(currentStep - 1);
+		}
+	};
+	const handleNext = () => {
+		if (!isLastStep) {
+			setDirection(1);
+			commitStep(currentStep + 1);
+		}
+	};
+	const handleComplete = () => {
+		setDirection(1);
+		commitStep(totalSteps);
+	};
+	const navigateToStep = (stepIndex) => {
+		if (stepIndex === currentStep || disableStepIndicators) return;
+		setDirection(stepIndex > currentStep ? 1 : -1);
+		commitStep(stepIndex);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.mergeClassNames("flex min-h-full w-full flex-1 items-center justify-center p-4", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: require_utils.mergeClassNames("mx-auto w-full max-w-3xl rounded-3xl border border-border bg-background shadow-2", stepCircleContainerClassName),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_utils.mergeClassNames("flex w-full items-center gap-3 border-b border-border px-6 py-6 sm:px-8", stepContainerClassName),
+					children: stepsArray.map((_, index) => {
+						const status = getIndicatorStatus(index, currentStep);
+						const isClickable = !disableStepIndicators && index !== currentStep;
+						const indicatorProps = {
+							stepIndex: index,
+							stepNumber: index + 1,
+							currentStep,
+							status,
+							isClickable,
+							onStepClick: navigateToStep
+						};
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex flex-1 items-center",
+							children: [renderStepIndicator ? renderStepIndicator(indicatorProps) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepIndicator, { ...indicatorProps }), index < totalSteps - 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepConnector, { isComplete: currentStep > index }) : null]
+						}, `wizard-step-${index + 1}`);
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardStepContentWrapper, {
+					isCompleted,
+					currentStep,
+					direction,
+					className: require_utils.mergeClassNames("px-6 py-6 sm:px-8", contentClassName),
+					children: stepsArray[currentStep]
+				}),
+				!isCompleted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: require_utils.mergeClassNames("px-6 pb-6 sm:px-8 sm:pb-8", footerClassName),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: require_utils.mergeClassNames("mt-6 flex gap-3", currentStep > 0 ? "justify-between" : "justify-end"),
+						children: [currentStep > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							onClick: handleBack,
+							className: "rounded-md border-transparent bg-transparent px-3 py-2 text-sm font-medium text-muted-foreground shadow-none hover:bg-surface hover:text-foreground",
+							...backButtonProps,
+							children: backButtonText
+						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+							onClick: isLastStep ? handleComplete : handleNext,
+							primary: true,
+							className: "rounded-full px-4 py-2 text-sm font-semibold shadow-2",
+							...nextButtonProps,
+							children: isLastStep ? completeButtonText : nextButtonText
+						})]
+					})
+				}) : null
+			]
+		})
+	});
+}
+function WizardStepContentWrapper({ isCompleted, currentStep, direction, children, className }) {
+	const [parentHeight, setParentHeight] = (0, react.useState)(0);
+	const handleHeightReady = (0, react.useCallback)((height) => {
+		setParentHeight(height);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		style: {
+			position: "relative",
+			overflow: "hidden"
+		},
+		animate: { height: isCompleted ? 0 : parentHeight },
+		transition: {
+			type: "spring",
+			duration: .4
+		},
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
+			initial: false,
+			mode: "wait",
+			custom: direction,
+			children: !isCompleted ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WizardSlideTransition, {
+				direction,
+				onHeightReady: handleHeightReady,
+				children
+			}, currentStep) : null
+		})
+	});
+}
+function WizardSlideTransition({ children, direction, onHeightReady }) {
+	const containerRef = (0, react.useRef)(null);
+	useIsomorphicLayoutEffect(() => {
+		if (containerRef.current) onHeightReady(containerRef.current.offsetHeight);
+	}, [children, onHeightReady]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		ref: containerRef,
+		custom: direction,
+		variants: wizardStepVariants,
+		initial: "enter",
+		animate: "center",
+		exit: "exit",
+		transition: {
+			duration: .35,
+			ease: "easeOut"
+		},
+		style: {
+			position: "absolute",
+			inset: 0
+		},
+		children
+	});
+}
+var wizardStepVariants = {
+	enter: (direction) => ({
+		x: direction >= 0 ? "-100%" : "100%",
+		opacity: 0
+	}),
+	center: {
+		x: "0%",
+		opacity: 1
+	},
+	exit: (direction) => ({
+		x: direction >= 0 ? "40%" : "-40%",
+		opacity: 0
+	})
+};
+function StepperWizardStep({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.mergeClassNames("space-y-4", className),
+		children
+	});
+}
+function WizardStepIndicator({ stepIndex, stepNumber, status, isClickable, onStepClick }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.button, {
+		type: "button",
+		onClick: () => onStepClick(stepIndex),
+		className: require_utils.mergeClassNames("relative z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background", isClickable ? "cursor-pointer" : "cursor-default"),
+		animate: status,
+		initial: false,
+		disabled: !isClickable,
+		"aria-current": status === "active" ? "step" : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
+			variants: {
+				inactive: {
+					scale: 1,
+					backgroundColor: "var(--ds-color-bg-surface)",
+					borderColor: "var(--ds-color-border)",
+					color: "var(--ds-color-fg-muted)"
+				},
+				active: {
+					scale: 1,
+					backgroundColor: "var(--ds-color-accent)",
+					borderColor: "var(--ds-color-accent)",
+					color: "var(--ds-color-fg-on-accent)"
+				},
+				complete: {
+					scale: 1,
+					backgroundColor: "var(--ds-color-accent)",
+					borderColor: "var(--ds-color-accent)",
+					color: "var(--ds-color-fg-on-accent)"
+				}
+			},
+			transition: { duration: .25 },
+			className: "flex h-full w-full items-center justify-center rounded-full",
+			children: status === "complete" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedWizardCheckIcon, { className: "h-4 w-4" }) : status === "active" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "h-2.5 w-2.5 rounded-full bg-current" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: stepNumber })
+		})
+	});
+}
+function WizardStepConnector({ isComplete }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "relative mx-2 h-0.5 flex-1 overflow-hidden rounded-full bg-border",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			className: "absolute inset-y-0 left-0 rounded-full bg-accent",
+			initial: false,
+			animate: isComplete ? "complete" : "incomplete",
+			variants: {
+				incomplete: { width: 0 },
+				complete: { width: "100%" }
+			},
+			transition: {
+				duration: .35,
+				ease: "easeOut"
+			}
+		})
+	});
+}
+function AnimatedWizardCheckIcon({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: require_utils.mergeClassNames("flex items-center justify-center", className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
+			className: "h-full w-full",
+			"aria-hidden": "true"
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "Stepper", {
+	enumerable: true,
+	get: function() {
+		return Stepper;
+	}
+});
+Object.defineProperty(exports, "StepperSteps", {
+	enumerable: true,
+	get: function() {
+		return StepperSteps;
+	}
+});
+Object.defineProperty(exports, "StepperWizard", {
+	enumerable: true,
+	get: function() {
+		return StepperWizard;
+	}
+});
+Object.defineProperty(exports, "StepperWizardStep", {
+	enumerable: true,
+	get: function() {
+		return StepperWizardStep;
+	}
+});
+
+//# sourceMappingURL=stepper-D6qQbZdg.cjs.map