Table

1"use client";
2 
3import {
4  useRef,
5  useEffect,
6  useMemo,
7  createContext,
8  useContext,
9  forwardRef,
10  type ReactNode,
11  type HTMLAttributes,
12  type TdHTMLAttributes,
13  type ThHTMLAttributes,
14} from "react";
15import { motion, AnimatePresence } from "framer-motion";
16import { cn } from "@/lib/utils";
17import { spring } from "@/lib/springs";
18import { fontWeights } from "@/lib/font-weight";
19import { useProximityHover } from "@/hooks/use-proximity-hover";
20 
21// ── Context ──────────────────────────────────────────────
22 
23interface TableContextValue {
24  registerItem: (index: number, element: HTMLElement | null) => void;
25  activeIndex: number | null;
26}
27 
28const TableContext = createContext<TableContextValue | null>(null);
29 
30// ── Table ────────────────────────────────────────────────
31 
32interface TableProps extends HTMLAttributes<HTMLTableElement> {
33  children: ReactNode;
34}
35 
36const Table = forwardRef<HTMLTableElement, TableProps>(
37  ({ children, className, ...props }, ref) => {
38    const containerRef = useRef<HTMLDivElement>(null);
39 
40    const {
41      activeIndex,
42      itemRects,
43      sessionRef,
44      handlers,
45      registerItem,
46      measureItems,
47    } = useProximityHover(containerRef);
48 
49    useEffect(() => {
50      measureItems();
51    }, [measureItems, children]);
52 
53    const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
54 
55    const contextValue = useMemo(
56      () => ({ registerItem, activeIndex }),
57      [registerItem, activeIndex]
58    );
59 
60    return (
61      <TableContext.Provider value={contextValue}>
62        <div
63          ref={containerRef}
64          className="relative"
65          onMouseEnter={handlers.onMouseEnter}
66          onMouseMove={handlers.onMouseMove}
67          onMouseLeave={handlers.onMouseLeave}
68        >
69          {/* Hover background */}
70          <AnimatePresence>
71            {activeRect && (
72              <motion.div
73                key={sessionRef.current}
74                className="absolute bg-hover pointer-events-none"
75                initial={{
76                  opacity: 0,
77                  top: activeRect.top,
78                  left: activeRect.left,
79                  width: activeRect.width,
80                  height: activeRect.height,
81                }}
82                animate={{
83                  opacity: 1,
84// … truncated