import { o as A } from "./rolldown-runtime.js";
import { i as v, n as I, t as M } from "./vendor/react.js";
import { t as V } from "./circle-alert.js";
import { t as k } from "./circle-check-big.js";
import { t as h } from "./info.js";
import { t as S } from "./triangle-alert.js";
import { t as y } from "./x.js";
import { t as b } from "./proxy.js";
import { t as x } from "./AnimatePresence.js";
import { t as T } from "./Button.js";
import { t as _ } from "./dist.js";
import { t as l } from "./utils.js";
var n = /* @__PURE__ */ A(v(), 1), r = M(), D = _("flex items-start gap-3 px-4 py-3 rounded-xl border", {
  variants: {
    variant: {
      info: "bg-primary/10 border-primary text-primary",
      success: "bg-success/10 border-success/50 text-success",
      warning: "bg-warning/10 border-warning/50 text-warning",
      error: "bg-destructive/10 border-destructive/50 text-destructive",
      neutral: "bg-muted border-border text-secondary-foreground"
    },
    size: {
      sm: "px-3 py-2 text-xs",
      md: "px-4 py-3 text-sm",
      lg: "px-5 py-4 text-base"
    }
  },
  defaultVariants: {
    variant: "info",
    size: "md"
  }
}), O = _("shrink-0 mt-0.5", {
  variants: {
    variant: {
      info: "text-primary",
      success: "text-success",
      warning: "text-warning",
      error: "text-destructive",
      neutral: "text-quaternary-foreground"
    },
    size: {
      sm: "size-4",
      md: "size-5",
      lg: "size-6"
    }
  },
  defaultVariants: {
    variant: "info",
    size: "md"
  }
}), C = {
  info: h,
  success: k,
  warning: S,
  error: V,
  neutral: h
};
function j({ children: e, title: t, variant: s = "info", size: i = "md", dismissible: o = !1, onDismiss: m, icon: d, hideIcon: p = !1, actions: c, className: u }) {
  const [f, w] = n.useState(!0), z = () => {
    w(!1), m?.();
  }, E = C[s || "info"];
  return /* @__PURE__ */ (0, r.jsx)(x, { children: f && /* @__PURE__ */ (0, r.jsxs)(b.div, {
    "data-slot": "ai-system-message",
    role: "status",
    "aria-live": "polite",
    initial: {
      opacity: 0,
      y: -10
    },
    animate: {
      opacity: 1,
      y: 0
    },
    exit: {
      opacity: 0,
      y: -10,
      height: 0,
      marginBottom: 0
    },
    transition: {
      duration: 0.2,
      ease: [
        0.4,
        0,
        0.2,
        1
      ]
    },
    className: l(D({
      variant: s,
      size: i
    }), "motion-reduce:transition-none", u),
    children: [
      !p && /* @__PURE__ */ (0, r.jsx)("div", {
        className: O({
          variant: s,
          size: i
        }),
        "aria-hidden": "true",
        children: d || /* @__PURE__ */ (0, r.jsx)(E, { className: "size-full" })
      }),
      /* @__PURE__ */ (0, r.jsxs)("div", {
        className: "flex-1 min-w-0",
        children: [
          t && /* @__PURE__ */ (0, r.jsx)("p", {
            className: "font-medium mb-0.5",
            children: t
          }),
          /* @__PURE__ */ (0, r.jsx)("div", {
            className: l(!t && "leading-snug"),
            children: e
          }),
          c && /* @__PURE__ */ (0, r.jsx)("div", {
            className: "flex items-center gap-2 mt-2",
            children: c
          })
        ]
      }),
      o && /* @__PURE__ */ (0, r.jsx)(T, {
        appearance: "ghost",
        variant: "secondary",
        size: "sm",
        onClick: z,
        "aria-label": "Dismiss message",
        className: "size-6 p-0 shrink-0 -mt-0.5 -me-1 hover:bg-fg-primary/5",
        children: /* @__PURE__ */ (0, r.jsx)(y, { className: "size-4" })
      })
    ]
  }) });
}
j.displayName = "AISystemMessage";
function P({ children: e, variant: t = "info", dismissible: s = !1, onDismiss: i, icon: o, action: m, className: d }) {
  const [p, c] = n.useState(!0), u = () => {
    c(!1), i?.();
  }, f = C[t || "info"];
  return /* @__PURE__ */ (0, r.jsx)(x, { children: p && /* @__PURE__ */ (0, r.jsxs)(b.div, {
    "data-slot": "ai-system-message-banner",
    role: "status",
    "aria-live": "polite",
    initial: {
      opacity: 0,
      height: 0
    },
    animate: {
      opacity: 1,
      height: "auto"
    },
    exit: {
      opacity: 0,
      height: 0
    },
    transition: {
      duration: 0.2,
      ease: [
        0.4,
        0,
        0.2,
        1
      ]
    },
    className: l("w-full px-4 py-2 flex items-center justify-center gap-3 motion-reduce:transition-none", t === "info" && "bg-primary/10 text-primary", t === "success" && "bg-success/10 text-success", t === "warning" && "bg-warning/10 text-warning", t === "error" && "bg-destructive/10 text-destructive", t === "neutral" && "bg-muted text-secondary-foreground", d),
    children: [/* @__PURE__ */ (0, r.jsxs)("div", {
      className: "flex items-center gap-2 flex-1 justify-center",
      children: [
        o || /* @__PURE__ */ (0, r.jsx)(f, {
          "aria-hidden": "true",
          className: l("size-4 shrink-0", t === "info" && "text-primary", t === "success" && "text-success", t === "warning" && "text-warning", t === "error" && "text-destructive", t === "neutral" && "text-quaternary-foreground")
        }),
        /* @__PURE__ */ (0, r.jsx)("span", {
          className: "text-sm",
          children: e
        }),
        m
      ]
    }), s && /* @__PURE__ */ (0, r.jsx)("button", {
      type: "button",
      onClick: u,
      "aria-label": "Dismiss banner",
      className: "p-1 rounded hover:bg-fg-primary/5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
      children: /* @__PURE__ */ (0, r.jsx)(y, { className: "size-4" })
    })]
  }) });
}
P.displayName = "AISystemMessageBanner";
var q = I();
function B(e) {
  return { onDismiss: (t) => {
    e.dispatchEvent(new CustomEvent("dismiss", {
      detail: t,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function L(e) {
  const { _hostElement: t, ...s } = e, i = n.useMemo(() => t ? B(t) : {}, [t]);
  return n.createElement(j, {
    ...s,
    ...i
  });
}
var a = {
  variant: "string",
  size: "string",
  title: "string",
  dismissible: "boolean",
  icon: "json",
  hideIcon: "boolean",
  actions: "json",
  className: "string"
};
function g(e, t) {
  if (e !== null)
    switch (t) {
      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 N = 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 t = document.createElement("div");
    for (t.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(t), this._root = (0, q.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, s) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(a).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const s = a[e] || "string";
    this._props[e] = this._parseValue(t, s), this._render();
  }
  _parseValue(e, t) {
    if (t === "boolean" && typeof e == "boolean" || t === "number" && typeof e == "number" || t === "string" && typeof e == "string") return e;
    if (typeof e == "string") switch (t) {
      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 t = e.replace(/([A-Z])/g, "-$1").toLowerCase(), s = a[e] || "string";
    return g(this.getAttribute(t), s);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [s, i] of Object.entries(a)) if (s in this._props) e[s] = this._props[s];
    else {
      const o = s.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[s] = g(this.getAttribute(o), i);
    }
    const t = n.createElement(L, {
      ...e,
      _hostElement: this
    }, n.createElement("span", {
      ref: (s) => {
        s && this._childrenContainer && s.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(a)) Object.defineProperty(N.prototype, e, {
  get() {
    return this._getProp(e);
  },
  set(t) {
    this._setProp(e, t);
  },
  enumerable: !0,
  configurable: !0
});
typeof customElements < "u" && !customElements.get("hf-ai-system-message") && customElements.define("hf-ai-system-message", N);
export {
  N as AISystemMessageWC,
  N as default
};

//# sourceMappingURL=hf-ai-system-message.js.map