"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@stigmer/theme";
/**
 * Vertical step progress indicator for multi-step wizards.
 *
 * Renders each step as a numbered circle with label. Steps are
 * color-coded by state: completed (filled), active (ring), pending
 * (muted). Completed steps are clickable for backward navigation.
 *
 * Responsive: collapses to a compact horizontal layout on narrow
 * viewports via CSS container queries.
 *
 * Uses `--stgm-*` tokens exclusively. Zero Console dependencies.
 */
export function StepIndicator({ steps, currentStepIndex, onStepClick, className, }) {
    return (_jsx("nav", { "aria-label": "Wizard progress", className: cn("flex flex-col gap-1", className), children: _jsx("ol", { className: "flex flex-col gap-1", role: "list", children: steps.map((step, index) => {
                const state = getStepState(index, currentStepIndex);
                const isClickable = state === "completed" && onStepClick != null;
                const content = (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(StepCircle, { index: index, state: state }), _jsx("span", { className: cn("text-sm font-medium transition-colors", state === "active" && "text-foreground", state === "completed" && "text-foreground", state === "pending" && "text-muted-foreground"), children: step.label })] }));
                return (_jsxs("li", { children: [isClickable ? (_jsx("button", { type: "button", onClick: () => onStepClick(index), className: cn("w-full rounded-md px-2 py-2 text-left transition-colors", "hover:bg-accent-hover", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"), "aria-label": `Go back to step ${index + 1}: ${step.label}`, "aria-current": undefined, children: content })) : (_jsx("div", { className: "px-2 py-2", "aria-current": state === "active" ? "step" : undefined, children: content })), index < steps.length - 1 && (_jsx("div", { className: "ml-[18px] h-4 w-px bg-border", "aria-hidden": "true" }))] }, step.id));
            }) }) }));
}
function getStepState(index, currentIndex) {
    if (index < currentIndex)
        return "completed";
    if (index === currentIndex)
        return "active";
    return "pending";
}
function StepCircle({ index, state, }) {
    return (_jsx("div", { className: cn("flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-medium transition-colors", state === "completed" && "bg-primary text-primary-foreground", state === "active" && "border-2 border-primary text-primary", state === "pending" && "border border-border text-muted-foreground"), "aria-hidden": "true", children: state === "completed" ? (_jsx(CheckIcon, { className: "size-3.5" })) : (_jsx("span", { children: index + 1 })) }));
}
// ---------------------------------------------------------------------------
// Icons
// ---------------------------------------------------------------------------
function CheckIcon({ className }) {
    return (_jsx("svg", { className: className, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m3 8.5 3.5 3.5 6.5-8" }) }));
}
//# sourceMappingURL=StepIndicator.js.map