Escala.

<div class="ui-sample ui-map" data-map-scale="true"><div aria-hidden="true"><span></span><span></span></div><strong>500 m</strong><small>Fuente: IDE Chile · escala aproximada a la latitud de Santiago</small></div>

<div class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950" data-map-scale="true"><div aria-hidden="true"><span></span><span></span></div><strong>500 m</strong><small class="text-sm text-slate-600">Fuente: IDE Chile · escala aproximada a la latitud de Santiago</small></div>

export interface MapScaleProps {
  /** Distancia que representa la barra, con su unidad («500 m», «2 km»). */
  distance?: string;
  /** Criterio u origen de la escala («Escala aproximada a la latitud de Santiago», «Fuente: …»); vacío lo oculta. */
  source?: string;
  className?: string;
}

/**
 * Escala gráfica que acompaña a un mapa para medir distancias: barra con la distancia que representa en el nivel de zoom actual.
 *
 * La barra es decorativa (`aria-hidden`); la distancia se lee como texto. Actualiza `distance` al cambiar el zoom.
 *
 * @example <MapScale distance="2 km" />
 */
export function MapScale({
  distance = "500 m",
  source = "Fuente: IDE Chile · escala aproximada a la latitud de Santiago",
  className,
}: MapScaleProps) {
  return (
    <div className={["ui-map", className].filter(Boolean).join(" ")} data-map-scale>
      <div aria-hidden="true">
        <span></span>
        <span></span>
      </div>
      {distance ? <strong>{distance}</strong> : null}
      {source ? <small>{source}</small> : null}
    </div>
  );
}