Checkbox Group

1"use client";
2 
3import {
4  useRef,
5  useState,
6  useEffect,
7  createContext,
8  useContext,
9  forwardRef,
10  type ReactNode,
11  type HTMLAttributes,
12} from "react";
13import { motion, AnimatePresence } from "framer-motion";
14import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
15import { cn } from "@/lib/utils";
16import { spring } from "@/lib/springs";
17import { fontWeights } from "@/lib/font-weight";
18import { useProximityHover } from "@/hooks/use-proximity-hover";
19import { useMergeSplitBlocks, SelectionBackgrounds } from "@/hooks/use-merge-split";
20import { useShape } from "@/lib/shape-context";
21 
22interface CheckboxGroupContextValue {
23  registerItem: (index: number, element: HTMLElement | null) => void;
24  activeIndex: number | null;
25}
26 
27const CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(
28  null
29);
30 
31function useCheckboxGroup() {
32  const ctx = useContext(CheckboxGroupContext);
33  if (!ctx)
34    throw new Error("useCheckboxGroup must be used within a CheckboxGroup");
35  return ctx;
36}
37 
38interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
39  children: ReactNode;
40  checkedIndices: Set<number>;
41}
42 
43const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
44  ({ children, checkedIndices, className, ...props }, ref) => {
45    const containerRef = useRef<HTMLDivElement>(null);
46    const groupIdCounter = useRef(0);
47    const prevGroupMap = useRef(new Map<number, number>());
48 
49    const {
50      activeIndex,
51      setActiveIndex,
52      itemRects,
53      sessionRef,
54      handlers,
55      registerItem,
56      measureItems,
57    } = useProximityHover(containerRef);
58 
59    useEffect(() => {
60      measureItems();
61    }, [measureItems, children]);
62 
63    // Group contiguous checked indices into runs with stable IDs
64    const runs: { start: number; end: number }[] = [];
65    const sortedChecked = [...checkedIndices].sort((a, b) => a - b);
66    for (const idx of sortedChecked) {
67      const last = runs[runs.length - 1];
68      if (last && idx === last.end + 1) {
69        last.end = idx;
70      } else {
71        runs.push({ start: idx, end: idx });
72      }
73    }
74 
75    // Assign stable IDs: reuse previous ID if any member overlaps
76    const usedIds = new Set<number>();
77    const newGroupMap = new Map<number, number>();
78    const checkedGroups = runs.map((run) => {
79      let stableId: number | null = null;
80      for (let i = run.start; i <= run.end; i++) {
81        const prevId = prevGroupMap.current.get(i);
82// … truncated