{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:ui",
  "title": "Input (MIAN)",
  "description": "Single-line text entry. Styles every native input type: text, email, password, search, number, date, time, color.",
  "categories": [
    "forms",
    "input",
    "text field",
    "textbox",
    "email"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/input.css",
      "type": "registry:file",
      "target": "mian/components/input.css",
      "content": ".mn-input, .mn-textarea, .mn-select {\n  --_h: var(--mn-size-md);\n  display: block; width: 100%; min-width: 0;\n  height: var(--_h);\n  padding: 0 .75rem;\n  border: var(--mn-border-w) solid var(--mn-input);\n  border-radius: var(--mn-radius-field);\n  background: var(--mn-surface);\n  color: var(--mn-fg);\n  font: 400 var(--mn-text-sm)/1.4 var(--mn-font);\n  box-shadow: var(--mn-shadow-sm);\n  transition: border-color var(--mn-duration) var(--mn-ease), box-shadow var(--mn-duration) var(--mn-ease);\n  appearance: none; -webkit-appearance: none;\n}\n.mn-input::placeholder, .mn-textarea::placeholder { color: var(--mn-muted); opacity: .85; }\n.mn-input:hover, .mn-textarea:hover, .mn-select:hover { border-color: color-mix(in oklab, var(--mn-input), var(--mn-fg) 20%); }\n.mn-input:focus, .mn-textarea:focus, .mn-select: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-input:disabled, .mn-textarea:disabled, .mn-select:disabled { opacity: .55; cursor: not-allowed; background: var(--mn-surface-2); }\n.mn-input[aria-invalid=\"true\"], .mn-textarea[aria-invalid=\"true\"], .mn-select[aria-invalid=\"true\"] { border-color: var(--mn-danger); }\n.mn-input[aria-invalid=\"true\"]:focus, .mn-textarea[aria-invalid=\"true\"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--mn-danger) 22%, transparent); }\n.mn-input-sm, .mn-select.mn-input-sm { --_h: var(--mn-size-sm); padding: 0 .6rem; font-size: calc(var(--mn-text-sm) - 1px); }\n.mn-input-lg, .mn-select.mn-input-lg { --_h: var(--mn-size-lg); padding: 0 1rem; font-size: calc(var(--mn-text-sm) + 1px); }\n.mn-input[type=\"date\"], .mn-input[type=\"time\"], .mn-input[type=\"datetime-local\"] { padding-inline-end: .5rem; }\n.mn-input[type=\"color\"] { padding: 3px; width: var(--_h); cursor: pointer; }\n.mn-input::-webkit-search-cancel-button { -webkit-appearance: none; }"
    },
    {
      "path": "mian/examples/input.html",
      "type": "registry:file",
      "target": "mian/examples/input.html",
      "content": "<!-- Types -->\n<div class=\"mn-stack\" style=\"max-width:22rem\">\n  <input class=\"mn-input\" type=\"text\" placeholder=\"Text\" aria-label=\"Text\">\n  <input class=\"mn-input\" type=\"password\" value=\"hunter2\" aria-label=\"Password\">\n  <input class=\"mn-input\" type=\"date\" aria-label=\"Date\">\n  <input class=\"mn-input\" type=\"search\" placeholder=\"Search…\" aria-label=\"Search\">\n</div>\n\n<!-- Sizes -->\n<div class=\"mn-stack\" style=\"max-width:22rem\">\n  <input class=\"mn-input mn-input-sm\" placeholder=\"Small\" aria-label=\"Small\">\n  <input class=\"mn-input\" placeholder=\"Default\" aria-label=\"Default\">\n  <input class=\"mn-input mn-input-lg\" placeholder=\"Large\" aria-label=\"Large\">\n</div>\n\n<!-- States -->\n<div class=\"mn-stack\" style=\"max-width:22rem\">\n  <input class=\"mn-input\" value=\"Disabled\" disabled aria-label=\"Disabled\">\n  <input class=\"mn-input\" value=\"Read only\" readonly aria-label=\"Read only\">\n  <input class=\"mn-input\" value=\"Invalid\" aria-invalid=\"true\" aria-label=\"Invalid\">\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/input",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-input",
        "mn-input-sm · mn-input-lg",
        "aria-invalid=\"true\""
      ],
      "accessibility": [
        "Use the right type and autocomplete values so mobile keyboards and password managers help.",
        "Placeholder is not a label."
      ],
      "intents": [
        "text input",
        "email field",
        "search field",
        "date input",
        "form input"
      ]
    }
  }
}