Update import statement for MotionProps type

apps/www/public/llms-full.txt

@@ -2547,7 +2547,7 @@ import React, {
   useMemo,
   useState,
 } from "react"
-import { AnimatePresence, motion, MotionProps } from "motion/react"
+import { AnimatePresence, motion, type MotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -7612,7 +7612,7 @@ Description: A text animation that scrambles letters before revealing the final
 "use client"
 
 import { useEffect, useRef, useState } from "react"
-import { AnimatePresence, motion, MotionProps } from "motion/react"
+import { AnimatePresence, motion, type MotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -9240,7 +9240,7 @@ Description: A text component with a moving line shadow.
 --- file: magicui/line-shadow-text.tsx ---
 "use client"
 
-import { motion, MotionProps } from "motion/react"
+import { motion, type MotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -11401,6 +11401,7 @@ export function Pointer({
         const handleMouseMove = (e: MouseEvent) => {
           x.set(e.clientX)
           y.set(e.clientY)
+          setIsActive(true)
         }
 
         const handleMouseEnter = (e: MouseEvent) => {
@@ -12798,7 +12799,7 @@ Description: Animated Scroll Progress for your pages
 --- file: magicui/scroll-progress.tsx ---
 "use client"
 
-import { motion, MotionProps, useScroll } from "motion/react"
+import { motion, useScroll, type MotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -13906,7 +13907,7 @@ import {
   useRef,
   useState,
 } from "react"
-import { motion, MotionProps, useInView } from "motion/react"
+import { motion, useInView, type MotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -14260,7 +14261,12 @@ Description: A text animation component that animates text using a variety of di
 "use client"
 
 import { ElementType, memo } from "react"
-import { AnimatePresence, motion, MotionProps, Variants } from "motion/react"
+import {
+  AnimatePresence,
+  motion,
+  Variants,
+  type MotionProps,
+} from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -15292,7 +15298,7 @@ Description: Characters appearing in typed animation
 "use client"
 
 import { useEffect, useMemo, useRef, useState } from "react"
-import { motion, MotionProps, useInView } from "motion/react"
+import { motion, useInView, type MotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 
@@ -15985,7 +15991,7 @@ Description: A vertical rotation of words
 "use client"
 
 import { useEffect, useState } from "react"
-import { AnimatePresence, motion, MotionProps } from "motion/react"
+import { AnimatePresence, motion, type MotionProps } from "motion/react"
 
 import { cn } from "@/lib/utils"
 

apps/www/public/r/animated-list.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/animated-list.tsx",
-      "content": "\"use client\"\n\nimport React, {\n  ComponentPropsWithoutRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\"\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n  const animations: MotionProps = {\n    initial: { scale: 0, opacity: 0 },\n    animate: { scale: 1, opacity: 1, originY: 0 },\n    exit: { scale: 0, opacity: 0 },\n    transition: { type: \"spring\", stiffness: 350, damping: 40 },\n  }\n\n  return (\n    <motion.div {...animations} layout className=\"mx-auto w-full\">\n      {children}\n    </motion.div>\n  )\n}\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode\n  delay?: number\n}\n\nexport const AnimatedList = React.memo(\n  ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\n    const [index, setIndex] = useState(0)\n    const childrenArray = useMemo(\n      () => React.Children.toArray(children),\n      [children]\n    )\n\n    useEffect(() => {\n      if (index < childrenArray.length - 1) {\n        const timeout = setTimeout(() => {\n          setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n        }, delay)\n\n        return () => clearTimeout(timeout)\n      }\n    }, [index, delay, childrenArray.length])\n\n    const itemsToShow = useMemo(() => {\n      const result = childrenArray.slice(0, index + 1).reverse()\n      return result\n    }, [index, childrenArray])\n\n    return (\n      <div\n        className={cn(`flex flex-col items-center gap-4`, className)}\n        {...props}\n      >\n        <AnimatePresence>\n          {itemsToShow.map((item) => (\n            <AnimatedListItem key={(item as React.ReactElement).key}>\n              {item}\n            </AnimatedListItem>\n          ))}\n        </AnimatePresence>\n      </div>\n    )\n  }\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n",
+      "content": "\"use client\"\n\nimport React, {\n  ComponentPropsWithoutRef,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\"\nimport { AnimatePresence, motion, type MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport function AnimatedListItem({ children }: { children: React.ReactNode }) {\n  const animations: MotionProps = {\n    initial: { scale: 0, opacity: 0 },\n    animate: { scale: 1, opacity: 1, originY: 0 },\n    exit: { scale: 0, opacity: 0 },\n    transition: { type: \"spring\", stiffness: 350, damping: 40 },\n  }\n\n  return (\n    <motion.div {...animations} layout className=\"mx-auto w-full\">\n      {children}\n    </motion.div>\n  )\n}\n\nexport interface AnimatedListProps extends ComponentPropsWithoutRef<\"div\"> {\n  children: React.ReactNode\n  delay?: number\n}\n\nexport const AnimatedList = React.memo(\n  ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {\n    const [index, setIndex] = useState(0)\n    const childrenArray = useMemo(\n      () => React.Children.toArray(children),\n      [children]\n    )\n\n    useEffect(() => {\n      if (index < childrenArray.length - 1) {\n        const timeout = setTimeout(() => {\n          setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length)\n        }, delay)\n\n        return () => clearTimeout(timeout)\n      }\n    }, [index, delay, childrenArray.length])\n\n    const itemsToShow = useMemo(() => {\n      const result = childrenArray.slice(0, index + 1).reverse()\n      return result\n    }, [index, childrenArray])\n\n    return (\n      <div\n        className={cn(`flex flex-col items-center gap-4`, className)}\n        {...props}\n      >\n        <AnimatePresence>\n          {itemsToShow.map((item) => (\n            <AnimatedListItem key={(item as React.ReactElement).key}>\n              {item}\n            </AnimatedListItem>\n          ))}\n        </AnimatePresence>\n      </div>\n    )\n  }\n)\n\nAnimatedList.displayName = \"AnimatedList\"\n",
       "type": "registry:ui"
     }
   ]

apps/www/public/r/hyper-text.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/hyper-text.tsx",
-      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { AnimatePresence, motion, MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype CharacterSet = string[] | readonly string[]\n\ninterface HyperTextProps extends MotionProps {\n  /** The text content to be animated */\n  children: string\n  /** Optional className for styling */\n  className?: string\n  /** Duration of the animation in milliseconds */\n  duration?: number\n  /** Delay before animation starts in milliseconds */\n  delay?: number\n  /** Component to render as - defaults to div */\n  as?: React.ElementType\n  /** Whether to start animation when element comes into view */\n  startOnView?: boolean\n  /** Whether to trigger animation on hover */\n  animateOnHover?: boolean\n  /** Custom character set for scramble effect. Defaults to uppercase alphabet */\n  characterSet?: CharacterSet\n}\n\nconst DEFAULT_CHARACTER_SET = Object.freeze(\n  \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\")\n) as readonly string[]\n\nconst getRandomInt = (max: number): number => Math.floor(Math.random() * max)\n\nexport function HyperText({\n  children,\n  className,\n  duration = 800,\n  delay = 0,\n  as: Component = \"div\",\n  startOnView = false,\n  animateOnHover = true,\n  characterSet = DEFAULT_CHARACTER_SET,\n  ...props\n}: HyperTextProps) {\n  const MotionComponent = motion.create(Component, {\n    forwardMotionProps: true,\n  })\n\n  const [displayText, setDisplayText] = useState<string[]>(() =>\n    children.split(\"\")\n  )\n  const [isAnimating, setIsAnimating] = useState(false)\n  const iterationCount = useRef(0)\n  const elementRef = useRef<HTMLElement>(null)\n\n  const handleAnimationTrigger = () => {\n    if (animateOnHover && !isAnimating) {\n      iterationCount.current = 0\n      setIsAnimating(true)\n    }\n  }\n\n  // Handle animation start based on view or delay\n  useEffect(() => {\n    if (!startOnView) {\n      const startTimeout = setTimeout(() => {\n        setIsAnimating(true)\n      }, delay)\n      return () => clearTimeout(startTimeout)\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setTimeout(() => {\n            setIsAnimating(true)\n          }, delay)\n          observer.disconnect()\n        }\n      },\n      { threshold: 0.1, rootMargin: \"-30% 0px -30% 0px\" }\n    )\n\n    if (elementRef.current) {\n      observer.observe(elementRef.current)\n    }\n\n    return () => observer.disconnect()\n  }, [delay, startOnView])\n\n  // Handle scramble animation\n  useEffect(() => {\n    if (!isAnimating) return\n\n    const maxIterations = children.length\n    const startTime = performance.now()\n    let animationFrameId: number\n\n    const animate = (currentTime: number) => {\n      const elapsed = currentTime - startTime\n      const progress = Math.min(elapsed / duration, 1)\n\n      iterationCount.current = progress * maxIterations\n\n      setDisplayText((currentText) =>\n        currentText.map((letter, index) =>\n          letter === \" \"\n            ? letter\n            : index <= iterationCount.current\n              ? children[index]\n              : characterSet[getRandomInt(characterSet.length)]\n        )\n      )\n\n      if (progress < 1) {\n        animationFrameId = requestAnimationFrame(animate)\n      } else {\n        setIsAnimating(false)\n      }\n    }\n\n    animationFrameId = requestAnimationFrame(animate)\n\n    return () => cancelAnimationFrame(animationFrameId)\n  }, [children, duration, isAnimating, characterSet])\n\n  return (\n    <MotionComponent\n      ref={elementRef}\n      className={cn(\"overflow-hidden py-2 text-4xl font-bold\", className)}\n      onMouseEnter={handleAnimationTrigger}\n      {...props}\n    >\n      <AnimatePresence>\n        {displayText.map((letter, index) => (\n          <motion.span\n            key={index}\n            className={cn(\"font-mono\", letter === \" \" ? \"w-3\" : \"\")}\n          >\n            {letter.toUpperCase()}\n          </motion.span>\n        ))}\n      </AnimatePresence>\n    </MotionComponent>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { AnimatePresence, motion, type MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype CharacterSet = string[] | readonly string[]\n\ninterface HyperTextProps extends MotionProps {\n  /** The text content to be animated */\n  children: string\n  /** Optional className for styling */\n  className?: string\n  /** Duration of the animation in milliseconds */\n  duration?: number\n  /** Delay before animation starts in milliseconds */\n  delay?: number\n  /** Component to render as - defaults to div */\n  as?: React.ElementType\n  /** Whether to start animation when element comes into view */\n  startOnView?: boolean\n  /** Whether to trigger animation on hover */\n  animateOnHover?: boolean\n  /** Custom character set for scramble effect. Defaults to uppercase alphabet */\n  characterSet?: CharacterSet\n}\n\nconst DEFAULT_CHARACTER_SET = Object.freeze(\n  \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\".split(\"\")\n) as readonly string[]\n\nconst getRandomInt = (max: number): number => Math.floor(Math.random() * max)\n\nexport function HyperText({\n  children,\n  className,\n  duration = 800,\n  delay = 0,\n  as: Component = \"div\",\n  startOnView = false,\n  animateOnHover = true,\n  characterSet = DEFAULT_CHARACTER_SET,\n  ...props\n}: HyperTextProps) {\n  const MotionComponent = motion.create(Component, {\n    forwardMotionProps: true,\n  })\n\n  const [displayText, setDisplayText] = useState<string[]>(() =>\n    children.split(\"\")\n  )\n  const [isAnimating, setIsAnimating] = useState(false)\n  const iterationCount = useRef(0)\n  const elementRef = useRef<HTMLElement>(null)\n\n  const handleAnimationTrigger = () => {\n    if (animateOnHover && !isAnimating) {\n      iterationCount.current = 0\n      setIsAnimating(true)\n    }\n  }\n\n  // Handle animation start based on view or delay\n  useEffect(() => {\n    if (!startOnView) {\n      const startTimeout = setTimeout(() => {\n        setIsAnimating(true)\n      }, delay)\n      return () => clearTimeout(startTimeout)\n    }\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry.isIntersecting) {\n          setTimeout(() => {\n            setIsAnimating(true)\n          }, delay)\n          observer.disconnect()\n        }\n      },\n      { threshold: 0.1, rootMargin: \"-30% 0px -30% 0px\" }\n    )\n\n    if (elementRef.current) {\n      observer.observe(elementRef.current)\n    }\n\n    return () => observer.disconnect()\n  }, [delay, startOnView])\n\n  // Handle scramble animation\n  useEffect(() => {\n    if (!isAnimating) return\n\n    const maxIterations = children.length\n    const startTime = performance.now()\n    let animationFrameId: number\n\n    const animate = (currentTime: number) => {\n      const elapsed = currentTime - startTime\n      const progress = Math.min(elapsed / duration, 1)\n\n      iterationCount.current = progress * maxIterations\n\n      setDisplayText((currentText) =>\n        currentText.map((letter, index) =>\n          letter === \" \"\n            ? letter\n            : index <= iterationCount.current\n              ? children[index]\n              : characterSet[getRandomInt(characterSet.length)]\n        )\n      )\n\n      if (progress < 1) {\n        animationFrameId = requestAnimationFrame(animate)\n      } else {\n        setIsAnimating(false)\n      }\n    }\n\n    animationFrameId = requestAnimationFrame(animate)\n\n    return () => cancelAnimationFrame(animationFrameId)\n  }, [children, duration, isAnimating, characterSet])\n\n  return (\n    <MotionComponent\n      ref={elementRef}\n      className={cn(\"overflow-hidden py-2 text-4xl font-bold\", className)}\n      onMouseEnter={handleAnimationTrigger}\n      {...props}\n    >\n      <AnimatePresence>\n        {displayText.map((letter, index) => (\n          <motion.span\n            key={index}\n            className={cn(\"font-mono\", letter === \" \" ? \"w-3\" : \"\")}\n          >\n            {letter.toUpperCase()}\n          </motion.span>\n        ))}\n      </AnimatePresence>\n    </MotionComponent>\n  )\n}\n",
       "type": "registry:ui"
     }
   ]

apps/www/public/r/line-shadow-text.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/line-shadow-text.tsx",
-      "content": "\"use client\"\n\nimport { motion, MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface LineShadowTextProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,\n    MotionProps {\n  shadowColor?: string\n  as?: React.ElementType\n}\n\nexport function LineShadowText({\n  children,\n  shadowColor = \"black\",\n  className,\n  as: Component = \"span\",\n  ...props\n}: LineShadowTextProps) {\n  const MotionComponent = motion.create(Component)\n  const content = typeof children === \"string\" ? children : null\n\n  if (!content) {\n    throw new Error(\"LineShadowText only accepts string content\")\n  }\n\n  return (\n    <MotionComponent\n      style={{ \"--shadow-color\": shadowColor } as React.CSSProperties}\n      className={cn(\n        \"relative z-0 inline-flex\",\n        \"after:absolute after:top-[0.04em] after:left-[0.04em] after:content-[attr(data-text)]\",\n        \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n        \"after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n        \"after:animate-line-shadow\",\n        className\n      )}\n      data-text={content}\n      {...props}\n    >\n      {content}\n    </MotionComponent>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { motion, type MotionProps } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface LineShadowTextProps\n  extends\n    Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps>,\n    MotionProps {\n  shadowColor?: string\n  as?: React.ElementType\n}\n\nexport function LineShadowText({\n  children,\n  shadowColor = \"black\",\n  className,\n  as: Component = \"span\",\n  ...props\n}: LineShadowTextProps) {\n  const MotionComponent = motion.create(Component)\n  const content = typeof children === \"string\" ? children : null\n\n  if (!content) {\n    throw new Error(\"LineShadowText only accepts string content\")\n  }\n\n  return (\n    <MotionComponent\n      style={{ \"--shadow-color\": shadowColor } as React.CSSProperties}\n      className={cn(\n        \"relative z-0 inline-flex\",\n        \"after:absolute after:top-[0.04em] after:left-[0.04em] after:content-[attr(data-text)]\",\n        \"after:bg-[linear-gradient(45deg,transparent_45%,var(--shadow-color)_45%,var(--shadow-color)_55%,transparent_0)]\",\n        \"after:-z-10 after:bg-[length:0.06em_0.06em] after:bg-clip-text after:text-transparent\",\n        \"after:animate-line-shadow\",\n        className\n      )}\n      data-text={content}\n      {...props}\n    >\n      {content}\n    </MotionComponent>\n  )\n}\n",
       "type": "registry:ui"
     }
   ],