first commit

src/renderer/components/checkbox-field/checkbox-field.css.ts

@@ -0,0 +1,40 @@
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import { style } from "@vanilla-extract/css";
+
+export const checkboxField = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: `${SPACING_UNIT}px`,
+  cursor: "pointer",
+});
+
+export const checkbox = style({
+  width: "20px",
+  height: "20px",
+  borderRadius: "4px",
+  backgroundColor: vars.color.darkBackground,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "relative",
+  transition: "all ease 0.2s",
+  border: `solid 1px ${vars.color.borderColor}`,
+  ":hover": {
+    borderColor: "rgba(255, 255, 255, 0.5)",
+  },
+});
+
+export const checkboxInput = style({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  margin: "0",
+  padding: "0",
+  opacity: "0",
+  cursor: "pointer",
+});
+
+export const checkboxLabel = style({
+  cursor: "pointer",
+});

src/renderer/components/checkbox-field/checkbox-field.tsx

@@ -0,0 +1,32 @@
+import { useId } from "react";
+import * as styles from "./checkbox-field.css";
+import { CheckIcon } from "@primer/octicons-react";
+
+export interface CheckboxFieldProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  label: string;
+}
+
+export function CheckboxField({ label, ...props }: CheckboxFieldProps) {
+  const id = useId();
+
+  return (
+    <div className={styles.checkboxField}>
+      <div className={styles.checkbox}>
+        <input
+          id={id}
+          type="checkbox"
+          className={styles.checkboxInput}
+          {...props}
+        />
+        {props.checked && <CheckIcon />}
+      </div>
+      <label htmlFor={id} className={styles.checkboxLabel}>
+        {label}
+      </label>
+    </div>
+  );
+}