{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swap",
  "type": "registry:ui",
  "title": "Swap (MIAN)",
  "description": "An icon toggle that swaps between two states with a small rotation, menu/close, play/pause, sun/moon.",
  "categories": [
    "actions",
    "swap",
    "icon toggle",
    "toggle button",
    "hamburger"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/swap.css",
      "type": "registry:file",
      "target": "mian/components/swap.css",
      "content": ".mn-swap { position: relative; display: inline-grid; place-items: center; width: var(--mn-size-md); height: var(--mn-size-md); border-radius: var(--mn-radius-field); cursor: pointer; color: var(--mn-fg); }\n.mn-swap:hover { background: var(--mn-hover); }\n.mn-swap > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }\n.mn-swap:has(input:focus-visible) { box-shadow: var(--mn-focus); }\n.mn-swap > .mn-swap-on, .mn-swap > .mn-swap-off { grid-area: 1 / 1; display: grid; place-items: center; transition: opacity var(--mn-duration) var(--mn-ease), transform calc(var(--mn-duration) * 1.6) var(--mn-spring); pointer-events: none; }\n.mn-swap svg { width: 1.25rem; height: 1.25rem; }\n.mn-swap > .mn-swap-on { opacity: 0; transform: rotate(-90deg) scale(.6); }\n.mn-swap:has(input:checked) > .mn-swap-on { opacity: 1; transform: none; }\n.mn-swap:has(input:checked) > .mn-swap-off { opacity: 0; transform: rotate(90deg) scale(.6); }\n.mn-swap-flip > .mn-swap-on { transform: rotateY(90deg); }\n.mn-swap-flip:has(input:checked) > .mn-swap-off { transform: rotateY(-90deg); }"
    },
    {
      "path": "mian/examples/swap.html",
      "type": "registry:file",
      "target": "mian/examples/swap.html",
      "content": "<!-- Swaps -->\n<label class=\"mn-swap\"><input type=\"checkbox\" aria-label=\"Menu open\"><span class=\"mn-swap-off\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 7h16M4 12h16M4 17h16\"/></svg></span><span class=\"mn-swap-on\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></span></label>\n<label class=\"mn-swap\"><input type=\"checkbox\" aria-label=\"Dark mode\"><span class=\"mn-swap-off\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"4\"/><path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"/></svg></span><span class=\"mn-swap-on\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\"/></svg></span></label>\n<label class=\"mn-swap mn-swap-flip\"><input type=\"checkbox\" aria-label=\"Favourite\"><span class=\"mn-swap-off\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg></span><span class=\"mn-swap-on\" style=\"color:var(--mn-danger)\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 20s-7-4.4-9-9a5 5 0 0 1 9-3 5 5 0 0 1 9 3c-2 4.6-9 9-9 9Z\"/></svg></span></label>"
    }
  ],
  "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/swap",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-swap",
        "mn-swap-on · mn-swap-off",
        "mn-swap-flip"
      ],
      "accessibility": [
        "The checkbox carries the name (aria-label) and the state; screen readers announce it as a checkbox.",
        "For a toggle that is not a setting (e.g. opening a menu), use a button with aria-expanded instead."
      ],
      "intents": [
        "icon toggle",
        "play pause",
        "hamburger to close",
        "favourite toggle"
      ]
    }
  }
}