import { o as P } from "./rolldown-runtime.js";
import { i as R, n as B, t as S } from "./vendor/react.js";
import { t as L } from "./circle-alert.js";
import { t as M } from "./circle-check-big.js";
import { t as $ } from "./info.js";
import { t as h } from "./triangle-alert.js";
import { t as q } from "./x.js";
import { t as H } from "./Button.js";
import { t as I } from "./dist.js";
import { t as o } from "./utils.js";
var n = /* @__PURE__ */ P(R(), 1), s = S(), W = I("relative flex gap-3 rounded-lg px-4 py-3 text-sm motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-1 [&>svg]:shrink-0 [&>svg]:size-4 [&>svg]:mt-0.5 [&>svg]:motion-safe:animate-in [&>svg]:motion-safe:fade-in-0 [&>svg]:motion-safe:zoom-in-75 [&>svg]:motion-safe:duration-300 [&>svg]:motion-safe:delay-75", {
  variants: {
    appearance: {
      outline: "bg-card border",
      solid: "",
      soft: ""
    },
    variant: {
      default: "",
      info: "",
      success: "",
      warning: "",
      destructive: ""
    }
  },
  compoundVariants: [
    {
      appearance: "outline",
      variant: "default",
      className: "border-border text-card-foreground [&>svg]:text-muted-foreground"
    },
    {
      appearance: "outline",
      variant: "info",
      className: "border-info text-info [&>svg]:text-info"
    },
    {
      appearance: "outline",
      variant: "success",
      className: "border-success text-success [&>svg]:text-success"
    },
    {
      appearance: "outline",
      variant: "warning",
      className: "border-warning text-warning [&>svg]:text-warning"
    },
    {
      appearance: "outline",
      variant: "destructive",
      className: "border-destructive text-destructive [&>svg]:text-destructive"
    },
    {
      appearance: "solid",
      variant: "default",
      className: "bg-primary text-primary-foreground [&>svg]:text-primary-foreground"
    },
    {
      appearance: "solid",
      variant: "info",
      className: "bg-info text-info-foreground [&>svg]:text-info-foreground"
    },
    {
      appearance: "solid",
      variant: "success",
      className: "bg-success text-success-foreground [&>svg]:text-success-foreground"
    },
    {
      appearance: "solid",
      variant: "warning",
      className: "bg-warning text-warning-foreground [&>svg]:text-warning-foreground"
    },
    {
      appearance: "solid",
      variant: "destructive",
      className: "bg-destructive text-destructive-foreground [&>svg]:text-destructive-foreground"
    },
    {
      appearance: "soft",
      variant: "default",
      className: "bg-primary/10 text-card-foreground [&>svg]:text-primary dark:bg-primary/20"
    },
    {
      appearance: "soft",
      variant: "info",
      className: "bg-info/10 text-info [&>svg]:text-info dark:bg-info/20"
    },
    {
      appearance: "soft",
      variant: "success",
      className: "bg-success/10 text-success [&>svg]:text-success dark:bg-success/20"
    },
    {
      appearance: "soft",
      variant: "warning",
      className: "bg-warning/10 text-warning [&>svg]:text-warning dark:bg-warning/20"
    },
    {
      appearance: "soft",
      variant: "destructive",
      className: "bg-destructive/10 text-destructive [&>svg]:text-destructive dark:bg-destructive/20"
    }
  ],
  defaultVariants: {
    appearance: "outline",
    variant: "default"
  }
}), Z = {
  default: /* @__PURE__ */ (0, s.jsx)(L, {}),
  info: /* @__PURE__ */ (0, s.jsx)($, {}),
  success: /* @__PURE__ */ (0, s.jsx)(M, {}),
  warning: /* @__PURE__ */ (0, s.jsx)(h, {}),
  destructive: /* @__PURE__ */ (0, s.jsx)(h, {})
}, J = {
  default: "secondary",
  info: "info",
  success: "success",
  warning: "warning",
  destructive: "destructive"
}, X = {
  default: "primary",
  info: "info",
  success: "success",
  warning: "warning",
  destructive: "destructive"
}, b = {
  default: "text-primary",
  info: "text-info",
  success: "text-success",
  warning: "text-warning",
  destructive: "text-destructive"
}, _ = n.forwardRef(({ className: e, appearance: t = "outline", variant: r = "default", title: a, description: l, icon: g, closable: C = !1, onClose: u, action: d, children: j, dismissDuration: p = 200, ...k }, A) => {
  const [f, E] = n.useState(!1), m = n.useRef(null), i = r ?? "default";
  n.useImperativeHandle(A, () => m.current);
  const T = g !== !1 ? g || Z[i] : null, z = n.useCallback(() => {
    if (p <= 0) {
      u?.();
      return;
    }
    if (m.current?.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1) {
      u?.();
      return;
    }
    E(!0);
  }, [p, u]), V = () => t === "solid" ? {
    appearance: "outline",
    variant: "secondary",
    className: o("bg-background/90 border-background/20 hover:bg-background", b[i])
  } : t === "soft" ? {
    appearance: "solid",
    variant: X[i]
  } : {
    appearance: "outline",
    variant: J[i]
  }, D = i === "destructive" || i === "warning" ? "alert" : "status", O = () => t === "solid" ? "text-current/80 hover:text-current hover:bg-current/10" : t === "outline" || i === "default" ? "text-muted-foreground hover:text-foreground hover:bg-muted" : o("hover:bg-current/10", b[i]);
  return /* @__PURE__ */ (0, s.jsxs)("div", {
    ref: m,
    role: D,
    "data-slot": "alert",
    "data-dismissing": f || void 0,
    className: o(W({
      appearance: t,
      variant: r
    }), f && "motion-safe:animate-out motion-safe:fade-out-0 motion-safe:slide-out-to-right-2", e),
    style: f ? { animationDuration: `${p}ms` } : void 0,
    onAnimationEnd: (v) => {
      f && v.target === v.currentTarget && u?.();
    },
    ...k,
    children: [
      T,
      /* @__PURE__ */ (0, s.jsxs)("div", {
        className: "flex flex-1 flex-col gap-0.5 min-w-0",
        children: [
          a && /* @__PURE__ */ (0, s.jsx)(y, { children: a }),
          l && /* @__PURE__ */ (0, s.jsx)(w, { children: l }),
          j
        ]
      }),
      d && /* @__PURE__ */ (0, s.jsx)(H, {
        size: "xs",
        shape: "rounded",
        onClick: d.onClick,
        ...V(),
        ...d.props,
        children: d.label
      }),
      C && /* @__PURE__ */ (0, s.jsx)("button", {
        type: "button",
        onClick: z,
        className: o("relative shrink-0 size-6 inline-flex items-center justify-center rounded transition-all duration-200 ease-smooth motion-reduce:transition-none", 'after:absolute after:inset-[-10px] after:content-[""]', "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none", "active:scale-90 motion-reduce:active:scale-100", O()),
        "aria-label": "Dismiss alert",
        children: /* @__PURE__ */ (0, s.jsx)(q, { className: "size-3.5" })
      })
    ]
  });
});
_.displayName = "Alert";
var y = n.forwardRef(({ className: e, children: t, ...r }, a) => /* @__PURE__ */ (0, s.jsx)("h5", {
  ref: a,
  "data-slot": "alert-title",
  className: o("font-medium leading-5", e),
  ...r,
  children: t
}));
y.displayName = "AlertTitle";
var w = n.forwardRef(({ className: e, children: t, ...r }, a) => /* @__PURE__ */ (0, s.jsx)("p", {
  ref: a,
  "data-slot": "alert-description",
  className: o("text-sm leading-5 opacity-80", e),
  ...r,
  children: t
}));
w.displayName = "AlertDescription";
var F = B();
function G(e) {
  return { onClose: (t) => {
    e.dispatchEvent(new CustomEvent("close", {
      detail: t,
      bubbles: !0,
      composed: !0
    }));
  } };
}
function K(e) {
  const { _hostElement: t, ...r } = e, a = n.useMemo(() => t ? G(t) : {}, [t]);
  return n.createElement(_, {
    ...r,
    ...a
  });
}
var c = {
  variant: "string",
  size: "string",
  title: "json",
  description: "json",
  icon: "json",
  closable: "boolean",
  action: "json",
  dismissDuration: "number"
};
function x(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 r of Array.from(this.childNodes))
      r.nodeType === Node.TEXT_NODE && !r.textContent?.trim() || e.push(r);
    const t = document.createElement("div");
    for (t.style.display = "contents", this._childrenContainer = document.createElement("div"), this._childrenContainer.style.display = "contents", e.forEach((r) => this._childrenContainer.appendChild(r)); this.firstChild; ) this.removeChild(this.firstChild);
    this.appendChild(t), this._root = (0, F.createRoot)(t), this._render();
  }
  disconnectedCallback() {
    this._root?.unmount(), this._root = null;
  }
  attributeChangedCallback(e, t, r) {
    this._render();
  }
  static get observedAttributes() {
    return Object.keys(c).map((e) => e.replace(/([A-Z])/g, "-$1").toLowerCase());
  }
  _setProp(e, t) {
    const r = c[e] || "string";
    this._props[e] = this._parseValue(t, r), 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(), r = c[e] || "string";
    return x(this.getAttribute(t), r);
  }
  _render() {
    if (!this._root || !this._childrenContainer) return;
    const e = {};
    for (const [r, a] of Object.entries(c)) if (r in this._props) e[r] = this._props[r];
    else {
      const l = r.replace(/([A-Z])/g, "-$1").toLowerCase();
      e[r] = x(this.getAttribute(l), a);
    }
    const t = n.createElement(K, {
      ...e,
      _hostElement: this
    }, n.createElement("span", {
      ref: (r) => {
        r && this._childrenContainer && r.replaceWith(this._childrenContainer);
      },
      style: { display: "contents" }
    }));
    this._root.render(t);
  }
};
for (const e of Object.keys(c)) 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-alert") && customElements.define("hf-alert", N);
export {
  N as AlertWC,
  N as default
};

//# sourceMappingURL=hf-alert.js.map