{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-details-reveal",
  "title": "Contact Details Reveal",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A compact white contact label that shifts upward to reveal muted contact details with an orange accent.",
  "files": [
    {
      "path": "registry/microkit/contact-details-reveal.tsx",
      "content": "export function ContactDetailsReveal() {\n  return (\n    <button type=\"button\" className=\"group relative inline-flex h-[54px] w-[min(190px,calc(100vw_-_40px))] cursor-pointer appearance-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 font-[Arial,Helvetica,sans-serif] text-left text-[light-dark(#14181e,#f7f7fa)] focus-visible:rounded-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]\">\n      <span className=\"relative size-[14px] shrink-0 translate-x-[18px] rounded-full bg-[light-dark(#14181e,#f7f7fa)] [transition:background-color_.32s_ease,transform_.42s_cubic-bezier(.16,1,.3,1)] group-hover:[transform:translate(18px,4px)] group-hover:bg-[#f97316] group-focus-visible:[transform:translate(18px,4px)] group-focus-visible:bg-[#f97316] motion-reduce:transition-none\" aria-hidden=\"true\" />\n      <span className=\"relative ml-[15px] h-[46px] w-[145px] translate-x-[18px]\">\n        <span className=\"absolute left-0 top-1/2 -translate-y-1/2 whitespace-nowrap text-[19px] font-normal leading-none tracking-[-.55px] [transition:top_.42s_cubic-bezier(.16,1,.3,1),transform_.42s_cubic-bezier(.16,1,.3,1)] group-hover:top-[6px] group-hover:translate-y-0 group-focus-visible:top-[6px] group-focus-visible:translate-y-0 motion-reduce:transition-none\">Contact us</span>\n        <span className=\"absolute left-0 top-[30px] translate-y-[15px] whitespace-nowrap text-[12px] font-normal leading-none tracking-[-.2px] text-[light-dark(#868f9c,#77777d)] opacity-0 [transition:opacity_.24s_ease_.05s,transform_.42s_cubic-bezier(.16,1,.3,1)] group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100 motion-reduce:transition-none\">hello@contactus.com</span>\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/contact-details-reveal.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/contact-details-reveal",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}