Tabs de navegación.

<div class="ui-sample ui-tabs" role="tablist" aria-label="Representación"><button role="tab" aria-selected="true" aria-controls="panel-html-0">HTML</button><button role="tab" aria-selected="false" aria-controls="panel-react-0">React</button><button role="tab" aria-selected="false">JSON</button></div>

<div class="ui-sample ui-tabs border border-slate-300 bg-white p-4 text-slate-950" role="tablist" aria-label="Representación"><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" role="tab" aria-selected="true" aria-controls="panel-html-0">HTML</button><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" role="tab" aria-selected="false" aria-controls="panel-react-0">React</button><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" role="tab" aria-selected="false">JSON</button></div>

export interface TabsNavItem {
  label: string;
  /** Id del panel que muestra la pestaña (`aria-controls`); se omite si no hay panel. */
  panelId?: string;
  /** Pestaña activa; recibe `aria-selected="true"`. */
  selected?: boolean;
}

export interface TabsNavProps {
  /** Nombre accesible del grupo de pestañas. */
  label?: string;
  /** Pestañas en orden; marca una con `selected`. */
  items?: TabsNavItem[];
  /** Se llama al pulsar una pestaña, con la pestaña y su posición. */
  onSelect?: (item: TabsNavItem, index: number) => void;
  className?: string;
}

const TABS_NAV_ITEMS: TabsNavItem[] = [
  { label: "HTML", panelId: "panel-html-0", selected: true },
  { label: "React", panelId: "panel-react-0" },
  { label: "JSON" },
];

/**
 * Pestañas que cambian entre vistas del mismo contenido (por ejemplo, HTML, React y JSON de un componente).
 *
 * Sin estado interno: la pestaña activa llega con `selected` y `onSelect` avisa el cambio. Cada pestaña apunta a su panel con `panelId`.
 *
 * @example <TabsNav label="Formato" items={[{ label: "Tabla", panelId: "panel-tabla", selected: true }, { label: "Gráfico", panelId: "panel-grafico" }]} onSelect={(_, i) => elegir(i)} />
 */
export function TabsNav({ label = "Representación", items = TABS_NAV_ITEMS, onSelect, className }: TabsNavProps) {
  if (!items.length) return null;
  return (
    <div className={["ui-tabs", className].filter(Boolean).join(" ")} role="tablist" aria-label={label}>
      {items.map((item, i) => (
        <button
          key={i}
          role="tab"
          aria-selected={item.selected ? "true" : "false"}
          aria-controls={item.panelId}
          onClick={onSelect ? () => onSelect(item, i) : undefined}
        >
          {item.label}
        </button>
      ))}
    </div>
  );
}