@frontify/fondue
Version:
Design system of Frontify
59 lines (58 loc) • 2.08 kB
JavaScript
import { jsx as e, jsxs as w } from "react/jsx-runtime";
import { MIGHTY_INSET_BORDER as p, INSET_BORDER as T } from "../../utilities/borderStyle.es.js";
import { merge as o } from "../../utilities/merge.es.js";
import { toastStylesBackgroundColorsMap as S, ToastAnimationDirection as r } from "./types.es.js";
import { motion as y } from "../../node_modules/.pnpm/framer-motion@12.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
import { AnimatePresence as A } from "../../node_modules/.pnpm/framer-motion@12.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
const f = "tw-min-h-[2rem] tw-rounded-lg tw-shadow-mid tw-z-[120000] before:!tw-rounded-lg", g = o([T, "tw-bg-base"]), h = o([p, "tw-bg-box-neutral-mighty"]), a = (t) => t === r.BottomToTop ? "150%" : "-150%", N = (t) => o([f, t === "dark" ? h : g]), 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__ */ e(A, { children: t && /* @__PURE__ */ e(
y.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__ */ e(
"div",
{
className: o([
"tw-flex tw-items-center tw-justify-center tw-min-h-[2rem] tw-min-w-[3rem] tw-rounded-l-lg tw-text-white",
S[s]
]),
children: n
}
),
m
] })
}
) });
u.displayName = "FondueToast";
export {
u as Toast
};
//# sourceMappingURL=Toast.es.js.map