Checkbox (Tailwind)

1"use client";
2 
3import { Checkbox } from "@base-ui/react/checkbox";
4import { cn } from "@/lib/utils";
5 
6function CheckboxRoot({ className, ...props }: Checkbox.Root.Props) {
7  return (
8    <Checkbox.Root
9      className={cn(
10        "hit-area-extend flex h-[1.125rem] w-[1.125rem] items-center justify-center",
11        "relative flex-shrink-0 cursor-pointer rounded-[0.3125rem] border-0 bg-transparent",
12        "data-[unchecked]:border data-[unchecked]:border-[oklch(from_var(--color-border)_l_c_h_/_0.8)] data-[unchecked]:bg-transparent",
13        "data-[checked]:border data-[checked]:border-[var(--color-border)] data-[checked]:bg-[var(--color-primary)]",
14        "data-[indeterminate]:border data-[indeterminate]:border-[var(--color-border)] data-[indeterminate]:bg-[var(--color-primary)]",
15        "focus-visible:outline focus-visible:outline-1 focus-visible:outline-[var(--color-ring)] focus-visible:outline-offset-1",
16        className
17      )}
18      data-slot="checkbox-root"
19      {...props}
20    />
21  );
22}
23 
24function CheckboxIndicator({ className, ...props }: Checkbox.Indicator.Props) {
25  return (
26    <Checkbox.Indicator
27      className={cn(
28        "flex h-full w-full items-center justify-center text-[color:var(--color-primary-foreground)]",
29        "[&>svg]:h-4 [&>svg]:w-4",
30        "data-[unchecked]:not-data-[indeterminate]:hidden",
31        className
32      )}
33      data-slot="checkbox-indicator"
34      {...props}
35    />
36  );
37}
38 
39export { CheckboxRoot as Checkbox, CheckboxIndicator };