feat: adopt kumo green ui system

components/ui/checkbox.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import * as React from "react";
+import { Checkbox as KumoCheckbox, type CheckboxProps as KumoCheckboxProps } from "@cloudflare/kumo/components/checkbox";
+
+type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+};
+
+export function Checkbox({
+  checked,
+  defaultChecked = false,
+  name,
+  onCheckedChange,
+  ...props
+}: CheckboxProps): React.ReactElement {
+  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+  const isControlled = checked !== undefined;
+  const currentChecked = isControlled ? checked : uncontrolledChecked;
+
+  return (
+    <>
+      <KumoCheckbox
+        checked={currentChecked}
+        onCheckedChange={(nextChecked) => {
+          const booleanValue = Boolean(nextChecked);
+          if (!isControlled) {
+            setUncontrolledChecked(booleanValue);
+          }
+          onCheckedChange?.(booleanValue);
+        }}
+        {...props}
+      />
+      {name && currentChecked ? <input name={name} type="hidden" value="on" /> : null}
+    </>
+  );
+}