{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "rating",
  "type": "registry:ui",
  "title": "Rating (MIAN)",
  "description": "Star rating built from radio buttons, so it submits with a form and needs no JavaScript.",
  "categories": [
    "forms",
    "rating",
    "stars",
    "review",
    "score"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/rating.css",
      "type": "registry:file",
      "target": "mian/components/rating.css",
      "content": ".mn-rating { --_r: var(--_c, #f59e0b); display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; border: 0; margin: 0; padding: 0; }\n.mn-rating > input { position: absolute; opacity: 0; width: 1px; height: 1px; }\n.mn-rating > label {\n  width: 1.5rem; height: 1.5rem; cursor: pointer;\n  background: var(--mn-input);\n  clip-path: polygon(50% 0, 61.8% 35.3%, 100% 35.3%, 69.1% 57.1%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.1%, 0 35.3%, 38.2% 35.3%);\n  transition: background-color var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease);\n}\n.mn-rating > input:checked ~ label,\n.mn-rating:not(:has(input:disabled)) > label:hover, .mn-rating:not(:has(input:disabled)) > label:hover ~ label { background: var(--_r); }\n.mn-rating:not(:has(input:disabled)) > label:hover { transform: scale(1.1); }\n.mn-rating > input:focus-visible + label { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-rating-sm > label { width: 1.1rem; height: 1.1rem; }\n.mn-rating-lg > label { width: 2rem; height: 2rem; }"
    },
    {
      "path": "mian/examples/rating.html",
      "type": "registry:file",
      "target": "mian/examples/rating.html",
      "content": "<!-- Basic -->\n<fieldset class=\"mn-rating\" aria-label=\"Rating\">\n  <input type=\"radio\" id=\"r5\" name=\"rating\" value=\"5\"><label for=\"r5\" title=\"5 stars\"><span class=\"mn-sr-only\">5 stars</span></label>\n  <input type=\"radio\" id=\"r4\" name=\"rating\" value=\"4\" checked><label for=\"r4\" title=\"4 stars\"><span class=\"mn-sr-only\">4 stars</span></label>\n  <input type=\"radio\" id=\"r3\" name=\"rating\" value=\"3\"><label for=\"r3\" title=\"3 stars\"><span class=\"mn-sr-only\">3 stars</span></label>\n  <input type=\"radio\" id=\"r2\" name=\"rating\" value=\"2\"><label for=\"r2\" title=\"2 stars\"><span class=\"mn-sr-only\">2 stars</span></label>\n  <input type=\"radio\" id=\"r1\" name=\"rating\" value=\"1\"><label for=\"r1\" title=\"1 star\"><span class=\"mn-sr-only\">1 star</span></label>\n</fieldset>"
    }
  ],
  "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/rating",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-rating",
        "mn-rating-sm · mn-rating-lg"
      ],
      "accessibility": [
        "Each star is a radio with a text label (\"3 stars\"), so it is announced and arrow-keyable. Inputs are listed highest first for the CSS; the visual order is still left to right."
      ],
      "intents": [
        "star rating input",
        "rate a product",
        "review stars"
      ]
    }
  }
}