Motion Highlight

1'use client'
2 
3/* Vendored Animate UI component. Its hook patterns (controlled-value sync,
4   manual memoization) trip the React Compiler's optimization lints; disable
5   them here rather than rewriting third-party code and risking behavior drift. */
6/* eslint-disable react-hooks/preserve-manual-memoization, react-hooks/set-state-in-effect */
7 
8import * as React from 'react'
9 
10import type { Transition } from 'motion/react'
11import { AnimatePresence, motion } from 'motion/react'
12 
13import { cn } from '@/lib/utils'
14 
15type MotionHighlightMode = 'children' | 'parent'
16 
17type Bounds = {
18  top: number
19  left: number
20  width: number
21  height: number
22}
23 
24type MotionHighlightContextType<T extends string> = {
25  mode: MotionHighlightMode
26  activeValue: T | null
27  setActiveValue: (value: T | null) => void
28  setBounds: (bounds: DOMRect) => void
29  clearBounds: () => void
30  id: string
31  hover: boolean
32  className?: string
33  activeClassName?: string
34  setActiveClassName: (className: string) => void
35  transition?: Transition
36  disabled?: boolean
37  enabled?: boolean
38  exitDelay?: number
39  forceUpdateBounds?: boolean
40}
41 
42const MotionHighlightContext = React.createContext<
43  // eslint-disable-next-line @typescript-eslint/no-explicit-any
44  MotionHighlightContextType<any> | undefined
45>(undefined)
46 
47function useMotionHighlight<T extends string>(): MotionHighlightContextType<T> {
48  const context = React.useContext(MotionHighlightContext)
49 
50  if (!context) {
51    throw new Error('useMotionHighlight must be used within a MotionHighlightProvider')
52  }
53 
54  return context as unknown as MotionHighlightContextType<T>
55}
56 
57type BaseMotionHighlightProps<T extends string> = {
58  mode?: MotionHighlightMode
59  value?: T | null
60  defaultValue?: T | null
61  onValueChange?: (value: T | null) => void
62  className?: string
63  transition?: Transition
64  hover?: boolean
65  disabled?: boolean
66  enabled?: boolean
67  exitDelay?: number
68}
69 
70type ParentModeMotionHighlightProps = {
71  boundsOffset?: Partial<Bounds>
72  containerClassName?: string
73  forceUpdateBounds?: boolean
74}
75 
76type ControlledParentModeMotionHighlightProps<T extends string> = BaseMotionHighlightProps<T> &
77  ParentModeMotionHighlightProps & {
78    mode: 'parent'
79    controlledItems: true
80    children: React.ReactNode
81  }
82 
83type ControlledChildrenModeMotionHighlightProps<T extends string> = BaseMotionHighlightProps<T> & {
84  mode?: 'children' | undefined
85  controlledItems: true
86  children: React.ReactNode
87}
88 
89// … truncated