Stricter typing for SegmentedButtons component

Related to #4528

Add stricter typing for `onValueChange` in `SegmentedButtons` component to support union types in TypeScript projects.

* Modify `src/components/SegmentedButtons/SegmentedButtons.tsx` to accept a generic type parameter for the `value` and `onValueChange` props.
  * Update `ConditionalValue` type to use the generic type parameter.
  * Update `Props` type to use the generic type parameter.
* Update example files to demonstrate the usage of the stricter typing:
  * `example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonWithSelectedCheck.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx`
  * `example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx`
  * `example/src/Examples/SegmentedButtonsExample.tsx`
  * `example/src/Examples/ToggleButtonExample.tsx`

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/callstack/react-native-paper/issues/4528?shareId=XXXX-XXXX-XXXX-XXXX).

Author: jboteros

example/src/Examples/SegmentedButtons/SegmentedButtonCustomColorCheck.tsx

@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'train' | 'drive';
+
 const themeMock = {
   colors: {
     onSurface: '#3700B3',
@@ -12,13 +14,13 @@ const themeMock = {
 };
 
 const SegmentButtonCustomColorCheck = () => {
-  const [themeValue, setThemeValue] = React.useState('');
-  const [colorValue, setColorValue] = React.useState('');
+  const [themeValue, setThemeValue] = React.useState<TransportMode>('walk');
+  const [colorValue, setColorValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - Custom Colors`}>
       <List.Subheader>Via Theme</List.Subheader>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         value={themeValue}
         onValueChange={setThemeValue}
         theme={themeMock}
@@ -46,7 +48,7 @@ const SegmentButtonCustomColorCheck = () => {
         style={styles.group}
       />
       <List.Subheader>Via Props</List.Subheader>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         value={colorValue}
         onValueChange={setColorValue}
         theme={themeMock}

example/src/Examples/SegmentedButtons/SegmentedButtonDefault.tsx

@@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'train' | 'drive';
+
 const SegmentedButtonDefault = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button`}>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         value={value}
         onValueChange={setValue}
         buttons={[

example/src/Examples/SegmentedButtons/SegmentedButtonDisabled.tsx

@@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'disabled' | 'drive';
+
 const SegmentedButtonDisabled = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - disabled`}>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         onValueChange={setValue}
         buttons={[
           {

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselect.tsx

@@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'transit' | 'drive';
+
 const SegmentedButtonMultiselect = () => {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [value, setValue] = React.useState<TransportMode[]>([]);
 
   return (
     <List.Section title={`Segmented Button - multiselect`}>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         multiSelect
         onValueChange={setValue}
         value={value}

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectIcons.tsx

@@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type Size = 'size-s' | 'size-m' | 'size-l' | 'size-xl' | 'size-xxl';
+
 const SegmentedButtonMultiselectIcons = () => {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [value, setValue] = React.useState<Size[]>([]);
 
   return (
     <List.Section title={`Segmented Button - multiselect only icons`}>
-      <SegmentedButtons
+      <SegmentedButtons<Size>
         multiSelect
         onValueChange={setValue}
         value={value}

example/src/Examples/SegmentedButtons/SegmentedButtonMultiselectRealCase.tsx

@@ -5,18 +5,20 @@ import { Card, IconButton, SegmentedButtons } from 'react-native-paper';
 
 import { restaurantsData } from '../../../utils';
 
+type PriceRange = '1' | '2' | '3' | '4';
+
 const SegmentedButtonMultiselectRealCase = () => {
-  const [value, setValue] = React.useState<string[]>([]);
+  const [value, setValue] = React.useState<PriceRange[]>([]);
 
   const filteredData = React.useMemo(
     () =>
-      restaurantsData.filter((item) => value.includes(item.price.toString())),
+      restaurantsData.filter((item) => value.includes(item.price.toString() as PriceRange)),
     [value]
   );
 
   return (
     <View style={styles.container}>
-      <SegmentedButtons
+      <SegmentedButtons<PriceRange>
         value={value}
         onValueChange={setValue}
         multiSelect

example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIcons.tsx

@@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'train' | 'drive';
+
 const SegmentedButtonOnlyIcons = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - only icons`}>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         onValueChange={setValue}
         style={styles.group}
         value={value}
@@ -19,7 +21,7 @@ const SegmentedButtonOnlyIcons = () => {
           },
           {
             icon: 'train',
-            value: 'trainsit',
+            value: 'train',
           },
           {
             icon: 'car',

example/src/Examples/SegmentedButtons/SegmentedButtonOnlyIconsWithCheck.tsx

@@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'transit' | 'drive';
+
 const SegmentedButtonOnlyIconsWithCheck = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - icons + show selected check`}>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         onValueChange={setValue}
         style={styles.group}
         value={value}

example/src/Examples/SegmentedButtons/SegmentedButtonRealCase.tsx

@@ -5,12 +5,14 @@ import { Card, IconButton, SegmentedButtons } from 'react-native-paper';
 
 import { songsData, albumsData } from '../../../utils';
 
+type MediaType = 'songs' | 'albums';
+
 const SegmentedButtonRealCase = () => {
-  const [value, setValue] = React.useState('songs');
+  const [value, setValue] = React.useState<MediaType>('songs');
 
   return (
     <View style={styles.container}>
-      <SegmentedButtons
+      <SegmentedButtons<MediaType>
         value={value}
         onValueChange={setValue}
         buttons={[

example/src/Examples/SegmentedButtons/SegmentedButtonWithDensity.tsx

@@ -3,12 +3,14 @@ import { StyleSheet } from 'react-native';
 
 import { List, SegmentedButtons } from 'react-native-paper';
 
+type TransportMode = 'walk' | 'transit' | 'drive';
+
 const SegmentedButtonWithDensity = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = React.useState<TransportMode>('walk');
 
   return (
     <List.Section title={`Segmented Button - only labels + density`}>
-      <SegmentedButtons
+      <SegmentedButtons<TransportMode>
         onValueChange={setValue}
         value={value}
         density="medium"