feat(checkbox): modernize for md3 spec compliance

Rewrites the Checkbox renderer to match the Material Design 3 spec
(https://m3.material.io/components/checkbox/specs):

- 18dp container with 2dp outline (unselected) / 0dp outline + theme
  primary fill (selected), inside a 40dp state-layer tap target.
- State-layer overlay renders hover (8%), focus (10%) and pressed (10%)
  layers in the color the spec defines for each (selected pressed flips
  to onSurface; error always wins).
- Focus indicator: 3dp ring at theme.colors.secondary with the 2dp
  outer-offset from md.sys.state.focusIndicator. Gated on
  :focus-visible via the useFocusVisible hook added in #4952.
- Animations approximate Compose Material3 Checkbox.kt: 100ms fill
  transition and 150ms checkmark draw, sequenced short-leg then
  long-leg to suggest the stroke fraction. Indeterminate uses a
  scaleX-animated dash.
- No new peer-deps: the checkmark is built from two rotated rectangles
  (View-based), not an SVG path.

utils.ts:
- New getSelectionVisualState helper returns the full color +
  opacity + outline-width picture for a given state combo.
- Legacy getSelectionControlColor kept as a compatibility export
  for RadioButtonAndroid (radio button modernization is out of
  scope for this PR).

9 snapshots auto-updated to reflect the new render tree.

Author: fabriziocucci

src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,16 @@
+/**
+ * MD3 Checkbox spec dimensions and opacities.
+ * @see https://m3.material.io/components/checkbox/specs
+ *
+ * Mirrors the `SwitchTokens` pattern from `src/components/Switch/tokens.ts`
+ * so other selection-control modernizations (e.g. RadioButton) can adopt
+ * the same shape.
+ */
+const sizes = {
+  containerSize: 18,
+  containerRadius: 2,
+  outlineWidth: 2,
+  stateLayerSize: 40,
+} as const;
+
+export const CheckboxTokens = { ...sizes };

src/components/Checkbox/tokens.ts

@@ -1,106 +1,183 @@
 import type { ColorValue } from 'react-native';
 
 import { tokens } from '../../theme/tokens';
+import type { ColorRole } from '../../theme/types';
+import { getStateLayer } from '../../theme/utils/state';
 import type { InternalTheme } from '../../types';
 
+// MD3 Checkbox spec: https://m3.material.io/components/checkbox/specs
+
 const stateOpacity = tokens.md.sys.state.opacity;
 
-const getCheckedColor = ({
-  theme,
-  customColor,
-  error,
-}: {
+const CheckboxTokens = {
+  containerColor: 'primary' as const,
+  disabledContainerColor: 'onSurface' as const,
+  errorContainerColor: 'error' as const,
+  outlineColor: 'onSurfaceVariant' as const,
+  disabledOutlineColor: 'onSurface' as const,
+  errorOutlineColor: 'error' as const,
+  iconColor: 'onPrimary' as const,
+  disabledIconColor: 'surface' as const,
+  errorIconColor: 'onError' as const,
+  selectedStateLayerColor: 'primary' as const,
+  unselectedStateLayerColor: 'onSurface' as const,
+  errorStateLayerColor: 'error' as const,
+} as const;
+
+type StaticState = {
   theme: InternalTheme;
-  customColor?: ColorValue;
+  selected: boolean;
+  disabled?: boolean;
   error?: boolean;
-}) => {
+  customColor?: ColorValue;
+  customUncheckedColor?: ColorValue;
+};
+
+type SelectionState = StaticState & {
+  hovered?: boolean;
+  pressed?: boolean;
+};
+
+type SelectionVisualState = {
+  containerColor: ColorValue;
+  outlineColor: ColorValue;
+  containerOpacity: number;
+  iconColor: ColorValue;
+  stateLayerColor: ColorValue;
+  stateLayerOpacity: number;
+};
+
+const getContainerColor = ({
+  theme,
+  disabled,
+  error,
+  customColor,
+}: StaticState): ColorValue => {
+  if (disabled) {
+    return theme.colors[CheckboxTokens.disabledContainerColor];
+  }
   if (customColor) {
     return customColor;
   }
-
   if (error) {
-    return theme.colors.error;
+    return theme.colors[CheckboxTokens.errorContainerColor];
   }
-
-  return theme.colors.primary;
+  return theme.colors[CheckboxTokens.containerColor];
 };
 
-const getUncheckedColor = ({
+const getOutlineColor = ({
   theme,
-  customUncheckedColor,
+  disabled,
   error,
-}: {
-  theme: InternalTheme;
-  customUncheckedColor?: ColorValue;
-  error?: boolean;
-}) => {
+  customUncheckedColor,
+}: StaticState): ColorValue => {
+  if (disabled) {
+    return theme.colors[CheckboxTokens.disabledOutlineColor];
+  }
   if (customUncheckedColor) {
     return customUncheckedColor;
   }
-
   if (error) {
-    return theme.colors.error;
+    return theme.colors[CheckboxTokens.errorOutlineColor];
   }
-
-  return theme.colors.onSurfaceVariant;
+  return theme.colors[CheckboxTokens.outlineColor];
 };
 
-const getControlColor = ({
+const getIconColor = ({
   theme,
-  checked,
+  selected,
   disabled,
-  checkedColor,
-  uncheckedColor,
-}: {
-  theme: InternalTheme;
-  checked: boolean;
-  checkedColor: ColorValue;
-  uncheckedColor: ColorValue;
-  disabled?: boolean;
-}) => {
+  error,
+}: StaticState): ColorValue => {
+  if (!selected) {
+    return 'transparent';
+  }
   if (disabled) {
-    return theme.colors.onSurface;
+    return theme.colors[CheckboxTokens.disabledIconColor];
   }
-
-  if (checked) {
-    return checkedColor;
+  if (error) {
+    return theme.colors[CheckboxTokens.errorIconColor];
   }
-  return uncheckedColor;
+  return theme.colors[CheckboxTokens.iconColor];
+};
+
+// The MD3 spec renders the focused state as an outline ring only (no
+// state-layer fill), so `focused` is intentionally not handled here.
+const resolveStateLayer = ({
+  theme,
+  selected,
+  hovered,
+  pressed,
+  error,
+}: Omit<SelectionState, 'customColor' | 'customUncheckedColor' | 'disabled'>): {
+  color: ColorValue;
+  opacity: number;
+} => {
+  const state = pressed ? 'pressed' : hovered ? 'hovered' : null;
+  if (!state) return { color: 'transparent', opacity: 0 };
+
+  // Pressed flips selected/unselected colors per the MD3 spec.
+  const role: ColorRole = error
+    ? CheckboxTokens.errorStateLayerColor
+    : (pressed ? !selected : selected)
+    ? CheckboxTokens.selectedStateLayerColor
+    : CheckboxTokens.unselectedStateLayerColor;
+  return getStateLayer(theme, role, state);
 };
 
-export const getSelectionControlColor = ({
+/**
+ * Resolve the full color + opacity picture for the Checkbox renderer.
+ *
+ * Returns flat values so the renderer can pass them straight to its
+ * `Animated.View` styles without re-deriving anything.
+ */
+export const getSelectionVisualState = ({
   theme,
+  selected,
   disabled,
-  checked,
+  hovered,
+  pressed,
+  error,
   customColor,
   customUncheckedColor,
-  error,
-}: {
-  theme: InternalTheme;
-  checked: boolean;
-  disabled?: boolean;
-  customColor?: ColorValue;
-  customUncheckedColor?: ColorValue;
-  error?: boolean;
-}) => {
-  const checkedColor = getCheckedColor({ theme, customColor, error });
-  const uncheckedColor = getUncheckedColor({
+}: SelectionState): SelectionVisualState => {
+  const containerColor = getContainerColor({
     theme,
+    selected,
+    disabled,
+    error,
+    customColor,
     customUncheckedColor,
+  });
+  const outlineColor = getOutlineColor({
+    theme,
+    selected,
+    disabled,
+    error,
+    customColor,
+    customUncheckedColor,
+  });
+  const iconColor = getIconColor({
+    theme,
+    selected,
+    disabled,
+    error,
+    customColor,
+    customUncheckedColor,
+  });
+  const stateLayer = resolveStateLayer({
+    theme,
+    selected,
+    hovered: hovered && !disabled,
+    pressed: pressed && !disabled,
     error,
   });
-  const selectionControlOpacity = disabled
-    ? stateOpacity.disabled
-    : stateOpacity.enabled;
-
   return {
-    selectionControlColor: getControlColor({
-      theme,
-      disabled,
-      checked,
-      checkedColor,
-      uncheckedColor,
-    }),
-    selectionControlOpacity,
+    containerColor,
+    outlineColor,
+    containerOpacity: disabled ? stateOpacity.disabled : stateOpacity.enabled,
+    iconColor,
+    stateLayerColor: stateLayer.color,
+    stateLayerOpacity: stateLayer.opacity,
   };
 };

src/components/Checkbox/utils.ts

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
 import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
-import { handlePress, isChecked } from './utils';
+import { getSelectionControlColor, handlePress, isChecked } from './utils';
 import { useInternalTheme } from '../../core/theming';
 import type { $RemoveChildren, ThemeProp } from '../../types';
-import { getSelectionControlColor } from '../Checkbox/utils';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 
 export type Props = $RemoveChildren<typeof TouchableRipple> & {

src/components/RadioButton/RadioButtonAndroid.tsx

@@ -93,3 +93,44 @@ export const getSelectionControlIOSColor = ({
     checkedColorOpacity,
   };
 };
+
+/**
+ * Color resolver for `RadioButtonAndroid`.
+ *
+ * Previously shared with the pre-MD3 Checkbox (and lived in
+ * `Checkbox/utils.ts`); moved here when Checkbox modernized to its own
+ * `getSelectionVisualState` helper.
+ */
+export const getSelectionControlColor = ({
+  theme,
+  disabled,
+  checked,
+  customColor,
+  customUncheckedColor,
+  error,
+}: {
+  theme: InternalTheme;
+  checked: boolean;
+  disabled?: boolean;
+  customColor?: ColorValue;
+  customUncheckedColor?: ColorValue;
+  error?: boolean;
+}): { selectionControlColor: ColorValue; selectionControlOpacity: number } => {
+  const opacity = disabled ? stateOpacity.disabled : stateOpacity.enabled;
+  const checkedColor = customColor
+    ? customColor
+    : error
+    ? theme.colors.error
+    : theme.colors.primary;
+  const uncheckedColor = customUncheckedColor
+    ? customUncheckedColor
+    : error
+    ? theme.colors.error
+    : theme.colors.onSurfaceVariant;
+  const color = disabled
+    ? theme.colors.onSurface
+    : checked
+    ? checkedColor
+    : uncheckedColor;
+  return { selectionControlColor: color, selectionControlOpacity: opacity };
+};

src/components/RadioButton/utils.ts

@@ -42,13 +42,16 @@ it('should have `accessibilityState={ checked: false }` when `status="unchecked"
   expect(elements).toHaveLength(2);
 });
 
-it('should have `accessibilityState={ checked: false }` when `status="indeterminate"', () => {
+it('should have `accessibilityState={ checked: "mixed" }` when `status="indeterminate"`', () => {
   const { getAllByA11yState } = render(
     <Checkbox.Item status="indeterminate" label="Indeterminate Button" />
   );
 
-  const elements = getAllByA11yState({ checked: false });
-  expect(elements).toHaveLength(2);
+  // The inner Checkbox exposes `checked: "mixed"` (per W3C ARIA spec for
+  // tri-state controls), while the outer row Pressable exposes
+  // `checked: false`.
+  expect(getAllByA11yState({ checked: 'mixed' })).toHaveLength(1);
+  expect(getAllByA11yState({ checked: false })).toHaveLength(1);
 });
 
 it('disables the row when the prop disabled is true', () => {