Índice documental.

<nav class="ui-sample ui-document" data-document-toc="true" aria-label="Índice del documento"><strong>Contrato FYD-184</strong><ol><li><a href="#primera">Primera. Objeto</a></li><li><a href="#segunda">Segunda. Precio</a></li><li><a aria-current="location" href="#tercera">Tercera. Obligaciones</a></li><li><a href="#firmas">Firmas</a></li></ol></nav>

<nav class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 flex flex-wrap items-center gap-3" data-document-toc="true" aria-label="Índice del documento"><strong>Contrato FYD-184</strong><ol class="grid gap-2"><li><a class="underline underline-offset-4" href="#primera">Primera. Objeto</a></li><li><a class="underline underline-offset-4" href="#segunda">Segunda. Precio</a></li><li><a class="underline underline-offset-4" aria-current="location" href="#tercera">Tercera. Obligaciones</a></li><li><a class="underline underline-offset-4" href="#firmas">Firmas</a></li></ol></nav>

export interface DocumentTocItem {
  /** Título de la cláusula o parte («Primera. Objeto»). */
  label: string;
  /** Ancla de la parte dentro del documento. */
  href: string;
  /** Parte que se está leyendo; recibe `aria-current="location"`. */
  current?: boolean;
}

export interface DocumentTocProps {
  /** Nombre accesible del `<nav>`. */
  label?: string;
  /** Nombre del documento sobre el índice; vacío lo oculta. */
  title?: string;
  /** Partes del documento, en orden; marca con `current` la que se está leyendo. */
  items?: DocumentTocItem[];
  className?: string;
}

const DOCUMENT_TOC_ITEMS: DocumentTocItem[] = [
  { label: "Primera. Objeto", href: "#primera" },
  { label: "Segunda. Precio", href: "#segunda" },
  { label: "Tercera. Obligaciones", href: "#tercera", current: true },
  { label: "Firmas", href: "#firmas" },
];

/**
 * Índice de las partes de un documento largo (cláusulas, capítulos, firmas) con enlaces a cada una; se usa junto al texto para saltar entre partes.
 *
 * Cada entrada es un enlace a un ancla, así funciona sin JavaScript. La parte visible lleva `current`.
 *
 * @example <DocumentToc title="Contrato FYD-184" items={[{ label: "Primera. Objeto", href: "#primera", current: true }, { label: "Firmas", href: "#firmas" }]} />
 */
export function DocumentToc({
  label = "Índice del documento",
  title = "Contrato FYD-184",
  items = DOCUMENT_TOC_ITEMS,
  className,
}: DocumentTocProps) {
  return (
    <nav className={["ui-document", className].filter(Boolean).join(" ")} data-document-toc aria-label={label}>
      {title ? <strong>{title}</strong> : null}
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.href}-${i}`}>
              <a aria-current={item.current ? "location" : undefined} href={item.href}>{item.label}</a>
            </li>
          ))}
        </ol>
      ) : null}
    </nav>
  );
}