{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swatch-picker",
  "type": "registry:ui",
  "title": "Swatch picker (MIAN)",
  "description": "Pick a colour (or any visual option) from round swatches. Real radio buttons underneath.",
  "categories": [
    "forms",
    "swatch",
    "color picker",
    "colour picker",
    "palette"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/swatch-picker.css",
      "type": "registry:file",
      "target": "mian/components/swatch-picker.css",
      "content": ".mn-swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }\n.mn-swatches > legend { padding: 0; margin-bottom: .5rem; font: 500 var(--mn-text-sm)/1.3 var(--mn-font); }\n.mn-swatch-option {\n  --_sz: 1.9rem;\n  position: relative; display: inline-grid; place-items: center; width: var(--_sz); height: var(--_sz);\n  border-radius: 50%; background: var(--sw, var(--mn-primary)); cursor: pointer;\n  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 12%, transparent);\n  transition: box-shadow var(--mn-duration) var(--mn-ease), transform var(--mn-duration) var(--mn-ease);\n}\n.mn-swatch-option > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }\n.mn-swatch-option:hover { transform: scale(1.08); }\n.mn-swatch-option:has(input:checked) { box-shadow: 0 0 0 2px var(--mn-bg), 0 0 0 4px var(--sw, var(--mn-primary)); }\n.mn-swatch-option:has(input:checked)::after { content: \"\"; width: 40%; height: 22%; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-15%) rotate(-45deg); filter: drop-shadow(0 0 1px rgb(0 0 0 / .5)); }\n.mn-swatch-option:has(input:focus-visible) { box-shadow: var(--mn-focus); }\n.mn-swatches-sm .mn-swatch-option { --_sz: 1.4rem; }\n.mn-swatches-square .mn-swatch-option { border-radius: var(--mn-radius-field); }"
    },
    {
      "path": "mian/examples/swatch-picker.html",
      "type": "registry:file",
      "target": "mian/examples/swatch-picker.html",
      "content": "<!-- Colours -->\n<fieldset class=\"mn-swatches\">\n  <legend>Colour</legend>\n  <label class=\"mn-swatch-option\" style=\"--sw:#0a0a0a\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Ink\" checked></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#e5e5e5\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Flour\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#c8102e\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Chilli\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#1f3fa6\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Porcelain\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#3f6212\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Scallion\"></label>\n  <label class=\"mn-swatch-option\" style=\"--sw:#d97706\"><input type=\"radio\" name=\"sw-1\" aria-label=\"Pumpkin\"></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/swatch-picker",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-swatches",
        "mn-swatch-option",
        "mn-swatches-sm · mn-swatches-square"
      ],
      "accessibility": [
        "Each radio needs an accessible name (aria-label), colour alone is not a name.",
        "Arrow keys move between options, as with any radio group; focus shows a ring."
      ],
      "intents": [
        "colour picker",
        "product colour options",
        "variant swatches",
        "theme colour choice"
      ]
    }
  }
}