New source found from dndbeyond.com

ddb_main/components/Checkbox/Checkbox.tsx

@@ -12,8 +12,7 @@ interface CheckboxProps extends TtuiCheckboxProps {
   themed?: boolean;
   darkMode?: boolean;
   variant?: "default" | "builder" | "sidebar";
-  onClick?: (isEnabled: boolean) => void;
-  onChangePromise?: (
+  onChangeConfirm?: (
     newIsEnabled: boolean,
     accept: () => void,
     reject: () => void
@@ -26,51 +25,52 @@ export const Checkbox: FC<CheckboxProps> = ({
   variant = "default",
   darkMode,
   checked = false,
-  onChangePromise,
-  onClick,
+  onChangeConfirm,
+  onChange,
   disabled,
   ...props
 }) => {
   const [isChecked, setIsChecked] = useState(checked);
 
-  useEffect(() => {
-    setIsChecked(checked);
-  }, [checked]);
-
   const handleChange = (evt: ChangeEvent<HTMLInputElement>): void => {
     evt.stopPropagation();
     evt.nativeEvent.stopImmediatePropagation();
 
-    const newCheckedState = !isChecked;
+    const newCheckedState = evt.target.checked;
 
     // promise-based logic
-    if (onChangePromise) {
-      onChangePromise(
+    if (onChangeConfirm) {
+      onChangeConfirm(
         newCheckedState,
         () => {
           // Promise accepted, update the state
           setIsChecked(newCheckedState);
         },
         () => {
-          // Promise rejected, do nothing
+          // Promise rejected, reset the checkbox to its previous state
+          setIsChecked(!newCheckedState);
         }
       );
     } else {
       // Update the state immediately if no promise handling - only IF onClick is provided
-      if (onClick) {
-        onClick(newCheckedState);
+      if (onChange) {
+        onChange(evt);
         setIsChecked(newCheckedState);
       }
     }
   };
+
+  useEffect(() => {
+    setIsChecked(checked);
+  }, [checked]);
+
   return (
     <TtuiCheckbox
       className={clsx([
+        styles.checkbox,
+        styles[variant],
         themed && styles.themed,
-        darkMode && styles[darkMode ? "darkMode" : "lightMode"],
         className,
-        variant === "default" && styles.default,
-        variant === "builder" && styles.builder,
       ])}
       onChange={handleChange}
       aria-pressed={isChecked}