{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "z-contact-display",
  "title": "Z Contact Display",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json",
    "https://ui.orchid.ai/r/z-avatar.json",
    "https://ui.orchid.ai/r/z-hover.json",
    "https://ui.orchid.ai/r/z-popover.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/spectrum/molecules/z-contact-display/z-contact-display.tsx",
      "content": "\"use client\";\nimport ZAvatar from \"../../atoms/z-avatar/z-avatar\";\nimport ZHover from \"../../atoms/z-hover/z-hover\";\nimport ZPopover from \"../../atoms/z-popover/z-popover\";\nimport { cn } from \"../../../lib/ui-utils\";\nimport { useState } from 'react';\ntype ContactInfo = {\n    from?: string;\n    to?: string;\n    cc?: string;\n    bcc?: string;\n    replyTo?: string;\n    date?: string;\n    mailedBy?: string;\n    signedBy?: string;\n    security?: string;\n};\ntype Props = {\n    className?: string;\n    name: string;\n    fallback?: string;\n    avatar?: string;\n    contactInfo?: ContactInfo;\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n};\nexport default function ZContactDisplay({ className, name, fallback, avatar, contactInfo, open, onOpenChange, }: Props) {\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n    const isOpen = open ?? uncontrolledOpen;\n    const setOpen = onOpenChange ?? setUncontrolledOpen;\n    const contactDetails = [\n        { label: 'From', value: contactInfo?.from },\n        { label: 'To', value: contactInfo?.to },\n        { label: 'Cc', value: contactInfo?.cc },\n        { label: 'Bcc', value: contactInfo?.bcc },\n        { label: 'Reply To', value: contactInfo?.replyTo },\n        { label: 'Date', value: contactInfo?.date },\n        { label: 'Mailed-By', value: contactInfo?.mailedBy },\n        { label: 'Signed-By', value: contactInfo?.signedBy },\n        { label: 'Security', value: contactInfo?.security },\n    ].filter((item) => item.value);\n    return (<ZPopover open={isOpen} onOpenChange={setOpen} side=\"bottom\" align=\"start\">\n      <ZPopover.Trigger asChild className=\"outline-none\">\n        <ZHover borderRadius=\"rounded-lg\" background=\"bg-neutral-strong\" className={cn('flex items-center gap-1 px-1 py-1', className)}>\n          <ZAvatar size=\"sm\" src={avatar} fallback={fallback || name}/>\n          <span className=\"text-copy text-neutral px-1\">{name}</span>\n        </ZHover>\n      </ZPopover.Trigger>\n      <ZPopover.Content>\n        <div className=\"space-y-3 p-2 max-w-[500px]\">\n          <div className=\"flex items-center gap-2\">\n            <ZAvatar size=\"md\" src={avatar} fallback={fallback || name}/>\n            <div>\n              <h3 className=\"text-copy text-neutral font-semibold\">{name}</h3>\n            </div>\n          </div>\n\n          {contactDetails.length > 0 && (<div className=\"space-y-1\">\n              {contactDetails.map((detail) => (<div key={detail.label} className=\"flex items-start gap-2\">\n                  <p className=\"text-copy-sm text-neutral-subtle w-7 shrink-0 pt-1\">{detail.label}</p>\n                  <ZHover className=\"text-copy-sm text-neutral min-w-0 flex-1 px-2 py-1 wrap-break-word\">\n                    {detail.value}\n                  </ZHover>\n                </div>))}\n            </div>)}\n        </div>\n      </ZPopover.Content>\n    </ZPopover>);\n}\n",
      "type": "registry:ui",
      "target": "@ui/orchid/spectrum/molecules/z-contact-display/z-contact-display.tsx"
    }
  ],
  "type": "registry:ui"
}