import { o as _ } from "./rolldown-runtime.js";
import { i as $, t as P } from "./vendor/react.js";
import { t as E } from "./check.js";
import { t as h } from "./dist.js";
import { n as A, t as i } from "./utils.js";
import { t as M } from "./create-safe-context.js";
var o = /* @__PURE__ */ _($(), 1), e = P(), T = h("flex items-center justify-center shrink-0 size-[38px] font-medium text-lg transition-all duration-200 ease-out motion-reduce:transition-none", {
  variants: {
    shape: {
      rounded: "rounded-lg",
      round: "rounded-full"
    },
    status: {
      complete: "bg-primary text-primary-foreground shadow-sm",
      active: "bg-primary-foreground border-2 border-primary text-primary shadow-sm",
      incomplete: "bg-accent text-muted-foreground"
    }
  },
  defaultVariants: {
    shape: "rounded",
    status: "incomplete"
  }
}), q = h("shrink-0 transition-colors duration-200 ease-out motion-reduce:transition-none", {
  variants: {
    orientation: {
      horizontal: "h-0.5 flex-1 min-w-4 mx-2 mt-[18px]",
      vertical: "w-0.5 h-[30px] my-1 ml-[18px]"
    },
    status: {
      complete: "bg-primary",
      incomplete: "bg-border"
    }
  },
  defaultVariants: {
    orientation: "horizontal",
    status: "incomplete"
  }
}), F = h("text-base leading-6", {
  variants: { status: {
    complete: "text-card-foreground",
    active: "text-card-foreground",
    incomplete: "text-muted-foreground"
  } },
  defaultVariants: { status: "incomplete" }
}), H = h("text-sm leading-5 text-muted-foreground"), [L, O] = M("Steps"), C = o.createContext(0);
function k({ index: a, status: t, shape: l, bulletType: u }) {
  const r = () => u === "icon" ? t === "complete" ? /* @__PURE__ */ (0, e.jsx)(E, { className: "size-[22px] delight-check-draw" }) : t === "active" ? /* @__PURE__ */ (0, e.jsx)("div", { className: i("size-5 bg-primary", l === "rounded" ? "rounded-sm" : "rounded-full") }) : /* @__PURE__ */ (0, e.jsx)("div", { className: "size-1.5 rounded-full bg-current" }) : a + 1;
  return /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "steps-indicator",
    "aria-hidden": "true",
    className: i(T({
      shape: l,
      status: t
    }), t === "complete" && "delight-check-bounce", t === "active" && "delight-pulse-once"),
    children: r()
  });
}
k.displayName = "StepIndicator";
function z({ orientation: a, isComplete: t }) {
  return /* @__PURE__ */ (0, e.jsx)("div", {
    "data-slot": "steps-connector",
    "aria-hidden": "true",
    className: i(q({
      orientation: a,
      status: t ? "complete" : "incomplete"
    }), t && "delight-connector-fill")
  });
}
z.displayName = "StepConnector";
function g({ children: a, className: t }) {
  return /* @__PURE__ */ (0, e.jsx)("span", {
    "data-slot": "steps-subtext",
    className: i(H(), t),
    children: a
  });
}
g.displayName = "Steps.Subtext";
function N({ status: a, onClick: t, children: l, className: u }) {
  const r = O(), n = o.useContext(C), c = a ?? r.getStepStatus(n), f = n === 0, d = t ?? (r.onStepClick ? () => r.onStepClick?.(n) : void 0);
  let p = null, v = null;
  o.Children.forEach(l, (x) => {
    o.isValidElement(x) && x.type === g ? v = x : x != null && x !== !1 && (p = x);
  });
  const S = f ? void 0 : r.getStepStatus(n - 1), b = !f && /* @__PURE__ */ (0, e.jsx)(z, {
    orientation: r.orientation,
    isComplete: S === "complete"
  }), s = r.orientation === "horizontal", m = /* @__PURE__ */ (0, e.jsx)(k, {
    index: n,
    status: c,
    shape: r.shape,
    bulletType: r.bulletType
  }), y = /* @__PURE__ */ (0, e.jsxs)("div", {
    "data-slot": "steps-label",
    className: i("flex flex-col", s ? "items-center gap-0.5 text-center w-0 whitespace-nowrap" : "items-start gap-0.5 ml-2.5"),
    children: [/* @__PURE__ */ (0, e.jsx)("span", {
      className: F({ status: c }),
      children: p
    }), v]
  }), w = s ? /* @__PURE__ */ (0, e.jsxs)("div", {
    className: "flex w-full items-start",
    children: [b, /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex flex-col items-center",
      children: [m, y]
    })]
  }) : /* @__PURE__ */ (0, e.jsxs)("div", {
    className: "flex flex-col items-start",
    children: [b, /* @__PURE__ */ (0, e.jsxs)("div", {
      className: "flex items-center",
      children: [m, y]
    })]
  }), j = o.useMemo(() => A(p), [p]), I = c === "complete" ? ", completed" : c === "active" ? ", current" : "";
  return /* @__PURE__ */ (0, e.jsx)("li", {
    "data-slot": "steps-item",
    "aria-current": c === "active" ? "step" : void 0,
    "aria-label": !d && j ? `Step ${n + 1}: ${j}${I}` : void 0,
    className: i(s && !f && "flex-1", !d && u),
    children: d ? /* @__PURE__ */ (0, e.jsx)("button", {
      type: "button",
      onClick: d,
      "aria-label": `Step ${n + 1}: ${j || ""}${I}`,
      className: i("cursor-pointer", s && "w-full", u, "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-sm"),
      children: w
    }) : w
  });
}
N.displayName = "Steps.Item";
function V({ steps: a, currentStep: t = 0, orientation: l = "horizontal", shape: u = "rounded", bulletType: r = "text", onStepClick: n, children: c, className: f }) {
  const d = o.useCallback((s) => s < t ? "complete" : s === t ? "active" : "incomplete", [t]), p = o.useMemo(() => ({
    orientation: l,
    shape: u,
    bulletType: r,
    onStepClick: n,
    getStepStatus: d
  }), [
    l,
    u,
    r,
    n,
    d
  ]), v = !a && o.Children.count(c) > 0, S = () => !a || a.length === 0 ? null : a.map((s, m) => /* @__PURE__ */ (0, e.jsx)(C.Provider, {
    value: m,
    children: /* @__PURE__ */ (0, e.jsxs)(N, { children: [s.label, s.subtext && /* @__PURE__ */ (0, e.jsx)(g, { children: s.subtext })] })
  }, `${m}-${s.label}`)), b = () => o.Children.map(c, (s, m) => /* @__PURE__ */ (0, e.jsx)(C.Provider, {
    value: m,
    children: s
  }));
  return /* @__PURE__ */ (0, e.jsx)(L.Provider, {
    value: p,
    children: /* @__PURE__ */ (0, e.jsx)("nav", {
      "aria-label": "Progress steps",
      "data-slot": "steps",
      tabIndex: 0,
      className: i("overflow-x-auto", f),
      children: /* @__PURE__ */ (0, e.jsx)("ol", {
        "data-slot": "steps-list",
        className: i("flex", l === "horizontal" ? "flex-row items-start" : "flex-col items-start"),
        children: v ? b() : S()
      })
    })
  });
}
V.displayName = "Steps";
var R = Object.assign(V, {
  Item: N,
  Subtext: g
});
export {
  N as n,
  g as r,
  R as t
};

//# sourceMappingURL=Steps.js.map