lizaui 9.0.16 → 9.0.18

package/dist/chunks/{tooltip-DgenLCkC.js → tooltip-3bRhDmbE.js}

@@ -5,6 +5,7 @@ import { i as isShadowRoot, d as isHTMLElement, e as isElement, g as getWindow,
 import * as ReactDOM from "react-dom";
 import { u as useFloating$1, o as offset, f as flip, s as shift, a as arrow } from "./floating-ui.react-dom-BUZLdP4-.js";
 import { twMerge } from "tailwind-merge";
+import { AnimatePresence, motion } from "framer-motion";
 import clsx from "clsx";
 var candidateSelectors = ["input:not([inert])", "select:not([inert])", "textarea:not([inert])", "a[href]:not([inert])", "button:not([inert])", "[tabindex]:not(slot):not([inert])", "audio[controls]:not([inert])", "video[controls]:not([inert])", '[contenteditable]:not([contenteditable="false"]):not([inert])', "details>summary:first-of-type:not([inert])", "details:not([inert])"];
 var candidateSelector = /* @__PURE__ */ candidateSelectors.join(",");
@@ -1896,26 +1897,55 @@ const Tooltip = ({ children, content, className, placement = "top", showArrow =
   const role = useRole(context);
   const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
   const mergedClass = twMerge(
-    clsx("bg-content1 font-normal text-sm rounded-md filter-(--filter-drop-shadow-small) flex justify-center items-center z-99 px-2.5 py-1 outline-none box-border subpixel-antialiased normal-case", className)
+    clsx(
+      "bg-content1 font-normal text-sm rounded-md filter-(--filter-drop-shadow-small) flex justify-center items-center z-99 px-2.5 py-1 outline-none box-border subpixel-antialiased normal-case",
+      className
+    )
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { ref: refs.setReference, ...getReferenceProps(), children }),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: refs.setFloating,
-        style: floatingStyles,
+        style: {
+          ...floatingStyles,
+          zIndex: 99
+          // Asegura que el tooltip esté por encima de otros elementos
+        },
         ...getFloatingProps(),
-        className: mergedClass,
-        children: [
-          content,
-          showArrow && /* @__PURE__ */ jsx(FloatingArrow, { ref: arrowRef, context, className: "text-content1", fill: "currentColor" })
-        ]
+        children: (() => {
+          const delta = 8;
+          const isVertical = placement === "top" || placement === "bottom";
+          const initialOffset = isVertical ? { y: placement === "top" ? delta : -delta } : { x: placement === "left" ? delta : -delta };
+          const originStyle = placement === "top" ? { transformOrigin: "bottom center" } : placement === "bottom" ? { transformOrigin: "top center" } : placement === "left" ? { transformOrigin: "center right" } : { transformOrigin: "center left" };
+          return /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.96, ...initialOffset },
+              animate: { opacity: 1, scale: 1, x: 0, y: 0 },
+              exit: { opacity: 0, scale: 0.98, ...initialOffset },
+              transition: {
+                // Entrada elástica y salida rápida
+                type: "spring",
+                stiffness: 550,
+                damping: 28,
+                mass: 0.6
+              },
+              style: originStyle,
+              className: mergedClass,
+              children: [
+                content,
+                showArrow && /* @__PURE__ */ jsx(FloatingArrow, { ref: arrowRef, context, className: "text-content1", fill: "currentColor" })
+              ]
+            }
+          );
+        })()
       }
-    ) })
+    ) }) })
   ] });
 };
 export {
   Tooltip as T
 };
-//# sourceMappingURL=tooltip-DgenLCkC.js.map
+//# sourceMappingURL=tooltip-3bRhDmbE.js.map