{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interactive-hover-button",
  "type": "registry:ui",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "components/ui/interactive-hover-button.tsx",
      "content": "import { ArrowRight } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nexport function InteractiveHoverButton({\r\n  children,\r\n  className,\r\n  ...props\r\n}: React.ButtonHTMLAttributes<HTMLButtonElement>) {\r\n  return (\r\n    <button\r\n      className={cn(\r\n        \"group bg-background relative w-auto cursor-pointer overflow-hidden rounded-full border p-2 px-6 text-center font-semibold\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <div className=\"flex items-center gap-2\">\r\n        <div className=\"bg-primary h-2 w-2 rounded-full transition-all duration-300 group-hover:scale-[100.8]\"></div>\r\n        <span className=\"inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0\">\r\n          {children}\r\n        </span>\r\n      </div>\r\n      <div className=\"text-primary-foreground absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100\">\r\n        <span>{children}</span>\r\n        <ArrowRight />\r\n      </div>\r\n    </button>\r\n  )\r\n}\r\n",
      "type": "registry:ui",
      "target": "components/ui/interactive-hover-button.tsx"
    }
  ]
}