Número documental.

<div class="ui-sample ui-document" data-document-number="true"><code>CDS-CTR-2026-014</code><dl><div><dt>Fondo</dt><dd>CDS</dd></div><div><dt>Serie</dt><dd>CTR</dd></div><div><dt>Año</dt><dd>2026</dd></div><div><dt>Correlativo</dt><dd>014</dd></div></dl><button class="btn btn--secondary" type="button" data-copy-value="CDS-CTR-2026-014">Copiar número</button></div>

<div class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950" data-document-number="true"><code>CDS-CTR-2026-014</code><dl class="grid gap-2"><div><dt>Fondo</dt><dd>CDS</dd></div><div><dt>Serie</dt><dd>CTR</dd></div><div><dt>Año</dt><dd>2026</dd></div><div><dt>Correlativo</dt><dd>014</dd></div></dl><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" data-copy-value="CDS-CTR-2026-014">Copiar número</button></div>

import type { MouseEventHandler } from "react";

export interface DocumentNumberItem {
  /** Nombre de la parte del número (`<dt>`): fondo, serie, año o correlativo. */
  label: string;
  value: string;
}

export interface DocumentNumberProps {
  /** Partes del número, en el orden en que se escriben. */
  items?: DocumentNumberItem[];
  /** Número completo; por defecto, los valores de `items` unidos con guiones. */
  value?: string;
  /** Texto del botón de copiar; vacío oculta el botón. */
  copyLabel?: string;
  /** Se llama al pulsar el botón de copiar; el número está en `data-copy-value`. */
  onCopy?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const DOCUMENT_NUMBER_ITEMS: DocumentNumberItem[] = [
  { label: "Fondo", value: "CDS" },
  { label: "Serie", value: "CTR" },
  { label: "Año", value: "2026" },
  { label: "Correlativo", value: "014" },
];

/**
 * Número documental desglosado en fondo, serie, año y correlativo, con botón para copiarlo; se usa en la ficha de un documento archivado para citarlo o buscarlo.
 *
 * El número se arma uniendo los valores de `items` con guiones; pasa `value` si sigue otro formato. Copiar es un botón secundario (`btn btn--secondary`).
 *
 * @example <DocumentNumber items={[{ label: "Fondo", value: "COCHID" }, { label: "Serie", value: "CNV" }, { label: "Año", value: "2025" }, { label: "Correlativo", value: "007" }]} onCopy={copiar} />
 */
export function DocumentNumber({
  items = DOCUMENT_NUMBER_ITEMS,
  value,
  copyLabel = "Copiar número",
  onCopy,
  className,
}: DocumentNumberProps) {
  const numero = value ?? items.map((item) => item.value).join("-");
  return (
    <div className={["ui-document", className].filter(Boolean).join(" ")} data-document-number>
      {numero ? <code>{numero}</code> : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {numero && copyLabel ? (
        <button className="btn btn--secondary" type="button" data-copy-value={numero} onClick={onCopy}>{copyLabel}</button>
      ) : null}
    </div>
  );
}