{
  "name": "interactive-hover-button",
  "type": "registry:ui",
  "dependencies": ["lucide-react"],
  "registryDependencies": [],
  "description": "A button that reveals text and an arrow icon on hover.",
  "files": [
    {
      "path": "components/ui/interactive-hover-button.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { ArrowRight } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface InteractiveHoverButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  text?: string\n}\n\nconst InteractiveHoverButton = React.forwardRef<\n  HTMLButtonElement,\n  InteractiveHoverButtonProps\n>(({ text = \"Button\", className, ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      className={cn(\n        \"group relative w-32 cursor-pointer overflow-hidden rounded-full border bg-background p-2 text-center font-semibold\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"inline-block translate-x-1 transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0\">\n        {text}\n      </span>\n      <div className=\"absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-1 group-hover:opacity-100\">\n        <span>{text}</span>\n        <ArrowRight />\n      </div>\n      <div className=\"absolute left-[20%] top-[40%] h-2 w-2 scale-[1] rounded-lg bg-primary transition-all duration-300 group-hover:left-[0%] group-hover:top-[0%] group-hover:h-full group-hover:w-full group-hover:scale-[1.8] group-hover:bg-primary\"></div>\n    </button>\n  )\n})\n\nInteractiveHoverButton.displayName = \"InteractiveHoverButton\"\n\nexport { InteractiveHoverButton }\n",
      "type": "registry:ui"
    }
  ]
}