@konstructio/ui/dist/components/Alert/Alert.js

A set of reusable and customizable React components built for konstruct.io

import { jsx as l, jsxs as i } from "react/jsx-runtime";
import { useRef as b, useState as C, useMemo as V, isValidElement as v, useCallback as k, useEffect as w } from "react";
import { V as x } from "../../index--EmNlyHx.js";
import { cn as m } from "../../utils/index.js";
import { closeButtonVariants as y, alertVariants as A } from "./Alert.variants.js";
import { X as E } from "../../x-BPcqkRZd.js";
const B = ({
  theme: c,
  type: o,
  content: t,
  isVisible: n = !0,
  showCloseButton: d = !1
}) => {
  const r = b(null), [u, p] = C(n), f = V(
    () => v(t) ? t : /* @__PURE__ */ l("p", { children: t }),
    [t]
  ), h = k(() => {
    const e = r.current;
    e && e.setAttribute("data-state", "hidden");
  }, []);
  return w(() => {
    var s;
    const e = new AbortController();
    return (s = r.current) == null || s.addEventListener(
      "animationend",
      () => {
        var a;
        (a = r.current) == null || a.style.setProperty("display", "none"), p(!1);
      },
      { signal: e.signal }
    ), () => e.abort();
  }, []), u ? /* @__PURE__ */ i(
    "div",
    {
      ref: r,
      className: m(A({ type: o, isVisible: n })),
      "data-state": n ? "visible" : "hidden",
      "data-theme": c,
      role: "alert",
      "aria-live": "polite",
      children: [
        f,
        d ? /* @__PURE__ */ i("button", { role: "button", onClick: h, children: [
          /* @__PURE__ */ l(E, { className: m(y({ type: o })) }),
          /* @__PURE__ */ l(x, { children: "Dismiss alert" })
        ] }) : null
      ]
    }
  ) : null;
};
export {
  B as Alert
};