"use client";
import { jsx as l, jsxs as s } from "react/jsx-runtime";
import { cva as t } from "../../node_modules/class-variance-authority/dist/index.js";
import { Stepper as V, StepperNav as S, StepperItem as b, StepperTrigger as N, StepperIndicator as w, StepperTitle as C, StepperSeparator as I, StepperPanel as T, StepperContent as j } from "./stepper.js";
const k = t("", {
  variants: {
    align: {
      horizontal: "flex w-full flex-col",
      vertical: "flex items-start gap-8"
    }
  },
  defaultVariants: {
    align: "horizontal"
  }
}), y = t(
  "rounded-lg p-6 shadow w-full max-w-6xl",
  {
    variants: {
      align: {
        horizontal: "mt-6",
        vertical: "mt-1"
      }
    },
    defaultVariants: {
      align: "horizontal"
    }
  }
), A = t("", {
  variants: {
    align: {
      horizontal: "flex flex-col gap-3",
      vertical: "flex flex-row gap-3 items-center"
    }
  },
  defaultVariants: {
    align: "horizontal"
  }
}), W = t("relative", {
  variants: {
    align: {
      horizontal: "flex-1 items-start",
      vertical: "flex items-start"
    }
  },
  defaultVariants: {
    align: "horizontal"
  }
}), q = t("", {
  variants: {
    align: {
      horizontal: "w-full",
      vertical: "relative flex flex-col py-2"
    }
  },
  defaultVariants: {
    align: "horizontal"
  }
}), B = t("", {
  variants: {
    size: {
      sm: "w-6 h-6 text-sm font-medium",
      md: "w-8 h-8 text-base font-bold"
    }
  },
  defaultVariants: {
    size: "sm"
  }
}), D = t("", {
  variants: {
    size: {
      sm: "text-sm font-medium",
      md: "text-base font-bold"
    }
  },
  defaultVariants: {
    size: "sm"
  }
}), E = t(
  "group-data-[state=completed]/step:bg-d-primary",
  {
    variants: {
      align: {
        horizontal: "absolute left-1/2 h-0.5",
        vertical: "!w-0.5"
      },
      size: {
        sm: "top-2.5 ml-2 w-[calc(100%-1rem)]",
        md: "top-3.5 ml-4 w-[calc(100%-2rem)]"
      }
    },
    compoundVariants: [
      {
        align: "vertical",
        size: "sm",
        class: "ml-2.5"
      },
      {
        align: "vertical",
        size: "md",
        class: "ml-3.5"
      }
    ],
    defaultVariants: {
      align: "horizontal",
      size: "sm"
    }
  }
), F = t("flex flex-1", {
  variants: {
    align: {
      horizontal: "justify-center",
      vertical: "flex-grow"
    }
  },
  defaultVariants: {
    align: "horizontal"
  }
}), G = t("flex flex-1 flex-col", {
  variants: {
    align: {
      horizontal: "items-center",
      vertical: ""
    }
  },
  defaultVariants: {
    align: "horizontal"
  }
});
function L({
  steps: i,
  align: e = "horizontal",
  size: n = "sm",
  showSeparators: f = !0,
  defaultStep: u,
  allowStepNavigation: c = !0,
  allowClickOnlyCompleted: d = !1,
  onStepClick: p,
  indicators: h,
  id: v,
  "data-testid": x,
  ...o
}) {
  const g = (a, r) => {
    if (p) {
      p(a, r);
      return;
    }
    c && !a.disabled && (!d || a.completed) && o.onValueChange?.(a.id);
  }, z = o.value ?? u ?? i[0]?.id;
  return /* @__PURE__ */ l(
    V,
    {
      ...o,
      value: z,
      orientation: e,
      indicators: h,
      children: /* @__PURE__ */ s(
        "div",
        {
          id: v,
          "data-testid": x,
          className: k({ align: e }),
          children: [
            /* @__PURE__ */ l(S, { className: q({ align: e }), children: i.map((a, r) => {
              const m = c && !a.disabled && (!d || a.completed);
              return /* @__PURE__ */ s(
                b,
                {
                  step: a.id,
                  completed: a.completed,
                  disabled: a.disabled,
                  loading: a.loading,
                  className: W({ align: e }),
                  children: [
                    /* @__PURE__ */ s(
                      N,
                      {
                        className: A({ align: e }),
                        onClick: () => g(a, r),
                        style: { cursor: m ? "pointer" : "default" },
                        "data-testid": a["data-testid"],
                        children: [
                          /* @__PURE__ */ l(
                            w,
                            {
                              className: B({ size: n }),
                              children: a.id
                            }
                          ),
                          /* @__PURE__ */ l(C, { className: D({ size: n }), children: a.label })
                        ]
                      }
                    ),
                    f && r < i.length - 1 && /* @__PURE__ */ l(
                      I,
                      {
                        className: E({ align: e, size: n })
                      }
                    )
                  ]
                },
                a.id
              );
            }) }),
            /* @__PURE__ */ l(T, { className: F({ align: e }), children: i.map((a) => /* @__PURE__ */ l(
              j,
              {
                value: a.id,
                className: G({ align: e }),
                children: /* @__PURE__ */ l("div", { className: y({ align: e }), children: a.component })
              },
              a.id
            )) })
          ]
        }
      )
    }
  );
}
export {
  L as AppStepper,
  L as default
};
