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

example/src/Examples/CheckboxExample.tsx

@@ -8,7 +8,27 @@ import ScreenWrapper from '../ScreenWrapper';
 const CheckboxExample = () => {
   const [checkedNormal, setCheckedNormal] = React.useState<boolean>(true);
   const [checkedCustom, setCheckedCustom] = React.useState<boolean>(true);
-  const [indeterminate, setIndeterminate] = React.useState<boolean>(true);
+  const [checkedError, setCheckedError] = React.useState<boolean>(false);
+
+  // Indeterminate parent: aggregates the state of its children.
+  const [child1, setChild1] = React.useState<boolean>(true);
+  const [child2, setChild2] = React.useState<boolean>(false);
+  const [child3, setChild3] = React.useState<boolean>(true);
+
+  const allChecked = child1 && child2 && child3;
+  const noneChecked = !child1 && !child2 && !child3;
+  const parentStatus: 'checked' | 'unchecked' | 'indeterminate' = allChecked
+    ? 'checked'
+    : noneChecked
+    ? 'unchecked'
+    : 'indeterminate';
+
+  const toggleAllChildren = () => {
+    const next = !allChecked;
+    setChild1(next);
+    setChild2(next);
+    setChild3(next);
+  };
 
   return (
     <ScreenWrapper style={styles.container}>
@@ -33,11 +53,11 @@ const CheckboxExample = () => {
         </View>
       </TouchableRipple>
 
-      <TouchableRipple onPress={() => setIndeterminate(!indeterminate)}>
+      <TouchableRipple onPress={() => setCheckedError(!checkedError)}>
         <View style={styles.row}>
-          <Text>Indeterminate</Text>
+          <Text>Error</Text>
           <View pointerEvents="none">
-            <Checkbox status={indeterminate ? 'indeterminate' : 'unchecked'} />
+            <Checkbox error status={checkedError ? 'checked' : 'unchecked'} />
           </View>
         </View>
       </TouchableRipple>
@@ -54,6 +74,42 @@ const CheckboxExample = () => {
         <Text>Indeterminate (Disabled)</Text>
         <Checkbox status="indeterminate" disabled />
       </View>
+
+      <View style={styles.sectionLabel}>
+        <Text variant="labelLarge">Parent / children (indeterminate)</Text>
+      </View>
+      <TouchableRipple onPress={toggleAllChildren}>
+        <View style={styles.row}>
+          <Text>Select all</Text>
+          <View pointerEvents="none">
+            <Checkbox status={parentStatus} />
+          </View>
+        </View>
+      </TouchableRipple>
+      <TouchableRipple onPress={() => setChild1(!child1)}>
+        <View style={[styles.row, styles.indent]}>
+          <Text>Apples</Text>
+          <View pointerEvents="none">
+            <Checkbox status={child1 ? 'checked' : 'unchecked'} />
+          </View>
+        </View>
+      </TouchableRipple>
+      <TouchableRipple onPress={() => setChild2(!child2)}>
+        <View style={[styles.row, styles.indent]}>
+          <Text>Bananas</Text>
+          <View pointerEvents="none">
+            <Checkbox status={child2 ? 'checked' : 'unchecked'} />
+          </View>
+        </View>
+      </TouchableRipple>
+      <TouchableRipple onPress={() => setChild3(!child3)}>
+        <View style={[styles.row, styles.indent]}>
+          <Text>Cherries</Text>
+          <View pointerEvents="none">
+            <Checkbox status={child3 ? 'checked' : 'unchecked'} />
+          </View>
+        </View>
+      </TouchableRipple>
     </ScreenWrapper>
   );
 };
@@ -71,6 +127,14 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 16,
   },
+  indent: {
+    paddingLeft: 32,
+  },
+  sectionLabel: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 4,
+  },
 });
 
 export default CheckboxExample;