{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "time-slots",
  "type": "registry:ui",
  "title": "Time slots (MIAN)",
  "description": "A grid of bookable times, available, nearly full or taken, built on radio buttons.",
  "categories": [
    "forms",
    "time slots",
    "booking",
    "appointment",
    "reservation"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/time-slots.css",
      "type": "registry:file",
      "target": "mian/components/time-slots.css",
      "content": ".mn-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .5rem; min-inline-size: 0; margin: 0; padding: 0; border: 0; }\n.mn-slots > legend { grid-column: 1 / -1; float: left; width: 100%; margin: 0 0 .6rem; padding: 0; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); color: var(--mn-fg); }\n.mn-slot {\n  position: relative; display: grid; place-items: center; align-content: center; gap: .1rem; min-height: var(--mn-size-lg); padding: .35rem .5rem;\n  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field); background: var(--mn-surface); color: var(--mn-fg);\n  font: 500 var(--mn-text-sm)/1.2 var(--mn-font); font-variant-numeric: tabular-nums; text-align: center; cursor: pointer;\n  transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease);\n}\n.mn-slot > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }\n.mn-slot small { color: var(--mn-muted); font-size: .6875rem; font-weight: 400; }\n.mn-slot-few small { color: var(--mn-warning-text); }\n.mn-slot:hover { border-color: var(--mn-fg); }\n.mn-slot:has(input:checked) { border-color: var(--mn-primary); background: var(--mn-primary); color: var(--mn-primary-fg); }\n.mn-slot:has(input:checked) small { color: inherit; opacity: .85; }\n.mn-slot:has(input:focus-visible) { outline: 2px solid var(--mn-ring); outline-offset: 2px; }\n.mn-slot:has(input:disabled) { cursor: not-allowed; border-color: transparent; background: var(--mn-surface-2); color: var(--mn-muted); text-decoration: line-through; }"
    },
    {
      "path": "mian/examples/time-slots.html",
      "type": "registry:file",
      "target": "mian/examples/time-slots.html",
      "content": "<!-- Time slots -->\n<fieldset class=\"mn-slots\" style=\"max-width:34rem\">\n  <legend>Friday 2 October</legend>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"09:00\">09:00</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"09:30\" disabled>09:30<small>Taken</small></label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"10:00\" checked>10:00</label>\n  <label class=\"mn-slot mn-slot-few\"><input type=\"radio\" name=\"slot\" value=\"10:30\">10:30<small>2 left</small></label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"11:00\">11:00</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"13:30\">13:30</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"14:00\" disabled>14:00<small>Taken</small></label>\n  <label class=\"mn-slot mn-slot-few\"><input type=\"radio\" name=\"slot\" value=\"14:30\">14:30<small>1 left</small></label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"15:00\">15:00</label>\n  <label class=\"mn-slot\"><input type=\"radio\" name=\"slot\" value=\"15:30\">15:30</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/time-slots",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-slots",
        "mn-slot",
        "mn-slot-few",
        "input:disabled"
      ],
      "accessibility": [
        "It is a native radio group: Tab reaches it, arrow keys move between times, and screen readers announce “3 of 12”.",
        "Say what “few left” means in the note (“2 left”), and keep taken times visible but disabled so the day’s shape is clear."
      ],
      "intents": [
        "appointment times",
        "book a time",
        "available slots",
        "booking module",
        "reservation time"
      ]
    }
  }
}