feat(ui): implemented switch component

frontend/src/components/v2/Switch/Switch.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Switch } from './Switch';
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Switch>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Simple: Story = {
+  args: {
+    children: 'Dark mode'
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Dark mode',
+    isDisabled: true
+  }
+};
+
+export const Required: Story = {
+  args: {
+    children: 'Dark mode',
+    isRequired: true
+  }
+};

frontend/src/components/v2/Switch/Switch.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { twMerge } from 'tailwind-merge';
+
+export type SwitchProps = Omit<SwitchPrimitive.SwitchProps, 'checked' | 'disabled' | 'required'> & {
+  children: ReactNode;
+  id: string;
+  isChecked?: boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+};
+
+export const Switch = ({
+  children,
+  id,
+  className,
+  isChecked,
+  isDisabled,
+  isRequired,
+  ...props
+}: SwitchProps): JSX.Element => (
+  <div className="flex items-center text-bunker-300">
+    <label className="text-sm" htmlFor={id}>
+      {children}
+      {isRequired && <span className="pl-1 text-red">*</span>}
+    </label>
+    <SwitchPrimitive.Root
+      {...props}
+      required={isRequired}
+      checked={isChecked}
+      disabled={isDisabled}
+      className={twMerge(
+        'h-5 ml-3 transition-all rounded-full w-9 bg-bunker-300 data-[state=checked]:bg-bunker-200',
+        isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
+        className
+      )}
+      id={id}
+    >
+      <SwitchPrimitive.Thumb className="w-4 h-4 border-none will-change-transform rounded-full shadow bg-black block transition-all translate-x-0.5 data-[state=checked]:translate-x-[18px]" />
+    </SwitchPrimitive.Root>
+  </div>
+);

frontend/src/components/v2/Switch/index.tsx

@@ -0,0 +1,2 @@
+export type { SwitchProps } from './Switch';
+export { Switch } from './Switch';

frontend/src/components/v2/index.tsx

@@ -7,4 +7,5 @@ export * from './Input';
 export * from './Menu';
 export * from './Modal';
 export * from './Select';
+export * from './Switch';
 export * from './TextArea';