{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-hover-card",
  "title": "MicroClub Hover Card",
  "description": "A hover card component for MicroClub UI",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/ui/mc-hover-card.tsx",
      "content": "'use client';\n\nimport { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';\n\nimport { cn } from '@/lib/utils';\n\nfunction McHoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\nfunction McHoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\nfunction McHoverCardContent({\n  className,\n  side = 'bottom',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 4,\n  textAlign = 'start',\n  imageSrc = null,\n  imageposition = 'top',\n  title,\n  subtitle,\n  description,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<PreviewCardPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'> & {\n    textAlign?: 'start' | 'center';\n    imageSrc?: string | null;\n    imageposition?: 'top' | 'bottom';\n    title?: string;\n    subtitle?: string;\n    description?: string;\n  }) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50 w-76 origin-(--transform-origin) rounded-lg bg-card p-4 text-sm text-popover-foreground shadow-md ring-inset  ring-1 ring-border flex flex-col \"\n      >\n        <div className={`${imageposition === 'top' ? 'flex-col' : 'flex-col-reverse'} flex gap-4`}>\n          {imageSrc && <img src={imageSrc} alt=\"Profile\" className={`w-full    `} />}\n          <div\n            className={`${textAlign === 'start' ? 'items-start' : 'items-center'} flex flex-col gap-2`}\n          >\n            {title && <h4 className=\"font-semibold text-card-foreground\">{title}</h4>}\n            <div\n              className={`${textAlign === 'start' ? 'items-start' : 'text-center'} flex flex-col`}\n            >\n              {subtitle && <p className=\" font-regular text-card-foreground\">{subtitle}</p>}\n              {description && <p className=\"font-regular text-card-foreground\">{description}</p>}\n            </div>\n          </div>\n        </div>\n\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            ' outline-hidden duration-100   ',\n            ' data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 ',\n            ' data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ',\n            ' data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 ',\n            'data-closed:zoom-out-95 gap-4',\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  );\n}\n\nexport { McHoverCard, McHoverCardTrigger, McHoverCardContent };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}