Checkbox

1"use client"
2 
3import * as React from "react"
4import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
5import { CheckIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function Checkbox({
10  className,
11  ...props
12}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
13  return (
14    <CheckboxPrimitive.Root
15      data-slot="checkbox"
16      className={cn(
17        "peer outline-none ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 shrink-0 transition-colors",
18        "w-[20px] h-[20px] rounded-[4px]",
19        "data-[state=unchecked]:bg-[#FFFFFE] data-[state=unchecked]:border-[2px] data-[state=unchecked]:border-[#E8E8E7]",
20        "data-[state=checked]:bg-[#006BF4] data-[state=checked]:border-transparent",
21        className
22      )}
23      {...props}
24    >
25      <CheckboxPrimitive.Indicator
26        data-slot="checkbox-indicator"
27        className="flex items-center justify-center text-current w-full h-full"
28      >
29        <div className="w-[8px] h-[8px] rounded-[2px] bg-[#FFFFFE]" />
30      </CheckboxPrimitive.Indicator>
31    </CheckboxPrimitive.Root>
32  )
33}
34 
35// Since absolute inline styles override tailwind data states, let's refine the component styling 
36// inside a style tag or purely via Tailwind arbitrarily extending the exact colors.
37 
38export { Checkbox }