{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sliding-send-button",
  "title": "Sliding Send Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A bordered share pill whose label glides right as an orange send icon enters from the left.",
  "files": [
    {
      "path": "registry/microkit/sliding-send-button.tsx",
      "content": "export function SlidingSendButton() {\n  return (\n    <button type=\"button\" className=\"group inline-flex h-[50px] w-[min(170px,calc(100vw-40px))] cursor-pointer appearance-none items-center justify-center overflow-hidden rounded-full border border-[light-dark(#adb6c3,#48484f)] bg-[light-dark(#ffffff,#15151b)] p-0 font-[Arial,Helvetica,sans-serif] text-[light-dark(#14181e,#f7f7fa)] transition-[border-color,background-color] duration-300 hover:border-[light-dark(#a2aab6,#5a5a62)] hover:bg-[light-dark(#f0f2f5,#18181e)] focus-visible:border-[light-dark(#a2aab6,#5a5a62)] focus-visible:bg-[light-dark(#f0f2f5,#18181e)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[5px] focus-visible:outline-[#f97316] motion-reduce:transition-none\">\n      <span className=\"relative flex w-full items-center justify-center\">\n        <span className=\"whitespace-nowrap text-[16px] font-normal leading-none tracking-[-.4px] transition-transform duration-[450ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-x-[17px] group-focus-visible:translate-x-[17px] motion-reduce:transition-none\">Share it now</span>\n        <span className=\"absolute left-[calc(50%-59px)] grid size-5 -translate-x-3 scale-0 place-items-center text-[#f97316] transition-transform duration-[450ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-x-0 group-hover:scale-100 group-focus-visible:translate-x-0 group-focus-visible:scale-100 motion-reduce:transition-none\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 32 32\" fill=\"none\" className=\"size-full -rotate-[5deg]\">\n            <path d=\"M28.14 4.94 19.6 27.72c-.4 1.06-1.87 1.1-2.33.06l-4.04-9.05-9.03-4.02c-1.04-.46-1-1.93.06-2.33L27.04 3.86c.74-.28 1.38.34 1.1 1.08Z\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinejoin=\"round\" />\n            <path d=\"m13.02 18.63 5.75-5.75\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" />\n          </svg>\n        </span>\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/sliding-send-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/sliding-send-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}