framepexls-ui-lib 0.2.9 → 0.2.10

package/dist/TimePopover.js

@@ -37,6 +37,8 @@ module.exports = __toCommonJS(TimePopover_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 var import_Button = __toESM(require("./Button"));
 var import_Input = __toESM(require("./Input"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
@@ -126,8 +128,13 @@ function TimePopover({
     return md === "AM" ? h12 : h12 + 12;
   };
   const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+    import_framer_motion.motion.div,
     {
+      variants: import_animations.popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: import_animations.menuTransition,
       ref: popRef,
       role: "dialog",
       "aria-label": "Selector de hora",
@@ -350,48 +357,61 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   }
   const selFrom = (_a = value == null ? void 0 : value.from) != null ? _a : null;
   const selTo = (_b = value == null ? void 0 : value.to) != null ? _b : null;
-  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month - 1, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month + 1, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
-      const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
-          onClick: () => onPick(w.from, w.to),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-              "Semana ",
-              idx + 1
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
-          ]
-        },
-        `${w.from.toISOString()}-${w.to.toISOString()}`
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: import_animations.popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: import_animations.menuTransition,
+      className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
+          const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
+              onClick: () => onPick(w.from, w.to),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  "Semana ",
+                  idx + 1
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
+              ]
+            },
+            `${w.from.toISOString()}-${w.to.toISOString()}`
+          );
+        }) })
+      ]
+    }
+  );
   return (0, import_react_dom.createPortal)(body, document.body);
 }
 function sameDay(a, b) {
@@ -456,45 +476,58 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       selMonthIdx = ((_a = parts[1]) != null ? _a : 1) - 1;
     }
   }
-  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: year }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
-      const isSel = selYear === year && selMonthIdx === idx;
-      const base = "rounded-xl border px-2 py-2 text-sm ";
-      const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
-      const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_Button.default,
-        {
-          unstyled: true,
-          className: `${base} ${light} ${dark}`,
-          onClick: () => onPick(new Date(year, idx, 1)),
-          children: m
-        },
-        idx
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: import_animations.popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: import_animations.menuTransition,
+      className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold", children: year }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
+          const isSel = selYear === year && selMonthIdx === idx;
+          const base = "rounded-xl border px-2 py-2 text-sm ";
+          const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
+          const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              className: `${base} ${light} ${dark}`,
+              onClick: () => onPick(new Date(year, idx, 1)),
+              children: m
+            },
+            idx
+          );
+        }) })
+      ]
+    }
+  );
   return (0, import_react_dom.createPortal)(body, document.body);
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/TimePopover.mjs

@@ -2,6 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { createPortal } from "react-dom";
+import { motion } from "framer-motion";
+import { popOver, menuTransition } from "./animations";
 import Button from "./Button";
 import Input from "./Input";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
@@ -91,8 +93,13 @@ function TimePopover({
     return md === "AM" ? h12 : h12 + 12;
   };
   const body = /* @__PURE__ */ jsxs(
-    "div",
+    motion.div,
     {
+      variants: popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: menuTransition,
       ref: popRef,
       role: "dialog",
       "aria-label": "Selector de hora",
@@ -315,48 +322,61 @@ function WeekPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
   }
   const selFrom = (_a = value == null ? void 0 : value.from) != null ? _a : null;
   const selTo = (_b = value == null ? void 0 : value.to) != null ? _b : null;
-  const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month - 1, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year, month + 1, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
-      const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
-      return /* @__PURE__ */ jsxs(
-        Button,
-        {
-          unstyled: true,
-          className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
-          onClick: () => onPick(w.from, w.to),
-          children: [
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Semana ",
-              idx + 1
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
-          ]
-        },
-        `${w.from.toISOString()}-${w.to.toISOString()}`
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: menuTransition,
+      className: "w-[340px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month - 1, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: cursor.toLocaleDateString("es-MX", { month: "long", year: "numeric" }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year, month + 1, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-2", children: weeks.map((w, idx) => {
+          const isSel = selFrom && selTo && sameDay(selFrom, w.from) && sameDay(selTo, w.to);
+          return /* @__PURE__ */ jsxs(
+            Button,
+            {
+              unstyled: true,
+              className: `flex items-center justify-between rounded-xl border px-3 py-2 text-sm ${isSel ? "bg-slate-900 text-white border-slate-900 dark:bg-white dark:text-slate-900 dark:border-white" : "border-slate-200 hover:bg-slate-100 dark:border-white/10 dark:hover:bg-white/10"}`,
+              onClick: () => onPick(w.from, w.to),
+              children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Semana ",
+                  idx + 1
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: formatWeekLabel(w.from, w.to) })
+              ]
+            },
+            `${w.from.toISOString()}-${w.to.toISOString()}`
+          );
+        }) })
+      ]
+    }
+  );
   return createPortal(body, document.body);
 }
 function sameDay(a, b) {
@@ -421,45 +441,58 @@ function MonthPopover({ anchorEl, cursor, value, onCursorChange, onPick, onClose
       selMonthIdx = ((_a = parts[1]) != null ? _a : 1) - 1;
     }
   }
-  const body = /* @__PURE__ */ jsxs("div", { ref: popRef, style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 }, className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
-          children: "\u25C0"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: year }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
-          onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
-          children: "\u25B6"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
-      const isSel = selYear === year && selMonthIdx === idx;
-      const base = "rounded-xl border px-2 py-2 text-sm ";
-      const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
-      const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          unstyled: true,
-          className: `${base} ${light} ${dark}`,
-          onClick: () => onPick(new Date(year, idx, 1)),
-          children: m
-        },
-        idx
-      );
-    }) })
-  ] });
+  const body = /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: popRef,
+      style: { position: "fixed", top: pos.top, left: pos.left, zIndex: 1e5 },
+      variants: popOver,
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: menuTransition,
+      className: "w-[300px] rounded-2xl border border-slate-200 bg-white p-3 shadow-xl dark:border-white/10 dark:bg-[var(--fx-surface)]",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year - 1, 0, 1)),
+              children: "\u25C0"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: year }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: "rounded-lg border border-slate-200 px-2 py-1 text-sm hover:bg-slate-50 dark:border-white/10 dark:hover:bg-white/10",
+              onClick: () => onCursorChange(new Date(year + 1, 0, 1)),
+              children: "\u25B6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: months.map((m, idx) => {
+          const isSel = selYear === year && selMonthIdx === idx;
+          const base = "rounded-xl border px-2 py-2 text-sm ";
+          const light = isSel ? "bg-slate-900 text-white border-slate-900" : "border-slate-200 hover:bg-slate-100";
+          const dark = isSel ? "dark:bg-white dark:text-slate-900 dark:border-white" : "dark:border-white/10 dark:hover:bg-white/10";
+          return /* @__PURE__ */ jsx(
+            Button,
+            {
+              unstyled: true,
+              className: `${base} ${light} ${dark}`,
+              onClick: () => onPick(new Date(year, idx, 1)),
+              children: m
+            },
+            idx
+          );
+        }) })
+      ]
+    }
+  );
   return createPortal(body, document.body);
 }
 export {

package/dist/Toast.js

@@ -90,10 +90,6 @@ const typeAccent = {
     progress: "bg-sky-500/60"
   }
 };
-function useIsomorphicLayoutEffect(effect, deps) {
-  const useIso = typeof window !== "undefined" ? import_react.default.useLayoutEffect : import_react.default.useEffect;
-  return useIso(effect, deps);
-}
 function ToastView({ item, onClose, placement }) {
   var _a;
   const [hovered, setHovered] = import_react.default.useState(false);

package/dist/Toast.mjs

@@ -55,10 +55,6 @@ const typeAccent = {
     progress: "bg-sky-500/60"
   }
 };
-function useIsomorphicLayoutEffect(effect, deps) {
-  const useIso = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-  return useIso(effect, deps);
-}
 function ToastView({ item, onClose, placement }) {
   var _a;
   const [hovered, setHovered] = React.useState(false);

package/dist/Tooltip.js

@@ -35,6 +35,8 @@ module.exports = __toCommonJS(Tooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
+var import_framer_motion = require("framer-motion");
+var import_animations = require("./animations");
 function Tooltip({ content, placement = "top", delay = 80, offset = 8, className = "", children }) {
   const [open, setOpen] = import_react.default.useState(false);
   const [pos, setPos] = import_react.default.useState(null);
@@ -110,26 +112,33 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
     },
     "aria-describedby": open ? id : void 0
   };
-  const body = open && pos && typeof document !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      id,
-      role: "tooltip",
-      className: [
-        "pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
-        "dark:border-white/10 dark:bg-white/10",
-        className != null ? className : ""
-      ].join(" "),
-      style: {
-        top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
-        left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
-        transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
-      },
-      children: content
-    }
-  ) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     import_react.default.cloneElement(children, triggerProps),
-    body ? (0, import_react_dom.createPortal)(body, document.body) : null
+    typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open && pos ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_framer_motion.motion.div,
+        {
+          id,
+          role: "tooltip",
+          variants: import_animations.tooltipVariant,
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          transition: import_animations.menuTransition,
+          className: [
+            "pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
+            "dark:border-white/10 dark:bg-white/10",
+            className != null ? className : ""
+          ].join(" "),
+          style: {
+            top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
+            left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
+            transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
+          },
+          children: content
+        }
+      ) : null }),
+      document.body
+    ) : null
   ] });
 }

package/dist/Tooltip.mjs

@@ -2,6 +2,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import { tooltipVariant, menuTransition } from "./animations";
 function Tooltip({ content, placement = "top", delay = 80, offset = 8, className = "", children }) {
   const [open, setOpen] = React.useState(false);
   const [pos, setPos] = React.useState(null);
@@ -77,27 +79,34 @@ function Tooltip({ content, placement = "top", delay = 80, offset = 8, className
     },
     "aria-describedby": open ? id : void 0
   };
-  const body = open && pos && typeof document !== "undefined" ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      id,
-      role: "tooltip",
-      className: [
-        "pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
-        "dark:border-white/10 dark:bg-white/10",
-        className != null ? className : ""
-      ].join(" "),
-      style: {
-        top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
-        left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
-        transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
-      },
-      children: content
-    }
-  ) : null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     React.cloneElement(children, triggerProps),
-    body ? createPortal(body, document.body) : null
+    typeof document !== "undefined" ? createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: open && pos ? /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          id,
+          role: "tooltip",
+          variants: tooltipVariant,
+          initial: "initial",
+          animate: "animate",
+          exit: "exit",
+          transition: menuTransition,
+          className: [
+            "pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
+            "dark:border-white/10 dark:bg-white/10",
+            className != null ? className : ""
+          ].join(" "),
+          style: {
+            top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
+            left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
+            transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
+          },
+          children: content
+        }
+      ) : null }),
+      document.body
+    ) : null
   ] });
 }
 export {