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        "size-[18px] shrink-0 rounded-[5px] border border-[#9599a1] bg-[linear-gradient(180deg,#ffffff_0%,#e8ebef_55%,#dcdfe4_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.9),0_1px_2px_rgba(20,30,50,0.2)] outline-none transition-[filter] hover:brightness-103 focus-visible:ring-[3px] focus-visible:ring-[var(--aqua-ring,#6cb0f7)]/70 active:brightness-95 disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:border-[var(--aqua-edge,#1c5fb8)] data-[state=checked]:bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a8d0f7)_0%,var(--aqua-gel-mid,#4a90ec)_50%,var(--aqua-gel-deep,#2a6fd0)_51%,var(--aqua-gel-light,#6aabf3)_100%)] data-[state=checked]:shadow-[inset_0_1px_0_rgba(255,255,255,0.6),0_1px_2px_rgba(20,60,130,0.35)]",
18        className
19      )}
20      {...props}
21    >
22      <CheckboxPrimitive.Indicator
23        data-slot="checkbox-indicator"
24        className="flex items-center justify-center text-white [filter:drop-shadow(0_-1px_1px_rgba(10,40,90,0.4))]"
25      >
26        <CheckIcon className="size-3.5" strokeWidth={3.5} />
27      </CheckboxPrimitive.Indicator>
28    </CheckboxPrimitive.Root>
29  )
30}
31 
32export { Checkbox }