refactor: switch to using Bun (#718)

packages/web/src/components/UI/Checkbox/index.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useId, useState } from "react";
-import { Check } from "lucide-react";
-import { Label } from "@components/UI/Label.tsx";
 import { cn } from "@core/utils/cn.ts";
+import { Check } from "lucide-react";
+import { useId } from "react";
 
 interface CheckboxProps {
   checked?: boolean;
@@ -16,10 +15,9 @@ interface CheckboxProps {
 }
 
 export function Checkbox({
-  checked,
+  checked = false,
   onChange,
   className,
-  labelClassName,
   id: propId,
   children,
   disabled = false,
@@ -30,71 +28,49 @@ export function Checkbox({
   const generatedId = useId();
   const id = propId || generatedId;
 
-  const [isChecked, setIsChecked] = useState(checked || false);
-
-  // Make sure setIsChecked state updates with checked
-  useEffect(() => {
-    setIsChecked(checked || false);
-  }, [checked]);
-
-  const handleToggle = () => {
-    if (disabled) return;
-
-    const newChecked = !isChecked;
-    setIsChecked(newChecked);
-    onChange?.(newChecked);
+  const handleToggle = (): void => {
+    if (!disabled) {
+      onChange?.(!checked);
+    }
   };
 
   return (
-    <div className={cn("flex items-center", className)}>
-      <div className="relative flex items-start">
-        <div className="flex items-center h-5">
-          <input
-            type="checkbox"
-            id={id}
-            checked={isChecked}
-            onChange={handleToggle}
-            disabled={disabled}
-            required={required}
-            name={name}
-            className="sr-only"
-            {...rest}
-          />
-          <div
-            onClick={handleToggle}
-            role="presentation"
-            className={cn(
-              "w-6 h-6 border-2 border-gray-500 rounded-md flex items-center justify-center",
-              disabled
-                ? "opacity-50 cursor-not-allowed"
-                : "cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
-              isChecked ? "" : "",
-            )}
-          >
-            {isChecked && (
-              <div className="animate-fade-in scale-100 opacity-100">
-                <Check className="w-4 h-4" />
-              </div>
-            )}
-          </div>
-        </div>
-
-        {children && (
-          <div className="ml-3 text-sm">
-            <Label
-              htmlFor={id}
-              id={`${id}-label`}
-              className={cn(
-                "text-gray-900 dark:text-gray-900",
-                disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-                labelClassName,
-              )}
-            >
-              {children}
-            </Label>
+    <label
+      className={cn(
+        "inline-flex items-center gap-3",
+        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+        className,
+      )}
+    >
+      <input
+        type="checkbox"
+        id={id}
+        checked={checked}
+        onChange={handleToggle}
+        disabled={disabled}
+        required={required}
+        name={name}
+        className="sr-only peer"
+        {...rest}
+      />
+      <div
+        className={cn(
+          "flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-2 border-gray-500 transition-colors",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-blue-500 peer-focus-visible:ring-offset-2",
+          { "border-slate-500 bg-slate-500": checked },
+        )}
+      >
+        {checked && (
+          <div className="animate-fade-in">
+            <Check className="h-4 w-4 text-white" />
           </div>
         )}
       </div>
-    </div>
+      {children && (
+        <span className="text-sm text-gray-900 dark:text-gray-100">
+          {children}
+        </span>
+      )}
+    </label>
   );
 }