Checkbox

1"use client";
2 
3import * as RadixCheckbox from "@radix-ui/react-checkbox";
4import { forwardRef } from "react";
5import { cn } from "@/lib/utils";
6import { focusRing, glass } from "@/lib/glass";
7 
8interface CheckboxProps {
9  checked?: boolean;
10  defaultChecked?: boolean;
11  onChange?: (checked: boolean) => void;
12  id?: string;
13  className?: string;
14  disabled?: boolean;
15}
16 
17export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
18  (
19    {
20      checked,
21      defaultChecked,
22      onChange,
23      id,
24      className = "",
25      disabled,
26      ...props
27    },
28    ref,
29  ) => {
30    return (
31      <RadixCheckbox.Root
32        id={id}
33        ref={ref as any}
34        checked={checked}
35        defaultChecked={defaultChecked}
36        onCheckedChange={(v) => onChange?.(Boolean(v))}
37        disabled={disabled}
38        className={cn(
39          glass,
40          focusRing,
41          "w-5 h-5 rounded-full flex items-center justify-center data-[state=checked]:bg-[#007AFF] data-[state=checked]:border-[#007AFF]",
42          disabled && "opacity-50 cursor-not-allowed",
43          className,
44        )}
45        {...props}
46      >
47        <RadixCheckbox.Indicator>
48          <svg
49            className="w-3 h-3 text-white"
50            fill="currentColor"
51            viewBox="0 0 20 20"
52            aria-hidden="true"
53          >
54            <path
55              fillRule="evenodd"
56              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
57              clipRule="evenodd"
58            />
59          </svg>
60        </RadixCheckbox.Indicator>
61      </RadixCheckbox.Root>
62    );
63  },
64);
65 
66Checkbox.displayName = "Checkbox";