{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "type": "registry:ui",
  "title": "Field (MIAN)",
  "description": "Label, control, hint and error message wired together, plus form and fieldset layout.",
  "categories": [
    "forms",
    "form",
    "label",
    "hint",
    "error"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/field.css",
      "type": "registry:file",
      "target": "mian/components/field.css",
      "content": ".mn-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }\n.mn-label { font: 500 var(--mn-text-sm)/1.3 var(--mn-font); color: var(--mn-fg); }\n.mn-label .mn-req { color: var(--mn-danger-text); margin-inline-start: 2px; }\n.mn-hint { margin: 0; font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.45; color: var(--mn-muted); }\n.mn-error { margin: 0; font-size: calc(var(--mn-text-sm) - 1px); line-height: 1.45; color: var(--mn-danger-text); }\n.mn-fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .6rem; min-width: 0; }\n.mn-fieldset > legend { padding: 0; margin-bottom: .6rem; font: 600 var(--mn-text-sm)/1.3 var(--mn-font); }\n.mn-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; }\n.mn-form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }"
    },
    {
      "path": "mian/examples/field.html",
      "type": "registry:file",
      "target": "mian/examples/field.html",
      "content": "<!-- Label, hint and error -->\n<form class=\"mn-form\" style=\"max-width:26rem\" novalidate>\n  <div class=\"mn-field\">\n    <label class=\"mn-label\" for=\"f-email\">Email<span class=\"mn-req\" aria-hidden=\"true\">*</span></label>\n    <input class=\"mn-input\" id=\"f-email\" type=\"email\" required placeholder=\"you@company.com\" aria-describedby=\"f-email-hint\">\n    <p class=\"mn-hint\" id=\"f-email-hint\">We'll never share it.</p>\n  </div>\n  <div class=\"mn-field\">\n    <label class=\"mn-label\" for=\"f-user\">Username</label>\n    <input class=\"mn-input\" id=\"f-user\" value=\"ad\" aria-invalid=\"true\" aria-describedby=\"f-user-err\">\n    <p class=\"mn-error\" id=\"f-user-err\">Must be at least 3 characters.</p>\n  </div>\n</form>\n\n<!-- Form layout -->\n<form class=\"mn-form\" style=\"max-width:34rem\">\n  <div class=\"mn-form-row\">\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"f-first\">First name</label><input class=\"mn-input\" id=\"f-first\" autocomplete=\"given-name\"></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"f-last\">Last name</label><input class=\"mn-input\" id=\"f-last\" autocomplete=\"family-name\"></div>\n  </div>\n  <fieldset class=\"mn-fieldset\">\n    <legend>Notifications</legend>\n    <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\" checked> Product updates</label>\n    <label class=\"mn-check\"><input class=\"mn-checkbox\" type=\"checkbox\"> Weekly digest</label>\n  </fieldset>\n  <div class=\"mn-row\"><button class=\"mn-btn\" type=\"submit\">Save</button><button class=\"mn-btn mn-btn-ghost\" type=\"reset\">Cancel</button></div>\n</form>"
    }
  ],
  "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/field",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-field",
        "mn-label · mn-req",
        "mn-hint · mn-error",
        "mn-form · mn-form-row",
        "mn-fieldset"
      ],
      "accessibility": [
        "Always pair a label with its control using for/id.",
        "Point aria-describedby at the hint and the error; set aria-invalid=\"true\" when invalid.",
        "The required marker is visual, also set the required attribute on the control."
      ],
      "intents": [
        "form field",
        "label and hint",
        "form layout",
        "validation error",
        "fieldset"
      ]
    }
  }
}