{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "otp-input",
  "type": "registry:ui",
  "title": "OTP input (MIAN)",
  "description": "One-time-code entry. Auto-advances, handles backspace and paste, supports SMS autofill on the first box.",
  "categories": [
    "forms",
    "otp",
    "pin",
    "verification code",
    "2fa"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/otp-input.css",
      "type": "registry:file",
      "target": "mian/components/otp-input.css",
      "content": ".mn-otp { display: inline-flex; gap: .5rem; align-items: center; max-width: 100%; }\n.mn-otp > input {\n  flex: 0 1 auto; min-width: 0;\n  width: calc(var(--mn-size-md) + 4px); height: calc(var(--mn-size-md) + 8px); padding: 0;\n  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);\n  background: var(--mn-surface); color: var(--mn-fg); box-shadow: var(--mn-shadow-sm);\n  font: 600 calc(var(--mn-text-sm) + 4px)/1 var(--mn-font-mono); text-align: center;\n  caret-color: var(--mn-ring);\n}\n.mn-otp > input:focus { outline: none; border-color: var(--mn-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-ring) 25%, transparent); }\n.mn-otp-sep { color: var(--mn-muted); }"
    },
    {
      "path": "mian/examples/otp-input.html",
      "type": "registry:file",
      "target": "mian/examples/otp-input.html",
      "content": "<!-- Six digits -->\n<div class=\"mn-otp\" role=\"group\" aria-label=\"Verification code\">\n  <input><input><input><span class=\"mn-otp-sep\" aria-hidden=\"true\">–</span><input><input><input>\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/otp-input",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-otp",
        "data-mn-otp=\"alphanumeric\"",
        "mn-otp-sep"
      ],
      "accessibility": [
        "Wrap in a fieldset or give the group role=\"group\" and a label. Each box gets \"Character n of N\". Emits mn:complete with the full code."
      ],
      "intents": [
        "verification code",
        "one time password",
        "2fa code",
        "pin entry"
      ]
    }
  }
}