{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masthead",
  "title": "Masthead",
  "description": "The \"A NSW Government website\" strip shown above the site header, with WCAG 2.2 AAA colour variants and fluid/contained width presets.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://ui.digital.nsw.gov.au/registry/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/masthead.tsx",
      "content": "import { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '@/lib/utils'\n\n// Colour pairs are curated for WCAG 2.2 AAA (1.4.6 Contrast Enhanced): every\n// text/background combination below resolves to at least 7:1. This is why the\n// Masthead does not accept the full Button colour palette — accent/danger/\n// warning backgrounds with white text sit under 7:1 and would silently break\n// the AAA guarantee. Add new colours only with a verified pair.\nconst mastheadColors = {\n  // Legacy .nsw-masthead (brand dark). Deepens in dark mode, matching the\n  // original nswds-app implementation.\n  dark: 'bg-primary-800 text-white dark:bg-primary-950',\n  // Legacy .nsw-masthead--light (off-white). grey-100 is the same value as\n  // the legacy --nsw-off-white (#f2f2f2).\n  light: 'bg-grey-100 text-grey-900',\n  white: 'bg-white text-grey-900',\n  grey: 'bg-grey-800 text-white',\n}\n\nconst mastheadVariants = cva('w-full text-xs', {\n  variants: {\n    color: mastheadColors,\n  },\n  defaultVariants: {\n    color: 'dark',\n  },\n})\n\nconst mastheadContainerVariants = cva(\n  [\n    'mx-auto flex w-full items-center justify-between gap-x-4 py-2',\n    // Lateral padding funnels through --masthead-padding-x so an app can\n    // retune it once (via the `style` prop or a utility class) without a new\n    // variant. Defaults reproduce the nswds-app rhythm: 16px → 24px → 48px.\n    'px-(--masthead-padding-x)',\n    '[--masthead-padding-x:--spacing(4)] sm:[--masthead-padding-x:--spacing(6)] lg:[--masthead-padding-x:--spacing(12)]',\n  ],\n  {\n    variants: {\n      container: {\n        // Full-bleed (nswds-app style). --masthead-max-width is still read so\n        // a shell app can constrain the inner wrapper without switching\n        // variants (the archive/practice `#nsw-masthead > div` override).\n        fluid: 'max-w-[var(--masthead-max-width,none)]',\n        // Centred content column, legacy nsw-container parity (1200px).\n        contained: 'max-w-[var(--masthead-max-width,75rem)]',\n      },\n    },\n    defaultVariants: {\n      container: 'fluid',\n    },\n  },\n)\n\ntype MastheadProps = React.ComponentPropsWithoutRef<'div'> &\n  VariantProps<typeof mastheadVariants> &\n  VariantProps<typeof mastheadContainerVariants> & {\n    /** Classes applied to the inner width-constraining wrapper. */\n    containerClassName?: string\n    ref?: React.Ref<HTMLDivElement>\n  }\n\n/**\n * The \"A NSW Government website\" strip shown above the site header on every\n * NSW Government page. Successor to the legacy `.nsw-masthead`.\n *\n * - `color` selects a WCAG 2.2 AAA text/background pair (`dark` matches the\n *   legacy default, `light` matches the legacy `--light` theme).\n * - `container` selects the inner wrapper layout: `fluid` (full-bleed,\n *   nswds-app parity) or `contained` (centred 1200px column, legacy\n *   `nsw-container` parity). Fine-tune either with the `--masthead-max-width`\n *   and `--masthead-padding-x` custom properties.\n * - Children replace the default message; pass a `SkipLinks` sibling before\n *   the Masthead for bypass-blocks support.\n *\n * The default `id=\"nsw-masthead\"` is kept for compatibility with existing\n * shells that target it (override via the `id` prop).\n */\nfunction Masthead({\n  className,\n  color,\n  container,\n  containerClassName,\n  children,\n  ref,\n  ...props\n}: MastheadProps) {\n  return (\n    <div\n      id='nsw-masthead'\n      data-slot='masthead'\n      {...props}\n      className={cn(mastheadVariants({ color }), className)}\n      ref={ref}\n    >\n      <div\n        data-slot='masthead-container'\n        className={cn(mastheadContainerVariants({ container }), containerClassName)}\n      >\n        {children ?? 'A NSW Government website'}\n      </div>\n    </div>\n  )\n}\n\nexport { Masthead, mastheadContainerVariants, mastheadVariants }\nexport type { MastheadProps }\n",
      "type": "registry:ui",
      "target": "components/masthead.tsx"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib",
      "target": "lib/utils.ts"
    }
  ],
  "type": "registry:ui",
  "meta": {
    "nswdsVersion": "5.1.0"
  }
}