{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "type": "registry:ui",
  "title": "Switch (MIAN)",
  "description": "An on/off toggle for settings that apply immediately. A native checkbox with role=\"switch\".",
  "categories": [
    "forms",
    "switch",
    "toggle",
    "on off",
    "settings"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/switch.css",
      "type": "registry:file",
      "target": "mian/components/switch.css",
      "content": ".mn-switch {\n  --_w: 2.3rem; --_hh: 1.3rem;\n  --_on: var(--_c, var(--mn-primary)); --_onf: var(--_cf, var(--mn-primary-fg));\n  appearance: none; -webkit-appearance: none; flex: none;\n  position: relative; display: inline-block;\n  width: var(--_w); height: var(--_hh); margin: 0;\n  border: 0; border-radius: 999px;\n  background: var(--mn-input);\n  cursor: pointer; vertical-align: middle;\n  transition: background-color var(--mn-duration) var(--mn-ease);\n}\n.mn-switch::before {\n  content: \"\"; position: absolute; top: 2px; left: 2px;\n  width: calc(var(--_hh) - 4px); height: calc(var(--_hh) - 4px);\n  border-radius: 50%; background: #fff;\n  box-shadow: 0 1px 3px rgb(0 0 0 / .25);\n  transition: transform var(--mn-duration) var(--mn-ease);\n}\n.mn-switch:checked { background: var(--_on); }\n.mn-switch:checked::before { transform: translateX(calc(var(--_w) - var(--_hh))); background: var(--_onf); }\n.mn-switch:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-switch:disabled { opacity: .5; cursor: not-allowed; }\n.mn-switch-sm { --_w: 1.9rem; --_hh: 1.1rem; }\n.mn-switch-lg { --_w: 2.8rem; --_hh: 1.6rem; }"
    },
    {
      "path": "mian/examples/switch.html",
      "type": "registry:file",
      "target": "mian/examples/switch.html",
      "content": "<!-- Settings -->\n<ul class=\"mn-list\" style=\"max-width:26rem\">\n  <li><div class=\"mn-grow\"><div class=\"mn-list-title\">Airplane mode</div><div class=\"mn-list-desc\">Disable all wireless connections</div></div><input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" aria-label=\"Airplane mode\"></li>\n  <li><div class=\"mn-grow\"><div class=\"mn-list-title\">Notifications</div><div class=\"mn-list-desc\">Push and email</div></div><input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Notifications\"></li>\n</ul>\n\n<!-- Sizes and colours -->\n<input class=\"mn-switch mn-switch-sm\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Small\">\n<input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Default\">\n<input class=\"mn-switch mn-switch-lg mn-success\" type=\"checkbox\" role=\"switch\" checked aria-label=\"Large success\">\n<input class=\"mn-switch\" type=\"checkbox\" role=\"switch\" disabled aria-label=\"Disabled\">"
    }
  ],
  "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/switch",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-switch",
        "mn-switch-sm · mn-switch-lg"
      ],
      "accessibility": [
        "Add role=\"switch\" so it is announced as on/off rather than checked/unchecked.",
        "Use a switch for immediate effect; use a checkbox inside forms that are submitted."
      ],
      "intents": [
        "toggle switch",
        "on off setting",
        "enable feature",
        "settings toggle"
      ]
    }
  }
}