{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "login-form",
  "title": "Login Form",
  "description": "A login form worked example (Card + Field + Input + Button) wired with NSWDS components. Copy-and-adapt block — not a published component.",
  "registryDependencies": [
    "https://ui.digital.nsw.gov.au/registry/r/theme.json",
    "https://ui.digital.nsw.gov.au/registry/r/button.json",
    "https://ui.digital.nsw.gov.au/registry/r/card.json",
    "https://ui.digital.nsw.gov.au/registry/r/field.json",
    "https://ui.digital.nsw.gov.au/registry/r/input.json",
    "https://ui.digital.nsw.gov.au/registry/r/labeled-separator.json",
    "https://ui.digital.nsw.gov.au/registry/r/link.json",
    "https://ui.digital.nsw.gov.au/registry/r/separator.json",
    "https://ui.digital.nsw.gov.au/registry/r/icons.json"
  ],
  "files": [
    {
      "path": "src/patterns/login-form.tsx",
      "content": "'use client'\n\nimport type * as React from 'react'\n\nimport { Button } from '@/components/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/card'\nimport { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/field'\nimport { Input } from '@/components/input'\nimport { LabeledSeparator } from '@/components/labeled-separator'\nimport { Link } from '@/components/link'\nimport { Separator } from '@/components/separator'\nimport { IconKey } from '@/icons/key'\nimport { IconLogin } from '@/icons/login'\nimport { IconMail } from '@/icons/mail'\nimport { cn } from '@/lib/utils'\n\nexport function LoginForm({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div className={cn('flex flex-col gap-6', className)} {...props}>\n      <Card className='w-full'>\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>Choose how you&apos;d like to sign in</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              {/*\n               * Best-practice sign-in order, most-recommended first:\n               *   1. Single sign-on (SSO) — the preferred path\n               *   2. Email + password     — the traditional fallback\n               *   3. Magic link           — passwordless, reuses the email\n               * Each method is divided by a LabeledSeparator so it reads as a\n               * distinct alternative. Only SSO carries primary (solid)\n               * emphasis — one primary action per view — with password Login\n               * and the magic link stepped down to outline treatments.\n               */}\n              {/* 1 — Single sign-on: the recommended first option */}\n              <Field>\n                <Button type='button'>\n                  <IconLogin />\n                  Continue with single sign-on\n                </Button>\n              </Field>\n              <LabeledSeparator>or sign in with email</LabeledSeparator>\n              {/* 2 — Email + password.\n               * No htmlFor/id wiring: each control sits in a Field, which\n               * associates the label (and any description/error) with the input\n               * automatically via Base UI, generating ids per instance — so two\n               * LoginForms on one page don't collide.\n               *\n               * autoComplete is not decoration: it is the technique that\n               * satisfies WCAG 2.1 SC 1.3.5 Identify Input Purpose (AA), and\n               * it is what lets a password manager offer the saved credential.\n               * `username` — not `email` — is the correct token for a sign-in\n               * identifier even when the control is type=\"email\": managers pair\n               * `username` with `current-password` to recognise a login form.\n               * (SignUpForm uses `new-password` for the same reason in reverse.)\n               * Note that axe cannot catch this — `autocomplete-valid` only\n               * checks values that are present, so a missing attribute passes\n               * every automated gate. */}\n              <Field>\n                <FieldLabel>Email</FieldLabel>\n                <Input type='email' autoComplete='username' placeholder='m@example.com' required />\n              </Field>\n              <Field className='relative [&>a]:w-auto'>\n                <FieldLabel>Password</FieldLabel>\n                <Input type='password' autoComplete='current-password' required />\n                {/*\n                 * Placed AFTER the input in DOM (rather than next to the\n                 * label) so keyboard tab order is email → password → forgot,\n                 * not email → forgot → password. Visually positioned at the\n                 * top-right via absolute positioning to preserve the\n                 * \"Forgot your password?\" alongside-label layout. See WCAG\n                 * 2.4.3 Focus Order test in\n                 * login-form.accessibility.stories.tsx.\n                 */}\n                <Link href='#' className='absolute top-0 right-0 text-sm'>\n                  Forgot your password?\n                </Link>\n              </Field>\n              <Field>\n                <Button type='submit' variant='outline' color='primary'>\n                  <IconKey />\n                  Login\n                </Button>\n              </Field>\n              {/* 3 — Magic link: passwordless, sent to the email entered above */}\n              <LabeledSeparator>or</LabeledSeparator>\n              <Field>\n                <Button type='button' variant='outline' color='grey'>\n                  <IconMail />\n                  Email me a magic link instead\n                </Button>\n                <FieldDescription>\n                  We&apos;ll send a password-free sign-in link to the email above.\n                </FieldDescription>\n              </Field>\n              <Separator />\n              <Field>\n                <FieldDescription className='text-center'>\n                  Don&apos;t have an account? <Link href='#'>Sign up</Link>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/login-form.tsx"
    }
  ],
  "type": "registry:block",
  "meta": {
    "nswdsVersion": "5.1.0"
  }
}