{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "calendar",
  "type": "registry:ui",
  "title": "Calendar (MIAN)",
  "description": "A month grid for picking a date, on its own or in a popover as a date field. Full keyboard support and locale-aware names.",
  "categories": [
    "forms",
    "calendar",
    "date picker",
    "datepicker",
    "date field"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/calendar.css",
      "type": "registry:file",
      "target": "mian/components/calendar.css",
      "content": ".mn-calendar {\n  --_cell: 2.25rem;\n  display: inline-grid; gap: .5rem; max-width: 100%;\n  padding: .75rem;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  background: var(--mn-card); color: var(--mn-fg);\n  font: 400 var(--mn-text-sm)/1 var(--mn-font);\n}\n.mn-popover .mn-calendar { border: 0; padding: .25rem; background: none; }\n.mn-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }\n.mn-calendar-title { font-weight: 600; text-align: center; flex: 1; }\n.mn-calendar-nav {\n  display: grid; place-items: center; width: 2rem; height: 2rem; flex: none;\n  border: 0; border-radius: var(--mn-radius-field); background: none; color: var(--mn-muted); cursor: pointer;\n}\n.mn-calendar-nav:hover { background: var(--mn-hover); color: var(--mn-fg); }\n.mn-calendar-nav:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-calendar-nav svg { width: 1rem; height: 1rem; }\n.mn-calendar-grid { border-collapse: collapse; }\n.mn-calendar-grid th { width: var(--_cell); height: 1.75rem; padding: 0; font-size: .6875rem; font-weight: 500; color: var(--mn-muted); text-align: center; }\n.mn-calendar-grid td { padding: 1px; text-align: center; }\n.mn-calendar-day {\n  width: var(--_cell); height: var(--_cell); padding: 0;\n  border: 0; border-radius: min(var(--mn-radius-field), 999px); background: none;\n  color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;\n  transition: background-color var(--mn-duration) var(--mn-ease), color var(--mn-duration) var(--mn-ease);\n}\n.mn-calendar-day:hover { background: var(--mn-hover); }\n.mn-calendar-day[data-outside] { color: var(--mn-muted); }\n.mn-calendar-day[aria-current=\"date\"] { font-weight: 700; box-shadow: inset 0 0 0 1px var(--mn-input); }\n.mn-calendar-day[aria-pressed=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }\n.mn-calendar-day[data-in-range] { border-radius: 0; background: color-mix(in oklab, var(--mn-primary) 14%, transparent); color: var(--mn-fg); }\n.mn-calendar-day[data-range-start], .mn-calendar-day[data-range-end] { background: var(--mn-primary); color: var(--mn-primary-fg); box-shadow: none; }\n.mn-calendar-day[data-range-start]:not([data-range-end]) { border-start-end-radius: 0; border-end-end-radius: 0; }\n.mn-calendar-day[data-range-end]:not([data-range-start]) { border-start-start-radius: 0; border-end-start-radius: 0; }\n.mn-calendar-day:disabled { opacity: .35; cursor: not-allowed; background: none; }\n.mn-calendar-day:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n@media (max-width: 22rem) { .mn-calendar { --_cell: 2rem; padding: .5rem; } }"
    },
    {
      "path": "mian/examples/calendar.html",
      "type": "registry:file",
      "target": "mian/examples/calendar.html",
      "content": "<!-- Calendar -->\n<div class=\"mn-calendar\" data-value=\"2026-09-25\" aria-label=\"Choose a date\"></div>\n\n<!-- Date field -->\n<div class=\"mn-field\" style=\"max-width:16rem\">\n  <label class=\"mn-label\" for=\"date-1\">Start date</label>\n  <div class=\"mn-input-group\">\n    <input class=\"mn-input\" id=\"date-1\" placeholder=\"YYYY-MM-DD\" inputmode=\"numeric\" value=\"2026-10-02\">\n    <button class=\"mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm\" type=\"button\" popovertarget=\"date-1-cal\" aria-label=\"Choose date\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\"/><path d=\"M3 10h18M8 3v4M16 3v4\"/></svg></button>\n  </div>\n</div>\n<div class=\"mn-popover\" id=\"date-1-cal\" popover data-placement=\"bottom-end\"><div class=\"mn-calendar\" data-mn-for=\"#date-1\" data-min=\"2026-09-01\"></div></div>\n\n<!-- Date range -->\n<div class=\"mn-stack\" style=\"max-width:20rem;--mn-gap:.75rem\">\n  <div class=\"mn-form-row\"><div class=\"mn-field\"><label class=\"mn-label\" for=\"stay-in\">Check-in</label><input class=\"mn-input\" id=\"stay-in\" value=\"2026-10-09\" readonly></div><div class=\"mn-field\"><label class=\"mn-label\" for=\"stay-out\">Check-out</label><input class=\"mn-input\" id=\"stay-out\" value=\"2026-10-12\" readonly></div></div>\n  <div class=\"mn-calendar\" data-range data-value=\"2026-10-09/2026-10-12\" data-min=\"2026-09-25\" data-mn-start=\"#stay-in\" data-mn-end=\"#stay-out\" aria-label=\"Choose your dates\"></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/calendar",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-calendar",
        "data-value=\"YYYY-MM-DD\"",
        "data-min · data-max",
        "data-week-start=\"0–6\"",
        "data-mn-for=\"#input\"",
        "data-range"
      ],
      "accessibility": [
        "The grid is a table with role=\"grid\", column headers with full weekday names (abbr) and a live month title.",
        "Only one day is in the tab order. Arrow keys move by day and week, Page Up/Down by month (Shift: year), Home/End to the week’s edges, Enter or Space selects.",
        "Each day button has a full date as its accessible name; today is aria-current=\"date\", the chosen day aria-pressed=\"true\".",
        "Emits mn:change with { value } as YYYY-MM-DD."
      ],
      "intents": [
        "date picker",
        "booking calendar",
        "date range picker",
        "check-in check-out",
        "choose a day"
      ]
    }
  }
}