{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-card",
  "type": "registry:ui",
  "title": "Hover card (MIAN)",
  "description": "A preview card that appears when hovering or focusing a link, profiles, link previews, definitions.",
  "categories": [
    "overlays",
    "hover card",
    "preview",
    "profile card",
    "link preview"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/hover-card.css",
      "type": "registry:file",
      "target": "mian/components/hover-card.css",
      "content": ".mn-hover-card { position: relative; display: inline-block; }\n.mn-hover-card-content {\n  position: absolute; z-index: 60; top: calc(100% + 8px); left: 50%;\n  display: none; width: max-content; max-width: min(20rem, calc(100vw - 1.5rem));\n  opacity: 0; transform: translate(-50%, 4px);\n  transition: opacity var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease), display var(--mn-duration) allow-discrete;\n  transition-delay: 0ms; box-shadow: var(--mn-shadow-lg);\n}\n.mn-hover-card:hover > .mn-hover-card-content, .mn-hover-card:focus-within > .mn-hover-card-content { display: block; opacity: 1; transform: translate(-50%, 0); transition-delay: 400ms; }\n.mn-hover-card:focus-within > .mn-hover-card-content { transition-delay: 0ms; }\n@starting-style { .mn-hover-card:is(:hover, :focus-within) > .mn-hover-card-content { opacity: 0; transform: translate(-50%, 4px); } }\n.mn-hover-card-start > .mn-hover-card-content { left: 0; transform: translate(0, 4px); }\n.mn-hover-card-start:is(:hover, :focus-within) > .mn-hover-card-content { transform: none; }"
    },
    {
      "path": "mian/examples/hover-card.html",
      "type": "registry:file",
      "target": "mian/examples/hover-card.html",
      "content": "<!-- Profile preview -->\n<p>Made by <span class=\"mn-hover-card\"><a class=\"mn-link\" href=\"#\">@btn-group</a>\n  <span class=\"mn-hover-card-content mn-card\"><span class=\"mn-card-body mn-row\" style=\"align-items:flex-start;flex-wrap:nowrap;gap:.75rem;width:17rem\">\n    <span class=\"mn-avatar\">面</span>\n    <span><strong>BTN GROUP SRL</strong><br><span class=\"mn-muted\">Makers of MIAN: 54+ components and many noodles.</span></span>\n  </span></span>\n</span>.</p>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/hover-card",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-hover-card",
        "mn-hover-card-content",
        "mn-hover-card-start"
      ],
      "accessibility": [
        "It appears on keyboard focus as well as hover, after a short delay on hover.",
        "Only put supplementary information in it, never the only way to reach something. The trigger must work on its own."
      ],
      "intents": [
        "link preview",
        "profile preview on hover",
        "definition popup"
      ]
    }
  }
}