{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sign-up-form",
  "title": "Sign-up Form",
  "description": "A sign-up 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/icons.json"
  ],
  "files": [
    {
      "path": "src/patterns/sign-up-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 {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from '@/components/field'\nimport { Input } from '@/components/input'\nimport { LabeledSeparator } from '@/components/labeled-separator'\nimport { Link } from '@/components/link'\nimport { IconLogin } from '@/icons/login'\nimport { IconPersonAdd } from '@/icons/person-add'\nimport { cn } from '@/lib/utils'\n\n/**\n * SignUpForm — the account-creation counterpart to LoginForm.\n *\n * A composed pattern (Card + Field + Input + Button), published as a worked\n * example: copy the source and wire the fields to your own registration\n * handler rather than configuring it through props.\n *\n * Best-practice notes baked in:\n *  - Single sign-on (Microsoft Entra ID) leads as the recommended path with\n *    solid emphasis; email + password registration is the fallback, grouped\n *    in a FieldSet whose legend names the set for assistive tech.\n *  - `autoComplete=\"new-password\"` on both the password and confirm-password\n *    fields tells password managers to offer/save a generated password (vs.\n *    the `current-password` hint LoginForm uses).\n *  - A visible password-requirements hint is associated with the input via\n *    `aria-describedby` so screen readers announce the rules (WCAG 3.3.2).\n *  - Terms acceptance is communicated inline at the point of action rather\n *    than via a pre-checked checkbox.\n */\nexport function SignUpForm({ 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>Create your account</CardTitle>\n          <CardDescription>Enter your details below to create a new account.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              {/*\n               * Single sign-on first: NSW Government staff authenticate with\n               * Microsoft Entra ID, so SSO is the recommended path and carries\n               * primary (solid) emphasis. Email + password registration is the\n               * fallback below the separator.\n               */}\n              <Field>\n                <FieldDescription>\n                  Use your NSW Government Microsoft Entra ID account to sign up with a single click\n                  — no separate password required.\n                </FieldDescription>\n                <Button type='button'>\n                  <IconLogin />\n                  Create account with Microsoft Entra ID\n                </Button>\n              </Field>\n\n              <LabeledSeparator>or</LabeledSeparator>\n\n              {/*\n               * Email + password registration grouped in a FieldSet so the\n               * \"Register with email and password\" legend names the whole set\n               * for assistive tech, not just one field.\n               */}\n              <FieldSet>\n                <FieldLegend className='text-base'>Register with email and password</FieldLegend>\n                {/* No htmlFor/id/aria-describedby wiring: each Field associates\n                 * its label and description with the control automatically (Base\n                 * UI generates ids per instance), so the password requirements\n                 * below are linked via aria-describedby without manual plumbing. */}\n                <Field>\n                  <FieldLabel>Full name</FieldLabel>\n                  <Input type='text' autoComplete='name' placeholder='Jane Citizen' required />\n                </Field>\n                <Field>\n                  <FieldLabel>Email</FieldLabel>\n                  <Input type='email' autoComplete='email' placeholder='m@example.com' required />\n                </Field>\n                <Field>\n                  <FieldLabel>Password</FieldLabel>\n                  <Input type='password' autoComplete='new-password' required />\n                  <FieldDescription>\n                    Use at least 8 characters, including a number and a symbol.\n                  </FieldDescription>\n                </Field>\n                <Field>\n                  <FieldLabel>Confirm password</FieldLabel>\n                  <Input type='password' autoComplete='new-password' required />\n                </Field>\n              </FieldSet>\n              <Field>\n                <Button type='submit'>\n                  <IconPersonAdd />\n                  Create account\n                </Button>\n                <FieldDescription className='text-center'>\n                  By creating an account you agree to our <Link href='#'>Terms of Service</Link> and{' '}\n                  <Link href='#'>Privacy Policy</Link>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldDescription className='text-center'>\n                  Already have an account? <Link href='#'>Login</Link>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/sign-up-form.tsx"
    }
  ],
  "type": "registry:block",
  "meta": {
    "nswdsVersion": "5.1.0"
  }
}