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