{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"animated-button","type":"registry:ui","title":"Animated Button","description":"On hover a slanted fill sweeps across while the label slides out and an arrow slides in.","dependencies":["lucide-react"],"registryDependencies":[],"files":[{"path":"registry/ui/animated-button.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface AnimatedButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Icon that slides in on hover. Defaults to an arrow. */\n  icon?: ReactNode;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst sizes = { sm: \"h-9 px-5 text-sm\", md: \"h-11 px-7 text-sm\", lg: \"h-13 px-9 text-base\" };\nconst ease = \"duration-500 ease-[cubic-bezier(.65,0,.35,1)] motion-reduce:transition-none\";\nconst slideIn = \"group-hover:translate-x-0 group-focus-visible:translate-x-0\";\n\nexport function AnimatedButton({ icon, size = \"md\", className, children, ...props }: AnimatedButtonProps) {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={`group relative isolate inline-flex items-center justify-center overflow-hidden rounded-full border border-border bg-card font-medium text-foreground shadow-sm transition-[color,border-color,scale] ${ease} hover:border-primary hover:text-primary-foreground focus-visible:border-primary focus-visible:text-primary-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 ${sizes[size]} ${className ?? \"\"}`}\n    >\n      {/* Fill sweeps in from the left with a slanted leading edge. */}\n      <span\n        aria-hidden\n        className={`absolute inset-y-0 -left-1/4 -z-10 w-[150%] -translate-x-full -skew-x-12 bg-primary transition-[translate] ${ease} ${slideIn}`}\n      />\n      <span\n        className={`inline-flex items-center gap-2 whitespace-nowrap transition-[translate,opacity] ${ease} group-hover:translate-x-[120%] group-hover:opacity-0 group-focus-visible:translate-x-[120%] group-focus-visible:opacity-0`}\n      >\n        {children}\n      </span>\n      <span\n        aria-hidden\n        className={`absolute inset-0 grid -translate-x-[120%] place-items-center opacity-0 transition-[translate,opacity] ${ease} ${slideIn} group-hover:opacity-100 group-focus-visible:opacity-100 [&_svg]:size-5`}\n      >\n        {icon ?? <ArrowRight strokeWidth={2.25} />}\n      </span>\n    </button>\n  );\n}\n"}]}