feat(SegmentedControl): add SegmentedControl component

src/components/SegmentedControl/SegmentedControl.module.scss

@@ -0,0 +1,40 @@
+.SegmentedControl {
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	padding: 2px;
+	box-sizing: border-box;
+	border-radius: 44px;
+	background: var(--background-local-chips-default);
+}
+
+.SegmentedControl__body {
+	position: relative;
+	display: flex;
+	align-items: center;
+	align-content: stretch;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	border-radius: inherit;
+}
+
+.SegmentedControl__slider {
+	position: absolute;
+	inset: 0;
+	transition: transform 150ms;
+	border-radius: 40px;
+	box-sizing: border-box;
+	background: var(--background-accent-contrast-static);
+}
+
+.SegmentedControl_platform_ios {
+	border-radius: 9px;
+	background: var(--background-local-chips-default);
+}
+
+.SegmentedControl_platform_ios .SegmentedControl__slider {
+	border: 1px solid rgba(0, 0, 0, .04);
+	border-radius: inherit;
+	box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .04), 0 3px 8px 0 rgba(0, 0, 0, .12);
+}

src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { hideArgsControl } from '../../../.storybook/shared/args-manager';
+import { SegmentedControl, type SegmentedControlProps } from './index';
+
+const meta = {
+  title: 'Navigation/SegmentedControl',
+  component: SegmentedControl,
+  argTypes: hideArgsControl(['children']),
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Компонент \`SegmentedControl\` используется для выбора одного из нескольких вариантов.
+Представляет собой переключатель в виде сегментов, похожий на табы, но более компактный и визуально акцентированный.
+
+🧠 Полезен в случаях, когда нужно переключать состояние/фильтр или выбирать категорию (например, "Все / Активные / Завершённые").
+      `
+      }
+    }
+  }
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+
+const labels = [
+  { label: 'Первый', value: 'Первый' },
+  { label: 'Второй', value: 'Второй' },
+  { label: 'Третий', value: 'Третий' }
+];
+
+export const Playground: StoryObj<SegmentedControlProps> = {
+  render: (args) => {
+    const [selected, setSelected] = useState(labels[0].value);
+
+    return (
+      <SegmentedControl {...args}>
+        {labels.map(({ value, label }) => (
+          <SegmentedControl.Item
+            key={value}
+            selected={selected === value}
+            onClick={() => {
+              setSelected(value);
+            }}
+          >
+            {label}
+          </SegmentedControl.Item>
+        ))}
+      </SegmentedControl>
+    );
+  },
+  decorators: [
+    (Component) => (
+      <div style={{ width: 500 }}>
+        <Component />
+      </div>
+    )
+  ]
+};

src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,51 @@
+import { clsx } from 'clsx';
+import { Children, forwardRef, type HTMLAttributes, isValidElement, type ReactElement } from 'react';
+
+import { usePlatform } from '../../hooks';
+import type { SegmentedControlItemProps } from './components/SegmentedControlItem';
+import styles from './SegmentedControl.module.scss';
+
+export interface SegmentedControlProps extends HTMLAttributes<HTMLDivElement> {
+  children: Array<ReactElement<SegmentedControlItemProps>>
+}
+
+export const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(({
+  className,
+  children,
+  ...restProps
+}, forwardedRef) => {
+  const platform = usePlatform();
+
+  const childrenArray = Children.toArray(children);
+  const checkedIndex = childrenArray.findIndex((child) => isValidElement(child) && child.props.selected);
+  const translateX = `translateX(${100 * checkedIndex}%)`;
+
+  return (
+    <div
+      ref={forwardedRef}
+      role="tablist"
+      className={clsx(
+        styles.SegmentedControl,
+        platform === 'ios' && styles.SegmentedControl_platform_ios,
+        className
+      )}
+      {...restProps}
+    >
+      <div className={styles.SegmentedControl__body}>
+        {checkedIndex > -1 && (
+          <div
+            aria-hidden
+            className={styles.SegmentedControl__slider}
+            style={{
+              width: `${100 / childrenArray.length}%`,
+              transform: translateX
+            }}
+          />
+        )}
+        {children}
+      </div>
+    </div>
+  );
+});
+
+SegmentedControl.displayName = 'SegmentedControl';

src/components/SegmentedControl/components/SegmentedControlItem/SegmentedControlItem.module.scss

@@ -0,0 +1,18 @@
+.SegmentedControlItem {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	flex: 1 1 0;
+	max-inline-size: 100%;
+	padding: 10px 24px;
+	border: none;
+	border-radius: inherit;
+	background: transparent;
+	z-index: var(--layer-base, 1);
+	color: var(--text-primary);
+	text-align: center;
+}
+
+.SegmentedControlItem_platform_ios {
+	padding: 6px 24px;
+}

src/components/SegmentedControl/components/SegmentedControlItem/SegmentedControlItem.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SegmentedControlItem, type SegmentedControlItemProps } from './SegmentedControlItem';
+
+const meta = {
+  title: 'Navigation/SegmentedControl/SegmentedControl.Item',
+  component: SegmentedControlItem
+} satisfies Meta<typeof SegmentedControlItem>;
+
+export default meta;
+
+export const Playground: StoryObj<SegmentedControlItemProps> = {
+  args: {
+    selected: true,
+    children: 'This is a SegmentedControl.Item'
+  }
+};

src/components/SegmentedControl/components/SegmentedControlItem/SegmentedControlItem.tsx

@@ -0,0 +1,38 @@
+import { clsx } from 'clsx';
+import { type ButtonHTMLAttributes } from 'react';
+
+import { usePlatform } from '../../../../hooks';
+import { Tappable } from '../../../Tappable';
+import { TypographyLabel } from '../../../Typography/parts';
+import styles from './SegmentedControlItem.module.scss';
+
+export interface SegmentedControlItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean
+}
+
+export const SegmentedControlItem = ({
+  selected,
+  className,
+  children,
+  ...restProps
+}: SegmentedControlItemProps): JSX.Element => {
+  const platform = usePlatform();
+  return (
+    <Tappable
+      role="tab"
+      as="button"
+      className={clsx(
+        styles.SegmentedControlItem,
+        platform === 'ios' && styles.SegmentedControlItem_platform_ios,
+        className
+      )}
+      {...restProps}
+    >
+      <TypographyLabel variant={selected ? 'medium-strong' : 'medium'}>
+        {children}
+      </TypographyLabel>
+    </Tappable>
+  );
+};
+
+SegmentedControlItem.displayName = 'SegmentedControl.Item';

src/components/SegmentedControl/components/SegmentedControlItem/index.ts

@@ -0,0 +1 @@
+export { SegmentedControlItem, type SegmentedControlItemProps } from './SegmentedControlItem';

src/components/SegmentedControl/index.ts

@@ -0,0 +1,10 @@
+import { SegmentedControlItem } from './components/SegmentedControlItem';
+import { SegmentedControl } from './SegmentedControl';
+
+const SegmentedControlNamespace = Object.assign(SegmentedControl, { Item: SegmentedControlItem });
+
+export { SegmentedControlNamespace as SegmentedControl };
+export type { SegmentedControlItemProps } from './components/SegmentedControlItem';
+export type {
+  SegmentedControlProps
+} from './SegmentedControl';

src/components/index.ts

@@ -17,6 +17,7 @@ export * from './MaxUI';
 export * from './Panel';
 export * from './Ripple';
 export * from './SearchInput';
+export * from './SegmentedControl';
 export * from './Spinner';
 export * from './SvgButton';
 export * from './Switch';