Checkbox Group

1"use client";
2 
3import {
4  Children,
5  cloneElement,
6  createContext,
7  forwardRef,
8  isValidElement,
9  useCallback,
10  useContext,
11  useEffect,
12  useMemo,
13  useRef,
14  useState,
15  type HTMLAttributes,
16  type ReactElement,
17  type ReactNode,
18} from "react";
19import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
20import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group";
21import { motion, AnimatePresence, useReducedMotion } from "motion/react";
22 
23import { cn } from "@/lib/utils";
24import { spring } from "@/lib/springs";
25import { ProximityHoverPill } from "@/components/ui/proximity-hover-pill";
26import { useProximityHover } from "@/hooks/use-proximity-hover";
27import { useMergeSplit } from "@/hooks/use-merge-split";
28 
29type CheckboxProps = Omit<CheckboxPrimitive.Root.Props, "inputRef">;
30 
31const Checkbox = forwardRef<HTMLElement, CheckboxProps>(
32  (
33    {
34      className,
35      checked: checkedProp,
36      defaultChecked,
37      onCheckedChange,
38      disabled = false,
39      indeterminate = false,
40      ...props
41    },
42    ref,
43  ) => {
44    const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked ?? false);
45    const checked = checkedProp ?? uncontrolledChecked;
46 
47    const applyChecked = (
48      next: boolean,
49      eventDetails: CheckboxPrimitive.Root.ChangeEventDetails,
50    ) => {
51      if (checkedProp === undefined) setUncontrolledChecked(next);
52      onCheckedChange?.(next, eventDetails);
53    };
54 
55    const hasMountedRef = useRef(false);
56    useEffect(() => {
57      hasMountedRef.current = true;
58    }, []);
59 
60    const reduceMotion = useReducedMotion();
61    const markEnterTransition =
62      reduceMotion || !hasMountedRef.current
63        ? { duration: 0 }
64        : { ...spring.quick.enter, delay: 0.06 };
65    const markExitTransition = reduceMotion ? { duration: 0 } : spring.fast.exit;
66 
67    return (
68      <CheckboxPrimitive.Root
69        ref={ref}
70        data-slot="checkbox"
71        checked={checked}
72        disabled={disabled}
73        indeterminate={indeterminate}
74        onCheckedChange={applyChecked}
75        className={cn(
76// … truncated