fix: build issue

components/sidebar-cta.tsx

@@ -15,7 +15,7 @@ export default function SidebarCTA() {
       onClick={() => posthog.capture("sidebar_cta_clicked")}
       className="group my-20 flex w-full flex-col items-center justify-center gap-2 rounded-xl bg-indigo-600 p-4 text-center text-lg font-medium leading-tight text-white"
     >
-      <WordPullUp words="Looking for templates?" className="text-4xl" />
+      <WordPullUp className="text-4xl">Looking for templates?</WordPullUp>
       <AnimatedShinyText className="group inline-flex items-center justify-center whitespace-pre via-white/80 text-white dark:text-white">
         ✨ Introducing Magic UI Pro
         <ChevronRight className="ml-1 size-4 transition-all duration-300 ease-out group-hover:translate-x-1" />

public/r/styles/default/shiny-button.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "magicui/shiny-button.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport {\n  motion,\n  type AnimationProps,\n  type HTMLMotionProps,\n} from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst animationProps = {\n  initial: { \"--x\": \"100%\", scale: 0.8 },\n  animate: { \"--x\": \"-100%\", scale: 1 },\n  whileTap: { scale: 0.95 },\n  transition: {\n    repeat: Infinity,\n    repeatType: \"loop\",\n    repeatDelay: 1,\n    type: \"spring\",\n    stiffness: 20,\n    damping: 15,\n    mass: 2,\n    scale: {\n      type: \"spring\",\n      stiffness: 200,\n      damping: 5,\n      mass: 0.5,\n    },\n  },\n} as AnimationProps;\n\ninterface ShinyButtonProps extends HTMLMotionProps<\"button\"> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <motion.button\n        ref={ref}\n        {...animationProps}\n        {...props}\n        className={cn(\n          \"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\",\n          className,\n        )}\n      >\n        <span\n          className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n          style={{\n            maskImage:\n              \"linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))\",\n          }}\n        >\n          {children}\n        </span>\n        <span\n          style={{\n            mask: \"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))\",\n            maskComposite: \"exclude\",\n          }}\n          className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n        ></span>\n      </motion.button>\n    );\n  },\n);\n\nShinyButton.displayName = \"ShinyButton\";\n\nexport default ShinyButton;\n",
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport {\n  motion,\n  type AnimationProps,\n  type HTMLMotionProps,\n} from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\n\nconst animationProps = {\n  initial: { \"--x\": \"100%\", scale: 0.8 },\n  animate: { \"--x\": \"-100%\", scale: 1 },\n  whileTap: { scale: 0.95 },\n  transition: {\n    repeat: Infinity,\n    repeatType: \"loop\",\n    repeatDelay: 1,\n    type: \"spring\",\n    stiffness: 20,\n    damping: 15,\n    mass: 2,\n    scale: {\n      type: \"spring\",\n      stiffness: 200,\n      damping: 5,\n      mass: 0.5,\n    },\n  },\n} as AnimationProps;\n\ninterface ShinyButtonProps extends HTMLMotionProps<\"button\"> {\n  children: React.ReactNode;\n  className?: string;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\nconst ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <motion.button\n        ref={ref}\n        {...animationProps}\n        {...props}\n        className={cn(\n          \"relative rounded-lg px-6 py-2 font-medium backdrop-blur-xl transition-shadow duration-300 ease-in-out hover:shadow dark:bg-[radial-gradient(circle_at_50%_0%,hsl(var(--primary)/10%)_0%,transparent_60%)] dark:hover:shadow-[0_0_20px_hsl(var(--primary)/10%)]\",\n          className,\n        )}\n      >\n        <span\n          className=\"relative block size-full text-sm uppercase tracking-wide text-[rgb(0,0,0,65%)] dark:font-light dark:text-[rgb(255,255,255,90%)]\"\n          style={{\n            maskImage:\n              \"linear-gradient(-75deg,hsl(var(--primary)) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),hsl(var(--primary)) calc(var(--x) + 100%))\",\n          }}\n        >\n          {children}\n        </span>\n        <span\n          style={{\n            mask: \"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box,linear-gradient(rgb(0,0,0), rgb(0,0,0))\",\n            maskComposite: \"exclude\",\n          }}\n          className=\"absolute inset-0 z-10 block rounded-[inherit] bg-[linear-gradient(-75deg,hsl(var(--primary)/10%)_calc(var(--x)+20%),hsl(var(--primary)/50%)_calc(var(--x)+25%),hsl(var(--primary)/10%)_calc(var(--x)+100%))] p-px\"\n        ></span>\n      </motion.button>\n    );\n  },\n);\n\nShinyButton.displayName = \"ShinyButton\";\n\nexport default ShinyButton;\n",
       "type": "registry:ui",
       "target": ""
     }

public/r/styles/default/word-pull-up.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "magicui/word-pull-up.tsx",
-      "content": "\"use client\";\n\nimport { motion, Variants } from \"framer-motion\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface WordPullUpProps {\n  words: string;\n  delayMultiple?: number;\n  wrapperFramerProps?: Variants;\n  framerProps?: Variants;\n  className?: string;\n}\n\nexport default function WordPullUp({\n  words,\n  wrapperFramerProps = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.2,\n      },\n    },\n  },\n  framerProps = {\n    hidden: { y: 20, opacity: 0 },\n    show: { y: 0, opacity: 1 },\n  },\n  className,\n}: WordPullUpProps) {\n  return (\n    <motion.h1\n      variants={wrapperFramerProps}\n      initial=\"hidden\"\n      animate=\"show\"\n      className={cn(\n        \"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm\",\n        className,\n      )}\n    >\n      {words.split(\" \").map((word, i) => (\n        <motion.span\n          key={i}\n          variants={framerProps}\n          style={{ display: \"inline-block\", paddingRight: \"8px\" }}\n        >\n          {word === \"\" ? <span>&nbsp;</span> : word}\n        </motion.span>\n      ))}\n    </motion.h1>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { motion, MotionProps, useInView, Variants } from \"motion/react\";\nimport { useRef } from \"react\";\n\ninterface WordPullUpProps extends MotionProps {\n  children: string;\n  className?: string;\n  delayMultiple?: number;\n  variants?: Variants;\n  wordVariants?: Variants;\n  startOnView?: boolean;\n  as?: React.ElementType;\n}\n\nexport default function WordPullUp({\n  children,\n  className,\n  as: Component = \"h1\",\n  variants = {\n    hidden: { opacity: 0 },\n    show: {\n      opacity: 1,\n      transition: {\n        staggerChildren: 0.2,\n      },\n    },\n  },\n  wordVariants = {\n    hidden: { y: 20, opacity: 0 },\n    show: { y: 0, opacity: 1 },\n  },\n  startOnView = false,\n}: WordPullUpProps) {\n  const MotionComponent = motion.create(Component);\n  const ref = useRef<HTMLElement>(null);\n  const inView = useInView(ref, { once: true, margin: \"-30% 0px -30% 0px\" });\n  const shouldAnimate = startOnView ? inView : true;\n\n  return (\n    <MotionComponent\n      ref={ref}\n      variants={variants}\n      initial=\"hidden\"\n      animate={shouldAnimate ? \"show\" : \"hidden\"}\n      className={cn(\n        \"text-4xl font-bold leading-[5rem] tracking-[-0.02em]\",\n        className,\n      )}\n    >\n      {children.split(\" \").map((word, i) => (\n        <motion.span\n          key={i}\n          variants={wordVariants}\n          style={{ display: \"inline-block\", paddingRight: \"8px\" }}\n        >\n          {word === \"\" ? <span>&nbsp;</span> : word}\n        </motion.span>\n      ))}\n    </MotionComponent>\n  );\n}\n",
       "type": "registry:ui",
       "target": ""
     }

public/r/styles/default/word-rotate.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "magicui/word-rotate.tsx",
-      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { AnimatePresence, HTMLMotionProps, motion } from \"framer-motion\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface WordRotateProps {\n  words: string[];\n  duration?: number;\n  framerProps?: HTMLMotionProps<\"h1\">;\n  className?: string;\n}\n\nexport default function WordRotate({\n  words,\n  duration = 2500,\n  framerProps = {\n    initial: { opacity: 0, y: -50 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n    transition: { duration: 0.25, ease: \"easeOut\" },\n  },\n  className,\n}: WordRotateProps) {\n  const [index, setIndex] = useState(0);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setIndex((prevIndex) => (prevIndex + 1) % words.length);\n    }, duration);\n\n    // Clean up interval on unmount\n    return () => clearInterval(interval);\n  }, [words, duration]);\n\n  return (\n    <div className=\"overflow-hidden py-2\">\n      <AnimatePresence mode=\"wait\">\n        <motion.h1\n          key={words[index]}\n          className={cn(className)}\n          {...framerProps}\n        >\n          {words[index]}\n        </motion.h1>\n      </AnimatePresence>\n    </div>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { AnimatePresence, motion, MotionProps } from \"framer-motion\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface WordRotateProps {\n  words: string[];\n  duration?: number;\n  framerProps?: MotionProps;\n  className?: string;\n}\n\nexport default function WordRotate({\n  words,\n  duration = 2500,\n  framerProps = {\n    initial: { opacity: 0, y: -50 },\n    animate: { opacity: 1, y: 0 },\n    exit: { opacity: 0, y: 50 },\n    transition: { duration: 0.25, ease: \"easeOut\" },\n  },\n  className,\n}: WordRotateProps) {\n  const [index, setIndex] = useState(0);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setIndex((prevIndex) => (prevIndex + 1) % words.length);\n    }, duration);\n\n    // Clean up interval on unmount\n    return () => clearInterval(interval);\n  }, [words, duration]);\n\n  return (\n    <div className=\"overflow-hidden py-2\">\n      <AnimatePresence mode=\"wait\">\n        <motion.h1\n          key={words[index]}\n          className={cn(className)}\n          {...framerProps}\n        >\n          {words[index]}\n        </motion.h1>\n      </AnimatePresence>\n    </div>\n  );\n}\n",
       "type": "registry:ui",
       "target": ""
     }

registry/default/magicui/shiny-button.tsx

@@ -32,6 +32,7 @@ const animationProps = {
 interface ShinyButtonProps extends HTMLMotionProps<"button"> {
   children: React.ReactNode;
   className?: string;
+  ref?: React.Ref<HTMLButtonElement>;
 }
 
 const ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(

registry/default/magicui/word-pull-up.tsx

@@ -46,7 +46,7 @@ export default function WordPullUp({
       animate={shouldAnimate ? "show" : "hidden"}
       className={cn(
         "text-4xl font-bold leading-[5rem] tracking-[-0.02em]",
-        className
+        className,
       )}
     >
       {children.split(" ").map((word, i) => (

registry/default/magicui/word-rotate.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { AnimatePresence, HTMLMotionProps, motion } from "framer-motion";
+import { AnimatePresence, motion, MotionProps } from "framer-motion";
 
 import { cn } from "@/lib/utils";
 
 interface WordRotateProps {
   words: string[];
   duration?: number;
-  framerProps?: HTMLMotionProps<"h1">;
+  framerProps?: MotionProps;
   className?: string;
 }