Selector de capas.

<fieldset class="ui-sample ui-form" data-layer-switcher="true"><legend>Capas del mapa</legend><label class="ui-choice"><input type="checkbox" checked=""/> Comunas</label><label class="ui-choice"><input type="checkbox"/> Transporte</label><label class="ui-choice"><input type="checkbox"/> Equipamiento</label><small>Fuente: catálogo de capas COCHID</small></fieldset>

<fieldset class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-layer-switcher="true"><legend>Capas del mapa</legend><label class="ui-choice"><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox" checked=""/> Comunas</label><label class="ui-choice"><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox"/> Transporte</label><label class="ui-choice"><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox"/> Equipamiento</label><small class="text-sm text-slate-600">Fuente: catálogo de capas COCHID</small></fieldset>

import type { ChangeEventHandler } from "react";

export interface LayerSwitcherOption {
  /** Nombre visible de la capa. */
  label: string;
  /** Valor enviado con el formulario cuando la capa está marcada. */
  value?: string;
  /** Capa visible al inicio en un selector no controlado. */
  defaultChecked?: boolean;
  /** Capa visible en un selector controlado; va junto con `onChange` del selector. */
  checked?: boolean;
  /** Capa no disponible (por ejemplo, sin datos a la escala actual): la casilla no se puede marcar. */
  disabled?: boolean;
}

export interface LayerSwitcherProps {
  /** Título del grupo de capas. */
  legend?: string;
  /** Nombre compartido por las casillas, para enviar las capas marcadas con un formulario. */
  name?: string;
  /** Capas en el orden de la lista; sin capas no se muestra el selector. */
  options?: LayerSwitcherOption[];
  /** Se llama al marcar o desmarcar una capa; con él, `checked` de cada capa controla su casilla. Si cada capa tiene `value`, `event.target.value` indica cuál cambió. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Origen del catálogo de capas, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  className?: string;
}

const CAPAS: LayerSwitcherOption[] = [
  { label: "Comunas", defaultChecked: true },
  { label: "Transporte" },
  { label: "Equipamiento" },
];

/**
 * Selector de capas de un mapa: casillas para mostrar u ocultar cada capa temática, con título y fuente del catálogo.
 *
 * Varias capas pueden estar visibles a la vez. Sin `onChange`, cada casilla usa `defaultChecked` (o `checked`) como estado inicial. Una capa sin datos para la escala actual va con `disabled`.
 *
 * @example <LayerSwitcher name="capas" options={[{ label: "Comunas", value: "comunas", defaultChecked: true }, { label: "Transporte", value: "transporte", defaultChecked: true }]} />
 * @example <LayerSwitcher options={[{ label: "Comunas", checked: comunas }, { label: "Transporte", checked: transporte }]} onChange={alternarCapa} />
 */
export function LayerSwitcher({
  legend = "Capas del mapa",
  name,
  options = CAPAS,
  onChange,
  source = "Fuente: catálogo de capas COCHID",
  className,
}: LayerSwitcherProps) {
  if (!options.length) return null;
  return (
    <fieldset className={["ui-form", className].filter(Boolean).join(" ")} data-layer-switcher>
      {legend ? <legend>{legend}</legend> : null}
      {options.map((option, i) => {
        const controlado = option.checked !== undefined && onChange !== undefined;
        return (
          <label className="ui-choice" key={`${option.label}-${i}`}>
            <input
              name={name}
              type="checkbox"
              value={option.value}
              disabled={option.disabled}
              onChange={onChange}
              {...(controlado ? { checked: option.checked } : { defaultChecked: option.checked ?? option.defaultChecked })}
            />
            {` ${option.label}`}
          </label>
        );
      })}
      {source ? <small>{source}</small> : null}
    </fieldset>
  );
}