ADDED: Segmented buttons component

TODO: Styles for SB component

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>;