Expandable Search

1'use client'
2 
3import { cva, type VariantProps } from 'class-variance-authority'
4import React from 'react'
5 
6import { cn } from '@/lib/utils'
7 
8import { IconSearch } from '@/icons/search'
9 
10/**
11 * Surface colours the search can be themed with — the footer's thirteen-name
12 * vocabulary (see `footerColors` in footer.tsx) plus `default`, the nswds-app
13 * grey-100 chip that headers embed on a white surface.
14 *
15 * Every derived colour resolves from a single `--search-ink` token, so a
16 * variant only declares its surface utilities and that one value. This map
17 * replaces the FOUR parallel 14-entry cva tables in the nswds-app source
18 * (surface / collapsed / button / focus): each of those tables was a manual
19 * projection of the same underlying ink, so they are collapsed into the
20 * derivations below.
21 *
22 * The derivations are written literally here (once) rather than per-variant:
23 * Tailwind scans source text for class names, so a template-built arbitrary
24 * property would never be emitted. Mirrors footer.tsx (`--footer-*`) and
25 * link.tsx (`--link-halo`).
26 *
27 * Expanded text/surface pairs are the ones verified for footer.tsx: every
28 * light pair clears WCAG 2.2 AA (1.4.3, 4.5:1) — the worst are `primary-600`
29 * (4.57:1) and `accent-600` (5.18:1) — and in dark mode all clear AAA (worst
30 * 13.6:1). The collapsed chip renders no text, only the icon, which paints in
31 * the same ink.
32 */
33const expandableSearchVariants = cva(
34  [
35    // `group/search` is named so the submit button's group-focus-within hook
36    // can't collide with an ancestor's bare `group` (e.g. inside a card).
37    'group/search relative inline-block rounded-sm select-none',
38    // Halo for the submit button's hover / the form's focus-within state, a
39    // heavier press halo, and the placeholder colour — all mixed down from
40    // the ink. 70% ink keeps the placeholder related to but visibly lighter
41    // than the entered text (the source used grey-700 / current at 70%
42    // opacity). Dilution costs contrast, though, so the percentage routes
43    // through --search-placeholder-pct and the surfaces whose 70% composite
44    // fails 1.4.3 raise it to 100% in the variant map below. Verified by
45    // alpha-compositing the mix over each surface (light mode): at 70%
46    // primary-600 is 3.0:1, accent-600 3.1:1 and accent-400 4.48:1 — all
47    // AA failures, cured by full ink (4.57 / 5.18 / 8.34:1). The eleven
48    // surfaces that keep 70% all clear 4.5:1, the closest being
49// … truncated