'use strict';

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var utils = require('./utils-CTr7wn5d.js');
var check = require('./check-BQgcDXys.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const Stepper = React.forwardRef(({ steps, activeIndex = 0, onStepClick, className, orientation = "horizontal", }, ref) => {
    const isHorizontal = orientation === "horizontal";
    return (jsxRuntime.jsx("div", { ref: ref, role: "list", "aria-label": "Progress", className: utils.cn("flex gap-2", isHorizontal ? "flex-row items-center" : "flex-col items-start", className), children: steps.map((step, index) => {
            const isCompleted = index < activeIndex;
            const isActive = index === activeIndex;
            const isClickable = (isCompleted || isActive) && !!onStepClick;
            const isLast = index === steps.length - 1;
            const indicator = (jsxRuntime.jsx("span", { className: utils.cn("relative flex size-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold transition-colors", isCompleted && "bg-primary text-primary-foreground", isActive &&
                    "bg-primary text-primary-foreground ring-2 ring-primary ring-offset-2 ring-offset-background", !isCompleted &&
                    !isActive &&
                    "bg-muted text-foreground/60 ring-1 ring-border"), children: isCompleted ? (jsxRuntime.jsx(check.Check, { className: "size-3.5", "aria-hidden": "true" })) : (index + 1) }));
            const stepContent = (jsxRuntime.jsxs("div", { className: utils.cn("flex min-w-0", isHorizontal
                    ? "flex-row items-center gap-2"
                    : "flex-row items-center gap-3"), children: [isClickable ? (jsxRuntime.jsx("button", { type: "button", onClick: () => onStepClick(index), "aria-current": isActive ? "step" : undefined, className: "cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", children: indicator })) : (jsxRuntime.jsx("span", { "aria-current": isActive ? "step" : undefined, children: indicator })), jsxRuntime.jsx("span", { className: utils.cn("hidden text-sm truncate max-w-full sm:inline", isActive && "font-medium text-foreground", isCompleted && "text-foreground", !isCompleted && !isActive && "text-muted-foreground"), children: step.label })] }));
            const connector = !isLast && (jsxRuntime.jsx("div", { "aria-hidden": "true", className: utils.cn("transition-colors", isHorizontal
                    ? "mx-2 min-w-5 flex-1 border-t-2 sm:mx-3 sm:min-w-8"
                    : "ms-[13px] min-h-6 self-stretch border-s-2", isCompleted ? "border-primary" : "border-dashed border-border") }));
            return (jsxRuntime.jsxs(React__default.default.Fragment, { children: [jsxRuntime.jsx("div", { role: "listitem", className: utils.cn("flex min-w-0", isHorizontal ? "shrink-0" : "flex-col"), children: stepContent }), connector] }, step.id));
        }) }));
});
Stepper.displayName = "Stepper";

exports.Stepper = Stepper;
//# sourceMappingURL=Stepper-DCoLl2ZS.js.map
