Highlight

1"use client";
2import * as React from "react";
3import { AnimatePresence, motion } from "motion/react";
4 
5import { cn } from "@/registry/optics/lib/utils";
6 
7const HighlightContext = React.createContext(
8	// eslint-disable-next-line @typescript-eslint/no-explicit-any
9	undefined,
10);
11 
12function useHighlight() {
13	const context = React.useContext(HighlightContext);
14	if (!context) {
15		throw new Error("useHighlight must be used within a HighlightProvider");
16	}
17	return context;
18}
19 
20function Highlight({ ref, ...props }) {
21	const {
22		as: Component = "div",
23		children,
24		value,
25		defaultValue,
26		onValueChange,
27		className,
28		style,
29		transition = { type: "spring", stiffness: 350, damping: 35 },
30		hover = false,
31		click = true,
32		enabled = true,
33		controlledItems,
34		disabled = false,
35		exitDelay = 200,
36		mode = "children",
37	} = props;
38 
39	const localRef = React.useRef(null);
40	React.useImperativeHandle(ref, () => localRef.current);
41 
42	const [activeValue, setActiveValue] = React.useState(
43		value ?? defaultValue ?? null,
44	);
45	const [boundsState, setBoundsState] = React.useState(null);
46	const [activeClassNameState, setActiveClassNameState] = React.useState("");
47 
48	const safeSetActiveValue = React.useCallback(
49		(id) => {
50			setActiveValue((prev) => (prev === id ? prev : id));
51			if (id !== activeValue) onValueChange?.(id);
52		},
53		[activeValue, onValueChange],
54	);
55 
56	const safeSetBounds = React.useCallback(
57		(bounds) => {
58			if (!localRef.current) return;
59 
60			const boundsOffset = props?.boundsOffset ?? {
61				top: 0,
62				left: 0,
63				width: 0,
64				height: 0,
65			};
66 
67			const containerRect = localRef.current.getBoundingClientRect();
68			const newBounds = {
69				top: bounds.top - containerRect.top + (boundsOffset.top ?? 0),
70				left: bounds.left - containerRect.left + (boundsOffset.left ?? 0),
71				width: bounds.width + (boundsOffset.width ?? 0),
72				height: bounds.height + (boundsOffset.height ?? 0),
73			};
74 
75			setBoundsState((prev) => {
76				if (
77					prev &&
78					prev.top === newBounds.top &&
79					prev.left === newBounds.left &&
80					prev.width === newBounds.width &&
81					prev.height === newBounds.height
82				) {
83					return prev;
84				}
85				return newBounds;
86			});
87		},
88		[props],
89	);
90 
91	const clearBounds = React.useCallback(() => {
92		setBoundsState((prev) => (prev === null ? prev : null));
93	}, []);
94 
95	React.useEffect(() => {
96		if (value !== undefined) setActiveValue(value);
97		else if (defaultValue !== undefined) setActiveValue(defaultValue);
98	}, [value, defaultValue]);
99 
100// … truncated