feat: Checkbox (#20)

src/components/Checkbox/index.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Checkbox from "./index";
+
+export default {
+  title: "Checkbox",
+  component: Checkbox,
+  argTypes: {},
+};
+
+export const Default: React.FC = () => {
+  return (
+    <div>
+      <Checkbox />
+    </div>
+  );
+};

src/components/Checkbox/index.tsx

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+
+const Checkbox = styled.input.attrs({ type: "checkbox" })`
+  appearance: none;
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+  vertical-align: middle;
+  transition: background-color 0.2s ease-in-out;
+  border: 0;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.colors.input};
+
+  &:after {
+    content: "";
+    position: absolute;
+    border-bottom: 2px solid;
+    border-left: 2px solid;
+    border-color: transparent;
+    top: 30%;
+    left: 0;
+    right: 0;
+    width: 50%;
+    height: 25%;
+    margin: auto;
+    transform: rotate(-50deg);
+    transition: border-color 0.2s ease-in-out;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.success};
+    &:after {
+      border-color: white;
+    }
+  }
+`;
+
+export default Checkbox;

src/index.ts

@@ -3,6 +3,7 @@ export { default as Button } from "./components/Button";
 export { default as ButtonMenu } from "./components/ButtonMenu";
 export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
 export { default as Card } from "./components/Card";
+export { default as Checkbox } from "./components/Checkbox";
 export { default as Heading } from "./components/Heading";
 export { default as Text } from "./components/Text";
 export { default as Link } from "./components/Link";