import { o as S } from "./rolldown-runtime.js";
import { i as V, n as T, t as q } from "./vendor/react.js";
import { t as L } from "./createLucideIcon.js";
import { t as _ } from "./check.js";
import { t as v } from "./chevron-down.js";
import { t as C } from "./chevron-right.js";
import { t as f } from "./circle-alert.js";
import { t as O } from "./clock.js";
import { t as k } from "./proxy.js";
import { t as z } from "./AnimatePresence.js";
import { t as x } from "./dist.js";
import { t as a } from "./utils.js";
var M = [
  ["path", {
    d: "M12 2v4",
    key: "3427ic"
  }],
  ["path", {
    d: "m16.2 7.8 2.9-2.9",
    key: "r700ao"
  }],
  ["path", {
    d: "M18 12h4",
    key: "wj9ykh"
  }],
  ["path", {
    d: "m16.2 16.2 2.9 2.9",
    key: "1bxg5t"
  }],
  ["path", {
    d: "M12 18v4",
    key: "jadmvz"
  }],
  ["path", {
    d: "m4.9 19.1 2.9-2.9",
    key: "bwix9q"
  }],
  ["path", {
    d: "M2 12h4",
    key: "j09sii"
  }],
  ["path", {
    d: "m4.9 4.9 2.9 2.9",
    key: "giyufr"
  }]
], P = L("loader", M), g = /* @__PURE__ */ S(V(), 1), t = q(), $ = x("overflow-hidden rounded-xl border", {
  variants: { variant: {
    default: "border-border bg-background",
    subtle: "border-border bg-muted"
  } },
  defaultVariants: { variant: "default" }
}), D = x("flex items-start gap-3 px-4 py-3 transition-colors", {
  variants: { status: {
    pending: "text-muted-foreground",
    running: "text-primary",
    completed: "text-success",
    error: "text-destructive"
  } },
  defaultVariants: { status: "pending" }
}), R = x("size-5 shrink-0 flex items-center justify-center rounded-full", {
  variants: { status: {
    pending: "bg-accent text-muted-foreground",
    running: "bg-primary/20 text-primary",
    completed: "bg-success/20 text-success",
    error: "bg-destructive/20 text-destructive"
  } },
  defaultVariants: { status: "pending" }
});
function E({ status: e, index: r, className: s }) {
  const i = a(R({ status: e }), s);
  switch (e) {
    case "running":
      return /* @__PURE__ */ (0, t.jsx)("div", {
        className: a(i, "delight-status-pulse motion-reduce:!animate-none"),
        children: /* @__PURE__ */ (0, t.jsx)(P, { className: "size-3 animate-spin motion-reduce:animate-none" })
      });
    case "completed":
      return /* @__PURE__ */ (0, t.jsx)("div", {
        className: a(i, "delight-check-bounce motion-reduce:!animate-none"),
        children: /* @__PURE__ */ (0, t.jsx)(_, { className: "size-3" })
      });
    case "error":
      return /* @__PURE__ */ (0, t.jsx)("div", {
        className: a(i, "delight-shake motion-reduce:!animate-none"),
        children: /* @__PURE__ */ (0, t.jsx)(f, { className: "size-3" })
      });
    default:
      return /* @__PURE__ */ (0, t.jsx)("div", {
        className: i,
        children: /* @__PURE__ */ (0, t.jsx)("span", {
          className: "text-xs font-medium",
          children: r + 1
        })
      });
  }
}
E.displayName = "StepIcon";
function w({ step: e, index: r, isLast: s, expandable: i = !0, defaultExpanded: l = !1 }) {
  const [d, m] = g.useState(l), n = e.content || e.error, p = (c) => c < 1e3 ? `${c}ms` : `${(c / 1e3).toFixed(1)}s`;
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    "data-slot": "ai-step-item",
    className: a(!s && "border-b border-border"),
    children: [/* @__PURE__ */ (0, t.jsxs)("button", {
      type: "button",
      onClick: () => n && i && m(!d),
      disabled: !n || !i,
      "aria-expanded": n && i ? d : void 0,
      className: a(D({ status: e.status }), n && i && "hover:bg-muted cursor-pointer", "w-full focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"),
      children: [
        /* @__PURE__ */ (0, t.jsx)(E, {
          status: e.status,
          index: r
        }),
        /* @__PURE__ */ (0, t.jsxs)("div", {
          className: "flex-1 min-w-0 text-start",
          children: [/* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex items-center gap-2",
            children: [/* @__PURE__ */ (0, t.jsx)("span", {
              className: a("text-sm font-medium", e.status === "pending" ? "text-quaternary-foreground" : "text-foreground"),
              children: e.title
            }), e.duration !== void 0 && e.status === "completed" && /* @__PURE__ */ (0, t.jsx)("span", {
              className: "text-xs text-muted-foreground",
              children: p(e.duration)
            })]
          }), e.description && /* @__PURE__ */ (0, t.jsx)("p", {
            className: "text-xs text-quaternary-foreground mt-0.5",
            children: e.description
          })]
        }),
        n && i && /* @__PURE__ */ (0, t.jsx)("div", {
          className: "shrink-0",
          children: d ? /* @__PURE__ */ (0, t.jsx)(v, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, t.jsx)(C, { className: "size-4 text-muted-foreground rtl:rotate-180" })
        })
      ]
    }), /* @__PURE__ */ (0, t.jsx)(z, { children: d && n && /* @__PURE__ */ (0, t.jsx)(k.div, {
      initial: {
        height: 0,
        opacity: 0
      },
      animate: {
        height: "auto",
        opacity: 1
      },
      exit: {
        height: 0,
        opacity: 0
      },
      transition: { duration: 0.2 },
      className: "overflow-hidden",
      children: /* @__PURE__ */ (0, t.jsx)("div", {
        className: "px-4 pb-3 ps-12",
        children: e.error ? /* @__PURE__ */ (0, t.jsx)("div", {
          className: "p-3 rounded-lg bg-destructive/10 border border-destructive/50",
          children: /* @__PURE__ */ (0, t.jsxs)("div", {
            className: "flex items-start gap-2",
            children: [/* @__PURE__ */ (0, t.jsx)(f, { className: "size-4 text-destructive mt-0.5 shrink-0" }), /* @__PURE__ */ (0, t.jsx)("p", {
              className: "text-sm text-destructive",
              children: e.error
            })]
          })
        }) : e.content
      })
    }) })]
  });
}
w.displayName = "AIStepItem";
function A({ steps: e, title: r, variant: s, collapsible: i = !0, defaultExpanded: l = !0, stepsExpandable: d = !0, className: m }) {
  const [n, p] = g.useState(l), c = e.filter((o) => o.status === "completed").length, b = e.length, j = e.some((o) => o.status === "error"), h = e.some((o) => o.status === "running");
  return /* @__PURE__ */ (0, t.jsxs)("div", {
    "data-slot": "ai-steps",
    role: "region",
    "aria-label": r || "Steps",
    className: a($({ variant: s }), m),
    children: [(r || i) && /* @__PURE__ */ (0, t.jsxs)("button", {
      type: "button",
      onClick: () => i && p(!n),
      disabled: !i,
      "aria-expanded": i ? n : void 0,
      className: a("flex items-center justify-between w-full px-4 py-3 border-b border-border", i && "hover:bg-muted cursor-pointer", "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"),
      children: [/* @__PURE__ */ (0, t.jsxs)("div", {
        className: "flex items-center gap-2",
        children: [
          h && /* @__PURE__ */ (0, t.jsx)(O, { className: "size-4 text-primary animate-pulse motion-reduce:animate-none" }),
          j && !h && /* @__PURE__ */ (0, t.jsx)(f, { className: "size-4 text-destructive" }),
          !h && !j && c === b && /* @__PURE__ */ (0, t.jsx)(_, { className: "size-4 text-success" }),
          /* @__PURE__ */ (0, t.jsx)("span", {
            className: "text-sm font-medium text-foreground",
            children: r || "Steps"
          }),
          /* @__PURE__ */ (0, t.jsxs)("span", {
            className: "text-xs text-quaternary-foreground",
            children: [
              "(",
              c,
              "/",
              b,
              ")"
            ]
          })
        ]
      }), i && /* @__PURE__ */ (0, t.jsx)("div", {
        className: "shrink-0",
        children: n ? /* @__PURE__ */ (0, t.jsx)(v, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, t.jsx)(C, { className: "size-4 text-muted-foreground rtl:rotate-180" })
      })]
    }), /* @__PURE__ */ (0, t.jsx)(z, {
      initial: !1,
      children: n && /* @__PURE__ */ (0, t.jsx)(k.div, {
        initial: {
          height: 0,
          opacity: 0
        },
        animate: {
          height: "auto",
          opacity: 1
        },
        exit: {
          height: 0,
          opacity: 0
        },
        transition: { duration: 0.2 },
        className: "overflow-hidden",
        children: /* @__PURE__ */ (0, t.jsx)("ol", {
          className: "list-none m-0 p-0",
          children: e.map((o, N) => /* @__PURE__ */ (0, t.jsx)("li", { children: /* @__PURE__ */ (0, t.jsx)(w, {
            step: o,
            index: N,
            isLast: N === e.length - 1,
            expandable: d
          }) }, o.id))
        })
      })
    })]
  });
}
A.displayName = "AISteps";
var Z = T(), u = {
  variant: "string",
  size: "string",
  steps: "json",
  title: "string",
  collapsible: "boolean",
  defaultExpanded: "boolean",
  stepsExpandable: "boolean",
  className: "string"
};
function y(e, r) {
  if (e !== null)
    switch (r) {
      case "number":
        return Number(e);
      case "boolean":
        return e !== "false" && e !== "0";
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
}
var I = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const e = [];
    for (const s of Array.from(this.childNodes))
      s.nodeType === Node.TEXT_NODE && !s.textContent?.trim() || e.push(s);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((s) => this._childrenContainer.appendChild(s)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, Z.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(u).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const s = u[e] || "string";
    this._props[e] = this._parseValue(r, s), this._render();
  }
  _parseValue(e, r) {
    if (r === "boolean" && typeof e == "boolean" || r === "number" && typeof e == "number" || r === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (r) {
      case "boolean":
        return e !== "false" && e !== "0" && e !== "";
      case "number":
        return Number(e);
      case "json":
        try {
          return JSON.parse(e);
        } catch {
          return e;
        }
      default:
        return e;
    }
    return e;
  }
  _getProp(e) {
    if (e in this._props) return this._props[e];
    const r = e.replace(/([A-Z])/g, "-$1").toLowerCase(), s = u[e] || "string";
    return y(this.getAttribute(r), s);
  }
  _render() {
    if (!this._root) return;
    const e = {};
    for (const [s, i] of Object.entries(u)) if (s in this._props) e[s] = this._props[s];
    else {
      const l = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = y(this.getAttribute(l), i);
    }
    const r = g.createElement(A, {
      ...e,
      _hostElement: this
    });
    this._root.render(r);
  }
};
for (const e of Object.keys(u)) Object.defineProperty(I.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-steps") && customElements.define("hf-ai-steps", I);
export {
  I as AIStepsWC,
  I as default
};

//# sourceMappingURL=hf-ai-steps.js.map