{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-arrow-button",
  "title": "Hover Arrow Button",
  "description": "A button with a smooth hover arrow swap animation.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge",
    "@tabler/icons-react"
  ],
  "files": [
    {
      "path": "registry/chamaac/hover-arrow-button/hover-arrow-button.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { IconArrowRight } from \"@tabler/icons-react\";\nimport { LazyMotion, domAnimation, m } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface HoverArrowButtonProps extends React.ComponentProps<typeof m.button> {\n  text?: string;\n  duration?: number;\n  iconSize?: number;\n}\n\nexport default function HoverArrowButton({\n  text = \"Get Started\",\n  duration = 0.3,\n  iconSize = 24,\n  className,\n  ...props\n}: HoverArrowButtonProps) {\n  return (\n    <LazyMotion features={domAnimation}>\n      <m.button\n        className={cn(\n          \"group relative inline-flex items-center justify-center overflow-hidden rounded-full bg-black px-6 py-3 text-white transition-all  dark:bg-white dark:text-black  text-base font-medium cursor-pointer\",\n          className\n        )}\n        whileHover=\"hover\"\n        initial=\"initial\"\n        whileTap=\"tap\"\n        variants={{\n          initial: { scale: 1 },\n          hover: { scale: 1 },\n        }}\n        {...props}\n      >\n        <m.div\n          className=\"flex items-center justify-center overflow-hidden\"\n          variants={{\n            initial: { width: 0, opacity: 0 },\n            hover: { width: \"auto\", opacity: 1 },\n          }}\n          transition={{\n            duration: duration,\n            ease: [0.165, 0.84, 0.44, 1],\n          }}\n        >\n          <m.div\n            className=\"flex items-center justify-center\"\n            variants={{\n              initial: { x: \"-200%\", opacity: 0 },\n              hover: { x: 0, opacity: 1 },\n            }}\n            transition={{\n              duration: duration,\n              ease: [0.165, 0.84, 0.44, 1],\n            }}\n          >\n            <IconArrowRight\n              size={iconSize}\n              className=\"text-white dark:text-black\"\n            />\n          </m.div>\n        </m.div>\n\n        <span className=\"mx-2\">{text}</span>\n\n        <m.div\n          className=\"flex items-center justify-center overflow-hidden\"\n          variants={{\n            initial: { width: \"auto\", opacity: 1 },\n            hover: { width: 0, opacity: 0 },\n          }}\n          transition={{\n            duration: duration,\n            ease: [0.165, 0.84, 0.44, 1],\n          }}\n        >\n          <m.div\n            className=\"flex items-center justify-center\"\n            variants={{\n              initial: { x: 0, opacity: 1 },\n              hover: { x: \"200%\", opacity: 0 },\n            }}\n            transition={{\n              duration: duration,\n              ease: [0.165, 0.84, 0.44, 1],\n            }}\n          >\n            <IconArrowRight\n              size={iconSize}\n              className=\"text-white dark:text-black\"\n            />\n          </m.div>\n        </m.div>\n      </m.button>\n    </LazyMotion>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}