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

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

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