Checkbox

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { Checkbox as CheckboxPrimitive } from "radix-ui";
6import { SPRING_DEFAULT } from "@/components/smoothui/lib/animation";
7 
8export interface CheckboxProps {
9  /** Whether the checkbox is checked */
10  checked?: boolean;
11  /** Optional CSS class */
12  className?: string;
13  /** Whether the checkbox is disabled */
14  disabled?: boolean;
15  /** ID for label association */
16  id?: string;
17  /** Whether the checkbox is in an indeterminate state */
18  indeterminate?: boolean;
19  /** Accessible name for the checkbox */
20  name?: string;
21  /** Callback when the checked state changes */
22  onCheckedChange?: (checked: boolean) => void;
23  /** Whether the checkbox is required */
24  required?: boolean;
25  /** Value attribute for form submission */
26  value?: string;
27}
28 
29const CheckmarkPath = motion.path;
30const MotionSvg = motion.svg;
31 
32export default function Checkbox({
33  checked = false,
34  indeterminate = false,
35  onCheckedChange,
36  disabled = false,
37  className,
38  name,
39  value,
40  id,
41  required,
42}: CheckboxProps) {
43  const shouldReduceMotion = useReducedMotion();
44 
45  const derivedState = indeterminate
46    ? "indeterminate"
47    : checked
48      ? "checked"
49      : "unchecked";
50 
51  const handleChange = (state: boolean | "indeterminate") => {
52    if (state === "indeterminate") {
53      return;
54    }
55    onCheckedChange?.(state);
56  };
57 
58  return (
59    <CheckboxPrimitive.Root
60      aria-checked={indeterminate ? "mixed" : checked}
61      checked={indeterminate ? "indeterminate" : checked}
62      className={cn(
63        "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-foreground data-[state=indeterminate]:border-foreground data-[state=checked]:bg-foreground data-[state=indeterminate]:bg-foreground data-[state=unchecked]:bg-background data-[state=checked]:text-background data-[state=indeterminate]:text-background dark:data-[state=unchecked]:bg-input/30 dark:aria-invalid:ring-destructive/40",
64        className
65      )}
66      data-slot="checkbox"
67      disabled={disabled}
68      id={id}
69      name={name}
70      onCheckedChange={handleChange}
71      required={required}
72      value={value}
73    >
74// … truncated