"use client";
import { cva } from 'class-variance-authority';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var stepperRoot = cva(
  "flex w-full gap-[var(--gap-md,1rem)] list-none p-0 m-0",
  {
    variants: {
      orientation: {
        horizontal: "flex-row items-start",
        vertical: "flex-col items-stretch"
      }
    },
    defaultVariants: { orientation: "horizontal" }
  }
);
var stepItem = cva("flex gap-[var(--space-3,0.75rem)]", {
  variants: {
    orientation: {
      horizontal: "flex-row items-center",
      vertical: "flex-row items-start w-full"
    }
  },
  defaultVariants: { orientation: "horizontal" }
});
var stepIndicator = cva(
  "inline-flex shrink-0 items-center justify-center rounded-full border-2 font-medium transition-all duration-[var(--duration-normal,200ms)] ease-out",
  {
    variants: {
      size: {
        sm: "h-7 w-7 text-xs",
        default: "h-[var(--control-height-sm,2.25rem)] w-[var(--control-height-sm,2.25rem)] text-sm",
        lg: "h-[var(--control-height-md,2.75rem)] w-[var(--control-height-md,2.75rem)] text-base"
      },
      status: {
        complete: "bg-primary border-primary text-primary-foreground",
        current: "bg-background border-primary text-primary",
        upcoming: "bg-background border-input text-muted-foreground",
        error: "bg-destructive border-destructive text-destructive-foreground"
      }
    },
    defaultVariants: { size: "default", status: "upcoming" }
  }
);
var stepConnector = cva("bg-input transition-all duration-[var(--duration-normal,200ms)] ease-out", {
  variants: {
    orientation: {
      horizontal: "h-px flex-1 min-w-[var(--space-6,1.5rem)] mx-[var(--space-2,0.5rem)]",
      vertical: "w-px self-stretch ml-[1.0625rem] my-[var(--space-1,0.25rem)] min-h-[var(--space-6,1.5rem)]"
    },
    complete: {
      true: "bg-primary",
      false: ""
    }
  },
  defaultVariants: { orientation: "horizontal", complete: false }
});
function deriveStatus(index, current) {
  if (index < current) return "complete";
  if (index === current) return "current";
  return "upcoming";
}
function StepCheck() {
  return /* @__PURE__ */ jsx(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "3",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      className: "h-4 w-4",
      "aria-hidden": "true",
      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
    }
  );
}
function StepError() {
  return /* @__PURE__ */ jsxs(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "3",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      className: "h-4 w-4",
      "aria-hidden": "true",
      children: [
        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" }),
        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" })
      ]
    }
  );
}
function StepIndicator({ index, status, size }) {
  return /* @__PURE__ */ jsx(
    "span",
    {
      className: stepIndicator({ size, status }),
      "aria-invalid": status === "error" ? true : void 0,
      children: status === "complete" ? /* @__PURE__ */ jsx(StepCheck, {}) : status === "error" ? /* @__PURE__ */ jsx(StepError, {}) : index + 1
    }
  );
}
function Stepper({
  steps,
  current,
  orientation = "horizontal",
  size = "default",
  onStepClick,
  "aria-label": ariaLabel,
  className,
  ...rest
}) {
  const interactive = typeof onStepClick === "function";
  return /* @__PURE__ */ jsx(
    "ol",
    {
      "aria-label": ariaLabel,
      className: cn(stepperRoot({ orientation }), className),
      ...rest,
      children: steps.map((step, index) => {
        const status = step.status ?? deriveStatus(index, current);
        const isCurrent = status === "current";
        const isLast = index === steps.length - 1;
        const labelNode = /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-[var(--space-1,0.25rem)]", children: [
          /* @__PURE__ */ jsxs(
            "span",
            {
              className: cn(
                "text-sm font-medium whitespace-nowrap",
                isCurrent && "text-foreground",
                status === "complete" && "text-foreground",
                status === "upcoming" && "text-muted-foreground",
                status === "error" && "text-destructive"
              ),
              children: [
                status === "complete" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Completed: " }),
                status === "error" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Error: " }),
                step.label
              ]
            }
          ),
          step.description ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: step.description }) : null
        ] });
        const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(StepIndicator, { index, status, size }),
          labelNode
        ] });
        return (
          /*
           * `aria-current="step"` lives on the <li> itself so screen
           * readers announce it as part of the listitem's intro
           * (per WAI guidance for "step" lists), not buried on an
           * interior span/button.
           */
          /* @__PURE__ */ jsxs(
            "li",
            {
              "aria-current": isCurrent ? "step" : void 0,
              className: cn(
                stepItem({ orientation }),
                /*
                 * Grow only when there's a connector after this step.
                 * The connector inside takes the extra space via
                 * `flex-1` so the line spans to the next step.
                 */
                !isLast && orientation === "horizontal" && "flex-1",
                !isLast && orientation === "vertical" && "flex-col"
              ),
              children: [
                interactive ? /* @__PURE__ */ jsx(
                  "button",
                  {
                    type: "button",
                    disabled: step.disabled,
                    onClick: () => onStepClick?.(index),
                    className: cn(
                      "flex items-center gap-[var(--space-3,0.75rem)] text-left rounded-md transition-all duration-[var(--duration-normal,200ms)] ease-out",
                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                      "disabled:opacity-50 disabled:pointer-events-none"
                    ),
                    children: innerContent
                  }
                ) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-[var(--space-3,0.75rem)]", children: innerContent }),
                !isLast ? (
                  /*
                   * Connector "complete" iff THIS step is finished. An
                   * explicit "error" status on the current step never
                   * fills the gap to the next step — the user hasn't
                   * cleared this milestone.
                   */
                  /* @__PURE__ */ jsx(
                    "span",
                    {
                      "aria-hidden": "true",
                      className: stepConnector({
                        orientation,
                        complete: index < current && step.status !== "error"
                      })
                    }
                  )
                ) : null
              ]
            },
            step.id
          )
        );
      })
    }
  );
}
Stepper.displayName = "Stepper";

export { Stepper };
//# sourceMappingURL=stepper.js.map
//# sourceMappingURL=stepper.js.map