checkbox

1"use client"
2 
3import * as React from "react"
4import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
5import { CheckIcon, MinusIcon } from "lucide-react"
6 
7import { cn } from "@/lib/utils"
8 
9function Checkbox({
10	className,
11	...props
12}: React.ComponentProps<typeof BaseCheckbox.Root>) {
13	return (
14		<BaseCheckbox.Root
15			data-slot="checkbox"
16			className={cn(
17				"bg-input focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:text-destructive aria-invalid:focus:ring-destructive/50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:text-foreground hover:border-ring/70 flex size-4 items-center justify-center rounded-[4px] border transition-[color,box-shadow,border-color] outline-none focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50",
18				className
19			)}
20			{...props}
21		>
22			<BaseCheckbox.Indicator
23				data-slot="checkbox-indicator"
24				className="block data-unchecked:hidden"
25			>
26				{props.indeterminate ? (
27					<MinusIcon className="size-3.5" />
28				) : (
29					<CheckIcon className="size-3.5" />
30				)}
31			</BaseCheckbox.Indicator>
32		</BaseCheckbox.Root>
33	)
34}
35 
36export { Checkbox }