{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "see-more-swap-button",
  "title": "See More Swap Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A pill button whose arrow circle swaps sides while its surface changes color.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/see-more-swap-button.tsx",
      "content": "import { ArrowDown } from \"lucide-react\";\n\nexport function SeeMoreSwapButton() {\n  return (\n    <button type=\"button\" className=\"group inline-flex w-[196px] cursor-pointer appearance-none box-border items-center justify-center overflow-hidden rounded-full border border-[light-dark(#d2d7de,transparent)] bg-[light-dark(#ffffff,#f0f0f0)] px-4 py-3 text-[light-dark(#14181e,#101016)] [font-family:Arial,Helvetica,sans-serif] transition-colors duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] hover:bg-[light-dark(#14181e,#22222d)] hover:text-[light-dark(#ffffff,#f0f0f0)] focus-visible:bg-[light-dark(#14181e,#22222d)] focus-visible:text-[light-dark(#ffffff,#f0f0f0)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]\">\n      <span className=\"relative flex h-10 w-full items-center justify-center\">\n        <span className=\"absolute left-0 grid size-10 place-items-center rounded-full bg-[light-dark(#14181e,#101016)] text-white transition-transform duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:-translate-x-16 group-focus-visible:-translate-x-16\" aria-hidden=\"true\">\n          <ArrowDown size={20} strokeWidth={2.4} />\n        </span>\n        <span className=\"relative z-10 translate-x-4 whitespace-nowrap text-center text-[16px] font-medium [line-height:normal] transition-transform duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:-translate-x-4 group-focus-visible:-translate-x-4\">See more</span>\n        <span className=\"absolute right-0 grid size-10 translate-x-16 place-items-center rounded-full bg-white text-[light-dark(#14181e,#101016)] transition-transform duration-[500ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:translate-x-0 group-focus-visible:translate-x-0\" aria-hidden=\"true\">\n          <ArrowDown size={20} strokeWidth={2.4} />\n        </span>\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/see-more-swap-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/see-more-swap-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}