{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tag-input",
  "type": "registry:ui",
  "title": "Tag input (MIAN)",
  "description": "Type to add tags as removable chips. Enter or comma adds, Backspace removes, pasted lists are split.",
  "categories": [
    "forms",
    "tag input",
    "tags",
    "chips input",
    "token field"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/tag-input.css",
      "type": "registry:file",
      "target": "mian/components/tag-input.css",
      "content": ".mn-tag-input {\n  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;\n  min-height: var(--mn-size-md); padding: .3rem .4rem; cursor: text;\n}\n.mn-tag-input.mn-input { height: auto; }\n.mn-tag-input > input { flex: 1 1 6rem; min-width: 6rem; height: calc(var(--mn-size-md) - .8rem); padding: 0 .25rem; border: 0; outline: 0; background: none; color: inherit; font: inherit; }\n.mn-tag-input:focus-within { border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }\n.mn-tag-input .mn-chip { height: calc(var(--mn-size-md) - .9rem); }"
    },
    {
      "path": "mian/examples/tag-input.html",
      "type": "registry:file",
      "target": "mian/examples/tag-input.html",
      "content": "<!-- Tags -->\n<div class=\"mn-field\" style=\"max-width:26rem\">\n  <label class=\"mn-label\" for=\"tags-1\">Topics</label>\n  <div class=\"mn-input mn-tag-input\" data-name=\"topics\">\n    <span class=\"mn-chip\" data-value=\"Design\">Design<button class=\"mn-chip-remove\" type=\"button\" aria-label=\"Remove Design\"><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></button></span>\n    <span class=\"mn-chip\" data-value=\"Accessibility\">Accessibility<button class=\"mn-chip-remove\" type=\"button\" aria-label=\"Remove Accessibility\"><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></button></span>\n    <input id=\"tags-1\" placeholder=\"Add a topic…\">\n  </div>\n  <p class=\"mn-hint\">Press Enter or comma to add.</p>\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/tag-input",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-tag-input",
        "data-name=\"tags\"",
        "data-max=\"5\""
      ],
      "accessibility": [
        "Give the input a label (visible, or aria-label). Each chip’s remove button is labelled “Remove …”.",
        "Additions and removals are announced in a polite live region.",
        "Emits mn:change with { values }."
      ],
      "intents": [
        "tags input",
        "add keywords",
        "multi value input",
        "email recipients"
      ]
    }
  }
}