Add switch ui component

src/shared/ui/Switch/index.ts

@@ -0,0 +1 @@
+export { default } from './ui/Switch';

src/shared/ui/Switch/ui/Switch.module.css

@@ -0,0 +1,43 @@
+.root {
+  width: 44px;
+  height: 24px;
+  margin: 0;
+  vertical-align: top;
+  background: var(--gray-300);
+  border-radius: 30px;
+  outline: none;
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  transition: all 0.3s cubic-bezier(0.23, 0.79, 0.35, 1.3);
+}
+
+[data-theme='dark'] .root {
+  background: var(--gray-600);
+}
+
+.root::after {
+  content: '';
+  width: 19px;
+  height: 19px;
+  left: 3px;
+  top: 50%;
+  position: absolute;
+  background-color: var(--white-100);
+  border-radius: 50%;
+  transform: translateX(0) translateY(-50%);
+  transition: all 0.3s cubic-bezier(0.23, 0.79, 0.35, 1.3);
+}
+
+.root:checked::after {
+  transform: translateX(18px) translateY(-50%);
+}
+
+.root:checked {
+  background-color: var(--success-main);
+}
+
+.root:disabled {
+  opacity: 0.5;
+  cursor: auto;
+}

src/shared/ui/Switch/ui/Switch.tsx

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+import styles from './Switch.module.css';
+
+interface SwitchProps extends Omit<ComponentProps<'input'>, 'type'> {}
+
+const Switch = (props: SwitchProps) => {
+  return <input className={styles.root} type="checkbox" {...props} />;
+};
+
+export default Switch;

src/shared/ui/Switch/ui/stories/Switch.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Switch from '../Switch';
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+  title: 'Components/Switch',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      subtitle: 'Switch component that includes all cases in our design layout',
+    },
+  },
+  argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+export const Default: Story = {
+  name: 'Switch',
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'You should use the option that is specified in the design layout',
+      },
+    },
+  },
+  render: () => (
+    <div
+      style={{
+        width: '50px',
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column',
+      }}
+    >
+      <Switch />
+      <Switch checked />
+      <Switch disabled />
+      <Switch disabled checked />
+    </div>
+  ),
+};
+
+export const DarkMode: Story = {
+  name: 'Switch on dark mode',
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'You can see what the Switch component looks like with dark mode',
+      },
+    },
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  render: () => (
+    <div
+      data-theme="dark"
+      style={{
+        width: '50px',
+        display: 'flex',
+        gap: '10px',
+        flexDirection: 'column',
+      }}
+    >
+      <Switch />
+      <Switch checked />
+      <Switch disabled />
+      <Switch disabled checked />
+    </div>
+  ),
+};