{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "seat-map",
  "type": "registry:ui",
  "title": "Seat map (MIAN)",
  "description": "Pick seats for a cinema, theatre, bus or venue: rows, an aisle, taken and accessible seats, and a legend.",
  "categories": [
    "forms",
    "seat map",
    "seat picker",
    "seating",
    "cinema"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/seat-map.css",
      "type": "registry:file",
      "target": "mian/components/seat-map.css",
      "content": ".mn-seatmap { display: grid; gap: 1rem; justify-items: safe center; max-width: 100%; overflow-x: auto; }\n.mn-seatmap-screen { width: min(80%, 22rem); padding-top: .5rem; border-top: 4px solid var(--mn-input); border-radius: 50% 50% 0 0 / 12px 12px 0 0; color: var(--mn-muted); font-size: .75rem; text-align: center; }\n.mn-seats { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-inline-size: 0; }\n.mn-seat-row { display: flex; align-items: center; gap: clamp(.2rem, 1.2vw, .35rem); }\n.mn-seat-row > span { flex: none; width: 1.25rem; color: var(--mn-muted); font: 500 .75rem/1 var(--mn-font-mono); text-align: center; }\n.mn-seat-aisle { width: .9rem; flex: none; }\n.mn-seat { position: relative; display: inline-block; flex: 0 1 1.7rem; min-width: 1.2rem; width: 1.7rem; height: 1.55rem; border: var(--mn-border-w) solid var(--mn-input); border-radius: 7px 7px 3px 3px; background: var(--mn-surface); cursor: pointer; transition: background-color var(--mn-duration) var(--mn-ease); }\n.mn-seat > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }\n.mn-seat:hover { border-color: var(--mn-fg); }\n.mn-seat:has(input:checked) { border-color: var(--mn-primary); background: var(--mn-primary); }\n.mn-seat:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-seat:has(input:disabled), .mn-seat-taken { cursor: not-allowed; border-color: transparent; background: repeating-linear-gradient(45deg, var(--mn-surface-2) 0 3px, color-mix(in oklab, var(--mn-fg) 14%, var(--mn-surface-2)) 3px 5px); }\n.mn-seat-accessible { box-shadow: inset 0 -3px 0 var(--mn-info); }\n.mn-seatmap-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.25rem; color: var(--mn-muted); font-size: .8125rem; }\n.mn-seatmap-legend > span { display: inline-flex; align-items: center; gap: .45rem; }\n.mn-seatmap-legend .mn-seat { flex: none; min-width: 0; width: 1.1rem; height: 1rem; cursor: default; }"
    },
    {
      "path": "mian/examples/seat-map.html",
      "type": "registry:file",
      "target": "mian/examples/seat-map.html",
      "content": "<!-- Seats -->\n<div class=\"mn-seatmap\">\n  <div class=\"mn-seatmap-screen\">Screen</div>\n  <fieldset class=\"mn-seats\"><legend class=\"mn-sr-only\">Choose seats</legend>\n    <div class=\"mn-seat-row\"><span aria-hidden=\"true\">A</span><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A1\" aria-label=\"Row A, seat 1\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A2\" aria-label=\"Row A, seat 2\" disabled></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A3\" aria-label=\"Row A, seat 3\" disabled></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A4\" aria-label=\"Row A, seat 4\"></label><span class=\"mn-seat-aisle\"></span><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A5\" aria-label=\"Row A, seat 5\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A6\" aria-label=\"Row A, seat 6\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A7\" aria-label=\"Row A, seat 7\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"A8\" aria-label=\"Row A, seat 8\"></label></div>\n    <div class=\"mn-seat-row\"><span aria-hidden=\"true\">B</span><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B1\" aria-label=\"Row B, seat 1\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B2\" aria-label=\"Row B, seat 2\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B3\" aria-label=\"Row B, seat 3\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B4\" aria-label=\"Row B, seat 4\" checked></label><span class=\"mn-seat-aisle\"></span><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B5\" aria-label=\"Row B, seat 5\" checked></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B6\" aria-label=\"Row B, seat 6\" disabled></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B7\" aria-label=\"Row B, seat 7\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"B8\" aria-label=\"Row B, seat 8\"></label></div>\n    <div class=\"mn-seat-row\"><span aria-hidden=\"true\">C</span><label class=\"mn-seat mn-seat-accessible\"><input type=\"checkbox\" name=\"seat\" value=\"C1\" aria-label=\"Row C, seat 1, wheelchair space\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"C2\" aria-label=\"Row C, seat 2\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"C3\" aria-label=\"Row C, seat 3\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"C4\" aria-label=\"Row C, seat 4\"></label><span class=\"mn-seat-aisle\"></span><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"C5\" aria-label=\"Row C, seat 5\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"C6\" aria-label=\"Row C, seat 6\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"C7\" aria-label=\"Row C, seat 7\"></label><label class=\"mn-seat mn-seat-accessible\"><input type=\"checkbox\" name=\"seat\" value=\"C8\" aria-label=\"Row C, seat 8, wheelchair space\"></label></div>\n    <div class=\"mn-seat-row\"><span aria-hidden=\"true\">D</span><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D1\" aria-label=\"Row D, seat 1\" disabled></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D2\" aria-label=\"Row D, seat 2\" disabled></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D3\" aria-label=\"Row D, seat 3\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D4\" aria-label=\"Row D, seat 4\"></label><span class=\"mn-seat-aisle\"></span><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D5\" aria-label=\"Row D, seat 5\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D6\" aria-label=\"Row D, seat 6\"></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D7\" aria-label=\"Row D, seat 7\" disabled></label><label class=\"mn-seat\"><input type=\"checkbox\" name=\"seat\" value=\"D8\" aria-label=\"Row D, seat 8\" disabled></label></div>\n  </fieldset>\n  <div class=\"mn-seatmap-legend\"><span><span class=\"mn-seat\"></span>Free</span><span><span class=\"mn-seat\" style=\"background:var(--mn-primary);border-color:var(--mn-primary)\"></span>Yours</span><span><span class=\"mn-seat mn-seat-taken\"></span>Taken</span><span><span class=\"mn-seat mn-seat-accessible\"></span>Wheelchair space</span></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/seat-map",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-seatmap",
        "mn-seatmap-screen",
        "mn-seats",
        "mn-seat-row",
        "mn-seat",
        "mn-seat-aisle",
        "mn-seatmap-legend"
      ],
      "accessibility": [
        "Every seat is a real checkbox with a full name (“Row C, seat 5”), so it can be reached and announced.",
        "Taken seats are disabled, not hidden. The legend repeats the meaning of each style in words.",
        "For large venues, also offer “best available” so people do not have to pick seat by seat."
      ],
      "intents": [
        "seat selection",
        "cinema seats",
        "theatre booking",
        "bus seats",
        "venue map"
      ]
    }
  }
}