{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "white-contact-orbit-button",
  "title": "White Contact Orbit Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A white Get in touch pill whose arrow settles into a black circular control on hover.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/white-contact-orbit-button.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\n\nexport function WhiteContactOrbitButton() {\n  return (\n    <button type=\"button\" className=\"group relative inline-flex h-[50px] w-[160px] cursor-pointer appearance-none items-center justify-center overflow-hidden rounded-full border-0 bg-white p-0 font-[Arial,Helvetica,sans-serif] text-[light-dark(#14181e,#111)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white\">\n      <span className=\"relative z-10 mr-5 text-base font-normal leading-none tracking-[-.03em] transition-transform duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] motion-reduce:transition-none\">Get in touch</span>\n      <span className=\"absolute right-2 grid size-[34px] place-items-center rounded-full text-[light-dark(#14181e,#111)] transition-colors duration-[120ms] group-hover:text-white group-hover:delay-[80ms] group-focus-visible:text-white group-focus-visible:delay-[80ms] motion-reduce:transition-none\">\n        <span className=\"absolute inset-0 origin-center scale-0 rounded-[inherit] bg-[light-dark(#14181e,#111)] transition-transform duration-[420ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:scale-100 group-focus-visible:scale-100 motion-reduce:transition-none\" />\n        <ArrowRight className=\"relative z-10 transition-transform duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:-rotate-45 group-focus-visible:-rotate-45 motion-reduce:transition-none\" size={21} strokeWidth={2.6} />\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/white-contact-orbit-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/white-contact-orbit-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}