Progreso.

<div class="ui-sample ui-progress-row" data-progress-bar><div class="ui-progress-row__header"><label for="progress-0">Importando 6.842 filas</label><output for="progress-0">32%</output></div><progress id="progress-0" value="32" max="100">32%</progress><small>Sin errores detectados</small></div>

<div class="ui-sample ui-progress-row border border-slate-300 bg-white p-4 text-slate-950" data-progress-bar><div class="ui-progress-row__header"><label for="progress-0">Importando 6.842 filas</label><output for="progress-0">32%</output></div><progress id="progress-0" value="32" max="100">32%</progress><small class="text-sm text-slate-600">Sin errores detectados</small></div>

export interface ProgressBarProps {
  /** Id de la barra; la etiqueta y el valor visible apuntan a él. Usa uno distinto por barra en la página. */
  id?: string;
  /** Qué se está procesando, con la cantidad total si se conoce; vacío omite la etiqueta. */
  label?: string;
  /** Avance actual, en la misma unidad que `max`. */
  value?: number;
  /** Valor que corresponde a la tarea completa (100 %). */
  max?: number;
  /** Texto legible del valor, en `<output>` y como respaldo de `<progress>`; por defecto, el porcentaje redondeado (`32%`). */
  valueText?: string;
  /** Nota bajo la barra, como errores o advertencias encontrados; vacía se omite. */
  description?: string;
  className?: string;
}

/**
 * Barra de progreso con etiqueta y porcentaje, para una tarea larga cuyo avance se puede medir (importación, carga, exportación).
 *
 * Usa el elemento nativo `<progress>`. Si el avance no se puede medir, usa `Spinner`.
 *
 * @example <ProgressBar id="importacion" label="Importando 6.842 filas" value={2190} max={6842} />
 * @example <ProgressBar id="importacion" label="Importando 6.842 filas" value={4652} max={6842} description="2 advertencias requieren revisión" />
 */
export function ProgressBar({
  id = "progress-0",
  label = "Importando 6.842 filas",
  value = 32,
  max = 100,
  valueText,
  description = "Sin errores detectados",
  className,
}: ProgressBarProps) {
  const porcentaje = max > 0 ? Math.round(Math.min(Math.max(value / max, 0), 1) * 100) : 0;
  const texto = valueText || `${porcentaje}%`;
  return (
    <div className={["ui-progress-row", className].filter(Boolean).join(" ")} data-progress-bar>
      <div className="ui-progress-row__header">
        {label ? <label htmlFor={id}>{label}</label> : null}
        <output htmlFor={id}>{texto}</output>
      </div>
      <progress id={id} value={value} max={max}>{texto}</progress>
      {description ? <small>{description}</small> : null}
    </div>
  );
}