Theme Switcher

1'use client'
2 
3import React from 'react'
4 
5import { IconDarkMode } from '@/icons/dark-mode'
6import { IconLightMode } from '@/icons/light-mode'
7 
8import { Button, type ButtonProps } from '@/components/button'
9 
10/** The two colour schemes the switcher toggles between. */
11type ThemeSwitcherTheme = 'light' | 'dark'
12 
13type ThemeSwitcherProps = Omit<ButtonProps, 'children'> & {
14  /**
15   * Current theme (controlled). When set, the component never updates its own
16   * state — wire `onThemeChange` back into whatever owns the theme (see the
17   * next-themes snippet on the Storybook docs page). Pick one mode per
18   * instance: don't switch between supplying and omitting `theme` across
19   * renders.
20   */
21  theme?: ThemeSwitcherTheme
22  /** Initial theme when uncontrolled. Defaults to `'light'`. */
23  defaultTheme?: ThemeSwitcherTheme
24  /**
25   * Called with the NEXT theme (the one the user asked for) on every
26   * activation, in both controlled and uncontrolled modes.
27   */
28  onThemeChange?: (theme: ThemeSwitcherTheme) => void
29}
30 
31/**
32 * Light/dark theme toggle button, ported from nswds-app's `ThemeSwitcher`
33 * minus its `next-themes` dependency — a design system cannot depend on a
34 * theming framework, so this is a plain controlled/uncontrolled input
35 * (`theme` / `defaultTheme` / `onThemeChange`) and the app owns the plumbing.
36 * All other props pass through to `Button` (defaults: `variant='surface'`,
37 * `color='grey'`, `size='icon'` — the source's `color='light'` does not exist
38 * on this Button; `grey` is its nearest ink).
39 *
40 * The icon depicts the DESTINATION: a moon (`IconDarkMode`) while the theme is
41 * light, a sun (`IconLightMode`) while it is dark — matching the source and
42 * the action-phrased label below.
43 *
44 * Accessibility contract:
45 * - The `aria-label` announces the ACTION ("Switch to dark theme"), not the
46 *   state, and flips after each activation so the control always names what
47 *   pressing it will do (WCAG 2.2, 4.1.2 Name, Role, Value). The source
48 *   duplicated the same words in an `sr-only` span AND the `aria-label`; the
49 *   span is dropped here because a control with both gets its name announced
50 *   twice by common screen readers (label, then descendant text).
51 * - No `aria-pressed`. This is a mode switch between two peer states, each
52 *   with its own action label — not a pressed/unpressed toggle of a single
53 *   action. Combining `aria-pressed` with a flipping label is actively
54// … truncated