LanguageSwitcherDropdown

export function LanguageSwitcherDropdownSpecimen() {
  const [idioma, setIdioma] = useState('es')
  const [abierto, setAbierto] = useState(true)

  return (
    <Stage label="LanguageSwitcherDropdown · la lista sola, adentro del menú de usuario" tall>
      <div className="flex w-full max-w-[260px] flex-col items-center gap-2 px-1 py-1">
        <div className="w-full overflow-hidden rounded-xl border border-content/10 bg-container">
          <div className="border-b border-content/10 px-3 py-2.5 text-xs font-medium text-content">
            Carlos Martín Pavón
          </div>
          <button
            type="button"
            onClick={() => setAbierto((v) => !v)}
            className="w-full px-3 py-2 text-left text-xs text-content transition-colors hover:bg-upper"
          >
            Idioma
          </button>
          {abierto && (
            <div className="border-t border-content/10 p-1.5">
              <LanguageSwitcherDropdown
                languages={[
                  { code: 'es', name: 'Español', shortName: 'ES', flag: '🇪🇸' },
                  { code: 'en', name: 'English', shortName: 'EN', flag: '🇬🇧' },
                ]}
                currentLanguage={idioma}
                onLanguageChange={setIdioma}
                onSelect={() => setAbierto(false)}
              />
            </div>
          )}
        </div>
        <p className="text-center text-[11px] text-content/60">
          Elegir cierra el panel: eso lo hace `onSelect`, no `onLanguageChange`. Sin él, el menú
          queda abierto después de elegir.
        </p>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · LanguageSwitcherDropdownSpecimen: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.