Panel lateral.

<aside class="ui-sample ui-drawer" data-drawer="true" aria-labelledby="drawer-title-0"><header><h3 id="drawer-title-0">Filtros</h3><button class="btn btn--icon" type="button" aria-label="Cerrar panel">×</button></header><div><p>248 conjuntos de datos coinciden con la búsqueda.</p><label><input type="checkbox" checked=""/> Con fuente declarada</label><label><input type="checkbox"/> Con cobertura regional</label></div><footer><button class="btn btn--primary" type="button">Aplicar filtros</button><button class="btn btn--quiet" type="button">Limpiar</button></footer></aside>

<aside class="ui-sample ui-drawer border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-drawer="true" aria-labelledby="drawer-title-0"><header class="flex flex-wrap items-center justify-between gap-3"><h3 id="drawer-title-0">Filtros</h3><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="Cerrar panel">×</button></header><div><p>248 conjuntos de datos coinciden con la búsqueda.</p><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox" checked=""/> Con fuente declarada</label><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="checkbox"/> Con cobertura regional</label></div><footer class="flex flex-wrap items-center justify-between gap-3"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Aplicar filtros</button><button class="btn btn--quiet border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Limpiar</button></footer></aside>

import type { ChangeEventHandler, MouseEventHandler, ReactNode } from "react";

export interface DrawerOption {
  label: string;
  /** Nombre y valor de la casilla al enviar un formulario. */
  name?: string;
  value?: string;
  /** Estado inicial de una casilla no controlada. */
  defaultChecked?: boolean;
  /** Estado de una casilla controlada; va junto con `onChange`. */
  checked?: boolean;
  /** Se llama al marcar o desmarcar la casilla, controlada o no. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
}

export interface DrawerProps {
  title?: string;
  /** Id del panel, al que apunta el `aria-controls` del botón que lo abre; el título usa `${id}-titulo` salvo que pases `titleId`. */
  id?: string;
  /** Id del título, referido por `aria-labelledby`; reemplaza el derivado de `id`. */
  titleId?: string;
  /** Muestra el panel; con `false` queda en el DOM con `hidden`. */
  open?: boolean;
  /** Nombre accesible del botón con la equis que cierra el panel. */
  closeLabel?: string;
  /** Texto introductorio del cuerpo, como el número de resultados que afectan los filtros. */
  description?: string;
  /** Casillas del cuerpo, como filtros o preferencias. */
  options?: DrawerOption[];
  /** Contenido libre que va después de la descripción y las casillas. */
  children?: ReactNode;
  /** Texto de la acción principal; vacío la oculta. */
  confirmLabel?: string;
  /** Texto de la acción que limpia o restablece; vacío la oculta. */
  resetLabel?: string;
  onConfirm?: MouseEventHandler<HTMLButtonElement>;
  onReset?: MouseEventHandler<HTMLButtonElement>;
  /** Se llama al pulsar la equis. */
  onClose?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

const OPTIONS: DrawerOption[] = [
  { label: "Con fuente declarada", defaultChecked: true },
  { label: "Con cobertura regional" },
];

/**
 * Panel lateral con título, cuerpo y acciones para filtros, detalle de un registro o ajustes que complementan la página.
 *
 * Una vista que debe poder enlazarse necesita URL propia, no un panel. La página decide si se ve con `open`; la equis llama a `onClose`.
 *
 * @example <Drawer id="filtros" title="Filtros" options={[{ label: "Con fuente declarada", defaultChecked: true }]} onConfirm={aplicar} onReset={limpiar} onClose={cerrar} />
 * @example <Drawer id="detalle" title="Detalle del registro" description="Folio 184, ingresado el 3 de agosto de 2026." options={[]} confirmLabel="" resetLabel="" onClose={cerrar} />
 */
export function Drawer({
  title = "Filtros",
  id,
  titleId,
  open = true,
  closeLabel = "Cerrar panel",
  description = "248 conjuntos de datos coinciden con la búsqueda.",
  options = OPTIONS,
  children,
  confirmLabel = "Aplicar filtros",
  resetLabel = "Limpiar",
  onConfirm,
  onReset,
  onClose,
  className,
}: DrawerProps) {
  const tituloId = titleId ?? (id ? `${id}-titulo` : "drawer-title-0");
  const cuerpo = Boolean(description) || options.length > 0 || (children !== undefined && children !== null);
  return (
    <aside className={["ui-drawer", className].filter(Boolean).join(" ")} id={id} data-drawer aria-labelledby={tituloId} hidden={!open}>
      <header>
        <h3 id={tituloId}>{title}</h3>
        <button className="btn btn--icon" type="button" aria-label={closeLabel} onClick={onClose}>×</button>
      </header>
      {cuerpo ? (
        <div>
          {description ? <p>{description}</p> : null}
          {options.map((option, i) => {
            const controlado = option.checked !== undefined && option.onChange !== undefined;
            return (
              <label key={`${option.label}-${i}`}>
                <input
                  type="checkbox"
                  name={option.name}
                  value={option.value}
                  onChange={option.onChange}
                  {...(controlado ? { checked: option.checked } : { defaultChecked: option.checked ?? option.defaultChecked })}
                />
                {` ${option.label}`}
              </label>
            );
          })}
          {children}
        </div>
      ) : null}
      {confirmLabel || resetLabel ? (
        <footer>
          {confirmLabel ? <button className="btn btn--primary" type="button" onClick={onConfirm}>{confirmLabel}</button> : null}
          {resetLabel ? <button className="btn btn--quiet" type="button" onClick={onReset}>{resetLabel}</button> : null}
        </footer>
      ) : null}
    </aside>
  );
}