import { useEffect, useRef } from "react";
import { cn } from "./cn";
export function Checkbox({
checked,
className,
onChange,
onKeyDown,
disabled = false,
id = undefined,
}: {
checked: boolean | "indeterminate";
className?: string;
onChange: React.EventHandler<React.SyntheticEvent<HTMLInputElement>>;
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
disabled?: boolean;
id?: string;
}) {
const inputRef = useRef<HTMLInputElement>(null);
const isIndeterminate = checked === "indeterminate";
useEffect(() => {
if (inputRef.current !== null) {
inputRef.current.indeterminate = isIndeterminate;
}
}, [isIndeterminate]);
const checkedBool = checked === "indeterminate" ? false : checked;
return (
<input
id={id}
ref={inputRef}
tabIndex={0}
type="checkbox"
className={cn(
"form-checkbox size-3.5 rounded-sm enabled:cursor-pointer enabled:hover:text-content-link enabled:hover:outline enabled:hover:outline-content-primary disabled:cursor-not-allowed disabled:opacity-50",
"focus:ring-0 focus:outline-0",
"bg-background-secondary text-util-accent ring-offset-background-secondary checked:bg-util-accent",
className,
)}
onChange={onChange}
onKeyDown={(event) => {
if (event.key === "Enter") {
onChange(event);
return;
}
onKeyDown?.(event);
}}
disabled={disabled ?? false}
checked={checkedBool}
aria-checked={checkedBool}
aria-label="Selected"
/>
);
}
