feat(SplitButton): add new component

.gitignore

@@ -4,5 +4,5 @@ storybook-static/
 typedoc.json
 .env
 yarn-error.log
-.DS_Store/
+.DS_Store
 .cache/

packages/react/src/components/SplitButton/SplitButton.api.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs';
+import LinkTo from '@storybook/addon-links/react';
+import { TableInterface } from '~storybook/components/TableInterface';
+
+<Meta title="Components API/SplitButton" />
+
+# SplitButton API
+
+```js
+import { SplitButton } from '@elonkit/react';
+```
+
+## Component name
+
+The name `ESSplitButton` can be used when providing default props or style overrides in the theme.
+
+## Props
+
+<TableInterface name="SplitButtonProps" variant="props" />
+
+<br />
+
+## CSS
+
+<TableInterface name="SplitButtonClasses" variant="css" />
+
+<br />
+
+## Demos
+
+<ul>
+  <li>
+    <LinkTo kind="components-SplitButton" story="demo">
+      <code>SplitButton</code>
+    </LinkTo>
+  </li>
+</ul>

packages/react/src/components/SplitButton/SplitButton.classes.ts

@@ -0,0 +1,109 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+export interface SplitButtonClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="contained"`. */
+  contained: string;
+  /** Styles applied to the root element if `variant="outlined"`. */
+  outlined: string;
+  /** State class applied to the child elements if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the first button in the split button. */
+  firstButton: string;
+  /** Styles applied to the root element if `fullWidth={true}`. */
+  fullWidth: string;
+  /** Styles applied to the children. */
+  split: string;
+  /** Styles applied to the root element if `color="primary"` */
+  colorPrimary: string;
+  /** Styles applied to the root element if `color="secondary"` */
+  colorSecondary: string;
+  /** Styles applied to the root element if `color="tertiary"` */
+  colorTertiary: string;
+  /** Styles applied to the root element if `color="success"` */
+  colorSuccess: string;
+  /** Styles applied to the root element if `color="error"` */
+  colorError: string;
+  /** Styles applied to the root element if `color="monoA"` */
+  colorMonoA: string;
+  /** Styles applied to the root element if `color="monoB"` */
+  colorMonoB: string;
+  /** Styles applied to the root element if `color="black"` */
+  colorBlack: string;
+  /** Styles applied to the root element if `color="white"` */
+  colorWhite: string;
+  /** Styles applied to the divider element.` */
+  splitButtonDivider: string;
+  /** Styles applied to the children if `variant="outlined"`. */
+  splitOutlined: string;
+  /** Styles applied to the children if `variant="outlined"` and `color="primary"`. */
+  splitOutlinedPrimary: string;
+  /** Styles applied to the children if `variant="outlined"` and `color="secondary"`. */
+  splitOutlinedSecondary: string;
+  /** Styles applied to the children if `variant="contained"`. */
+  splitContained: string;
+  /** Styles applied to the children if `variant="contained"` and `color="primary"`. */
+  splitContainedPrimary: string;
+  /** Styles applied to the children if `variant="contained"` and `color="secondary"`. */
+  splitContainedSecondary: string;
+  /** Styles applied to the last button in the split button. */
+  lastButton: string;
+  /** Styles applied to buttons in the middle of the split button. */
+  middleButton: string;
+  /** Styles applied to the root element if `size="20"` */
+  size200: string;
+  /** Styles applied to the root element if `size="24"` */
+  size300: string;
+  /** Styles applied to the root element if `size="32"` */
+  size400: string;
+  /** Styles applied to the root element if `size="40"` */
+  size500: string;
+  /** Styles applied to the root element if `size="48"` */
+  size600: string;
+  /** Styles applied to the root element if `size="56"` */
+  size700: string;
+}
+
+export type SplitButtonClassKey = keyof SplitButtonClasses;
+
+export function getSplitButtonUtilityClass(slot: string): string {
+  return generateUtilityClass('ESSplitButton', slot);
+}
+
+export const splitButtonClasses: SplitButtonClasses = generateUtilityClasses('ESSplitButton', [
+  'root',
+  'contained',
+  'outlined',
+  'disabled',
+  'firstButton',
+  'fullWidth',
+  'splitButtonDivider',
+  'colorPrimary',
+  'colorSecondary',
+  'colorTertiary',
+  'colorSuccess',
+  'colorError',
+  'colorInfo',
+  'colorWarning',
+  'colorMonoA',
+  'colorMonoB',
+  'colorBlack',
+  'colorWhite',
+  'split',
+  'splitOutlined',
+  'splitOutlinedPrimary',
+  'splitOutlinedSecondary',
+  'splitContained',
+  'splitContainedPrimary',
+  'splitContainedSecondary',
+  'lastButton',
+  'middleButton',
+  'size200',
+  'size300',
+  'size400',
+  'size500',
+  'size600',
+  'size700',
+]);

packages/react/src/components/SplitButton/SplitButton.stories.tsx

@@ -0,0 +1,100 @@
+import { ComponentProps } from 'react';
+
+import { Meta, StoryContext, StoryObj } from '@storybook/react';
+
+import { Box, useTheme } from '@mui/material';
+
+import { SplitButton } from '.';
+
+import { IconChevronDownW400 } from '../../icons';
+import { Button } from '../Button/Button';
+
+type Args = ComponentProps<typeof SplitButton> & {
+  TouchRipplePropsCenter?: boolean;
+  TouchRipplePropsPressGrowDuration?: number;
+  TouchRipplePropsMinimumPressDuration?: number;
+};
+
+const getText = (context: StoryContext<unknown>) => {
+  return context.globals.locale === 'en' ? 'Button' : 'Кнопка';
+};
+
+const meta: Meta<Args> = {
+  tags: ['autodocs'],
+  component: SplitButton,
+  parameters: {
+    references: ['SplitButton'],
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+    },
+    color: {
+      control: { type: 'select' },
+    },
+    size: {
+      control: { type: 'select' },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    fullWidth: {
+      table: {
+        disable: true,
+      },
+    },
+    children: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export const Demo: Story = {
+  render: (args, context) => {
+    const text = getText(context);
+    const icon =
+      args.size === '200' ? (
+        <IconChevronDownW400 size="16px" />
+      ) : args.size === '300' ? (
+        <IconChevronDownW400 size="20px" />
+      ) : (
+        <IconChevronDownW400 />
+      );
+
+    const theme = useTheme();
+
+    const backgroundColor =
+      args.color === 'monoB' || args.color === 'white' ? theme.vars.palette.monoA.A800 : undefined;
+
+    return (
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '30px',
+          padding: '10px 0px 10px 10px',
+          backgroundColor,
+        }}
+      >
+        <SplitButton {...args}>
+          <Button>{icon}</Button>
+          <Button>{text}</Button>
+          <Button>{icon}</Button>
+        </SplitButton>
+
+        <SplitButton {...args}>
+          <Button>{text}</Button>
+          <Button>{icon}</Button>
+        </SplitButton>
+      </Box>
+    );
+  },
+};