{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mood-gradient-button-shadcnui",
  "type": "registry:ui",
  "title": "Mood Gradient Button",
  "description": "Button with background gradient that shifts based on hover angle",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/motion-core/mood-gradient-button.tsx",
      "content": "\"use client\";\n\nimport { motion, useMotionValue, useSpring } from \"framer-motion\";\nimport React, { MouseEvent, useRef, useState } from \"react\";\n\ntype MoodGradientButtonProps = {\n  children: React.ReactNode;\n  onClick?: () => void;\n  className?: string;\n};\n\nexport function MoodGradientButton({\n  children = \"Hover Me\",\n  onClick,\n  className = \"\",\n}: MoodGradientButtonProps) {\n  const [gradientPosition, setGradientPosition] = useState({ x: 50, y: 50 });\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const x = useMotionValue(50);\n  const y = useMotionValue(50);\n\n  const springX = useSpring(x, { stiffness: 300, damping: 30 });\n  const springY = useSpring(y, { stiffness: 300, damping: 30 });\n\n  const handleMouseMove = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!buttonRef.current) return;\n\n    const rect = buttonRef.current.getBoundingClientRect();\n    const xPos = ((e.clientX - rect.left) / rect.width) * 100;\n    const yPos = ((e.clientY - rect.top) / rect.height) * 100;\n\n    x.set(xPos);\n    y.set(yPos);\n    setGradientPosition({ x: xPos, y: yPos });\n  };\n\n  // Use a state-based approach for the gradient since useTransform with arrays isn't directly supported\n  const [bgStyle, setBgStyle] = useState(\n    \"radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.6), rgba(236, 72, 153, 0.4))\"\n  );\n\n  // Update gradient on mouse move\n  React.useEffect(() => {\n    const unsubscribeX = springX.on(\"change\", (xVal) => {\n      const yVal = springY.get();\n      setBgStyle(\n        `radial-gradient(circle at ${xVal}% ${yVal}%, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.6), rgba(236, 72, 153, 0.4))`\n      );\n    });\n    const unsubscribeY = springY.on(\"change\", (yVal) => {\n      const xVal = springX.get();\n      setBgStyle(\n        `radial-gradient(circle at ${xVal}% ${yVal}%, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.6), rgba(236, 72, 153, 0.4))`\n      );\n    });\n    return () => {\n      unsubscribeX();\n      unsubscribeY();\n    };\n  }, [springX, springY]);\n\n  return (\n    <motion.button\n      ref={buttonRef}\n      onMouseMove={handleMouseMove}\n      onClick={onClick}\n      whileHover={{ scale: 1.05 }}\n      whileTap={{ scale: 0.95 }}\n      className={`relative overflow-hidden rounded-lg border border-primary bg-primary px-6 py-3 font-medium text-primary-foreground shadow-lg transition-shadow hover:shadow-xl ${className}`}\n    >\n      <motion.div\n        style={{\n          background: bgStyle,\n        }}\n        className=\"absolute inset-0\"\n      />\n\n      <span className=\"relative z-10\">{children}</span>\n    </motion.button>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/uitripled/mood-gradient-button-shadcnui.tsx"
    }
  ]
}