{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-search",
  "title": "Expandable Search",
  "description": "A 48px search button that expands into a text field on focus, with ink-derived surface colours matching the footer palette.",
  "dependencies": [
    "class-variance-authority",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://ui.digital.nsw.gov.au/registry/r/theme.json",
    "https://ui.digital.nsw.gov.au/registry/r/icons.json"
  ],
  "files": [
    {
      "path": "src/components/expandable-search.tsx",
      "content": "'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nimport { IconSearch } from '@/icons/search'\n\n/**\n * Surface colours the search can be themed with — the footer's thirteen-name\n * vocabulary (see `footerColors` in footer.tsx) plus `default`, the nswds-app\n * grey-100 chip that headers embed on a white surface.\n *\n * Every derived colour resolves from a single `--search-ink` token, so a\n * variant only declares its surface utilities and that one value. This map\n * replaces the FOUR parallel 14-entry cva tables in the nswds-app source\n * (surface / collapsed / button / focus): each of those tables was a manual\n * projection of the same underlying ink, so they are collapsed into the\n * derivations below.\n *\n * The derivations are written literally here (once) rather than per-variant:\n * Tailwind scans source text for class names, so a template-built arbitrary\n * property would never be emitted. Mirrors footer.tsx (`--footer-*`) and\n * link.tsx (`--link-halo`).\n *\n * Expanded text/surface pairs are the ones verified for footer.tsx: every\n * light pair clears WCAG 2.2 AA (1.4.3, 4.5:1) — the worst are `primary-600`\n * (4.57:1) and `accent-600` (5.18:1) — and in dark mode all clear AAA (worst\n * 13.6:1). The collapsed chip renders no text, only the icon, which paints in\n * the same ink.\n */\nconst expandableSearchVariants = cva(\n  [\n    // `group/search` is named so the submit button's group-focus-within hook\n    // can't collide with an ancestor's bare `group` (e.g. inside a card).\n    'group/search relative inline-block rounded-sm select-none',\n    // Halo for the submit button's hover / the form's focus-within state, a\n    // heavier press halo, and the placeholder colour — all mixed down from\n    // the ink. 70% ink keeps the placeholder related to but visibly lighter\n    // than the entered text (the source used grey-700 / current at 70%\n    // opacity). Dilution costs contrast, though, so the percentage routes\n    // through --search-placeholder-pct and the surfaces whose 70% composite\n    // fails 1.4.3 raise it to 100% in the variant map below. Verified by\n    // alpha-compositing the mix over each surface (light mode): at 70%\n    // primary-600 is 3.0:1, accent-600 3.1:1 and accent-400 4.48:1 — all\n    // AA failures, cured by full ink (4.57 / 5.18 / 8.34:1). The eleven\n    // surfaces that keep 70% all clear 4.5:1, the closest being\n    // primary-400 (4.57:1) and grey-400 (4.58:1); dark mode's worst 70%\n    // composite is 7.0:1.\n    '[--search-halo:color-mix(in_oklch,var(--search-ink)_10%,transparent)]',\n    '[--search-halo-active:color-mix(in_oklch,var(--search-ink)_18%,transparent)]',\n    '[--search-placeholder:color-mix(in_oklch,var(--search-ink)_var(--search-placeholder-pct,70%),transparent)]',\n  ],\n  {\n    variants: {\n      // Ink values use the RAW masterbrand tokens (--primary-800, --grey-800,\n      // --accent-800) rather than Tailwind's --color-* bridge aliases. Tailwind\n      // v4 tree-shakes an unreferenced @theme key, and referencing one from\n      // inside an arbitrary property is not a usage signal — the raw tokens are\n      // plain :root declarations from @nswds/tokens and always resolve.\n      // (--color-white is safe: `text-white` below is a real utility, so that\n      // key is always emitted.) Same reasoning as footer.tsx and header.tsx.\n      //\n      // Dark mode deepens every surface onto the same family's dark steps —\n      // -800→-950, -600→-900, -400→-850, -200→-800, white→grey-900 — per\n      // footer.tsx's family mapping, and `default` follows header.tsx's\n      // `light` surface: grey-100→grey-850. Ink goes white on all fourteen.\n      //\n      // primary-600, accent-600 and accent-400 set --search-placeholder-pct\n      // to 100%: their 70% placeholder composite fails AA (3.0 / 3.1 /\n      // 4.48:1 — see the derivation comment above), so the placeholder\n      // renders full ink there. The override is deliberately not\n      // dark-scoped: every dark 70% composite clears 7:1, so 100% in dark\n      // is merely a slightly stronger placeholder, not worth a second\n      // declaration.\n      //\n      // `default` is the one variant whose ink is NOT its text colour: the\n      // nswds-app chip pairs grey-800 entered text with a primary-blue icon\n      // and primary-800/10 halos. Declaring ink as primary-800 reproduces the\n      // icon and halos exactly; the text colour is a surface utility, so it\n      // stays grey-800. (Side effect, documented: the placeholder mixes from\n      // primary-800 instead of the source's grey-700 — a subtle blue shift.)\n      variant: {\n        default:\n          'bg-grey-100 text-grey-800 [--search-ink:var(--primary-800)] dark:bg-grey-850 dark:text-white dark:[--search-ink:var(--color-white)]',\n        'primary-800':\n          'bg-primary-800 text-white [--search-ink:var(--color-white)] dark:bg-primary-950',\n        'primary-600':\n          'bg-primary-600 text-white [--search-ink:var(--color-white)] [--search-placeholder-pct:100%] dark:bg-primary-900',\n        'primary-400':\n          'bg-primary-400 text-primary-800 [--search-ink:var(--primary-800)] dark:bg-primary-850 dark:text-white dark:[--search-ink:var(--color-white)]',\n        'primary-200':\n          'bg-primary-200 text-primary-800 [--search-ink:var(--primary-800)] dark:bg-primary-800 dark:text-white dark:[--search-ink:var(--color-white)]',\n        'grey-800': 'bg-grey-800 text-white [--search-ink:var(--color-white)] dark:bg-grey-950',\n        'grey-600': 'bg-grey-600 text-white [--search-ink:var(--color-white)] dark:bg-grey-900',\n        'grey-400':\n          'bg-grey-400 text-grey-800 [--search-ink:var(--grey-800)] dark:bg-grey-850 dark:text-white dark:[--search-ink:var(--color-white)]',\n        'grey-200':\n          'bg-grey-200 text-grey-800 [--search-ink:var(--grey-800)] dark:bg-grey-800 dark:text-white dark:[--search-ink:var(--color-white)]',\n        'accent-800':\n          'bg-accent-800 text-white [--search-ink:var(--color-white)] dark:bg-accent-950',\n        'accent-600':\n          'bg-accent-600 text-white [--search-ink:var(--color-white)] [--search-placeholder-pct:100%] dark:bg-accent-900',\n        'accent-400':\n          'bg-accent-400 text-accent-800 [--search-ink:var(--accent-800)] [--search-placeholder-pct:100%] dark:bg-accent-850 dark:text-white dark:[--search-ink:var(--color-white)]',\n        'accent-200':\n          'bg-accent-200 text-accent-800 [--search-ink:var(--accent-800)] dark:bg-accent-800 dark:text-white dark:[--search-ink:var(--color-white)]',\n        white:\n          'bg-white text-grey-800 [--search-ink:var(--grey-800)] dark:bg-grey-900 dark:text-white dark:[--search-ink:var(--color-white)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\ntype ExpandableSearchVariant = NonNullable<VariantProps<typeof expandableSearchVariants>['variant']>\n\n// One focus treatment for the input and the submit button, INSET rather than\n// the source's offset ring. The source ringed each variant in its own surface\n// colour with a hardcoded white offset — on the default chip that was\n// ring-grey-100 around a grey-100 chip on a white page: effectively invisible\n// (a 2.4.7 Focus Visible / 2.4.13 Focus Appearance failure). An outward\n// indicator can only guarantee contrast against the page, which this component\n// cannot know; the ink is guaranteed to contrast with the surface (that is its\n// whole job), so the indicator is drawn 2px INSIDE the chip in ink, where the\n// contrast maths always holds.\nconst searchFocusClassName =\n  'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--search-ink)'\n\ntype ExpandableSearchContextValue = {\n  value: string\n  setValue: (value: string) => void\n  formHasFocusWithin: boolean\n  variant: ExpandableSearchVariant\n}\n\nconst ExpandableSearchContext = React.createContext<ExpandableSearchContextValue | null>(null)\n\ntype ExpandableSearchProps = React.ComponentPropsWithoutRef<'form'> &\n  VariantProps<typeof expandableSearchVariants> & {\n    /**\n     * Called with the current query when the form submits (Enter in the field\n     * or a click on the search button). Not called if a supplied `onSubmit`\n     * prevented the event's default.\n     */\n    onAction?: (value: string) => void\n    /** Initial query. A non-empty value renders the field expanded. */\n    defaultValue?: string\n    ref?: React.Ref<HTMLFormElement>\n  }\n\ntype ExpandableSearchButtonProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'type'> & {\n  [key: `data-${string}`]: string | number | boolean | undefined\n}\n\ntype ExpandableSearchFieldProps = Omit<\n  React.ComponentPropsWithoutRef<'input'>,\n  // `type` is pinned to `search`; `value`/`defaultValue` are owned by the\n  // `ExpandableSearch` context (seed it via the root's `defaultValue` prop).\n  'type' | 'value' | 'defaultValue'\n> & {\n  /**\n   * Accessible name for the input, rendered as a visually-hidden `<label>`\n   * and mirrored as `aria-label`. Defaults to `'Search'`.\n   */\n  label?: string\n  /** Accessible name for the submit button. Defaults to `'Search'`. */\n  buttonLabel?: string\n  /** Extra props for the submit button (its `type` is pinned to `submit`). */\n  buttonProps?: ExpandableSearchButtonProps\n  ref?: React.Ref<HTMLInputElement>\n}\n\n/**\n * Dev-only guard, mirroring the icon-only Button check in button.tsx: with\n * `label=''` and no `aria-label` the input reaches assistive tech unnamed\n * (WCAG 2.2, 4.1.2 Name, Role, Value) — and this control leans on its name\n * more than most, since collapsed it looks like a plain icon button. No-op in\n * production.\n */\nfunction warnIfFieldUnlabelled(label: string | undefined, ariaLabel: string | undefined) {\n  if (process.env.NODE_ENV === 'production') {\n    return\n  }\n  if (!label && !ariaLabel) {\n    console.warn(\n      '[nswds/ui] ExpandableSearchField has no label — pass `label` or `aria-label` so the search input has an accessible name.',\n    )\n  }\n}\n\n/**\n * Site-search disclosure: a 48px search chip that expands into a text field\n * whenever it holds focus or a value, and submits the query to `onAction`.\n * Compose it as `<ExpandableSearch>` (the form root, owning the value and the\n * focus-within state) around one `<ExpandableSearchField>` (the input and its\n * submit button) — typically inside `HeaderActions`.\n *\n * Ported from nswds-app's `ExpandableSearch`. The mechanic is kept verbatim —\n * the collapsed control IS the text input, styled as a chip, so that the very\n * first focus or tap both reveals and focuses the field with no extra step.\n * Expansion is pure CSS keyed on the active state; no Base UI primitive is\n * used because none models this pattern (it is a styled form, not a popup —\n * focus never moves, nothing is portalled, nothing needs ARIA beyond the\n * label).\n *\n * Accessibility contract:\n * - The input carries a visually-hidden `<label>` and an `aria-label`\n *   (default \"Search\"), and is `type='search'` with `enterKeyHint='search'`,\n *   so its role and purpose are announced while it still looks like a button\n *   (WCAG 2.2, 4.1.2; the source input was an unlabelled-by-type text input).\n * - Keyboard focus shows a 2px ink outline drawn inside the chip — the\n *   source's ring was its own surface colour against a hardcoded white offset\n *   and could vanish entirely (2.4.7, 2.4.13). See `searchFocusClassName`.\n * - Enter submits; Escape clears (native `type='search'` behaviour); an empty\n *   blurred field collapses back to the chip.\n * - Expansion and halo transitions honour `prefers-reduced-motion` (2.3.3).\n *\n * Departures from the nswds-app source, beyond those above:\n * - React 19 `ref` prop instead of `forwardRef`.\n * - Four parallel 14-entry variant tables replaced by one ink-driven map —\n *   see `expandableSearchVariants`.\n * - Expanded width `w-96` → `w-[min(24rem,80vw)]` so the field can never\n *   overflow a small viewport (1.4.10 Reflow).\n * - The expanded state no longer sets `outline-none` (it would have killed\n *   the new focus indicator; the source could afford it because its\n *   indicator was a box-shadow ring).\n * - Expanded text selection uses `select-text`, not the source's\n *   `select-auto` — `auto` computes from the root's `select-none` parent, so\n *   the source's expanded field was unselectable.\n * - A consumer `onChange` on the field is chained after the context update\n *   instead of replacing it (the source's spread order let it clobber the\n *   controlled handler).\n *\n * The root deliberately does not claim `role='search'`: where the component\n * is the page's site search, add it yourself (one search landmark per page).\n */\nfunction ExpandableSearch({\n  className,\n  onAction,\n  defaultValue = '',\n  onSubmit,\n  onFocusCapture,\n  onBlurCapture,\n  variant = 'default',\n  ref,\n  ...props\n}: ExpandableSearchProps) {\n  const [value, setValue] = React.useState(defaultValue)\n  const [formHasFocusWithin, setFormHasFocusWithin] = React.useState(false)\n  const resolvedVariant: ExpandableSearchVariant = variant ?? 'default'\n  const isActive = value.length > 0 || formHasFocusWithin\n\n  const contextValue = React.useMemo(\n    () => ({ value, setValue, formHasFocusWithin, variant: resolvedVariant }),\n    [value, formHasFocusWithin, resolvedVariant],\n  )\n\n  const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {\n    onSubmit?.(e)\n\n    if (e.defaultPrevented) {\n      return\n    }\n\n    e.preventDefault()\n    onAction?.(value)\n  }\n\n  const handleFocusCapture = (e: React.FocusEvent<HTMLFormElement>) => {\n    setFormHasFocusWithin(true)\n    onFocusCapture?.(e)\n  }\n\n  const handleBlurCapture = (e: React.FocusEvent<HTMLFormElement>) => {\n    const nextFocusedElement = e.relatedTarget as Node | null\n\n    if (!e.currentTarget.contains(nextFocusedElement)) {\n      setFormHasFocusWithin(false)\n    }\n\n    onBlurCapture?.(e)\n  }\n\n  return (\n    <ExpandableSearchContext.Provider value={contextValue}>\n      <form\n        data-slot='expandable-search'\n        data-variant={resolvedVariant}\n        // Present-or-absent rather than \"true\"/\"false\", so it reads like Base\n        // UI's data-* attributes and Tailwind's bare `data-expanded:` variant\n        // works. Same convention as Header's data-scrolled.\n        data-expanded={isActive || undefined}\n        {...props}\n        // The surface (and its ink) lives on the root so BOTH children — the\n        // input and the absolutely-positioned submit button — inherit the\n        // custom properties. The root shrink-wraps the input, so painting the\n        // background here is visually identical to painting it on the input.\n        className={cn(expandableSearchVariants({ variant }), className)}\n        onBlurCapture={handleBlurCapture}\n        onFocusCapture={handleFocusCapture}\n        onSubmit={handleSubmit}\n        ref={ref}\n      />\n    </ExpandableSearchContext.Provider>\n  )\n}\n\n/**\n * The input and its submit button. Must be rendered inside `ExpandableSearch`,\n * which owns the value and the focus-within state.\n *\n * The submit button is `pointer-events-none` while collapsed — deliberately,\n * per the source: collapsed, the input overlays the exact same 48px square and\n * OWNS the click, so a tap lands on the input, focuses it, and expands the\n * field. Making the button clickable there would submit an empty query\n * instead of opening the field. It also never traps keyboard focus while\n * collapsed: the input precedes it in tab order, and focusing the input\n * expands the field before the button is reached.\n */\nfunction ExpandableSearchField({\n  className,\n  id,\n  label = 'Search',\n  'aria-label': ariaLabel,\n  autoComplete = 'off',\n  enterKeyHint = 'search',\n  onChange,\n  buttonLabel = 'Search',\n  buttonProps,\n  ref,\n  ...props\n}: ExpandableSearchFieldProps) {\n  const context = React.useContext(ExpandableSearchContext)\n  if (!context) throw new Error('ExpandableSearchField must be used within ExpandableSearch')\n\n  const generatedId = React.useId()\n  const {\n    className: buttonClassName,\n    children: buttonChildren,\n    'aria-label': buttonAriaLabel,\n    ...restButtonProps\n  } = buttonProps ?? {}\n\n  const isActive = context.value.length > 0 || context.formHasFocusWithin\n  const inputId = id ?? generatedId\n\n  warnIfFieldUnlabelled(label, ariaLabel)\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    context.setValue(e.target.value)\n    onChange?.(e)\n  }\n\n  return (\n    <div data-slot='expandable-search-field' className='relative flex-1'>\n      {label ? (\n        // aria-label (below) wins for the accessible name where both exist;\n        // the label element is kept for source parity and so a click on any\n        // future visible rendering of it focuses the input.\n        <label className='sr-only' htmlFor={inputId}>\n          {label}\n        </label>\n      ) : null}\n\n      <input\n        data-slot='expandable-search-input'\n        aria-label={ariaLabel ?? (label || undefined)}\n        autoComplete={autoComplete}\n        enterKeyHint={enterKeyHint}\n        {...props}\n        type='search'\n        id={inputId}\n        value={context.value}\n        onChange={handleChange}\n        className={cn(\n          // Collapsed, the input is a 48px chip: transparent text and\n          // placeholder so nothing peeks out, cursor-pointer because it acts\n          // as the \"open search\" affordance. The background comes from the\n          // form root, which shrink-wraps this element.\n          'flex h-12 w-12 cursor-pointer overflow-hidden rounded-sm border-0 bg-transparent text-transparent',\n          'placeholder:text-transparent placeholder:opacity-0',\n          'duration-300 ease-in-out motion-safe:transition-[width,box-shadow,background-color]',\n          // Hide WebKit's native clear affordance: the source field (type\n          // text) had none, and Escape already clears a search input.\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          searchFocusClassName,\n          isActive\n            ? // Expanded: capped at 80vw so the field cannot overflow small\n              // viewports (the source's fixed w-96 could). pr-12 reserves the\n              // submit button's square. select-text (not select-auto — see\n              // the component JSDoc) re-enables selection under the root's\n              // select-none.\n              'w-[min(24rem,80vw)] cursor-auto pt-0 pr-12 pb-0 pl-4 text-inherit select-text placeholder:text-(--search-placeholder) placeholder:opacity-100'\n            : // Collapsed: the chip halos on hover exactly like the button\n              // does — one visual whether the pointer technically rests on\n              // the input overlay or not.\n              'p-0 hover:bg-(--search-halo)',\n          className,\n        )}\n        ref={ref}\n      />\n\n      <button\n        data-slot='expandable-search-button'\n        aria-label={buttonAriaLabel ?? buttonLabel}\n        {...restButtonProps}\n        type='submit'\n        className={cn(\n          'absolute top-0 right-0 z-10 flex h-12 w-12 cursor-pointer rounded-sm',\n          'duration-200 motion-safe:transition-[background-color,box-shadow]',\n          // Icon and halos all derive from the ink; the whole-form\n          // focus-within halo marks the button as the pending action while\n          // the user types.\n          'text-(--search-ink)',\n          'group-focus-within/search:bg-(--search-halo) hover:bg-(--search-halo) active:bg-(--search-halo-active)',\n          searchFocusClassName,\n          // Collapsed, the input overlay owns the click — see the JSDoc.\n          isActive ? 'pointer-events-auto' : 'pointer-events-none',\n          buttonClassName,\n        )}\n      >\n        {buttonChildren ?? (\n          <IconSearch aria-hidden='true' className='m-auto block size-8 shrink-0 fill-current' />\n        )}\n      </button>\n    </div>\n  )\n}\n\nexport { ExpandableSearch, ExpandableSearchField, expandableSearchVariants }\nexport type {\n  ExpandableSearchButtonProps,\n  ExpandableSearchFieldProps,\n  ExpandableSearchProps,\n  ExpandableSearchVariant,\n}\n",
      "type": "registry:ui",
      "target": "components/expandable-search.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"
  }
}