{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox (MIAN)",
  "description": "Native checkbox, restyled. Checked, indeterminate, disabled and invalid states; any colour role.",
  "categories": [
    "forms",
    "checkbox",
    "check",
    "boolean",
    "agree"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/checkbox.css",
      "type": "registry:file",
      "target": "mian/components/checkbox.css",
      "content": ".mn-checkbox, .mn-radio {\n  --_s: 1.1rem;\n  --_on: var(--_c, var(--mn-primary)); --_onf: var(--_cf, var(--mn-primary-fg));\n  appearance: none; -webkit-appearance: none;\n  display: inline-grid; place-content: center; flex: none;\n  width: var(--_s); height: var(--_s); margin: 0;\n  border: var(--mn-border-w) solid var(--mn-input);\n  border-radius: min(5px, var(--mn-radius-field));\n  background: var(--mn-surface);\n  cursor: pointer; vertical-align: middle;\n  box-shadow: var(--mn-shadow-sm);\n  transition: background-color var(--mn-duration) var(--mn-ease), border-color var(--mn-duration) var(--mn-ease);\n}\n.mn-checkbox::before {\n  content: \"\"; width: .62em; height: .62em;\n  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n  background: var(--_onf);\n  transform: scale(0); transition: transform var(--mn-duration) var(--mn-ease);\n}\n.mn-checkbox:checked, .mn-checkbox:indeterminate, .mn-radio:checked { background: var(--_on); border-color: var(--_on); }\n.mn-checkbox:checked::before { transform: scale(1); }\n.mn-checkbox:indeterminate::before { clip-path: none; height: 2px; width: .55em; transform: scale(1); }\n.mn-checkbox:focus-visible, .mn-radio:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-checkbox:disabled, .mn-radio:disabled { opacity: .5; cursor: not-allowed; }\n.mn-checkbox[aria-invalid=\"true\"], .mn-radio[aria-invalid=\"true\"] { border-color: var(--mn-danger); }\n.mn-check {\n  display: inline-flex; align-items: flex-start; gap: .6rem;\n  font: 400 var(--mn-text-sm)/1.4 var(--mn-font); cursor: pointer;\n}\n.mn-check > input { margin-top: .12em; }\n.mn-check:has(input:disabled) { opacity: .6; cursor: not-allowed; }\n.mn-check .mn-hint { margin-top: .15rem; }"
    },
    {
      "path": "mian/examples/checkbox.html",
      "type": "registry:file",
      "target": "mian/examples/checkbox.html",
      "content": "<!-- Basic -->\n<div class=\"mn-stack\">\n  <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\" checked> Remember me</label>\n  <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\"> Subscribe to the newsletter</label>\n  <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\" disabled> Disabled</label>\n</div>\n\n<!-- With description -->\n<label class=\"mn-check\">\n  <input class=\"mn-checkbox\" type=\"checkbox\" checked>\n  <span><span>Accept terms</span><p class=\"mn-hint\">You agree to our Terms of Service and Privacy Policy.</p></span>\n</label>\n\n<!-- Colours -->\n<input class=\"mn-checkbox mn-accent\" type=\"checkbox\" checked aria-label=\"Accent\">\n<input class=\"mn-checkbox mn-success\" type=\"checkbox\" checked aria-label=\"Success\">\n<input class=\"mn-checkbox mn-danger\" type=\"checkbox\" checked aria-label=\"Danger\">\n<input class=\"mn-checkbox\" type=\"checkbox\" aria-label=\"Indeterminate\" data-indeterminate>\n<script>document.querySelectorAll('[data-indeterminate]').forEach(c => c.indeterminate = true)</script>"
    }
  ],
  "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/checkbox",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-checkbox",
        "mn-check"
      ],
      "accessibility": [
        "It is a native checkbox, so Space toggles and state is announced. Wrap it in a <label> so the text is clickable.",
        "Set indeterminate from script: el.indeterminate = true."
      ],
      "intents": [
        "checkbox",
        "agree to terms",
        "multiple choice",
        "select all rows"
      ]
    }
  }
}