{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "description": "Animated table with proximity-based row hover highlighting and fluid border transitions. Includes TableHeader, TableBody, TableRow, TableHead, and TableCell sub-components.",
  "dependencies": [
    "framer-motion"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "utils",
    "https://zeron-ui.vercel.app/r/springs.json",
    "https://zeron-ui.vercel.app/r/use-proximity-hover.json"
  ],
  "files": [
    {
      "path": "src/components/ui/table.tsx",
      "content": "\"use client\";\n\nimport {\n  useRef,\n  useEffect,\n  useMemo,\n  createContext,\n  useContext,\n  forwardRef,\n  type ReactNode,\n  type HTMLAttributes,\n  type TdHTMLAttributes,\n  type ThHTMLAttributes,\n} from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { cn } from \"@/lib/utils\";\nimport { spring } from \"@/lib/springs\";\nimport { useProximityHover } from \"@/hooks/use-proximity-hover\";\n\n// ── Context ──────────────────────────────────────────────\n\ninterface TableContextValue {\n  registerItem: (index: number, element: HTMLElement | null) => void;\n  activeIndex: number | null;\n}\n\nconst TableContext = createContext<TableContextValue | null>(null);\n\n// ── Table ────────────────────────────────────────────────\n\ninterface TableProps extends HTMLAttributes<HTMLTableElement> {\n  children: ReactNode;\n}\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n  ({ children, className, ...props }, ref) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const {\n      activeIndex,\n      itemRects,\n      sessionRef,\n      handlers,\n      registerItem,\n      measureItems,\n    } = useProximityHover(containerRef);\n\n    useEffect(() => {\n      measureItems();\n    }, [measureItems, children]);\n\n    const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;\n\n    const contextValue = useMemo(\n      () => ({ registerItem, activeIndex }),\n      [registerItem, activeIndex]\n    );\n\n    return (\n      <TableContext.Provider value={contextValue}>\n        <div\n          ref={containerRef}\n          className=\"relative\"\n          onMouseEnter={handlers.onMouseEnter}\n          onMouseMove={handlers.onMouseMove}\n          onMouseLeave={handlers.onMouseLeave}\n        >\n          {/* Hover background */}\n          <AnimatePresence>\n            {activeRect && (\n              <motion.div\n                key={sessionRef.current}\n                className=\"absolute bg-hover pointer-events-none\"\n                initial={{\n                  opacity: 0,\n                  top: activeRect.top,\n                  left: activeRect.left,\n                  width: activeRect.width,\n                  height: activeRect.height,\n                }}\n                animate={{\n                  opacity: 1,\n                  top: activeRect.top,\n                  left: activeRect.left,\n                  width: activeRect.width,\n                  height: activeRect.height,\n                }}\n                exit={{ opacity: 0, transition: spring.fast.exit }}\n                transition={{\n                  ...spring.fast,\n                  opacity: { duration: spring.fast.duration },\n                }}\n              />\n            )}\n          </AnimatePresence>\n\n          <table\n            ref={ref}\n            className={cn(\"w-full text-body border-collapse\", className)}\n            {...props}\n          >\n            {children}\n          </table>\n        </div>\n      </TableContext.Provider>\n    );\n  }\n);\n\nTable.displayName = \"Table\";\n\n// ── TableHeader ──────────────────────────────────────────\n\nconst TableHeader = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"\", className)} {...props} />\n));\n\nTableHeader.displayName = \"TableHeader\";\n\n// ── TableBody ────────────────────────────────────────────\n\nconst TableBody = forwardRef<\n  HTMLTableSectionElement,\n  HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody ref={ref} className={cn(\"\", className)} {...props} />\n));\n\nTableBody.displayName = \"TableBody\";\n\n// ── TableRow ─────────────────────────────────────────────\n\ninterface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n  index?: number;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ index, className, style, ...props }, ref) => {\n    const internalRef = useRef<HTMLTableRowElement>(null);\n    const ctx = useContext(TableContext);\n\n    useEffect(() => {\n      if (index === undefined || !ctx) return;\n      ctx.registerItem(index, internalRef.current);\n      return () => ctx.registerItem(index, null);\n    }, [index, ctx]);\n\n    const isBodyRow = index !== undefined;\n    const activeIdx = ctx?.activeIndex ?? null;\n    const hideBorder = activeIdx !== null && (\n      (isBodyRow && (index === activeIdx || index === activeIdx - 1)) ||\n      (!isBodyRow && activeIdx === 0)\n    );\n\n    return (\n      <tr\n        ref={(node) => {\n          (internalRef as React.MutableRefObject<HTMLTableRowElement | null>).current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) (ref as React.MutableRefObject<HTMLTableRowElement | null>).current = node;\n        }}\n        data-proximity-index={index}\n        className={cn(\n          \"group/row relative z-content border-b transition-[border-color] duration-fast\",\n          hideBorder ? \"border-border\" : \"border-border\",\n          isBodyRow && activeIdx === index && \"is-active\",\n          className,\n          isBodyRow ? \"font-normal\" : \"font-medium\"\n        )}\n        style={style}\n        {...props}\n      />\n    );\n  }\n);\n\nTableRow.displayName = \"TableRow\";\n\n// ── TableHead ────────────────────────────────────────────\n\nconst TableHead = forwardRef<\n  HTMLTableCellElement,\n  ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"px-3 py-2 text-left text-body font-medium text-fg-default\",\n      className\n    )}\n    {...props}\n  />\n));\n\nTableHead.displayName = \"TableHead\";\n\n// ── TableCell ────────────────────────────────────────────\n\nconst TableCell = forwardRef<\n  HTMLTableCellElement,\n  TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\n      \"px-3 py-2 text-fg-muted transition-colors duration-fast group-[.is-active]/row:text-fg-default\",\n      className\n    )}\n    {...props}\n  />\n));\n\nTableCell.displayName = \"TableCell\";\n\n// ── Exports ──────────────────────────────────────────────\n\nexport { Table, TableHeader, TableBody, TableRow, TableHead, TableCell };\n",
      "type": "registry:ui",
      "target": "components/ui/table.tsx"
    }
  ],
  "type": "registry:ui"
}