pelatform-ui 1.3.0 → 1.3.1

package/dist/animation.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  HoverBackground
+} from "./chunk-4Z3DBWB6.js";
 
 // src/ui/animation/avatar-group.tsx
 import * as React from "react";
@@ -665,198 +668,10 @@ 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 { cn as cn6 } from "@pelatform/utils";
-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: cn6("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: cn6(
-              "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 { cn as cn7 } from "@pelatform/utils";
-import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+import React4, { useRef as useRef2 } from "react";
+import { cn as cn6 } from "@pelatform/utils";
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
 function Marquee({
   className,
   reverse = false,
@@ -870,13 +685,13 @@ function Marquee({
   ...props
 }) {
   const marqueeRef = useRef2(null);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       ...props,
       ref: marqueeRef,
       "data-slot": "marquee",
-      className: cn7(
+      className: cn6(
         "group flex gap-(--gap) overflow-hidden p-2 [--duration:40s] [--gap:1rem]",
         {
           "flex-row": !vertical,
@@ -888,11 +703,11 @@ 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: cn7(
+            className: cn6(
               !vertical ? "flex-row gap-(--gap)" : "flex-col gap-(--gap)",
               "flex shrink-0 justify-around",
               !vertical && "animate-marquee flex-row",
@@ -911,10 +726,10 @@ 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 { cn as cn8 } from "@pelatform/utils";
-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 { cn as cn7 } from "@pelatform/utils";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function ShimmeringText({
   text,
   duration = 2,
@@ -931,15 +746,15 @@ 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: cn8(
+      className: cn7(
         "relative inline-block bg-size-[250%_100%,auto] bg-clip-text text-transparent",
         "[--base-color:var(--color-zinc-400)] [--shimmer-color:var(--color-zinc-950)]",
         "[background-repeat:no-repeat,padding-box]",
@@ -980,9 +795,9 @@ function ShimmeringText({
 }
 
 // src/ui/animation/sliding-number.tsx
-import { useEffect as useEffect3, useLayoutEffect, useMemo as useMemo4, 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, useLayoutEffect, useMemo as useMemo3, 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,
@@ -990,14 +805,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,
@@ -1013,7 +828,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,
@@ -1028,9 +843,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);
   const animationFrameRef = useRef4(null);
   const timeoutRef = useRef4(null);
   const onCompleteRef = useRef4(onComplete);
@@ -1050,7 +865,7 @@ function SlidingNumber({
       timeoutRef.current = null;
     }
   }, [from]);
-  const shouldStart = useMemo4(() => {
+  const shouldStart = useMemo3(() => {
     if (!startOnView) return true;
     if (!isInView) return false;
     if (once && hasAnimated) return false;
@@ -1100,13 +915,13 @@ function SlidingNumber({
   const roundedValue = Math.round(currentValue);
   const absValue = Math.abs(roundedValue);
   const maxDigits = Math.max(Math.abs(from).toString().length, Math.abs(to).toString().length);
-  const places = useMemo4(
+  const places = useMemo3(
     () => Array.from({ length: maxDigits }, (_, i) => 10 ** (maxDigits - i - 1)),
     [maxDigits]
   );
-  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,
@@ -1120,10 +935,10 @@ 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 { cn as cn9 } from "@pelatform/utils";
-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 { cn as cn8 } from "@pelatform/utils";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function SvgText({
   svg,
   children,
@@ -1133,9 +948,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 = () => {
@@ -1152,8 +967,8 @@ function SvgText({
     resizeObserver.observe(textRef.current);
     return () => resizeObserver.disconnect();
   }, []);
-  return /* @__PURE__ */ jsxs6(Component, { className: cn9("relative inline-block", className), children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs5(Component, { className: cn8("relative inline-block", className), children: [
+    /* @__PURE__ */ jsx9(
       "div",
       {
         ref: textRef,
@@ -1166,7 +981,7 @@ function SvgText({
         children: content
       }
     ),
-    /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsxs5(
       "svg",
       {
         className: "block",
@@ -1179,9 +994,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%",
@@ -1198,7 +1013,7 @@ function SvgText({
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsx10("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx9("g", { mask: `url(#${maskId})`, children: /* @__PURE__ */ jsx9(
             "foreignObject",
             {
               width: "100%",
@@ -1206,7 +1021,7 @@ function SvgText({
               style: {
                 overflow: "visible"
               },
-              children: /* @__PURE__ */ jsx10(
+              children: /* @__PURE__ */ jsx9(
                 "div",
                 {
                   style: {
@@ -1216,7 +1031,7 @@ function SvgText({
                     alignItems: "center",
                     justifyContent: "center"
                   },
-                  children: /* @__PURE__ */ jsx10(
+                  children: /* @__PURE__ */ jsx9(
                     "div",
                     {
                       style: {
@@ -1235,15 +1050,15 @@ 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 { cn as cn10 } from "@pelatform/utils";
-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 { cn as cn9 } from "@pelatform/utils";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var containerVariants = {
   fade: {
     hidden: {},
@@ -1442,7 +1257,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 = {
@@ -1470,12 +1285,12 @@ 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: cn10("inline-block", className),
+      className: cn9("inline-block", className),
       variants: customContainerVariants,
       initial: "hidden",
       animate: shouldAnimate ? "visible" : "hidden",
@@ -1489,8 +1304,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,
@@ -1500,10 +1315,10 @@ function TextReveal({
           },
           children
         }
-      ) : elements.map((element, index) => /* @__PURE__ */ jsx11(
+      ) : elements.map((element, index) => /* @__PURE__ */ jsx10(
         MotionComponent,
         {
-          className: cn10("inline-block", {
+          className: cn9("inline-block", {
             "whitespace-pre": !wordLevel
           }),
           variants: customItemVariants,
@@ -1526,13 +1341,13 @@ 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 { cn as cn11 } from "@pelatform/utils";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { cn as cn10 } from "@pelatform/utils";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var cursorVariants = {
   blinking: {
     opacity: [0, 0, 1, 1],
@@ -1567,11 +1382,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] ?? "";
@@ -1610,8 +1425,8 @@ function TypingText({
       exit: { opacity: 0 }
     }
   };
-  const MotionComponent = motion10.span;
-  return /* @__PURE__ */ jsx12(
+  const MotionComponent = motion9.span;
+  return /* @__PURE__ */ jsx11(
     MotionComponent,
     {
       ref,
@@ -1620,17 +1435,17 @@ function TypingText({
       whileInView: startOnView ? "show" : void 0,
       animate: startOnView ? void 0 : "show",
       exit: "exit",
-      className: cn11("whitespace-pre-wrap", className),
+      className: cn10("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",
-            className: cn11(
+            className: cn10(
               "ms-1 inline-block w-px select-none font-normal text-foreground",
               cursorClassName
             ),
@@ -1643,10 +1458,10 @@ 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 { cn as cn12 } from "@pelatform/utils";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { cn as cn11 } from "@pelatform/utils";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function VideoText({
   src,
   children,
@@ -1714,14 +1529,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: cn12("relative inline-block overflow-hidden", className),
+      className: cn11("relative inline-block overflow-hidden", className),
       children: [
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs7(
           "video",
           {
             ref: videoRef,
@@ -1736,12 +1551,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,
@@ -1752,7 +1567,7 @@ function VideoText({
             }
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx12(
           "div",
           {
             ref: textRef,
@@ -1765,20 +1580,20 @@ 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 { cn as cn13 } from "@pelatform/utils";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { cn as cn12 } from "@pelatform/utils";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function WordRotate({
   words,
   duration = 1500,
@@ -1797,9 +1612,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 },
@@ -1924,14 +1739,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: cn13("inline-block overflow-hidden", containerClassName),
+      className: cn12("inline-block overflow-hidden", containerClassName),
       ...props,
-      children: /* @__PURE__ */ jsx14(
-        motion11.span,
+      children: /* @__PURE__ */ jsx13(
+        motion10.span,
         {
           initial: "initial",
           animate: show ? "animate" : "exit",
@@ -1941,7 +1756,7 @@ function WordRotate({
           style: {
             perspective: animationStyle === "flip" ? 1e3 : void 0
           },
-          className: cn13("inline-block overflow-hidden", className),
+          className: cn12("inline-block overflow-hidden", className),
           children: words[currentWord]
         },
         currentWord