ADDED: Segmented buttons component

TODO: Styles for SB component

app/page.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import React, { Fragment } from 'react';
 import Fabs from './components/fabs';
 import Badges from './components/badges';
 import Radios from './components/radios';
@@ -7,6 +7,10 @@ import Switches from './components/switches';
 import Checkboxes from './components/checkboxes';
 import IconButtons from './components/icon-buttons';
 import { TextFields } from './components/text-fields';
+import {
+    ButtonLayout,
+    SegmentedButtons,
+} from '../src/primitive-components/components';
 
 export default function Page() {
     return (
@@ -40,6 +44,14 @@ export default function Page() {
                     <Fabs />
                     <Badges />
                 </div>
+                <SegmentedButtons>
+                    <ButtonLayout>
+                        <span>Segment 1</span>
+                    </ButtonLayout>
+                    <ButtonLayout>
+                        <span>Segment 1</span>
+                    </ButtonLayout>
+                </SegmentedButtons>
             </div>
         </Fragment>
     );

src/primitive-components/components.tsx

@@ -11,3 +11,4 @@ export { Ripples, Ripple } from './ripple/ripple';
 export { TextField } from './text-field/text-field';
 export { IconButton } from './icon-button/icon-button';
 export { ButtonLayout } from './button-layout/button-layout';
+export { SegmentedButtons } from './segmented-buttons/segmented-buttons';

src/primitive-components/segmented-buttons/segmented-buttons.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { SegmentedButtonProps } from './segmented-buttons.types';
+
+export const SegmentedButtons = forwardRef<
+    HTMLDivElement,
+    SegmentedButtonProps
+>(({ children, ...props }, ref) => {
+    if (children.length <= 1) {
+        console.error('You must build segmented button with 2 or more buttton');
+        return <></>;
+    }
+
+    return (
+        <div
+            className={`m3 m3-segmented-buttons ${props.className ?? ''}`.trimEnd()}
+            ref={ref}
+        >
+            {children}
+        </div>
+    );
+});

src/primitive-components/segmented-buttons/segmented-buttons.types.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactElement } from 'react';
+
+export interface SegmentedButton {
+    children?: ReactElement<HTMLButtonElement>[];
+}
+
+export type SegmentedButtonProps = SegmentedButton &
+    HTMLAttributes<HTMLDivElement>;