feat: add checkbox

packages/react/components/Checkbox.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { VariantProps, vcn } from "../shared";
+
+const checkboxColors = {
+  background: {
+    default: "bg-neutral-200 dark:bg-neutral-700",
+    checked: "bg-neutral-300 dark:bg-neutral-400",
+    disabled:
+      "peer-disabled/checkbox:bg-neutral-100 dark:peer-disabled/checkbox:bg-neutral-800",
+  },
+  checkmark: "text-black dark:text-white",
+};
+
+const [checkboxVariant, resolveCheckboxVariantProps] = vcn({
+  base: `inline-block rounded-md p-1 size-6 ${checkboxColors.checkmark} ${checkboxColors.background.disabled} peer-disabled/checkbox:cursor-not-allowed transition-colors duration-75 ease-in-out`,
+  variants: {
+    checked: {
+      true: `${checkboxColors.background.checked}`,
+      false: `${checkboxColors.background.default}`,
+    },
+  },
+  defaults: {
+    checked: false,
+  },
+});
+
+interface CheckboxProps
+  extends VariantProps<typeof checkboxVariant>,
+    Omit<React.ComponentPropsWithoutRef<"input">, "type" | "className"> {}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    const [variantProps, otherPropsCompressed] =
+      resolveCheckboxVariantProps(props);
+    const { defaultChecked, onChange, ...otherPropsExtracted } =
+      otherPropsCompressed;
+
+    // internally handles checked, so we can use checked value without prop
+    const [checked, setChecked] = React.useState(defaultChecked ?? false);
+    React.useEffect(() => {
+      if (typeof variantProps.checked === "boolean") {
+        setChecked(variantProps.checked);
+      }
+    }, [variantProps.checked]);
+
+    const internalRef = React.useRef<HTMLInputElement | null>(null);
+
+    return (
+      <>
+        <label className="size-6">
+          <input
+            {...otherPropsExtracted}
+            defaultChecked={defaultChecked}
+            checked={
+              typeof defaultChecked === "boolean"
+                ? undefined
+                : checked /* should be either uncontrolled (defaultChecked set) or controlled (checked set) */
+            }
+            onChange={(e) => {
+              setChecked(e.currentTarget.checked);
+              if (onChange) {
+                onChange(e);
+              }
+            }}
+            type="checkbox"
+            className="hidden peer/checkbox"
+            ref={(el) => {
+              internalRef.current = el;
+              if (typeof ref === "function") {
+                ref(el);
+              } else if (ref) {
+                ref.current = el;
+              }
+            }}
+          />
+          <div className={checkboxVariant({ ...variantProps, checked })}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="1em"
+              height="1em"
+              viewBox="0 0 24 24"
+              className={`${checked ? "opacity-100" : "opacity-0"} transition-opacity duration-75 ease-in-out`}
+            >
+              <path
+                fill="currentColor"
+                d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"
+              ></path>
+            </svg>
+          </div>
+        </label>
+      </>
+    );
+  }
+);
+
+export { Checkbox };

packages/react/stories/Checkbox.stories.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Checkbox } from "../components/Checkbox";
+import { Label } from "../components/Label";
+import { Toaster, useToast } from "../components/Toast";
+
+export default {
+  title: "React/Checkbox",
+};
+
+export const Default = () => {
+  return <Checkbox />;
+};
+
+export const DefaultChecked = () => {
+  return <Checkbox defaultChecked />;
+};
+
+export const Controlled = () => {
+  const [state, setState] = React.useState(false);
+  const { toast } = useToast();
+
+  React.useEffect(() => {
+    toast({
+      title: "Checkbox Toggled",
+      description: `Checkbox state changed to ${state}`,
+      status: state ? "success" : "error",
+    });
+  }, [state]);
+
+  return (
+    <>
+      <Toaster />
+      <Checkbox
+        checked={state}
+        onChange={(e) => {
+          setState(e.currentTarget.checked);
+        }}
+      />
+    </>
+  );
+};
+
+export const UsingWithLabel = () => {
+  return (
+    <Label direction="horizontal">
+      <Checkbox />
+      <span>Check this out</span>
+    </Label>
+  );
+};
+
+export const Disabled = () => {
+  return (
+    <Label direction="horizontal">
+      <Checkbox disabled />
+      <span>Disabled checkbox</span>
+    </Label>
+  );
+};