import { o as y } from "./rolldown-runtime.js";
import { i as C, n as j, t as N } from "./vendor/react.js";
import { t as v } from "./arrow-right.js";
import { t as g } from "./sparkles.js";
import { t as A } from "./dist.js";
import { t as d } from "./utils.js";
var o = N(), w = A("group inline-flex items-center gap-2 transition-all cursor-pointer", {
  variants: {
    variant: {
      default: "px-4 py-2.5 rounded-full border border-border bg-background hover:border-border hover:shadow-sm text-secondary-foreground hover:text-foreground",
      outline: "px-4 py-2.5 rounded-full border border-border bg-transparent hover:bg-muted text-secondary-foreground hover:text-foreground",
      ghost: "px-3 py-2 rounded-lg hover:bg-accent text-muted-foreground hover:text-foreground",
      card: "flex-col items-start p-4 rounded-xl border border-border bg-background hover:border-primary hover:shadow-md",
      highlight: "text-primary hover:text-primary underline underline-offset-2"
    },
    size: {
      sm: "text-xs",
      md: "text-sm",
      lg: "text-base"
    }
  },
  defaultVariants: {
    variant: "default",
    size: "md"
  }
});
function u({ children: e, onClick: r, icon: t, showArrow: n = !1, highlight: i, variant: a, size: s, className: l }) {
  const m = () => i ? /* @__PURE__ */ (0, o.jsx)("span", { children: e.split(new RegExp(`(${i})`, "gi")).map((h, f) => h.toLowerCase() === i.toLowerCase() ? /* @__PURE__ */ (0, o.jsx)("span", {
    className: "text-primary font-medium",
    children: h
  }, f) : /* @__PURE__ */ (0, o.jsx)("span", { children: h }, f)) }) : /* @__PURE__ */ (0, o.jsx)("span", { children: e });
  return /* @__PURE__ */ (0, o.jsxs)("button", {
    type: "button",
    "data-slot": "ai-prompt-suggestion",
    onClick: r,
    className: d(w({
      variant: a,
      size: s
    }), "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", l),
    children: [
      t && /* @__PURE__ */ (0, o.jsx)("span", {
        className: "shrink-0",
        "aria-hidden": "true",
        children: t
      }),
      m(),
      n && a !== "highlight" && /* @__PURE__ */ (0, o.jsx)(v, {
        className: "size-4 opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition-all motion-reduce:transition-none",
        "aria-hidden": "true"
      })
    ]
  });
}
u.displayName = "AIPromptSuggestion";
function x({ title: e, description: r, icon: t, onClick: n, featured: i = !1, className: a }) {
  return /* @__PURE__ */ (0, o.jsxs)("button", {
    type: "button",
    "data-slot": "ai-prompt-suggestion-card",
    onClick: n,
    className: d("group flex flex-col items-start gap-2 p-4 rounded-xl border transition-all text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring", i ? "border-primary bg-primary/10 hover:border-primary hover:shadow-md" : "border-border bg-background hover:border-border hover:shadow-md", a),
    children: [t && /* @__PURE__ */ (0, o.jsx)("div", {
      className: d("size-8 rounded-lg flex items-center justify-center", i ? "bg-primary/20 text-primary" : "bg-accent text-muted-foreground"),
      children: t
    }), /* @__PURE__ */ (0, o.jsxs)("div", {
      className: "space-y-1",
      children: [/* @__PURE__ */ (0, o.jsx)("h4", {
        className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors",
        children: e
      }), r && /* @__PURE__ */ (0, o.jsx)("p", {
        className: "text-xs text-quaternary-foreground line-clamp-2",
        children: r
      })]
    })]
  });
}
x.displayName = "AIPromptSuggestionCard";
function E({ suggestions: e, onSelect: r, variant: t = "default", direction: n = "horizontal", max: i, className: a }) {
  const s = i ? e.slice(0, i) : e;
  return /* @__PURE__ */ (0, o.jsx)("div", {
    "data-slot": "ai-prompt-suggestion-list",
    role: "group",
    "aria-label": "Prompt suggestions",
    className: d("flex gap-2", n === "horizontal" ? "flex-wrap" : "flex-col", a),
    children: s.map((l, m) => /* @__PURE__ */ (0, o.jsx)(u, {
      variant: t,
      icon: l.icon,
      onClick: () => r?.(l.text),
      children: l.text
    }, `${l.text}-${m}`))
  });
}
E.displayName = "AIPromptSuggestionList";
function k({ actions: e, onSelect: r, variant: t = "card", columns: n = 2, className: i }) {
  const a = {
    2: "grid-cols-2",
    3: "grid-cols-3",
    4: "grid-cols-4"
  };
  return t === "pill" ? /* @__PURE__ */ (0, o.jsx)("div", {
    className: d("flex flex-wrap gap-2", i),
    children: e.map((s) => /* @__PURE__ */ (0, o.jsx)(u, {
      icon: s.icon || /* @__PURE__ */ (0, o.jsx)(g, { className: "size-4" }),
      onClick: () => r?.(s.prompt),
      children: s.title
    }, s.id))
  }) : /* @__PURE__ */ (0, o.jsx)("div", {
    className: d("grid gap-3", a[n], i),
    children: e.map((s) => /* @__PURE__ */ (0, o.jsx)(x, {
      title: s.title,
      description: s.description,
      icon: s.icon || /* @__PURE__ */ (0, o.jsx)(g, { className: "size-4" }),
      onClick: () => r?.(s.prompt)
    }, s.id))
  });
}
k.displayName = "AIQuickActions";
var p = /* @__PURE__ */ y(C(), 1), P = j();
function z(e) {
  return { onClick: (r) => {
    e.dispatchEvent(new CustomEvent("click", {
      detail: r,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function S(e) {
  const { _hostElement: r, ...t } = e, n = p.useMemo(() => r ? z(r) : {}, [r]);
  return p.createElement(u, {
    ...t,
    ...n
  });
}
var c = {
  variant: "string",
  size: "string",
  icon: "json",
  showArrow: "boolean",
  highlight: "string",
  className: "string"
};
function b(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 _ = 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 t of Array.from(this.childNodes))
      t.nodeType === Node.TEXT_NODE && !t.textContent?.trim() || e.push(t);
    const r = document.createElement("div");
    for (r.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((t) => this._childrenContainer.appendChild(t)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(r), this._root = (0, P.createRoot)(r), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, r, t) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(c).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, r) {
    const t = c[e] || "string";
    this._props[e] = this._parseValue(r, t), 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(), t = c[e] || "string";
    return b(this.getAttribute(r), t);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [t, n] of Object.entries(c)) if (t in this._props) e[t] = this._props[t];
    else {
      const i = t.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[t] = b(this.getAttribute(i), n);
    }
    const r = p.createElement(S, {
      ...e,
      _hostElement: this
    }, p.createElement("span", {
      ref: (t) => {
        t && this._childrenContainer && t.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(r);
  }
};
for (const e of Object.keys(c)) Object.defineProperty(_.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(r) {
    this._setProp(e, r);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-prompt-suggestion") && customElements.define("hf-ai-prompt-suggestion", _);
export {
  _ as AIPromptSuggestionWC,
  _ as default
};

//# sourceMappingURL=hf-ai-prompt-suggestion.js.map