Add checkbox ui component

src/shared/ui/Checkbox/index.ts

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

src/shared/ui/Checkbox/ui/Checkbox.module.css

@@ -0,0 +1,85 @@
+.root {
+  width: 15px;
+  height: 15px;
+  position: relative;
+}
+
+.checkbox {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  appearance: none;
+  border: 1px solid var(--gray-400);
+  border-radius: 3px;
+  outline: none;
+  transition: border-color 0.3s ease;
+  cursor: pointer;
+  background: transparent;
+}
+
+[data-theme='dark'] .checkbox {
+  border-color: var(--gray-500);
+}
+
+.checkbox:checked {
+  border-color: var(--gray-900);
+}
+
+[data-theme='dark'] .checkbox:checked {
+  border-color: var(--white-100);
+}
+
+.checkbox:not(:checked):disabled {
+  border-color: var(--gray-200);
+  cursor: auto;
+}
+
+[data-theme='dark'] .checkbox:not(:checked):disabled {
+  border-color: var(--gray-700);
+}
+
+.checkbox:disabled:checked {
+  opacity: 0.5;
+}
+
+.root:has(.checkbox:checked) .icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 52%;
+  left: 52%;
+  transform: translate(-50%, -50%);
+}
+
+.root:has(.checkbox:disabled:checked) .icon {
+  opacity: 0.5;
+}
+
+.icon {
+  display: none;
+  pointer-events: none;
+}
+
+.icon svg {
+  width: 11px;
+  height: 11px;
+}
+
+.icon svg path {
+  fill: var(--gray-900);
+}
+
+[data-theme='dark'] .icon svg path {
+  fill: var(--white-100);
+}
+
+@media (hover: hover) {
+  .checkbox:hover {
+    border-color: var(--gray-900);
+  }
+
+  [data-theme='dark'] .checkbox:hover {
+    border-color: var(--white-100);
+  }
+}

src/shared/ui/Checkbox/ui/Checkbox.tsx

@@ -0,0 +1,30 @@
+import { ComponentProps } from 'react';
+import styles from './Checkbox.module.css';
+
+interface CheckboxProps extends Omit<ComponentProps<'input'>, 'type'> {}
+
+const Checkbox = (props: CheckboxProps) => {
+  return (
+    <div className={styles.root}>
+      <input className={styles.checkbox} type="checkbox" {...props} />
+      <span className={styles.icon}>
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M20.6187 5.38128C20.9604 5.72299 20.9604 6.27701 20.6187 6.61872L9.61872 17.6187C9.27701 17.9604 8.72299 17.9604 8.38128 17.6187L3.38128 12.6187C3.03957 12.277 3.03957 11.723 3.38128 11.3813C3.72299 11.0396 4.27701 11.0396 4.61872 11.3813L9 15.7626L19.3813 5.38128C19.723 5.03957 20.277 5.03957 20.6187 5.38128Z"
+            fill="#181D25"
+          />
+        </svg>
+      </span>
+    </div>
+  );
+};
+
+export default Checkbox;

src/shared/ui/Checkbox/ui/stories/Checkbox.stories.tsx

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

src/shared/ui/RadioButton/ui/stories/RadioButton.stories.tsx

@@ -53,7 +53,7 @@ export const DarkMode: Story = {
     docs: {
       description: {
         story:
-          'You can see what the RadioButton component looks like with icon',
+          'You can see what the RadioButton component looks like with dark mode',
       },
     },
     backgrounds: {