/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { Check } from "../../icons/index.js";
import React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/Stepper/Stepper.tsx
var getStepStatusClasses = (status, variant) => {
	const baseClasses = "flex items-center justify-center rounded-full transition-all duration-300";
	if (variant === "dots") return `${baseClasses} w-3 h-3 ${{
		complete: "bg-success-500",
		current: "bg-(--primary) ring-4 ring-primary-200 dark:ring-primary-800",
		upcoming: "bg-(--border-2)",
		error: "bg-error-500 ring-4 ring-error-200 dark:ring-error-800"
	}[status]}`;
	return `${baseClasses} w-10 h-10 text-sm font-semibold ${{
		complete: "bg-success-500 text-white",
		current: "bg-(--primary) text-(--text-on-primary) ring-4 ring-primary-200 dark:ring-primary-800",
		upcoming: "bg-card-hover text-(--text-muted)",
		error: "bg-error-500 text-white ring-4 ring-error-200 dark:ring-error-800"
	}[status]}`;
};
var getConnectorClasses = (isComplete) => {
	return `flex-1 h-0.5 transition-all duration-300 ${isComplete ? "bg-success-500" : "bg-(--border-2)"}`;
};
var getStepLabelColor = (status) => {
	if (status === "current") return "text-(--primary)";
	if (status === "complete") return "text-success-text";
	if (status === "error") return "text-error-text";
	return "text-(--text-subtle)";
};
var StepContent = ({ step, variant }) => {
	const showCheck = step.status === "complete" && variant !== "dots";
	let content = null;
	if (showCheck) content = /* @__PURE__ */ jsx(Check, {
		size: 20,
		strokeWidth: 3
	});
	else if (variant !== "dots") content = /* @__PURE__ */ jsx("span", { children: step.number });
	return /* @__PURE__ */ jsx("div", {
		className: getStepStatusClasses(step.status, variant),
		children: content
	});
};
var HorizontalStepper = ({ steps, variant }) => {
	return /* @__PURE__ */ jsx("div", {
		className: "w-full",
		children: /* @__PURE__ */ jsx("div", {
			className: "flex items-start justify-between",
			children: steps.map((step, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col items-center gap-2",
				children: [/* @__PURE__ */ jsx("div", {
					className: "flex items-center",
					children: /* @__PURE__ */ jsx(StepContent, {
						step,
						variant
					})
				}), variant !== "dots" && /* @__PURE__ */ jsxs("div", {
					className: "text-center",
					children: [/* @__PURE__ */ jsx("div", {
						className: `text-sm font-medium ${getStepLabelColor(step.status)}`,
						children: step.label
					}), step.description && /* @__PURE__ */ jsx("div", {
						className: "text-xs text-(--text-subtle) mt-1",
						children: step.description
					})]
				})]
			}), index < steps.length - 1 && /* @__PURE__ */ jsx("div", {
				className: `flex items-center flex-1 px-2 ${variant === "dots" ? "pt-1.5" : "pt-5"}`,
				children: /* @__PURE__ */ jsx("div", { className: getConnectorClasses(step.status === "complete") })
			})] }, step.number))
		})
	});
};
var VerticalStepper = ({ steps, variant }) => {
	return /* @__PURE__ */ jsx("div", {
		className: "flex flex-col gap-1",
		children: steps.map((step, index) => /* @__PURE__ */ jsxs("div", {
			className: "flex gap-4",
			children: [/* @__PURE__ */ jsxs("div", {
				className: "flex flex-col items-center",
				children: [/* @__PURE__ */ jsx(StepContent, {
					step,
					variant
				}), index < steps.length - 1 && /* @__PURE__ */ jsx("div", { className: `w-0.5 flex-1 min-h-8 transition-all duration-300 ${step.status === "complete" ? "bg-success-500" : "bg-(--border-2)"}` })]
			}), variant !== "dots" && /* @__PURE__ */ jsxs("div", {
				className: "flex-1 pb-8",
				children: [/* @__PURE__ */ jsx("div", {
					className: `font-medium ${getStepLabelColor(step.status)}`,
					children: step.label
				}), step.description && /* @__PURE__ */ jsx("div", {
					className: "text-sm text-(--text-subtle) mt-1",
					children: step.description
				})]
			})]
		}, step.number))
	});
};
var Stepper = ({ steps, currentStep, variant = "numbered", orientation = "horizontal", className = "" }) => {
	const processedSteps = steps.map((step) => {
		if (step.status) return step;
		let status;
		if (step.number < currentStep) status = "complete";
		else if (step.number === currentStep) status = "current";
		else status = "upcoming";
		return {
			...step,
			status
		};
	});
	return /* @__PURE__ */ jsx("div", {
		className: `stepper ${orientation} ${className}`.trim(),
		role: "navigation",
		"aria-label": "Progress",
		children: orientation === "horizontal" ? /* @__PURE__ */ jsx(HorizontalStepper, {
			steps: processedSteps,
			variant
		}) : /* @__PURE__ */ jsx(VerticalStepper, {
			steps: processedSteps,
			variant
		})
	});
};
//#endregion
export { Stepper };

//# sourceMappingURL=Stepper.js.map