{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-input",
  "type": "registry:ui",
  "title": "File input (MIAN)",
  "description": "A styled native file picker, and a drag-and-drop zone that wraps one.",
  "categories": [
    "forms",
    "file",
    "upload",
    "dropzone",
    "drag and drop"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/file-input.css",
      "type": "registry:file",
      "target": "mian/components/file-input.css",
      "content": ".mn-file {\n  display: block; width: 100%;\n  border: var(--mn-border-w) solid var(--mn-input); border-radius: var(--mn-radius-field);\n  background: var(--mn-surface); color: var(--mn-muted);\n  font: 400 var(--mn-text-sm)/1 var(--mn-font);\n  box-shadow: var(--mn-shadow-sm);\n  cursor: pointer;\n}\n.mn-file::file-selector-button {\n  height: calc(var(--mn-size-md) - 2px); margin-inline-end: .75rem; padding: 0 .9rem;\n  border: 0; border-inline-end: var(--mn-border-w) solid var(--mn-input);\n  background: var(--mn-surface-2); color: var(--mn-fg);\n  font: 500 var(--mn-text-sm)/1 var(--mn-font); cursor: pointer;\n}\n.mn-file:hover::file-selector-button { background: color-mix(in oklab, var(--mn-surface-2), var(--mn-fg) 6%); }\n.mn-file:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-dropzone {\n  display: grid; place-items: center; gap: .5rem; padding: 2rem 1rem;\n  border: 2px dashed var(--mn-input); border-radius: var(--mn-radius-box);\n  background: var(--mn-surface); color: var(--mn-muted); text-align: center;\n  font-size: var(--mn-text-sm); cursor: pointer;\n  transition: border-color var(--mn-duration) var(--mn-ease), background-color var(--mn-duration) var(--mn-ease);\n}\n.mn-dropzone:hover, .mn-dropzone[data-over] { border-color: var(--mn-ring); background: var(--mn-hover); }\n.mn-dropzone:has(input:focus-visible) { box-shadow: var(--mn-focus); }\n.mn-dropzone svg { width: 1.75rem; height: 1.75rem; }\n.mn-dropzone strong { color: var(--mn-fg); font-weight: 600; }\n.mn-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }"
    },
    {
      "path": "mian/examples/file-input.html",
      "type": "registry:file",
      "target": "mian/examples/file-input.html",
      "content": "<!-- Basic -->\n<div class=\"mn-field\" style=\"max-width:26rem\">\n  <label class=\"mn-label\" for=\"file-1\">Avatar</label>\n  <input class=\"mn-file\" id=\"file-1\" type=\"file\" accept=\"image/*\">\n</div>\n\n<!-- Dropzone -->\n<label class=\"mn-dropzone\" style=\"max-width:26rem\">\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 16V4M7 9l5-5 5 5\"/><path d=\"M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3\"/></svg>\n  <span><strong>Click to upload</strong> or drag and drop</span>\n  <span class=\"mn-small\" data-mn-file-name=\"PNG, JPG or PDF up to 10MB\">PNG, JPG or PDF up to 10MB</span>\n  <input type=\"file\" multiple>\n</label>"
    }
  ],
  "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/file-input",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-file",
        "mn-dropzone"
      ],
      "accessibility": [
        "The dropzone is a label for a real file input, so it is keyboard and screen-reader operable. Dragging is an enhancement, not the only path."
      ],
      "intents": [
        "file upload",
        "drag and drop upload",
        "attach file",
        "image upload"
      ]
    }
  }
}