Checkbox

1import { Checkbox as BaseCheckbox, CheckboxGroup } from "@base-ui/react";
2import { cn } from "@/lib/utils";
3import { CheckIcon, MinusIcon } from "lucide-react";
4 
5function Checkbox({ className, ...props }: BaseCheckbox.Root.Props) {
6  return (
7    <BaseCheckbox.Root
8      className={cn(
9        "grid size-4 shrink-0 place-content-center rounded-sm border border-grey-200 bg-grey-100 outline-none focus-visible:border-blue-500 disabled:cursor-not-allowed data-checked:border-blue-600 data-checked:bg-blue-500 data-checked:text-white-1000 data-checked:focus-visible:inset-ring data-checked:focus-visible:inset-ring-white-1000 data-disabled:border-none data-disabled:bg-grey-300 data-indeterminate:border-blue-600 data-indeterminate:bg-blue-500 data-indeterminate:text-white-1000 dark:border-grey-600 dark:bg-grey-700 dark:focus-visible:border-blue-400 dark:data-checked:border-blue-400 dark:data-checked:bg-blue-500 dark:data-disabled:bg-grey-500 dark:data-indeterminate:border-blue-400 dark:data-indeterminate:bg-blue-500",
10        className,
11      )}
12      {...props}
13    >
14      <BaseCheckbox.Indicator
15        className="relative block size-2.5 text-current transition-none data-disabled:text-white-1000 dark:data-disabled:text-grey-800"
16        render={(props, state) =>
17          state.indeterminate ? (
18            <span {...props}>
19              <MinusIcon
20                aria-hidden="true"
21                className="absolute inset-0 size-full text-blue-600"
22                strokeWidth={8}
23              />
24              <MinusIcon
25                aria-hidden="true"
26                className="absolute inset-0 size-full"
27                strokeWidth={3}
28              />
29            </span>
30          ) : (
31            <span {...props}>
32              <CheckIcon
33                aria-hidden="true"
34                className="absolute inset-0 size-full text-blue-600"
35                strokeWidth={8}
36              />
37              <CheckIcon
38                aria-hidden="true"
39                className="absolute inset-0 size-full"
40                strokeWidth={3}
41              />
42            </span>
43          )
44        }
45      ></BaseCheckbox.Indicator>
46    </BaseCheckbox.Root>
47  );
48}
49 
50export { Checkbox, CheckboxGroup };