Checkbox

1"use client"
2
3import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
4import { Check } from "lucide-react"
5
6import * as React from "react"
7
8import { cn } from "@/lib/utils"
9
10function Checkbox({
11  className,
12  ...props
13}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
14  return (
15    <CheckboxPrimitive.Root
16      data-slot="checkbox"
17      className={cn(
18        "peer size-4 shrink-0 outline-2 outline-border ring-offset-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-main data-[state=checked]:text-white",
19        className,
20      )}
21      {...props}
22    >
23      <CheckboxPrimitive.Indicator
24        data-slot="checkbox-indicator"
25        className={cn("flex items-center justify-center text-current")}
26      >
27        <Check className="size-4 text-main-foreground" />
28      </CheckboxPrimitive.Indicator>
29    </CheckboxPrimitive.Root>
30  )
31}
32
33export { Checkbox }