{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card (MIAN)",
  "description": "A surface for grouped content: header, body, footer, media and actions.",
  "categories": [
    "data display",
    "card",
    "panel",
    "surface",
    "container"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/card.css",
      "type": "registry:file",
      "target": "mian/components/card.css",
      "content": ".mn-card {\n  display: flex; flex-direction: column; min-width: 0;\n  border: var(--mn-border-w) solid var(--mn-border);\n  border-radius: var(--mn-radius-box);\n  background: var(--mn-card); color: var(--mn-fg);\n  backdrop-filter: var(--mn-backdrop); -webkit-backdrop-filter: var(--mn-backdrop);\n  box-shadow: var(--mn-shadow-md);\n  overflow: hidden;\n}\n.mn-card-header { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 1.25rem 0; }\n.mn-card-header:has(> .mn-card-actions) { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; }\n.mn-card-title { margin: 0; font: var(--mn-heading-weight) 1.0625rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; }\n.mn-card-description { margin: 0; font-size: var(--mn-text-sm); color: var(--mn-muted); line-height: 1.5; }\n.mn-card-body { padding: 1.25rem; flex: 1; font-size: var(--mn-text-sm); line-height: 1.6; }\n.mn-card-header + .mn-card-body { padding-top: 1rem; }\n.mn-card-footer { display: flex; align-items: center; gap: .5rem; padding: 0 1.25rem 1.25rem; }\n.mn-card-footer-bordered { padding-top: 1rem; border-top: var(--mn-border-w) solid var(--mn-border); background: color-mix(in oklab, var(--mn-surface-2) 50%, transparent); }\n.mn-card-media { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mn-surface-2); }\n.mn-card-actions { display: flex; gap: .25rem; flex: none; }\n.mn-card-flat { box-shadow: none; }\n.mn-card-ghost { border-color: transparent; box-shadow: none; background: transparent; }\na.mn-card, .mn-card-interactive { text-decoration: none; transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease); }\na.mn-card:hover, .mn-card-interactive:hover { border-color: color-mix(in oklab, var(--mn-border), var(--mn-fg) 25%); box-shadow: var(--mn-shadow-lg); }\na.mn-card:focus-visible { outline: none; box-shadow: var(--mn-focus); }"
    },
    {
      "path": "mian/examples/card.html",
      "type": "registry:file",
      "target": "mian/examples/card.html",
      "content": "<!-- Form card -->\n<div class=\"mn-card\" style=\"max-width:24rem\">\n  <div class=\"mn-card-header\">\n    <h3 class=\"mn-card-title\">Create project</h3>\n    <p class=\"mn-card-description\">Deploy your new project in one click.</p>\n  </div>\n  <div class=\"mn-card-body mn-form\">\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"cp-n\">Name</label><input class=\"mn-input\" id=\"cp-n\" placeholder=\"My project\"></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"cp-f\">Framework</label><select class=\"mn-select\" id=\"cp-f\"><option>Astro</option><option>Laravel</option></select></div>\n  </div>\n  <div class=\"mn-card-footer\" style=\"justify-content:space-between\"><button class=\"mn-btn mn-btn-outline\">Cancel</button><button class=\"mn-btn\">Deploy</button></div>\n</div>\n\n<!-- Media card -->\n<article class=\"mn-card\" style=\"max-width:20rem\">\n  <div class=\"mn-card-media\" style=\"background:linear-gradient(135deg, var(--mn-primary), var(--mn-accent))\"></div>\n  <div class=\"mn-card-header\">\n    <div class=\"mn-row\"><span class=\"mn-badge mn-badge-soft\">Guide</span><span class=\"mn-muted mn-small\">6 min read</span></div>\n    <h3 class=\"mn-card-title\">Choosing a noodle for your product</h3>\n  </div>\n  <div class=\"mn-card-body mn-muted\">Twelve design systems, one component set. How to pick the one that fits your brand.</div>\n</article>\n\n<!-- With actions -->\n<div class=\"mn-card\" style=\"max-width:26rem\">\n  <div class=\"mn-card-header\">\n    <div><h3 class=\"mn-card-title\">Notifications</h3><p class=\"mn-card-description\">You have 3 unread messages.</p></div>\n    <div class=\"mn-card-actions\"><button class=\"mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm\" aria-label=\"Settings\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z\"/></svg></button></div>\n  </div>\n  <div class=\"mn-card-body\">Your call has been confirmed for 14:00 tomorrow.</div>\n  <div class=\"mn-card-footer mn-card-footer-bordered\"><button class=\"mn-btn mn-btn-block\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg> Mark all as read</button></div>\n</div>"
    }
  ],
  "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/card",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-card",
        "mn-card-header · mn-card-title · mn-card-description",
        "mn-card-body · mn-card-footer · mn-card-footer-bordered",
        "mn-card-media · mn-card-actions",
        "mn-card-flat · mn-card-ghost · mn-card-interactive"
      ],
      "accessibility": [
        "For a fully clickable card, make the card an <a> (or put one link in the title and stretch it), never nest interactive controls inside a link."
      ],
      "intents": [
        "card",
        "content box",
        "panel",
        "settings card",
        "summary card"
      ]
    }
  }
}