@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
112 lines (111 loc) • 3.15 kB
JavaScript
import { jsxs as t, jsx as e } from "react/jsx-runtime";
import { R, A as j, P as T, O as w, C as K, T as P, D as z, a as B, b as E } from "../../index-CPU02rhe.js";
import { useRef as S, useState as q, useEffect as F } from "react";
import { Button as s } from "../Button/Button.js";
import { cn as n } from "../../utils/index.js";
import { useAlertDialog as G } from "./hooks/useAlertDialog.js";
const H = ({
buttonCancel: {
className: o,
text: i = "Cancel",
...c
} = {},
buttonConfirm: {
className: d,
text: m = "OK",
...f
} = {},
buttonTriggerClassName: p,
buttonTriggerText: u,
description: h,
showCancelButton: x = !0,
theme: a,
title: b,
wrapperClassName: g,
onConfirm: C,
...N
}) => {
const r = S(null), [y, k] = q(null), { isOpen: A, handleCancel: D, handleConfirm: O, handleOpen: v } = G({
onConfirm: C
});
return F(() => {
if (!r.current || a)
return;
const l = r.current.closest("[data-theme]");
l && k(l);
}, []), /* @__PURE__ */ t(R, { open: A, ...N, children: [
/* @__PURE__ */ e(
j,
{
ref: r,
className: p,
text: u,
"data-theme": a,
onOpen: v
}
),
/* @__PURE__ */ t(T, { container: y, children: [
/* @__PURE__ */ e(w, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }),
/* @__PURE__ */ t(
K,
{
"data-theme": a,
className: n(
"bg-white",
"rounded-md",
"fixed",
"top-1/2",
"left-1/2",
"-translate-y-2/4",
"-translate-x-2/4",
"flex",
"flex-col",
"gap-8",
"p-8",
"animate-in",
"fade-in-0",
"zoom-in-85",
"border",
"border-transparent",
"dark:bg-metal-800",
"dark:border-metal-700",
"dark:border-slate-700",
g
),
children: [
/* @__PURE__ */ e(P, { className: "text-base text-slate-700 font-semibold", children: b }),
/* @__PURE__ */ e(z, { className: "text-sm text-slate-800", children: h }),
/* @__PURE__ */ t("div", { className: "flex flex-row gap-5 justify-end", children: [
x && /* @__PURE__ */ e(B, { asChild: !0, children: /* @__PURE__ */ e(
s,
{
type: "button",
variant: "secondary",
className: n(o),
onClick: D,
...c,
children: i
}
) }),
/* @__PURE__ */ e(E, { asChild: !0, children: /* @__PURE__ */ e(
s,
{
type: "button",
variant: "primary",
className: n(d),
onClick: O,
...f,
children: m
}
) })
] })
]
}
)
] })
] });
};
H.displayName = "KonstructAlertDialog";
export {
H as AlertDialog
};