{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toc",
  "type": "registry:ui",
  "title": "Toc",
  "description": "Table of contents nav with anchor links indented by heading level and a highlighted active item. Pair it with scroll tracking for docs and long articles.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/toc.tsx",
      "type": "registry:ui",
      "target": "components/ui/toc.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\n/** An indented table of contents for a docs page, with the current section highlighted. */\ntype TocItem = { id: string; title: string; level?: 1 | 2 | 3 }\n\ntype TocProps = {\n  /** Headings in page order. Defaults to the Lumen API guide. */\n  items?: TocItem[]\n  /** The id of the section in view. Without it, clicks track the active entry. */\n  activeId?: string\n  className?: string\n}\n\nconst SAMPLE_ITEMS: TocItem[] = [\n  { id: \"overview\", title: \"Overview\", level: 1 },\n  { id: \"getting-started\", title: \"Getting started\", level: 1 },\n  { id: \"install\", title: \"Install the CLI\", level: 2 },\n  { id: \"authenticate\", title: \"Authenticate\", level: 2 },\n  { id: \"invoices\", title: \"Invoices\", level: 1 },\n  { id: \"create-invoice\", title: \"Create an invoice\", level: 2 },\n  { id: \"line-items\", title: \"Line items\", level: 3 },\n  { id: \"webhooks\", title: \"Webhooks\", level: 1 },\n]\n\nfunction Toc({ items = SAMPLE_ITEMS, activeId, className }: TocProps) {\n  // Uncontrolled: the last clicked entry is active. The sample starts on a section so the demo shows the state.\n  const [internal, setInternal] = React.useState<string | undefined>(() => (items === SAMPLE_ITEMS ? \"install\" : undefined))\n  const current = activeId ?? internal\n  return (\n    <nav data-slot=\"toc\" aria-label=\"Table of contents\" className={cn(\"w-full max-w-56 space-y-1\", className)}>\n      {items.map((item) => (\n        <a\n          key={item.id}\n          href={`#${item.id}`}\n          aria-current={current === item.id ? \"location\" : undefined}\n          onClick={() => setInternal(item.id)}\n          className={cn(\n            \"block rounded-md px-2 py-1 text-sm outline-none hover:bg-sunken focus-visible:ring-2 focus-visible:ring-accent\",\n            item.level === 3 && \"pl-6\",\n            item.level === 2 && \"pl-4\",\n            current === item.id ? \"bg-sunken font-medium text-fg\" : \"text-fg-muted\"\n          )}\n        >\n          {item.title}\n        </a>\n      ))}\n    </nav>\n  )\n}\nexport { Toc }\nexport type { TocProps, TocItem }\n"
    }
  ]
}