{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "footer-newsletter",
  "title": "Footer — Newsletter",
  "description": "Link columns beside a labelled email subscription form built on Field, Input and Button.",
  "registryDependencies": [
    "https://ui.digital.nsw.gov.au/registry/r/theme.json",
    "https://ui.digital.nsw.gov.au/registry/r/footer.json",
    "https://ui.digital.nsw.gov.au/registry/r/button.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/icons.json"
  ],
  "files": [
    {
      "path": "src/patterns/footer-newsletter.tsx",
      "content": "'use client'\n\nimport type * as React from 'react'\n\nimport { Button } from '@/components/button'\nimport { Field, FieldDescription, FieldLabel } from '@/components/field'\nimport { Footer, FooterNav, FooterNavColumn } from '@/components/footer'\nimport { Input } from '@/components/input'\nimport { IconMail } from '@/icons/mail'\n\n// ── Sample content — replace with your service's own ────────────────────────\nconst columnsSample = [\n  {\n    heading: 'Services',\n    links: [\n      { name: 'Apply for a licence', href: '#licence' },\n      { name: 'Pay a fine', href: '#fine' },\n      { name: 'Book an appointment', href: '#appointment' },\n    ],\n  },\n  {\n    heading: 'About',\n    links: [\n      { name: 'Who we are', href: '#about' },\n      { name: 'Our strategy', href: '#strategy' },\n      { name: 'Careers', href: '#careers' },\n    ],\n  },\n]\n\nconst legalLinksSample = [\n  { name: 'Accessibility', href: '#accessibility' },\n  { name: 'Privacy', href: '#privacy' },\n  { name: 'Copyright', href: '#copyright' },\n]\n\nconst departmentSample = 'Digital NSW, Department of Customer Service'\n\ntype FooterNewsletterProps = Omit<React.ComponentProps<typeof Footer>, 'children'> & {\n  columns?: typeof columnsSample\n  /** Called with the submitted email. Wire this to your subscription service. */\n  onSubscribe?: (email: string) => void\n}\n\n/**\n * Link columns beside an email subscription form. Use for services that\n * publish updates people opt into — grant rounds, policy changes, alerts.\n *\n * The form is a worked example: it prevents the default submit and hands the\n * address to `onSubscribe`. Replace that with your own submission, and note\n * that collecting an email address makes this a collection point under the\n * PPIP Act — your privacy collection notice belongs next to the field.\n *\n * The label is a real `FieldLabel` inside a `Field`, so Base UI associates it\n * with the input and generates per-instance ids; two of these on one page will\n * not collide. Do not swap it for a placeholder — placeholders disappear on\n * input and are not an accessible name.\n */\nexport function FooterNewsletter({\n  columns = columnsSample,\n  legalLinks = legalLinksSample,\n  department = departmentSample,\n  onSubscribe,\n  ...props\n}: FooterNewsletterProps) {\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const data = new FormData(event.currentTarget)\n    const email = data.get('email')\n    if (typeof email === 'string') {\n      onSubscribe?.(email)\n    }\n  }\n\n  return (\n    <Footer legalLinks={legalLinks} department={department} {...props}>\n      <div className='grid py-4 max-lg:gap-8 lg:grid-cols-[1fr_minmax(0,24rem)] lg:gap-16'>\n        <FooterNav className='py-0 lg:grid-cols-2'>\n          {columns.map((column) => (\n            <FooterNavColumn key={column.heading} heading={column.heading} links={column.links} />\n          ))}\n        </FooterNav>\n        <form onSubmit={handleSubmit} className='flex flex-col gap-3'>\n          <Field>\n            {/* Inherits the footer's ink from the root — Label sets no colour\n                of its own, so it tracks the surface automatically. */}\n            <FieldLabel className='text-sm font-bold'>Subscribe to updates</FieldLabel>\n            <div className='flex gap-3 max-sm:flex-col sm:flex-row'>\n              <Input\n                type='email'\n                name='email'\n                autoComplete='email'\n                placeholder='you@example.com'\n                required\n              />\n              <Button type='submit' leadingVisual={IconMail} className='shrink-0'>\n                Subscribe\n              </Button>\n            </div>\n            {/* text-muted-foreground is theme-driven, not surface-driven, so it\n                can wash out on a coloured footer — pin it to the ink instead. */}\n            <FieldDescription className='text-(--footer-ink)'>\n              Occasional updates about this service. Unsubscribe at any time.\n            </FieldDescription>\n          </Field>\n        </form>\n      </div>\n    </Footer>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/footer-newsletter.tsx"
    }
  ],
  "type": "registry:block",
  "meta": {
    "nswdsVersion": "5.1.0"
  }
}