feat: add ConnectedButtonGroup component

docs/5.x/docs/components/ConnectedButtonGroup/ConnectedButtonGroup.mdx

@@ -0,0 +1,122 @@
+---
+title: ConnectedButtonGroup
+---
+
+import PropTable from '@docs/components/PropTable.tsx';
+import ExtendsLink from '@docs/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@docs/components/ExtendedExample.tsx';
+
+Connected button groups let people select from a set of related options, switch views or sort elements. They are the Material Design 3 successor to `SegmentedButtons`: selected buttons morph to a fully-rounded shape and the group supports single- and multi-select.
+
+<ScreenshotTabs screenshotData="screenshots/connected-button-group.png" />
+
+## Usage
+
+```js
+import * as React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { ConnectedButtonGroup } from 'react-native-paper';
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('walk');
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ConnectedButtonGroup
+        value={value}
+        onValueChange={setValue}
+        buttons={[
+          { value: 'walk', label: 'Walking' },
+          { value: 'train', label: 'Transit' },
+          { value: 'drive', label: 'Driving' },
+        ]}
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});
+
+export default MyComponent;
+```
+
+## Props
+
+<span />
+
+<div>
+
+### buttons (required)
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="buttons" />
+
+<div>
+
+### size
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="size" />
+
+<div>
+
+### style
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="style" />
+
+<div>
+
+### testID
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="testID" />
+
+<div>
+
+### theme
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="theme" />
+
+<span />
+
+## Theme colors
+
+<ThemeColorsTable
+  themeColorsData={{
+    checked: {
+      '-': {
+        backgroundColor: 'theme.colors.secondaryContainer',
+        textColor: 'theme.colors.onSecondaryContainer',
+      },
+    },
+    unchecked: {
+      '-': {
+        backgroundColor: 'theme.colors.surfaceContainer',
+        textColor: 'theme.colors.onSurfaceVariant',
+      },
+    },
+    disabled: {
+      '-': {
+        backgroundColor: 'theme.colors.onSurface',
+        textColor: 'theme.colors.onSurface',
+      },
+    },
+  }}
+  componentName="ConnectedButtonGroup"
+/>
+
+<span />

docs/5.x/docs/components/ConnectedButtonGroup/_meta.json

@@ -0,0 +1,3 @@
+[
+  "ConnectedButtonGroup"
+]

docs/5.x/docs/components/_meta.json

@@ -51,6 +51,13 @@
     "collapsible": true,
     "collapsed": false
   },
+  {
+    "type": "dir",
+    "name": "ConnectedButtonGroup",
+    "label": "ConnectedButtonGroup",
+    "collapsible": true,
+    "collapsed": false
+  },
   {
     "type": "dir",
     "name": "DataTable",

docs/6.x/docs/components/ConnectedButtonGroup/ConnectedButtonGroup.mdx

@@ -0,0 +1,112 @@
+---
+title: ConnectedButtonGroup
+---
+
+import PropTable from '@docs/components/PropTable.tsx';
+import ExtendsLink from '@docs/components/ExtendsLink.tsx';
+import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
+import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
+import ExtendedExample from '@docs/components/ExtendedExample.tsx';
+
+Connected button groups let people select from a set of related options,
+switch views or sort elements. They are the Material Design 3 successor to
+`SegmentedButtons`: selected buttons morph to a fully-rounded shape and the
+group supports single- and multi-select.
+
+
+
+
+  <ScreenshotTabs screenshotData={"screenshots/connected-button-group.png"}/>
+
+
+## Usage
+```js
+import * as React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import { ConnectedButtonGroup } from 'react-native-paper';
+
+const MyComponent = () => {
+  const [value, setValue] = React.useState('walk');
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ConnectedButtonGroup
+        value={value}
+        onValueChange={setValue}
+        buttons={[
+          { value: 'walk', label: 'Walking' },
+          { value: 'train', label: 'Transit' },
+          { value: 'drive', label: 'Driving' },
+        ]}
+      />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+});
+
+export default MyComponent;
+```
+
+
+  ## Props
+  <span />
+
+
+
+<div>
+
+### buttons (required)
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="buttons" />
+
+<div>
+
+### size
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="size" />
+
+<div>
+
+### style
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="style" />
+
+<div>
+
+### testID
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="testID" />
+
+<div>
+
+### theme
+
+</div>
+
+  <PropTable componentLink="ConnectedButtonGroup/ConnectedButtonGroup" prop="theme" />
+
+
+
+<span />
+
+
+  ## Theme colors
+
+  <ThemeColorsTable themeColorsData={{"checked":{"-":{"backgroundColor":"theme.colors.secondaryContainer","textColor":"theme.colors.onSecondaryContainer"}},"unchecked":{"-":{"backgroundColor":"theme.colors.surfaceContainer","textColor":"theme.colors.onSurfaceVariant"}},"disabled":{"-":{"backgroundColor":"theme.colors.onSurface","textColor":"theme.colors.onSurface"}}}} componentName="ConnectedButtonGroup" />
+
+
+<span />

docs/6.x/docs/components/ConnectedButtonGroup/_meta.json

@@ -0,0 +1,3 @@
+[
+  "ConnectedButtonGroup"
+]

docs/6.x/docs/components/SegmentedButtons/SegmentedButtons.mdx

@@ -8,6 +8,14 @@ import ThemeColorsTable from '@docs/components/ThemeColorsTable.tsx';
 import ScreenshotTabs from '@docs/components/ScreenshotTabs.tsx';
 import ExtendedExample from '@docs/components/ExtendedExample.tsx';
 
+@deprecated Segmented buttons are deprecated in the Material Design 3 spec
+and replaced by the Connected Button Group. Use `ConnectedButtonGroup`
+instead — it takes the same `buttons`, `value` and `onValueChange` props for
+both the single- and multi-select models. The only prop without a direct
+equivalent is `density`: pick a `size` from the Material Design 3
+button-group scale instead, where the default `"small"` (40dp) is the
+closest match to a `"regular"` density segmented button.
+
 Segmented buttons can be used to select options, switch views or sort elements.
 
 

docs/6.x/docs/components/_meta.json

@@ -51,6 +51,13 @@
     "collapsible": true,
     "collapsed": false
   },
+  {
+    "type": "dir",
+    "name": "ConnectedButtonGroup",
+    "label": "ConnectedButtonGroup",
+    "collapsible": true,
+    "collapsed": false
+  },
   {
     "type": "dir",
     "name": "DataTable",

docs/component-docs.config.ts

@@ -59,6 +59,9 @@ const pages = {
   Chip: {
     Chip: 'Chip/Chip',
   },
+  ConnectedButtonGroup: {
+    ConnectedButtonGroup: 'ConnectedButtonGroup/ConnectedButtonGroup',
+  },
   DataTable: {
     DataTable: 'DataTable/DataTable',
     DataTableCell: 'DataTable/DataTableCell',