@arkyn/components 3.0.1-beta.185 → 3.0.1-beta.187

package/dist/modules/components/modal/modalContainer/index.js

@@ -1,50 +1,36 @@
 import { useScrollLock as e } from "../../../hooks/useScrollLock.js";
 import { ModalProvider as t } from "../modalContext.js";
 /* empty css       */
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { AnimatePresence as i, motion as a } from "framer-motion";
+import { useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/modal/modalContainer/index.tsx
 function o(o) {
-	let { isVisible: s, makeInvisible: c, children: l, className: u = "", ...d } = o;
-	e(s);
-	let f = `arkynModalContainer ${s ? "visibleTrue" : "visibleFalse"} ${u}`;
-	return /* @__PURE__ */ n(t, {
-		makeInvisible: c,
-		children: /* @__PURE__ */ n(i, { children: s && /* @__PURE__ */ r("aside", {
-			className: f.trim(),
+	let { isVisible: s, makeInvisible: c, children: l, className: u = "", ...d } = o, [f, p] = r(s), [m, h] = r(!1);
+	n(() => {
+		s ? (p(!0), h(!1)) : f && h(!0);
+	}, [s, f]), e(s);
+	function g(e) {
+		e.target === e.currentTarget && m && (h(!1), p(!1), c());
+	}
+	return f ? /* @__PURE__ */ i(t, {
+		makeInvisible: () => h(!0),
+		children: /* @__PURE__ */ a("aside", {
+			className: [
+				"arkynModalContainer",
+				m ? "exiting" : "",
+				u
+			].filter(Boolean).join(" ").trim(),
 			...d,
-			children: [/* @__PURE__ */ n(a.div, {
+			children: [/* @__PURE__ */ i("div", {
 				className: "arkynModalContainerOverlay",
-				transition: {
-					duration: .15,
-					ease: "easeOut"
-				},
-				initial: { opacity: 0 },
-				animate: { opacity: 1 },
-				exit: { opacity: 0 },
-				onClick: c
-			}), /* @__PURE__ */ n(a.div, {
+				onClick: () => h(!0),
+				onAnimationEnd: g
+			}), /* @__PURE__ */ i("div", {
 				className: "arkynModalContainerContent",
-				transition: {
-					duration: .15,
-					ease: "easeOut"
-				},
-				initial: {
-					opacity: 0,
-					scale: .75
-				},
-				animate: {
-					opacity: 1,
-					scale: 1
-				},
-				exit: {
-					opacity: 0,
-					scale: 0
-				},
 				children: l
 			})]
-		}) })
-	});
+		})
+	}) : null;
 }
 //#endregion
 export { o as ModalContainer };