Highlight

1"use client";
2 
3import * as React from "react";
4import { AnimatePresence, Transition, motion } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7 
8type HighlightMode = "children" | "parent";
9 
10type Bounds = {
11  top: number;
12  left: number;
13  width: number;
14  height: number;
15};
16 
17type HighlightContextType<T extends string> = {
18  mode: HighlightMode;
19  activeValue: T | null;
20  setActiveValue: (value: T | null) => void;
21  setBounds: (bounds: DOMRect) => void;
22  clearBounds: () => void;
23  id: string;
24  hover: boolean;
25  className?: string;
26  activeClassName?: string;
27  setActiveClassName: (className: string) => void;
28  transition?: Transition;
29  disabled?: boolean;
30  enabled?: boolean;
31  exitDelay?: number;
32  forceUpdateBounds?: boolean;
33};
34 
35const HighlightContext = React.createContext<
36  // eslint-disable-next-line @typescript-eslint/no-explicit-any
37  HighlightContextType<any> | undefined
38>(undefined);
39 
40function useHighlight<T extends string>(): HighlightContextType<T> {
41  const context = React.useContext(HighlightContext);
42  if (!context) {
43    throw new Error("useHighlight must be used within a HighlightProvider");
44  }
45  return context as unknown as HighlightContextType<T>;
46}
47 
48type BaseHighlightProps<T extends string> = {
49  mode?: HighlightMode;
50  value?: T | null;
51  defaultValue?: T | null;
52  onValueChange?: (value: T | null) => void;
53  className?: string;
54  transition?: Transition;
55  hover?: boolean;
56  disabled?: boolean;
57  enabled?: boolean;
58  exitDelay?: number;
59};
60 
61type ParentModeHighlightProps = {
62  boundsOffset?: Partial<Bounds>;
63  containerClassName?: string;
64  forceUpdateBounds?: boolean;
65};
66 
67type ControlledParentModeHighlightProps<T extends string> =
68  BaseHighlightProps<T> &
69    ParentModeHighlightProps & {
70      mode: "parent";
71      controlledItems: true;
72      children: React.ReactNode;
73    };
74 
75type ControlledChildrenModeHighlightProps<T extends string> =
76  BaseHighlightProps<T> & {
77    mode?: "children" | undefined;
78    controlledItems: true;
79    children: React.ReactNode;
80  };
81 
82type UncontrolledParentModeHighlightProps<T extends string> =
83  BaseHighlightProps<T> &
84    ParentModeHighlightProps & {
85      mode: "parent";
86      controlledItems?: false;
87      itemsClassName?: string;
88      children: React.ReactElement | React.ReactElement[];
89    };
90 
91type UncontrolledChildrenModeHighlightProps<T extends string> =
92  BaseHighlightProps<T> & {
93    mode?: "children";
94    controlledItems?: false;
95    itemsClassName?: string;
96// … truncated