{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slide-arrow-button",
  "type": "registry:ui",
  "title": "Slide Arrow Button",
  "description": "A pill button whose label rolls up on hover while the chevron slides out of its lime badge and a fresh one slides in from the left. Pure CSS — no GSAP dependency.",
  "dependencies": [],
  "registryDependencies": [],
  "cssVars": {
    "theme": {}
  },
  "files": [
    {
      "path": "components/tweenui/slide-arrow-button.tsx",
      "type": "registry:component",
      "target": "components/tweenui/slide-arrow-button.tsx",
      "content": "'use client';\n\nimport type { ComponentPropsWithRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nfunction Chevron({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2.5}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"m9 6 6 6-6 6\" />\n    </svg>\n  );\n}\n\nexport interface SlideArrowButtonProps extends ComponentPropsWithRef<'button'> {\n  /** Button label. Must be a string — it is duplicated for the roll. */\n  children: string;\n}\n\nexport default function SlideArrowButton({\n  children,\n  className,\n  type = 'button',\n  ...props\n}: SlideArrowButtonProps) {\n  const label =\n    'block text-sm leading-5 font-medium whitespace-nowrap transition-transform duration-500 ease-in-out group-hover:-translate-y-full motion-reduce:transition-none motion-reduce:group-hover:translate-y-0';\n\n  return (\n    <button\n      type={type}\n      className={cn(\n        'group inline-flex h-12 cursor-pointer items-center justify-center gap-2 rounded-xl border border-transparent bg-[#045f64] px-6 text-[#c6f56f] shadow-[0_1px_1px_rgba(16,24,40,0.16)] transition-colors duration-300 hover:bg-[#045f64]/95 focus-visible:ring-2 focus-visible:ring-[#045f64] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60 dark:ring-offset-[#12161F]',\n        className\n      )}\n      {...props}\n    >\n      {/* Label rolls up to an identical copy on hover. */}\n      <span className=\"block h-5 overflow-hidden\">\n        <span className={label}>{children}</span>\n        <span className={label} aria-hidden=\"true\">\n          {children}\n        </span>\n      </span>\n\n      {/* Chevron slides out of the badge while a fresh one slides in. */}\n      <span className=\"relative grid size-6 place-items-center overflow-hidden rounded-full bg-[#c6f56f]\">\n        <Chevron className=\"col-start-1 row-start-1 size-3.5 stroke-[#045f64] transition-transform duration-400 ease-in-out group-hover:translate-x-6 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0\" />\n        <Chevron className=\"col-start-1 row-start-1 size-3.5 -translate-x-6 stroke-[#045f64] transition-transform duration-400 ease-in-out group-hover:translate-x-0 motion-reduce:hidden\" />\n      </span>\n    </button>\n  );\n}\n"
    }
  ],
  "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/slide-arrow-button"
}