import { o as A } from "./rolldown-runtime.js";
import { i as E, n as b, t as j } from "./vendor/react.js";
import { t as a } from "./utils.js";
import { n as N } from "./AIContainer.js";
var u = /* @__PURE__ */ A(E(), 1), s = j();
function l(t) {
  const e = u.useContext(N);
  if (!t || !e) return !1;
  const { inputHasText: n, inputIsFocused: r } = e;
  switch (t) {
    case "type":
      return n;
    case "focus":
      return r;
    case "both":
      return n || r;
  }
}
function p({ children: t, fadeOn: e, className: n, ...r }) {
  const i = l(e);
  return /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "ai-empty-state-icon",
    className: a("flex items-center justify-center text-quaternary-foreground transition-all duration-150 ease-out motion-reduce:transition-none", !i && "delight-stagger motion-reduce:animate-none", i && "opacity-0 -translate-y-5 pointer-events-none", n),
    ...r,
    children: t
  });
}
p.displayName = "AIEmptyState.Icon";
function f({ children: t, fadeOn: e, className: n, ...r }) {
  const i = l(e);
  return /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "ai-empty-state-title",
    className: a("flex flex-col items-center gap-4 transition-all duration-150 ease-out motion-reduce:transition-none", !i && "delight-stagger motion-reduce:animate-none", i && "opacity-0 -translate-y-5 pointer-events-none", n),
    style: i ? void 0 : { "--delight-delay": "100ms" },
    ...r,
    children: t
  });
}
f.displayName = "AIEmptyState.Title";
function h({ children: t, fadeOn: e, className: n, ...r }) {
  const i = l(e);
  return /* @__PURE__ */ (0, s.jsx)("p", {
    "data-slot": "ai-empty-state-description",
    className: a("text-xs text-muted-foreground transition-all duration-150 ease-out motion-reduce:transition-none", !i && "delight-stagger motion-reduce:animate-none", i && "opacity-0 -translate-y-5 pointer-events-none", n),
    style: i ? void 0 : { "--delight-delay": "200ms" },
    ...r,
    children: t
  });
}
h.displayName = "AIEmptyState.Description";
function y({ children: t, fadeOn: e, className: n, ...r }) {
  const i = l(e);
  return /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "ai-empty-state-actions",
    className: a("flex flex-wrap items-center justify-center gap-4 transition-opacity duration-200 ease-out motion-reduce:transition-none", !i && "delight-stagger motion-reduce:animate-none", i && "opacity-0 pointer-events-none", n),
    style: i ? void 0 : { "--delight-delay": "300ms" },
    ...r,
    children: t
  });
}
y.displayName = "AIEmptyState.Actions";
var C = {
  1: "grid-cols-1",
  2: "grid-cols-1 sm:grid-cols-2",
  3: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3",
  4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-4"
};
function g({ children: t, fadeOn: e, columns: n = 2, className: r, ...i }) {
  const o = l(e);
  return /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "ai-empty-state-suggestion-grid",
    className: a("grid gap-3 transition-opacity duration-200 ease-out motion-reduce:transition-none", C[n], !o && "delight-stagger motion-reduce:animate-none", o && "opacity-0 pointer-events-none", r),
    style: o ? void 0 : { "--delight-delay": "350ms" },
    ...i,
    children: t
  });
}
g.displayName = "AIEmptyState.SuggestionGrid";
function d({ children: t, className: e, ...n }) {
  return /* @__PURE__ */ (0, s.jsx)("div", {
    "data-slot": "ai-empty-state",
    className: a("flex flex-col items-center justify-center gap-6 size-full", e),
    ...n,
    children: t
  });
}
d.displayName = "AIEmptyState";
function _({ title: t, description: e, icon: n, children: r, className: i, ...o }) {
  return t ? /* @__PURE__ */ (0, s.jsxs)(d, {
    className: i,
    ...o,
    children: [
      n && /* @__PURE__ */ (0, s.jsx)(p, { children: n }),
      /* @__PURE__ */ (0, s.jsxs)("div", {
        className: "flex flex-col items-center gap-4",
        children: [/* @__PURE__ */ (0, s.jsx)("h1", {
          className: "text-2xl font-semibold text-foreground text-center",
          children: t
        }), e && /* @__PURE__ */ (0, s.jsx)("p", {
          className: "text-xs text-muted-foreground",
          children: e
        })]
      }),
      r && /* @__PURE__ */ (0, s.jsx)("div", {
        className: "flex flex-wrap items-center justify-center gap-4",
        children: r
      })
    ]
  }) : /* @__PURE__ */ (0, s.jsx)(d, {
    className: i,
    ...o,
    children: r
  });
}
_.displayName = "AIEmptyState";
var S = Object.assign(_, {
  Root: d,
  Icon: p,
  Title: f,
  Description: h,
  Actions: y,
  SuggestionGrid: g
}), I = b(), c = {
  title: "string",
  description: "string",
  icon: "json"
};
function m(t, e) {
  if (t !== null)
    switch (e) {
      case "number":
        return Number(t);
      case "boolean":
        return t !== "false" && t !== "0";
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
}
var x = class extends HTMLElement {
  _root = null;
  _childrenContainer = null;
  _props = {};
  _initialized = !1;
  connectedCallback() {
    setTimeout(() => this._initialize(), 0);
  }
  _initialize() {
    if (this._initialized) return;
    this._initialized = !0;
    const t = [];
    for (const n of Array.from(this.childNodes))
      n.nodeType === Node.TEXT_NODE && !n.textContent?.trim() || t.push(n);
    const e = document.createElement("div");
    for (e.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", t.forEach((n) => this._childrenContainer.appendChild(n)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(e), this._root = (0, I.createRoot)(e), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(t, e, n) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(c).map((t) => t.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(t, e) {
    const n = c[t] || "string";
    this._props[t] = this._parseValue(e, n), this._render();
  }
  _parseValue(t, e) {
    if (e === "boolean" && typeof t == "boolean" || e === "number" && typeof t == "number" || e === "string" && typeof t == "string") return t;
    if (typeof t == "string") switch (e) {
      case "boolean":
        return t !== "false" && t !== "0" && t !== "";
      case "number":
        return Number(t);
      case "json":
        try {
          return JSON.parse(t);
        } catch {
          return t;
        }
      default:
        return t;
    }
    return t;
  }
  _getProp(t) {
    if (t in this._props) return this._props[t];
    const e = t.replace(/([A-Z])/g, "-$1").toLowerCase(), n = c[t] || "string";
    return m(this.getAttribute(e), n);
  }
  _render() {
    if (!this._root) return;
    const t = {};
    for (const [n, r] of Object.entries(c)) if (n in this._props) t[n] = this._props[n];
    else {
      const i = n.replace(/([A-Z])/g, "-$1").toLowerCase();
      t[n] = m(this.getAttribute(i), r);
    }
    const e = u.createElement(S, {
      ...t,
      _hostElement: this
    });
    this._root.render(e);
  }
};
for (const t of Object.keys(c)) Object.defineProperty(x.prototype, t, {
  get() {
    return this._getProp(t);
  },
  set(e) {
    this._setProp(t, e);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-empty-state") && customElements.define("hf-ai-empty-state", x);
export {
  x as AIEmptyStateWC,
  x as default
};

//# sourceMappingURL=hf-ai-empty-state.js.map