@pelatform/ui 1.5.1 → 1.5.3

package/dist/animation.js

@@ -1,6 +1,9 @@
 "use client";
 'use client';
 
+import {
+  HoverBackground
+} from "./chunk-D373YKDA.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -665,196 +668,9 @@ function GridBackground({
   );
 }
 
-// src/ui/animation/hover-background.tsx
-import * as React4 from "react";
-import { motion as motion6, useMotionValue as useMotionValue3, useSpring as useSpring2 } from "motion/react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function HoverBackground({
-  className,
-  objectCount = 12,
-  children,
-  colors = {},
-  ...props
-}) {
-  const {
-    background = "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900",
-    objects = [
-      "bg-cyan-400/20",
-      "bg-purple-400/20",
-      "bg-fuchsia-400/20",
-      "bg-violet-400/20",
-      "bg-blue-400/20",
-      "bg-indigo-400/20"
-    ],
-    glow = "shadow-cyan-400/50"
-  } = colors;
-  const [isHovered, setIsHovered] = React4.useState(false);
-  const mouseX = useMotionValue3(0);
-  const mouseY = useMotionValue3(0);
-  const springX = useSpring2(mouseX, {
-    stiffness: 300,
-    damping: 30,
-    // Slower return to center when hover ends
-    restSpeed: 0.1,
-    restDelta: 0.1
-  });
-  const springY = useSpring2(mouseY, {
-    stiffness: 300,
-    damping: 30,
-    restSpeed: 0.1,
-    restDelta: 0.1
-  });
-  const animatedObjects = React4.useMemo(
-    () => Array.from({ length: objectCount }, (_, i) => {
-      const shape = Math.random() > 0.5 ? "circle" : "square";
-      return {
-        id: i,
-        x: Math.random() * 90 + 5,
-        // 5-95% to avoid edges
-        y: Math.random() * 90 + 5,
-        size: Math.random() * 60 + 20,
-        // 20-80px
-        color: objects[i % objects.length],
-        delay: Math.random() * 2,
-        shape,
-        floatDirection: Math.random() > 0.5 ? 1 : -1,
-        breathDuration: Math.random() * 3 + 3,
-        // 3-6 seconds
-        parallaxStrength: Math.random() * 0.5 + 0.3,
-        // 0.3-0.8 for more varied parallax depth
-        baseRotation: Math.random() * 360
-        // Random starting rotation offset
-      };
-    }),
-    [objectCount, objects]
-  );
-  const handleMouseMove = (event) => {
-    if (!isHovered) return;
-    const rect = event.currentTarget.getBoundingClientRect();
-    const centerX = rect.width / 2;
-    const centerY = rect.height / 2;
-    const x = (event.clientX - rect.left - centerX) / centerX;
-    const y = (event.clientY - rect.top - centerY) / centerY;
-    mouseX.set(x * 15);
-    mouseY.set(y * 15);
-  };
-  const handleHoverStart = () => {
-    setIsHovered(true);
-  };
-  const handleHoverEnd = () => {
-    setIsHovered(false);
-    mouseX.set(0);
-    mouseY.set(0);
-  };
-  return /* @__PURE__ */ jsxs4(
-    motion6.div,
-    {
-      "data-slot": "hover-background",
-      className: cn("relative size-full overflow-hidden", background, className),
-      onHoverStart: handleHoverStart,
-      onHoverEnd: handleHoverEnd,
-      onMouseMove: handleMouseMove,
-      whileHover: { scale: 1.02 },
-      transition: { duration: 0.3, ease: "easeOut" },
-      animate: {
-        backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"]
-      },
-      style: {
-        backgroundSize: "200% 200%"
-      },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx6(
-          motion6.div,
-          {
-            className: "absolute inset-0 bg-gradient-radial from-white/5 via-transparent to-transparent",
-            animate: {
-              opacity: [0.3, 0.6, 0.3],
-              scale: [1, 1.1, 1]
-            },
-            transition: {
-              duration: 4,
-              repeat: Infinity,
-              ease: "easeInOut"
-            }
-          }
-        ),
-        animatedObjects.map((obj) => /* @__PURE__ */ jsx6(
-          motion6.div,
-          {
-            className: cn(
-              "absolute border border-white/10 backdrop-blur-sm",
-              obj.color,
-              obj.shape === "circle" ? "rounded-full" : "rotate-45 rounded-lg"
-            ),
-            style: {
-              left: `${obj.x}%`,
-              top: `${obj.y}%`,
-              width: obj.size,
-              height: obj.size,
-              // Apply parallax with individual object strength
-              x: springX.get() * obj.parallaxStrength,
-              y: springY.get() * obj.parallaxStrength
-            },
-            initial: {
-              scale: 0.6,
-              opacity: 0.4,
-              rotate: obj.baseRotation
-            },
-            animate: {
-              // Default state animations - breathing with base rotation offset
-              scale: [0.6, 0.8, 0.6],
-              opacity: [0.4, 0.6, 0.4],
-              rotate: obj.shape === "circle" ? [obj.baseRotation, obj.baseRotation + 10, obj.baseRotation] : [obj.baseRotation, obj.baseRotation + 5, obj.baseRotation],
-              y: [0, obj.floatDirection * 15, 0],
-              x: [0, obj.floatDirection * 8, 0]
-            },
-            transition: {
-              duration: obj.breathDuration,
-              delay: obj.delay,
-              ease: "easeInOut",
-              repeat: Infinity,
-              repeatType: "reverse"
-            },
-            whileHover: {
-              scale: 1.5,
-              boxShadow: `0 0 30px ${glow.replace("shadow-", "").replace("/50", "")}`
-            }
-          },
-          obj.id
-        )),
-        isHovered && /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute inset-0", children: Array.from({ length: 20 }).map((_, i) => /* @__PURE__ */ jsx6(
-          motion6.div,
-          {
-            className: "absolute h-1 w-1 rounded-full bg-white/60",
-            style: {
-              left: `${Math.random() * 100}%`,
-              top: `${Math.random() * 100}%`
-            },
-            initial: { opacity: 0, scale: 0 },
-            animate: {
-              opacity: [0, 1, 0],
-              scale: [0, 1, 0],
-              y: [0, -50, -100]
-            },
-            transition: {
-              duration: 3,
-              delay: Math.random() * 2,
-              repeat: Infinity,
-              ease: "easeOut"
-            }
-          },
-          `particle-${i}`
-        )) }),
-        /* @__PURE__ */ jsx6("div", { className: "relative z-10 size-full", children })
-      ]
-    }
-  );
-}
-
 // src/ui/animation/marquee.tsx
-import React5, { useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+import React4, { useRef as useRef2 } from "react";
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
 function Marquee({
   className,
   reverse = false,
@@ -868,7 +684,7 @@ function Marquee({
   ...props
 }) {
   const marqueeRef = useRef2(null);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ...props,
@@ -886,8 +702,8 @@ function Marquee({
       "aria-live": ariaLive,
       role: ariaRole,
       tabIndex: 0,
-      children: React5.useMemo(
-        () => /* @__PURE__ */ jsx7(Fragment, { children: Array.from({ length: repeat }, (_, i) => /* @__PURE__ */ jsx7(
+      children: React4.useMemo(
+        () => /* @__PURE__ */ jsx6(Fragment, { children: Array.from({ length: repeat }, (_, i) => /* @__PURE__ */ jsx6(
           "div",
           {
             className: cn(
@@ -909,9 +725,9 @@ function Marquee({
 }
 
 // src/ui/animation/shimmering-text.tsx
-import { useMemo as useMemo3, useRef as useRef3 } from "react";
-import { motion as motion7, useInView as useInView3 } from "motion/react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { useMemo as useMemo2, useRef as useRef3 } from "react";
+import { motion as motion6, useInView as useInView3 } from "motion/react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function ShimmeringText({
   text,
   duration = 2,
@@ -928,12 +744,12 @@ function ShimmeringText({
 }) {
   const ref = useRef3(null);
   const isInView = useInView3(ref, { once, margin: inViewMargin });
-  const dynamicSpread = useMemo3(() => {
+  const dynamicSpread = useMemo2(() => {
     return text.length * spread;
   }, [text, spread]);
   const shouldAnimate = !startOnView || isInView;
-  return /* @__PURE__ */ jsx8(
-    motion7.span,
+  return /* @__PURE__ */ jsx7(
+    motion6.span,
     {
       ref,
       className: cn(
@@ -977,9 +793,9 @@ function ShimmeringText({
 }
 
 // src/ui/animation/sliding-number.tsx
-import { useEffect as useEffect3, useRef as useRef4, useState as useState5 } from "react";
-import { motion as motion8, useInView as useInView4, useSpring as useSpring3, useTransform as useTransform2 } from "motion/react";
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef4, useState as useState4 } from "react";
+import { motion as motion7, useInView as useInView4, useSpring as useSpring2, useTransform as useTransform2 } from "motion/react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function Digit({
   place,
   value,
@@ -987,14 +803,14 @@ function Digit({
   duration
 }) {
   const valueRoundedToPlace = Math.floor(value / place);
-  const animatedValue = useSpring3(valueRoundedToPlace, {
+  const animatedValue = useSpring2(valueRoundedToPlace, {
     duration: duration * 1e3
     // Convert to milliseconds
   });
   useEffect3(() => {
     animatedValue.set(valueRoundedToPlace);
   }, [animatedValue, valueRoundedToPlace]);
-  return /* @__PURE__ */ jsx9("div", { style: { height: digitHeight }, className: "relative w-[1ch] overflow-hidden tabular-nums", children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx9(MyNumber, { mv: animatedValue, number: i, digitHeight }, i)) });
+  return /* @__PURE__ */ jsx8("div", { style: { height: digitHeight }, className: "relative w-[1ch] overflow-hidden tabular-nums", children: Array.from({ length: 10 }, (_, i) => /* @__PURE__ */ jsx8(MyNumber, { mv: animatedValue, number: i, digitHeight }, i)) });
 }
 function MyNumber({
   mv,
@@ -1010,7 +826,7 @@ function MyNumber({
     }
     return memo;
   });
-  return /* @__PURE__ */ jsx9(motion8.span, { style: { y }, className: "absolute inset-0 flex items-center justify-center", children: number });
+  return /* @__PURE__ */ jsx8(motion7.span, { style: { y }, className: "absolute inset-0 flex items-center justify-center", children: number });
 }
 function SlidingNumber({
   from,
@@ -1025,9 +841,9 @@ function SlidingNumber({
 }) {
   const ref = useRef4(null);
   const isInView = useInView4(ref, { once: false });
-  const [currentValue, setCurrentValue] = useState5(from);
-  const [hasAnimated, setHasAnimated] = useState5(false);
-  const [animationKey, setAnimationKey] = useState5(0);
+  const [currentValue, setCurrentValue] = useState4(from);
+  const [hasAnimated, setHasAnimated] = useState4(false);
+  const [animationKey, setAnimationKey] = useState4(0);
   useEffect3(() => {
     setCurrentValue(from);
     setHasAnimated(false);
@@ -1075,9 +891,9 @@ function SlidingNumber({
   const absValue = Math.abs(roundedValue);
   const maxDigits = Math.max(Math.abs(from).toString().length, Math.abs(to).toString().length);
   const places = Array.from({ length: maxDigits }, (_, i) => 10 ** (maxDigits - i - 1));
-  return /* @__PURE__ */ jsxs5("div", { ref, className: `flex items-center ${className}`, children: [
+  return /* @__PURE__ */ jsxs4("div", { ref, className: `flex items-center ${className}`, children: [
     roundedValue < 0 && "-",
-    places.map((place) => /* @__PURE__ */ jsx9(
+    places.map((place) => /* @__PURE__ */ jsx8(
       Digit,
       {
         place,
@@ -1091,9 +907,9 @@ function SlidingNumber({
 }
 
 // src/ui/animation/svg-text.tsx
-import * as React6 from "react";
-import { useEffect as useEffect4, useRef as useRef5, useState as useState6 } from "react";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import * as React5 from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function SvgText({
   svg,
   children,
@@ -1103,9 +919,9 @@ function SvgText({
   as: Component = "div"
 }) {
   const textRef = useRef5(null);
-  const [textDimensions, setTextDimensions] = useState6({ width: 0, height: 0 });
-  const content = React6.Children.toArray(children).join("");
-  const maskId = React6.useId();
+  const [textDimensions, setTextDimensions] = useState5({ width: 0, height: 0 });
+  const content = React5.Children.toArray(children).join("");
+  const maskId = React5.useId();
   useEffect4(() => {
     if (!textRef.current) return;
     const updateDimensions = () => {
@@ -1122,8 +938,8 @@ function SvgText({
     resizeObserver.observe(textRef.current);
     return () => resizeObserver.disconnect();
   }, []);
-  return /* @__PURE__ */ jsxs6(Component, { className: cn("relative inline-block", className), children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs5(Component, { className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ jsx9(
       "div",
       {
         ref: textRef,
@@ -1136,7 +952,7 @@ function SvgText({
         children: content
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs5(
       "svg",
       {
         className: "block",
@@ -1149,9 +965,9 @@ function SvgText({
           fontFamily: "system-ui, -apple-system, sans-serif"
         },
         children: [
-          /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsxs6("mask", { id: maskId, children: [
-            /* @__PURE__ */ jsx10("rect", { width: "100%", height: "100%", fill: "black" }),
-            /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx9("defs", { children: /* @__PURE__ */ jsxs5("mask", { id: maskId, children: [
+            /* @__PURE__ */ jsx9("rect", { width: "100%", height: "100%", fill: "black" }),
+            /* @__PURE__ */ jsx9(
               "text",
               {
                 x: "50%",
@@ -1168,7 +984,7 @@ function SvgText({
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsx10("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx9("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ jsx9(
             "foreignObject",
             {
               width: "100%",
@@ -1176,7 +992,7 @@ function SvgText({
               style: {
                 overflow: "visible"
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx9(
                 "div",
                 {
                   style: {
@@ -1186,7 +1002,7 @@ function SvgText({
                     alignItems: "center",
                     justifyContent: "center"
                   },
-                  children: /* @__PURE__ */ jsx10(
+                  children: /* @__PURE__ */ jsx9(
                     "div",
                     {
                       style: {
@@ -1205,14 +1021,14 @@ function SvgText({
         ]
       }
     ),
-    /* @__PURE__ */ jsx10("span", { className: "sr-only", children: content })
+    /* @__PURE__ */ jsx9("span", { className: "sr-only", children: content })
   ] });
 }
 
 // src/ui/animation/text-reveal.tsx
-import { useEffect as useEffect5, useRef as useRef6, useState as useState7 } from "react";
-import { motion as motion9, useInView as useInView5 } from "motion/react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
+import { motion as motion8, useInView as useInView5 } from "motion/react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var containerVariants = {
   fade: {
     hidden: {},
@@ -1411,7 +1227,7 @@ function TextReveal({
 }) {
   const ref = useRef6(null);
   const isInView = useInView5(ref, { once, margin: "-10%" });
-  const [hasAnimated, setHasAnimated] = useState7(false);
+  const [hasAnimated, setHasAnimated] = useState6(false);
   const shouldAnimate = startOnView ? isInView : true;
   const elements = wordLevel ? children.split(" ").map((word, i, arr) => i < arr.length - 1 ? `${word} ` : word) : children.split("");
   const customContainerVariants = {
@@ -1439,9 +1255,9 @@ function TextReveal({
       setHasAnimated(true);
     }
   }, [shouldAnimate, hasAnimated]);
-  const MotionComponent = variant === "typewriter" ? motion9.div : motion9.span;
-  return /* @__PURE__ */ jsx11(
-    motion9.div,
+  const MotionComponent = variant === "typewriter" ? motion8.div : motion8.span;
+  return /* @__PURE__ */ jsx10(
+    motion8.div,
     {
       ref,
       className: cn("inline-block", className),
@@ -1458,8 +1274,8 @@ function TextReveal({
         contain: "layout style paint",
         ...style
       },
-      children: variant === "typewriter" ? /* @__PURE__ */ jsx11(
-        motion9.span,
+      children: variant === "typewriter" ? /* @__PURE__ */ jsx10(
+        motion8.span,
         {
           className: "inline-block overflow-hidden whitespace-nowrap",
           variants: customItemVariants,
@@ -1469,7 +1285,7 @@ function TextReveal({
           },
           children
         }
-      ) : elements.map((element, index) => /* @__PURE__ */ jsx11(
+      ) : elements.map((element, index) => /* @__PURE__ */ jsx10(
         MotionComponent,
         {
           className: cn("inline-block", {
@@ -1495,12 +1311,12 @@ function TextReveal({
 }
 
 // src/ui/animation/typing-text.tsx
-import { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState7 } from "react";
 import {
-  motion as motion10,
+  motion as motion9,
   useInView as useInView6
 } from "motion/react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var cursorVariants = {
   blinking: {
     opacity: [0, 0, 1, 1],
@@ -1535,11 +1351,11 @@ function TypingText({
     once,
     margin: inViewMargin
   });
-  const [hasAnimated, setHasAnimated] = useState8(false);
-  const [displayText, setDisplayText] = useState8("");
-  const [currentIndex, setCurrentIndex] = useState8(0);
-  const [isTyping, setIsTyping] = useState8(false);
-  const [currentTextIndex, setCurrentTextIndex] = useState8(0);
+  const [hasAnimated, setHasAnimated] = useState7(false);
+  const [displayText, setDisplayText] = useState7("");
+  const [currentIndex, setCurrentIndex] = useState7(0);
+  const [isTyping, setIsTyping] = useState7(false);
+  const [currentTextIndex, setCurrentTextIndex] = useState7(0);
   const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
   const textArray = texts && texts.length > 0 ? texts : [text];
   const currentText = textArray[currentTextIndex] ?? "";
@@ -1578,8 +1394,8 @@ function TypingText({
       exit: { opacity: 0 }
     }
   };
-  const MotionComponent = motion10.span;
-  return /* @__PURE__ */ jsx12(
+  const MotionComponent = motion9.span;
+  return /* @__PURE__ */ jsx11(
     MotionComponent,
     {
       ref,
@@ -1591,10 +1407,10 @@ function TypingText({
       className: cn("whitespace-pre-wrap", className),
       viewport: { once },
       ...props,
-      children: /* @__PURE__ */ jsxs7("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+      children: /* @__PURE__ */ jsxs6("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
         displayText,
-        showCursor && /* @__PURE__ */ jsx12(
-          motion10.span,
+        showCursor && /* @__PURE__ */ jsx11(
+          motion9.span,
           {
             variants: cursorVariants,
             animate: "blinking",
@@ -1611,9 +1427,9 @@ function TypingText({
 }
 
 // src/ui/animation/video-text.tsx
-import * as React7 from "react";
+import * as React6 from "react";
 import { useEffect as useEffect7, useRef as useRef8 } from "react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function VideoText({
   src,
   children,
@@ -1681,14 +1497,14 @@ function VideoText({
     };
   }, [fontSize, fontWeight]);
   const sources = Array.isArray(src) ? src : [src];
-  const content = React7.Children.toArray(children).join("");
-  return /* @__PURE__ */ jsxs8(
+  const content = React6.Children.toArray(children).join("");
+  return /* @__PURE__ */ jsxs7(
     Component,
     {
       ref: containerRef,
       className: cn("relative inline-block overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs7(
           "video",
           {
             ref: videoRef,
@@ -1703,12 +1519,12 @@ function VideoText({
             onEnded,
             crossOrigin: "anonymous",
             children: [
-              sources.map((source, index) => /* @__PURE__ */ jsx13("source", { src: source }, index)),
+              sources.map((source, index) => /* @__PURE__ */ jsx12("source", { src: source }, index)),
               "Your browser does not support the video tag."
             ]
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx12(
           "canvas",
           {
             ref: canvasRef,
@@ -1719,7 +1535,7 @@ function VideoText({
             }
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             ref: textRef,
@@ -1732,19 +1548,19 @@ function VideoText({
             children
           }
         ),
-        /* @__PURE__ */ jsx13("span", { className: "sr-only", children: content })
+        /* @__PURE__ */ jsx12("span", { className: "sr-only", children: content })
       ]
     }
   );
 }
 
 // src/ui/animation/word-rotate.tsx
-import { useEffect as useEffect8, useRef as useRef9, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState8 } from "react";
 import {
-  motion as motion11,
+  motion as motion10,
   useInView as useInView7
 } from "motion/react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function WordRotate({
   words,
   duration = 1500,
@@ -1763,9 +1579,9 @@ function WordRotate({
     once,
     margin: inViewMargin
   });
-  const [hasAnimated, setHasAnimated] = useState9(false);
-  const [currentWord, setCurrentWord] = useState9(0);
-  const [show, setShow] = useState9(true);
+  const [hasAnimated, setHasAnimated] = useState8(false);
+  const [currentWord, setCurrentWord] = useState8(0);
+  const [show, setShow] = useState8(true);
   const variants = {
     fade: {
       initial: { opacity: 0 },
@@ -1890,14 +1706,14 @@ function WordRotate({
     }, duration + pauseDuration);
     return () => clearInterval(interval);
   }, [shouldStart, duration, pauseDuration, words.length, loop]);
-  return /* @__PURE__ */ jsx14(
-    motion11.span,
+  return /* @__PURE__ */ jsx13(
+    motion10.span,
     {
       ref,
       className: cn("inline-block overflow-hidden", containerClassName),
       ...props,
-      children: /* @__PURE__ */ jsx14(
-        motion11.span,
+      children: /* @__PURE__ */ jsx13(
+        motion10.span,
         {
           initial: "initial",
           animate: show ? "animate" : "exit",

package/dist/base.cjs

@@ -3268,7 +3268,7 @@ function NavigationMenuPositioner({
       collisionPadding: { top: 5, bottom: 5, left: 20, right: 20 },
       collisionAvoidance: { side: "none" },
       className: _chunkCJXIPSTGcjs.cn.call(void 0, 
-        "box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=left]:before:top-0 data-[side=right]:before:top-0 data-[side=bottom]:before:right-0 data-[side=left]:before:right-[-10px] data-[side=top]:before:right-0 data-[side=left]:before:bottom-0 data-[side=right]:before:bottom-0 data-[side=top]:before:bottom-[-10px] data-[side=bottom]:before:left-0 data-[side=right]:before:left-[-10px] data-[side=top]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=top]:before:h-2.5 data-[side=left]:before:w-2.5 data-[side=right]:before:w-2.5",
+        "data-[side=left]:before:-right-2.5 data-side=bottom:before:-top-2.5 data-side=top:before:-bottom-2.5 data-side=right:before:-left-2.5 box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=left]:before:top-0 data-side=right:before:top-0 data-side=bottom:before:right-0 data-side=top:before:right-0 data-[side=left]:before:bottom-0 data-side=right:before:bottom-0 data-side=bottom:before:left-0 data-side=top:before:left-0 data-side=bottom:before:h-2.5 data-side=top:before:h-2.5 data-[side=left]:before:w-2.5 data-side=right:before:w-2.5",
         className
       ),
       style: {
@@ -3337,7 +3337,7 @@ function NavigationMenuArrow({
     {
       "data-slot": "navigation-menu-arrow",
       className: _chunkCJXIPSTGcjs.cn.call(void 0, 
-        "data-[side=right]:-rotate-90 flex transition-[left] duration-(--duration) ease-(--easing) data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=top]:rotate-180",
+        "data-side=right:-rotate-90 data-side=bottom:-top-2 data-side=top:-bottom-2 flex transition-[left] duration-(--duration) ease-(--easing) data-[side=left]:right-[-13px] data-side=right:left-[-13px] data-[side=left]:rotate-90 data-side=top:rotate-180",
         className
       ),
       ...props,
@@ -3774,7 +3774,7 @@ function PopoverArrow({
     {
       "data-slot": "popover-arrow",
       className: _chunkCJXIPSTGcjs.cn.call(void 0, 
-        "data-[side=right]:-rotate-90 z-50 data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=top]:rotate-180",
+        "data-[side=right]:-rotate-90 data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 z-50 data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=top]:rotate-180",
         className
       ),
       ...props,
@@ -3844,7 +3844,7 @@ function PreviewCardArrow({
     _react2.PreviewCard.Arrow,
     {
       className: _chunkCJXIPSTGcjs.cn.call(void 0, 
-        "data-[side=right]:-rotate-90 data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=top]:rotate-180",
+        "data-[side=right]:-rotate-90 data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=top]:rotate-180",
         className
       ),
       ...props,
@@ -4531,7 +4531,7 @@ function TooltipArrow({ className, variant, ...props }) {
     {
       "data-slot": "tooltip-arrow",
       className: _chunkCJXIPSTGcjs.cn.call(void 0, 
-        "data-[side=right]:-rotate-90 z-50 data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=top]:rotate-180",
+        "data-[side=right]:-rotate-90 data-[side=bottom]:-top-2 data-[side=top]:-bottom-2 z-50 data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=top]:rotate-180",
         className
       ),
       ...props,