@frontify/fondue
Version:
Design system of Frontify
58 lines (57 loc) • 1.75 kB
JavaScript
import { jsx as o, jsxs as w } from "react/jsx-runtime";
import { AnimatePresence as p, motion as T } from "framer-motion";
import { MIGHTY_INSET_BORDER as S, INSET_BORDER as y } from "../../utilities/borderStyle.es.js";
import { merge as e } from "../../utilities/merge.es.js";
import { toastStylesBackgroundColorsMap as A, ToastAnimationDirection as r } from "./types.es.js";
const g = "tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-rounded-lg", f = e([y, "tw-bg-base"]), h = e([S, "tw-bg-box-neutral-mighty"]), a = (t) => t === r.BottomToTop ? "150%" : "-150%", N = (t) => e([g, t === "dark" ? h : f]), u = ({
isOpen: t,
style: s,
icon: n,
animationDirection: i = r.BottomToTop,
children: m,
theme: l = "light",
enableExitAnimation: d = !1,
"data-test-id": c = "toast"
}) => /* @__PURE__ */ o(p, { children: t && /* @__PURE__ */ o(
T.div,
{
className: N(l),
initial: {
opacity: 0,
y: a(i)
},
transition: {
opacity: {
ease: [0, 0, 1, 1]
},
y: {
ease: [0, 0.55, 0.45, 1]
},
delay: 0.3,
duration: 0.2
},
animate: { opacity: 1, y: 0 },
...d ? { exit: { opacity: 0, y: a(i) } } : {},
"data-test-id": c,
"aria-live": "polite",
role: "alert",
children: /* @__PURE__ */ w("div", { className: "tw-flex", children: [
/* @__PURE__ */ o(
"div",
{
className: e([
"tw-flex tw-items-center tw-justify-center tw-min-h-[2rem] tw-min-w-[3rem] tw-rounded-l-lg tw-text-white",
A[s]
]),
children: n
}
),
m
] })
}
) });
u.displayName = "FondueToast";
export {
u as Toast
};
//# sourceMappingURL=Toast.es.js.map