Nota marginal.

<aside class="ui-sample ui-content" data-margin-note aria-label="Nota 1"><sup>1</sup><p>Un cero indica medición sin casos; un vacío indica ausencia de dato.</p></aside>

<aside class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-margin-note aria-label="Nota 1"><sup>1</sup><p>Un cero indica medición sin casos; un vacío indica ausencia de dato.</p></aside>

import type { ReactNode } from "react";

export interface MarginNoteProps {
  /** Número de la nota; coincide con la llamada en el texto. Vacío omite el superíndice. */
  number?: number | string;
  /** Nombre accesible de la nota (`aria-label`); por defecto «Nota» y el número. */
  label?: string;
  /** Texto de la nota; un texto se envuelve en un párrafo. Vacío no emite la nota. */
  children?: ReactNode;
  className?: string;
}

/**
 * Nota marginal numerada que aclara un dato o una decisión metodológica junto al párrafo que la llama.
 *
 * @example <MarginNote number={2}>La serie cambió de base en 2024.</MarginNote>
 */
export function MarginNote({
  number = 1,
  label,
  children = "Un cero indica medición sin casos; un vacío indica ausencia de dato.",
  className,
}: MarginNoteProps) {
  if (children == null || children === false || children === "") return null;
  const numero = number === "" ? null : number;
  return (
    <aside
      className={["ui-content", className].filter(Boolean).join(" ")}
      data-margin-note
      aria-label={label || (numero === null ? "Nota" : `Nota ${numero}`)}
    >
      {numero === null ? null : <sup>{numero}</sup>}
      {typeof children === "string" ? <p>{children}</p> : children}
    </aside>
  );
}