Add checkboxes

.storybook/main.cjs

@@ -13,6 +13,7 @@ module.exports = {
   core: {
     builder: "@storybook/builder-vite",
   },
+  staticDirs: ["../src/assets"],
   features: {
     storyStoreV7: true,
   },

src/assets/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="#ff6565" d="M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z"/></svg>

src/components/button/Button.tsx

@@ -1,6 +1,5 @@
 import React, { useRef } from "react";
 import styles from "./Button.module.scss";
-import { ReactComponent } from "../../assets/svgr-custom";
 // @ts-ignore
 import { ReactComponent as LoadingCircles } from "../../assets/loading-circles.svg";
 import { combineConditionalClasses } from "../../helpers/combineClasses";

src/components/checkbox/Checkbox.module.scss

@@ -0,0 +1,46 @@
+@import "../../styles/colors.scss";
+
+.containerLabel {
+    display: grid;
+    grid-template-columns: 1em auto;
+    gap: 0.5em;
+}
+
+.checkbox {
+    appearance: none;
+    margin: 0;
+    width: 1.2em;
+    height: 1.2em;
+
+    border: 0.15em solid $unimportant;
+    border-radius: 0.25em;
+
+    display: grid;
+    place-content: center;
+
+    transition: border 100ms linear;
+}
+
+.checkbox::before {
+    content: "";
+    width: 1em;
+    height: 1em;
+    background: url("/close.svg");
+    background-size: contain;
+    background-position: center;
+
+    transform: scale(0);
+    transition: transform 100ms ease-in-out, filter 100ms linear;
+}
+
+.checkbox:checked::before {
+    transform: scale(1);
+}
+
+.checkbox:disabled {
+    border-color: $disabled;
+}
+
+.checkbox:disabled:before {
+    filter: grayscale(1);
+}

src/components/checkbox/Checkbox.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./Checkbox.module.scss";
+// @ts-ignore
+import { ReactComponent as Close } from "../../assets/close.svg";
+
+interface CheckboxProps {
+  disabled?: boolean;
+  label?: string;
+  checked?: boolean;
+  onClick?: React.HTMLAttributes<HTMLInputElement>["onChange"];
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({ checked, disabled, label, onClick }) => {
+  return (
+    <label className={styles.containerLabel}>
+      <input className={styles.checkbox} type="checkbox" checked={checked} disabled={disabled} onClick={onClick}>
+      </input>
+      {label}
+    </label>
+  );
+};
+
+export default Checkbox;

src/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+import Checkbox from "./Checkbox"
+
+export default Checkbox;

src/stories/Checkbox.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Checkbox from "../components/checkbox";
+
+export default { title: "Checkbox", component: Checkbox, argTypes: {onClick: {action: "click"}} } as ComponentMeta<typeof Checkbox>;
+
+const Template: ComponentStory<typeof Checkbox> = (args) => <Checkbox {...args} />;
+
+export const defaultButton = Template.bind({});
+
+defaultButton.args = {
+    checked: false,
+    disabled: false,
+    label: "Test",
+};
+