import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { cva } from 'class-variance-authority';
import { Check } from 'lucide-react';
import { jsxs, jsx } from 'react/jsx-runtime';

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
var stepperIndicatorVariants = cva(
  "inline-flex items-center justify-center rounded-full border box-border shrink-0 font-semibold",
  {
    variants: {
      status: {
        completed: "border-transparent bg-primary text-primary-foreground",
        active: "border-2 border-primary bg-background text-primary",
        upcoming: "border-[var(--theme-stroke-default)] bg-[var(--theme-background-container)] text-[var(--theme-text-tertiary)]"
      },
      size: {
        sm: "size-6 text-xs",
        md: "size-10 text-base"
      }
    },
    defaultVariants: {
      status: "upcoming",
      size: "sm"
    }
  }
);
function StepperIndicator(_a) {
  var _b = _a, {
    className,
    status = "upcoming",
    size = "sm",
    stepNumber,
    icon
  } = _b, props = __objRest(_b, [
    "className",
    "status",
    "size",
    "stepNumber",
    "icon"
  ]);
  const iconSize = size === "sm" ? "size-3.5" : "size-5";
  return /* @__PURE__ */ jsx(
    "div",
    __spreadProps(__spreadValues({
      "data-slot": "stepper-indicator",
      "data-status": status,
      className: cn(stepperIndicatorVariants({ status, size }), className)
    }, props), {
      children: status === "completed" ? /* @__PURE__ */ jsx(Check, { className: iconSize, strokeWidth: 2.5, "aria-hidden": true }) : icon ? /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", iconSize), children: icon }) : /* @__PURE__ */ jsx("span", { children: stepNumber })
    })
  );
}
function StepperConnector(_a) {
  var _b = _a, {
    className,
    orientation = "vertical",
    isCompleted = false
  } = _b, props = __objRest(_b, [
    "className",
    "orientation",
    "isCompleted"
  ]);
  return /* @__PURE__ */ jsx(
    "div",
    __spreadValues({
      "data-slot": "stepper-connector",
      "data-orientation": orientation,
      "aria-hidden": "true",
      className: cn(
        "transition-colors",
        isCompleted ? "bg-primary" : "bg-[var(--theme-stroke-default)]",
        orientation === "vertical" ? "w-px flex-1 min-h-4 self-center" : "h-px flex-1 min-w-4 self-center",
        className
      )
    }, props)
  );
}
function StepperVerticalItem(_a) {
  var _b = _a, {
    className,
    status,
    stepNumber,
    label,
    caption,
    supportText,
    align = "left",
    icon,
    isLast = false,
    actions,
    children
  } = _b, props = __objRest(_b, [
    "className",
    "status",
    "stepNumber",
    "label",
    "caption",
    "supportText",
    "align",
    "icon",
    "isLast",
    "actions",
    "children"
  ]);
  const indicatorColumn = /* @__PURE__ */ jsxs(
    "div",
    {
      "data-slot": "stepper-vertical-indicator-column",
      className: "flex w-6 shrink-0 flex-col items-center",
      children: [
        /* @__PURE__ */ jsx(
          StepperIndicator,
          {
            status,
            stepNumber,
            icon,
            size: "sm"
          }
        ),
        !isLast && /* @__PURE__ */ jsx(
          StepperConnector,
          {
            orientation: "vertical",
            isCompleted: status === "completed"
          }
        )
      ]
    }
  );
  const contentColumn = /* @__PURE__ */ jsxs(
    "div",
    {
      "data-slot": "stepper-vertical-content",
      className: cn(
        "flex min-w-0 flex-1 flex-col gap-3",
        align === "right" && "items-end text-right"
      ),
      children: [
        /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1", children: [
          /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
            /* @__PURE__ */ jsx(
              "span",
              {
                className: cn(
                  "min-w-0 flex-1 text-base font-medium leading-6 text-[var(--theme-text-primary)]",
                  align === "right" && "text-right"
                ),
                children: label
              }
            ),
            supportText && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm leading-5 text-[var(--theme-text-secondary)]", children: supportText })
          ] }),
          caption && /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-[var(--theme-text-secondary)]", children: caption })
        ] }),
        children && /* @__PURE__ */ jsx("div", { "data-slot": "stepper-vertical-slot", className: "w-full", children }),
        actions && /* @__PURE__ */ jsx(
          "div",
          {
            "data-slot": "stepper-vertical-actions",
            className: "flex w-full items-start gap-1",
            children: actions
          }
        ),
        !isLast && /* @__PURE__ */ jsx("div", { className: "h-6 w-full shrink-0", "aria-hidden": "true" })
      ]
    }
  );
  return /* @__PURE__ */ jsxs(
    "div",
    __spreadProps(__spreadValues({
      "data-slot": "stepper-vertical-item",
      "data-status": status,
      className: cn(
        "flex w-full items-start gap-6",
        align === "right" && "flex-row-reverse",
        className
      )
    }, props), {
      children: [
        indicatorColumn,
        contentColumn
      ]
    })
  );
}

export { StepperVerticalItem };
//# sourceMappingURL=stepper-vertical-item.js.map
//# sourceMappingURL=stepper-vertical-item.js.map