openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
4import { CheckIcon } from "lucide-react";
5import type * as React from "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 size-4 shrink-0 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-50 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:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:ring-destructive/40",
18 className,
19 )}
20 {...props}
21 >
22 <CheckboxPrimitive.Indicator
23 data-slot="checkbox-indicator"
24 className="flex items-center justify-center text-current transition-none"
25 >
26 <CheckIcon className="size-3.5" />
27 </CheckboxPrimitive.Indicator>
28 </CheckboxPrimitive.Root>
29 );
30}
31
32export { Checkbox };