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

@@ -3,17 +3,18 @@ import {
   Animated,
   ColorValue,
   GestureResponderEvent,
+  Pressable,
   StyleSheet,
   View,
 } from 'react-native';
 
-import { getSelectionControlColor } from './utils';
+import { getSelectionVisualState } from './utils';
 import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import { tokens } from '../../theme/tokens';
+import type { ThemeProp } from '../../types';
+import { useFocusVisible } from '../../utils/useFocusVisible';
 
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
+export type Props = {
   /**
    * Status of checkbox.
    */
@@ -36,9 +37,9 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   color?: ColorValue;
   /**
    * Whether the checkbox is in an error state. When true, the outline
-   * (unchecked) and container (checked / indeterminate) use
-   * `theme.colors.error`. `disabled` and explicit `color`/`uncheckedColor`
-   * overrides take precedence.
+   * (unchecked) and container (selected) use `theme.colors.error`.
+   * `disabled` and explicit `color`/`uncheckedColor` overrides take
+   * precedence.
    */
   error?: boolean;
   /**
@@ -51,7 +52,15 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
   testID?: string;
 };
 
-const ANIMATION_DURATION = 100;
+// Spec dimensions (https://m3.material.io/components/checkbox/specs).
+const CONTAINER_SIZE = 18;
+const CONTAINER_RADIUS = 2;
+const OUTLINE_WIDTH = 2;
+const STATE_LAYER_SIZE = 40;
+const FILL_DURATION = 100;
+const CHECK_DURATION = 150;
+
+const { focusIndicator } = tokens.md.sys.state;
 
 /**
  * Checkboxes allow the selection of multiple options from a set.
@@ -84,121 +93,261 @@ const Checkbox = ({
   onPress,
   testID,
   error,
-  ...rest
+  color,
+  uncheckedColor,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { current: scaleAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(1)
-  );
-  const isFirstRendering = React.useRef<boolean>(true);
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
+  const [hovered, setHovered] = React.useState(false);
+  const [pressed, setPressed] = React.useState(false);
+
+  const selected = status === 'checked' || status === 'indeterminate';
 
   const {
     animation: { scale },
   } = theme;
 
+  // 0 = unselected (outline only), 1 = selected (filled + drawn icon).
+  const fillAnim = React.useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const checkAnim = React.useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const firstRender = React.useRef(true);
+
   React.useEffect(() => {
-    // Do not run animation on very first rendering
-    if (isFirstRendering.current) {
-      isFirstRendering.current = false;
+    if (firstRender.current) {
+      firstRender.current = false;
       return;
     }
+    Animated.timing(fillAnim, {
+      toValue: selected ? 1 : 0,
+      duration: FILL_DURATION * scale,
+      useNativeDriver: true,
+    }).start();
+    Animated.timing(checkAnim, {
+      toValue: selected ? 1 : 0,
+      duration: CHECK_DURATION * scale,
+      useNativeDriver: false,
+    }).start();
+  }, [selected, fillAnim, checkAnim, scale]);
+
+  const visual = getSelectionVisualState({
+    theme,
+    selected,
+    disabled,
+    hovered,
+    focused: focusVisible,
+    pressed,
+    error,
+    customColor: color,
+    customUncheckedColor: uncheckedColor,
+  });
 
-    const checked = status === 'checked';
-
-    Animated.sequence([
-      Animated.timing(scaleAnim, {
-        toValue: 0.85,
-        duration: checked ? ANIMATION_DURATION * scale : 0,
-        useNativeDriver: false,
-      }),
-      Animated.timing(scaleAnim, {
-        toValue: 1,
-        duration: checked
-          ? ANIMATION_DURATION * scale
-          : ANIMATION_DURATION * scale * 1.75,
-        useNativeDriver: false,
-      }),
-    ]).start();
-  }, [status, scaleAnim, scale]);
-
-  const checked = status === 'checked';
-  const indeterminate = status === 'indeterminate';
-
-  const { selectionControlColor, selectionControlOpacity } =
-    getSelectionControlColor({
-      theme,
-      disabled,
-      checked,
-      customColor: rest.color,
-      customUncheckedColor: rest.uncheckedColor,
-      error,
-    });
-
-  const borderWidth = scaleAnim.interpolate({
-    inputRange: [0.8, 1],
-    outputRange: [7, 0],
+  // Outline fades out as fill fades in (and vice versa).
+  const outlineOpacity = fillAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
   });
 
-  const icon = indeterminate
-    ? 'minus-box'
-    : checked
-    ? 'checkbox-marked'
-    : 'checkbox-blank-outline';
+  // Remember which glyph to render so the reveal-mask can still collapse
+  // when transitioning back to 'unchecked' (selected becomes false, but
+  // we keep showing the previous glyph until checkAnim hits 0).
+  const lastGlyph = React.useRef<'check' | 'indeterminate'>('check');
+  if (status === 'checked') lastGlyph.current = 'check';
+  else if (status === 'indeterminate') lastGlyph.current = 'indeterminate';
+  const showIndeterminate = lastGlyph.current === 'indeterminate';
 
   return (
-    <TouchableRipple
-      {...rest}
-      borderless
+    <Pressable
       onPress={onPress}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
       disabled={disabled}
       accessibilityRole="checkbox"
-      accessibilityState={{ disabled, checked }}
+      accessibilityState={{ disabled, checked: indeterminate ? 'mixed' : status === 'checked' }}
       accessibilityLiveRegion="polite"
-      style={styles.container}
       testID={testID}
-      theme={theme}
+      style={styles.tapTarget}
     >
-      <Animated.View
-        style={{
-          transform: [{ scale: scaleAnim }],
-          opacity: selectionControlOpacity,
-        }}
-      >
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={selectionControlColor}
-          direction="ltr"
+      <View pointerEvents="none" style={styles.tapTargetInner}>
+        <View
+          style={[
+            styles.stateLayer,
+            {
+              backgroundColor: visual.stateLayerColor,
+              opacity: visual.stateLayerOpacity,
+            },
+          ]}
         />
-        <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
+        {focusVisible && !disabled ? (
+          <View
+            style={[
+              styles.focusRing,
+              {
+                borderColor: theme.colors.secondary,
+                borderWidth: focusIndicator.thickness,
+              },
+            ]}
+          />
+        ) : null}
+        <View style={[styles.container, { opacity: visual.containerOpacity }]}>
           <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.outline,
+              {
+                borderColor: visual.outlineColor,
+                opacity: outlineOpacity,
+              },
+            ]}
+          />
+          <Animated.View
+            pointerEvents="none"
             style={[
               styles.fill,
-              { borderColor: selectionControlColor },
-              { borderWidth },
+              {
+                backgroundColor: visual.containerColor,
+                opacity: fillAnim,
+              },
             ]}
           />
+          {showIndeterminate ? (
+            <Animated.View
+              style={[
+                styles.checkmarkMask,
+                {
+                  width: checkAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, CONTAINER_SIZE],
+                  }),
+                  opacity: checkAnim,
+                },
+              ]}
+            >
+              <View style={styles.checkmarkContent}>
+                <View
+                  style={[styles.dash, { backgroundColor: visual.iconColor }]}
+                />
+              </View>
+            </Animated.View>
+          ) : (
+            <Checkmark color={visual.iconColor} progress={checkAnim} />
+          )}
         </View>
-      </Animated.View>
-    </TouchableRipple>
+      </View>
+    </Pressable>
+  );
+};
+
+/**
+ * Reveal-mask checkmark: a static L-shape (borderLeftWidth +
+ * borderBottomWidth rotated -45deg) inside a left-anchored View whose
+ * width animates 0 -> CONTAINER_SIZE. The checkmark "draws in"
+ * left-to-right, approximating Compose Material3's stroke-fraction
+ * animation without an SVG dependency.
+ */
+const Checkmark = ({
+  color,
+  progress,
+}: {
+  color: ColorValue;
+  progress: Animated.Value;
+}) => {
+  const maskWidth = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, CONTAINER_SIZE],
+  });
+  return (
+    <Animated.View
+      style={[styles.checkmarkMask, { width: maskWidth, opacity: progress }]}
+    >
+      <View style={styles.checkmarkContent}>
+        <View style={[styles.checkmarkGlyph, { borderColor: color }]} />
+      </View>
+    </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-    width: 36,
-    height: 36,
-    padding: 6,
+  tapTarget: {
+    width: STATE_LAYER_SIZE,
+    height: STATE_LAYER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tapTargetInner: {
+    width: STATE_LAYER_SIZE,
+    height: STATE_LAYER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stateLayer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: STATE_LAYER_SIZE,
+    height: STATE_LAYER_SIZE,
+    borderRadius: STATE_LAYER_SIZE / 2,
   },
-  fillContainer: {
+  focusRing: {
+    position: 'absolute',
+    top: -focusIndicator.outerOffset,
+    left: -focusIndicator.outerOffset,
+    width: STATE_LAYER_SIZE + focusIndicator.outerOffset * 2,
+    height: STATE_LAYER_SIZE + focusIndicator.outerOffset * 2,
+    borderRadius: (STATE_LAYER_SIZE + focusIndicator.outerOffset * 2) / 2,
+  },
+  container: {
+    width: CONTAINER_SIZE,
+    height: CONTAINER_SIZE,
+    borderRadius: CONTAINER_RADIUS,
     alignItems: 'center',
     justifyContent: 'center',
+    overflow: 'hidden',
   },
   fill: {
-    height: 14,
-    width: 14,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: CONTAINER_RADIUS,
+  },
+  outline: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: OUTLINE_WIDTH,
+    borderRadius: CONTAINER_RADIUS,
+  },
+  dash: {
+    width: 10,
+    height: 2,
+    borderRadius: 1,
+  },
+  checkmarkMask: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    height: CONTAINER_SIZE,
+    overflow: 'hidden',
+  },
+  checkmarkContent: {
+    width: CONTAINER_SIZE,
+    height: CONTAINER_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmarkGlyph: {
+    width: 11,
+    height: 6,
+    borderLeftWidth: 2,
+    borderBottomWidth: 2,
+    transform: [{ rotate: '-45deg' }, { translateY: -1 }, { translateX: 1 }],
   },
 });