{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"description": "Animated underline that tracks hover/active state and slides beneath nav items. Use with data-link-index on list items.",
	"files": [
		{
			"content": "\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface AnimatedUnderlineProps {\n  containerRef: React.RefObject<HTMLElement | null>;\n  activeIndex: number;\n  itemSelector?: string;\n  className?: string;\n  transitionDuration?: number;\n}\n\nfunction findTargetElement(container: HTMLElement, activeIndex: number, itemSelector: string): HTMLElement | null {\n  const items = Array.from(container.querySelectorAll<HTMLElement>(itemSelector)).filter((el) => {\n    const style = window.getComputedStyle(el);\n    return style.display !== \"none\";\n  });\n  const target = items.find((el) => el.getAttribute(\"data-link-index\") === String(activeIndex));\n  return target ?? null;\n}\n\nexport function AnimatedUnderline({\n  containerRef,\n  activeIndex,\n  itemSelector = \"li[data-link-index]\",\n  className,\n  transitionDuration = 200,\n}: AnimatedUnderlineProps) {\n  const [style, setStyle] = useState<React.CSSProperties>({ opacity: 0 });\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container || activeIndex < 0) {\n      setStyle({ opacity: 0 });\n      return;\n    }\n\n    const target = findTargetElement(container, activeIndex, itemSelector);\n    if (!target) {\n      setStyle({ opacity: 0 });\n      return;\n    }\n\n    const containerRect = container.getBoundingClientRect();\n    const targetRect = target.getBoundingClientRect();\n\n    setStyle({\n      opacity: 1,\n      transform: `translateX(${targetRect.left - containerRect.left}px)`,\n      width: `${targetRect.width}px`,\n    });\n  }, [activeIndex, containerRef, itemSelector]);\n\n  return (\n    <div\n      className={cn(\"absolute h-full bg-primary ease-out motion-reduce:transition-none\", className)}\n      style={{\n        ...style,\n        transition: `transform ${transitionDuration}ms, width ${transitionDuration}ms, opacity ${transitionDuration}ms`,\n      }}\n      aria-hidden={true}\n    />\n  );\n}\n",
			"path": "registry/new-york/animated-underline/animated-underline.tsx",
			"type": "registry:component"
		}
	],
	"name": "animated-underline",
	"title": "Animated Underline",
	"type": "registry:component"
}