import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { forwardRef } from 'react';
import { c as cn } from './utils-BJnb9o5c.js';
import { C as Check } from './check-Cpkv29p1.js';

const Stepper = forwardRef(
  ({
    steps,
    activeIndex = 0,
    onStepClick,
    className,
    orientation = "horizontal"
  }, ref) => {
    const isHorizontal = orientation === "horizontal";
    return /* @__PURE__ */ jsx(
      "div",
      {
        ref,
        role: "list",
        "aria-label": "Progress",
        className: 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 = /* @__PURE__ */ jsx(
            "span",
            {
              className: 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 ? /* @__PURE__ */ jsx(Check, { className: "size-3.5", "aria-hidden": "true" }) : index + 1
            }
          );
          const stepContent = /* @__PURE__ */ jsxs(
            "div",
            {
              className: cn(
                "flex min-w-0",
                isHorizontal ? "flex-row items-center gap-2" : "flex-row items-center gap-3"
              ),
              children: [
                isClickable ? /* @__PURE__ */ jsx(
                  "button",
                  {
                    type: "button",
                    onClick: () => onStepClick(index),
                    "aria-current": isActive ? "step" : void 0,
                    className: "cursor-pointer rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
                    children: indicator
                  }
                ) : /* @__PURE__ */ jsx("span", { "aria-current": isActive ? "step" : void 0, children: indicator }),
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: 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 && /* @__PURE__ */ jsx(
            "div",
            {
              "aria-hidden": "true",
              className: 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 /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                role: "listitem",
                className: cn(
                  "flex min-w-0",
                  isHorizontal ? "shrink-0" : "flex-col"
                ),
                children: stepContent
              }
            ),
            connector
          ] }, step.id);
        })
      }
    );
  }
);
Stepper.displayName = "Stepper";

export { Stepper as S };
//# sourceMappingURL=Stepper-7OpfOfas.js.map
