checkbox

1"use client"
2
3import * as React from "react"
4import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
5import { Check } from "lucide-react"
6import { cn } from "@/lib/utils"
7
8type CheckboxProps = React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>
9
10const Checkbox = React.forwardRef<
11    React.ComponentRef<typeof BaseCheckbox.Root>,
12    CheckboxProps
13>(({ className, disabled, ...props }, ref) => (
14    <BaseCheckbox.Root
15        ref={ref}
16        disabled={disabled}
17        className={cn(
18            "peer h-5 w-5 shrink-0 rounded-base border-2 border-black focus-brutal disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-main data-checked:text-black",
19            className
20        )}
21        {...props}
22    >
23        <BaseCheckbox.Indicator
24            className={cn("flex items-center justify-center text-current data-unchecked:hidden", disabled && "opacity-50")}
25        >
26            <Check className="h-3.5 w-3.5" strokeWidth={3} />
27        </BaseCheckbox.Indicator>
28    </BaseCheckbox.Root>
29))
30Checkbox.displayName = "Checkbox"
31
32export { Checkbox }