{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-card",
  "type": "registry:ui",
  "title": "Product card (MIAN)",
  "description": "Products in a shop grid: image, name, variant, price and a badge, the whole card is one link.",
  "categories": [
    "sections",
    "product",
    "product card",
    "shop",
    "store"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/product-card.css",
      "type": "registry:file",
      "target": "mian/components/product-card.css",
      "content": ".mn-products { display: grid; gap: 2.25rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; }\n.mn-product { position: relative; display: grid; gap: .3rem; align-content: start; color: var(--mn-fg); }\n.mn-product > * { margin: 0; }\n.mn-product > .mn-media { margin-bottom: .7rem; }\n.mn-product > .mn-media > * { transition: scale 600ms var(--mn-ease); }\n.mn-product:hover > .mn-media > * { scale: 1.035; }\n.mn-product-name { font: 550 .9688rem/1.35 var(--mn-font); }\n.mn-product-name a { color: inherit; text-decoration: none; }\n.mn-product-name a::after { content: \"\"; position: absolute; inset: 0; z-index: 1; }\n.mn-product-name a:focus-visible { outline: none; }\n.mn-product:has(.mn-product-name a:focus-visible) { box-shadow: var(--mn-focus); border-radius: var(--mn-radius-box); }\n.mn-product-meta { color: var(--mn-muted); font-size: .875rem; }\n.mn-product-price { font-variant-numeric: tabular-nums; font-size: .9375rem; }\n.mn-product-price s { color: var(--mn-muted); margin-inline-start: .4rem; }\n.mn-product .mn-media > .mn-badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; }"
    },
    {
      "path": "mian/examples/product-card.html",
      "type": "registry:file",
      "target": "mian/examples/product-card.html",
      "content": "<!-- Products -->\n<ul class=\"mn-products\">\n  <li class=\"mn-product\"><div class=\"mn-media mn-media-portrait\"><svg viewBox=\"0 0 400 320\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" aria-label=\"Illustration: three ceramic vases\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"400\" height=\"320\" fill=\"var(--mn-surface-2)\"/>\n<rect y=\"262\" width=\"400\" height=\"58\" fill=\"color-mix(in srgb, var(--mn-fg) 7%, var(--mn-surface-2))\"/>\n<path d=\"M88 262c-30-24-34-70-10-96 8-9 10-20 6-34h40c-4 14-2 25 6 34 24 26 20 72-10 96Z\" fill=\"var(--mn-primary)\"/>\n<path d=\"M186 262c-22-4-36-24-34-58 2-40 22-70 26-110h40c4 40 24 70 26 110 2 34-12 54-34 58Z\" fill=\"var(--mn-surface)\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\"/>\n<path d=\"M170 150h56\" stroke=\"var(--mn-fg)\" stroke-width=\"2.5\" opacity=\".35\"/>\n<path d=\"M270 262c-6-30 0-64 22-84h52c22 20 28 54 22 84Z\" fill=\"var(--mn-accent)\"/>\n<ellipse cx=\"318\" cy=\"178\" rx=\"26\" ry=\"6\" fill=\"color-mix(in srgb, #000 22%, var(--mn-accent))\"/></svg></div><h3 class=\"mn-product-name\"><a href=\"#\">Tall vase, ash glaze</a></h3><p class=\"mn-product-meta\">Stoneware · 32 cm</p><p class=\"mn-product-price\">€120</p></li>\n  <li class=\"mn-product\"><div class=\"mn-media mn-media-portrait\"><svg viewBox=\"0 0 600 450\" preserveAspectRatio=\"xMidYMid slice\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"600\" height=\"450\" fill=\"var(--mn-surface-2)\"/><circle cx=\"220\" cy=\"225\" r=\"120\" fill=\"var(--mn-primary)\"/><rect x=\"300\" y=\"105\" width=\"190\" height=\"240\" fill=\"none\" stroke=\"var(--mn-fg)\" stroke-width=\"2\"/><path d=\"M60 390h480\" stroke=\"var(--mn-fg)\" stroke-width=\"2\"/></svg><span class=\"mn-badge mn-accent\">Sale</span></div><h3 class=\"mn-product-name\"><a href=\"#\">Moon jar, small</a></h3><p class=\"mn-product-meta\">Porcelain · 18 cm</p><p class=\"mn-product-price\">€84 <s><span class=\"mn-sr-only\">was </span>€105</s></p></li>\n  <li class=\"mn-product\"><div class=\"mn-media mn-media-placeholder\" style=\"--ratio:4/5\" role=\"img\" aria-label=\"Photo: a set of four bowls stacked, top-down\">Photo: a set of four bowls stacked, top-down</div><h3 class=\"mn-product-name\"><a href=\"#\">Everyday bowls, set of 4</a></h3><p class=\"mn-product-meta\">Speckled white</p><p class=\"mn-product-price\">€64</p></li>\n</ul>"
    }
  ],
  "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/product-card",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-products",
        "mn-product",
        "mn-product-price s"
      ],
      "accessibility": [
        "Only the name is a link, stretched over the card, so each product is announced once.",
        "Say “Sale” and the old price in text, not only with a strike-through."
      ],
      "intents": [
        "product grid",
        "shop listing",
        "ecommerce products",
        "catalogue",
        "collection page",
        "store items"
      ]
    }
  }
}