{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-indicator",
  "title": "Spotlight Indicator",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A glowing rail that slides to the active item in a vertical nav — the same indicator powering this site's sidebar.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/microkit/spotlight-indicator.tsx",
      "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { Clock, Heart, Layers } from \"lucide-react\";\n\nconst items = [\n  { label: \"All components\", Icon: Layers },\n  { label: \"Recently viewed\", Icon: Clock },\n  { label: \"Favorites\", Icon: Heart },\n];\n\nexport function SpotlightIndicator() {\n  const navRef = useRef<HTMLDivElement>(null);\n  const barRef = useRef<HTMLSpanElement>(null);\n  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const animatedRef = useRef(false);\n  const [active, setActive] = useState(0);\n\n  useEffect(() => {\n    const nav = navRef.current;\n    const bar = barRef.current;\n    const button = buttonRefs.current[active];\n    if (!nav || !bar || !button) return;\n    const navRect = nav.getBoundingClientRect();\n    const buttonRect = button.getBoundingClientRect();\n    bar.style.top = `${buttonRect.top - navRect.top + 4}px`;\n    bar.style.height = `${buttonRect.height - 8}px`;\n    const frame = requestAnimationFrame(() => { animatedRef.current = true; });\n    return () => cancelAnimationFrame(frame);\n  }, [active]);\n\n  return (\n    <div ref={navRef} className=\"relative flex w-[210px] flex-col gap-0.5 rounded-lg border border-[light-dark(#dfe3ea,#2f333a)] bg-[light-dark(#ffffff,#101216)] p-1.5\">\n      <span ref={barRef} className=\"pointer-events-none absolute left-1 w-0.5 rounded-sm bg-[#f97316] shadow-[2px_0_5px_rgba(249,115,22,.8),4px_0_11px_rgba(249,115,22,.45)] transition-[top,height] duration-300 ease-[cubic-bezier(.4,0,.2,1)]\" />\n      {items.map(({ label, Icon }, index) => (\n        <button\n          key={label}\n          ref={(element) => { buttonRefs.current[index] = element; }}\n          className={`flex items-center gap-2.5 rounded-md bg-transparent px-3 py-2 text-left text-xs transition-colors duration-300 hover:bg-[light-dark(#f0f2f5,#17191d)] hover:text-[light-dark(#262d38,#e4e6e9)] ${active === index ? \"text-[light-dark(#14181e,#f6f7f8)]\" : \"text-[light-dark(#545d6a,#a9afb8)]\"}`}\n          onClick={() => setActive(index)}\n        >\n          <Icon className={active === index ? \"text-[#f97316]\" : \"opacity-40\"} size={15} />\n          {label}\n        </button>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/spotlight-indicator.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/spotlight-indicator",
  "categories": [
    "navigation",
    "click"
  ],
  "type": "registry:component"
}