checkbox

1"use client"
2 
3import * as React from "react"
4 
5import { Checkbox as CheckboxPrimitive } from "@ark-ui/react/checkbox"
6import { CheckIcon, MinusIcon } from "lucide-react"
7 
8import { cn } from "@/lib/utils"
9 
10const Checkbox = CheckboxPrimitive.Root
11 
12const CheckboxContext = CheckboxPrimitive.Context
13 
14const CheckboxControl = React.forwardRef<
15  React.ElementRef<typeof CheckboxPrimitive.Control>,
16  CheckboxPrimitive.ControlProps
17>(({ className, children, ...props }, ref) => (
18  <>
19    <CheckboxPrimitive.Control
20      ref={ref}
21      className={cn(
22        "peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs outline-none transition-shadow focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-500 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:aria-invalid:ring-destructive/40",
23        className
24      )}
25      {...props}
26    >
27      <CheckboxPrimitive.Indicator
28        className="grid place-content-center text-current"
29        indeterminate
30      >
31        <MinusIcon className="size-4" />
32      </CheckboxPrimitive.Indicator>
33      <CheckboxPrimitive.Indicator className="grid place-content-center text-current">
34        <CheckIcon className="size-4" />
35      </CheckboxPrimitive.Indicator>
36    </CheckboxPrimitive.Control>
37    <CheckboxPrimitive.HiddenInput />
38  </>
39))
40CheckboxControl.displayName = "CheckboxControl"
41 
42const CheckboxGroup = CheckboxPrimitive.Group
43 
44const CheckboxLabel = React.forwardRef<
45  React.ElementRef<typeof CheckboxPrimitive.Label>,
46  CheckboxPrimitive.LabelProps
47>(({ className, ...props }, ref) => (
48  <CheckboxPrimitive.Label
49    ref={ref}
50    className={cn(
51      "select-none font-medium text-foreground text-sm leading-4 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
52      className
53    )}
54    {...props}
55  />
56))
57CheckboxLabel.displayName = "CheckboxLabel"
58 
59export {
60  Checkbox,
61  CheckboxContext,
62  CheckboxControl,
63  CheckboxGroup,
64  CheckboxLabel,
65}