{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expanding-newsletter-button",
  "title": "Expanding Newsletter Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "An orange newsletter pill with a growing dark circle and an arrow that slides in from the left.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/expanding-newsletter-button.tsx",
      "content": "import { ArrowRight } from \"lucide-react\";\n\nexport function ExpandingNewsletterButton() {\n  return (\n    <button type=\"button\" className=\"group relative inline-flex h-[42px] w-[min(145px,calc(100vw-40px))] cursor-pointer appearance-none items-center justify-center overflow-hidden rounded-full border-0 bg-[#f97316] p-0 font-[Arial,Helvetica,sans-serif] text-[light-dark(#14181e,#fffaf6)] transition-[background-color,transform] duration-300 hover:bg-[#fb7b21] focus-visible:bg-[#fb7b21] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[light-dark(#14181e,#fffaf6)] active:scale-[.98] motion-reduce:transition-none\">\n      <span className=\"absolute left-[9px] top-1/2 grid size-6 -translate-y-1/2 place-items-center overflow-hidden rounded-full bg-[light-dark(#ffffff,#141419)] text-[light-dark(#14181e,#fffaf6)] [transition:left_.42s_cubic-bezier(.16,1,.3,1),width_.42s_cubic-bezier(.16,1,.3,1),height_.42s_cubic-bezier(.16,1,.3,1)] group-hover:left-1 group-hover:size-[34px] group-focus-visible:left-1 group-focus-visible:size-[34px] motion-reduce:transition-none\" aria-hidden=\"true\">\n        <ArrowRight size={15} strokeWidth={2.5} className=\"-translate-x-[26px] transition-transform duration-[420ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-x-0 group-focus-visible:translate-x-0 motion-reduce:transition-none\" />\n      </span>\n      <span className=\"translate-x-2 whitespace-nowrap text-[15px] font-normal leading-none tracking-[-.45px]\">Newsletter</span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/expanding-newsletter-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/expanding-newsletter-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}