@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
62 lines (61 loc) • 2.27 kB
JavaScript
"use client";
import { t as h } from "../../x-KjMYhcCb.js";
import { n as C } from "../../dist-EV-1XXQr.js";
import { t as n } from "../../utils-COaoD3PI.js";
import { CheckCircleFilledIcon as v } from "../../assets/icons/components/CheckCircleFilled.js";
import { ErrorIcon as I } from "../../assets/icons/components/Error.js";
import { InfoCircleIcon as b } from "../../assets/icons/components/InfoCircle.js";
import { WarningTriangleIcon as g } from "../../assets/icons/components/WarningTriangle.js";
import { alertVariants as N, closeButtonVariants as x, descriptionVariants as V, iconVariants as k, titleVariants as w } from "./Alert.variants.js";
import { useCallback as A, useEffect as E, useRef as j, useState as P } from "react";
import { jsx as t, jsxs as s } from "react/jsx-runtime";
var R = {
success: v,
info: b,
warning: g,
danger: I
}, X = ({ theme: m, type: r, title: l, description: i, isVisible: o = !0, showCloseButton: d = !1 }) => {
const a = j(null), [f, u] = P(o), p = A(() => {
const e = a.current;
e && e.setAttribute("data-state", "hidden");
}, []);
if (E(() => {
const e = new AbortController();
return a.current?.addEventListener("animationend", () => {
a.current?.style.setProperty("display", "none"), u(!1);
}, { signal: e.signal }), () => e.abort();
}, []), !f) return null;
const c = r ? R[r] : null;
return /* @__PURE__ */ s("div", {
ref: a,
className: n(N({
type: r,
isVisible: o
})),
"data-state": o ? "visible" : "hidden",
"data-theme": m,
role: "alert",
"aria-live": "polite",
children: [
c && /* @__PURE__ */ t(c, { className: n(k({ type: r })) }),
/* @__PURE__ */ s("div", {
className: "flex flex-col gap-1 flex-1",
children: [l && /* @__PURE__ */ t("p", {
className: n(w({ type: r })),
children: l
}), i && /* @__PURE__ */ t("div", {
className: n(V({ type: r })),
children: i
})]
}),
d && /* @__PURE__ */ s("button", {
type: "button",
onClick: p,
children: [/* @__PURE__ */ t(h, { className: n(x({ type: r })) }), /* @__PURE__ */ t(C, { children: "Dismiss alert" })]
})
]
});
};
export {
X as Alert
};