Controles de mapa.

<section class="ui-sample ui-map" data-map-controls="true"><strong>Controles del mapa</strong><div role="toolbar" aria-label="Vista cartográfica"><button class="btn btn--icon" type="button" aria-label="Acercar">+</button><button class="btn btn--icon" type="button" aria-label="Alejar">−</button><button class="btn btn--secondary" type="button">Mi ubicación</button><button class="btn btn--secondary" type="button">Pantalla completa</button></div><small>Fuente: mapa base de OpenStreetMap</small></section>

<section class="ui-sample ui-map border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-map-controls="true"><strong>Controles del mapa</strong><div role="toolbar" aria-label="Vista cartográfica"><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Acercar">+</button><button class="btn btn--icon border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" aria-label="Alejar">−</button><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">Mi ubicación</button><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">Pantalla completa</button></div><small class="text-sm text-slate-600">Fuente: mapa base de OpenStreetMap</small></section>

import type { MouseEventHandler } from "react";

export interface MapControlsItem {
  /** Nombre de la acción; con `icon` queda sólo como nombre accesible (`aria-label`). */
  label: string;
  /** Carácter visible en lugar del texto («+», «−»). */
  icon?: string;
  /** Estado de un control que se activa y desactiva (`aria-pressed`); sin valor, el botón no es conmutable. */
  pressed?: boolean;
  disabled?: boolean;
  onClick?: MouseEventHandler<HTMLButtonElement>;
}

export interface MapControlsProps {
  /** Título visible sobre la barra. */
  title?: string;
  /** Nombre accesible de la barra (`aria-label`). */
  label?: string;
  /** Botones de la barra, en orden; sin botones el componente no se renderiza. */
  items?: MapControlsItem[];
  /** Fuente del mapa base que se navega, con su prefijo («Fuente: …»); vacío la oculta. */
  source?: string;
  className?: string;
}

const CONTROLES: MapControlsItem[] = [
  { label: "Acercar", icon: "+" },
  { label: "Alejar", icon: "−" },
  { label: "Mi ubicación" },
  { label: "Pantalla completa" },
];

/**
 * Barra de controles de un mapa (acercar, alejar, ubicación, pantalla completa), para navegar la vista cartográfica.
 *
 * Es un `role="toolbar"`; los botones con `icon` son cuadrados (`btn--icon`) y se nombran con `label` para lectores de pantalla. Un control conmutable (`pressed`) se ve invertido mientras está activo.
 *
 * @example <MapControls items={[{ label: "Acercar", icon: "+", onClick: acercar }, { label: "Alejar", icon: "−", onClick: alejar }, { label: "Restablecer norte", onClick: orientar }]} />
 */
export function MapControls({
  title = "Controles del mapa",
  label = "Vista cartográfica",
  items = CONTROLES,
  source = "Fuente: mapa base de OpenStreetMap",
  className,
}: MapControlsProps) {
  if (!items.length) return null;
  return (
    <section className={["ui-map", className].filter(Boolean).join(" ")} data-map-controls>
      {title ? <strong>{title}</strong> : null}
      <div role="toolbar" aria-label={label}>
        {items.map((item, i) => (
          <button
            key={`${item.label}-${i}`}
            className={item.icon ? "btn btn--icon" : "btn btn--secondary"}
            type="button"
            aria-label={item.icon ? item.label : undefined}
            aria-pressed={item.pressed}
            disabled={item.disabled}
            onClick={item.onClick}
          >
            {item.icon || item.label}
          </button>
        ))}
      </div>
      {source ? <small>{source}</small> : null}
    </section>
  );
}