{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth",
  "type": "registry:ui",
  "title": "Sign-in page (MIAN)",
  "description": "A split sign-in or sign-up page: the form on one side, the brand and a quote or image on the other.",
  "categories": [
    "sections",
    "auth",
    "login",
    "sign in",
    "sign up"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/auth.css",
      "type": "registry:file",
      "target": "mian/components/auth.css",
      "content": ".mn-auth { container: mn-auth / inline-size; display: flex; min-height: 100dvh; background: var(--mn-bg); }\n.mn-auth-main { flex: 1; display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3rem); }\n.mn-auth-form { display: grid; gap: 1.5rem; width: min(100%, 24rem); }\n.mn-auth-form > * { margin: 0; }\n.mn-auth-aside { display: none; flex: 0 0 46%; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 4vw, 3.5rem); background-color: var(--mn-surface-2); overflow: hidden; }\n@container mn-auth (min-width: 60rem) { .mn-auth-aside { display: flex; } }\n.mn-or { display: flex; align-items: center; gap: .75rem; color: var(--mn-muted); font-size: .8125rem; }\n.mn-or::before, .mn-or::after { content: \"\"; flex: 1; border-top: var(--mn-border-w) solid var(--mn-border); }"
    },
    {
      "path": "mian/examples/auth.html",
      "type": "registry:file",
      "target": "mian/examples/auth.html",
      "content": "<!-- Sign in -->\n<div class=\"mn-auth\" style=\"min-height:30rem;border:1px solid var(--mn-border);border-radius:var(--mn-radius-box);overflow:hidden\">\n  <div class=\"mn-auth-main\"><form class=\"mn-auth-form\" action=\"#\">\n    <a class=\"mn-header-brand\" href=\"#\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"currentColor\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"/><path d=\"M8 7v10h8\" stroke=\"var(--mn-bg)\" stroke-width=\"2.4\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>Ledger</a>\n    <div class=\"mn-stack\" style=\"--mn-gap:.35rem\"><h1 class=\"mn-h3\" style=\"margin:0\">Sign in</h1><p class=\"mn-muted\" style=\"margin:0\">Welcome back. Your close is 72% done.</p></div>\n    <button class=\"mn-btn mn-btn-outline mn-btn-block\" type=\"button\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18\"/></svg> Continue with SSO</button>\n    <p class=\"mn-or\">or</p>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"au-e\">Work email</label><input class=\"mn-input\" id=\"au-e\" type=\"email\" autocomplete=\"email\" required></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"au-p\">Password</label><input class=\"mn-input\" id=\"au-p\" type=\"password\" autocomplete=\"current-password\" required></div>\n    <button class=\"mn-btn mn-btn-block\">Sign in</button>\n  </form></div>\n  <aside class=\"mn-auth-aside\" aria-label=\"About Ledger\"><span class=\"mn-badge mn-badge-outline mn-neutral\">Ledger for finance teams</span>\n    <figure class=\"mn-quote\"><blockquote><p>“The close is a Tuesday meeting now.”</p></blockquote><figcaption><span class=\"mn-avatar\">MR</span><span><strong>Maren Richter</strong><small>Halden &amp; Co</small></span></figcaption></figure></aside>\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/auth",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-auth",
        "mn-auth-main · mn-auth-form",
        "mn-auth-aside",
        "mn-or"
      ],
      "accessibility": [
        "Use autocomplete=\"email\" and autocomplete=\"current-password\" (or \"new-password\") so password managers work.",
        "Show errors next to the field with aria-describedby and aria-invalid.",
        "Never disable paste in password fields."
      ],
      "intents": [
        "sign in page",
        "login",
        "sign up page",
        "register",
        "create account"
      ]
    }
  }
}