Motion Highlight

import MotionHighlight from '@/components/ui/motion-highlight.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <MotionHighlight />
    </div>
  )
}

'use client'
/* eslint-disable react-hooks/preserve-manual-memoization, react-hooks/refs */

import * as React from 'react'

import type { Transition } from 'motion/react'
import { AnimatePresence, motion } from 'motion/react'

import { cn } from '@/lib/utils'

type MotionHighlightMode = 'children' | 'parent'

type Bounds = {
  top: number
  left: number
  width: number
  height: number
}

type MotionHighlightContextType<T extends string> = {
  mode: MotionHighlightMode
  activeValue: T | null
  setActiveValue: (value: T | null) => void
  setBounds: (bounds: DOMRect) => void
  clearBounds: () => void
  id: string
  hover: boolean
  className?: string
  activeClassName?: string
  setActiveClassName: (className: string) => void
  transition?: Transition
  disabled?: boolean
  enabled?: boolean
  exitDelay?: number
  forceUpdateBounds?: boolean
}

const MotionHighlightContext = React.createContext<
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  MotionHighlightContextType<any> | undefined
>(undefined)

function useMotionHighlight<T extends string>(): MotionHighlightContextType<T> {
  const context = React.useContext(MotionHighlightContext)

  if (!context) {
    throw new Error('useMotionHighlight must be used within a MotionHighlightProvider')
  }

  return context as unknown as MotionHighlightContextType<T>
}

type BaseMotionHighlightProps<T extends string> =