{
  "name": "rainbow-button",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "ui/rainbow-button.tsx",
      "content": "import { motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface RainbowButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n  colors?: string[];\n  duration?: number;\n  borderWidth?: number;\n  animated?: boolean;\n}\n\nconst RainbowButton = React.forwardRef<HTMLButtonElement, RainbowButtonProps>(\n  (\n    {\n      children,\n      colors = [\"#f43f5e\", \"#8b5cf6\", \"#3b82f6\", \"#22c55e\", \"#f43f5e\"],\n      duration = 2,\n      borderWidth = 2,\n      animated = true,\n      className,\n      onClick,\n      disabled,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => {\n    const gradientColors = colors.join(\", \");\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        onClick={onClick}\n        disabled={disabled}\n        className={cn(\n          \"relative inline-flex items-center justify-center overflow-hidden rounded-lg font-medium transition-transform hover:scale-105 active:scale-95 disabled:pointer-events-none disabled:opacity-50\",\n          className,\n        )}\n        style={{ padding: borderWidth }}\n        {...props}\n      >\n        {/* Animated gradient background */}\n        <motion.div\n          className=\"absolute inset-0\"\n          style={{\n            background: `linear-gradient(var(--gradient-angle, 0deg), ${gradientColors})`,\n          }}\n          animate={\n            animated\n              ? {\n                  \"--gradient-angle\": [\"0deg\", \"360deg\"],\n                }\n              : undefined\n          }\n          transition={\n            animated\n              ? {\n                  duration,\n                  repeat: Infinity,\n                  ease: \"linear\",\n                }\n              : undefined\n          }\n        />\n        {/* Button content */}\n        <span\n          className=\"relative z-10 flex items-center gap-2 rounded-md bg-background px-6 py-2.5 font-medium text-sm transition-colors hover:bg-background/90\"\n          style={{\n            borderRadius: `calc(0.5rem - ${borderWidth}px)`,\n          }}\n        >\n          {children}\n        </span>\n      </button>\n    );\n  },\n);\nRainbowButton.displayName = \"RainbowButton\";\n\nexport { RainbowButton };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}